@charset "utf-8";
/**
 * 쇼핑몰 기본 스킨 스타일시트
 * Bootstrap 5.3.8 기반 모던 플랫 디자인
 * Clean Portal 디자인 시스템 (--gb-* CSS 변수)
 *
 * @version 20260303-001
 */

/* ==========================================================================
   1. 스킨 전용 CSS 변수
   ========================================================================== */
:root {
    --shop-card-shadow: var(--gb-shadow-sm);
    --shop-price-old: var(--gb-text-tertiary);
    --shop-icon1: #3ec1d3;  /* 히트 */
    --shop-icon2: #ffb722;  /* 추천 */
    --shop-icon3: #2dd49f;  /* 최신 */
    --shop-icon4: #556ee6;  /* 인기 */
    --shop-icon5: #ff5081;  /* 할인 */

    /* 탭 */
    --shop-tab-bg: var(--gb-surface-card);
    /* 오버레이 */
    --shop-overlay-dark: rgba(0,0,0,0.5);
    --shop-overlay-darker: rgba(0,0,0,0.6);
    --shop-overlay-darkest: rgba(0,0,0,0.75);
    --shop-overlay-light: rgba(255,255,255,0.85);
    --shop-overlay-light-subtle: rgba(0,0,0,0.08);
    --shop-overlay-input-bg: rgba(255,255,255,0.95);
    --shop-overlay-input-border: rgba(255,255,255,0.3);
    --shop-overlay-close-border: rgba(255,255,255,0.5);
    --shop-overlay-close-hover: rgba(255,255,255,0.15);
    --shop-soldout-border: rgba(255,255,255,0.6);
    /* 쿠폰 대상 배지 */
    --shop-cp-1-bg: #edfbde;
    --shop-cp-2-bg: #fbdef3;
    --shop-cp-3-bg: #fbf1de;
    --shop-cp-4-bg: #f2defb;
    /* 브랜드 */
    --brand-facebook: #1877f2;
}

[data-theme="dark"] {
    --shop-overlay-dark: rgba(0,0,0,0.65);
    --shop-overlay-darker: rgba(0,0,0,0.75);
    --shop-overlay-darkest: rgba(0,0,0,0.85);
    --shop-overlay-light: rgba(22,27,34,0.85);
    --shop-overlay-light-subtle: rgba(255,255,255,0.06);
    --shop-overlay-input-bg: rgba(30,33,40,0.95);
    --shop-overlay-input-border: rgba(255,255,255,0.15);
    --shop-overlay-close-border: rgba(255,255,255,0.3);
    --shop-overlay-close-hover: rgba(255,255,255,0.1);
    --shop-soldout-border: rgba(255,255,255,0.4);
    --shop-cp-1-bg: rgba(140,193,82,0.15);
    --shop-cp-2-bg: rgba(193,82,147,0.15);
    --shop-cp-3-bg: rgba(193,139,82,0.15);
    --shop-cp-4-bg: rgba(124,82,193,0.15);
}

/* ==========================================================================
   2. 사이드 GNB (카테고리 네비게이션)
   ========================================================================== */
#gnb { margin-bottom: 1rem; background: var(--gb-surface-card); border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius-lg); overflow: hidden; }
#gnb h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.gnb_1dli { position: relative; word-wrap: break-word; }
.gnb_1da { display: block; padding: 0 1.25rem; line-height: 3rem; color: var(--gb-text-primary); text-decoration: none; font-size: 1.067em; transition: background-color var(--gb-transition); }
.gnb_1da i { position: absolute; right: 0; top: 0; display: inline-block; color: var(--gb-text-tertiary); padding: 0.9rem; font-size: 1.45em; }
.gnb_1dli_on .gnb_1da { background-color: var(--gb-surface-raised); color: var(--gb-primary); font-weight: 600; text-decoration: none; }
.gnb_1dli_on .gnb_1da::after { position: absolute; left: -1px; top: 0; content: ""; background: var(--gb-primary); width: 3px; height: 100%; }
.gnb_2dul { display: none; z-index: 1000; position: absolute; border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius); padding: 0.625rem; background: var(--gb-surface-overlay); box-shadow: var(--gb-shadow-md); }
.gnb_1dli_over .gnb_2dul,
.gnb_1dli_over2 .gnb_2dul { display: inline-block; top: 0; left: 263px; width: 200px; }
.gnb_1dli_over .gnb_2dul::after,
.gnb_1dli_over2 .gnb_2dul::after { content: ""; position: absolute; top: 10px; left: -6px; display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid var(--gb-surface-overlay); }
.gnb_1dli_over .gnb_2dul::before,
.gnb_1dli_over2 .gnb_2dul::before { content: ""; position: absolute; top: 9px; left: -7px; display: inline-block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid var(--gb-border-default); }
.gnb_1dli_over .gnb_2da { display: block; padding: 0.375rem 0.625rem; line-height: 1.5; font-size: 1.083em; }
.gnb_2da:focus,
.gnb_2da:hover { text-decoration: none; color: var(--gb-primary); }

/* ==========================================================================
   3. 오늘 본 상품 사이드바
   ========================================================================== */
#stv { position: relative; height: 100%; }
#stv .li_empty { text-align: center; line-height: 100px; }
#stv_pg { display: block; position: fixed; right: 0; bottom: 0; width: 229px; text-align: center; margin-top: 0.625rem; padding: 1rem; line-height: 1.5; background: var(--gb-surface-card); border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius-lg) 0 0 0; box-shadow: var(--gb-shadow-sm); }
.stv_item { display: none; padding: 1rem; word-break: break-all; border-bottom: 1px solid var(--gb-border-subtle); }
.stv_item .prd_img { margin-right: 0.625rem; }
.stv_item .prd_cnt span { display: block; max-width: 105px; }
.stv_item .prd_cnt .prd_name { font-weight: 600; margin-bottom: 0.25rem; }
#stv_btn { position: absolute; top: 0.625rem; right: 0.625rem; width: 60px; height: 50px; }
#up { position: absolute; top: 0; left: 0; background: url('img/btn_sb_prev.png') no-repeat 50% 50%; width: 30px; height: 30px; text-indent: -999px; overflow: hidden; border: 0; }
#down { position: absolute; top: 0; right: 0; background: url('img/btn_sb_next.png') no-repeat 50% 50%; width: 30px; height: 30px; text-indent: -999px; overflow: hidden; border: 0; }

/* ==========================================================================
   4. 이벤트 링크
   ========================================================================== */
#sev { margin: 1.25rem 0; text-align: center; }
#sev header { margin: 0 0 1.25rem; }
#sev h2 { font-size: 1.5em; margin: 0 0 0.625rem; line-height: 1; }
#sev .ev_li .sev_img img { width: 100%; height: auto; border-radius: var(--gb-radius); }
#sev .ev_prd { border: 1px solid var(--gb-border-default); text-align: center; background: var(--gb-surface-card); border-radius: var(--gb-radius-lg); overflow: hidden; }
#sev .ev_prd li { position: relative; display: block; padding: 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gb-border-subtle); }
#sev .ev_prd li:last-child { border-bottom: 0; }
#sev .ev_prd .ev_prd_tit { display: block; color: var(--gb-text-primary); font-size: 1.1em; margin-bottom: 0.375rem; }
#sev .ev_prd .ev_txt_wr { max-width: 139px; }
#sev .ev_prd .ev_prd_price { font-weight: 700; display: block; margin: 0.375rem 0 0.625rem; font-size: 1.25em; }
#sev .ev_prd .sev_more { color: var(--gb-primary); background: var(--gb-surface-card); display: block; text-align: center; }

/* ==========================================================================
   5. 커뮤니티 링크
   ========================================================================== */
#scomm { padding: 1.25rem; }
#scomm h2 { margin: 0 0 0.375rem; }
#scomm li { display: block; margin: 0.25rem; }
#scomm li a { line-height: 1.75; color: var(--gb-text-secondary); text-decoration: none; transition: color var(--gb-transition); }
#scomm li a:hover { color: var(--gb-primary); }

/* ==========================================================================
   6. 메인 배너 / 캐러셀
   ========================================================================== */
#main_bn { border: 1px solid var(--gb-border-default); position: relative; margin: 1.25rem 0 1.875rem; border-radius: var(--gb-radius-lg); overflow: hidden; }
#main_bn .slide-wrap { padding: 0; margin: 0; }
#main_bn .slide-wrap img { max-width: 100%; height: auto; }
#main_bn .owl_pager { position: absolute; bottom: 0; left: 0; width: 100%; background: var(--gb-surface-card); border-top: 1px solid var(--gb-border-default); }
#main_bn .owl_pager ul { display: flex; }
#main_bn .owl_pager li { flex: 1; position: relative; border-left: 1px solid var(--gb-border-default); text-align: center; line-height: 2.875rem; font-size: 1.2em; }
#main_bn .owl_pager li:first-child { border-left: 0; }
#main_bn .owl_pager li a { display: block; }
#main_bn .owl_pager li a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--gb-border-default); }
#main_bn .owl_pager li.active a { color: var(--gb-primary); }
#main_bn .owl_pager li.active a::after { background: var(--gb-primary); top: -1px; }

.btn_wr { background: var(--shop-overlay-dark); display: inline-block; position: absolute; right: 1.25rem; bottom: 65px; border-radius: 1.875rem; padding: 0.25rem 0.375rem; }
#main_bn .btn_wr { z-index: 2; }
.btn_wr .pager-prev { margin-left: 0.375rem; font-weight: 700; }
.btn_wr .pager-next { margin-right: 0.375rem; font-weight: 700; }
.btn_wr .pager-prev,
.btn_wr .pager-next,
#slide-counter { display: inline-block; padding: 0.375rem; color: var(--gb-text-on-primary); }
#slide-counter { margin: 0 0.375rem; }

/* ==========================================================================
   7. 서브 배너
   ========================================================================== */
#sbn_side { position: relative; width: 100%; margin-bottom: 1.25rem; }
.sb_bn img { width: 100%; height: auto; border-radius: var(--gb-radius); }
#sbn_side h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#sbn_side .sb-bn-pagination { position: absolute; bottom: 0.625rem; left: 1rem; width: auto; }
#sbn_side .sb-bn-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--gb-text-on-primary); opacity: 0.5; }
#sbn_side .sb-bn-pagination .swiper-pagination-bullet-active { opacity: 1; }

/* ==========================================================================
   8. 장바구니 사이드바
   ========================================================================== */
#sbsk { position: relative; }
#sbsk li { position: relative; border-bottom: 1px solid var(--gb-border-subtle); padding: 1rem; }
#sbsk .go_cart { position: absolute; top: 0.75rem; right: 1rem; display: inline-block; height: 28px; line-height: 1.5; border: 1px solid var(--gb-border-default); color: var(--gb-primary); border-radius: var(--gb-radius-sm); background: var(--gb-surface-card); padding: 0.125rem 0.375rem; transition: background-color var(--gb-transition); }
#sbsk .btn_buy { padding: 1rem; font-weight: 700; text-align: center; }
#sbsk .li_empty { text-align: center; line-height: 100px; color: var(--gb-text-secondary); }
#sbsk .prd_img { margin-right: 0.625rem; }
#sbsk .prd_cnt a,
#sbsk .prd_cnt span { display: block; max-width: 105px; }
#sbsk .prd_cnt .prd_name { font-weight: 600; margin-bottom: 0.25rem; }
#sbsk .cart_del { border: 0; width: 35px; height: 35px; text-align: center; position: absolute; right: 0; bottom: 0; color: var(--gb-text-tertiary); background: var(--gb-surface-card); font-size: 1.25em; transition: color var(--gb-transition); }
#sbsk .cart_del:hover { color: var(--gb-danger); }

