/* ============================================================
   천명(天命) — main.css
   SPEC §2 디자인 브리프 구현
   ============================================================ */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  --ink:       #0E1220;  /* 페이지 배경 — 먹빛 심야 남색 */
  --ink-2:     #171D31;  /* 카드·표면 */
  --ink-3:     #232B45;  /* 경계·호버 */
  --hanji:     #F2ECDD;  /* 본문 텍스트 (ink 위 대비 ≈ 14:1) */
  --hanji-dim: #B9B3A4;  /* 보조 텍스트 (≥ 4.5:1) */
  --gold:      #D8B25C;  /* 포인트·링·제목 장식 (ink 위 ≈ 7:1) */
  --cinnabar:  #C73E3A;  /* 낙관·CTA 배경 전용 — 본문 텍스트 색 금지 */

  /* 오방색 데이터 컬러 */
  --e-wood:  #5CA87B;
  --e-fire:  #D4574E;
  --e-earth: #D9A441;
  --e-metal: #C9CDD2;
  --e-water: #5B7FB9;

  /* 폰트 패밀리 */
  --font-display: 'Gowun Batang', 'Song Myung', serif;
  --font-hanja:   'Song Myung', 'Gowun Batang', serif;
  --font-body:    'Pretendard Variable', Pretendard, -apple-system, sans-serif;

  /* 타이포 스케일 */
  --fs-hero:    clamp(2.2rem, 5vw, 3.6rem);
  --fs-section: clamp(1.5rem, 3vw, 1.8rem);
  --fs-sub:     clamp(1.125rem, 2vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-caption: 0.875rem;

  /* 간격 */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --maxw: 1200px;
  --radius: 10px;

  /* 세로 아이브로 레일 폭 + 본문 좌측 인셋 — 제목 시작선과 본문 블록 축을 하나로 (D15) */
  --rail: 2.75rem;
  --rail-inset: calc(var(--rail) + var(--space-3));
  --line-gold: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);

  --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* 네이티브 위젯(연도 select 201개 옵션 팝업·스크롤바·캐럿)을 다크로.
     JS 커스텀 드롭다운 없이 = 키보드 동작 100% 네이티브 유지하면서
     "어두운 트리거를 눌렀더니 흰 판이 터져나오는" 최대 이질감을 제거. */
  color-scheme: dark;

  --control-h:     2.75rem;   /* 44px — 전 컨트롤 공통 높이 + 터치 타깃 */
  --control-h-lg:  3.25rem;   /* 52px — 제출 버튼 (의도된 위계) */
  --radius-field:  8px;       /* select 6px vs 알약 10px 불일치 해소 */
  --control-pad-x: 0.85rem;   /* 13.6px 좌측 인셋 */
  --select-pad-r:  2rem;      /* 32px — 화살표 영역 */
  --arrow-right:   0.95rem;   /* 잉크 우측 극점이 좌측 인셋과 대칭 */

  /* 경계선: 현행 --ink-3는 패널(ink-2) 위 1.20:1 / 필드(ink) 위 1.33:1로
     WCAG 1.4.11(3:1)의 절반도 안 된다. 한지를 40% 섞어 3.79:1 / 4.24:1 확보.
     오방색 데이터 컬러(--e-metal)를 구조색으로 전용하지 않는다. */
  --line-field:       color-mix(in srgb, var(--hanji) 40%, var(--ink-3));
  --line-field-hover: color-mix(in srgb, var(--gold) 55%, var(--line-field));

  --dur-press: 90ms;    /* 누름 — 복귀보다 빨라야 촉감이 정확해진다 */
  --dur-state: 160ms;   /* 색·보더 상태 전환 */
}

