/* ============================================================
   선할인몰 고객 화면 프로토타입 — 공통 스타일
   색·라운드·그림자는 BDS 토큰(var(--semantic-…), --radius-…, --shadow-…)만 쓴다.
   BDS 컴포넌트(bg-button·bg-textinput·bg-content-badge)는 vendor/bg-design-system.css 가 그린다.
   ============================================================ */
:root {
  --sh-max: 480px;
  --sh-gutter: 20px;
  --sh-ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--semantic-bg-normal-alt);
  color: var(--semantic-label-normal);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; }
a { color: var(--semantic-primary-navy); }
:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sh-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--semantic-primary-navy);
  color: var(--semantic-static-white);
  font-weight: 700;
  text-decoration: none;
}
.sh-skip:focus { top: 8px; }

/* ---------- 레이아웃 ---------- */
.sh-page {
  max-width: var(--sh-max);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--semantic-bg-normal-normal);
}
.sh-page > main { flex: 1 0 auto; }

.sh-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 56px;
  padding: 0 16px;
  background: var(--semantic-bg-normal-normal);
  border-bottom: 1px solid var(--semantic-line-solid-neutral);
}
.sh-logo {
  font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--semantic-primary-navy);
  text-decoration: none;
}
.sh-logo b { color: var(--semantic-primary-orange); font-weight: 800; }
.sh-header__link {
  padding: 12px 4px;
  font-size: 14px; font-weight: 600;
  color: var(--semantic-label-neutral);
  text-decoration: none;
}
.sh-header__title { flex: 1; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.sh-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -12px;
  color: var(--semantic-label-normal);
}

.sh-section { padding: 24px var(--sh-gutter); display: flex; flex-direction: column; gap: 14px; }
.sh-section--alt { background: var(--semantic-bg-normal-alt); }
.sh-section--flush { padding-left: 0; padding-right: 0; }
.sh-section--flush > .sh-pad { padding-left: var(--sh-gutter); padding-right: var(--sh-gutter); }
/* 구분선: BDS Divider Thick(12px) · Normal(1px) 값 */
.sh-gap { height: 12px; margin: 0; border: 0; background: rgba(113, 113, 115, 0.08); }
.sh-gap--thin { height: 1px; background: rgba(113, 113, 115, 0.22); }
.sh-stack { display: flex; flex-direction: column; gap: 14px; }
/* 스크립트로 포커스를 옮기는 영역은 테두리를 그리지 않는다(키보드 포커스 대상 아님) */
[tabindex="-1"]:focus { outline: none; }
/* BDS 입력칸 기본 최대 폭(335px, 관리자 폼 기준)을 풀어 화면 폭을 채운다 */
.sh-page .bg-textinput { max-width: none; }

.sh-h1 { margin: 0; font-size: 24px; line-height: 1.334; letter-spacing: -0.023em; font-weight: 700; text-wrap: balance; }
.sh-h2 { margin: 0; font-size: 18px; line-height: 1.445; letter-spacing: -0.02em; font-weight: 700; }
.sh-h3 { margin: 0; font-size: 15px; font-weight: 700; }
.sh-lead { margin: 0; font-size: 14px; color: var(--semantic-label-neutral); }
.sh-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--semantic-label-alternative); }
.sh-accent { color: var(--semantic-primary-orange); }
.sh-num { font-variant-numeric: tabular-nums; }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.bg-button.sh-block { width: 100%; }

/* ---------- 첫 영역: 두 카드 비교 ---------- */
.sh-badge-start { align-self: flex-start; }
.sh-compare-hero { margin: 0; display: flex; flex-direction: column; gap: 4px; }
/* 카드 무대는 높이를 고정하고, 예시 문구는 그 아래 흐름에 둔다(두 줄이 돼도 카드와 겹치지 않게) */
.sh-compare-hero__stage { position: relative; height: 270px; }
.sh-compare-hero figcaption { text-align: center; }
.sh-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.sh-card p { margin: 0; }
.sh-card__slot { position: absolute; }
.sh-card__slot--general { left: 4px; top: 8px; }
.sh-card__slot--benefit { right: 0; bottom: 8px; }
.sh-card--general {
  width: 236px; height: 144px;
  background: var(--semantic-bg-normal-normal);
  border: 1px solid var(--semantic-line-solid-normal);
  box-shadow: var(--shadow-small);
  color: var(--semantic-label-alternative);
  transform: rotate(-7deg);
}
.sh-card--benefit {
  width: 262px; height: 166px;
  background: var(--semantic-primary-navy);
  box-shadow: var(--shadow-large);
  color: var(--semantic-static-white);
  transform: rotate(4deg);
}
.sh-card__name { position: absolute; top: 14px; left: 18px; font-size: 12px; font-weight: 700; }
.sh-card__label { position: absolute; font-size: 11px; opacity: .8; }
.sh-card--general .sh-card__label { top: 32px; left: 18px; }
.sh-card--benefit .sh-card__name { left: 20px; top: 16px; opacity: .9; }
.sh-card--benefit .sh-card__label { left: 20px; bottom: 20px; opacity: .72; }
.sh-card__amount { position: absolute; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sh-card--general .sh-card__amount { top: 14px; right: 16px; font-size: 24px; line-height: 1.2; }
.sh-card--benefit .sh-card__amount { right: 18px; bottom: 10px; font-size: 30px; color: var(--semantic-primary-orange); }
.sh-card__chip { position: absolute; border-radius: var(--radius-sm); }
.sh-card--general .sh-card__chip { top: 64px; left: 18px; width: 34px; height: 26px; background: var(--semantic-fill-strong); }
.sh-card--benefit .sh-card__chip { top: 50px; left: 20px; width: 38px; height: 28px; background: var(--semantic-atomic-yellow-100); }
.sh-card__pill {
  position: absolute; top: 14px; right: 16px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--semantic-primary-orange);
  font-size: 11px; font-weight: 700;
}
.sh-card__rings { position: absolute; inset: 0; }
.sh-card__rings circle { stroke: var(--semantic-atomic-brgnavy-200); }
.sh-card__sheen {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, var(--semantic-static-white), transparent);
  opacity: .14;
}
.sh-compare-hero__shadow {
  position: absolute; right: 30px; bottom: 14px;
  width: 220px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--semantic-primary-navy);
  opacity: .18;
  filter: blur(10px);
}