/* ==========================================================================
   9. 위시리스트 사이드바
   ========================================================================== */
#wish li { position: relative; border-bottom: 1px solid var(--gb-border-subtle); padding: 1rem; }
#wish .li_empty { text-align: center; line-height: 100px; color: var(--gb-text-secondary); }
#wish .prd_img { margin-right: 0.625rem; }
#wish .prd_cnt a { display: block; max-width: 105px; }
#wish .prd_cnt .prd_name { font-weight: 600; margin-bottom: 0.25rem; }

/* ==========================================================================
   10. 상품 목록 공통
   ========================================================================== */
.sct_wrap { position: relative; margin: 0 0 1.25rem; }
.sct_wrap .sctrl { position: absolute; top: 0; right: 0; }
.sct_wrap header { padding: 0.625rem 0 1.25rem; }
.sct_wrap h2 { font-size: 1.5em; margin: 0 0 0.625rem; line-height: 1; }
.sct_wrap h2 a { text-decoration: none; }

/* 메인 페이지 상품 목록 래퍼 (카드 없는 플랫 스타일) */
.sct_wrap_main { position: relative; }

.sct { margin: 0; padding: 0; list-style: none; }
.sct_li { position: relative; }
.sct_noitem { padding: 6.25rem 0; text-align: center; color: var(--gb-text-tertiary); }
.sct img { position: relative; }

