@charset "utf-8";
/* =========================================================
 * 소소도담 상품 상세페이지 스타일 (v2)
 * SOSODODAM_ITEM_DETAIL_V2 (2026-11-04)
 *
 * 적용: item.form.skin.php (갤러리, 구매 영역), item.info.skin.php (탭, 모바일 구매 시트)
 *
 * 설계 원칙
 *  1) 한 개의 폭: 페이지 안의 모든 덩어리(현재 위치, 갤러리, 구매 영역, 탭, 상세설명)가
 *     같은 가운데 정렬 폭(--ssd-w)과 같은 가장자리를 씁니다.
 *  2) 한 개의 리듬: 간격은 8의 배수(8, 16, 24, 32, 48), 둥글기는 20/16/14/10 네 단계만 씁니다.
 *  3) 기존 CSS 가 여러 겹(core default_shop.css, rb style.shop.css, custom.css, skin style.css,
 *     sosododam.service1.css)으로 !important 를 쓰고 있어서, 모든 선택자 앞에 #sit 을 붙여 아이디 수로 이기고,
 *     기존 규칙이 !important 로 잡은 속성에만 !important 를 씁니다.
 *     (!important 는 하나씩 빼 보며, 실제 5겹 위에서 결과가 바뀌는 것만 남겼습니다)
 *  4) 모바일 구매 시트(8번)는 동작을 결정하는 규칙이라 기존 값을 그대로 옮겼습니다.
 *
 * 구성: 1 토큰 / 2 폭과 배치 / 3 갤러리 / 4 구매 영역 / 5 옵션 / 6 버튼 / 7 탭과 상세설명
 *       8 모바일 구매 시트 / 9 작은 화면
 * ========================================================= */

/* ---------------------------------------------------------
 * 1. 토큰
 * --------------------------------------------------------- */
#sit,
#sct_location.view_location {
    --ssd-ink:        #3a3336;
    --ssd-ink-soft:   #5f5559;
    --ssd-muted:      #a39a9e;
    --ssd-line:       #f1e8eb;
    --ssd-line-2:     #eadfe3;
    --ssd-cream:      #fbf7f4;
    --ssd-white:      #ffffff;
    --ssd-pink:       #f7afc4;
    --ssd-pink-soft:  #fff1f5;
    --ssd-pink-deep:  #c95f82;
    --ssd-plum:       #865567;
    --ssd-on-pink:    #4a3139;
    --ssd-r-xl:       20px;
    --ssd-r-lg:       16px;
    --ssd-r-md:       14px;
    --ssd-r-sm:       10px;
    --ssd-w:          1120px;
}

/* ---------------------------------------------------------
 * 2. 폭과 배치
 *    PC(1101px 이상): 갤러리(왼쪽) + 구매 영역(오른쪽), 전체 폭 1120px 가운데 정렬
 *    1100px 이하: 갤러리 위, 구매 영역 아래, 폭 680px 가운데 정렬
 * --------------------------------------------------------- */
#sit {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ssd-w);
    margin-left: auto;
    margin-right: auto;
    color: var(--ssd-ink);
}
#sit #sit_ov_from,
#sit #sit_ov_from form { box-sizing: border-box; width: 100%; max-width: 100%; float: none; }
#sit #sit_ov_wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 48px;
    align-items: start;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 0 8px !important;
    border: 0;
}
#sit #sit_pvi { grid-column: 1; grid-row: 1; }
#sit #sit_ov  { grid-column: 2; grid-row: 1; }

@media (min-width: 1101px) {
    /* 현재 위치 줄: 테마가 오른쪽 위에 띄워 둔 것을 본문 폭에 맞춰 왼쪽 위 한 줄로 */
    html body #sct_location.view_location {
        display: block;
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        float: none;
        clear: both;
        width: min(var(--ssd-w), 100%);
        max-width: 100%;
        margin: 0 auto 20px;
        padding: 0;
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
    }
    html body.is_item .sub { padding-top: 20px; }
    #sit #sit_ov_from { margin-top: 0; }
    #sit { padding-left: 0; padding-right: 0; margin-bottom: 0; }
}
@media (max-width: 1100px) {
    #sit { max-width: 720px; }
    #sit #sit_ov_wrap {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 24px;
    }
    #sit #sit_ov_wrap > * { min-width: 0; max-width: 100%; }
    #sit #sit_pvi { grid-column: 1; grid-row: 1; }
    #sit #sit_ov  { grid-column: 1; grid-row: 2; }
    #sit #sit_ov select,
    #sit #sit_ov input[type="text"],
    #sit #sit_ov .select { max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 767px) {
    #sit #sit_ov_from { overflow-x: hidden; }
    #sit #sit_ov_wrap { gap: 20px; }
}