/* ---------- 진행 순서 ---------- */
.sh-steps-wrap { position: relative; }
.sh-steps-wrap::before {
  content: ""; position: absolute; top: 11px; left: 12.5%; right: 12.5%; height: 2px;
  border-radius: var(--radius-full);
  background: var(--semantic-line-solid-normal);
}
.sh-steps__progress { position: absolute; top: 11px; left: 12.5%; right: 12.5%; height: 2px; border-radius: var(--radius-full); background: var(--semantic-primary-orange); }
.sh-steps { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sh-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--semantic-label-neutral); }
.sh-steps li::before {
  counter-increment: step;
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--semantic-primary-navy);
  color: var(--semantic-static-white);
  font-size: 12px; font-weight: 700;
}
.sh-steps { counter-reset: step; }
.sh-steps li:last-child::before { background: var(--semantic-primary-orange); }

/* ---------- 세그먼트(라디오) ---------- */
.sh-seg {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  min-width: 0; /* fieldset 기본값(내용 폭만큼 늘어남)을 끈다 */
  margin: 0; padding: 4px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--semantic-fill-normal);
}
.sh-seg label {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 4px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600;
  color: var(--semantic-label-alternative);
  cursor: pointer;
  text-align: center;
}
.sh-seg input:checked + label {
  background: var(--semantic-bg-normal-normal);
  color: var(--semantic-label-normal);
  box-shadow: var(--shadow-xsmall);
}
.sh-seg input:focus-visible + label { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }

/* ---------- 비교 계산기 ---------- */
.sh-compare {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  border-radius: var(--radius-xl);
  background: var(--semantic-bg-normal-alt);
}
.sh-compare__product { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--semantic-label-alternative); }
.sh-compare__product strong { font-size: 15px; color: var(--semantic-label-normal); }
.sh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sh-tile {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding: 14px;
  border-radius: var(--radius-lg);
}
.sh-tile dt, .sh-tile dd { margin: 0; }
.sh-tile--general { border: 1px solid var(--semantic-line-solid-normal); background: var(--semantic-bg-normal-normal); color: var(--semantic-label-alternative); }
.sh-tile--benefit { background: var(--semantic-primary-navy); color: var(--semantic-static-white); }
.sh-tile__name { font-size: 12px; font-weight: 700; }
.sh-tile__label { font-size: 11px; opacity: .8; }
.sh-tile__amount { font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sh-tile--benefit .sh-tile__amount { color: var(--semantic-primary-orange); }
.sh-tile__sub { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.sh-save { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-top: 14px; border-top: 1px solid var(--semantic-line-solid-normal); }
.sh-save__label { font-size: 13px; color: var(--semantic-label-neutral); }
.sh-save__amount { font-size: 38px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--semantic-primary-orange); font-variant-numeric: tabular-nums; }
.sh-save__total { font-size: 14px; font-weight: 700; color: var(--semantic-primary-navy); }

/* ---------- 상품 찾기 ---------- */
/* 정렬: 네이티브 select 를 BDS Text Button(assistive · medium) 모양으로 */
.sh-select {
  appearance: none; -webkit-appearance: none;
  field-sizing: content; /* 고른 항목 길이만큼만 차지(미지원 브라우저는 가장 긴 항목 폭) */
  padding: 4px 18px 4px 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2337383C' stroke-opacity='.61' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 12px no-repeat;
  color: var(--semantic-label-alternative);
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.5;
  cursor: pointer;
}
.sh-select:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; border-radius: 6px; }
/* 카테고리: BDS Category(normal · medium) 값 */
.sh-tabs {
  display: flex; gap: 6px;
  min-width: 0; /* fieldset 이 내용 폭만큼 늘어나 화면 밖으로 넘치지 않게(넘치는 탭은 가로 스크롤) */
  margin: 0; padding: 0 var(--sh-gutter) 4px;
  border: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 40px; /* 고른 탭을 흐림 구간 밖으로 꺼내 보여 준다 */
  scrollbar-width: none;
}
.sh-tabs::-webkit-scrollbar { display: none; }
/* 넘치는 쪽 끝을 흐리게 해 옆에 더 있음을 알린다(스크립트가 data-more 를 붙인다 · 카테고리 줄·상품 진열대 공용) */
:is(.sh-tabs, .sh-shelf__list)[data-more="end"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
:is(.sh-tabs, .sh-shelf__list)[data-more="start"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); }
:is(.sh-tabs, .sh-shelf__list)[data-more="start end"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
@media (pointer: fine) {
  :is(.sh-tabs, .sh-shelf__list) { cursor: grab; }
  :is(.sh-tabs, .sh-shelf__list).is-dragging, :is(.sh-tabs, .sh-shelf__list).is-dragging :is(label, a) { cursor: grabbing; }
}
.sh-tabs label {
  flex: 0 0 auto;
  user-select: none; -webkit-user-select: none;
  display: inline-flex; align-items: center;
  height: 32px; padding: 6px 10px;
  border-radius: var(--radius-full);
  background: var(--semantic-static-white);
  box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22);
  font-size: 14px; font-weight: 500; line-height: 1.429; letter-spacing: 0.203px;
  color: rgba(61, 61, 63, 0.61);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.sh-tabs input:checked + label { background: var(--semantic-primary-orange); box-shadow: none; color: #F6F6F6; }
.sh-tabs input:focus-visible + label { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }

/* 필터 칩: BDS Chip(outlined · small) 값 */
.sh-chip { position: relative; display: inline-flex; cursor: pointer; }
.sh-chip span {
  display: inline-flex; align-items: center;
  height: 32px; padding: 6px 10px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22);
  font-size: 14px; font-weight: 500; line-height: 1.429; letter-spacing: 0.203px;
  color: var(--semantic-label-neutral);
}
.sh-chip input:checked + span { box-shadow: inset 0 0 0 1px var(--semantic-primary-orange); color: var(--semantic-primary-orange); background: var(--semantic-bg-normal-normal); }
.sh-chip input:focus-visible + span { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }
.sh-chip input:disabled + span { opacity: .45; cursor: not-allowed; }

/* ---------- 상품 목록 ---------- */
.sh-products { list-style: none; margin: 0; padding: 4px var(--sh-gutter) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.sh-product { position: relative; min-width: 0; border-radius: var(--radius-xl); transition: transform .2s ease, box-shadow .2s ease; }
.sh-product:hover { transform: translateY(-2px); box-shadow: var(--shadow-small); }
.sh-product article { display: flex; flex-direction: column; gap: 8px; }
.sh-product__media {
  position: relative; margin: 0;
  height: 140px;
  border-radius: var(--radius-xl);
  background: var(--semantic-bg-normal-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--semantic-label-alternative);
}
.sh-product__rank {
  position: absolute; top: 8px; left: 8px;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--semantic-primary-navy);
  color: var(--semantic-static-white);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sh-product__tag { position: absolute; left: 8px; bottom: 8px; }
.sh-product__name { margin: 0; padding: 0 2px; min-height: 39px; font-size: 14px; font-weight: 400; line-height: 1.4; }
.sh-product__name a { color: inherit; text-decoration: none; }
.sh-product__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl); }
.sh-product__name a:focus-visible { outline: none; }
.sh-product__name a:focus-visible::after { outline: 2px solid var(--semantic-primary-orange); outline-offset: 4px; }
.sh-price { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0 2px; }
.sh-price div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.sh-price dt, .sh-price dd { margin: 0; }
.sh-price__general { font-size: 12px; color: var(--semantic-label-alternative); }
.sh-price__benefit dt { font-size: 11px; font-weight: 700; color: var(--semantic-primary-navy); }
.sh-price__benefit dd { font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: var(--semantic-primary-orange); font-variant-numeric: tabular-nums; }
.sh-price__meta { font-size: 11px; color: var(--semantic-label-alternative); }