/* 상품 이미지 공통 hover zoom */
.sct_img img,
.smt_30 .sct_img img { transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.sct_li:hover .sct_img img { transform: scale(1.05); }

/* 상품명 공통 hover */
.sct_txt a { color: var(--gb-text-primary); text-decoration: none; transition: color 0.2s; }
.sct_txt a:hover { color: var(--gb-primary); }

/* 상품 아이콘 뱃지 */
.shop_icon { display: inline-block; color: var(--gb-text-on-primary); line-height: 1.5; padding: 0 0.5rem; font-size: 0.8em; margin: 1px; border-radius: 10px; font-weight: 600; letter-spacing: 0.02em; }
.shop_icon_1 { background: var(--shop-icon1); }
.shop_icon_2 { background: var(--shop-icon2); }
.shop_icon_3 { background: var(--shop-icon3); }
.shop_icon_4 { background: var(--shop-icon4); }
.shop_icon_5 { background: var(--shop-icon5); }
.shop_icon_soldout { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); color: #fff; font-size: 1.125rem; font-weight: 700; letter-spacing: 2px; border-radius: var(--gb-radius-lg); }
.shop_icon_soldout.h160 { /* Owl Carousel 용 */ }
.shop_icon_coupon { background: var(--gb-danger); }
.soldout_txt { padding: 0.5rem 1.25rem; border: 2px solid var(--shop-soldout-border); border-radius: var(--gb-radius); }

/* 재생/정지/이전/다음 컨트롤 버튼 */
.sctrl { margin: 0; padding: 0; list-style: none; display: flex; }
.sctrl li { position: relative; }
.sctrl button { position: relative; margin: 0; padding: 0; width: 20px; height: 20px; border: 0; cursor: pointer; overflow: hidden; }
.sctrl button span { position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 0; background: url('img/is_button.gif') no-repeat; }
.sctrl button.sctrl_play span { background-position: -60px 0; }
.sctrl button.sctrl_play span.sctrl_on { background-position: -60px -30px; }
.sctrl button.sctrl_stop span { background-position: -90px 0; }
.sctrl button.sctrl_stop span.sctrl_on { background-position: -90px -30px; }
.sctrl button.sctrl_prev span { background-position: -120px 0; }
.sctrl button.sctrl_prev span.sctrl_on { background-position: -120px -30px; }
.sctrl button.sctrl_next span { background-position: -150px 0; }
.sctrl button.sctrl_next span.sctrl_on { background-position: -150px -30px; }

/* 메인리스트 별점 공통 */
.sct_li .sct_star img,
.sct_li img.sit_star { width: 72px !important; height: auto; }

/* 할인율 뱃지 공통 */
.sct_disc { position: absolute; z-index: 2; left: 0.75rem; top: 0.75rem; color: var(--gb-text-on-primary); padding: 0.25rem 0.625rem; line-height: 1.4; font-weight: 700; font-size: 0.85em; background: var(--gb-danger); border-radius: var(--gb-radius-sm); }

/* 옵션 버튼 공통 */
.sct_op_btn { display: flex; gap: 0.375rem; margin-top: 0.5rem; }
.sct_op_btn .btn { border-radius: 50%; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; transition: all 0.2s; }
.sct_op_btn .btn:hover { transform: translateY(-1px); }
.sct_op_btn .btn_wish:hover { color: var(--gb-danger); border-color: var(--gb-danger); }

/* SNS 공유 오버레이 */
.sct_sns_wrap { --sct-sns-backdrop: rgba(0, 0, 0, 0.3); --sct-sns-icon-shadow: rgba(0, 0, 0, 0.15); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: var(--gb-z-modal); }
.sct_sns { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--gb-surface-overlay); width: 90%; max-width: 300px; border-radius: var(--gb-radius-lg); box-shadow: var(--gb-shadow-lg); border: 1px solid var(--gb-border-default); overflow: hidden; z-index: 1; }
.sct_sns_header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid var(--gb-border-subtle); }
.sct_sns_header span { font-size: 1rem; font-weight: 600; color: var(--gb-text-primary); }
.sct_sns_cls { color: var(--gb-text-tertiary); border: 0; padding: 0.375rem; font-size: 1.125rem; background: transparent; cursor: pointer; border-radius: 50%; line-height: 1; transition: background-color 0.2s, color 0.2s; }
.sct_sns_cls:hover { background: var(--gb-surface-raised); color: var(--gb-text-primary); }
.sct_sns_body { display: flex; justify-content: center; gap: 1.5rem; padding: 1.25rem 1rem; }
.sct_sns_item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; border: 0; background: transparent; cursor: pointer; text-decoration: none; color: var(--gb-text-secondary); transition: color 0.2s, transform 0.2s; padding: 0; }
.sct_sns_item:hover { transform: translateY(-2px); }
.sct_sns_item i { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; font-size: 1.25rem; color: #fff; transition: box-shadow 0.2s; }
.sct_sns_item:hover i { box-shadow: 0 4px 12px var(--sct-sns-icon-shadow); }
.sct_sns_item span { font-size: 0.75rem; white-space: nowrap; }
.sct_sns_item.share-facebook i { background: var(--brand-facebook); }
.sct_sns_item.share-x i { background: var(--gb-text-primary); }
.sct_sns_item.share-copy i { background: var(--gb-text-tertiary); }
.sct_sns_bg { background: var(--sct-sns-backdrop); width: 100%; height: 100%; }

/* 상품 카드 링크 색상 (다크모드 자동 대응) */
.sct-item-link { color: var(--gb-text-primary); }
.sct-item-link:hover { color: var(--gb-primary); }

/* ==========================================================================
   11. 상품 목록 스킨 10 (갤러리 뷰)
   ========================================================================== */
.sct_10 { margin: 1.5rem 0; }
.sct_10 .sct_li { position: relative; margin-bottom: 2rem; text-align: left; }
.sct_10 .sct_a { text-decoration: none; }
.sct_10 .sct_a:focus,
.sct_10 .sct_a:hover { text-decoration: none; }
.sct_10 .sct_img { position: relative; text-align: center; border-radius: var(--gb-radius-lg); overflow: hidden; background: var(--gb-surface-sunken); }
.sct_10 .sct_img a { display: block; }
.sct_10 .sct_img img { width: 100%; height: auto; }
.sct_10 .sct_cart { display: none; position: absolute; left: 0; bottom: 0; border: 0; width: 100%; padding: 0.75rem 0; background: var(--shop-overlay-darker); color: var(--gb-text-on-primary); font-size: 0.9em; font-weight: 600; cursor: pointer; transition: background-color 0.2s; z-index: 2; }
.sct_10 .sct_cart:hover { background: var(--shop-overlay-darkest); }
.sct_10 .sct_img:hover .sct_cart { display: block; }
.sct_10 .sct_cart i { display: inline-block; margin-right: 0.375rem; font-size: 1.1em; }
.sct_10 .sct_ct_wrap { position: relative; padding-top: 0.5rem; }
.sct_10 .sct_star { margin: 0.5rem 0 0.25rem; }
.sct_10 .sct_txt { font-size: 0.95em; margin: 0.375rem 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sct_10 .sct_txt a { font-weight: 500; }
.sct_10 .sct_basic { margin-bottom: 0.25rem; color: var(--gb-text-secondary); font-size: 0.85em; }
.sct_10 .sct_bottom { position: relative; min-height: 20px; }
.sct_10 .sct_cost { margin: 0.25rem 0 0.375rem; font-size: 1.15em; font-weight: 700; color: var(--gb-text-primary); }
.sct_10 .sct_dict { display: block; text-decoration: line-through; font-weight: 400; font-size: 0.8em; color: var(--shop-price-old); margin-bottom: 0.125rem; }

/* 옵션 버튼 (sct_10) — 공통 .sct_op_btn 스타일 사용 */

/* ==========================================================================
   12. 상품 목록 스킨 20
   ========================================================================== */
.sct_20 .sct_li { position: relative; margin: 0 1.5rem 1rem 0; }
.sct_20 .sct_a { display: block; position: relative; text-decoration: none; }
.sct_20 .sct_a:focus,
.sct_20 .sct_a:hover { text-decoration: none; }
.sct_20 .sct_icon { position: absolute; top: 0.625rem; left: -0.375rem; margin: 0 !important; }
.sct_20 .sct_icon img { display: block; margin: 0 0 0.25rem; }
.sct_20 .sct_id { display: block; padding: 0.375rem 0.625rem 0; background: var(--gb-surface-raised); }
.sct_20 .sct_txt { padding: 0.625rem; background: var(--gb-surface-raised); }
.sct_20 .sct_basic { padding: 0 0.625rem 0.375rem; background: var(--gb-surface-raised); line-height: 1.5; }
.sct_20 .sct_cost { display: block; padding: 0 0.625rem 0.625rem; background: var(--gb-surface-raised); font-weight: 700; }
.sct_20 .sct_dict { text-decoration: line-through; display: block; margin: 0 0 0.375rem; color: var(--shop-price-old); font-weight: normal; }

/* ==========================================================================
   13. 상품 목록 스킨 30
   ========================================================================== */
.sct_30 .sct_li { position: relative; margin: 0 1rem 1rem 0; border: 1px solid var(--gb-border-default); background: var(--gb-surface-raised); border-radius: var(--gb-radius); }
.sct_30 .sct_arw_toleft { display: block; z-index: 2; position: absolute; top: 1.25rem; left: 221px; width: 10px; height: 19px; background: url('img/icon_arw_toleft.gif') no-repeat; }
.sct_30 .sct_a { text-decoration: none; }
.sct_30 .sct_img { position: absolute; top: 0; left: 0; }
.sct_30 .sct_icon { position: absolute; bottom: 1.5rem; left: -0.375rem; margin: 0 !important; }
.sct_30 .sct_icon img { display: block; margin: 0 0 0.25rem; }
.sct_30 .sct_txt { display: inline-block; margin: 0 0 1.25rem; }
.sct_30 .sct_basic { margin: 0 0 1rem; padding: 0; line-height: 1.5; }
.sct_30 .sct_cost { display: block; margin: 0 0 0.625rem; font-weight: 700; }
.sct_30 .sct_dict { text-decoration: line-through; display: block; margin: 0 0 0.375rem; color: var(--shop-price-old); font-weight: normal; }

/* ==========================================================================
   14. 상품 목록 스킨 40 (리스트 뷰)
   ========================================================================== */
.sct_40 { margin: 1.25rem 0; }
.sct_40 .sct_li { position: relative; padding: 1rem 0; border-bottom: 1px solid var(--gb-border-default); }
.sct_40 .sct_a { text-decoration: none; }
.sct_40 .sct_a:focus,
.sct_40 .sct_a:hover { text-decoration: none; }
.sct_40 .sct_img { text-align: center; margin-right: 1.25rem; }
.sct_40 .sct_img a { display: block; position: relative; z-index: 2; }
.sct_40 .sct_cart { position: absolute; right: 0; bottom: 0; border: 0; width: 150px; padding: 0.875rem 0; background: var(--shop-overlay-dark); color: var(--gb-text-on-primary); font-size: 1em; font-weight: 700; z-index: 3; }
.sct_40 .list-10-btn .sct_cart { z-index: 1; top: 2.5rem; right: 0.625rem; bottom: initial; padding: 0.5rem 0; width: 140px; border: 1px solid var(--gb-primary); background: var(--gb-primary); color: var(--gb-text-on-primary); cursor: pointer; border-radius: var(--gb-radius-sm); transition: background-color var(--gb-transition); }
.sct_40 .list-10-btn .sct_cart:hover { background: var(--gb-primary-hover); }
.sct_40 .list-10-btn .sct_cart i { display: none; }
.sct_40 .sct_img:hover .sct_cart { display: block; }
.sct_40 .sct_cart i { display: inline-block; margin-right: 0.375rem; font-size: 1.2em; }
.sct_40 .sct_disc { position: absolute; right: 0.875rem; bottom: 0.875rem; color: var(--gb-text-on-primary); padding: 0 0.5rem; line-height: 1.5rem; font-weight: 700; font-size: 1.2em; background: var(--shop-overlay-dark); border-radius: var(--gb-radius-sm); }
.sct_40 .sit_icon_li { margin-top: 0.625rem; }
.sct_40 .sct_ct_wrap { position: relative; }
.sct_40 .sct_star { margin: 0.625rem 0 0.375rem; }
.sct_40 .sct_txt { font-size: 1.1em; margin: 0.625rem 0; padding-bottom: 0.625rem; }
.sct_40 .sct_txt a { font-weight: 600; font-size: 1.2em; }
.sct_40 .sct_basic { margin-bottom: 0.375rem; color: var(--gb-text-secondary); }
.sct_40 .sct_cost { position: absolute; right: 200px; top: 1rem; font-size: 1.35em; font-weight: 700; }
.sct_40 .sct_dict { text-decoration: line-through; font-weight: normal; display: block; font-size: 0.85em; color: var(--shop-price-old); }

/* 옵션 버튼 (sct_40) — 공통 .sct_op_btn 스타일 사용 */
.sct_40 .sct_op_btn { position: absolute; right: 0; bottom: 0.75rem; }

/* ==========================================================================
   15. 개인결제 목록
   ========================================================================== */
.sct_pv .sct_li { position: relative; margin: 0 1.125rem 1rem 0; }
.sct_pv .sct_a { display: inline-block; position: relative; text-decoration: none; font-size: 1.1em; }
.sct_pv .sct_a:focus,
.sct_pv .sct_a:hover { text-decoration: none; }
.sct_pv .sct_img { margin: 0 0 0.625rem; }
.sct_pv .sct_txt { margin: 0 0 0.375rem; }
.sct_pv .sct_icon { margin: 0 0 0.625rem; }
.sct_pv .sct_id { display: block; margin: 0 0 0.375rem; }
.sct_pv .sct_basic { margin: 0 0 0.625rem; }
.sct_pv .sct_cost { display: block; margin: 0.375rem 0 0.625rem; font-size: 1.25em; font-weight: 700; }
.sct_pv .sct_dict { text-decoration: line-through; display: block; margin: 0 0 0.375rem; color: var(--shop-price-old); font-weight: normal; }

/* ==========================================================================
   16. 메인 상품 목록 스킨 10 (Swiper 카드)
   ========================================================================== */
.smt_10 { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; }
.smt_10 .sct_li { position: relative; flex: 0 0 calc(25% - 0.75rem); min-width: 0; text-align: left; }
.smt_10 .sct_a { text-decoration: none; }
.smt_10 .sct_a:focus,
.smt_10 .sct_a:hover { text-decoration: none; }
.smt_10 .sct_ct_wrap { position: relative; padding-top: 0.5rem; }
.smt_10 .sct_img { position: relative; text-align: center; border-radius: var(--gb-radius-lg); overflow: hidden; }
.smt_10 .sct_img a { display: block; }
.smt_10 .sct_img img { width: 100%; height: auto; }
.smt_10 .sct_cart { display: none; position: absolute; left: 0; bottom: 0; border: 0; width: 100%; padding: 0.75rem 0; background: var(--shop-overlay-darker); color: var(--gb-text-on-primary); font-size: 0.9em; font-weight: 600; cursor: pointer; transition: background-color 0.2s; z-index: 2; }
.smt_10 .sct_cart:hover { background: var(--shop-overlay-darkest); }
.smt_10 .sct_img:hover .sct_cart { display: block; }
.smt_10 .sct_li.overlay .sct_cart { display: none !important; }
.smt_10 .sct_cart i { display: inline-block; margin-right: 0.375rem; font-size: 1.1em; }
.smt_10 .sct_star { margin: 0.5rem 0 0.25rem; }
.smt_10 .sct_txt { font-size: 0.95em; margin: 0.375rem 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.smt_10 .sct_txt a { font-weight: 500; }
.smt_10 .sct_basic { margin-bottom: 0.25rem; color: var(--gb-text-secondary); font-size: 0.85em; }
.smt_10 .sct_cost { margin: 0.25rem 0 0.375rem; font-size: 1.15em; font-weight: 700; color: var(--gb-text-primary); }
.smt_10 .sct_dict { text-decoration: line-through; font-weight: 400; display: block; font-size: 0.8em; color: var(--shop-price-old); margin-bottom: 0.125rem; }

/* Swiper 모드: smt_10 grid 속성 비활성화 */
.swiper-wrapper.smt_10 { flex-wrap: nowrap; gap: 0; }
.smt-10-swiper .swiper-slide.sct_li { flex: 0 0 auto; min-width: 0; }
.smt-10-swiper .swiper-button-prev,
.smt-10-swiper .swiper-button-next { width: 36px; height: 36px; background: var(--gb-surface-card); border: 1px solid var(--gb-border-default); border-radius: 50%; box-shadow: var(--gb-shadow-sm); color: var(--gb-text-secondary); transition: all 0.2s; }
.smt-10-swiper .swiper-button-prev:hover,
.smt-10-swiper .swiper-button-next:hover { background: var(--gb-surface-raised); box-shadow: var(--gb-shadow); }
.smt-10-swiper .swiper-button-prev::after,
.smt-10-swiper .swiper-button-next::after { font-size: 1rem; }
.smt-10-swiper .swiper-button-prev { left: -12px; }
.smt-10-swiper .swiper-button-next { right: -12px; }

/* 카트 옵션 오버레이 */
.sct_cartop_wr { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; padding: 1rem; text-align: left; background: var(--shop-overlay-darker); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: var(--gb-radius-lg); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.sct_cartop_wr .it_option { width: 100%; height: 36px; border: 1px solid var(--shop-overlay-input-border); border-radius: var(--gb-radius-sm); padding: 0 0.5rem; background: var(--shop-overlay-input-bg); font-size: 0.85em; }
.sct_cartop_wr .cartopt_cart_btn { width: 100%; border: 0; padding: 0.625rem; background: var(--gb-primary); color: var(--gb-text-on-primary); border-radius: var(--gb-radius-sm); font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.sct_cartop_wr .cartopt_cart_btn:hover { background: var(--gb-primary-hover); }
.sct_cartop_wr .cartopt_close_btn { width: 100%; border: 1px solid var(--shop-overlay-close-border); padding: 0.625rem; background: transparent; color: var(--gb-text-on-primary); border-radius: var(--gb-radius-sm); font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.sct_cartop_wr .cartopt_close_btn:hover { background: var(--shop-overlay-close-hover); }

/* 카트 레이어 (hover 배경) */
.cart-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--gb-radius-lg); background: transparent; transition: background-color 0.3s; pointer-events: none; }
.sct_img:hover .cart-layer { background: var(--shop-overlay-light-subtle); }

/* ==========================================================================
   17. 메인 상품 목록 스킨 20 (Top Rolling 슬라이드)
   ========================================================================== */
.smt_20 { position: relative; overflow: hidden; margin: 0; }
.smt_20 .sct_ul { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; }
.smt_20 .sct_li { position: relative; flex: 1 1 0; min-width: 0; text-align: left; }
.smt_20 .sct_a { display: inline-block; position: relative; text-decoration: none; }
.smt_20 .sct_a:focus,
.smt_20 .sct_a:hover { text-decoration: none; }
.smt_20 .sct_img { position: relative; text-align: center; border-radius: var(--gb-radius-lg); overflow: hidden; background: var(--gb-surface-sunken); }
.smt_20 .sct_img a { display: block; }
.smt_20 .sct_img img { width: 100%; height: auto; }
.smt_20 .sct_txt { font-size: 0.95em; margin: 0.5rem 0 0.25rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.smt_20 .sct_txt a { font-weight: 500; }
.smt_20 .sct_basic { margin-bottom: 0.25rem; color: var(--gb-text-secondary); font-size: 0.85em; }
.smt_20 .sct_cost { margin: 0.25rem 0 0.5rem; font-size: 1.15em; font-weight: 700; color: var(--gb-text-primary); }
.smt_20 .sct_dict { text-decoration: line-through; display: block; font-size: 0.8em; color: var(--shop-price-old); font-weight: 400; margin-bottom: 0.125rem; }
.smt_20 .sct_sns { position: absolute; top: auto; left: auto; bottom: 0.5rem; right: 0.5rem; width: auto; margin: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.25s; pointer-events: none; z-index: 2; }
.smt_20 .sct_li:hover .sct_sns { opacity: 1; pointer-events: auto; }
.smt_20 .sct_sns a { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; width: 26px; height: 26px; box-shadow: 0 1px 4px rgba(0,0,0,0.15); transition: transform 0.2s; }
.smt_20 .sct_sns a:hover { transform: scale(1.15); }
.smt_20 .sct_sns .share-facebook { background: #415b92; }
.smt_20 .sct_sns .share-twitter { background: #35b3dc; }
.smt_20 .sct_sns img { width: 14px; }
.smt_20 .sct_icon { margin: 0 0 0.5rem; }
.smt_20 .sct_id { display: block; margin: 0 0 0.25rem; font-size: 0.8em; color: var(--gb-text-tertiary); }

/* ==========================================================================
   18. 메인 상품 목록 스킨 30 (컴팩트 리스트)
   ========================================================================== */
.smt_30 { position: relative; list-style: none; margin: 0; padding: 0; }
.smt_30 .swiper-slide { position: relative; min-height: 50px; padding: 0.75rem 0; background: var(--gb-surface-card); display: flex; align-items: center; gap: 0.875rem; border-bottom: 1px solid var(--gb-border-subtle); transition: background-color 0.2s; }
.smt_30 .swiper-slide:last-child { border-bottom: 0; }
.smt_30 .swiper-slide:hover { background: var(--gb-surface-raised); }
.smt_30 .sct_img { flex: 0 0 72px; }
.smt_30 .sct_img img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--gb-radius); }
.smt_30 .sct_cnt { flex: 1; min-width: 0; line-height: 1.5; }
.smt_30 .sct_txt { margin-bottom: 0.25rem; }
.smt_30 .sct_txt a { display: block; font-size: 0.9em; font-weight: 500; color: var(--gb-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smt_30 .sct_cost { font-weight: 700; font-size: 1.05em; color: var(--gb-text-primary); }
.smt_30 .sct_dict { text-decoration: line-through; font-weight: 400; font-size: 0.8em; color: var(--shop-price-old); margin-right: 0.375rem; }

/* ==========================================================================
   19. 메인 상품 목록 스킨 40 (Owl Carousel)
   ========================================================================== */
.smt_40 { margin: 0; padding: 0; list-style: none; }
.smt_40 .sct_li { position: relative; padding: 0 0.5rem; }
.smt_40 .sct_img { position: relative; text-align: center; border-radius: var(--gb-radius-lg); overflow: hidden; }
.smt_40 .sct_img a { display: block; }
.smt_40 .sct_img img { width: 100%; height: auto; }
.smt_40 .sct_star { margin: 0.625rem 0 0.25rem; }
.smt_40 .sct_txt { display: block; margin: 0.375rem 0; font-size: 0.95em; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.smt_40 .sct_txt a { font-weight: 500; }
.smt_40 .sct_cost { margin: 0.25rem 0 0; font-size: 1.2em; font-weight: 700; color: var(--gb-text-primary); }

/* Swiper 네비 커스텀 */
.smt-40-swiper .swiper-button-prev,
.smt-40-swiper .swiper-button-next { width: 36px; height: 36px; background: var(--gb-surface-card); border: 1px solid var(--gb-border-default); border-radius: 50%; box-shadow: var(--gb-shadow-sm); color: var(--gb-text-secondary); transition: all 0.2s; }
.smt-40-swiper .swiper-button-prev:hover,
.smt-40-swiper .swiper-button-next:hover { background: var(--gb-surface-raised); box-shadow: var(--gb-shadow); }
.smt-40-swiper .swiper-button-prev::after,
.smt-40-swiper .swiper-button-next::after { font-size: 1rem; }
.smt-40-swiper .swiper-button-prev { left: -12px; }
.smt-40-swiper .swiper-button-next { right: -12px; }

/* ==========================================================================
   20. 관련상품 목록
   ========================================================================== */
#sit_rel { position: relative; border: 1px solid var(--gb-border-default); padding: 2rem; margin-top: 1.25rem; background: var(--gb-surface-card); border-radius: var(--gb-radius-lg); }
#sit_rel h2 { font-size: 1.5em; margin: 0 0 1.875rem; text-align: center; }
.scr-10-swiper { overflow: hidden; }
.scr-10-swiper .swiper-slide { width: 175px; }
.scr-10-swiper .swiper-button-prev,
.scr-10-swiper .swiper-button-next { width: 30px; height: 30px; border: 1px solid var(--gb-border-default); background: var(--gb-surface-card); border-radius: var(--gb-radius-sm); }
.scr-10-swiper .swiper-button-prev::after,
.scr-10-swiper .swiper-button-next::after { font-size: 0.75rem; color: var(--gb-text-secondary); }
.scr_10 img { width: 100%; height: auto; border-radius: var(--gb-radius); }
.scr_10 .sct_txt { display: block; margin: 0.375rem 0; font-size: 1.1em; }
.scr_10 .sct_cost { margin: 0.375rem 0; font-size: 1.25em; font-weight: 700; }

/* ==========================================================================
   21. 상품 목록 상단 (관리/위치/정렬/뷰전환)
   ========================================================================== */
#sct { margin: 0; }
.sct_admin { text-align: right; }

/* 현재 위치 (브레드크럼) — Bootstrap breadcrumb 구조 */
#sct_location { display: block; }

/* 카테고리 커스텀 셀렉트박스 */
.shop_select_to_html { position: relative; display: inline-block; }
.shop_select_to_html span { padding: 0.625rem 1.25rem 0.875rem; }
.shop_select_to_html .menulist { position: absolute; top: 20px; display: none; opacity: 0; transition: all 0.2s ease-in-out; }
.view_location .shop_select_to_html .menulist { left: 0; }
.is_right .shop_select_to_html .menulist { right: 0; }
.shop_select_to_html:hover .category_title,
.shop_select_to_html:hover .category_title i { color: var(--gb-primary); }
.shop_select_to_html:hover .menulist { display: block; opacity: 1; }
.shop_select_to_html .menulist { background-color: var(--gb-surface-overlay); border-radius: var(--gb-radius-lg); box-shadow: var(--gb-shadow); box-sizing: border-box; margin-top: 0.25rem; overflow: hidden; padding: 0.375rem 0; z-index: 9; white-space: nowrap; width: auto; }
.shop_select_to_html .menulist ul.wide { display: inline-block !important; width: 146px; vertical-align: top; min-height: 360px; }
.shop_select_to_html .menulist ul.left-border { border-left: 1px dashed var(--gb-border-default); }
.shop_select_to_html .option { font-weight: 400; line-height: 2.5rem; list-style: none; min-height: 2.5rem; outline: none; text-align: left; transition: all var(--gb-transition); }
.shop_select_to_html .option:hover,
.shop_select_to_html .option.focus,
.shop_select_to_html .option.selected.focus { background-color: var(--gb-surface-raised); }
.shop_select_to_html .option.selected,
.shop_select_to_html .option.selected a { font-weight: 700; color: var(--gb-primary); }
.shop_select_to_html .option.disabled { background-color: transparent; color: var(--gb-text-tertiary); cursor: default; }
.shop_select_to_html .option a { display: block; padding-left: 1.75rem; padding-right: 3rem; }
.shop_select_to_html .category_title { color: var(--gb-text-secondary); font-size: 1.1em; }
.shop_select_to_html .category_title i { margin-left: 0.375rem; color: var(--gb-text-tertiary); }

.sct_here { font-weight: 700; }
.sct_bg { padding-right: 1rem !important; background: url('img/sct_bg_toright.gif') right 50% no-repeat; }

/* 카테고리 목록 — Bootstrap card + list-group 구조 */
.sct_ct { margin: 0 0 1.25rem; }
.sct_ct a { text-decoration: none; }
.sct_ct_parent { font-weight: 700; }
.sct_ct_here { color: var(--gb-danger) !important; }

/* 정렬/필터/뷰전환 통합 바 */
#sct_sortlst { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.5rem 0.75rem; background: var(--gb-surface-card); border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius-lg); }
#sct_sort { flex: 1 1 auto; min-width: 0; }
#sct_sort h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#sct_lst { flex-shrink: 0; margin-left: auto; }

/* ==========================================================================
   22. 상품 상세보기
   ========================================================================== */
#sit { margin: 0 0 0.625rem; }
.sit_admin { position: absolute; right: 0; top: 2px; text-align: right; }
.sit_admin a { line-height: 2.25rem; padding: 0 0.625rem; }
.sit_empty { padding: 3.75rem 0; text-align: center; color: var(--gb-text-tertiary); }
.is_search #wrapper_title,
.is_item #wrapper_title { display: none; }

/* 상세보기 - 개요 영역 */
#sit_ov_from { background: var(--gb-surface-card); border-bottom: 1px solid var(--gb-border-subtle); }
#sit_ov_wrap { width: 100%; margin: 0 auto; padding: 2rem 0 1.5rem; }

/* 이미지 갤러리 (Swiper + GLightbox) */
#sit_pvi { position: relative; }
.sit-gallery-main { border-radius: var(--gb-radius-lg); overflow: hidden; background: var(--gb-surface-raised); }
.sit-gallery-main img { width: 100%; height: auto; cursor: zoom-in; display: block; }
.sit-gallery-thumbs { margin-top: 0.75rem; }
.sit-gallery-thumbs .swiper-slide {
    width: 64px; height: 64px; opacity: 0.45; cursor: pointer;
    border: 2px solid transparent; border-radius: var(--gb-radius); overflow: hidden;
    transition: opacity var(--gb-transition), border-color var(--gb-transition), transform var(--gb-transition);
}
.sit-gallery-thumbs .swiper-slide:hover { opacity: 0.75; transform: translateY(-1px); }
.sit-gallery-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--gb-primary); }
.sit-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

#sit_pvi_nwbig { padding: 0.625rem 0; text-align: center; }
#sit_pvi_nwbig span { display: none; }
#sit_pvi_nwbig span.visible { display: inline; }
#sit_pvi_nw ul { margin: 0 0 1.25rem; text-align: center; padding: 0 0.625rem; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
#sit_pvi_nw li { display: inline-block; margin: 0 0 1px 1px; }
#sit_pvi_nw li img { width: 60px; height: 60px; border-radius: var(--gb-radius-sm); }

/* 간략정보 및 구매 — 데스크톱 sticky */
#sit_ov { position: relative; padding-bottom: 0.5rem; }
@media (min-width: 992px) {
    #sit_ov { position: sticky; top: calc(var(--vue-sticky-h, 0px) + 1rem); align-self: flex-start; }
}
#sit_ov h3 { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--gb-text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
#sit_title { margin: 0 0 0.5rem; font-size: 1.625rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--gb-text-primary); }
#sit_desc { margin: 0 0 1rem; padding: 0; color: var(--gb-text-tertiary); font-size: 0.9375rem; line-height: 1.6; }
#sit_opt_info { position: absolute; font-size: 0; text-indent: -9999em; line-height: 0; overflow: hidden; }

/* 별점 & 공유 */
#sit_star_sns { position: relative; }
#sit_star_sns span { display: inline-block; margin: 0 0.25rem 0 0; color: var(--gb-text-tertiary); letter-spacing: 0; font-size: 0.8125rem; }
#sit_star_sns .sit_star { position: relative; top: -1px; margin: 0 0.25rem 0 0; height: 18px; }

#sit_btn_opt { position: relative; display: flex; align-items: center; gap: 0.75rem; }
#sit_btn_opt > * { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem; background: none; border: 0; color: var(--gb-text-tertiary); font-size: 1rem; cursor: pointer; transition: color var(--gb-transition); line-height: 1; }
#sit_btn_opt > *:hover { color: var(--gb-text-primary); }
#btn_wish:hover { color: var(--gb-danger); }
#btn_wish .btn_wish_num { position: absolute; right: -6px; top: -6px; margin: 0; padding: 0 4px; height: 16px; line-height: 16px; border-radius: 999px; background: var(--gb-danger); color: var(--gb-text-on-primary); font-size: 0.625rem; font-weight: 700; min-width: 16px; text-align: center; }

/* 가격 영역 */
.sit_info { padding: 1rem 0; margin: 0; }
.sit-price-hero { padding: 1rem 0; border-bottom: 1px solid var(--gb-border-subtle); margin-bottom: 0.75rem; }
.sit-price-hero .sit-price-sale { font-size: 1.75rem; font-weight: 800; color: var(--gb-text-primary); line-height: 1.2; letter-spacing: -0.02em; }
.sit-price-hero .sit-price-orig { font-size: 0.9375rem; color: var(--gb-text-tertiary); text-decoration: line-through; margin-left: 0.5rem; }
.sit-discount-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; background: var(--gb-danger); color: var(--gb-text-on-primary); font-size: 0.8125rem; font-weight: 700; border-radius: 999px; margin-left: 0.5rem; letter-spacing: -0.02em; }
.sit-price-hero input[type="hidden"] { display: none; }

/* 상품 메타 정보 */
.sit_ov_tbl { width: 100%; border: 0; border-collapse: collapse; color: var(--gb-text-secondary); font-size: 0.8125rem; --bs-table-hover-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-bg: transparent; }
.sit_ov_tbl > :not(caption) > * > * { background-color: transparent !important; box-shadow: none !important; padding: 0.375rem 0; }
.sit_ov_tbl tr:hover > th,
.sit_ov_tbl tr:hover > td { background-color: transparent !important; }
.sit_ov_tbl th { font-weight: 400; text-align: left; color: var(--gb-text-tertiary); white-space: nowrap; padding-right: 1rem; }
.sit_ov_tbl td { color: var(--gb-text-secondary); }
.sit_ov_tbl .badge { font-size: 0.75rem; }

/* 옵션 선택 */
.sit_option { padding: 0.75rem 0 0; margin: 0; border-top: 1px solid var(--gb-border-subtle); }
.sit_option label { display: block; margin: 0 0 0.25rem; color: var(--gb-text-tertiary); font-size: 0.8125rem; }
.sit_option label.label-title { display: none; }
.sit_option select {
    width: 100%; margin: 0 0 0.5rem; height: 2.75rem; padding: 0 2.25rem 0 0.75rem;
    border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius);
    font-size: 0.875rem; color: var(--gb-text-primary);
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: url('img/select_arrow.png') no-repeat calc(100% - 0.75rem) 50% var(--gb-surface-card);
    transition: border-color var(--gb-transition), box-shadow var(--gb-transition);
}
.sit_option select:focus { border-color: var(--gb-primary); outline: none; box-shadow: 0 0 0 3px var(--gb-primary-light); }
.sit_option select::-ms-expand { display: none; }
.sit_sel_btn { position: relative; }
.sit_sel_btn button { position: absolute; top: -51px; right: 0 !important; }
#sit_sel_option h3 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }

/* 선택된 옵션 수량 조절 */
.sit_qty_group { max-width: 120px; }
.sit_qty_group .btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.sit_qty_group .num_input { max-width: 3rem; padding: 0.25rem; font-size: 0.8125rem; }
.sit_opt_subj { color: var(--gb-text-secondary); }
.sit_opt_prc { font-size: 0.8125rem; white-space: nowrap; }

/* 총 합계 */
#sit_tot_price {
    font-size: 0.9375rem; font-weight: 600; text-align: right;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.875rem 1rem; border-radius: var(--gb-radius);
    background: var(--gb-surface-raised); border: 1px solid var(--gb-border-subtle);
}
#sit_tot_price strong { font-size: 1.375rem; font-weight: 800; margin-left: 0.75rem; color: var(--gb-text-primary); letter-spacing: -0.02em; }
#sit_ov_soldout { --sit-soldout-bg: rgba(239,68,68,0.06); --sit-soldout-border: rgba(239,68,68,0.15); padding: 0.875rem 1rem; margin: 0.5rem 0; color: var(--gb-danger); background: var(--sit-soldout-bg); font-weight: 600; font-size: 0.875rem; text-align: center; border-radius: var(--gb-radius); border: 1px solid var(--sit-soldout-border); }

/* 구매/장바구니/위시 버튼 */
#sit_ov_btn { margin-top: 0.25rem; }
#sit_ov_btn button { height: 2.875rem; font-weight: 700; font-size: 1rem; transition: all var(--gb-transition); }
.sit_btn_buy { background: var(--gb-primary); border-radius: var(--gb-radius); border: 1px solid var(--gb-primary); color: var(--gb-text-on-primary); }
.sit_btn_buy:hover { background: var(--gb-primary-hover); transform: translateY(-1px); box-shadow: var(--gb-shadow-sm); }
.sit_btn_buy:active { transform: translateY(0); }
.sit_btn_cart { background: var(--gb-surface-card); border-radius: var(--gb-radius); border: 1px solid var(--gb-border-strong); color: var(--gb-text-primary); }
.sit_btn_cart:hover { background: var(--gb-surface-raised); border-color: var(--gb-text-tertiary); }
#sit_btn_alm { display: inline-block; height: 2.875rem; line-height: 2.875rem; font-weight: 700; font-size: 1rem; background: var(--gb-danger); border-radius: var(--gb-radius); color: var(--gb-text-on-primary); border: 0; text-align: center; }
.sit_btn_wish { display: inline-flex; align-items: center; justify-content: center; height: 2.875rem; color: var(--gb-text-tertiary); font-size: 0.875rem; border: 1px solid var(--gb-border-default); text-align: center; border-radius: var(--gb-radius); font-weight: 600; transition: all var(--gb-transition); }
.sit_btn_wish:hover { color: var(--gb-danger); border-color: var(--gb-danger); }

/* ==========================================================================
   23. 상품 상세 - 형제 상품 네비게이션
   ========================================================================== */
#sit_siblings { width: 100%; background: var(--gb-surface-card); text-align: center; position: relative; display: flex; justify-content: space-between; }
#sit_siblings h2 { position: absolute; font-size: 0; text-indent: -9999em; line-height: 0; overflow: hidden; }
#sit_siblings a { display: flex; align-items: center; gap: 0.375rem; position: relative; padding: 0.5rem 0; margin: 0; line-height: 1.4; color: var(--gb-text-tertiary); font-size: 0.8125rem; transition: color var(--gb-transition); }
#sit_siblings a:hover { color: var(--gb-primary); }
#sit_siblings a#siblings_prev { padding-left: 1.25rem; }
#sit_siblings a#siblings_prev::after { content: ""; background: url('img/sit_siblings.jpg') no-repeat; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 15px; display: inline-block; }
#sit_siblings a#siblings_next { padding-right: 1.25rem; }
#sit_siblings a#siblings_next::after { content: ""; background: url('img/sit_siblings.jpg') -14px 0 no-repeat; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 15px; display: inline-block; }
#sit_siblings a span { font-size: 0.8125rem; color: var(--gb-text-secondary); }

/* ==========================================================================
   24. 상품 상세 - 탭 영역 (상품정보/사용후기/문의)
   ========================================================================== */
#sit_info { position: relative; width: 100%; min-height: 600px; margin-top: 1.25rem; margin-bottom: 1.875rem; background: var(--gb-surface-card); display: flex; flex-wrap: wrap; gap: 1.5rem; }
#sit_tab { flex: 1; min-width: 0; }
/* 레거시 탭 스타일 (Bootstrap nav-tabs로 대체됨) */
#sit_tab .tab_con { background: var(--shop-tab-bg); padding: 1rem; }

/* 사이드 구매 패널 */
#sit_buy { flex: 0 0 300px; max-width: 100%; align-self: flex-start; }
.sit-buy-sticky { top: calc(var(--vue-sticky-h, 0px) + 1rem); }
#sit_buy .card { border-radius: var(--gb-radius-lg); border: 1px solid var(--gb-border-default); box-shadow: var(--gb-shadow-sm); }
#sit_buy .card-body { padding: 1.25rem; }
.sit_side_option { padding: 0 0 0.75rem; border-bottom: 1px solid var(--gb-border-subtle); margin-bottom: 0.75rem; }
.sit_side_option h3 { margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--gb-text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.sit_side_option label { display: block; margin: 0 0 0.25rem; color: var(--gb-text-tertiary); font-size: 0.8125rem; }
.sit_side_option label.label-title { display: none; }
.sit_side_option select {
    width: 100%; margin: 0 0 0.5rem; height: 2.5rem; padding: 0 2rem 0 0.75rem;
    border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius);
    font-size: 0.8125rem; color: var(--gb-text-primary);
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: url('img/select_arrow.png') no-repeat calc(100% - 0.5rem) 50% var(--gb-surface-card);
    transition: border-color var(--gb-transition);
}
.sit_side_option select:focus { border-color: var(--gb-primary); outline: none; }
.sit_side_option select::-ms-expand { display: none; }

/* 선택 옵션 목록 */
.sit_sel_option { overflow-y: auto; height: 300px; }
.sit_sel_option h3 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.sit_sel_option li { position: relative; padding: 1rem; border-bottom: 1px solid var(--gb-border-default); display: flex; flex-wrap: wrap; align-items: center; }
.sit_sel_option .sit_opt_del { position: absolute; top: 0; right: 0; width: 30px; height: 30px; font-size: 15px; border: 0; border-left: 1px solid var(--gb-border-default); border-bottom: 1px solid var(--gb-border-default); background: var(--gb-surface-card); color: var(--gb-text-tertiary); transition: color var(--gb-transition); }
.sit_sel_option .sit_opt_del:hover { color: var(--gb-danger); }
.sit_sel_option .opt_name { font-weight: 700; line-height: 1.875rem; width: 100%; }
.sit_sel_option .num_input { border: 0; height: 30px; border-top: 1px solid var(--gb-border-default); border-bottom: 1px solid var(--gb-border-default); text-align: center; }
.sit_sel_option .sit_opt_prc { display: block; width: 100px; padding: 0 0.25rem; text-align: right; line-height: 1.875rem; font-size: 1.183em; font-weight: 700; margin-left: auto; }
.sit_sel_option button { width: 30px; height: 30px; border: 1px solid var(--gb-border-default); border-radius: 0; background: var(--gb-surface-card); color: var(--gb-text-secondary); font-size: 0.92em; }
.sit_sel_option button:hover { color: var(--gb-text-primary); }

/* 합계/주문 버튼 */
.sum_section { padding: 0; z-index: 3; }
.sit_tot_price { font-weight: 600; padding: 0.75rem 0; line-height: 1.5; font-size: 0.875rem; text-align: right; display: flex; justify-content: space-between; align-items: center; color: var(--gb-text-secondary); }
.sit_tot_price strong { font-size: 1.25rem; font-weight: 800; margin-left: 0.5rem; color: var(--gb-text-primary); letter-spacing: -0.02em; }
.sit_order_btn button { font-size: 0.875rem; font-weight: 700; border-radius: var(--gb-radius); height: 2.5rem; }

/* ==========================================================================
   25. 재입고 알림 (SMS)
   ========================================================================== */
#sit_sms_new #sms_agree { padding: 0.375rem 0 1.25rem; }
#sit_sms_new li strong { display: inline-block; margin: 0.625rem 0; }
#sit_sms_new textarea { line-height: 1.5; color: var(--gb-text-secondary); }
#sit_sms_new .prd_name { background: var(--gb-surface-raised); padding: 1rem 1.25rem; font-weight: 700; font-size: 1.167em; }

/* ==========================================================================
   26. 상품정보 (상세 탭)
   ========================================================================== */
#sit_inf { margin: 1.25rem 0; }
#sit_inf h2,
#sit_inf h3 { position: absolute; font-size: 0; line-height: 0; }
#sit_inf_basic { margin: 0 0 1.25rem; line-height: 1.7; }
#sit_inf_explan { margin: 0 0 0.625rem; width: auto !important; line-height: 1.7; overflow: hidden; }
#sit_inf_explan img { max-width: 100%; height: auto; }
#sit_inf_open { width: 100%; border: 0; border-top: 1px solid var(--gb-border-strong); border-collapse: collapse; }
#sit_inf_open th { padding: 0.625rem; border-bottom: 1px solid var(--gb-border-default); background: var(--gb-surface-raised); vertical-align: top; text-align: left; }
#sit_inf_open td { padding: 0.625rem; border-bottom: 1px solid var(--gb-border-default); background: var(--gb-surface-card); vertical-align: top; }

/* ==========================================================================
   27. 사용후기 (상세 탭)
   ========================================================================== */
#sit_use h2,
#sit_use h3 { position: absolute; font-size: 0; line-height: 0; }
.sit_use_top { position: relative; background: var(--gb-surface-card); border: 2px solid var(--gb-border-default); margin: 0 0 1rem; padding: 1rem; min-height: 90px; vertical-align: middle; border-radius: var(--gb-radius-lg); }
.sit_use_top h4 { font-size: 1.2em; margin-bottom: 0.625rem; }
.sit_use_top h4 span { color: var(--gb-text-tertiary); font-size: 0.85em; font-weight: normal; }
.sit_use_top .sit_star { height: 20px; }
.sit_use_top .st_bg { background: var(--gb-text-secondary); }
#sit_use_wbtn { position: absolute; top: 1.25rem; right: 1.875rem; }
#sit_use_wbtn a { padding: 0 1.25rem; line-height: 2.875rem; font-weight: 700; font-size: 1.167em; }
#sit_use_ol { margin: 0 0 0.375rem; padding: 0; border-top: 1px solid var(--gb-border-default); list-style: none; }
.sit_use_li { position: relative; padding: 0.625rem 0; border-bottom: 1px solid var(--gb-border-default); }
.sit_thum { margin: 0; }
.sit_thum img { border-radius: var(--gb-radius); }
.sit_use_con { margin-bottom: 0.625rem; }
.sit_use_p { margin: 0.625rem 0; padding: 0.625rem 0; }

/* 별점 분포 */
.sit-star-dist .progress { height: 0.5rem; border-radius: var(--gb-radius-sm); }
.sit-star-dist-label { width: 2rem; text-align: right; }
.sit-star-dist-count { width: 2rem; text-align: left; }
.sit_use_reply { position: relative; border-top: 1px dotted var(--gb-border-strong); margin: 0.625rem 0 0; padding: 0.625rem 0 0 2.5rem; }
.use_reply_icon { position: absolute; top: 0.625rem; left: 0.375rem; background: url('./img/use_reply.png') no-repeat 0 0; width: 28px; height: 17px; text-indent: -999px; overflow: hidden; }
.use_reply_tit { font-weight: 700; line-height: 1.5; padding-right: 100px; }
.use_reply_name { font-size: 0.92em; color: var(--gb-text-secondary); margin: 0.375rem; position: absolute; top: 0.625rem; right: 0; }
.use_reply_p { padding: 0.625rem 0; background: var(--gb-surface-card); line-height: 1.5; }
#sit_use_write_star { display: flex; }
#sit_use_write_star li { flex: 1; }
#sit_use_write_star li img { width: 100px; }

/* ==========================================================================
   28. 상품문의 (상세 탭)
   ========================================================================== */
#sit_qa { margin: 1.25rem 0; }
#sit_qa h2,
#sit_qa h3 { position: absolute; font-size: 0; line-height: 0; }
#sit_qa_ol { margin: 0 0 0.375rem; padding: 0; border-top: 1px solid var(--gb-border-subtle); list-style: none; }
.sit_qa_li { position: relative; border-bottom: 1px solid var(--gb-border-subtle); padding: 1rem 0.625rem; display: flex; flex-wrap: wrap; align-items: flex-start; }
.sit_qa_li_title { display: block; flex: 1; min-width: 0; text-align: left; background: none; border: 0; line-height: 1.75; font-weight: 700; font-size: 1.167em; }
.sit_qa_dl { flex-shrink: 0; line-height: 1.875rem; color: var(--gb-text-secondary); text-align: right; margin: 0; }
.sit_qa_dl dt { position: absolute; font-size: 0; line-height: 0; }
.sit_qa_dl dd { display: inline-block; margin-left: 0.625rem; }
.sit_qaa_done { display: inline-block; height: 1.875rem; line-height: 1.875rem; background: var(--gb-warning); color: var(--gb-text-on-warning, #fff); padding: 0 0.5rem; margin-right: 0.625rem; font-size: 0.75rem; font-weight: normal; border-radius: var(--gb-radius-sm); }
.sit_qaa_yet { display: inline-block; height: 1.875rem; line-height: 1.875rem; background: var(--gb-text-tertiary); color: var(--gb-text-on-primary); padding: 0 0.5rem; margin-right: 0.625rem; font-size: 0.75rem; font-weight: normal; border-radius: var(--gb-radius-sm); }
.sit_qa_con { display: none; }
.sit_qa_p { margin: 0.625rem 0; background: var(--gb-surface-sunken); line-height: 1.5; border-radius: var(--gb-radius); }
.sit_qa_p .qa_alp { position: absolute; top: 0.875rem; left: 1rem; font-size: 2em; color: var(--gb-text-primary); }
.sit_qa_qaa { padding: 1rem 1.25rem 1rem 3.125rem; position: relative; min-height: 50px; border-top: 1px solid var(--gb-surface-card); }
.sit_qa_qaq { padding: 1rem 1.25rem 1rem 3.125rem; position: relative; min-height: 50px; }
.sit_qa_con textarea { display: none; }
.sit_qa_cmd { text-align: right; }
.sit_qa_pw { display: none; position: absolute; top: 1.875rem; left: 175px; padding: 0.625rem; width: 348px; border: 1px solid var(--gb-border-strong); background: var(--gb-surface-overlay); text-align: center; border-radius: var(--gb-radius); box-shadow: var(--gb-shadow-md); }
.sit_qa_pw span { display: block; margin: 0 0 0.375rem; }
#sit_qa_wbtn { text-align: right; margin: 0 0 1.25rem; }
#sit_qa_wbtn a { padding: 0 1.25rem; line-height: 2.875rem; font-weight: 700; font-size: 1.167em; }
#sit_qa_write #iq_subject { width: 100%; }
/* .chk_box 제거 - Bootstrap form-check 사용 */

/* ==========================================================================
   29. 배송정보 / 교환정보 (상세 탭)
   ========================================================================== */
#sit_dvr { margin: 1.25rem 0; }
#sit_dvr h2 { position: absolute; font-size: 0; line-height: 0; }
#sit_ex { margin: 1.25rem 0; }
#sit_ex h2 { position: absolute; font-size: 0; line-height: 0; }

/* ==========================================================================
   30. 사용후기 모음 페이지
   ========================================================================== */
#sps_sch { margin: 0 0 0.625rem; }
#sps_sch a { display: inline-block; padding: 0 0.5rem; height: 2.5rem; line-height: 2.5rem; vertical-align: top; border-radius: var(--gb-radius-sm); background: var(--gb-primary); color: var(--gb-text-on-primary); font-weight: 700; text-decoration: none; }
#sps_sch .sch_wr { max-width: 300px; width: 100%; border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius-sm); display: inline-flex; background: var(--gb-surface-card); }
#sps_sch select { border: 1px solid var(--gb-border-default); max-width: 175px; height: 2.5rem; margin-right: 0.375rem; border-radius: var(--gb-radius-sm); }
#sps_sch .sch_input { flex: 1; min-width: 0; height: 2.375rem; border: 0; padding: 0; background-color: transparent; }
#sps_sch .sch_btn { height: 2.375rem; background: none; border: 0; width: 2.5rem; font-size: 15px; flex-shrink: 0; }

#sps ol { margin: 0; padding: 0; list-style: none; }
#sps li { position: relative; padding: 1rem; border-bottom: 1px solid var(--gb-border-subtle); background: var(--gb-surface-card); }

.sps_img { position: absolute; top: 1rem; left: 1rem; }
.sps_img_inner { position: relative; }
.sps_img a span { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.sps_img .prd_detail { position: absolute; right: 0; bottom: 0; border: 0; color: var(--gb-text-on-primary); background: var(--gb-success); width: 34px; height: 34px; text-align: center; opacity: 0.8; border-radius: var(--gb-radius-sm); }
.sps_img .prd_detail:hover { opacity: 1; }

/* 리뷰 상세 팝업 */
.review_detail_cnt { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999; background: rgba(0, 0, 0, 0.1); }
.review_detail_in { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 590px; max-height: 80vh; background: var(--gb-surface-overlay); text-align: left; overflow-y: auto; border-radius: var(--gb-radius-lg); border: 1px solid var(--gb-border-default); box-shadow: var(--gb-shadow-md); }
.review_detail_in h3 { padding: 1rem; border-bottom: 1px solid var(--gb-border-default); font-size: 1.4em; }
.review_cnt { padding: 1.5rem; }
.rd_cls { position: absolute; top: 0; right: 0; color: var(--gb-text-tertiary); border: 0; padding: 0.75rem 1rem; font-size: 1rem; background: var(--gb-surface-overlay); border-radius: 0 var(--gb-radius-lg) 0 0; }
.review_tp_cnt { position: relative; padding: 0 0 0.625rem; margin-bottom: 1rem; border-bottom: 1px solid var(--gb-border-subtle); }
.review_tp_cnt > span { font-size: 1.2em; display: block; }
.review_tp_cnt .sps_opt_btn_more { position: absolute; top: 0; right: 0; border: 0; padding: 0.375rem 0.375rem 0.375rem 0.625rem; background: var(--gb-surface-card); color: var(--gb-text-tertiary); font-size: 1.4em; }
.review_tp_cnt .sps_opt_li { display: none; position: absolute; top: 2.5rem; right: 0; border: 1px solid var(--gb-border-strong); border-radius: var(--gb-radius); overflow: hidden; }
.review_tp_cnt .sps_opt_li::before { content: ""; position: absolute; top: -8px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent var(--gb-border-strong) transparent; }
.review_tp_cnt .sps_opt_li::after { content: ""; position: absolute; top: -6px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent var(--gb-surface-overlay) transparent; }
.review_tp_cnt .sps_opt_li li { border-bottom: 1px solid var(--gb-border-subtle); padding: 0.625rem !important; color: var(--gb-text-secondary); }
.review_summ { background: var(--gb-surface-sunken); border: 2px solid var(--gb-border-default); padding: 0.625rem; border-radius: var(--gb-radius); }
.review_bt_cnt { margin: 1rem 0; }

.sps_reply { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px dotted var(--gb-border-strong); }
.sps_reply .sps_img { text-align: right; width: 70px; }
.sps_reply .sps_section h2 { background: url('./img/use_reply.png') no-repeat 0 0; text-indent: 30px; line-height: 1.5; }

#sps dl { margin: 0.375rem 0; display: flex; flex-wrap: wrap; align-items: center; }
#sps dd { margin: 0 0.625rem 0 0; color: var(--gb-text-tertiary); }
#sps dd img { position: relative; top: -2px; }

.sps_section { width: 100%; padding-left: 115px; }
.sps_section .sps_pd_name { display: block; color: var(--gb-primary); padding: 0.625rem 0 0.375rem; }
.sps_section .sps_rv_tit { display: block; font-size: 1.2em; font-weight: 700; }
.sps_section .sps_rv_thum { position: absolute; top: 1rem; right: 1rem; }
.sps_section p { padding: 0; width: 100%; }
.sps_con_full { padding: 0; height: auto !important; }
.sps_con_btn { margin: 0.375rem 0; display: flex; justify-content: space-between; align-items: center; }
.sps_con_btn button.review_detail { border-radius: var(--gb-radius-sm); border: 1px solid var(--gb-border-default); color: var(--gb-text-secondary); font-size: 0.92em; padding: 0.375rem 0.5rem; background: var(--gb-surface-card); transition: all var(--gb-transition); margin-left: auto; }
.sps_con_btn button.review_detail:hover { background: var(--gb-primary); border-color: var(--gb-primary); color: var(--gb-text-on-primary); }

/* ==========================================================================
   31. 상품문의 모음 페이지
   ========================================================================== */
#sqa_sch { margin: 0 0 0.625rem; }
#sqa_sch a { display: inline-block; padding: 0 0.5rem; height: 2.5rem; line-height: 2.5rem; vertical-align: top; border-radius: var(--gb-radius-sm); background: var(--gb-primary); color: var(--gb-text-on-primary); font-weight: 700; text-decoration: none; }
#sqa_sch .sch_wr { max-width: 300px; width: 100%; border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius-sm); display: inline-flex; background: var(--gb-surface-card); }
#sqa_sch select { border: 1px solid var(--gb-border-default); max-width: 175px; height: 2.5rem; margin-right: 0.375rem; border-radius: var(--gb-radius-sm); }
#sqa_sch .sch_input { flex: 1; min-width: 0; height: 2.375rem; border: 0; padding: 0; background-color: transparent; }
#sqa_sch .sch_btn { height: 2.375rem; background: none; border: 0; width: 2.5rem; font-size: 15px; flex-shrink: 0; }

#sqa { margin-bottom: 1.25rem; }
#sqa ol { margin: 0; padding: 0; list-style: none; }
#sqa li { position: relative; padding: 1rem 1.25rem 1rem 1rem; border-bottom: 1px solid var(--gb-border-subtle); background: var(--gb-surface-card); }
#sqa li .sit_qaa_yet { position: absolute; right: 1.25rem; top: 1.25rem; margin-right: 0; }
#sqa li .sit_qaa_done { position: absolute; right: 1.25rem; top: 1.25rem; margin-right: 0; }

.sqa_img { margin: 0 0.625rem 0 0; }
.sqa_img span { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }

#sqa dl { margin: 0.375rem 0; display: flex; flex-wrap: wrap; align-items: center; }
#sqa dd { margin: 0 0.625rem 0 0; color: var(--gb-text-tertiary); }
#sqa dd img { position: relative; top: -2px; }

.sqa_con { margin: 0.625rem 0; background: var(--gb-surface-sunken); line-height: 1.5; border-radius: var(--gb-radius); }
.sqa_con .qa_alp { position: absolute; top: 0.875rem; left: 1rem; font-size: 2em; color: var(--gb-text-primary); }
.sqa_section { width: 100%; }
.sqa_section h2 { padding-right: 70px; font-size: 1.2em; font-weight: 700; }
.sqa_section .sqa_con { line-height: 1.7; }
.sqa_section p { padding: 0; width: 100%; }
.sqa_con_full { padding: 0; height: auto !important; }
.sqa_con_btn button { border: 1px solid var(--gb-border-default); padding: 0.375rem 0.5rem; color: var(--gb-text-secondary); font-size: 0.92em; margin: 0.375rem 0; background: var(--gb-surface-card); border-radius: var(--gb-radius-sm); transition: all var(--gb-transition); }
.sqa_con_btn button:hover { background: var(--gb-primary); border-color: var(--gb-primary); color: var(--gb-text-on-primary); }

/* ==========================================================================
   32. 상품검색
   ========================================================================== */
#ssch { margin: 1.25rem 0; }
#ssch h2 { font-size: 1.8em; line-height: 1.875rem; margin: 0.625rem 0; }
#ssch h2 .ssch_result_total { margin-left: auto; color: var(--gb-text-secondary); font-size: 0.55em; font-weight: normal; }
#ssch h2 strong { color: var(--gb-danger); }
#ssch_frm { background: var(--gb-surface-card); border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius-lg); overflow: hidden; }
#ssch_frm .ssch_scharea { padding: 1rem; border-bottom: 1px solid var(--gb-border-default); display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
#ssch_frm .ssch_scharea label { display: inline-block; margin: 0 0.5rem 0 0; }
#ssch_frm .ssch_scharea .ssch_input { height: 2.875rem; padding: 0 0.625rem; margin-right: 0.375rem; border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius); }
#ssch_frm .ssch_option { padding: 1rem; border-bottom: 1px solid var(--gb-border-default); }
#ssch_frm .ssch_option .ssch_input { height: 2rem; padding: 0 0.625rem; margin-right: 0.375rem; border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius); }
#ssch_frm p { padding: 1rem; color: var(--gb-text-secondary); border-bottom: 1px solid var(--gb-border-default); }

#ssch_cate { background: var(--gb-surface-card); border-bottom: 1px solid var(--gb-border-default); padding: 1rem; }
#ssch_cate ul { display: flex; flex-wrap: wrap; }
#ssch_cate li { flex: 0 0 20%; border-right: 1px solid var(--gb-border-subtle); }
#ssch_cate li:nth-child(5n) { border-right: 0; }
#ssch_cate li span { font-weight: normal; }
#ssch_cate a { display: block; padding: 0 0.625rem; line-height: 2.5rem; }
#ssch_cate a:hover { color: var(--gb-primary); }

#ssch_sort { flex: 1; min-width: 0; }
#ssch_sort h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#ssch_sort ul { margin: 0; padding: 0 0 0 1px; list-style: none; display: flex; flex-wrap: wrap; }
#ssch_sort li { position: relative; margin-left: -1px; height: 45px; padding: 0.875rem 0; line-height: 1; }
#ssch_sort li a { border-left: 1px solid var(--gb-border-default); display: block; padding: 0 0.625rem; }
#ssch_sort li:hover::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--gb-primary); }
#ssch_sort li:hover a { color: var(--gb-primary); }
#ssch_sort li:first-child a { border: 0; }

#ssch_sort_all { margin: 0; padding: 0 1rem; list-style: none; display: flex; flex-wrap: wrap; }
#ssch_sort_all li { position: relative; margin-left: -1px; height: 45px; padding: 0.875rem 0; line-height: 1; }
#ssch_sort_all li a { display: block; padding: 0 0.625rem; }
#ssch_sort_all li:hover::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--gb-primary); }
#ssch_sort_all li:hover a { color: var(--gb-primary); }
#ssch_sort_all li:first-child a { border: 0; }

/* ==========================================================================
   33. 쿠폰존 리스트
   ========================================================================== */
.couponzone_list { margin: 0 0 1.25rem; position: relative; }
.couponzone_list h2 { padding: 1rem 1.25rem; font-size: 1.25em; border: 1px solid var(--gb-border-default); background: var(--gb-surface-card); border-radius: var(--gb-radius-lg) var(--gb-radius-lg) 0 0; }
.couponzone_list p { position: absolute; top: 0.375rem; right: 0; margin: 1rem 1.25rem; color: var(--gb-text-secondary); }
.couponzone_list ul { padding: 1.875rem; margin: 0; list-style: none; background: var(--gb-surface-card); border: 1px solid var(--gb-border-default); border-top: 0; border-radius: 0 0 var(--gb-radius-lg) var(--gb-radius-lg); display: flex; flex-wrap: wrap; gap: 1.875rem; }
.couponzone_list ul li { flex: 1 1 240px; background: var(--gb-surface-card); }
.couponzone_list ul li img { width: 100%; height: auto; line-height: 1.2; border-radius: var(--gb-radius) var(--gb-radius) 0 0; }
.couponzone_list ul li .cp_inner { border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius-lg); box-shadow: var(--shop-card-shadow); }
.couponzone_list ul li .coupon_img { position: relative; height: 98px; overflow: hidden; border-bottom: 1px dashed var(--gb-border-default); }
.couponzone_list ul li .coupon_tit { position: absolute; top: 0; left: 0; width: 100%; height: 98px; padding-top: 1.875rem; text-align: center; font-weight: 700; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.couponzone_list ul li .coupon_tit strong { display: inline-block; font-size: 1.3em; }
.couponzone_list ul li .coupon_tit .cp_evt,
.couponzone_list ul li .coupon_tit .cp_evt b { font-size: 1.4em; }
.couponzone_list ul li .cp_cnt { padding: 0.625rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.couponzone_list ul li .coupon_date { display: inline-block; margin-left: auto; padding: 2px 3px; margin-top: 0.375rem; margin-bottom: 0.375rem; font-size: 0.92em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--gb-text-secondary); }
.couponzone_list ul li .coupon_target { display: inline-block; margin: 0.375rem 0; }
.couponzone_list ul li .coupon_target > button { display: inline-block; max-width: 125px; padding: 2px 3px; font-size: 0.92em; border: 0; border-radius: var(--gb-radius-sm); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.couponzone_list ul li .coupon_target .cp_1 { background: var(--shop-cp-1-bg); color: #8cc152; }
.couponzone_list ul li .coupon_target .cp_2 { background: var(--shop-cp-2-bg); color: #c15293; }
.couponzone_list ul li .coupon_target .cp_3 { background: var(--shop-cp-3-bg); color: #c18b52; }
.couponzone_list ul li .coupon_target .cp_4 { background: var(--shop-cp-4-bg); color: #7c52c1; }
.couponzone_list ul li .coupon_info { display: none; position: absolute; min-width: 235px; background: var(--gb-surface-overlay); border: 1px solid var(--gb-border-strong); padding: 1rem; border-radius: var(--gb-radius); box-shadow: var(--gb-shadow-md); }
.couponzone_list ul li .coupon_info h4 { font-size: 1.2em; margin-bottom: 0.625rem; }
.couponzone_list ul li .coupon_info ul { padding: 0; margin: 0; position: relative; border: 0; display: block; }
.couponzone_list ul li .coupon_info li { width: auto; margin: 0; color: var(--gb-text-secondary); line-height: 1.125rem; flex: none; }
.couponzone_list ul li .coupon_info li a { text-decoration: underline; color: var(--gb-text-secondary); }
.couponzone_list ul li .coupon_info .coupon_info_cls { position: absolute; right: 0; top: 0; color: var(--gb-text-tertiary); border: 0; background: var(--gb-surface-overlay); padding: 0.625rem; font-size: 1.2em; }
.couponzone_list ul li .coupon_btn { text-align: center; }
.couponzone_list ul li .coupon_btn .disabled { background: var(--gb-text-tertiary); border: 1px solid var(--gb-text-tertiary); color: var(--gb-text-on-primary); cursor: not-allowed; }
.couponzone_list ul li .coupon_btn .disabled:hover { background: var(--gb-text-tertiary); border: 1px solid var(--gb-text-tertiary); color: var(--gb-text-on-primary); }
.couponzone_list .no_coupon { position: relative; padding: 6.25rem 0; text-align: center; color: var(--gb-text-tertiary); }

/* 쿠폰존 Bootstrap card 스타일 (couponzone.10.skin.php) */
.couponzone_list .card {
    border: 1px solid var(--gb-border-default);
    border-radius: var(--gb-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--gb-transition), transform var(--gb-transition);
}
.couponzone_list .card:hover {
    box-shadow: var(--gb-shadow-md);
    transform: translateY(-2px);
}
.couponzone_list .card .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gb-text-primary);
}
.couponzone_list .card .coupon_info {
    display: none;
    background-color: var(--gb-surface-raised);
}
.couponzone_list .card .coupon_info_btn {
    cursor: pointer;
    color: var(--gb-primary);
    font-size: 0.875rem;
    transition: color var(--gb-transition);
}
.couponzone_list .card .coupon_info_btn:hover {
    color: var(--gb-primary-hover);
}
.couponzone_list .card .coupon_download {
    transition: all var(--gb-transition);
}
.couponzone_list .card .coupon_download:not(:disabled):hover {
    transform: scale(1.02);
}

/* ==========================================================================
   34. 보조 유틸리티 클래스
   ========================================================================== */
.sct-cart-overlay { background: var(--shop-overlay-light); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--gb-transition); }
.sct_10 .card:hover .sct-cart-overlay { opacity: 1; }
.sfl-select { max-width: 160px; }
.ct-qty-input { width: 60px; }

/* 통합 가격 클래스 (CSS 변수 연결) */
.sct-price-sale { font-weight: 700; font-size: 1.05em; color: var(--gb-text-primary); }
.sct-price-orig { text-decoration: line-through; font-weight: 400; font-size: 0.85em; color: var(--shop-price-old); }

/* 카드 hover 효과 + 이미지 줌 (sct_10 갤러리 뷰) */
.sct_10 .card { transition: transform var(--gb-transition), box-shadow var(--gb-transition); }
.sct_10 .card:hover { transform: translateY(-3px); box-shadow: var(--gb-shadow-md); }
.sct_10 .position-relative { overflow: hidden; }
.sct_10 .card-img-top { transition: transform 0.35s ease; }
.sct_10 .card:hover .card-img-top { transform: scale(1.06); }

/* 리스트 뷰 카드 hover (sct_20/sct_30) */
.sct_20 .card,
.sct_30 .card { transition: border-color var(--gb-transition), box-shadow var(--gb-transition); }
.sct_20 .card:hover,
.sct_30 .card:hover { border-color: var(--gb-primary); box-shadow: var(--gb-shadow-sm); }

/* ==========================================================================
   34-a. 뷰 전환 (갤러리 ↔ 리스트)
   ========================================================================== */
.sct_10.sct-view-list { display: block !important; }
.sct_10.sct-view-list > .col { width: 100%; flex: none; max-width: 100%; margin-bottom: 0.75rem; }
.sct_10.sct-view-list .card { flex-direction: row; border: 1px solid var(--gb-border-default); }
.sct_10.sct-view-list .position-relative { flex: 0 0 140px; overflow: hidden; }
.sct_10.sct-view-list .card-img-top { height: 100%; object-fit: cover; border-radius: var(--gb-radius) 0 0 var(--gb-radius); }
.sct_10.sct-view-list .card-body { display: flex; flex-direction: column; justify-content: center; }
.sct_10.sct-view-list .sct-cart-overlay { display: none; }
.sct_10.sct-view-list .card-footer { display: none; }
.sct_10.sct-view-list .card:hover { transform: none; box-shadow: var(--gb-shadow-sm); }

/* ==========================================================================
   34-b. 가격 필터 바
   ========================================================================== */
#sct_price_filter { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.5rem; padding-right: 0.75rem; border-right: 1px solid var(--gb-border-default); }
.sct-filter-form { display: flex; align-items: center; }
.sct-price-range { display: flex; align-items: center; gap: 0.25rem; }
.sct-price-range .form-control { max-width: 100px; }
.sct-price-sep { color: var(--gb-text-tertiary); font-weight: 500; padding: 0 0.125rem; }
.sct-filter-btn { white-space: nowrap; }
.sct-filter-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.375rem; padding-top: 0.375rem; border-top: 1px solid var(--gb-border-default); }
.sct-filter-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; background: var(--gb-surface-raised); border: 1px solid var(--gb-border-default); border-radius: 999px; font-size: 0.8125rem; color: var(--gb-text-secondary); }
.sct-filter-chip i.fa-won-sign { color: var(--gb-primary); }
.sct-filter-chip-remove { color: var(--gb-text-tertiary); text-decoration: none; line-height: 1; transition: color var(--gb-transition); }
.sct-filter-chip-remove:hover { color: var(--gb-danger); }

/* ==========================================================================
   35. 마이크로인터랙션 (사용후기 / 상품문의 / Bootstrap 컴포넌트)
   ========================================================================== */

/* 사용후기 목록 항목 hover */
#sit_use_list .list-group-item {
    transition: background-color var(--gb-transition), box-shadow var(--gb-transition);
}
#sit_use_list .list-group-item:hover {
    background-color: var(--gb-surface-raised);
}

/* 상품문의 아코디언 hover */
#sit_qa_list .accordion-item,
#sitQaAccordion .accordion-item,
#sqaAccordion .accordion-item {
    transition: box-shadow var(--gb-transition);
}
#sit_qa_list .accordion-item:hover,
#sitQaAccordion .accordion-item:hover,
#sqaAccordion .accordion-item:hover {
    box-shadow: var(--gb-shadow-sm);
}
#sit_qa_list .accordion-button:not(.collapsed),
#sitQaAccordion .accordion-button:not(.collapsed),
#sqaAccordion .accordion-button:not(.collapsed) {
    background-color: var(--gb-surface-raised);
    color: var(--gb-text-primary);
}

/* 아코디언 답변 영역 강조 */
.accordion-body .border-start.border-success {
    background-color: rgba(22, 163, 74, 0.04);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--gb-radius) var(--gb-radius) 0;
}