/* ---------- 2. @font-face (셀프호스팅, @import 금지) ---------- */
@font-face {
  font-family: 'Gowun Batang';
  src: url('../fonts/GowunBatang-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gowun Batang';
  src: url('../fonts/GowunBatang-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Song Myung';
  src: url('../fonts/SongMyung-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard Variable';
  src: url('../fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 3. 리셋 & 베이스 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--hanji);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--hanji);
}

/* ---------- 4. 접근성: 스킵링크·포커스 ---------- */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100%;
  z-index: 200;
  padding: var(--space-1) var(--space-2);
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus {
  top: 0;
  text-decoration: none;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 스크린리더 전용 — 시각적으로 숨기되 접근성 트리에는 유지 (비교표 캡션 등, D8) */
.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;
}

/* ---------- 5. 레이아웃 공통 ---------- */
.container {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
  min-width: 0; /* .result 그리드 아이템일 때 min-content 바닥을 없애 트랙(뷰포트)까지 축소 (D12-b) */
}

.section { padding-block: var(--space-6); }

/* 섹션 구분 — 금 1px 세선 + 세로 아이브로 */
.section + .section { border-top: var(--line-gold); }

.section-head {
  display: flex;
  align-items: center; /* 가로 제목+설명을 세로쓰기 아이브로의 세로 중앙에 정렬 (D13-a) */
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* 세로쓰기 아이브로 — 이 사이트의 구조 장치 */
.eyebrow {
  writing-mode: vertical-rl;
  font-family: var(--font-hanja);
  font-size: var(--fs-caption);
  letter-spacing: 0.35em;
  color: var(--gold);
  border-left: var(--line-gold);
  padding-left: var(--space-2);
  min-height: 8em;
  width: var(--rail); /* 레일 폭 고정 → 제목 시작선이 --rail-inset과 정확히 일치 (D15) */
  flex: none;
  user-select: none;
}

/* 섹션 본문 블록: 제목과 같은 세로선(아이브로 레일 안쪽)에서 시작 (D15).
   .section-body는 블록 간 수직 리듬도 함께 담당하고, minmax(0,1fr)로 자식이
   컨테이너 밖으로 넓어지지 못하게 유지(D12 컨테인먼트 보존). */
.section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-left: var(--rail-inset);
}
.section-inset { margin-left: var(--rail-inset); }

.section-title { font-size: var(--fs-section); }
.section-desc {
  margin-top: var(--space-1);
  color: var(--hanji-dim);
  max-width: 44em;
}

/* 스크롤 리빌 — opacity+8px, 0.5s, 1회 (JS가 .is-revealed 부여) */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- 6. 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.5em;
  border-radius: var(--radius);
  font-size: 1.125rem;      /* CTA 대형 텍스트 기준 (SPEC 2.1) */
  font-weight: 600;
  line-height: 1.4;
  transition:
    transform    var(--dur-press) var(--ease-out),
    background   var(--dur-state) var(--ease-out),
    box-shadow   var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    opacity      var(--dur-state) var(--ease-out);  /* 음력 선택 시 뚝 꺼지던 것 해소 */
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
/* 기존 translateY(0)은 hover 기준점 복귀일 뿐 — 키보드 Space/Enter로 누르면
   아무 변화가 없었다. +1px 하강 + [C]의 그림자 붕괴로 "도장이 찍힌다". */
.btn:active { transform: translateY(1px); transition-duration: var(--dur-press); }

/* 주사색 도장풍 CTA */
.btn--cinnabar {
  background: var(--cinnabar);
  color: var(--hanji);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cinnabar) 60%, black);
}
/* 기존 hover는 하드 오프셋(0 2px 0)을 버리고 0 4px 14px 컬러 헤일로로
   재질을 갈아탔다 — 낙관 도장이 조명이 되는 셈이고 SPEC 2.4(네온 금지) 위반.
   같은 언어 안에서 턱만 2px→3px 자라게 한다.
   :not([disabled]) 가드 — ui.js가 disabled를 걸어도 hover하면
   배경이 밝아지던 거짓 피드백 제거 (input-guard 게이트 ②가 밟는 경로). */
.btn--cinnabar:hover:not([disabled]):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--cinnabar) 88%, white);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cinnabar) 60%, black);
}
.btn--cinnabar:active:not([disabled]):not([aria-disabled='true']) {
  box-shadow: 0 0 0 color-mix(in srgb, var(--cinnabar) 60%, black);
}
.btn--cinnabar[disabled]:hover,
.btn--cinnabar[aria-disabled='true']:hover {
  background: var(--cinnabar);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cinnabar) 60%, black);
}

.btn--ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn--ghost:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }

.btn--sm { font-size: 1rem; padding: 0.5em 1em; }
.btn--block { width: 100%; min-height: var(--control-h-lg); }  /* 전체폭 + 52px 고정 */

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ---------- 7. 네비게이션 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--line-gold);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--hanji);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.nav__logo:hover { text-decoration: none; color: var(--gold); }
.nav__logo svg { width: 2.2rem; height: 2.2rem; flex: none; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}
.nav__menu a {
  color: var(--hanji);
  font-weight: 500;
  padding: 0.25em 0.1em;
  border-bottom: 2px solid transparent;
}
.nav__menu a:hover { color: var(--gold); text-decoration: none; }
.nav__menu a[aria-current="page"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* 메뉴 리스트 안 CTA는 데스크톱에서 숨김(우측 .nav__cta 하나만 노출). 햄버거 메뉴에서만 표시 (D11) */
.nav__menu-cta { display: none; }

.nav__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink-3);
  color: var(--hanji);
  font-size: 1.25rem;
  line-height: 1;
}

/* ---------- 8. 히어로 (index) ---------- */
.hero {
  position: relative;
  min-height: min(85vh, 760px);
  display: flex;
  align-items: center;
  padding-block: var(--space-5);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* 어두운 스크림 — 좌측 텍스트 가독성 */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--ink) 94%, transparent) 30%,
    color-mix(in srgb, var(--ink) 62%, transparent) 60%,
    color-mix(in srgb, var(--ink) 28%, transparent) 100%
  );
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--space-4);
  /* 폭은 함께 지정된 .container 클래스가 관리한다(min(100% - 2.5rem, maxw) + 중앙정렬).
     이전에는 이 규칙의 전체폭 지정이 .container를 덮어써 히어로 텍스트가 좌측 끝(x=0)에
     붙었던 D1 결함 — 해당 폭 지정을 제거해 컨테이너 리듬으로 통일. */
}

.hero__hanja {
  writing-mode: vertical-rl;
  font-family: var(--font-hanja);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: 0.3em;
  color: var(--gold);
  border-left: var(--line-gold);
  padding-left: var(--space-2);
  margin-bottom: var(--space-2);
  user-select: none;
}