/* 상품 B: 한 줄 목록 — '일반 카드 월 ○원 → 선할인 월 ○원'을 한 줄로 크게 */
html[data-ab-prod="b"] .sh-products { grid-template-columns: minmax(0, 1fr); gap: 0; }
html[data-ab-prod="b"] .sh-products .sh-product { padding: 14px 0; border-radius: 0; border-bottom: 1px solid rgba(113, 113, 115, 0.16); }
html[data-ab-prod="b"] .sh-products .sh-product:last-child { border-bottom: 0; }
html[data-ab-prod="b"] .sh-products .sh-product:hover { transform: none; box-shadow: none; }
html[data-ab-prod="b"] .sh-products article { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
html[data-ab-prod="b"] .sh-products .sh-product__media { position: static; grid-row: 1 / 3; width: 96px; height: 96px; font-size: 10px; }
html[data-ab-prod="b"] .sh-products .sh-product__rank { top: 6px; left: 6px; width: 20px; height: 20px; font-size: 11px; }
html[data-ab-prod="b"] .sh-products .sh-product__tag { top: 0; left: 110px; bottom: auto; }
html[data-ab-prod="b"] .sh-products .sh-product__name { grid-column: 2; min-height: 0; margin-top: 28px; font-size: 15px; font-weight: 700; }
html[data-ab-prod="b"] .sh-products .sh-product__name a::after { border-radius: 0; }
html[data-ab-prod="b"] .sh-products .sh-price { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
html[data-ab-prod="b"] .sh-products .sh-price__general { font-size: 13px; }
html[data-ab-prod="b"] .sh-products .sh-price__benefit::before { content: "→" / ""; margin-right: 2px; font-size: 14px; color: var(--semantic-label-alternative); }
html[data-ab-prod="b"] .sh-products .sh-price__benefit dd { font-size: 22px; }
html[data-ab-prod="b"] .sh-products .sh-price__meta { flex-basis: 100%; }

/* 상품 C: 실적 구간별 진열대(가로로 넘겨 보기) */
.sh-shelves { display: flex; flex-direction: column; gap: 26px; padding-top: 6px; }
.sh-shelf { display: flex; flex-direction: column; gap: 4px; }
.sh-shelf__head { display: flex; align-items: center; gap: 8px; }
.sh-shelf .sh-pad { padding-left: var(--sh-gutter); padding-right: var(--sh-gutter); } /* 진열대는 한 단계 안쪽이라 .sh-section--flush > .sh-pad 가 닿지 않는다 */
.sh-shelf__title { margin: 0; font-size: 16px; font-weight: 700; }
.sh-shelf__title b { color: var(--semantic-primary-orange); }
.sh-shelf__status { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; white-space: nowrap; }
.sh-shelf__status:empty { display: none; }
.sh-shelf__status[data-state="mine"] { background: var(--semantic-primary-orange); color: var(--semantic-static-white); }
.sh-shelf__status[data-state="more"] { box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.3); color: var(--semantic-label-alternative); }
.sh-shelf__sub { margin: 0; font-size: 12px; color: var(--semantic-label-alternative); }
.sh-shelf__list {
  list-style: none; margin: 6px 0 0; padding: 4px var(--sh-gutter) 12px;
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--sh-gutter);
  scrollbar-width: none;
}
.sh-shelf__list::-webkit-scrollbar { display: none; }
.sh-shelf__list .sh-product { flex: 0 0 148px; scroll-snap-align: start; }
.sh-shelf__list .sh-product__media { height: 120px; }
.sh-shelf__list .sh-product__tag { display: none; } /* 진열대 제목이 같은 조건을 말해 준다 */
.sh-shelf__list.is-dragging .sh-product { pointer-events: none; }
.sh-empty {
  margin: 0 var(--sh-gutter);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 16px;
  border-radius: var(--radius-xl);
  background: var(--semantic-bg-normal-alt);
  text-align: center;
}
.sh-empty p { margin: 0; font-weight: 700; }
/* BDS Text Button(primary · medium) 값 */
.sh-text-button {
  min-height: 40px; padding: 0 8px;
  border: 0; background: none;
  color: var(--semantic-primary-orange);
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.5;
  cursor: pointer;
}

/* ---------- 폼 ---------- */
.sh-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sh-fieldset > legend { padding: 0; margin-bottom: 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.sh-inline { display: flex; align-items: flex-end; gap: 8px; }
.sh-inline > :first-child { flex: 1 1 auto; min-width: 0; }
.sh-check, .sh-radio { display: flex; align-items: flex-start; gap: 10px; min-height: 28px; font-size: 15px; cursor: pointer; }
.sh-check input, .sh-radio input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--semantic-primary-orange); }
.sh-check--bold { font-weight: 700; }
.sh-radios { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.sh-radios > legend { padding: 0; margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.sh-field-error { margin: 0; font-size: 13px; color: var(--semantic-status-negative); }
.sh-dl { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; font-size: 14px; }
.sh-dl dt { color: var(--semantic-label-alternative); }
.sh-dl dd { margin: 0; }
.sh-dl--right dd { text-align: right; }
.sh-dl dt.is-total { color: var(--semantic-label-normal); font-weight: 700; }
.sh-dl dd.is-total { font-size: 18px; font-weight: 800; }
.sh-notice {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--semantic-bg-normal-alt);
}
.sh-notice ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6; color: var(--semantic-label-neutral); }
.sh-notice--plain ul { padding-left: 0; list-style: none; }
.sh-summary { display: flex; align-items: center; gap: 14px; }
.sh-summary__img {
  flex: 0 0 72px; width: 72px; height: 72px;
  border-radius: var(--radius-md);
  background: var(--semantic-bg-normal-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--semantic-label-alternative);
}
.sh-summary p { margin: 0; }
.sh-submit {
  position: sticky; bottom: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px var(--sh-gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--semantic-bg-normal-normal);
  border-top: 1px solid var(--semantic-line-solid-neutral);
}
/* ---------- 상품 상세 ---------- */
.sh-pd__media {
  position: relative; margin: 0;
  height: 300px;
  background: var(--semantic-bg-normal-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--semantic-label-alternative);
}
.sh-pd__media .sh-product__tag { left: var(--sh-gutter); bottom: 14px; }
.sh-pd__head { gap: 6px; }
.sh-pd__name { margin: 0; font-size: 22px; line-height: 1.36; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
.sh-pd__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 14px; color: var(--semantic-label-alternative); }
.sh-pd__price strong { font-size: 20px; font-weight: 800; color: var(--semantic-label-normal); }
.sh-pd__need { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(113, 113, 115, 0.16); font-size: 14px; font-weight: 700; color: var(--semantic-primary-navy); }
.sh-pd__conds { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.6; color: var(--semantic-label-alternative); }
.sh-pd__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--semantic-label-neutral); }
.sh-pd__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--semantic-label-neutral); }
.sh-pd__missing { padding-top: 64px; padding-bottom: 64px; text-align: center; }