/* 사용후기 답변 카드 */
.sit-reply-card {
    background-color: var(--gb-surface-raised);
}
.sit_use_con .sit-reply-card,
.review_bt_cnt + .sit-reply-card {
    border: 1px solid var(--gb-border-default);
    transition: box-shadow var(--gb-transition);
}
.sit_use_con .sit-reply-card:hover,
.review_bt_cnt + .sit-reply-card:hover {
    box-shadow: var(--gb-shadow-sm);
}

/* 뱃지 트랜지션 */
.badge.bg-success,
.badge.bg-warning {
    transition: transform var(--gb-transition);
}
.accordion-button:hover .badge.bg-success,
.accordion-button:hover .badge.bg-warning {
    transform: scale(1.05);
}

/* focus-visible 링 (키보드 접근성) */
.accordion-button:focus-visible,
#sit_use_list .btn:focus-visible,
#sit_qa_list .btn:focus-visible,
.sit_use_li_title:focus-visible,
.itemuse_form:focus-visible,
.itemqa_form:focus-visible,
.gnb_2da:focus-visible {
    outline: 2px solid var(--gb-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* 빈 상태 디자인 개선 */
#sit_use_list p.text-muted,
#sit_qa_list p.text-muted,
#sps p.text-muted,
#sqa p.text-muted {
    font-size: 0.95rem;
    padding: 3rem 1rem;
}

/* 사용후기 모음 리스트 hover (Bootstrap list-group) */
#sps .list-group-item {
    transition: background-color var(--gb-transition), transform var(--gb-transition);
}
#sps .list-group-item:hover {
    background-color: var(--gb-surface-raised);
}