.hero__title {
  font-size: var(--fs-hero);
  letter-spacing: -0.01em;
}
.hero__title .accent { color: var(--gold); }

.hero__sub {
  margin-top: var(--space-2);
  color: var(--hanji-dim);
  font-size: var(--fs-sub);
  max-width: 34em;
}

.hero__cta { margin-top: var(--space-3); }

/* 나경(羅經) 시그니처 — 우측 배치 */
.hero__compass {
  justify-self: end;
  width: min(100%, 30rem);
  aspect-ratio: 1;
  position: relative;
}
.hero__compass svg { width: 100%; height: 100%; overflow: visible; }

.compass-ring--outer { animation: spin-cw 120s linear infinite; transform-origin: center; }
.compass-ring--mid   { animation: spin-ccw 90s linear infinite; transform-origin: center; }

@keyframes spin-cw  { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

/* ---------- 9. 신뢰 스트립 ---------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  text-align: center;
}
.trust-strip__item {
  padding: var(--space-2);
  border-inline-start: var(--line-gold);
}
.trust-strip__item:first-child { border-inline-start: 0; }
.trust-strip__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--gold);
}
.trust-strip__label { color: var(--hanji-dim); font-size: var(--fs-caption); }

/* ---------- 10. 카드 공통 ---------- */
.card {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.card:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.card__img {
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: var(--space-2);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
.card__title { font-size: var(--fs-sub); margin-bottom: var(--space-1); }
.card__text { color: var(--hanji-dim); font-size: var(--fs-caption); line-height: 1.7; }

/* 가로형 미디어 카드 (D5) — 이미지 카드 높이를 텍스트 카드와 맞춰 3카드 높이 균형 */
.card--media { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.card--media .card__img { width: 42%; flex: none; margin-bottom: 0; aspect-ratio: 4 / 3; }
.card--media .card__body { min-width: 0; }

/* 한지 텍스처 카드 (후기·요금제 티어) */
.card--hanji {
  background:
    linear-gradient(color-mix(in srgb, var(--ink-2) 88%, transparent), color-mix(in srgb, var(--ink-2) 88%, transparent)),
    url('../img/texture_hanji.png') center / 24rem repeat;
  position: relative;
}

/* ---------- 11. 오행 섹션 ---------- */
.element-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}
.element-card {
  text-align: center;
  padding: var(--space-2);
}
.element-card img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  border-radius: 50%;
  margin-inline: auto;
  margin-bottom: var(--space-1);
  border: 2px solid var(--ink-3);
}
.element-card__hanja {
  font-family: var(--font-hanja);
  font-size: 1.75rem;
  display: block;
}
.element-card__name { font-weight: 600; }
.element-card__desc { font-size: var(--fs-caption); color: var(--hanji-dim); }

/* 오방색 유틸 */
.el-wood  { color: var(--e-wood); }
.el-fire  { color: var(--e-fire); }
.el-earth { color: var(--e-earth); }
.el-metal { color: var(--e-metal); }
.el-water { color: var(--e-water); }

/* ---------- 12. 후기 ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* 낙관 도장 모서리 장식 — 인라인 SVG 스탬프 (#icon-seal 심볼 참조) */
.review-card__seal {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  width: 2.3rem;
  height: 2.3rem;
  color: var(--cinnabar);
  opacity: 0.75;
  transform: rotate(-6deg);
  user-select: none;
  pointer-events: none;
}
.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  flex: none;
}
.avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-3);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.review-card__name { font-weight: 600; }
.review-card__meta { font-size: var(--fs-caption); color: var(--hanji-dim); }
.review-card__body { color: var(--hanji); font-size: 0.95rem; }

/* ---------- 13. 요금제 ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}
.tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}
.tier--featured {
  border-color: var(--gold);
  transform: translateY(-0.5rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.tier__badge {
  position: absolute;
  top: -0.9em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 0.15em 0.9em;
  border-radius: 999px;
  white-space: nowrap;
}
.tier__name { font-size: var(--fs-sub); }
.tier__price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
}
.tier__price small { font-size: 0.9rem; font-weight: 400; color: var(--hanji-dim); }
.tier__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.4em;
  font-size: 0.95rem;
  color: var(--hanji-dim);
  flex: 1;
}
.tier__list li::before { content: '· '; color: var(--gold); font-weight: 700; }
.tier__btn { margin-top: var(--space-1); }

/* 비교 표 */
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 34rem;
}
.compare th, .compare td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--ink-3);
  text-align: center;
}
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th {
  font-family: var(--font-display);
  color: var(--gold);
  border-bottom: var(--line-gold);
}
.compare td { color: var(--hanji-dim); }
.compare td strong { color: var(--hanji); }

/* FAQ (details/summary) */
.faq { display: grid; gap: var(--space-1); max-width: 48rem; margin-inline: auto; }
.faq details {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-1) 0;
  list-style: none;
}
.faq summary::before { content: 'Q. '; color: var(--gold); }
.faq details[open] summary { border-bottom: 1px solid var(--ink-3); }
.faq details p { padding: var(--space-1) 0; color: var(--hanji-dim); }