/* 옵션: 묶음마다 값 칩(줄바꿈) */
.sh-pd__options { padding-top: 4px; gap: 12px; }
.sh-pd__optgroups { display: flex; flex-direction: column; gap: 14px; }
.sh-opt { min-width: 0; margin: 0; padding: 0; border: 0; }
.sh-opt > legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--semantic-label-neutral); }
.sh-opt__values { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-opt__values label {
  display: inline-flex; align-items: baseline; gap: 4px;
  min-height: 40px; padding: 9px 14px;
  border-radius: 10px;
  background: var(--semantic-static-white);
  box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22);
  font-size: 14px; font-weight: 600; color: var(--semantic-label-neutral);
  cursor: pointer;
  transition: box-shadow .15s, background-color .15s, color .15s;
}
.sh-opt__values label small { font-size: 12px; font-weight: 500; color: var(--semantic-label-alternative); }
.sh-opt__values input:checked + label { background: linear-gradient(rgba(255, 97, 33, 0.05), rgba(255, 97, 33, 0.05)), var(--semantic-static-white); box-shadow: inset 0 0 0 1.5px var(--semantic-primary-orange); color: var(--semantic-primary-orange); }
.sh-opt__values input:checked + label small { color: var(--semantic-primary-orange); }
.sh-opt__values input:focus-visible + label { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }
.sh-pd__picked { margin: 0; font-size: 13px; color: var(--semantic-label-neutral); text-align: center; }
.sh-pd__picked b { font-weight: 700; }

/* 바로가기: 헤더 아래에 붙고, 지금 보는 영역을 표시 */
.sh-pd__nav {
  position: sticky; top: 56px; z-index: 6;
  display: flex;
  background: var(--semantic-bg-normal-normal);
  border-bottom: 1px solid rgba(113, 113, 115, 0.16);
}
.sh-pd__nav a {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  height: 46px;
  font-size: 14px; font-weight: 600; color: var(--semantic-label-alternative); text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
}
.sh-pd__nav a[aria-current="true"] { color: var(--semantic-label-normal); box-shadow: inset 0 -2px 0 var(--semantic-label-normal); }
.sh-pd__nav a:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: -2px; }
.sh-pd__sec { scroll-margin-top: 104px; } /* 헤더(56)+바로가기(46) 아래에서 시작 */

/* 긴 상세 이미지: 처음엔 560px 만 보이고 아래를 흐리게, 펼치면 전체 */
.sh-pd__detail { position: relative; display: flex; flex-direction: column; }
.sh-pd__detail[data-open="false"] { max-height: 560px; overflow: hidden; }
.sh-pd__detail[data-open="false"]::after { content: ''; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(transparent, var(--semantic-bg-normal-normal)); pointer-events: none; }
.sh-pd__dimg {
  margin: 0; height: var(--h, 1000px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: repeating-linear-gradient(180deg, var(--semantic-bg-normal-alt) 0 240px, #EEF0F3 240px 480px);
  font-size: 14px; font-weight: 700; color: var(--semantic-label-alternative);
}
.sh-pd__dimg small { font-size: 12px; font-weight: 500; }
.sh-pd__dimg + .sh-pd__dimg { border-top: 1px dashed rgba(113, 113, 115, 0.3); }
.sh-dl--stack { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.sh-dl--stack dt { margin-top: 10px; font-weight: 700; color: var(--semantic-label-normal); }
.sh-dl--stack dt:first-child { margin-top: 0; }
.sh-dl--stack dd { line-height: 1.6; color: var(--semantic-label-neutral); }
.sh-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.sh-table th, .sh-table td { padding: 10px 0; border-bottom: 1px solid rgba(113, 113, 115, 0.16); text-align: left; vertical-align: top; }
.sh-table th { width: 42%; padding-right: 12px; font-weight: 500; color: var(--semantic-label-alternative); }
.sh-table td { color: var(--semantic-label-neutral); }
.sh-table tr:first-child :is(th, td) { border-top: 1px solid rgba(113, 113, 115, 0.16); }

.sh-status {
  margin: 0; padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--semantic-primary-navy);
  color: var(--semantic-static-white);
  font-size: 14px; font-weight: 600;
}

/* ---------- 다이얼로그 ---------- */
.sh-dialog {
  width: min(340px, calc(100vw - 32px));
  padding: 24px;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-huge);
  color: var(--semantic-label-normal);
}
.sh-dialog::backdrop { background: var(--semantic-material-dimmer); }
.sh-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.sh-dialog p { margin: 0 0 16px; font-size: 14px; color: var(--semantic-label-neutral); }
.sh-dialog form { margin: 0; }

/* ---------- 하단 ---------- */
.sh-footer {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px var(--sh-gutter) 32px;
  background: var(--semantic-bg-normal-alt);
  font-size: 12px; line-height: 1.6;
  color: var(--semantic-label-alternative);
}
.sh-footer address { font-style: normal; display: flex; flex-direction: column; gap: 6px; }
.sh-footer p { margin: 0; }
.sh-footer a { color: var(--semantic-label-neutral); }
.sh-footer nav { display: flex; gap: 8px; }

/* ---------- A/B 시안 (메인) ---------- */
/* 기본은 A. html[data-ab-*="b|c"] 일 때만 B·C 를 보인다(스크립트가 없어도 A 가 보이게) */
.ab-hero-a, .ab-hero-b, .ab-hero-c { display: contents; }
html:not([data-ab-hero="b"]) .ab-hero-b, html:not([data-ab-hero="c"]) .ab-hero-c,
html[data-ab-hero="b"] .ab-hero-a, html[data-ab-hero="c"] .ab-hero-a,
html:not([data-ab-calc="b"]) .ab-calc-b, html:not([data-ab-calc="c"]) .ab-calc-c,
html[data-ab-calc="b"] .ab-calc-a, html[data-ab-calc="c"] .ab-calc-a,
html[data-ab-calc="c"] .ab-calc-not-c,
html:not([data-ab-prod="c"]) .ab-prod-c, html[data-ab-prod="c"] .ab-prod-not-c { display: none !important; }

/* 시안 전환 버튼: 화면 요소와 헷갈리지 않게 작고 어두운 도구 모양 */
.sh-ab-host { position: relative; }
.sh-ab {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px;
  border-radius: var(--radius-full);
  background: rgba(6, 31, 65, 0.82);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.sh-ab button {
  min-width: 26px; height: 22px; padding: 0 8px;
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: rgba(255, 255, 255, 0.7);
  font: inherit; cursor: pointer;
}
.sh-ab button[aria-pressed="true"] { background: var(--semantic-static-white); color: var(--semantic-primary-navy); }
.sh-ab button:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 1px; }
.sh-ab__label { padding: 0 4px 0 8px; color: var(--semantic-static-white); }
.sh-ab--edge { top: -11px; } /* 영역 머리에 정렬 등 다른 요소가 있으면 위 구분선에 걸쳐 띄운다 */
.sh-ab--global {
  position: fixed; top: auto;
  bottom: calc(16px + env(safe-area-inset-bottom));
  right: max(12px, calc((100vw - 480px) / 2 + 12px));
  z-index: 40;
}
@media print { .sh-ab { display: none; } }

/* PC 여백 설명: 화면이 넓을 때만 각 영역 오른쪽(전체 문구는 왼쪽)에 시안 특징을 띄운다 */
.sh-ab-note { display: none; }
@media (min-width: 1100px) {
  .sh-ab-note {
    display: block;
    position: absolute; top: 0; left: calc(100% + 28px); z-index: 1;
    width: 268px; padding: 14px;
    border: 1px solid rgba(113, 113, 115, 0.16); border-radius: 14px;
    background: var(--semantic-bg-normal-normal);
    box-shadow: var(--shadow-small);
    font-size: 12px; line-height: 1.5; color: var(--semantic-label-neutral);
  }
  .sh-ab-note--global { position: fixed; top: 80px; left: auto; right: calc(50% + (var(--sh-max) / 2) + 28px); }
}
.sh-ab-note__title { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; color: var(--semantic-primary-navy); }
.sh-ab-note__title code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 500; color: var(--semantic-label-alternative); }
.sh-ab-note ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-ab-note button {
  display: block; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 10px;
  background: var(--semantic-bg-normal-alt);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: box-shadow .15s, background-color .15s;
}
.sh-ab-note button b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 6px; background: var(--semantic-primary-navy); color: var(--semantic-static-white); font-size: 11px; vertical-align: 1px; }
.sh-ab-note button strong { font-size: 13px; }
.sh-ab-note button span { display: block; margin-top: 4px; color: var(--semantic-label-alternative); }
.sh-ab-note button[aria-pressed="true"] { background: rgba(255, 97, 33, 0.06); box-shadow: inset 0 0 0 1.5px var(--semantic-primary-orange); }
.sh-ab-note button[aria-pressed="true"] b { background: var(--semantic-primary-orange); }
.sh-ab-note button:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }
.sh-ab-note__foot { margin: 10px 0 0; font-size: 11px; color: var(--semantic-label-alternative); }