/* ==========================================================================
   36. 반응형 미디어 쿼리
   ========================================================================== */

/* 태블릿 (992px 이하) */
@media (max-width: 991.98px) {
    #sit_info { flex-direction: column; }
    #sit_buy { flex-basis: 100%; position: relative !important; align-self: auto; }
    .sit_sel_option { height: auto; max-height: 300px; }
    .smt_10 .sct_li { flex: 0 0 calc(33.333% - 0.667rem); }
    .sct_40 .sct_cost { position: static; margin: 0.375rem 0 0.625rem; font-size: 1.25em; }
    #sit_ov { position: relative !important; }
}

/* 태블릿 소형 (768px 이하) */
@media (max-width: 767.98px) {
    #stv_pg { display: none; }
    .couponzone_list ul { padding: 1rem; gap: 1rem; }
    .couponzone_list ul li { flex: 0 0 100%; }
    #sct_price_filter { border-right: 0; padding-right: 0; flex-basis: 100%; }
    #sct_sortlst { gap: 0.375rem 0.5rem; padding: 0.375rem 0.5rem; }
    .sps_section { padding-left: 0; }
    .sps_img { position: static; margin-bottom: 0.5rem; }
    .sit_use_li { padding-left: 0; min-height: auto; }
    .sit_thum { position: static; margin-bottom: 0.5rem; }
    #sit_ov_wrap { padding: 1rem 0; }
}