/* ---------- 14. 모달 & 토스트 ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--ink-2);
  border: var(--line-gold);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-width: 30rem;
  width: 100%;
  box-shadow: var(--shadow-card);
}
.modal__title { font-size: var(--fs-sub); color: var(--gold); margin-bottom: var(--space-1); }
.modal__body { color: var(--hanji-dim); }
.modal__actions {
  margin-top: var(--space-2);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%) translateY(1rem);
  z-index: 160;
  background: var(--ink-3);
  color: var(--hanji);
  border: var(--line-gold);
  border-radius: var(--radius);
  padding: 0.7em 1.4em;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 15. 사주 입력 폼 ---------- */
/* 폼 전체를 하나의 패널 카드로 (그룹별 통짜 박스 4개 대신) — 내부는 소제목+필드 리듬 (D14-a) */
.saju-form {
  max-width: 40rem;
  /* 중앙정렬 해제 — 콘텐츠 축(.section-inset)에서 시작 (D15) */
  display: grid;
  gap: var(--space-3);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
/* fieldset 기본 보더 제거(legend가 테두리에 걸치지 않게), 시맨틱은 유지 */
.form-fieldset {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
/* legend를 박스 안쪽 블록 소제목으로 */
.form-fieldset legend {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
  font-size: 1.0625rem;
  padding: 0;
  margin-bottom: var(--space-2);
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
}
/* gap 0.35em(≈5.95px)은 4px 그리드에도 토큰계에도 안 걸리는 임의값이었다 */
.form-field { display: grid; gap: var(--space-1); flex: 1; min-width: 7.5rem; }
.form-field--narrow { flex: 0 1 auto; min-width: 5.5rem; }

/* 생년월일 3열(4:3:3)·시분 2열 균형 그리드 (D4) — 연 select 초광폭·좌측 쏠림 방지 */
.form-grid { display: grid; gap: var(--space-2); align-items: end; }
.form-grid--date { grid-template-columns: 4fr 3fr 3fr; }
.form-grid--time { grid-template-columns: 1fr 1fr; } /* 패널 폭 채워 시/분 균형·좌측 몰림 해소 (D14-a) */
.form-grid .form-field { min-width: 0; }
.form-field label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--hanji-dim);
}

select,
input[type='text'] {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;                 /* body 1.7 상속 차단 → 엔진별 높이 편차 제거 */
  color: var(--hanji);
  background: var(--ink);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-field);
  height: var(--control-h);         /* 48.4px → 44px, 알약·버튼과 동일 그리드 */
  padding: 0 var(--control-pad-x);
  width: 100%;
  transition:
    border-color var(--dur-state) var(--ease-out),
    background   var(--dur-state) var(--ease-out),
    color        var(--dur-state) var(--ease-out);
}

/* hover(5.94:1) < focus(8.31:1) — 기존엔 hover가 이미 100% 금색이라
   포커스가 더 올라갈 자리가 없었다(오히려 border는 ink-3로 되돌아갔다). */
select:hover:not(:disabled),
input[type='text']:hover { border-color: var(--line-field-hover); }

/* :focus-visible이 아니라 :focus — 마우스로 드롭다운을 연 동안에도
   트리거가 살아 있어야 한다. 특이도 (0,1,1)로 전역 :focus-visible(0,1,0)의
   border-radius:2px 스톰프를 되돌린다(포커스 순간 모서리가 8px→2px로 각지게
   튀던 실제 버그). 전역 outline 2px gold 링 자체는 그대로 — a11y 무손실. */
select:focus,
input[type='text']:focus {
  border-color: var(--gold);
  border-radius: var(--radius-field);
}

/* opacity .4는 경계선까지 지워 필드를 사라지게 하고, 별개 요소인
   ::after 화살표에는 상속되지 않아 불일치가 생긴다 → 명시 색으로 교체. */
select:disabled {
  opacity: 1;
  cursor: not-allowed;
  background:   color-mix(in srgb, var(--ink-2) 60%, var(--ink));
  border-color: var(--ink-3);
  color:        color-mix(in srgb, var(--hanji-dim) 55%, var(--ink-2));
}

/* ★ SVG data URI를 쓰지 않는 이유: 독립 SVG는 네임스페이스 선언이 필수인데
   그 값이 절대 URL 문자열이라, CSS에 남으면 static-local-only 게이트의
   외부 URL grep에 그대로 걸린다. 따라서 border 2변 + rotate(45deg)로 그린다 —
   브랜드의 1px 금세선 언어와도 맞고 폰트·OS에 독립적이다.
   ★ @supports 게이팅: :has 미지원 엔진에서는 appearance:none 자체가 적용되지
   않아 네이티브 화살표가 유지된다 → "화살표 없는 셀렉트" 경로 원천 차단.
   ★ select는 대체요소라 ::after 불가 → .form-field를 기준 상자로 삼는다.
   전제: .form-field는 `label + select` 2형제이고 select가 마지막 자식이다.
   향후 .form-field 안쪽에 select보다 뒤에 오는 요소(예: 필드별 인라인 오류문)를
   추가하면 이 전제가 깨진다 — 그때는 오류문을 .form-fieldset 직계로 두거나
   .form-field를 감싸는 래퍼를 새로 만들 것. */