/* 첫 카드 B: 청구서 */
.sh-bill {
  margin: 6px 0 0; padding: 20px;
  border-radius: var(--radius-xl);
  background: var(--semantic-bg-normal-normal);
  box-shadow: var(--shadow-small);
  display: flex; flex-direction: column; gap: 14px;
}
.sh-bill__rows { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.sh-bill__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sh-bill__rows dt { color: var(--semantic-label-neutral); }
.sh-bill__rows dd { margin: 0; text-align: right; font-weight: 700; white-space: nowrap; }
.sh-bill__rows .is-total { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(113, 113, 115, 0.22); }
.sh-bill__rows .is-total dt { color: var(--semantic-label-normal); font-weight: 700; }
.sh-bill__rows .is-total dd { font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--semantic-primary-orange); }
.sh-bill__bar { height: 12px; border-radius: var(--radius-full); background: var(--semantic-primary-navy); overflow: hidden; }
.sh-bill__fill { display: block; width: var(--cover, 0%); height: 100%; border-radius: inherit; background: var(--semantic-primary-orange); transform-origin: left center; }
.sh-bill__fill.is-play { animation: sh-grow 900ms var(--sh-ease) 450ms backwards; }
.sh-bill__legend { margin: -6px 0 0; display: flex; justify-content: space-between; font-size: 12px; color: var(--semantic-label-alternative); }
.sh-bill__legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--semantic-primary-orange); }
.sh-bill__legend span + span::before { background: var(--semantic-primary-navy); }

/* 비교 계산기 공통: 예시 상품 고르기(금액 구간별 대표 상품) */
.sh-examples { min-width: 0; margin: 0; padding: 0; border: 0; }
.sh-examples__title { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--semantic-label-neutral); }
.sh-examples__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sh-examples__opts label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 6px 4px;
  border-radius: 12px;
  background: var(--semantic-static-white);
  box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22);
  text-align: center; cursor: pointer;
  transition: box-shadow .15s, background-color .15s;
}
.sh-examples__opts label span { font-size: 11px; color: var(--semantic-label-alternative); white-space: nowrap; }
.sh-examples__opts label b { font-size: 13px; font-weight: 700; color: var(--semantic-label-neutral); white-space: nowrap; }
.sh-examples__opts input:checked + label { background: linear-gradient(rgba(255, 97, 33, 0.05), rgba(255, 97, 33, 0.05)), var(--semantic-static-white); box-shadow: inset 0 0 0 1.5px var(--semantic-primary-orange); }
.sh-examples__opts input:checked + label :is(span, b) { color: var(--semantic-primary-orange); }
.sh-examples__opts input:focus-visible + label { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }

/* 상품 영역: 내 시뮬레이션 바로 바꾸기(스크롤해도 헤더 아래 따라온다) */
.sh-quick {
  position: sticky; top: 56px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 10px; padding-bottom: 10px;
  background: var(--semantic-bg-normal-normal);
  border-bottom: 1px solid rgba(113, 113, 115, 0.12);
}
.sh-quick__sum { margin: 0; font-size: 13px; color: var(--semantic-label-neutral); }
.sh-quick__sum span { margin-right: 2px; color: var(--semantic-label-alternative); }
.sh-quick__sum strong { font-weight: 800; }
.sh-quick__more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 4px; font-size: 13px; font-weight: 700; color: var(--semantic-primary-orange); text-decoration: none; white-space: nowrap; }
.sh-quick__more:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; border-radius: 6px; }
/* '시뮬레이션 바꾸기'로 왔을 때 계산기 제목이 고정 헤더에 가리지 않게 */
#calc-title { scroll-margin-top: 72px; }

/* 첫 카드 C: 카드 한 장 + 포인트 몫 막대 */
.sh-solo { margin: 2px 0 0; display: flex; flex-direction: column; gap: 12px; }
.sh-solo__stage { padding: 10px 8px 16px; }
.sh-card--solo {
  width: 100%; max-width: 340px; aspect-ratio: 320 / 196; margin: 0 auto;
  background: var(--semantic-primary-navy);
  box-shadow: var(--shadow-large);
  color: var(--semantic-static-white);
  transform: rotate(-3deg);
}
.sh-card--solo .sh-card__name { top: 18px; left: 22px; font-size: 13px; opacity: .9; }
.sh-card--solo .sh-card__pill { top: 16px; right: 18px; font-size: 12px; }
.sh-card--solo .sh-card__chip { top: 54px; left: 22px; width: 42px; height: 30px; background: var(--semantic-atomic-yellow-100); }
.sh-card__was { position: absolute; top: 60px; right: 20px; font-size: 13px; opacity: .72; font-variant-numeric: tabular-nums; }
.sh-card__was s { font-weight: 700; }
.sh-card--solo .sh-card__label { bottom: 26px; left: 22px; font-size: 12px; opacity: .72; }
.sh-card--solo .sh-card__amount { right: 20px; bottom: 12px; font-size: 38px; line-height: 1.2; color: var(--semantic-primary-orange); }
.sh-bill__legend b { margin-left: 4px; color: var(--semantic-label-neutral); }