/* 모바일 (576px 이하) */
@media (max-width: 575.98px) {
    #sit_title { font-size: 1.25rem; }
    #sit_desc { font-size: 0.875rem; }
    .sit-price-hero .sit-price-sale { font-size: 1.5rem; }
    .sit-price-hero .sit-price-orig { font-size: 0.8125rem; }
    #sit_ov_btn button { height: 2.625rem; font-size: 0.9375rem; }
    .smt_10 .sct_li { flex: 0 0 calc(50% - 0.5rem); min-width: 0; }
    .smt_20 .sct_li { flex: 0 0 calc(50% - 0.5rem); min-width: 0; }
    /* smt_40: Swiper가 slidesPerView로 크기 관리 — flex 미지정 */
    .smt_30 .sct_img { flex: 0 0 60px; }
    .smt_30 .sct_img img { width: 60px; height: 60px; }
    .smt_30 .sct_cost { font-size: 0.95em; }
    #ssch_cate li { flex: 0 0 50%; }
    .sit_use_con { margin-right: 0; }
    #sit_use_wbtn { position: static; margin-bottom: 1rem; }
    #sit_qa_wbtn { margin-bottom: 0.625rem; }
    .sct_op_btn .btn { width: 30px; height: 30px; font-size: 0.8rem; }
    .sct_noitem { padding: 4rem 0; }
    .sct_noitem .fa-2x { font-size: 1.5em; }

    /* 리스트 뷰 → 세로 복원 */
    .sct_10.sct-view-list .card { flex-direction: column; }
    .sct_10.sct-view-list .position-relative { flex: none; }
    .sct_10.sct-view-list .card-img-top { height: auto; border-radius: var(--gb-radius) var(--gb-radius) 0 0; }

    /* 필터 바 세로 스택 */
    #sct_price_filter { border-right: 0; padding-right: 0; flex-basis: 100%; }
    .sct-price-range { flex: 1; }
    .sct-price-range .form-control { max-width: none; flex: 1; }
}