/* ---------------------------------------------------------
 * 3. 갤러리 (큰 이미지 + 아래 썸네일 줄)
 * --------------------------------------------------------- */
#sit #sit_pvi {
    position: relative;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    min-width: 0;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#sit #sit_pvi .gallery-top,
#sit #sit_pvi .gallery-top .swiper-slide,
#sit #sit_pvi .gallery-top .swiper-slide > img { border-radius: var(--ssd-r-xl); }
#sit #sit_pvi .gallery-top { border: 0; background: var(--ssd-cream); }
#sit #sit_pvi .gallery-top .swiper-slide > img { display: block; width: 100%; height: auto; }

/* 좌우 화살표 */
#sit #sit_pvi .swiper-button-next-bn,
#sit #sit_pvi .swiper-button-prev-bn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px !important;
    top: 50% !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .94) !important;
    color: var(--ssd-pink-deep);
    box-shadow: 0 4px 14px rgba(58, 51, 54, .14) !important;
    opacity: .92 !important;
    transition: opacity .18s ease, transform .18s ease;
}
#sit #sit_pvi .swiper-button-next-bn::after,
#sit #sit_pvi .swiper-button-prev-bn::after { display: none !important; content: none !important; }
#sit #sit_pvi .swiper-button-next-bn:hover,
#sit #sit_pvi .swiper-button-prev-bn:hover { opacity: 1 !important; transform: scale(1.05) !important; }
#sit #sit_pvi .swiper-button-next-bn svg,
#sit #sit_pvi .swiper-button-prev-bn svg { width: 19px !important; height: 19px !important; stroke-width: 1.8 !important; }
#sit #sit_pvi .swiper-button-next-bn { right: 12px !important; left: auto !important; }
#sit #sit_pvi .swiper-button-prev-bn { left: 12px !important; right: auto !important; }

/* 이미지 번호 (1 / 12) */
#sit #sit_pvi .sododam-gallery-counter {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 15;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 48px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(58, 51, 54, .58);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
}

/* 썸네일 줄 (폭은 스와이퍼가 정함) */
#sit #sit_pvi .gallery-thumbs { margin: 12px 0 0 !important; padding: 2px !important; }
#sit #sit_pvi .gallery-thumbs .swiper-slide {
    box-sizing: border-box;
    padding: 2px !important;
    border: 2px solid transparent !important;
    border-radius: var(--ssd-r-md) !important;
    background: var(--ssd-white) !important;
    opacity: .62 !important;
    cursor: pointer;
    transition: opacity .18s ease, border-color .18s ease;
}
#sit #sit_pvi .gallery-thumbs .swiper-slide:hover { opacity: .9 !important; }
#sit #sit_pvi .gallery-thumbs .swiper-slide-thumb-active { border-color: var(--ssd-pink) !important; opacity: 1 !important; }
#sit #sit_pvi .gallery-thumbs img { display: block; width: 100%; height: auto; border: 0 !important; border-radius: var(--ssd-r-sm) !important; }

/* 이미지가 한 장뿐이면 썸네일 줄과 번호 표시를 숨김 */
@supports selector(:has(*)) {
    #sit #sit_pvi .gallery-thumbs:has(.swiper-wrapper > .swiper-slide:only-child) { display: none; }
    #sit #sit_pvi:has(.gallery-top .swiper-wrapper > .swiper-slide:only-child) .sododam-gallery-counter { display: none !important; }
}

/* ---------------------------------------------------------
 * 4. 구매 영역 (오른쪽): 상품명, 가격, 후기, 정보 표
 * --------------------------------------------------------- */
#sit #sit_ov {
    position: relative;
    box-sizing: border-box;
    width: auto !important;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 0;
    float: none;
    margin: 0;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ssd-ink);
}
#sit #sit_ov #sit_title {
    margin: 0;
    padding: 0;
    color: var(--ssd-ink);
    font-size: 24px;
    font-weight: 700 !important;
    line-height: 1.4;
    word-break: keep-all;
    text-wrap: balance;
}
#sit #sit_ov #sit_desc {
    margin: 8px 0 0 !important;
    color: var(--ssd-muted);
    font-size: 14px !important;
    line-height: 1.55;
    word-break: keep-all;
}
#sit #sit_ov #sit_desc:empty { display: none; }

/* 찜 수 (위치는 테마 값 유지, 모양만 알약) */
#sit #sit_ov .rb_wish_cnt_wrap li { list-style: none; }
#sit #sit_ov .rb_wish_cnt_wrap dd { display: inline-flex; align-items: center; margin: 0; color: var(--ssd-pink-deep); font-size: 12px; }

