/* templates/shop_select/theme.css — 「셀렉트샵」(2026-10-18) · 엔진 클래스 손질 = .tpl-shop_select 접두 · 새 부품 = 전용 ss- 클래스 · 폰 우선·375 넘침 0·PC 4열 · 움직임 줄이기 = site.css 공통 */
:root{--hb-primary:#1f5fd6;--hb-accent:#ff7a45;--hb-bg:#fff;--hb-fg:#1b1d22;--hb-muted:#5b6270;--hb-line:#e6e8ec;--hb-radius:10px;--hb-card-radius:14px;--hb-btn-radius:10px;
  --hb-font-head:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;--hb-font-body:var(--hb-font-head)}
.tpl-shop_select{--bg2:#f5f7fb;--tx2:#4b5563;--ss-sale:#e0402a}
.tpl-shop_select .lbl,.tpl-shop_select .sec-en{color:var(--hb-primary)}
.tpl-shop_select .btn{border-radius:var(--hb-btn-radius)}
.tpl-shop_select .btn-primary{border-color:var(--hb-primary)}
.tpl-shop_select .btn-primary:hover{background:var(--hb-primary);border-color:var(--hb-primary);filter:brightness(.92)}
.tpl-shop_select .btn-line:hover,.tpl-shop_select .chip.on,.tpl-shop_select .chip:hover{background:var(--hb-primary);border-color:var(--hb-primary);color:#fff}
.tpl-shop_select .badge,.tpl-shop_select .tb-count{background:var(--hb-primary)}
.tpl-shop_select .tab[aria-current],.tpl-shop_select .gnb a:hover,.tpl-shop_select .gnb a[aria-current]{border-bottom-color:var(--hb-primary);color:var(--hb-primary)}
.tpl-shop_select .chip{border-radius:999px}

/* 섹션 머리: 영문 라벨 + 한국어 h2 */
.tpl-shop_select .sec-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:20px;text-align:left}
.tpl-shop_select .sec-hd:has(.sec-more){padding-right:88px}
.tpl-shop_select .sec-en{font-size:12px;font-weight:800;letter-spacing:.14em}
.tpl-shop_select .sec-en.sm{font-size:15px}
.tpl-shop_select h2.sec-en,.tpl-shop_select .sec-desc{margin:0;font-size:clamp(20px,5vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--hb-fg);text-transform:none}
.tpl-shop_select .sec-more{position:absolute;right:0;bottom:4px;margin:0;border:0;color:var(--tx2)}

/* 상품 카드 */
.ss-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 18px}
.tpl-shop_select .tag{border:0;border-radius:6px;background:#fff;color:var(--hb-fg);letter-spacing:.02em}
.tpl-shop_select .tag-new{background:var(--hb-fg);color:#fff}
.tpl-shop_select .tag-best,.tpl-shop_select .tag-mo{background:var(--hb-primary);color:#fff}
.tpl-shop_select .tag-sale{background:var(--ss-sale);color:#fff}
.tpl-shop_select .tag-quote{background:#6b7280;color:#fff}
.tpl-shop_select .price-disc{padding:0;background:none;color:var(--ss-sale);font-size:15px;font-weight:800}
.tpl-shop_select .price-now{font-size:16px;font-weight:800}
.ss-onl,.ss-stock{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--tx2)}
.ss-onl{color:var(--hb-primary);font-weight:700}

/* 공지 띠(움직임 0) */
.ss-tick{background:var(--hb-fg);color:#fff;font-size:13px}
.ss-tick-in{display:flex;align-items:center;gap:10px;min-height:40px}
.ss-tick-tag{flex:none;padding:0 8px;border-radius:999px;background:var(--hb-primary);font-size:11px;font-weight:800;line-height:20px}
.ss-tick-list{display:flex;flex:1;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ss-tick-list::-webkit-scrollbar{display:none}
.ss-tick-list li{flex:none;max-width:100%;padding-right:20px;scroll-snap-align:start;line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-tick-list li+li::before{content:"";display:inline-block;width:1px;height:12px;margin-right:20px;background:rgba(255,255,255,.35);vertical-align:-1px}
.ss-tick a{color:#fff;text-decoration:none}
.ss-tick a:hover{text-decoration:underline}

/* 라디오 전환(스크립트 0): n번 라디오 = n번 탭·판(최대 9), 초점 = --ring */
.ss-tbox,.ss-fbox{position:relative}
.ss-r{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ss-tp>*{display:none}
.ss-r:nth-of-type(1):checked~.ss-tp>:nth-child(1),.ss-r:nth-of-type(2):checked~.ss-tp>:nth-child(2),.ss-r:nth-of-type(3):checked~.ss-tp>:nth-child(3),
.ss-r:nth-of-type(4):checked~.ss-tp>:nth-child(4),.ss-r:nth-of-type(5):checked~.ss-tp>:nth-child(5),.ss-r:nth-of-type(6):checked~.ss-tp>:nth-child(6),
.ss-r:nth-of-type(7):checked~.ss-tp>:nth-child(7),.ss-r:nth-of-type(8):checked~.ss-tp>:nth-child(8),.ss-r:nth-of-type(9):checked~.ss-tp>:nth-child(9){display:block}
.ss-r:nth-of-type(1):checked~.ss-tl>:nth-child(1),.ss-r:nth-of-type(2):checked~.ss-tl>:nth-child(2),.ss-r:nth-of-type(3):checked~.ss-tl>:nth-child(3),
.ss-r:nth-of-type(4):checked~.ss-tl>:nth-child(4),.ss-r:nth-of-type(5):checked~.ss-tl>:nth-child(5),.ss-r:nth-of-type(6):checked~.ss-tl>:nth-child(6),
.ss-r:nth-of-type(7):checked~.ss-tl>:nth-child(7),.ss-r:nth-of-type(8):checked~.ss-tl>:nth-child(8),.ss-r:nth-of-type(9):checked~.ss-tl>:nth-child(9){
  --on-c:var(--hb-primary);--on-bg:var(--hb-primary);--on-fg:#fff;--on-card:#fff;--on-sh:0 8px 24px rgba(17,24,39,.1);--on-w:800;
  outline:var(--ring,0 solid transparent);outline-offset:2px;border-radius:12px}
.ss-r:focus-visible~.ss-tl{--ring:2px solid var(--hb-primary)}

/* 분류 둘러보기 */
.ss-chips{display:flex;gap:6px;margin:0 0 22px;padding:2px 2px 6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.ss-chips::-webkit-scrollbar{display:none}
.ss-chip{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:78px;padding:4px 0;cursor:pointer;scroll-snap-align:start;font-size:13px;line-height:1.3;text-align:center;color:var(--on-c,var(--tx2));font-weight:var(--on-w,500)}
.ss-chip img{width:56px;height:56px;padding:2px;border:2px solid var(--on-c,transparent);border-radius:50%;object-fit:cover;background:var(--bg2)}
.ss-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 혜택 띠 */
.ss-ben-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ss-ben-it>*{display:flex;align-items:center;gap:12px;height:100%;padding:16px;border-radius:var(--hb-card-radius);background:#eef3fd;background:color-mix(in srgb,var(--hb-primary) 7%,#fff);color:inherit;text-decoration:none}
.ss-ben-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--hb-primary)}
.ss-ben-tx{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.ss-ben-tx strong{font-size:15px}
.ss-ben-tx span{font-size:13px;color:var(--tx2)}

/* 기획전: 폰 = 사진 위 + 제목 칩 / PC = 번호 목록 + 큰 사진 */
.ss-fbox{display:flex;flex-direction:column;gap:14px}
.ss-fp{order:-1}
.ss-fl{display:flex;gap:8px;padding-bottom:4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.ss-fl::-webkit-scrollbar{display:none}
.ss-fl li{flex:none;max-width:80%;scroll-snap-align:start}
.ss-fl label{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--on-bg,var(--hb-line));border-radius:999px;background:var(--on-bg,#fff);color:var(--on-fg,var(--hb-fg));font-size:14px;font-weight:700;cursor:pointer}
.ss-fno{flex:none;font-size:12px;font-weight:800;opacity:.75}
.ss-ft{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-fs{display:none}
.ss-fimg{display:block;aspect-ratio:25/14;overflow:hidden;border-radius:var(--hb-card-radius);background:var(--bg2)}
.ss-fimg img{display:block;width:100%;height:100%;object-fit:cover}
.ss-fph{display:flex;align-items:center;justify-content:center;height:100%;padding:24px;font-size:clamp(20px,5vw,30px);font-weight:800;color:var(--hb-primary);text-align:center}
.ss-fcap{padding:12px 2px 0}
.ss-fcap h3{margin:0;font-size:18px;line-height:1.4}
.ss-fcap a{color:inherit;text-decoration:none}
.ss-fcap p{margin:4px 0 0;color:var(--tx2);font-size:14px}
.ss-fpan{animation:ss-fade .25s ease}
@keyframes ss-fade{from{opacity:0}}

/* 쇼츠 */
.ss-sh-row{display:flex;gap:14px;padding-bottom:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.ss-sh-it{flex:0 0 calc((100% - 42px) / 4);min-width:0;scroll-snap-align:start}
.ss-sh-v{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:var(--hb-card-radius);background:#111}
.ss-sh-v video{display:block;width:100%;height:100%;object-fit:cover;background:#111}
.ss-sh-cap{position:absolute;top:0;left:0;right:0;margin:0;padding:12px 12px 32px;background:linear-gradient(rgba(0,0,0,.55),transparent);color:#fff;font-size:13px;font-weight:700;line-height:1.45;pointer-events:none}
.ss-sh-p{position:relative;display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;border:1px solid var(--hb-line);border-radius:12px;background:#fff;color:inherit;text-decoration:none}
.ss-sh-p img{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--bg2)}
.ss-sh-pi{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.45}
.ss-sh-pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700}
.ss-sh-pp del{color:var(--hb-muted)}
.ss-sh-pp b{color:var(--ss-sale)}
.ss-sh-pp strong{font-size:14px}
.ss-sh-pr{color:var(--tx2)}
.ss-sh-ev{align-self:flex-start;margin-top:3px;padding:0 6px;border-radius:6px;background:var(--ss-sale);color:#fff;font-size:11px;font-weight:800;line-height:18px}
.ss-sh-so{background:#6b7280}
.ss-sh-go{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--hb-primary)}

/* 간편결제 표시 */
.ss-paybadge{margin:12px 0 0;font-size:13px;line-height:1.9;color:var(--tx2)}
.ss-pb{display:inline-block;padding:0 8px;border-radius:6px;font-weight:800;line-height:22px}
.ss-pb-n{background:#03c75a;color:#fff}
.ss-pb-k{background:#fee500;color:#191919}
.ss-pb-c{padding:0;color:var(--hb-fg)}

/* 그 밖 */
.tpl-shop_select .hero-noimg{background:#eef3fd;background:color-mix(in srgb,var(--hb-primary) 8%,#fff)}
.tpl-shop_select .hb-blk-cta .cta-in{background:var(--hb-fg);border-radius:20px}

@media (max-width:900px){
  .ss-fbox .ss-r{top:auto;bottom:0}
  .ss-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 14px}
  .ss-ben-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-sh-it{flex-basis:calc((100% - 28px) / 3)}
}
@media (max-width:640px){
  .ss-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px}
  .ss-sh-it{flex-basis:60%}
  .ss-ben-list{gap:8px}
  .ss-ben-it>*{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
  .ss-ben-ic{width:34px;height:34px}
}
@media (min-width:901px){
  .ss-fbox{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:28px;align-items:center}
  .ss-fp{order:0}
  .ss-fl{flex-direction:column;gap:6px;padding:0;overflow:visible}
  .ss-fl li{max-width:none}
  .ss-fl label{display:grid;grid-template-columns:36px minmax(0,1fr) 14px;column-gap:10px;padding:14px 16px;border:0;border-radius:12px;background:var(--on-card,transparent);box-shadow:var(--on-sh,none);color:var(--hb-fg);font-size:16px}
  .ss-fl label::after{content:"›";grid-column:3;grid-row:1/span 2;align-self:center;font-size:20px;color:var(--on-c,transparent)}
  .ss-fno{grid-row:1/span 2;align-self:center;font-size:15px;color:var(--on-c,var(--tx2));opacity:1}
  .ss-ft{white-space:normal}
  .ss-fs{display:block;grid-column:2;font-size:13px;font-weight:500;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tpl-shop_select .ev-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}