/* 비교 계산기 B: 사용처별 금액 */
.sh-items {
  min-width: 0; margin: 0; padding: 16px;
  border: 0; border-radius: var(--radius-xl);
  background: var(--semantic-bg-normal-alt);
  display: flex; flex-direction: column; gap: 10px;
}
.sh-items > legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-size: 15px; font-weight: 700; }
.sh-items__list { clear: both; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-item { display: grid; grid-template-columns: minmax(0, 1fr) 108px 32px; gap: 8px; align-items: center; }
.sh-field {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid rgba(113, 113, 115, 0.22); border-radius: 10px;
  background: var(--semantic-static-white);
  font: inherit; font-size: 15px; color: var(--semantic-label-normal);
}
.sh-field::placeholder { color: var(--semantic-label-assistive); }
.sh-field:focus { outline: none; border-color: var(--semantic-primary-orange); box-shadow: inset 0 0 0 1px var(--semantic-primary-orange); }
.sh-item__amount { position: relative; }
.sh-item__amount .sh-field { padding-right: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.sh-item__amount span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 14px; color: var(--semantic-label-alternative); pointer-events: none; }
.sh-item__remove {
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--semantic-label-alternative); cursor: pointer;
}
.sh-item__remove:hover { background: rgba(113, 113, 115, 0.08); }
.sh-item-add {
  height: 40px;
  border: 1px dashed rgba(113, 113, 115, 0.4); border-radius: 10px;
  background: transparent; color: var(--semantic-label-neutral);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.sh-item-add:hover { border-color: var(--semantic-primary-orange); color: var(--semantic-primary-orange); }
.sh-items__sum { margin: 4px 0 0; display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.sh-items__sum output { font-size: 20px; font-variant-numeric: tabular-nums; }
.sh-items__tier { margin: -4px 0 0; font-size: 13px; font-weight: 600; color: var(--semantic-primary-orange); }
.sh-items__tier:empty { display: none; }
/* 비교 계산기 C: 사용처 질문 + 상단 고정 요약 */
.sh-quiz { display: flex; flex-direction: column; gap: 4px; }
.sh-quiz__sum {
  position: sticky; top: 64px; z-index: 4; /* 헤더(56px) 아래에 붙는다 */
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px 12px;
  border-radius: var(--radius-xl);
  background: var(--semantic-primary-navy);
  box-shadow: var(--shadow-small);
  color: var(--semantic-static-white);
}
.sh-quiz__row { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.sh-quiz__row span { opacity: .78; }
.sh-quiz__row strong { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sh-quiz__pts { color: var(--semantic-primary-orange); }
.sh-quiz__meter { position: relative; height: 6px; margin: 6px 0 16px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.18); }
.sh-quiz__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--semantic-primary-orange); transition: width .4s var(--sh-ease); }
.sh-quiz__meter i { position: absolute; top: 10px; transform: translateX(-50%); font-size: 10px; font-style: normal; opacity: .7; }
.sh-quiz__meter i:last-child { transform: translateX(-100%); }
.sh-quiz__meter i::before { content: ''; position: absolute; top: -10px; left: 50%; width: 2px; height: 6px; background: rgba(255, 255, 255, 0.5); }
.sh-quiz__meter i:last-child::before { left: auto; right: 0; }
.sh-quiz__hint { margin: 0; font-size: 12px; opacity: .85; }
.sh-quiz__list { list-style: none; margin: 0; padding: 0; }
.sh-quiz__list > li { padding: 16px 0; border-bottom: 1px solid rgba(113, 113, 115, 0.16); }
.sh-quiz__list > li:last-child { border-bottom: 0; }
.sh-q { min-width: 0; margin: 0; padding: 0; border: 0; }
.sh-q__title { float: left; max-width: calc(100% - 60px); padding: 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.sh-q__no { color: var(--semantic-primary-orange); }
.sh-q__more {
  float: right; display: inline-flex; align-items: center; gap: 2px;
  height: 24px; padding: 0 2px 0 8px;
  border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--semantic-label-alternative); cursor: pointer;
}
.sh-q__more::after { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .2s; }
.sh-q__more[aria-expanded="true"]::after { transform: rotate(180deg); }
.sh-q__more:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }
.sh-q__detail { clear: both; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--semantic-bg-normal-alt); font-size: 13px; line-height: 1.6; color: var(--semantic-label-neutral); }
.sh-q__opts { clear: both; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding-top: 10px; }
.sh-q__detail:not([hidden]) + .sh-q__opts { padding-top: 10px; }
.sh-q__detail:not([hidden]) { margin-top: 10px; }
.sh-q__opts label {
  display: flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 4px;
  border-radius: 10px;
  background: var(--semantic-static-white);
  box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--semantic-label-neutral);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.sh-q__opts input:checked + label { background: var(--semantic-primary-orange); box-shadow: none; color: #F6F6F6; }
.sh-q__opts input:focus-visible + label { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }

.sh-price__est { margin-left: 2px; font-size: 11px; font-weight: 500; color: var(--semantic-label-alternative); }

/* ---------- 모션 (동작 줄이기 설정 시 끔) ---------- */
@keyframes sh-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sh-card-in { from { opacity: 0; transform: translateY(32px) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes sh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sh-shadow { 0%, 100% { transform: scaleX(1); opacity: .18; } 50% { transform: scaleX(.9); opacity: .11; } }
@keyframes sh-sheen { 0%, 64% { transform: translateX(-140%) skewX(-18deg); } 84%, 100% { transform: translateX(280%) skewX(-18deg); } }
@keyframes sh-progress { 0% { transform: scaleX(0); opacity: 1; } 45%, 80% { transform: scaleX(1); opacity: 1; } 92%, 100% { transform: scaleX(1); opacity: 0; } }
.sh-rise { animation: sh-rise 600ms var(--sh-ease) backwards; }
.sh-card-in { animation: sh-card-in 800ms var(--sh-ease) backwards; }
.sh-float { animation: sh-float 6s ease-in-out 1s infinite; }
.sh-compare-hero__shadow { animation: sh-shadow 6s ease-in-out 1s infinite; }
.sh-card__sheen { animation: sh-sheen 7s ease-in-out 1.6s infinite backwards; }
.sh-steps__progress { transform-origin: left center; animation: sh-progress 6s cubic-bezier(.4, 0, .2, 1) 1.2s infinite backwards; }
/* 상품 카드: 목록이 화면에 들어오면 차례로 올라온다(스크립트가 data-reveal 를 붙일 때만) */
[data-reveal="pending"] .sh-product { opacity: 0; }
@media print { [data-reveal="pending"] .sh-product { opacity: 1; } }
[data-reveal="done"] .sh-product { animation: sh-rise 600ms var(--sh-ease) backwards; animation-delay: calc(200ms + var(--i, 0) * 70ms); }
/* 프로토타입은 html[data-motion="on"] 으로 모션을 기본으로 켠다.
   data-motion 이 없으면 기기의 동작 줄이기 설정을 따르고, "off"(주소 ?motion=off)면 끈다 */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) { scroll-behavior: auto; }
  html:not([data-motion="on"]) :is(.sh-rise, .sh-card-in, .sh-float, .sh-compare-hero__shadow, .sh-card__sheen, .sh-steps__progress, .sh-product, .sh-bill__fill) { animation: none !important; }
  html:not([data-motion="on"]) :is(.sh-card__sheen, .sh-steps__progress) { display: none; }
  html:not([data-motion="on"]) .sh-product { transition: none; }
}
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] :is(.sh-rise, .sh-card-in, .sh-float, .sh-compare-hero__shadow, .sh-card__sheen, .sh-steps__progress, .sh-product, .sh-bill__fill) { animation: none !important; }
html[data-motion="off"] :is(.sh-card__sheen, .sh-steps__progress) { display: none; }
html[data-motion="off"] .sh-product { transition: none; }