/* 가격 */
#sit #sit_ov .rb_price_v_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 16px 0 0;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--ssd-line);
}
#sit #sit_ov .rb_price_v_wrap .pri {
    color: var(--ssd-ink);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}
#sit #sit_ov .rb_price_v_wrap .pri.main_color { color: var(--ssd-pink-deep) !important; }
#sit #sit_ov .rb_price_v_wrap del { color: var(--ssd-muted); font-size: 14px; }
#sit #sit_ov .rb_price_v_wrap .pri_per {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--ssd-pink-soft);
    color: var(--ssd-pink-deep);
    font-size: 13px;
    font-weight: 700;
}

/* 후기, 공유 */
#sit #sit_ov #sit_star_sns {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ssd-ink-soft);
    font-size: 13px;
}
#sit #sit_ov #sit_star_sns .sit_star { width: auto; height: 14px; }
#sit #sit_ov #sit_btn_opt { position: static; inset: auto !important; transform: none; z-index: auto !important; margin: 0; }
#sit #sit_ov .btn_sns_share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ssd-cream);
    color: var(--ssd-plum);
    font-size: 14px;
    font-weight: 400;
    float: none;
    cursor: pointer;
    transition: background .16s ease;
}
#sit #sit_ov .btn_sns_share:hover { background: var(--ssd-pink-soft); }
#sit #sit_ov .sns_area {
    padding: 8px;
    border: 1px solid var(--ssd-line);
    border-radius: var(--ssd-r-md);
    background: var(--ssd-white);
    box-shadow: 0 8px 24px rgba(58, 51, 54, .1);
}
#sit #sit_ov #sit_star_sns .sns_area { top: calc(100% + 6px) !important; right: 0 !important; }
#sit #sit_ov #sit_star_sns .sns_area a { border-radius: var(--ssd-r-sm); }

/* 정보 표 (재고, 포인트, 배송비, 택배사, 구매수량 ...) */
#sit #sit_ov .sit_info {
    margin: 16px 0 0 !important;
    padding: 4px 16px !important;
    border: 0;
    border-radius: var(--ssd-r-md);
    background: var(--ssd-cream);
}
#sit #sit_ov .sit_ov_tbl { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
#sit #sit_ov .sit_ov_tbl col.grid_3 { width: 88px; }
#sit #sit_ov .sit_ov_tbl th,
#sit #sit_ov .sit_ov_tbl td {
    padding: 10px 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
}
#sit #sit_ov .sit_ov_tbl th { width: 88px; color: var(--ssd-muted); font-weight: 500; }
#sit #sit_ov .sit_ov_tbl td { color: var(--ssd-ink); font-family: inherit !important; }
#sit #sit_ov .sit_ov_tbl tr + tr th,
#sit #sit_ov .sit_ov_tbl tr + tr td { border-top: 1px dashed var(--ssd-line-2); }
#sit #sit_ov .sdd-supplier-guide-link { display: inline; width: auto; height: auto; color: var(--ssd-pink-deep); font-weight: 600; text-decoration: none; }
#sit #sit_ov .sdd-supplier-guide-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------
 * 5. 옵션 선택, 선택된 옵션, 총 금액
 * --------------------------------------------------------- */
#sit #sit_ov .sit_option { margin: 20px 0 0; padding: 0; border: 0; }
#sit #sit_ov .sit_option + .sit_option { margin-top: 16px; }
#sit #sit_ov .sit_option h3,
#sit #sit_buy .sit_side_option h3 {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--ssd-ink);
    font-size: 14px;
    font-weight: 700;
}
/* 고양이 발바닥 */
#sit #sit_ov .sit_option h3::before,
#sit #sit_buy .sit_side_option h3::before {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23f7afc4'%3E%3Cellipse cx='5.5' cy='10' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.5' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14.5' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18.5' cy='10' rx='2.2' ry='2.8'/%3E%3Cpath d='M12 11c-3.2 0-6 3.2-6 5.7 0 1.9 1.6 2.8 3 2.8 1.2 0 2-.5 3-.5s1.8.5 3 .5c1.4 0 3-.9 3-2.8 0-2.5-2.8-5.7-6-5.7z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
#sit #sit_ov .get_item_options,
#sit #sit_ov .get_item_supply { margin: 0 0 12px; }
#sit #sit_ov .sit_option label,
#sit #sit_buy .sit_side_option label { display: block; margin: 0 0 4px; color: var(--ssd-muted); font-size: 12px; }
#sit #sit_ov .sit_option select {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid var(--ssd-line-2);
    border-radius: var(--ssd-r-lg);
    background-color: var(--ssd-white);
    color: var(--ssd-ink);
    font-family: inherit;
    font-size: 15px;
}
#sit #sit_ov .sit_option select:disabled { background-color: var(--ssd-cream); opacity: .6; }
#sit #sit_ov .sit_option select:focus-visible { outline: 2px solid var(--ssd-pink) !important; outline-offset: 1px; }