/* 접근성: 모션 감소 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .sct_img img { transform: none !important; }
}

/* 반응형: 모바일 터치 타겟 */
@media (max-width: 767.98px) {
    .gnb_2da { min-height: 44px; padding: 10px 16px; }
}


/* ========================================
   다크모드 오버라이드
   ======================================== */

/* 품절 안내 — 연한 빨강 배경 → 반투명 */
[data-theme="dark"] #sit_ov_soldout { --sit-soldout-bg: rgba(239,68,68,0.1); --sit-soldout-border: rgba(239,68,68,0.25); }

/* QA 답변완료 배지 */
[data-theme="dark"] .sit_qaa_done { background: rgba(255,193,7,0.2); color: #ffc107; }

/* 쿠폰존 대상 배지 — --shop-cp-*-bg 변수로 자동 다크 대응 (§1 참조) */

/* SNS 공유 — 다크 배경 보정 */
[data-theme="dark"] .sct_sns_wrap { --sct-sns-backdrop: rgba(0, 0, 0, 0.5); --sct-sns-icon-shadow: rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .sct_sns_item.share-copy i { background: var(--gb-text-secondary); }
[data-theme="dark"] #sit_star_sns .sns_area .share-facebook,
[data-theme="dark"] #sit_star_sns .sns_area .share-twitter { border: 1px solid var(--gb-border-default); }

/* 장바구니 오버레이 — --shop-overlay-light 변수로 자동 다크 대응 (§1 참조) */

/* 아이콘 배지 — 쿠폰 */
[data-theme="dark"] .shop_icon_coupon { background: rgba(212,89,89,0.8); }

/* 카드 hover shadow — 다크 */
[data-theme="dark"] .sct_10 .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
[data-theme="dark"] .sct_10.sct-view-list .card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }