@charset "UTF-8";
/* ==========================================================================
   한별자미두수 HanStar Jamidusu — 공통 스타일시트

   색감 설계 메모 (왜 이 색인가)
   ─────────────────────────────────────────────────────────────────
   · 자미두수의 '자(紫)'가 자주색입니다. 자미성 = 북극성 = 황제의 별.
     보라 계열은 예뻐서 고른 게 아니라 브랜드 이름 그 자체입니다.
   · 딥 플럼(보라)  → 권위 · 신비 · 프리미엄  → 지배 욕구를 건드립니다
   · 더스티 로즈    → 돌봄 · 진정             → 안정 욕구를 건드립니다
   · 낮은 채도 + 깊은 톤 → 20~40대 여성 선호도가 가장 높은 조합
   · 앤티크 골드    → 가치 · 희소성. 결제 버튼에만 씁니다
   · 본문은 검정 대신 '플럼 잉크'를 씁니다. 대비 12:1 이상이라
     가독성은 검정과 같으면서 훨씬 부드럽게 읽힙니다.

   ※ 이 파일은 "디자인"만 담당합니다.
     글자 내용은 각 html 파일에 있습니다. (편집가이드.md 참고)
   ========================================================================== */

/* 웹폰트 — 인터넷이 안 되는 환경에서 쓰시려면 아래 한 줄을 지우세요 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700;900&family=Noto+Sans+KR:wght@300;400;500;700;900&family=Playfair+Display:ital,wght@0,500;0,700;1,500&display=swap');

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
  /* 바탕 — 살짝 붉은 기가 도는 오프화이트 (차갑지 않게) */
  --bg:            #FAF7F8;
  --bg-alt:        #F6F1F4;
  --bg-deep:       #F0E8EE;
  --surface:       #FFFFFF;

  /* 글자 */
  --ink:           #2E1F33;   /* 플럼 잉크 — 대비 13:1 */
  --ink-soft:      #52415A;
  --muted:         #8A7891;
  --muted-light:   #B5A6BB;

  /* 주색 — 딥 플럼 (紫) */
  --plum:          #4A2C4E;
  --plum-deep:     #341C38;
  --plum-soft:     #6B4571;

  /* 강조 — 더스티 로즈 */
  --rose:          #B5788C;
  --rose-deep:     #96566B;
  --rose-light:    #E8CDD6;

  /* 결제 전용 — 앤티크 골드 */
  --gold:          #C9A227;
  --gold-deep:     #9A7A14;

  /* 선·면 */
  --line:          rgba(74, 44, 78, 0.16);
  --line-soft:     rgba(74, 44, 78, 0.08);
  --tint:          rgba(181, 120, 140, 0.08);
  --tint-plum:     rgba(74, 44, 78, 0.05);

  --danger:        #B4342B;
  --success:       #2C7A5B;

  /* 모서리 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  /* 그림자 — 회색 대신 플럼 톤을 써서 색이 탁해지지 않게 */
  --sh-card:  inset 0 1px 0 rgba(255,255,255,.7),
              0 1px 0 rgba(74,44,78,.04),
              0 10px 26px -12px rgba(74,44,78,.22);
  --sh-soft:  inset 0 1px 0 rgba(255,255,255,.9),
              0 6px 16px -8px rgba(74,44,78,.16),
              0 2px 6px rgba(46,31,51,.04);
  --sh-plum:  0 8px 20px -6px rgba(74,44,78,.38),
              inset 0 1px 0 rgba(255,255,255,.22);
  --sh-rose:  0 8px 20px -6px rgba(181,120,140,.45),
              inset 0 1px 0 rgba(255,255,255,.3);
  --sh-gold:  0 8px 20px -6px rgba(201,162,39,.45),
              inset 0 1px 0 rgba(255,255,255,.35);
  --sh-lift:  0 22px 46px -20px rgba(74,44,78,.42);

  /* 타이포 */
  --f-serif:  'Noto Serif KR', 'Nanum Myeongjo', serif;
  --f-sans:   'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --f-num:    'Playfair Display', 'Noto Serif KR', serif;

  /* 여백 */
  --gap:      clamp(16px, 4vw, 28px);
  --sec-y:    clamp(56px, 9vw, 110px);
  --max:      1120px;
  --max-narrow: 760px;
}

/* --------------------------------------------------------------------------
   2. 리셋 & 기본
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* 🔴 **`hidden` 은 언제나 이긴다** (2026-08-12 · 세 번째로 데이고 나서 뿌리를 막음)
 *
 * 브라우저 기본값 `[hidden]{display:none}` 은 특정도가 (0,1,0) 인데, 우리가 쓰는
 * `.btn{display:inline-flex}` · `.panel{display:grid}` 도 (0,1,0) 이다.
 * 같으면 **나중에 쓴 쪽(우리 것)이 이긴다** — 그래서 `el.hidden = true` 를 줘도
 * 요소가 **그대로 보인다.**
 *
 * 이 저장소가 같은 함정을 세 번 밟았다:
 *   ① `.instant-overlay[hidden]`  (:1273 에 반창고)
 *   ② `.form-block[hidden]`       (:1486 에 반창고)
 *   ③ 결제 실패 화면의 「다시 시도」 — `hidden` 을 줬는데 **115×57 로 보였고,
 *      눌러도 아무 일이 없었다**(핸들러가 없는 갈래였다). 브라우저에서 재다 잡았다.
 *
 * 🔑 자리마다 반창고를 붙이면 **네 번째가 온다.** 한 줄로 전역에서 못박는다.
 * ⚠️ `!important` 를 쓰는 이유가 이것이다 — 앞으로 어떤 클래스가 `display` 를
 *    정하든 `hidden` 이 이긴다. **숨기라고 했으면 숨어야 한다.**
 * ⚠️ 여닫는 것을 `hidden` 이 아니라 `data-show` 로 하는 자리(`.field__err`)는
 *    보일 때 `hidden` 을 **벗기므로** 여기 안 걸린다. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--plum-deep);
}
h1 { font-size: clamp(1.85rem, 6vw, 3.05rem); line-height: 1.28; }
h2 { font-size: clamp(1.5rem, 4.4vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--rose-light); color: var(--plum-deep); }

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* --------------------------------------------------------------------------
   3. 레이아웃
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 32px);
}
.wrap--narrow { max-width: var(--max-narrow); }

.section { padding-block: var(--sec-y); position: relative; }
.section--alt  { background: var(--bg-alt); }
.section--deep { background: var(--bg-deep); }
.section--tight { padding-block: clamp(36px, 6vw, 64px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .18em;
  color: var(--rose-deep);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose));
}
.sec-head { margin-bottom: clamp(28px, 5vw, 52px); }
.sec-head--center { text-align: center; }
.sec-head--center .eyebrow::after {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--rose), transparent);
}
.sec-head p.lead {
  margin-top: 14px; color: var(--ink-soft);
  font-size: clamp(.98rem, 2.2vw, 1.08rem);
  max-width: 62ch;
}
.sec-head--center p.lead { margin-inline: auto; }

.rule {
  height: 1px; border: 0; margin: clamp(36px, 6vw, 64px) 0;
  background: linear-gradient(90deg, transparent, var(--rose) 50%, transparent);
  opacity: .45;
}
.rule--short { max-width: 180px; margin-inline: auto; }

.grid { display: grid; gap: var(--gap); }

/* 칸이 "내용 때문에" 안 줄어드는 것을 막습니다.
   한글은 word-break:keep-all 이라 긴 낱말이 칸을 바깥으로 밀어내는데,
   min-width:0 을 주지 않으면 가로 스크롤이 생깁니다. (900px 부근에서 발생) */
.grid > *, .quotes > *, .plans > *, .steps > * { min-width: 0; }

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   4. 버튼
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--f-sans);
  font-size: .97rem; font-weight: 700;
  letter-spacing: -0.01em; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* 주 버튼 — 플럼 그라데이션 */
.btn--plum {
  background: linear-gradient(135deg, var(--plum) 0%, var(--plum-soft) 100%);
  color: #fff; box-shadow: var(--sh-plum);
}
.btn--plum:hover { box-shadow: var(--sh-lift); }

/* 감성 버튼 — 로즈 */
.btn--rose {
  background: linear-gradient(135deg, var(--rose-deep) 0%, var(--rose) 100%);
  color: #fff; box-shadow: var(--sh-rose);
}
.btn--rose:hover { box-shadow: var(--sh-lift); }

/* 결제 버튼 — 골드 (이 색은 결제에만 씁니다) */
.btn--gold {
  background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 100%);
  color: #fff; box-shadow: var(--sh-gold);
}
.btn--gold:hover { box-shadow: var(--sh-lift); }

.btn--outline {
  background: rgba(255,255,255,.75);
  color: var(--plum); border-color: var(--line);
  box-shadow: var(--sh-soft);
}
.btn--outline:hover { background: #fff; border-color: var(--rose); color: var(--plum-deep); }

.btn--ghost {
  background: transparent; color: var(--rose-deep);
  padding-inline: 4px; border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.btn--ghost:hover { border-bottom-color: var(--rose); transform: none; }

.btn--lg   { padding: 17px 36px; font-size: 1.05rem; }
.btn--full { width: 100%; }
.btn--sm   { padding: 10px 18px; font-size: .88rem; }

.btn[disabled], .btn--disabled { opacity: .45; pointer-events: none; filter: grayscale(.4); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row--center { justify-content: center; }

.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* 카카오페이 버튼은 브랜드 색이 정해져 있어 예외 */
.btn--kakaopay { background: #FEE500; color: #191600; box-shadow: 0 8px 20px -8px rgba(254,229,0,.75); }

/* --------------------------------------------------------------------------
   5. 헤더
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250,247,248,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner { display: flex; align-items: center; gap: 16px; height: 68px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-serif); font-weight: 900;
  font-size: 1.1rem; letter-spacing: -0.04em;
  color: var(--plum-deep); white-space: nowrap;
}
.brand__mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--plum) 0%, var(--rose-deep) 100%);
  color: #fff; box-shadow: var(--sh-plum);
}
.brand small {
  display: block; font-family: var(--f-sans);
  font-size: .6rem; font-weight: 600; letter-spacing: .12em;
  color: var(--rose-deep); margin-top: -2px;
}

/* 헤더 신뢰 배지 — 15년 전문성을 상시 노출 */
.brand-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--tint); border: 1px solid var(--line-soft);
  font-size: .72rem; font-weight: 700; color: var(--rose-deep);
  white-space: nowrap;
}
.brand-badge b { color: var(--plum); font-family: var(--f-num); font-size: .84rem; }
@media (max-width: 1050px) { .brand-badge { display: none; } }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: block; padding: 9px 12px;
  font-size: .92rem; font-weight: 500; color: var(--ink-soft);
  border-radius: var(--r-sm);
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { color: var(--plum); background: var(--tint); }
.nav a[aria-current="page"] { color: var(--plum); font-weight: 700; }

.header-cta { flex: none; }

/* 넓은 화면에서는 "명반 신청하기"가 두 번 보였습니다 —
   메뉴 안(.nav__cta)과 오른쪽 장미색 버튼(.header-cta)이 동시에 떴기 때문입니다.
   넓은 화면은 버튼만, 좁은 화면은 서랍 안 메뉴만 남깁니다.
   (좁은 화면에서는 아래 940px 규칙이 .header-cta 를 이미 숨깁니다) */
@media (min-width: 941px) { .nav__cta { display: none; } }

.nav-toggle {
  display: none; margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255,255,255,.75); color: var(--plum);
  align-items: center; justify-content: center;
}
@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .nav {
    position: fixed; inset: 68px 0 auto 0; margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 22px 40px -24px rgba(46,31,51,.35);
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav[data-open="true"] { max-height: 80vh; overflow-y: auto; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px clamp(18px,5vw,32px) 22px; }
  .nav a { padding: 14px 6px; border-bottom: 1px solid var(--line-soft); font-size: 1rem; }
  .nav .nav__cta { margin-top: 14px; }
  .nav .nav__cta a {
    border-bottom: 0; text-align: center; border-radius: var(--r-full); font-weight: 700;
    background: linear-gradient(135deg, var(--plum) 0%, var(--plum-soft) 100%); color: #fff;
  }
}

/* --------------------------------------------------------------------------
   6. 히어로 — 첫 화면에서 바로 입력받는 구조
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(34px, 6vw, 66px) clamp(30px, 5vw, 56px);
  text-align: center;
}
.hero::before {
  content: ""; position: absolute; inset: -28% 0 auto 50%;
  width: min(940px, 132vw); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle,
      rgba(181,120,140,.20) 0%,
      rgba(74,44,78,.09) 38%,
      transparent 66%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero__stars { position: absolute; inset: 0; pointer-events: none; opacity: .5; }

.hero__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: rgba(255,255,255,.8);
  font-size: .78rem; font-weight: 700; color: var(--plum);
  box-shadow: var(--sh-soft);
}
.hero__kicker b { font-family: var(--f-num); color: var(--rose-deep); }
.hero h1 { margin-bottom: 14px; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--rose) 0%, var(--plum-soft) 55%, var(--plum-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--plum);
}
.hero__sub {
  max-width: 52ch; margin: 0 auto 26px;
  color: var(--ink-soft); font-size: clamp(.98rem, 2.5vw, 1.1rem);
}

/* 히어로 안의 입력 카드 — 광고로 들어온 사람이 바로 시작하는 지점 */
.startbox {
  max-width: 620px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 4vw, 30px);
  box-shadow: var(--sh-card);
  text-align: left;
}
.startbox__title {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 1.05rem; color: var(--plum-deep);
  margin-bottom: 4px; text-align: center;
}
.startbox__hint {
  font-size: .82rem; color: var(--muted);
  text-align: center; margin-bottom: 18px;
}
.startbox__grid {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; margin-bottom: 12px;
}
@media (max-width: 520px) { .startbox__grid { grid-template-columns: 1fr; } }

/* 태어난 시간 — [오전/오후 목록] [시] 시 [분] 분 */
/* 생년월일 — 연·월·일 세 칸 (2026-08-11 · 운영자 지시)
   달력(<input type="date">)을 걷어낸 자리다. 휴대폰에서 1990년까지 달력을
   거슬러 올라가는 것보다 숫자를 치는 편이 빠르다.
   🔑 바로 아래 .timerow 와 **같은 꼴**로 짠다 — 한 화면에 나란히 서는 두 줄이라
      칸 모양이 다르면 손님 눈에 다른 물건으로 보인다.
   ⚠️ 연 칸만 넓다(4자리). 375px 에서 연 114 · 월 71 · 일 71px 로 떨어진다. */
.datefield {
  display: grid;
  grid-template-columns: 1.6fr auto 1fr auto 1fr auto;
  align-items: center; gap: 8px;
}
.datefield .input { text-align: center; }
.datefield__sep { font-size: .9rem; color: var(--muted); white-space: nowrap; }