/* 옵션 버튼 (sosododam.item.options.js 가 <select> 를 버튼으로 바꿔 보여 줌)
   원래 선택창은 값 전달용으로 화면에서만 숨기고, 스크립트가 없으면 그대로 보입니다. */
#sit #sit_ov select.ssd-opt-native,
html body #sit_buy .sit_side_option select.ssd-opt-native {
    position: absolute !important;
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#sit .ssd-opt-enhanced { position: relative; }
#sit .ssd-opt-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
#sit .ssd-opt-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    min-width: 72px;
    max-width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--ssd-line-2);
    border-radius: var(--ssd-r-md);
    background: var(--ssd-white);
    color: var(--ssd-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    word-break: keep-all;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
#sit .ssd-opt-btn:hover:not(:disabled) { border-color: var(--ssd-pink); background: var(--ssd-pink-soft); }
#sit .ssd-opt-btn.is-on {
    border-color: var(--ssd-pink);
    background: var(--ssd-pink-soft);
    color: var(--ssd-on-pink);
    box-shadow: inset 0 0 0 1px var(--ssd-pink);
}
#sit .ssd-opt-btn:focus-visible { outline: 2px solid var(--ssd-pink-deep); outline-offset: 2px; }
#sit .ssd-opt-sub { color: var(--ssd-muted); font-size: 11px; font-weight: 500; line-height: 1.2; }
#sit .ssd-opt-btn.is-on .ssd-opt-sub { color: var(--ssd-pink-deep); }
#sit .ssd-opt-btn.is-soldout {
    border-style: dashed;
    background: var(--ssd-cream);
    color: var(--ssd-muted);
    cursor: not-allowed;
}
#sit .ssd-opt-btn.is-soldout .ssd-opt-name { text-decoration: line-through; }
html body #sit_buy .sit_side_option .get_side_item_options,
html body #sit_buy .sit_side_option .get_item_supply { margin: 0 0 14px; }
#sit .ssd-opt-hint {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--ssd-line-2);
    border-radius: var(--ssd-r-md);
    background: var(--ssd-cream);
    color: var(--ssd-muted);
    font-size: 13px;
    text-align: center;
}

/* 선택된 옵션 목록 */
#sit #sit_ov #sit_sel_option { margin: 0; padding: 0; border: 0; }
#sit #sit_ov #sit_sel_option > h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
#sit #sit_ov #sit_opt_added { margin: 4px 0 0; padding: 0; list-style: none; }
#sit #sit_ov .sit_opt_list,
#sit #sit_ov .sit_spl_list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    height: auto;
    margin: 0 0 8px !important;
    padding: 14px 16px;
    border: 0 !important;
    border-radius: var(--ssd-r-lg);
    background: var(--ssd-cream);
}
#sit #sit_ov .sit_opt_list .opt_name,
#sit #sit_ov .sit_spl_list .sit_opt_subj,
#sit #sit_ov .sit_opt_list > .sit_opt_subj {
    flex: 1 1 100%;
    color: var(--ssd-ink);
    font-size: 14px;
    font-weight: 600 !important;
    line-height: 1.45;
    word-break: keep-all;
}
#sit #sit_ov .sit_opt_list .opt_name .sit_opt_subj { color: inherit; font: inherit; font-weight: 600 !important; }
#sit #sit_ov .sit_opt_list .opt_count,
#sit #sit_ov .sit_opt_list > div:last-child,
#sit #sit_ov .sit_spl_list > div:last-child { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; margin: 0 !important; float: none !important; width: auto !important; height: auto !important; }
#sit #sit_ov .sit_opt_prc {
    float: none;
    width: auto;
    height: auto;
    margin: 0 auto 0 0;
    padding: 0;
    color: var(--ssd-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
}
#sit #sit_ov .sit_opt_list .opt_count .sit_opt_prc { margin: 0 auto 0 0 !important; }
#sit #sit_ov #sit_sel_option input[type="text"] {
    order: 2;
    float: none !important;
    width: 52px !important;
    height: 34px;
    padding: 0 4px !important;
    border: 1px solid var(--ssd-line-2);
    border-radius: var(--ssd-r-sm) !important;
    background: var(--ssd-white);
    color: var(--ssd-ink);
    font: inherit;
    font-size: 14px;
    text-align: center;
}
#sit #sit_ov #sit_sel_option button {
    float: none;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ssd-line-2);
    border-radius: 50%;
    background: var(--ssd-white);
    color: var(--ssd-ink-soft);
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}
#sit #sit_ov #sit_sel_option .sit_qty_minus,
#sit #sit_ov #sit_sel_option .sit_qty_plus { width: 34px; line-height: 1; }
#sit #sit_ov #sit_sel_option .sit_qty_minus { order: 1; }
#sit #sit_ov #sit_sel_option .sit_qty_plus  { order: 3; }
/* 스크립트(shop.js)가 만드는 글자형 버튼(증가, 감소, 삭제) */
#sit #sit_ov #sit_sel_option .btn_frmline.sit_qty_minus,
#sit #sit_ov #sit_sel_option .btn_frmline.sit_qty_plus { font-size: 0; }
#sit #sit_ov #sit_sel_option .btn_frmline.sit_qty_minus::before { content: "\2212"; font-size: 18px; }
#sit #sit_ov #sit_sel_option .btn_frmline.sit_qty_plus::before  { content: "+"; font-size: 18px; }
#sit #sit_ov #sit_sel_option .sit_opt_del {
    order: 4;
    position: static;
    width: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--ssd-line-2) !important;
    border-radius: 50% !important;
    color: var(--ssd-muted);
    font-size: 13px;
    top: auto !important;
}
#sit #sit_ov #sit_sel_option button:hover { border-color: var(--ssd-pink) !important; color: var(--ssd-pink-deep); }
#sit #sit_ov #sit_sel_option button:focus-visible,
#sit #sit_ov #sit_sel_option input:focus-visible { outline: 2px solid var(--ssd-pink); outline-offset: 1px; }

/* 총 금액 */
#sit #sit_ov #sit_tot_price {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    margin: 16px 0 0 !important;
    padding: 16px 0 0;
    border-top: 1px solid var(--ssd-line);
    color: var(--ssd-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
}
#sit #sit_ov #sit_tot_price:empty { display: none; }
#sit #sit_ov #sit_tot_price span { float: none; height: auto; margin: 0 auto 0 0; line-height: 1.4; text-align: left; }
#sit #sit_ov #sit_tot_price strong { height: auto; margin: 0; color: var(--ssd-pink-deep); font-size: 26px; font-weight: 800; line-height: 1.2; text-align: left; }

/* ---------------------------------------------------------
 * 6. 구매 버튼
 * --------------------------------------------------------- */
#sit #sit_ov #sit_ov_btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
}
/* 테마가 float 정리용으로 붙인 빈 요소가 격자 칸을 차지하지 않게 */
#sit #sit_ov #sit_ov_btn::before,
#sit #sit_ov #sit_ov_btn::after { display: none !important; content: none !important; }
#sit #sit_ov #sit_ov_btn button,
#sit #sit_ov #sit_ov_btn .sit_btn_wish {
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 8px;
    border-radius: var(--ssd-r-lg) !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
#sit #sit_ov #sit_ov_btn button.sit_btn_buy {
    order: 1;
    border: 1px solid var(--ssd-pink) !important;
    background: var(--ssd-pink) !important;
    color: var(--ssd-on-pink);
}
#sit #sit_ov #sit_ov_btn button.sit_btn_cart {
    order: 2;
    border: 1px solid var(--ssd-pink);
    background: var(--ssd-white);
    color: var(--ssd-plum);
}
#sit #sit_ov #sit_ov_btn .sit_btn_wish {
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--ssd-line-2);
    background: var(--ssd-pink-soft);
    color: var(--ssd-pink-deep);
    text-decoration: none;
}
#sit #sit_ov #sit_ov_btn button.sit_btn_buy:hover  { background: #f49bb6 !important; border-color: #f49bb6 !important; }
#sit #sit_ov #sit_ov_btn button.sit_btn_cart:hover { background: var(--ssd-pink-soft) !important; }
#sit #sit_ov #sit_ov_btn .sit_btn_wish:hover { background: var(--ssd-pink); color: var(--ssd-on-pink) !important; }
#sit #sit_ov #sit_ov_btn button:active,
#sit #sit_ov #sit_ov_btn .sit_btn_wish:active { transform: scale(.98); }
#sit #sit_ov #sit_ov_btn .sit_btn_wish svg { width: 22px; height: 22px; }
#sit #sit_ov #sit_ov_btn button:focus-visible,
#sit #sit_ov #sit_ov_btn a:focus-visible { outline: 2px solid var(--ssd-pink-deep); outline-offset: 2px; }