@supports selector(.form-field:has(select)) {
  select {
    -webkit-appearance: none;
    appearance: none;               /* OS 삼각 화살표 제거 */
    padding-right: var(--select-pad-r);
  }
  .form-field { position: relative; }
  .form-field:has(select)::after {
    content: '';
    position: absolute;
    right: var(--arrow-right);
    /* 0.4rem(6.4px) 정사각을 45도 돌리면 잉크가 상자 중심에서 아래로
       4.53px 뻗는다 → 잉크 중심을 select 세로 중앙에 맞추려 상자를 1px 올린다. */
    bottom: calc(var(--control-h) / 2 - 1px);
    width: 0.4rem;
    height: 0.4rem;
    border-right:  1.5px solid var(--hanji-dim);
    border-bottom: 1.5px solid var(--hanji-dim);
    transform: rotate(45deg);
    pointer-events: none;           /* 클릭이 select로 통과 — 네이티브 동작 보존 */
    transition: border-color var(--dur-state) var(--ease-out);
  }
  /* 회전(180deg)은 일부러 넣지 않는다 — select는 닫힌 뒤에도 :focus가 남아
     회전이 풀리지 않으면 "열려 있다"는 거짓 신호가 된다. */
  .form-field:has(select:hover:not(:disabled))::after { border-color: var(--hanji); }
  .form-field:has(select:focus)::after                { border-color: var(--gold); }
  .form-field:has(select:disabled)::after {
    border-color: color-mix(in srgb, var(--hanji-dim) 45%, var(--ink-2));
  }
  .form-field:has(select:disabled) label {
    color: color-mix(in srgb, var(--hanji-dim) 70%, var(--ink-2));  /* 4.59:1 유지 */
  }
}

/* 강제 색상 모드(Windows 고대비)에서 컨트롤 경계·화살표 보존 */
@media (forced-colors: active) {
  select, input[type='text']     { border-color: ButtonBorder; }
  .form-field:has(select)::after { border-color: ButtonText; }
}

/* 세그먼트(알약) 라디오 토글 (D14-a): label이 pill, 2등분. 네이티브 input은 유지하되
   시각적으로만 숨김(포커스 가능·label 연결·키보드 조작·:focus-visible 링 — a11y 보존). */
.radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  max-width: 24rem;
}
.radio-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);       /* 54.7px → 44px */
  padding: 0 1em;                     /* 세로 패딩 제거 — min-height가 이기게 */
  border: 1px solid var(--line-field);
  border-radius: var(--radius-field); /* 10px → 8px, select와 아크 통일 */
  background: var(--ink);
  color: var(--hanji-dim);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--dur-state) var(--ease-out),
    background   var(--dur-state) var(--ease-out),
    color        var(--dur-state) var(--ease-out);
}
/* 네이티브 라디오를 pill 전체에 투명하게 깔아 클릭·포커스 대상 유지 */
.radio-item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* 반투명 혼합 대신 예측 가능한 단색 */
.radio-item:hover { border-color: var(--line-field-hover); color: var(--hanji); }
.radio-item:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, var(--ink));
  color: var(--hanji);
}
.radio-item:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* .radio-item input은 opacity:0·inset:0이라 포커스는 가능한데, 전역
   :focus-visible 링(border-radius 2px)이 그 투명 상자에도 그려져 알약 링과
   1px 어긋난 금색 이중 링이 된다. 인풋 쪽만 끈다 — 알약 링이 남으므로
   키보드 가시성 손실 없이 형상만 맞는다. */
.radio-item input:focus-visible { outline: none; }

.checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  cursor: pointer;
  font-weight: 500;
  margin-top: var(--space-1);
  min-height: var(--control-h);       /* 약 29px → 44px 터치 타깃 */
}
.checkbox-item input {
  appearance: none;
  flex: none;                         /* 390px 줄바꿈 시 상자 찌그러짐 방지 */
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--hanji-dim);
  border-radius: 4px;
  display: inline-grid;
  place-content: center;
  transition:
    background   var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out);
}
.checkbox-item:hover input:not(:checked) { border-color: var(--gold); }
/* 유니코드 '✓' 제거 — 폰트 폴백마다 두께·베어링·베이스라인이 달라
   "삐뚤어 보이는" 전형적 원인이고, 유니코드 아이콘 금지 규약에도 어긋난다.
   border 회전은 두께 2px·크기 5.44×9.92px를 수치로 고정한다. */
.checkbox-item input::before {
  content: '';
  width: 0.34rem;
  height: 0.62rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  opacity: 0;                         /* scale 단독의 "뽕" 튀어나오는 인상 제거 */
  transition:
    transform var(--dur-press) var(--ease-out),
    opacity   var(--dur-press) linear;
}
.checkbox-item input:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.checkbox-item input:checked::before {
  transform: translateY(-1px) rotate(45deg) scale(1);
  opacity: 1;
}

.form-note { font-size: var(--fs-caption); color: var(--hanji-dim); }
.form-hint { font-size: var(--fs-caption); color: var(--gold); }
.form-privacy {
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
  text-align: center; /* 제출 버튼 바로 위 중앙 정렬로 리듬 맞춤 (D14-a) */
}

/* 전역 `* { margin: 0 }` 탓에 오류·안내 텍스트가 필드에 0px 밀착해 있었다.
   8 / 16 / 24 = 1:2:3 사다리로 근접성만으로 그룹 구조가 읽히게 한다. */
.form-error,
.form-note,
.form-hint,
.lunar-block { margin-top: var(--space-1); }

/* .form-submit에 대응 CSS가 아예 없었다 — 되돌릴 수 없는 액션은 시각적으로
   격리되어야 오조작이 준다. 구분선은 사이트 공용 어법(--line-gold)을 그대로. */
.form-submit {
  padding-top: var(--space-3);
  border-top: var(--line-gold);
}

.form-error {
  display: none;
  font-size: var(--fs-caption);
  color: var(--e-fire);
  font-weight: 600;
}
.form-error.is-visible { display: block; }
[aria-invalid='true'] { border-color: var(--e-fire) !important; }

.lunar-block {
  display: none;
  padding: var(--space-2);
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  color: var(--gold);
  font-size: 0.95rem;
}
.lunar-block.is-visible { display: block; }

/* ---------- 16. 결과: 사주판 ---------- */
/* grid-template-columns: minmax(0,1fr) — 내부 콘텐츠가 트랙(뷰포트) 밖으로 문서를
   밀어내지 못하게 하는 안전망 (모바일 결과 가로 오버플로 방지, D12). 데스크톱은 동일. */
.result { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); overflow-x: clip; }
/* [hidden]은 UA display:none 이라 author의 display:grid에 짐 → 명시적으로 눌러 숨김 유지 */
.result[hidden] { display: none; }

/* 저장 버튼은 결과 그리드 gap(space-4) 위에 여백을 더 확보 — 탭 패널과 겹치지 않게 (D3) */
.result__save { margin-top: var(--space-2); }

.pillar-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 좌→우 [년][월][일][시] */
  gap: var(--space-2);
}
.pillar {
  background: var(--ink-2);
  border-radius: var(--radius);
  border: 1px solid var(--ink-3);
  text-align: center;
  padding: var(--space-2) var(--space-1);
  position: relative;
}
/* 테두리·글로우는 천간 오행색 기준 */
.pillar[data-element='wood']  { border-color: var(--e-wood);  box-shadow: 0 0 18px color-mix(in srgb, var(--e-wood) 25%, transparent); }
.pillar[data-element='fire']  { border-color: var(--e-fire);  box-shadow: 0 0 18px color-mix(in srgb, var(--e-fire) 25%, transparent); }
.pillar[data-element='earth'] { border-color: var(--e-earth); box-shadow: 0 0 18px color-mix(in srgb, var(--e-earth) 25%, transparent); }
.pillar[data-element='metal'] { border-color: var(--e-metal); box-shadow: 0 0 18px color-mix(in srgb, var(--e-metal) 25%, transparent); }
.pillar[data-element='water'] { border-color: var(--e-water); box-shadow: 0 0 18px color-mix(in srgb, var(--e-water) 25%, transparent); }

.pillar__label {
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
  letter-spacing: 0.2em;
  margin-bottom: 0.35em;
}
.pillar__char {
  font-family: var(--font-hanja);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.2;
}
/* 천간 위 / 지지 아래 세로 배치 (각자 오행색은 el-* 클래스가 부여) */
.pillar__stem, .pillar__branch { display: block; }
.pillar__char small {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--hanji-dim);
}
.pillar__ten {
  margin-top: 0.4em;
  font-size: var(--fs-caption);
  color: var(--gold);
  border-top: 1px solid var(--ink-3);
  padding-top: 0.4em;
}
.pillar--unknown .pillar__char { color: var(--hanji-dim); }

/* 낙관 스탬프 — 결과 등장 시 1회 */
.seal-stamp {
  position: absolute;
  right: -0.8rem;
  top: -0.8rem;
  z-index: 5;
  width: 4rem;
  height: 4rem;
  transform: rotate(8deg);
  pointer-events: none;
}
.seal-stamp.is-stamping {
  animation: stamp 0.4s var(--ease-out) 1 both;
}
@keyframes stamp {
  0%   { transform: scale(1.6) rotate(18deg); opacity: 0; }
  60%  { transform: scale(0.94) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(8deg); opacity: 1; }
}

/* 보정 내역 라인 */
.correction-line {
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
  display: grid;
  gap: 0.25em;
}
.correction-line .boundary-warning { color: var(--e-earth); font-weight: 600; }