.timerow {
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr auto 1fr auto;
  align-items: center; gap: 8px; margin-bottom: 12px;
}
.timerow .input { text-align: center; }
/* 숫자 칸의 위아래 화살표를 숨겨 폭을 아낍니다 */
.timerow input[type="number"] { -moz-appearance: textfield; }
.timerow input[type="number"]::-webkit-outer-spin-button,
.timerow input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.timerow__sep { font-size: .9rem; color: var(--muted); white-space: nowrap; }

.startbox .seg { display: grid; grid-auto-flow: column; gap: 8px; margin-bottom: 14px; }
.startbox .seg label {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-alt); cursor: pointer;
  font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  transition: all .16s ease;
}
.startbox .seg label:hover { border-color: var(--rose); }
.startbox .seg input { appearance: none; margin: 0; width: 0; height: 0; }
.startbox .seg label:has(input:checked) {
  background: var(--plum); border-color: var(--plum); color: #fff;
  box-shadow: var(--sh-plum);
}

/* 계산 화면 (⚙️ 명반 엔진 연결 시에만 보입니다) — 단계가 한 줄씩 켜집니다 */
.calc-steps { display: grid; gap: 10px; }
.calc-steps li {
  position: relative; padding: 10px 12px 10px 38px;
  font-size: .92rem; color: var(--muted-light);
  background: var(--bg-alt);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  transition: color .3s ease, background .3s ease;
}
.calc-steps li::before {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  border: 2px solid var(--line);
  transition: all .3s ease;
}
.calc-steps li[data-state="active"] {
  color: var(--plum); background: #FDF8FA; border-color: var(--rose);
}
.calc-steps li[data-state="active"]::before {
  border-color: var(--rose) transparent var(--rose) var(--rose);
  animation: calc-spin .8s linear infinite;
}
.calc-steps li[data-state="done"] { color: var(--ink-soft); }
.calc-steps li[data-state="done"]::before {
  border-color: var(--rose-deep); background: var(--rose-deep)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/9px no-repeat;
}
@keyframes calc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .calc-steps li[data-state="active"]::before { animation: none; }
}

/* 히어로 아래 가격 줄 — 마찰을 더 줄이기 위해 즉시 노출 */
.pricestrip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 18px;
}
.pricestrip a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-full);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--line-soft);
  font-size: .84rem; font-weight: 600; color: var(--ink-soft);
  box-shadow: var(--sh-soft);
  transition: all .16s ease;
}
.pricestrip a:hover { border-color: var(--rose); color: var(--plum); transform: translateY(-2px); }
.pricestrip b { font-family: var(--f-num); font-size: 1rem; color: var(--plum); }

/* --------------------------------------------------------------------------
   7. 카드
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: clamp(20px, 3.4vw, 30px);
  box-shadow: var(--sh-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: var(--line); }
.card__icon {
  width: 44px; height: 44px; margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--tint); color: var(--rose-deep);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: .96rem; }
.card__num {
  font-family: var(--f-num); font-size: 1.7rem; font-weight: 700;
  color: var(--rose); line-height: 1; margin-bottom: 12px; display: block;
}

/* --------------------------------------------------------------------------
   8. 신뢰 숫자 바
   -------------------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--line-soft);
  box-shadow: var(--sh-card);
}
.stats__item { background: var(--surface); padding: clamp(20px, 3.4vw, 30px) 14px; text-align: center; }
.stats__num {
  display: block; font-family: var(--f-num); font-weight: 700;
  font-size: clamp(1.9rem, 5.4vw, 2.7rem); line-height: 1;
  color: var(--plum); letter-spacing: -0.02em;
}
.stats__num span { font-size: .5em; margin-left: 2px; color: var(--rose-deep); }
.stats__label { display: block; margin-top: 9px; font-size: .84rem; font-weight: 500; color: var(--muted); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   9. 궁금증 카드 (자기참조)
   -------------------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .quotes { grid-template-columns: 1fr; } }

.quote {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--rose);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  box-shadow: var(--sh-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.quote:hover { transform: translateX(3px); box-shadow: var(--sh-card); }
.quote p { font-size: .97rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.quote span { font-size: .76rem; color: var(--rose-deep); font-weight: 700; letter-spacing: .03em; }

/* --------------------------------------------------------------------------
   10. 표
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md); border: 1px solid var(--line);
  box-shadow: var(--sh-card); background: var(--surface);
}
table.tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .94rem; }
table.tbl th, table.tbl td {
  padding: 15px 16px; text-align: left;
  border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
table.tbl thead th {
  background: var(--tint-plum);
  font-family: var(--f-sans); font-weight: 700;
  color: var(--plum); font-size: .88rem; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.tbl tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; background: rgba(74,44,78,.02); }
table.tbl td { color: var(--ink-soft); }
table.tbl tr:last-child th, table.tbl tr:last-child td { border-bottom: 0; }
table.tbl .hl { color: var(--plum); font-weight: 700; }
.tbl-hint { margin-top: 10px; font-size: .8rem; color: var(--muted); text-align: right; }
@media (min-width: 700px) { .tbl-hint { display: none; } }

/* --------------------------------------------------------------------------
   11. 상품 가격 카드
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: 1.08fr 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--sh-card);
  display: flex; flex-direction: column; height: 100%;
}
.plan--featured {
  border-color: var(--rose);
  box-shadow: var(--sh-lift), inset 0 1px 0 rgba(255,255,255,.7);
  background: linear-gradient(180deg, #fff 0%, #FDF8FA 100%);
}
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 6px 18px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--plum) 0%, var(--rose-deep) 50%, var(--plum) 100%);
  color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  white-space: nowrap; box-shadow: var(--sh-plum);
}
.plan__name { font-family: var(--f-serif); font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: 4px; }
.plan__vol { font-size: .84rem; color: var(--rose-deep); font-weight: 700; letter-spacing: .04em; margin-bottom: 18px; }
.plan__price {
  font-family: var(--f-num); font-weight: 700;
  font-size: clamp(2rem, 6vw, 2.7rem); line-height: 1;
  color: var(--plum-deep); letter-spacing: -0.02em;
}
.plan__price small { font-family: var(--f-sans); font-size: .38em; font-weight: 700; color: var(--ink-soft); margin-left: 3px; }
.plan__unit {
  margin-top: 8px; font-size: .84rem; color: var(--rose-deep);
  background: var(--tint); display: inline-block;
  padding: 4px 12px; border-radius: var(--r-full); font-weight: 700;
}
.plan__desc { margin: 18px 0; color: var(--ink-soft); font-size: .95rem; }
.plan__list { margin: 0 0 24px; display: grid; gap: 11px; }
.plan__list li { position: relative; padding-left: 26px; font-size: .94rem; color: var(--ink-soft); line-height: 1.6; }
.plan__list li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rose); box-shadow: 0 0 0 3px var(--tint);
}
.plan__list li strong { color: var(--ink); }
.plan .btn { margin-top: auto; }

.plan--couple {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(18px, 3vw, 34px); align-items: center;
  background: linear-gradient(135deg, #fff 0%, #FBF4F7 100%);
  border-color: var(--line);
}
@media (max-width: 760px) { .plan--couple { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12. 샘플 미리보기
   -------------------------------------------------------------------------- */