/* 재입고 알림, 네이버페이: 줄 전체 */
#sit #sit_ov #sit_btn_alm,
#sit #sit_ov .itemform-naverpay { grid-column: 1 / -1; width: 100%; max-width: 100%; }
#sit #sit_ov #sit_btn_alm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    float: none;
    height: 48px;
    margin: 0;
    border: 1px solid var(--ssd-line-2);
    border-radius: 999px !important;
    line-height: 1;
    background-color: var(--ssd-white) !important;
    color: var(--ssd-plum);
    font-size: 14px;
    font-weight: 600 !important;
    text-decoration: none;
}
#sit #sit_ov #sit_btn_alm:hover { background-color: var(--ssd-pink-soft) !important; }
/* 구매 버튼이 없을 때(품절): 재입고알림 + 찜을 한 줄에 */
@supports selector(:has(*)) {
    #sit #sit_ov #sit_ov_btn:not(:has(.sit_btn_buy)) { grid-template-columns: minmax(0, 1fr) 56px; }
    #sit #sit_ov #sit_ov_btn:not(:has(.sit_btn_buy)) #sit_btn_alm { grid-column: 1; order: 1; }
    #sit #sit_ov #sit_ov_btn:not(:has(.sit_btn_buy)) .sit_btn_wish { order: 2; }
}
/* 품절 안내 */
#sit #sit_ov #sit_ov_soldout {
    margin: 20px 0 0;
    padding: 14px 16px;
    border-radius: var(--ssd-r-lg);
    background: var(--ssd-pink-soft);
    color: var(--ssd-pink-deep);
    font-size: 14px;
    font-weight: 600 !important;
    text-align: center;
}

/* ---------------------------------------------------------
 * 7. 하단 탭과 상세설명 (밑줄형 탭, 폭은 위쪽과 같은 1120px)
 * --------------------------------------------------------- */
#sit #sit_info {
    display: block;
    width: 100%;
    min-height: 0 !important;
    box-sizing: border-box;
    margin: 56px 0 24px !important;
    padding: 0;
    border: 0;
}
#sit #sit_tab {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
}
#sit #sit_tab .tab_tit {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ssd-line) !important;
    border-radius: 0 !important;
    background: #fff;
    box-shadow: none;
    list-style: none;
    z-index: 20;
}
#sit #sit_tab .tab_tit::before,
#sit #sit_tab .tab_tit::after { display: none !important; content: none !important; }
#sit #sit_tab .tab_tit li {
    display: block;
    float: none;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
#sit #sit_tab .tab_tit li button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 56px !important;
    min-height: 0;
    margin: 0 0 -1px !important;
    padding: 0 8px !important;
    border: 0;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
    color: var(--ssd-muted) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}
#sit #sit_tab .tab_tit li button::before,
#sit #sit_tab .tab_tit li button::after { display: none !important; content: none !important; }
#sit #sit_tab .tab_tit li button:hover { background: transparent !important; color: var(--ssd-pink-deep) !important; }
#sit #sit_tab .tab_tit li button.selected {
    border-bottom-color: var(--ssd-pink) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ssd-ink) !important;
    font-weight: 700 !important;
}
#sit #sit_tab .tab_tit li button:focus-visible { outline: 2px solid var(--ssd-pink-deep); outline-offset: -2px; }
#sit #sit_tab .item_use_count,
#sit #sit_tab .item_qa_count,
#sit #sit_tab .tab_tit li button.selected .item_use_count,
#sit #sit_tab .tab_tit li button.selected .item_qa_count {
    display: inline;
    width: auto;
    min-width: 0;
    height: auto;
    margin-left: 4px !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit !important;
    font-size: .8em !important;
    font-weight: 500;
    opacity: .75;
}

#sit #sit_tab .tab_con {
    width: 100%;
    min-height: 0 !important;
    box-sizing: border-box;
    margin: 0;
    padding: 32px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none;
    overflow: visible !important;
}
#sit #sit_tab .tab_con > li { box-sizing: border-box; }
#sit #sit_use h2, #sit #sit_qa h2, #sit #sit_dex h2,
#sit #sit_tab .tab_con .contents_tit {
    margin: 0 0 20px;
    color: var(--ssd-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}
#sit #sit_dvr h3, #sit #sit_ex h3 { margin: 0 0 10px; color: var(--ssd-ink); font-size: 16px; font-weight: 700; }
#sit #sit_inf_explan { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; }
#sit #sit_inf_explan img { max-width: 100%; height: auto; }
#sit #sit_inf_open { width: 100%; border-collapse: collapse; }
#sit #sit_inf_open th,
#sit #sit_inf_open td { padding: 10px 12px; border: 0; border-bottom: 1px dashed var(--ssd-line-2); font-size: 13px; text-align: left; vertical-align: top; }
#sit #sit_inf_open th { width: 28%; background: var(--ssd-cream); color: var(--ssd-ink-soft); font-weight: 500; }

