@charset "utf-8";

/* Clarity shopping layer: the Gnuboard shop markup remains compatible, while the visual shell is theme-owned. */
body.clarity-page:has(.clarity-shop-page) { background: var(--clarity-page); }
.clarity-shop-page { min-height: 100vh; background: var(--clarity-page); color: var(--clarity-text); }
.clarity-shop-shell { width: min(100% - 2rem, 80rem); margin-inline: auto; }
.clarity-shop-header { position: relative; z-index: 60; background: var(--clarity-surface); box-shadow: 0 1px 0 var(--clarity-border); }
/* 서비스 전환 바는 커뮤니티와 같은 컴포넌트다. 모양은 community.css 의
   .clarity-community-service-switch 가 갖고 있고, 여기서는 셸만 쇼핑몰
   레일에 맞춰 준다. */

.clarity-shop-mainbar { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 4.5rem; align-items: center; gap: 2rem; }
.clarity-shop-nav { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.clarity-shop-brand { display: inline-flex; min-width: 0; align-items: center; gap: .65rem; color: var(--clarity-text); }
.clarity-shop-brand img, .clarity-shop-footer-brand img { display: block; width: auto; height: 30px; }
.clarity-shop-search-dock-inner { padding-block: 1.25rem 1.5rem; }
.clarity-shop-search { display: flex; min-width: 0; height: 2.875rem; align-items: center; border: 1px solid var(--clarity-border-strong); border-radius: .625rem; background: var(--clarity-surface-soft); transition: border-color .16s, box-shadow .16s; }
.clarity-shop-search:focus-within { border-color: var(--clarity-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clarity-primary) 14%, transparent); }
.clarity-shop-search input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: var(--clarity-text); padding: 0 1rem; font: inherit; font-size: .875rem; }
.clarity-shop-search input::placeholder { color: var(--clarity-muted); }
.clarity-shop-search button { display: inline-grid; width: 2.75rem; height: 2.75rem; flex: none; place-items: center; border: 0; border-radius: .5rem; background: transparent; color: var(--clarity-primary); cursor: pointer; }
.clarity-shop-search button:hover, .clarity-shop-search button:focus-visible { background: var(--clarity-primary-soft); }
.clarity-shop-actions { display: flex; align-items: center; gap: .75rem; }
.clarity-shop-search-toggle, .clarity-shop-account, .clarity-shop-cart { position: relative; display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: .5rem; background: transparent; color: var(--clarity-text-soft); cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 700; }
.clarity-shop-search-toggle { width: 2.75rem; font-size: 1rem; }
.clarity-shop-account { padding-inline: .65rem; }
.clarity-shop-search-toggle:hover, .clarity-shop-account:hover, .clarity-shop-cart:hover { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
.clarity-shop-cart { width: 2.75rem; font-size: 1rem; }
.clarity-shop-cart-count { position: absolute; top: .1rem; right: .05rem; display: inline-grid; min-width: 1.1rem; height: 1.1rem; padding-inline: .25rem; place-items: center; border-radius: 999px; background: var(--clarity-primary); color: var(--color-primary-content, #fff); font-size: .62rem; font-weight: 900; }

.clarity-shop-category-toggle { display: inline-flex; min-height: 2.5rem; white-space: nowrap; align-items: center; gap: .5rem; border: 1px solid var(--clarity-primary); border-radius: .5rem; background: var(--clarity-primary); color: var(--color-primary-content, #fff); cursor: pointer; padding: 0 1rem; font: inherit; font-size: .8125rem; font-weight: 800; }
.clarity-shop-category-toggle:hover, .clarity-shop-category-toggle:focus-visible { background: var(--clarity-primary-hover); }
.clarity-shop-type-nav { display: flex; min-width: 0; align-items: center; gap: .15rem; }
.clarity-shop-type-nav a { display: inline-flex; min-height: 2.5rem; align-items: center; border-radius: .5rem; color: var(--clarity-text-soft); padding-inline: .75rem; font-size: .8125rem; font-weight: 750; white-space: nowrap; }
.clarity-shop-type-nav a:hover, .clarity-shop-type-nav a:focus-visible { background: var(--clarity-primary-soft); color: var(--clarity-primary); }

/* 펼침 패널은 메인바를 기준으로 놓인다. left 는 셸의 안쪽 여백만큼 밀어
   로고·본문과 같은 레일에서 시작하게 한다. */
.clarity-shop-category { position: absolute; z-index: 100; top: calc(100% + .5rem); left: 1.5rem; visibility: hidden; width: min(50rem, calc(100vw - 2rem)); opacity: 0; pointer-events: none; transform: translateY(-.35rem); transition: opacity .16s, transform .16s, visibility .16s; }
.clarity-shop-category.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.clarity-shop-category-backdrop { display: none; }
.clarity-shop-category-panel { position: relative; border: 1px solid var(--clarity-border); border-radius: .75rem; background: var(--clarity-surface); box-shadow: 0 18px 42px color-mix(in srgb, var(--clarity-text) 14%, transparent); overflow: hidden; }
.clarity-shop-category-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--clarity-border); padding: 1rem 1.25rem; }
.clarity-shop-category-head h2 { margin-top: .2rem; font-size: 1.05rem; font-weight: 900; }
.clarity-shop-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.25rem; }
.clarity-shop-category-group { min-width: 0; }
.clarity-shop-category-root { display: flex; min-height: 2.5rem; align-items: center; justify-content: space-between; border-radius: .5rem; background: var(--clarity-primary-soft); color: var(--clarity-primary); padding: 0 .75rem; font-size: .8125rem; font-weight: 850; }
.clarity-shop-category-root i { font-size: .7rem; }
.clarity-shop-category-group ul { display: grid; gap: .1rem; margin-top: .35rem; padding: 0 .35rem; }
.clarity-shop-category-group li a { display: block; border-radius: .35rem; color: var(--clarity-muted); padding: .35rem .4rem; font-size: .75rem; }
.clarity-shop-category-group li a:hover, .clarity-shop-category-group li a:focus-visible { background: var(--clarity-surface-soft); color: var(--clarity-primary); }
.clarity-shop-category-empty { grid-column: 1 / -1; padding: 2rem; color: var(--clarity-muted); text-align: center; }

.clarity-shop-wrapper { min-height: 40rem; background: var(--clarity-page); }
.clarity-shop-container { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; width: min(100% - 2rem, 80rem); margin: 0 auto; padding: 2rem 0 4rem; }
.clarity-shop-container > .shop-content { min-width: 0; grid-column: 2; }
.clarity-shop-container > #aside + .shop-content { grid-column: 2; }
.clarity-shop-container > .shop-content:only-child { grid-column: 1 / -1; }
.clarity-shop-sidebar { display: grid; align-content: start; gap: 1rem; grid-column: 1; grid-row: 1; }
.clarity-shop-sidebar-card { border: 1px solid var(--clarity-border); border-radius: .75rem; background: var(--clarity-surface); padding: 1.25rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--clarity-text) 5%, transparent); }
.clarity-shop-sidebar-card h2 { margin-top: .35rem; font-size: 1.05rem; font-weight: 900; }
.clarity-shop-sidebar-links { display: grid; gap: .25rem; margin-top: 1rem; }
.clarity-shop-sidebar-links a { display: flex; min-height: 2.25rem; align-items: center; justify-content: space-between; border-radius: .45rem; color: var(--clarity-text-soft); padding-inline: .6rem; font-size: .8rem; font-weight: 700; }
.clarity-shop-sidebar-links a:hover, .clarity-shop-sidebar-links a:focus-visible { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
.clarity-shop-sidebar-links i { font-size: .65rem; }
.clarity-shop-help-card { background: var(--clarity-primary-soft); }
.clarity-shop-help-card p { margin: .65rem 0 1rem; color: var(--clarity-muted); font-size: .75rem; line-height: 1.6; }
.clarity-shop-page-title { margin-bottom: 1.25rem; border-bottom: 1px solid var(--clarity-border); padding-bottom: 1rem; }
.clarity-shop-page-title h1 { margin-top: .35rem; font-size: 1.75rem; font-weight: 950; letter-spacing: -.04em; }
.clarity-shop-eyebrow { display: block; color: var(--clarity-primary); font-size: .66rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }

.clarity-shop-hero { position: relative; display: flex; min-height: 19rem; align-items: center; justify-content: space-between; gap: 2rem; isolation: isolate; overflow: hidden; border-radius: 1rem; background: linear-gradient(135deg, var(--clarity-primary), var(--clarity-primary-hover)); color: var(--color-primary-content, #fff); padding: 2.75rem 3rem; }
.clarity-shop-hero-copy { position: relative; z-index: 1; max-width: 32rem; }
.clarity-shop-hero .clarity-shop-eyebrow { color: color-mix(in srgb, var(--color-primary-content, #fff) 75%, transparent); }
.clarity-shop-hero h1 { margin-top: .65rem; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 950; letter-spacing: -.06em; line-height: 1.05; }
.clarity-shop-hero h1 strong { color: #fff; }
.clarity-shop-hero p { max-width: 28rem; margin: 1rem 0 1.5rem; color: color-mix(in srgb, var(--color-primary-content, #fff) 78%, transparent); font-size: .95rem; line-height: 1.7; }
.clarity-shop-hero .btn { border-color: #fff; background: #fff; color: var(--clarity-primary); }
.clarity-shop-hero .btn:hover, .clarity-shop-hero .btn:focus-visible { background: color-mix(in srgb, #fff 86%, var(--clarity-primary)); }
.clarity-shop-hero-art { position: absolute; z-index: 0; right: -3rem; bottom: -4rem; display: grid; width: 27rem; height: 20rem; place-items: center; border: 1px solid color-mix(in srgb, #fff 30%, transparent); border-radius: 50%; transform: rotate(-18deg); }
.clarity-shop-hero-art::before { position: absolute; width: 20rem; height: 14rem; border: 1px solid color-mix(in srgb, #fff 25%, transparent); border-radius: 50%; content: ""; }
.clarity-shop-hero-art span { color: color-mix(in srgb, #fff 26%, transparent); font-weight: 900; font-size: 5rem; line-height: .8; letter-spacing: -.12em; transform: rotate(18deg); }
.clarity-shop-banner { margin-top: 1rem; overflow: hidden; border-radius: .75rem; }
.clarity-shop-banner img { display: block; width: 100%; height: auto; }
.clarity-shop-product-feed { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.clarity-shop-product-section { min-width: 0; border: 1px solid var(--clarity-border); border-radius: .75rem; background: var(--clarity-surface); padding: 1.25rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--clarity-text) 5%, transparent); }
.clarity-shop-section-head { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--clarity-border); margin-bottom: 1rem; padding-bottom: .875rem; }
.clarity-shop-section-head h2 { margin-top: .25rem; font-size: 1.2rem; font-weight: 950; letter-spacing: -.035em; }

/* Basic shop skin bridge: keeps item_list(), option forms and cart actions intact. */
.clarity-shop-page .sct { display: grid; grid-template-columns: repeat(var(--sct-cols, 4), minmax(0, 1fr)); gap: 1rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.clarity-shop-page .sct_li { position: relative; min-width: 0; border: 1px solid var(--clarity-border); border-radius: .625rem; background: var(--clarity-surface); padding: .625rem; transition: transform .16s, box-shadow .16s, border-color .16s; }
.clarity-shop-page .sct_li:hover { border-color: var(--clarity-border-strong); box-shadow: 0 10px 24px color-mix(in srgb, var(--clarity-text) 8%, transparent); transform: translateY(-2px); }
.clarity-shop-page .sct_img { position: relative; overflow: hidden; border-radius: .45rem; background: var(--clarity-surface-soft); }
.clarity-shop-page .sct_img > a { display: block; aspect-ratio: 1; }
.clarity-shop-page .sct_img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.clarity-shop-page .sct_ct_wrap { padding: .8rem .25rem .25rem; }
.clarity-shop-page .sct_star { min-height: 1rem; color: var(--clarity-primary); font-size: .7rem; }
.clarity-shop-page .sct_txt { margin-top: .35rem; min-height: 2.8rem; }
.clarity-shop-page .sct_txt a { color: var(--clarity-text); font-size: .875rem; font-weight: 800; line-height: 1.45; }
.clarity-shop-page .sct_txt a:hover { color: var(--clarity-primary); }
.clarity-shop-page .sct_basic { min-height: 1.4rem; margin-top: .25rem; overflow: hidden; color: var(--clarity-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.clarity-shop-page .sct_bottom { display: flex; min-height: 2.25rem; align-items: end; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.clarity-shop-page .sct_cost { color: var(--clarity-primary); font-size: 1rem; font-weight: 900; }
.clarity-shop-page .sct_dict { display: block; color: var(--clarity-muted); font-size: .68rem; font-weight: 500; text-decoration: line-through; }
.clarity-shop-page .sct_op_btn { display: flex; align-items: center; gap: .25rem; }
.clarity-shop-page .sct_op_btn button { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--clarity-border); border-radius: .4rem; background: var(--clarity-surface); color: var(--clarity-muted); cursor: pointer; }
.clarity-shop-page .sct_op_btn button:hover, .clarity-shop-page .sct_op_btn button:focus-visible { border-color: var(--clarity-primary); color: var(--clarity-primary); }
.clarity-shop-page .sct_btn { position: absolute; right: .75rem; bottom: 4.5rem; left: .75rem; opacity: 0; transform: translateY(.35rem); transition: opacity .16s, transform .16s; }
.clarity-shop-page .sct_li:hover .sct_btn, .clarity-shop-page .sct_li:focus-within .sct_btn { opacity: 1; transform: translateY(0); }
.clarity-shop-page .sct_cart { width: 100%; min-height: 2.25rem; border: 1px solid var(--clarity-primary); border-radius: .45rem; background: var(--clarity-primary); color: var(--color-primary-content, #fff); cursor: pointer; font-size: .75rem; font-weight: 800; }
.clarity-shop-page .sct_noitem { margin: 0; border: 1px dashed var(--clarity-border-strong); border-radius: .5rem; color: var(--clarity-muted); padding: 2.5rem 1rem; text-align: center; }
.clarity-shop-page .shop_icon_soldout { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--clarity-text) 45%, transparent); color: #fff; font-size: .75rem; font-weight: 900; letter-spacing: .08em; }

.clarity-shop-page #sct_location { display: flex; min-height: 2.5rem; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--clarity-muted); font-size: .8rem; }
.clarity-shop-page #sct_location .go_home { color: var(--clarity-primary); }
.clarity-shop-page #sct_location select { height: 2.25rem; border: 1px solid var(--clarity-border); border-radius: .4rem; background: var(--clarity-surface); color: var(--clarity-text-soft); padding-inline: .6rem; font: inherit; font-size: .75rem; }
.clarity-shop-page #sct_ct_1 { margin-bottom: 1rem; border: 1px solid var(--clarity-border); border-radius: .625rem; background: var(--clarity-surface); padding: 1rem; }
.clarity-shop-page #sct_ct_1 h2, .clarity-shop-page #sct_sort h2, .clarity-shop-page #sct_lst h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.clarity-shop-page #sct_ct_1 ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.clarity-shop-page #sct_ct_1 a, .clarity-shop-page #ssch_sort a { display: inline-flex; min-height: 2rem; align-items: center; border-radius: 999px; background: var(--clarity-surface-soft); color: var(--clarity-text-soft); padding-inline: .75rem; font-size: .75rem; }
.clarity-shop-page #sct_ct_1 a:hover, .clarity-shop-page #ssch_sort a:hover { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
.clarity-shop-page #sct_sortlst { display: flex; min-height: 2.5rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.clarity-shop-page #sct_sort ul, .clarity-shop-page #sct_lst { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.clarity-shop-page #ssch_sort a { background: transparent; color: var(--clarity-muted); }
.clarity-shop-page #sct_lst button { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--clarity-border); border-radius: .35rem; background: var(--clarity-surface); color: var(--clarity-muted); cursor: pointer; }

.clarity-shop-page #sit_ov_from { margin-top: 1rem; }
/* 스킨 style.css 가 이 상자를 1200px 로 못박아 좁은 화면에서 화면을 넘겼다. */
.clarity-shop-page #sit_ov_wrap { display: grid; width: 100%; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); gap: 2rem; border: 1px solid var(--clarity-border); border-radius: .75rem; background: var(--clarity-surface); padding: 1.25rem; }
.clarity-shop-page #sit_pvi_big { position: relative; overflow: hidden; border-radius: .625rem; background: var(--clarity-surface-soft); }
.clarity-shop-page #sit_pvi_big > a:first-child, .clarity-shop-page #sit_pvi_big > img { display: block; aspect-ratio: 1; width: 100%; }
.clarity-shop-page #sit_pvi_big img { width: 100%; height: 100%; object-fit: contain; }
.clarity-shop-page #sit_pvi_thumb { display: flex; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.clarity-shop-page #sit_pvi_thumb img { width: 3.75rem; height: 3.75rem; border: 1px solid var(--clarity-border); border-radius: .35rem; object-fit: cover; }
.clarity-shop-page #sit_ov { width: 100%; min-width: 0; padding: .5rem; }
.clarity-shop-page #sit_title { font-size: 1.6rem; font-weight: 950; letter-spacing: -.045em; }
.clarity-shop-page #sit_desc { margin-top: .5rem; color: var(--clarity-muted); font-size: .875rem; line-height: 1.6; }
.clarity-shop-page .clarity-sit-brand { color: var(--clarity-muted); font-size: .78rem; font-weight: 600; }
.clarity-shop-page #sit_star_sns { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; color: var(--clarity-muted); font-size: .78rem; }
.clarity-shop-page .sit_star { width: 5.5rem; }
.clarity-shop-page .clarity-sit-score { color: var(--clarity-text); font-weight: 800; }
.clarity-shop-page #sit_btn_opt { position: relative; display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.clarity-shop-page #sit_btn_opt > * { cursor: pointer; }
.clarity-shop-page #sit_opt_info { margin-top: .35rem; color: var(--clarity-muted-soft); font-size: .72rem; }

/* 가격 한 줄: 할인율 · 판매가 · 취소선 정가 */
.clarity-shop-page .clarity-sit-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-top: 1rem; }
.clarity-shop-page .clarity-sit-discount { color: var(--ondam-sale, var(--clarity-primary)); font-size: 1.25rem; font-weight: 800; }
.clarity-shop-page .clarity-sit-price-now { color: var(--clarity-text); font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; }
.clarity-shop-page .clarity-sit-price-was { color: var(--clarity-muted-soft); font-size: .875rem; text-decoration: line-through; }
.clarity-shop-page .clarity-sit-price-none { font-size: 1.25rem; }

/* 안내 줄. 값이 있는 항목만 dt/dd 로 들어온다. */
.clarity-shop-page .sit_info { margin-top: 1.25rem; border-top: 1px solid var(--clarity-border); padding-top: 1rem; }
.clarity-shop-page .clarity-sit-meta { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); row-gap: .55rem; margin: 0; }
.clarity-shop-page .clarity-sit-meta dt { color: var(--clarity-muted); font-size: .78rem; }
.clarity-shop-page .clarity-sit-meta dd { margin: 0; color: var(--clarity-text-soft); font-size: .8125rem; }

.clarity-shop-page .sit_option, .clarity-shop-page #sit_sel_option { margin-top: 1rem; border: 1px solid var(--clarity-border); border-radius: .5rem; padding: .75rem; }
.clarity-shop-page .sit_option h3, .clarity-shop-page #sit_sel_option h3 { margin-bottom: .5rem; font-size: .75rem; font-weight: 850; }
.clarity-shop-page .sit_option select { width: 100%; min-height: 2.75rem; border: 1px solid var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text); padding-inline: .75rem; font-size: .8125rem; }
.clarity-shop-page .clarity-sit-selected-title { margin: 1.25rem 0 -.25rem; color: var(--clarity-muted); font-size: .75rem; font-weight: 700; }

/* 선택된 옵션 카드. 옵션이 없는 상품은 스킨이 그린 모양(.opt_name/.opt_count),
   옵션을 고른 상품은 shop.js 가 그린 모양(span + div)이 온다. 둘 다 받는다. */
.clarity-shop-page #sit_opt_added { margin: 0; padding: 0; list-style: none; }
.clarity-shop-page .sit_opt_list, .clarity-shop-page .sit_spl_list { display: grid; gap: .5rem; border-bottom: 1px solid var(--clarity-border); padding: .65rem 0; }
.clarity-shop-page #sit_opt_added > li:last-child { border-bottom: 0; padding-bottom: 0; }
.clarity-shop-page .sit_opt_subj { color: var(--clarity-text); font-size: .8125rem; font-weight: 700; }
.clarity-shop-page .sit_opt_prc { color: var(--clarity-text-soft); font-size: .8125rem; }
.clarity-shop-page .opt_count, .clarity-shop-page .sit_opt_list > div, .clarity-shop-page .sit_spl_list > div { display: flex; align-items: center; gap: .35rem; }
.clarity-shop-page .opt_count .sit_opt_prc { margin-left: auto; font-weight: 700; }
.clarity-shop-page :is(.sit_qty_minus, .sit_qty_plus, .sit_opt_del) { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); cursor: pointer; font-size: .7rem; }
.clarity-shop-page :is(.sit_qty_minus, .sit_qty_plus, .sit_opt_del):hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
.clarity-shop-page .sit_opt_list :is(.num_input, .frm_input) { width: 3rem; height: 2rem; border: 1px solid var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text); text-align: center; font-size: .8125rem; }

/* 총 결제금액. 안쪽 문구는 shop.js 가 쓰므로("총 금액 :") 그 라벨은 감추고
   스킨이 둔 라벨을 쓴다. */
.clarity-shop-page .clarity-sit-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--clarity-border); margin-top: 1rem; padding-top: 1rem; }
.clarity-shop-page .clarity-sit-total-label { color: var(--clarity-text-soft); font-size: .8125rem; font-weight: 700; }
.clarity-shop-page .clarity-sit-total #sit_tot_price > span { display: none; }

/* 탭. 코어 shop/item.php 가 내보내는 ul.sanchor 라 마크업은 못 바꾸고 모양만 준다. */
.clarity-shop-page .sanchor { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 2.5rem 0 0; border-bottom: 1px solid var(--clarity-border); background: var(--clarity-surface-soft); padding: 0; list-style: none; }
.clarity-shop-page .sanchor a { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .35rem; border-top: 2px solid transparent; color: var(--clarity-muted); font-size: .875rem; font-weight: 600; }
.clarity-shop-page .sanchor a:hover, .clarity-shop-page .sanchor a:focus-visible { color: var(--clarity-text); }
.clarity-shop-page .sanchor a.sanchor_on { border-top-color: var(--clarity-text); background: var(--clarity-surface); color: var(--clarity-text); font-weight: 700; }
.clarity-shop-page .sanchor a span { color: var(--clarity-muted-soft); font-size: .75rem; }

/* 갤러리. 영카트 스킨 style.css 가 큰 이미지를 300px 로 못박아 왼쪽 칸이 비어
   보였다. 칸을 다 쓰게 하고, 보이는 것은 .visible 한 장뿐이다(스킨 jQuery 가
   썸네일 hover 로 옮긴다). 확대 아이콘(#popup_item_image)은 숨기지 않는다. */
.clarity-shop-page #sit_pvi, .clarity-shop-page #sit_pvi_big { width: 100%; }
.clarity-shop-page #sit_pvi_big { aspect-ratio: 1; }
.clarity-shop-page #sit_pvi_big > a:not(#popup_item_image):not(.visible) { display: none; }
.clarity-shop-page #sit_pvi_big > a.visible { display: block; width: 100%; height: 100%; }
.clarity-shop-page #sit_pvi_big > a.visible img, .clarity-shop-page #sit_pvi_big > img { width: 100%; height: 100%; object-fit: cover; }
.clarity-shop-page #sit_pvi_thumb a { display: block; }
.clarity-shop-page #sit_pvi_thumb img { width: 5.5rem; height: 5.5rem; }
.clarity-shop-page #sit_pvi_thumb .is-current img { border-color: var(--clarity-text); }

/* 상세 영역. 스킨이 내보내는 #sit_tab(버튼 + rel 로 여닫는 jQuery)은 그대로 두고
   시안의 탭 바 모양만 준다. 활성 탭만 흰 바탕에 위 테두리가 선다.
   스킨 style.css 가 #sit_info 를 inline-flex, #sit_tab 을 flex 로 두어 탭과
   내용이 좌우로 갈라져 있었다. 세로로 되돌린다. */
.clarity-shop-page #sit_info { display: block; margin-top: 2.5rem; }
.clarity-shop-page #sit_tab { display: block; width: 100%; }
.clarity-shop-page #sit_tab .tab_tit, .clarity-shop-page #sit_tab .tab_con { width: 100%; }
.clarity-shop-page #sit_info { min-height: 0; }
/* 스킨은 활성 탭 아래에 파란 막대를 그린다. 우리 활성 표시는 위 테두리라
   그 막대는 끈다. 색만 바꾸면 표시가 두 겹이 된다. */
.clarity-shop-page #sit_tab .tab_tit li .selected:after { display: none; }
.clarity-shop-page #sit_tab .tab_tit { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; border-block: 1px solid var(--clarity-border); background: var(--clarity-surface-soft); padding: 0; list-style: none; }
.clarity-shop-page #sit_tab .tab_tit button { display: flex; width: 100%; min-height: 3.25rem; align-items: center; justify-content: center; gap: .35rem; border: 0; border-top: 2px solid transparent; background: transparent; color: var(--clarity-muted); cursor: pointer; font: inherit; font-size: .875rem; font-weight: 600; }
.clarity-shop-page #sit_tab .tab_tit button:hover, .clarity-shop-page #sit_tab .tab_tit button:focus-visible { color: var(--clarity-text); }
.clarity-shop-page #sit_tab .tab_tit button.selected { border-top-color: var(--clarity-text); background: var(--clarity-surface); color: var(--clarity-text); font-weight: 700; }
.clarity-shop-page #sit_tab .tab_tit span { color: var(--clarity-muted-soft); font-size: .75rem; }
.clarity-shop-page #sit_tab .tab_con { margin: 0; padding: 2.5rem 0 0; list-style: none; }
.clarity-shop-page #sit_tab .tab_con > li { min-width: 0; }
/* 스킨은 #sit_inf 의 h2·h3 를 화면에서 뺀다(낭독기용 이름). 시안도 이 자리에
   제목을 두지 않고 판매자가 쓴 상세설명만 보이므로 그대로 둔다. */
.clarity-shop-page #sit_inf_explan { color: var(--clarity-text-soft); font-size: .9rem; line-height: 1.85; }
.clarity-shop-page #sit_inf_explan img { max-width: 100%; height: auto; }
.clarity-shop-page #sit_inf_open { width: 100%; border-collapse: collapse; border-top: 1px solid var(--clarity-text); }
.clarity-shop-page #sit_inf_open th, .clarity-shop-page #sit_inf_open td { border-bottom: 1px solid var(--clarity-border); padding: .8rem 1rem; text-align: left; font-size: .8125rem; }
.clarity-shop-page #sit_inf_open th { width: 11rem; background: var(--clarity-surface-soft); color: var(--clarity-text-soft); font-weight: 600; }

/* 시안의 상세에는 따라다니는 구매 상자가 없다. 위 구매 패널과 같은 폼을 한 번 더
   그리는 것이라 감춘다(요소는 남겨 둔다 — shop.js 가 옵션을 이 상자와 맞춘다). */
.clarity-shop-page #sit_buy { display: none; }

/* 상품 상세와 장바구니에서는 페이지 제목 띠를 화면에서 뺀다. 상세는 바로 아래
   구매 패널에 같은 상품명이, 장바구니는 주문 단계 1번에 같은 말이 다시 나와 두 번
   읽힌다. 제목 자체는 지우지 않고 낭독기에만 남긴다. */
.clarity-shop-page:has(#sit_ov_from) .clarity-shop-page-title,
.clarity-shop-page:has(.clarity-cart) .clarity-shop-page-title { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; padding: 0; white-space: nowrap; }
.clarity-shop-page #sit_ov_btn { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; margin-top: 1rem; }
/* 스킨은 버튼을 186px 로 못박고 float 로 흘린다. 그리드 칸을 그대로 쓰게 푼다. */
.clarity-shop-page #sit_ov_btn button, .clarity-shop-page #sit_ov_btn a { display: inline-flex; width: 100%; min-width: 0; min-height: 2.75rem; align-items: center; justify-content: center; float: none; margin: 0; border-radius: .45rem; padding-inline: .75rem; font-size: .8125rem; font-weight: 850; }
.clarity-shop-page .sit_btn_cart { border: 1px solid var(--clarity-primary); background: transparent; color: var(--clarity-primary); cursor: pointer; }
.clarity-shop-page .sit_btn_buy { border: 1px solid var(--clarity-primary); background: var(--clarity-primary); color: var(--color-primary-content, #fff); cursor: pointer; }
.clarity-shop-page .sit_btn_wish { width: 2.75rem; border: 1px solid var(--clarity-border); color: var(--clarity-muted); }
.clarity-shop-page #sit_tot_price { margin-top: 1rem; color: var(--clarity-primary); font-size: 1.2rem; font-weight: 900; text-align: right; }