.sample {
  position: relative; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  background: var(--surface); box-shadow: var(--sh-card);
}
.sample__paper {
  padding: clamp(22px, 4vw, 38px);
  font-size: .95rem; line-height: 1.95; color: var(--ink-soft);
  max-height: 460px; overflow: hidden;
}
.sample__paper h4 { font-family: var(--f-serif); color: var(--plum-deep); margin: 0 0 6px; font-size: 1.1rem; }
.sample__paper .meta { font-size: .78rem; color: var(--rose-deep); letter-spacing: .05em; margin-bottom: 18px; font-weight: 700; }
.sample__paper p + p { margin-top: .9em; }
.sample__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.93) 55%, #fff 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 12px; padding-bottom: 26px; text-align: center;
}
.sample__fade p { font-size: .88rem; color: var(--muted); margin: 0; }
.sample__lock { font-family: var(--f-serif); font-weight: 700; color: var(--plum); font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   12-b. 실물 발췌 3열 카드 (samples.html)

   ⚠️ 이 블록의 전제는 "가공하지 않았다" 입니다.
      카드 안의 문장은 실제로 나간 해설서에서 그대로 잘라 온 것이고,
      바꾼 것은 사람 이름뿐입니다. 문장을 손보실 일이 생기면
      먼저 output/reports 의 원문을 고치거나, 아니면 약속 문구를 내리세요.
      둘 중 하나는 반드시 해야 합니다.
   -------------------------------------------------------------------------- */
/* ⚠️ align-items 를 stretch 로 두지 마세요.
   세 카드의 키를 맞추면 짧은 카드에 **빈 자리**가 생기고(실제로 322px 이었습니다),
   흐린 글과 밑단 사이가 비어 「글이 그냥 끊긴 것」처럼 보입니다.
   이 블록이 하려는 말은 정반대 — 「여기서도 계속 이어진다」입니다.
   키가 제각각인 편이 오히려 「프리미엄이 더 길다」를 눈으로 보여 줍니다. */
.samples3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px); align-items: start;
}
@media (max-width: 1000px) {
  .samples3 { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
}

.scard {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-card); overflow: hidden;
}
.scard--star { border-color: var(--rose); box-shadow: var(--sh-rose); }
.scard--star::before {
  content: "가장 많이 고르십니다"; position: absolute; top: 0; right: 0; z-index: 2;
  background: var(--rose); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .03em; padding: 5px 11px; border-bottom-left-radius: var(--r-sm);
}

.scard__top {
  padding: 18px clamp(15px, 1.8vw, 22px) 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
}
.scard__name { font-family: var(--f-serif); font-weight: 700; color: var(--plum-deep); font-size: 1.05rem; }
.scard__spec { font-size: .78rem; color: var(--muted); }
.scard__price { margin-left: auto; font-family: var(--f-num); font-weight: 700; color: var(--rose-deep); font-size: 1.02rem; }

/* 읽히는 부분 — 실물 원문 */
.scard__read {
  padding: 14px clamp(15px, 1.8vw, 22px) 0;
  font-size: .88rem; line-height: 1.88; color: var(--ink-soft);
}
.scard__read h4 {
  font-family: var(--f-serif); color: var(--plum); font-size: .96rem;
  margin: 0 0 4px; line-height: 1.5;
}
.scard__read .meta {
  font-size: .72rem; color: var(--rose-deep); letter-spacing: .04em;
  font-weight: 700; margin: 0 0 13px;
}
.scard__read p + p { margin-top: .8em; }

/* 흐린 부분 — 흰 판이 아니라 **진짜 글**을 흐리게 한 것입니다.
   글자 모양이 비쳐야 「여기에도 글이 있다」가 눈으로 전달됩니다.
   🚨 블러는 가리개일 뿐 보안이 아닙니다 — 개발자 도구로 읽힙니다.
      그래서 여기에는 이어지는 한두 문단까지만 넣습니다. */
.scard__blur {
  position: relative; overflow: hidden;
  padding: .8em clamp(15px, 1.8vw, 22px) 0;
  font-size: .88rem; line-height: 1.88; color: var(--ink-soft);
  filter: blur(3.1px); opacity: .78;
  user-select: none; -webkit-user-select: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.35) 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.35) 78%, transparent 100%);
}
.scard__blur p { margin: 0; }
.scard__blur p + p { margin-top: .8em; }
.scard__blur--sm { height: 82px; }
.scard__blur--md { height: 132px; }
.scard__blur--lg { height: 208px; }

.scard__foot {
  margin-top: auto; padding: 14px clamp(15px, 1.8vw, 22px) 18px;
  border-top: 1px solid var(--line-soft); background: var(--tint-plum);
}
.scard__cut {
  font-family: var(--f-serif); font-weight: 700; color: var(--plum);
  font-size: .92rem; line-height: 1.6; margin: 0 0 8px;
}
.scard__rest { font-size: .8rem; color: var(--muted); line-height: 1.75; margin: 0 0 13px; }
.scard__foot .btn { width: 100%; justify-content: center; }

/* 발췌 약속 — 카드 위에 한 번만 겁니다 */
.vow {
  border: 1px dashed var(--rose); background: var(--tint);
  border-radius: var(--r-sm); padding: 15px 18px;
  font-size: .9rem; line-height: 1.85; color: var(--ink-soft);
}
.vow b { color: var(--plum-deep); }
.vow__sub { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); }

.toc { display: grid; gap: 10px; counter-reset: toc; }
.toc li {
  counter-increment: toc;
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: baseline;
  padding: 13px 16px; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  font-size: .95rem; box-shadow: var(--sh-soft);
}
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-num); font-weight: 700; color: var(--rose); font-size: .95rem;
}
.toc li span { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.toc-part {
  font-family: var(--f-serif); font-weight: 700; color: var(--plum);
  font-size: 1.02rem; margin: 26px 0 12px; display: flex; align-items: center; gap: 10px;
}
.toc-part::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* 답하는 질문 9개 (궁합 판매 페이지) — 실제 목차에서 뽑은 행 */
.qnine {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  counter-reset: qn;
}
@media (max-width: 900px) { .qnine { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qnine { grid-template-columns: 1fr; } }
.qnine li {
  counter-increment: qn;
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline;
  padding: 15px 16px; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  box-shadow: var(--sh-soft);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.qnine li:hover { border-color: var(--rose); box-shadow: var(--sh-card); }
.qnine li::before {
  content: "Q" counter(qn);
  font-family: var(--f-num); font-weight: 700; font-size: .82rem; color: var(--rose);
}
.qnine li span { font-size: .93rem; font-weight: 500; color: var(--ink); line-height: 1.55; }
.qnine li em {
  font-style: normal; font-size: .74rem; color: var(--muted-light);
  white-space: nowrap; font-family: var(--f-num);
}

/* --------------------------------------------------------------------------
   13. 유튜브 (lite-embed)
   -------------------------------------------------------------------------- */
.yt {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--plum-deep) center/cover no-repeat;
  border: 1px solid var(--line); box-shadow: var(--sh-card); cursor: pointer;
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(181,120,140,.95); color: #fff; border: 0;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.45);
  transition: transform .2s ease, background .2s ease;
}
.yt:hover .yt__play { transform: scale(1.08); background: var(--rose); }
.yt__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(46,31,51,.88));
  color: #fff; font-size: .9rem; font-weight: 500; text-align: left;
}
.yt__ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, #3B2740 0%, #5A3550 100%);
  color: rgba(232,205,214,.6); font-size: .8rem; letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   13-c. 대표 소개 (2026-08-09 · 후기 페이지 맨 위)

   🚨 **글은 여기 없습니다.** `src/intro.js` 에 있고 `npm run intro` 가 씁니다.
      화면 글자를 손으로 고치면 다음 번 실행에 지워집니다.

   🔑 **간격이 이 블록의 요구 그 자체입니다** (운영자 지시: 「글의 아래위 간격이
      저만큼 있어야 한다」). 그래서 세 자리를 따로 잡았습니다:
        ① 줄과 줄  → `.intro-line` 의 line-height
        ② 문단과 문단 → `.intro-p` 의 margin-bottom
        ③ ▶ 목록과 본문 → `.intro-body` 의 margin-top
      값을 줄이시려면 이 셋을 따로 만지시면 됩니다.
   -------------------------------------------------------------------------- */
.intro-h {
  font-size: 1.1rem; letter-spacing: -.01em; margin: 0 0 14px;
  padding-left: 12px; border-left: 4px solid var(--accent);   /* 색 막대 제목 */
  line-height: 1.4;
}
.intro-card {
  padding: 28px 30px 30px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.intro-top { display: flex; align-items: flex-start; gap: 22px; }

/* 사진 자리 — 파일을 넣기 전에는 **빈 동그라미**입니다 (운영자 확정).
   ⚠️ `flex: none` 이 없으면 좁은 화면에서 동그라미가 찌그러집니다 */
.intro-photo {
  flex: none; width: 112px; height: 112px; border-radius: 50%;
  object-fit: cover; background: var(--bg-soft, rgba(74,44,78,.05));
}
.intro-photo--empty { border: 1px solid var(--line); }

.intro-who { min-width: 0; }                 /* 긴 줄이 flex 칸을 밀지 않게 */
.intro-name { margin: 2px 0 12px; font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.intro-name span { font-size: .95rem; font-weight: 500; color: var(--muted); }

/* ▶ 줄들 — 점 대신 `▶` 를 앞에 답니다 (참고 화면과 같게) */
.intro-sum { list-style: none; margin: 0; padding: 0; }
.intro-sum li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  font-size: .95rem; line-height: 1.7; color: var(--ink);
}
.intro-sum li:last-child { margin-bottom: 0; }
.intro-sum li::before {
  content: '▶'; position: absolute; left: 0; top: 0;
  font-size: .62rem; line-height: 2.7; color: var(--accent);
}

/* ③ ▶ 목록과 본문 사이 */
.intro-body { margin-top: 26px; }
/* ② 문단과 문단 사이 */
.intro-p { margin: 0 0 1.55em; }
.intro-p:last-child { margin-bottom: 0; }
/* ① 줄과 줄 사이 — `<br>` 이 아니라 블록이라 여기서 잡습니다 */
.intro-line { display: block; font-size: 1rem; line-height: 2; color: var(--ink); }

@media (max-width: 640px) {
  .intro-card { padding: 22px 18px 24px; }
  .intro-top { gap: 16px; }
  .intro-photo { width: 76px; height: 76px; }
  .intro-name { font-size: 1.12rem; }
  .intro-line { line-height: 1.9; }
}

/* --------------------------------------------------------------------------
   14-a. 후기 쓰는 칸 (2026-08-09 · 운영자 지시로 통째로 단순하게)

   예전에는 「1 별점 / 2 후기 / 3 확인 및 동의」 세 묶음에 설명이 붙어 있었는데,
   손님이 읽을 것이 아니라 **누를 것**이라 전부 걷어냈습니다.
   남은 것: 별 다섯 개 · 큰 글칸 · 큰 이메일칸 · 버튼 · 안내 두 줄.
   -------------------------------------------------------------------------- */
/* 후기 제목 줄 — 대표 소개(`.intro-h`)와 **같은 색 막대**입니다. 두 칸이 나란히
   서므로 모양이 다르면 한 화면에 두 디자인이 됩니다.
   🚨 이 줄 안쪽(별점·건수)은 `npm run reviews` 가 다시 씁니다 — 손으로 안 고칩니다. */
.rv-h {
  font-size: 1.1rem; letter-spacing: -.01em; margin: 0 0 18px;
  padding-left: 12px; border-left: 4px solid var(--accent);
  line-height: 1.4; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
/* 「★4.9」·「💬87」 — 제목보다 작고 흐리게. 숫자가 제목을 덮지 않게 */
.rv-h small { font-size: .88rem; font-weight: 500; color: var(--muted); }
.rv-h small b { color: #f5a623; font-weight: 700; }

/* 후기 카드 — `npm run reviews` 가 찍어 넣습니다. 손으로 안 고칩니다.
   🚨 **본문은 손님이 쓴 글**이라 줄바꿈을 살립니다. 한 덩어리로 뭉치면
      읽기 어렵고, 그건 우리가 고치지 않기로 한 그 글입니다.
   ⚠️ `<br>` 이 아니라 `pre-line` 인 이유: 남이 쓴 글에 우리가 태그를 만들어
      넣지 않습니다 (`scripts/reviews.js` 의 `esc()` 가 유일한 방어선입니다). */
.rv-list { max-width: 640px; margin: 26px auto 0; display: grid; gap: 14px; }
.rv-card {
  padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.rv-card__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rv-card__name { font-size: 1rem; font-weight: 700; }
.rv-card__date { font-size: .82rem; color: var(--muted); margin-left: auto; }
.rv-card__star { margin: 6px 0 10px; color: #f5a623; letter-spacing: .06em; }
.rv-card__body { margin: 0; font-size: .97rem; line-height: 1.85; white-space: pre-line; }

@media (max-width: 640px) {
  .rv-card { padding: 16px 16px 18px; }
  .rv-card__date { margin-left: 0; }
}

.rv-form { max-width: 640px; margin: 0 auto; }
.rv-stars-wrap { border: 0; padding: 0; margin: 0 0 18px; }

/* 별점 — 마우스를 올리면 그때그때 차오릅니다. **반 칸 단위**입니다 (2026-08-09).
   🔑 라디오 버튼을 숨기고 라벨에 별을 그린 것이라 **자바스크립트가 없어도** 됩니다.
   ⚠️ HTML 순서가 5 → 0.5 로 내려갑니다. `row-reverse` 로 왼쪽부터 보이게 뒤집고,
      **뒤에 오는 형제**(`~`)를 함께 칠합니다 — 순서를 바꾸면 별이 거꾸로 찹니다.

   🔑 **반 칸을 만드는 방법** — 별 하나가 라벨 두 개입니다.
      라벨은 폭이 반 칸(`.5em`)이고 `overflow:hidden` 이라, 안에 든 한 칸짜리
      별 글자가 **반만** 보입니다. `rv-half` 는 글자를 그대로 둬서 **왼쪽 반**을,
      `rv-full` 은 왼쪽으로 반 칸 밀어 **오른쪽 반**을 보여 줍니다.
      두 반쪽이 붙어 한 별이 됩니다.
   ⚠️ 이 방식을 쓰는 이유: 「왼쪽 반 별」 글자(U+2BE8)가 유니코드에 있지만
      윈도 기본 글꼴에 없어 **두부(□)** 로 뜹니다 (`⚠️` 뒤 U+FE0F 와 같은 함정).
   ⚠️ 별 사이를 `gap` 으로 벌리지 않습니다. 벌리면 **한 별의 두 반쪽 사이도**
      벌어져 별이 갈라져 보이고, 그 틈에 마우스가 들어가면 미리보기가 깜빡입니다. */
.rv-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0; }
.rv-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-stars label {
  box-sizing: content-box;          /* 폭은 언제나 반 칸 — 전역 border-box 에 안 먹히게 */
  width: .5em; overflow: hidden;
  /* ⚠️ 위아래 여백은 **누를 자리**입니다. 반 칸이라 가로가 24px 밖에 안 되는데
     세로까지 좁으면 폰에서 못 누릅니다 — 지우지 마세요. */
  padding: 9px 0;
  /* 🔑 반 칸이라 가로가 별 크기의 **절반**입니다. 화면이 허락하는 만큼 키웁니다 —
     좁은 폰(320px)에서는 3rem(반 칸 24px), 보통 폰부터는 3.5rem(반 칸 28px).
     ⚠️ 위 칸을 더 키우면 좁은 폰에서 별 열 칸이 화면을 넘습니다.
        3.5rem 이면 열 칸이 280px 이라 320px 화면에도 겨우 들어갑니다. */
  font-size: clamp(3rem, 13.5vw, 3.5rem);
  line-height: 1; cursor: pointer; color: var(--line);
  transition: color .12s ease; user-select: none;
}
.rv-stars .rv-g { display: block; width: 1em; text-align: center; }
.rv-stars .rv-full .rv-g { margin-left: -.5em; }   /* 오른쪽 반만 보입니다 */
/* 고른 것과 그 앞의 별들 */
.rv-stars input:checked ~ label { color: #f5a623; }
/* 마우스를 올리는 동안은 미리보기가 이깁니다 — 먼저 전부 끄고, 올린 데까지 켭니다 */
.rv-stars:hover label { color: var(--line); }
.rv-stars label:hover,
.rv-stars label:hover ~ label { color: #f5a623; }
/* 키보드로 옮길 때 어디 있는지 보여야 합니다 */
.rv-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* 글칸 — 예전보다 3배. 라벨도 글자 수도 없앴습니다 */
.rv-body {
  display: block; width: 100%; min-height: 15rem; resize: vertical;
  padding: 16px 18px; font: inherit; font-size: 1rem; line-height: 1.75;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
/* 이메일칸 — 예전보다 2배 */
.rv-email {
  display: block; width: 100%; margin-top: 18px;
  padding: 15px 18px; font: inherit; font-size: 1.05rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.rv-body:focus, .rv-email:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.rv-body::placeholder, .rv-email::placeholder { color: var(--muted); }

.rv-note { margin: 8px 2px 0; font-size: .86rem; color: var(--muted); line-height: 1.6; }
/* 동의 한 줄 — 체크박스를 없앤 자리라 **유일한 근거**입니다. 지우지 마세요 */
.rv-agree { margin: 14px 0 0; text-align: center; font-size: .8rem; color: var(--muted); line-height: 1.6; }
.rv-agree a { color: var(--muted); text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. 후기
   -------------------------------------------------------------------------- */
.review {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 26px);
  box-shadow: var(--sh-card);
  display: flex; flex-direction: column; gap: 14px;
}
.review__stars { color: var(--rose); font-size: .95rem; letter-spacing: .12em; }
.review__body { font-size: .95rem; color: var(--ink-soft); flex: 1; }
.review__by {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; row-gap: 6px; min-width: 0;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: .84rem; color: var(--muted);
}
.review__av {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--tint); color: var(--rose-deep); font-weight: 700; font-size: .82rem;
}
.review__by b { color: var(--ink); font-weight: 700; }
.review__tag {
  margin-left: auto; font-size: .74rem; color: var(--plum);
  background: var(--tint-plum); padding: 3px 10px; border-radius: var(--r-full);
  font-weight: 700; white-space: nowrap;
}

/* ── 후기 캐러셀 — 왼쪽으로 계속 흐릅니다 ──────────────────────────────
   · 같은 목록을 두 벌 넣고 -50% 만큼 밀어서 끊김 없이 반복시킵니다
   · 마우스를 올리면 멈추고, 손가락으로 밀어서 볼 수도 있습니다
   · "동작 줄이기"를 켠 분에게는 그냥 옆으로 스크롤되는 목록이 됩니다
   ------------------------------------------------------------------ */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 6px;
  /* 양 끝을 부드럽게 사라지게 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex; gap: 16px; width: max-content;
  animation: marquee-left var(--marquee-speed, 56s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__track > * { flex: 0 0 clamp(268px, 78vw, 360px); }
.marquee .review { height: 100%; }

@keyframes marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* 손가락으로 밀 때는 애니메이션을 멈추고 스크롤로 전환 */
.marquee[data-drag="true"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.marquee[data-drag="true"] .marquee__track { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   15. FAQ 아코디언
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); box-shadow: var(--sh-soft);
  overflow: hidden; transition: border-color .18s ease;
}
.faq details[open] { border-color: var(--line); box-shadow: var(--sh-card); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 52px 18px 20px; position: relative;
  font-weight: 700; font-size: .99rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--rose); border-bottom: 2px solid var(--rose);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { background: var(--tint); }
.faq .faq__a {
  padding: 0 20px 20px; color: var(--ink-soft); font-size: .95rem;
  border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: -1px;
}
.faq .faq__a a { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   16. 강조 패널 (어두운 배경)
   -------------------------------------------------------------------------- */
.panel {
  background: linear-gradient(135deg, var(--plum-deep) 0%, #4A2C4E 55%, #5C3550 100%);
  color: #F3EAEF; border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 52px);
  position: relative; overflow: hidden;
}
.panel::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 460px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(232,205,214,.22), transparent 62%);
  pointer-events: none;
}
.panel > * { position: relative; }
.panel h2, .panel h3 { color: #fff; }
.panel .eyebrow { color: var(--rose-light); }
.panel .eyebrow::before { background: linear-gradient(90deg, transparent, var(--rose-light)); }
.panel p.lead { color: rgba(243,234,239,.82); }
.panel ul { display: grid; gap: 12px; margin-top: 26px; }
.panel li { padding-left: 34px; position: relative; font-size: .98rem; color: rgba(243,234,239,.94); }
.panel li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(232,205,214,.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5l3 3L10 1' stroke='%23E8CDD6' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.panel__foot {
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid rgba(232,205,214,.2);
  color: var(--rose-light); font-family: var(--f-serif); font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   17. 편지
   -------------------------------------------------------------------------- */
.letter {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(28px, 5vw, 56px);
  box-shadow: var(--sh-card); max-width: 720px; margin-inline: auto;
}
.letter p { font-family: var(--f-serif); font-size: clamp(1rem, 2.4vw, 1.1rem); line-height: 2.1; color: var(--ink-soft); }
.letter__sign { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-soft); text-align: right; }
.letter__sign b { font-family: var(--f-serif); font-size: 1.15rem; color: var(--plum-deep); display: block; }
.letter__sign span { font-size: .84rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   18. 12궁 도표
   -------------------------------------------------------------------------- */
.palace-chart {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-width: 560px; margin-inline: auto; aspect-ratio: 1;
}
.palace {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 10px 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--sh-soft); font-size: .78rem;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.palace:hover { background: #FDF8FA; border-color: var(--rose); transform: translateY(-2px); }
.palace b { font-family: var(--f-serif); font-size: .92rem; color: var(--plum); display: block; line-height: 1.3; }
.palace span { color: var(--muted); font-size: .68rem; line-height: 1.4; }
.palace--center {
  grid-column: 2 / 4; grid-row: 2 / 4;
  background: linear-gradient(135deg, var(--plum-deep) 0%, #5C3550 100%);
  border-color: var(--plum);
  align-items: center; justify-content: center; text-align: center; gap: 6px;
}
.palace--center b { color: var(--rose-light); font-size: 1.2rem; }
.palace--center span { color: rgba(232,205,214,.65); }
.palace--key { background: #FDF8FA; border-color: var(--line); }
@media (max-width: 480px) {
  .palace { font-size: .7rem; padding: 7px 5px; }
  .palace b { font-size: .8rem; }
  .palace span { font-size: .6rem; }
}
.palace__sub { color: var(--muted-light) !important; font-size: .62rem !important; }

/* --------------------------------------------------------------------------
   18.5 즉시 통변 5쪽 (신청 완료 화면)
   -------------------------------------------------------------------------- */
.instant { margin-top: 28px; }
.instant__title {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 1.05rem; color: var(--plum-deep);
  text-align: center; margin-bottom: 14px;
}
.instant__wait {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px, 4vw, 30px);
  box-shadow: var(--sh-card);
}
.instant__note {
  font-size: .82rem; color: var(--muted);
  text-align: center; line-height: 1.7; margin-top: 14px;
}
.calc-steps em { font-style: normal; color: var(--muted-light); font-size: .84em; }

/* 실패 이유 — 운영자 화면(127.0.0.1)에서만 instant.js 가 보여줍니다.
   배포 도메인에서는 숨은 채로 둡니다. 손님에게 보일 글이 아닙니다. */
.instant__devwhy {
  margin: 12px 0 0; padding: 8px 10px;
  font-family: var(--f-num); font-size: .76rem; line-height: 1.6;
  color: var(--muted); background: var(--bg-alt);
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  /* ⚠️ 「찾아본 곳」이 여러 줄로 옵니다. pre-wrap 이 없으면 한 줄로 뭉쳐
        어느 경로가 왜 안 됐는지 읽을 수가 없습니다. */
  white-space: pre-wrap; word-break: break-word;
}

/* ── 로딩 덮개 ──────────────────────────────────────────────────
   만드는 1~3분 동안 화면 전체를 덮습니다 (운영자 확정 2026-08-06).
   ⚠️ 예전에는 「30~40초」였습니다 — api 84.3초(08-15) · 배포본 약 140초(08-19 실측)입니다.

   🚨 z-index 200 — 헤더(90)와 하단 고정 CTA(80)보다 위여야 합니다.
      덜 주면 헤더가 덮개 위로 떠서 반쯤 덮인 이상한 화면이 됩니다.
   🚨 이 덮개는 일정·발송 주소·**결제 안내를 전부 가립니다.**
      내려가는 길 셋은 instant.js 에 있습니다 (done · 강제 해제 · 닫기 버튼). */
.instant-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(250, 247, 248, .97);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.instant-overlay[hidden] { display: none; }   /* place-items 가 hidden 을 이깁니다 */
.instant-overlay__box {
  width: 100%; max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 5vw, 32px);
  box-shadow: var(--sh-card);
}
.instant-overlay__close { text-align: center; margin: 16px 0 0; }

/* 덮개가 떠 있는 동안 뒤쪽이 따라 움직이지 않게 잠급니다 */
.is-instant-locked, .is-instant-locked body { overflow: hidden; }

/* 전자책 — 한 장씩 넘겨 봅니다 */
.ebook {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(16px, 3vw, 24px);
  box-shadow: var(--sh-card);
}
.ebook__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.ebook__stamp {
  display: inline-block; padding: 4px 10px;
  border: 1px solid var(--rose); border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--rose-deep); background: #FDF8FA;
}
.ebook__pos { font-family: var(--f-num); font-size: .84rem; color: var(--muted); }
.ebook__pos b { color: var(--plum); }

.ebook__page {
  background: var(--bg-alt); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: clamp(18px, 4vw, 30px);
  min-height: 340px;
}
.ebook__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.ebook__head b { font-family: var(--f-serif); font-size: 1rem; color: var(--plum-deep); }
.ebook__head span { font-family: var(--f-num); font-size: .78rem; color: var(--muted-light); }
.ebook__meta { font-size: .82rem; color: var(--muted); margin-bottom: 14px; }
.ebook__page p { font-size: .95rem; line-height: 1.9; color: var(--ink); margin-bottom: 1em; }
.ebook__page p:last-child { margin-bottom: 0; }
.ebook__page .palace-chart { max-width: 440px; }

/* 문체 v2 장치 (2026-08-19) — 클래스 이름은 인쇄 쪽(src/render/report.css)과 같다.
   ⚠️ CSS 는 두 벌이다 — 저쪽 이름을 바꾸면 여기도 같이 바꾼다 (mingban/report 와 같은 규칙).
   접두 글자(★ · →)가 모양의 전부이고, 여기는 굵기·내어쓰기만 보탠다. */
.ebook__page p.key { font-weight: 600; }
.ebook__page p.list span { display: block; }
.ebook__page p.list span.li { padding-left: 1.1em; text-indent: -1.1em; }
.ebook__page p.flow { }  /* 화살표가 글자 그대로 모양이다 — report.css 와 같은 결정 */

.ebook__nav {
  display: flex; justify-content: center; gap: 10px; margin-top: 16px;
}
.ebook__nav button[disabled] { opacity: .35; cursor: default; }

/* --------------------------------------------------------------------------
   19. 스텝 / 진행 표시
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); counter-reset: st; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step {
  counter-increment: st; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 22px 20px; box-shadow: var(--sh-soft); position: relative;
}
.step::before {
  content: "STEP " counter(st);
  font-family: var(--f-num); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; color: var(--rose); display: block; margin-bottom: 10px;
}
.step h4 { margin-bottom: 8px; }
.step p { font-size: .89rem; color: var(--muted); }
.step--now { border-color: var(--rose); background: #FDF8FA; }

.track { display: grid; gap: 0; }
.track li { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: start; padding: 18px 0; position: relative; }
.track li:not(:last-child)::after {
  content: ""; position: absolute; left: 19px; top: 46px; bottom: -8px; width: 2px; background: var(--line);
}
.track__dot {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-deep); color: var(--muted);
  font-family: var(--f-num); font-weight: 700; font-size: .95rem;
  border: 1px solid var(--line-soft); position: relative; z-index: 1;
}
.track li[data-state="done"] .track__dot {
  background: linear-gradient(135deg, var(--plum) 0%, var(--rose-deep) 100%);
  color: #fff; border-color: transparent; box-shadow: var(--sh-plum);
}
.track__label b { display: block; font-size: 1.02rem; color: var(--ink); }
.track__label span { font-size: .88rem; color: var(--muted); }
.track__when { font-size: .84rem; color: var(--rose-deep); font-weight: 700; white-space: nowrap; padding-top: 3px; }

/* --------------------------------------------------------------------------
   20. 폼
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 26px; }
.field { display: grid; gap: 8px; }
.field > label, .fieldset__legend {
  font-size: .92rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 7px;
}
.req { color: #fff; background: var(--rose-deep); font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-full); }
.opt { color: var(--muted); background: var(--bg-deep); font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-full); }
.field__help { font-size: .82rem; color: var(--muted); line-height: 1.65; }
.field__help strong { color: var(--plum); }
.field__help b { color: var(--ink-soft); }

.input, .select, .textarea {
  width: 100%; padding: 13px 15px;
  font-family: var(--f-sans); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(46,31,51,.03);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-light); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(181,120,140,.18);
}
.textarea { min-height: 116px; resize: vertical; line-height: 1.7; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A2C4E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180,52,43,.12);
}
.field__err { font-size: .84rem; color: var(--danger); font-weight: 500; display: none; }
.field__err[data-show="true"] { display: block; }

.choice { display: grid; gap: 10px; }
.choice--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 520px) { .choice--row { grid-auto-flow: row; } }

.choice label {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; font-size: .95rem; box-shadow: var(--sh-soft);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.choice label:hover { border-color: var(--rose); background: #FDFAFB; }
.choice input[type="radio"], .choice input[type="checkbox"] {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0;
  border: 1.5px solid var(--line); background: var(--bg-alt);
  transition: border-color .16s ease, background .16s ease;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input[type="checkbox"] { border-radius: 5px; }
.choice input:checked {
  border-color: var(--rose-deep);
  background: var(--rose-deep)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/11px no-repeat;
}
.choice label:has(input:checked) { border-color: var(--rose); background: #FDF8FA; box-shadow: var(--sh-card); }
.choice__txt b { display: block; font-weight: 700; }
.choice__txt span { font-size: .84rem; color: var(--muted); }

/* 상품 고르기 — 카드 안을 이름 → 설명 → 가격 순으로 세로로 쌓습니다.
   (라디오 동그라미만 이름 왼쪽에 붙습니다) */
.pick { display: grid; gap: 12px; }
.pick label {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start;
  padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; box-shadow: var(--sh-soft);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.pick label:hover { border-color: var(--rose); }
.pick label:has(input:checked) { border-color: var(--rose); background: #FDF8FA; box-shadow: var(--sh-card); }
.pick input[type="radio"] {
  appearance: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  border: 1.5px solid var(--line); background: var(--bg-alt);
}
.pick input:checked { border: 6px solid var(--rose-deep); background: #fff; }
.pick__price { grid-column: 2; }                 /* 라디오 아래가 아니라 글과 같은 줄에 맞춥니다 */
.pick__name { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 2px; }
.pick__meta { display: block; font-size: .84rem; color: var(--muted); line-height: 1.55; }
.pick__price { font-family: var(--f-num); font-weight: 700; font-size: 1.15rem; color: var(--plum); white-space: nowrap; }

/* 눈앞에 두는 고지 — 약관 구석에 숨기지 않습니다 */
.notice-strong {
  margin: 14px 0 18px; padding: 14px 16px;
  background: #FDF8FA; border: 1px solid var(--rose);
  border-left-width: 4px; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 600; color: var(--plum-deep); line-height: 1.6;
}
.notice-strong span { display: block; margin-top: 3px; font-size: .84rem; font-weight: 400; color: var(--muted); }

/* 입력 예시 — 도움말보다 한 단계 옅게 */
.field__hint { font-size: .8rem; color: var(--muted); opacity: .85; margin: -2px 0 8px; }

.form-block {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--sh-card); display: grid; gap: 24px;
}
.form-block__title {
  font-family: var(--f-serif); font-weight: 700; font-size: 1.15rem;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.form-block__title i {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--tint); color: var(--rose-deep);
  font-family: var(--f-num); font-style: normal; font-size: .82rem; font-weight: 700;
}
.form-block[hidden] { display: none; }

fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } }

.agree {
  background: var(--bg-alt); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 18px 20px; display: grid; gap: 14px;
}
.agree__box {
  max-height: 130px; overflow-y: auto;
  font-size: .82rem; color: var(--muted); line-height: 1.7;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 14px 16px;
}
.agree__box b { color: var(--ink-soft); }

.pay-slot {
  border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: 22px; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(74,44,78,.025) 0 10px, transparent 10px 20px);
}
.pay-slot__note { font-size: .82rem; color: var(--muted); margin-top: 12px; line-height: 1.6; }

.total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 18px 20px;
  background: linear-gradient(135deg, #FDF8FA 0%, #F8EFF3 100%);
  border: 1px solid var(--rose); border-radius: var(--r-md);
}
.total__label { font-weight: 700; color: var(--ink); }
.total__val { font-family: var(--f-num); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2rem); color: var(--plum-deep); }
.total__val small { font-family: var(--f-sans); font-size: .5em; margin-left: 3px; }

/* --------------------------------------------------------------------------
   21. 하단 고정 CTA 바
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 10px clamp(14px, 4vw, 22px) calc(10px + env(safe-area-inset-bottom));
  background: rgba(250,247,248,.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -14px rgba(46,31,51,.3);
  transform: translateY(110%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.sticky-cta[data-show="true"] { transform: translateY(0); }
.sticky-cta__inner { max-width: var(--max); margin-inline: auto; display: flex; align-items: center; gap: 14px; }
.sticky-cta__txt { flex: 1; min-width: 0; }
.sticky-cta__txt b { display: block; font-size: .9rem; line-height: 1.3; color: var(--ink); }
.sticky-cta__txt span { font-size: .76rem; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-cta .btn { flex: none; }
@media (min-width: 941px) { .sticky-cta { display: none; } }

/* --------------------------------------------------------------------------
   22. 푸터
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--plum-deep); color: rgba(243,234,239,.72);
  padding-block: clamp(40px, 6vw, 66px) 44px; font-size: .88rem;
}
@media (max-width: 940px) { .site-footer { padding-bottom: 104px; } }
.site-footer a { color: rgba(243,234,239,.82); }
.site-footer a:hover { color: var(--rose-light); }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(24px, 5vw, 48px);
  padding-bottom: 32px; border-bottom: 1px solid rgba(232,205,214,.16);
}
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand { font-family: var(--f-serif); font-weight: 900; font-size: 1.2rem; color: #fff; margin-bottom: 12px; display: block; }
.footer-top p { font-size: .86rem; line-height: 1.8; }
.footer-col h4 { color: var(--rose-light); font-size: .84rem; letter-spacing: .1em; font-family: var(--f-sans); font-weight: 700; margin-bottom: 14px; }
.footer-col li { margin-bottom: 9px; }
.footer-biz { padding-top: 26px; display: grid; gap: 8px; font-size: .78rem; color: rgba(243,234,239,.5); line-height: 1.8; }
.footer-biz dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.footer-biz dt { font-weight: 700; color: rgba(243,234,239,.62); }
.footer-biz dd { margin: 0; }
.footer-legal { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .78rem; }

/* --------------------------------------------------------------------------
   23. 유틸
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block; padding: 4px 12px; border-radius: var(--r-full);
  background: var(--tint); color: var(--rose-deep);
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}
.badge--plum { background: var(--tint-plum); color: var(--plum); }
.badge--ink  { background: rgba(46,31,51,.07); color: var(--ink-soft); }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

.note {
  background: var(--tint);
  border-left: 3px solid var(--rose);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px; font-size: .9rem; color: var(--ink-soft); line-height: 1.75;
}
.note b { color: var(--plum); }
.note--plum { background: var(--tint-plum); border-left-color: var(--plum); }

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 36px; }
.mt-4 { margin-top: 52px; }

.page-head { padding-block: clamp(38px, 6vw, 70px) clamp(28px, 4vw, 44px); text-align: center; position: relative; overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; inset: -60% 0 auto 50%;
  width: min(760px, 130vw); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(181,120,140,.16), transparent 62%);
  pointer-events: none;
}
.page-head > * { position: relative; }
.page-head p { max-width: 60ch; margin: 16px auto 0; color: var(--ink-soft); }

.crumbs { font-size: .8rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a:hover { color: var(--rose-deep); }
.crumbs span { margin-inline: 6px; opacity: .5; }

/* 스크롤 등장 */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal[data-in="true"] {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ── 테스트 기간 띠 (2026-08-08) ────────────────────────────────────────
   `npm run test-mode -- --on/--off` 이 넣고 뺍니다. 손으로 지우지 마세요 —
   11개 페이지에 있어서 한 곳이 반드시 남습니다.

   ⚠️ **고정(sticky)으로 만들지 않습니다.** `.site-header` 가 이미
      `position: sticky; top: 0` 이라, 띠도 고정하면 헤더가 그 위로 올라와
      가립니다. 손님은 첫 화면에서 한 번 보면 되므로 스크롤하면 지나갑니다. */
.test-banner {
  background: var(--plum); color: #fff;
  padding: 9px 16px; text-align: center;
  font-size: .9rem; line-height: 1.5;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  align-items: center; justify-content: center;
}
.test-banner b { font-weight: 700; }
.test-banner span { color: rgba(255,255,255,.86); }
@media (max-width: 560px) {
  .test-banner { font-size: .82rem; padding: 8px 12px; }
}

@media print {
  .site-header, .sticky-cta, .site-footer, .btn { display: none !important; }
  .test-banner { display: none !important; }
  body { background: #fff; }
}