/* 일간 요약 */
.daymaster {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.daymaster__char {
  font-family: var(--font-hanja);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 1;
  flex: none;
}
.daymaster__body { max-width: 44em; }
.daymaster__name { font-family: var(--font-display); font-size: var(--fs-sub); font-weight: 700; margin-bottom: 0.3em; }
.daymaster__text { color: var(--hanji-dim); }

/* ---------- 17. 오행 오각형 차트 ---------- */
.elements-panel {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}
.elements-chart { width: 100%; max-width: 24rem; margin-inline: auto; }
.elements-chart svg { width: 100%; height: auto; }
.elements-comment { color: var(--hanji-dim); max-width: 44em; }
.elements-comment strong { color: var(--hanji); }

/* ---------- 18. 대운 타임라인 ---------- */
/* 대운 트랙(min-width 44rem)은 이 스크롤 컨테이너 안에서만 가로 스크롤되어야 한다.
   min-width:0 + max-width:100%로 부모 밖으로 트랙이 새 문서를 밀지 않게 확실히 가둔다 (D12-b). */
.daeun-scroll { overflow-x: auto; min-width: 0; max-width: 100%; padding-bottom: var(--space-1); }
.daeun-track {
  display: grid;
  grid-template-columns: repeat(10, minmax(6.5rem, 1fr));
  gap: var(--space-1);
  min-width: 44rem;
}
.daeun-cell {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  text-align: center;
  padding: var(--space-1);
  transition: border-color 0.15s var(--ease-out);
}
.daeun-cell__age { font-size: var(--fs-caption); color: var(--hanji-dim); }
.daeun-cell__ganji {
  font-family: var(--font-hanja);
  font-size: 1.5rem;
  line-height: 1.3;
}
.daeun-cell.is-current {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, var(--ink-2));
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 25%, transparent);
}
.daeun-cell.is-current .daeun-cell__age { color: var(--gold); font-weight: 700; }
.daeun-direction { font-size: var(--fs-caption); color: var(--hanji-dim); margin-top: var(--space-1); }

/* ---------- 19. 풀이 탭 ---------- */
.tabs { display: grid; gap: var(--space-2); }
.tab-list {
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--line-gold);
  flex-wrap: wrap;
}
.tab {
  padding: 0.6em 1.2em;
  font-weight: 600;
  color: var(--hanji-dim);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.tab:hover { color: var(--hanji); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.tab[aria-selected='true'] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.tab-panel {
  max-width: 44em;
  line-height: 1.7;
  color: var(--hanji);
}
.tab-panel[hidden] { display: none; }

/* ---------- 20. 기록 저장 ---------- */
.saved-list { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  transition: border-color 0.15s var(--ease-out);
}
.saved-item:hover { border-color: var(--gold); }
.saved-item__main {
  flex: 1;
  text-align: left;
  color: var(--hanji);
  font-size: 0.95rem;
  padding: 0.4em 0;
  display: grid;
  gap: 0.15em;
}
.saved-item__ganji { display: block; font-weight: 600; }
.saved-item__meta { font-size: var(--fs-caption); color: var(--hanji-dim); }
.saved-item__remove {
  color: var(--hanji-dim);
  font-size: var(--fs-caption);
  padding: 0.4em 0.6em;
  border-radius: 4px;
}
.saved-item__remove:hover { color: var(--e-fire); background: color-mix(in srgb, var(--e-fire) 12%, transparent); }

.corrupt-banner {
  background: color-mix(in srgb, var(--e-earth) 14%, var(--ink-2));
  border: 1px solid var(--e-earth);
  border-radius: var(--radius);
  color: var(--e-earth);
  padding: var(--space-1) var(--space-2);
  font-size: 0.95rem;
  margin-top: var(--space-2);
}
.corrupt-banner[hidden] { display: none; }

/* ---------- 21. CTA 밴드 & 푸터 ---------- */
.cta-band {
  text-align: center;
  padding-block: var(--space-5);
}
.cta-band__title { font-size: var(--fs-section); margin-bottom: var(--space-2); }
.cta-band__text { color: var(--hanji-dim); margin-bottom: var(--space-3); max-width: 34em; margin-inline: auto; }

.site-footer {
  border-top: var(--line-gold);
  padding-block: var(--space-4);
  background: color-mix(in srgb, var(--ink-2) 55%, var(--ink));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-3);
}
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--gold); }
.footer-text { color: var(--hanji-dim); font-size: var(--fs-caption); margin-top: var(--space-1); max-width: 30em; }
.footer-menu { list-style: none; padding: 0; display: grid; gap: 0.4em; }
.footer-menu a { color: var(--hanji-dim); font-size: 0.95rem; }
.footer-menu a:hover { color: var(--gold); }
.footer-heading { font-size: var(--fs-caption); color: var(--hanji-dim); letter-spacing: 0.2em; margin-bottom: var(--space-1); }
.footer-demo {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--ink-3);
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
  text-align: center;
}

/* ---------- 22. about 페이지 ---------- */
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}
.about-hero img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* about 히어로 텍스트 컬럼: 세로 아이브로 왼쪽 + (제목+본문) 오른쪽, 세로 중앙 정렬
   (.section-head와 동일 리듬). 아이브로 우측 공백 제거 (D14-b — D13-b 스택 여백 방식을 대체) */
.about-hero__text { display: flex; align-items: center; gap: var(--space-3); }
.prose { max-width: 44em; line-height: 1.8; color: var(--hanji); display: grid; gap: var(--space-2); }
.prose h3 { color: var(--gold); margin-top: var(--space-1); }
.prose .dim { color: var(--hanji-dim); }
.policy-list { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.policy-list li {
  border-left: 3px solid var(--gold);
  padding-left: var(--space-2);
  color: var(--hanji-dim);
}
.policy-list strong { color: var(--hanji); }

/* ---------- 24. 입력 사이드레일 (D16) ---------- */
.form-layout { display: grid; gap: var(--space-4); align-items: start; }

.form-rail { display: grid; gap: var(--space-3); }
.form-rail [hidden] { display: none; }   /* .result[hidden] 선례와 동일 이유 — hidden 토글 회귀 차단 */

.rail-block__title { font-family: var(--font-display); font-size: var(--fs-sub); color: var(--gold); }
.rail-block__lead  { margin-top: var(--space-1); color: var(--hanji-dim); font-size: 0.95rem; }
.policy-list--rail { margin-top: var(--space-2); }
.policy-list--rail li { font-size: 0.95rem; }
.rail-block__note  { margin-top: var(--space-2); color: var(--hanji-dim); font-size: var(--fs-caption); }
.rail-link { display: inline-block; margin-top: var(--space-2); color: var(--gold); font-size: 0.95rem; font-weight: 600; }
.rail-link:hover { text-decoration: underline; }

/* 레일 안의 #records — id·내부 구조 보존, 스킨만 조정 */
.form-rail .records { padding-block: 0; border-top: var(--line-gold); padding-top: var(--space-3); }
.form-rail .records .container    { width: 100%; }        /* .container의 min(100%-2.5rem,1200px) 무력화 */
.form-rail .records .section-head { display: block; margin-bottom: var(--space-2); }
.form-rail .records .eyebrow      { display: none; }      /* 세로 아이브로 8em은 레일에 과하다 (aria-hidden이라 a11y 중립) */
.form-rail .records .section-title{ font-size: var(--fs-sub); }
.form-rail .records .section-desc { font-size: var(--fs-caption); }
.form-rail .records .section-body { margin-left: 0; gap: var(--space-2); }

@media (min-width: 1024px) {
  .form-layout { grid-template-columns: minmax(0, 40rem) minmax(20rem, 1fr); }
}

/* ---------- 23. 반응형 ---------- */

/* 768 이하: 태블릿 */
@media (max-width: 768px) {
  .hero { min-height: auto; padding-block: var(--space-5); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  /* 나경은 히어로 하단 축소 배치 */
  .hero__compass { justify-self: center; width: min(72vw, 20rem); order: 2; }

  .card-grid, .review-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .element-strip { grid-template-columns: repeat(5, 1fr); gap: var(--space-1); }
  .tier--featured { transform: none; }
  .elements-panel { grid-template-columns: 1fr; }
  .about-hero { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* 모바일 네비 — 햄버거 */
  .nav__toggle { display: inline-grid; place-content: center; }
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2);
    border-bottom: var(--line-gold);
    padding: var(--space-1) var(--space-2) var(--space-2);
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu li { width: 100%; }
  .nav__menu a { display: block; padding: 0.75em 0.5em; }
  .nav__cta { display: none; }
  .nav__menu-cta { display: block; } /* 햄버거 메뉴 안에서만 CTA 노출 (D11) */
  .nav__menu .btn { margin-top: var(--space-1); }
}

/* 390 이하: 모바일 — 가로 스크롤 금지 */
/* 480 이하: 사주판 2×2(년월 / 일시). 트랙을 minmax(0,1fr)로 축소 허용 + 기둥 min-width:0 +
   한자 폰트 clamp로 결과 렌더 후 문서가 가로로 밀리지 않게 수납. 오행색·십성·時미상·낙관 유지 (D12) */
@media (max-width: 480px) {
  .pillar-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { min-width: 0; }
  .pillar__char { font-size: clamp(1.7rem, 8.5vw, 2.6rem); }
  /* 낙관 도장: 모바일에선 축소 + 보드 안쪽 배치로 뷰포트 오른쪽 돌출(가로 오버플로) 방지.
     세로 오버행(top)만 남겨 연출 유지, 애니메이션 scale(1.6)에도 뷰포트 안 (D12-c) */
  .seal-stamp { right: 0.4rem; top: -0.5rem; width: 2.8rem; height: 2.8rem; }
  /* 좁은 화면에서는 레일 인셋을 풀어 본문이 컨테이너 폭을 온전히 쓰게 (D15) */
  .section-body, .section-inset { margin-left: 0; }

  /* 390px 실측: 컨테이너 350 − 패딩 48 = 302, 4:3:3에서 갭 32 제외 →
     108 / 81 / 81px. 축소 인셋 기준 "1993년" 약 51.6px < 여유 67.6px,
     "12월" 약 33.8px < 여유 40.6px 로 옵션 텍스트가 잘리지 않는다.
     기존 40px 패딩을 유지하면 월·일 칸에서 잘린다. (D17) */
  .saju-form {
    padding: var(--space-3);
    --control-pad-x: 0.7rem;
    --select-pad-r:  1.7rem;
    --arrow-right:   0.8rem;
  }
}

@media (max-width: 390px) {
  .card-grid, .review-grid, .pricing-grid { grid-template-columns: 1fr; }
  .element-strip { grid-template-columns: repeat(3, 1fr); }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip__item { border-inline-start: 0; border-top: var(--line-gold); }
  .trust-strip__item:first-child { border-top: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-field { min-width: 100%; }
  .eyebrow { min-height: 6em; }
}

/* ---------- 24. prefers-reduced-motion — 전 애니메이션 무효화 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .compass-ring--outer, .compass-ring--mid { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .seal-stamp.is-stamping { animation: none; opacity: 1; }
}