@media (max-width: 680px) {
    #sit #sit_tab .tab_tit { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    #sit #sit_tab .tab_tit::-webkit-scrollbar { display: none; }
    #sit #sit_tab .tab_tit li { flex: 0 0 auto; }
    #sit #sit_tab .tab_tit li button { padding: 0 18px !important; }
}

/* ---------------------------------------------------------
 * 8. 모바일 구매 시트 (1024px 이하)
 *    페이지 접속 시 닫힌 상태. "옵션 선택 · 구매하기" 버튼으로 열고, 배경이나 닫기 버튼으로 닫습니다.
 *    열고 닫는 동작은 item.info.skin.php 의 스크립트가 body 에 붙이는
 *    ssd-sheet-ready / ssd-sheet-open / ssd-inline-buy-on 클래스로 결정합니다. (스크립트는 변경 없음)
 * --------------------------------------------------------- */
.ssd-sheet-head,
.ssd-sheet-dim,
.sit_buy_tog .ssd-tog-label,
.sit_buy_tog_btn_up { display: none; }

@media (max-width: 1024px) {
    /* 배경 흐림 */
    .ssd-sheet-dim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 96;
        background: rgba(58, 51, 54, .32);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }
    body.ssd-sheet-open .ssd-sheet-dim {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .3s ease, visibility 0s;
    }

    /* 시트 본체: 기본은 닫힘 */
    html body #sit_buy.fix {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 640px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - var(--soso-mobile-dock-space, 0px) - 72px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff !important;
        border: 0 !important;
        border-radius: 22px 22px 0 0 !important;
        box-shadow: 0 -10px 36px rgba(58, 51, 54, .14) !important;
        z-index: 97 !important;
        transform: translateY(calc(100% + 180px));
        visibility: hidden;
        pointer-events: none;
        transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s !important;
    }
    @supports (height: 100dvh) {
        html body #sit_buy.fix { max-height: calc(100dvh - var(--soso-mobile-dock-space, 0px) - 72px) !important; }
    }
    html body.ssd-sheet-open #sit_buy.fix {
        transform: none;
        visibility: visible;
        pointer-events: auto;
        transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s !important;
    }
    html body #sit_buy .sit_buy_inner {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* 시트 머리: 손잡이와 닫기 */
    html body #sit_buy .ssd-sheet-head {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 3;
        height: 40px;
        background: #fff;
    }
    html body #sit_buy .ssd-sheet-grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--ssd-line-2); }
    html body #sit_buy .ssd-sheet-close {
        position: absolute;
        top: 6px;
        right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--ssd-cream);
        color: var(--ssd-plum);
        cursor: pointer;
    }

    /* 옵션 선택 */
    html body #sit_buy .sit_side_option { padding: 2px 18px 12px !important; border-bottom: 0 !important; }
    html body #sit_buy .sit_side_option h3 { margin: 0 0 10px !important; font-size: 15px !important; }
    html body #sit_buy .sit_side_option label { margin: 0 0 6px !important; font-size: 13px !important; }
    html body #sit_buy .sit_side_option select {
        width: 100% !important;
        height: 48px !important;
        margin: 0 0 10px !important;
        padding: 0 40px 0 14px !important;
        border: 1px solid var(--ssd-line-2) !important;
        border-radius: 12px !important;
        background-color: #fff !important;
        color: var(--ssd-ink) !important;
        font-size: 16px !important;
    }

    /* 선택된 옵션 */
    html body #sit_buy .sit_sel_option { height: auto !important; overflow: visible !important; padding: 0 18px !important; }
    html body #sit_buy .sit_sel_option li { padding: 12px 0 !important; }

    /* 합계와 버튼: 시트 안 하단 고정 */
    html body #sit_buy #sum_section.sum_section {
        position: sticky !important;
        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 12px 18px 16px !important;
        border: 0 !important;
        border-top: 1px solid var(--ssd-line) !important;
        background: #fff !important;
        translate: none !important;
        transform: none !important;
        z-index: 2 !important;
    }
    html body #sit_buy .sit_tot_price { padding-bottom: 10px !important; }
    html body #sit_buy .sit_tot_price:empty { display: none !important; }
    html body #sit_buy .sit_order_btn { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    html body #sit_buy .sit_order_btn button {
        float: none !important;
        width: 100% !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap;
    }
    html body #sit_buy .sit_order_btn .sit_btn_buy {
        order: 1;
        border: 1px solid var(--ssd-pink) !important;
        background: var(--ssd-pink) !important;
        color: var(--ssd-on-pink) !important;
    }
    html body #sit_buy .sit_order_btn .sit_btn_cart {
        order: 2;
        border: 1px solid var(--ssd-pink) !important;
        background: #fff !important;
        color: var(--ssd-plum) !important;
    }

    /* 닫힌 상태의 여는 버튼 (옵션 선택 · 구매하기) */
    html body #sit_buy_tog.sit_buy_tog {
        display: flex !important;
        justify-content: center;
        top: auto !important;
        right: 0 !important;
        bottom: 24px !important;
        left: 0 !important;
        width: 100% !important;
        height: 0 !important;
        overflow: visible !important;
        z-index: 95 !important;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s !important;
    }
    html body.ssd-sheet-ready:not(.ssd-sheet-open):not(.ssd-inline-buy-on) #sit_buy_tog.sit_buy_tog {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease, visibility 0s !important;
    }
    html body #sit_buy_tog .sit_buy_tog_btn_down { display: none !important; }
    html body #sit_buy_tog .sit_buy_tog_btn_up {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        position: absolute;
        bottom: 0;
        height: 46px;
        margin: 0 !important;
        padding: 0 22px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--ssd-pink) !important;
        color: var(--ssd-on-pink) !important;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 8px 22px rgba(201, 95, 130, .28) !important;
        pointer-events: auto;
        cursor: pointer;
    }
    html body #sit_buy_tog .sit_buy_tog_btn_up svg path[fill] { fill: var(--ssd-on-pink); }
    html body #sit_buy_tog .ssd-tog-label { display: inline; white-space: nowrap; }

    /* 시트가 열린 동안 떠 있는 상담, 앱 버튼 숨김 */
    body.ssd-sheet-open .sdc-contact-float,
    body.ssd-sheet-open #soso-pwa-launcher,
    body.ssd-sheet-open .chat_btn_pos_left,
    body.ssd-sheet-open .chat_btn_pos_right {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ---------------------------------------------------------
 * 9. 작은 화면 (767px 이하)
 * --------------------------------------------------------- */
@media (max-width: 767px) {
    #sit #sit_pvi .gallery-top,
    #sit #sit_pvi .gallery-top .swiper-slide,
    #sit #sit_pvi .gallery-top .swiper-slide > img { border-radius: var(--ssd-r-lg); }
    #sit #sit_pvi .swiper-button-next-bn,
    #sit #sit_pvi .swiper-button-prev-bn { width: 34px; height: 34px; margin-top: -17px !important; }
    #sit #sit_pvi .swiper-button-next-bn { right: 8px !important; }
    #sit #sit_pvi .swiper-button-prev-bn { left: 8px !important; }
    #sit #sit_pvi .swiper-button-next-bn svg,
    #sit #sit_pvi .swiper-button-prev-bn svg { width: 16px; height: 16px; }
    #sit #sit_pvi .sododam-gallery-counter { right: 8px !important; bottom: 8px !important; min-width: 44px; height: 24px; padding: 0 8px; font-size: 10px; }
    #sit #sit_pvi .gallery-thumbs { margin-top: 8px !important; }
    #sit #sit_pvi .gallery-thumbs .swiper-slide { padding: 1px !important; border-radius: var(--ssd-r-sm) !important; }
    #sit #sit_pvi .gallery-thumbs img { border-radius: 8px !important; }

    #sit #sit_ov #sit_title { font-size: 20px !important; }
    #sit #sit_ov .rb_price_v_wrap .pri { font-size: 26px; }
    #sit #sit_ov #sit_ov_btn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px; }
    #sit #sit_ov #sit_ov_btn button,
    #sit #sit_ov #sit_ov_btn .sit_btn_wish { height: 52px; font-size: 15px; }
    #sit #sit_ov #sit_ov_btn:not(:has(.sit_btn_buy)) { grid-template-columns: minmax(0, 1fr) 52px; }
    #sit .ssd-opt-btn { min-width: 64px; min-height: 48px; padding: 8px 14px; }
    #sit #sit_info { margin-top: 40px !important; }
    #sit #sit_tab .tab_con { padding-top: 24px !important; }
    #sit #sit_tab .tab_tit li button { height: 50px !important; font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
    #sit #sit_ov #sit_ov_btn button,
    #sit #sit_ov #sit_ov_btn a,
    #sit #sit_pvi .swiper-button-next-bn,
    #sit #sit_pvi .swiper-button-prev-bn,
    #sit #sit_buy.fix,
    .ssd-sheet-dim { transition: none; }
}