/* ============================================================
   천명(天命) — 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);
  /* 세로쓰기 아이브로는 글자 수만큼 세로로 길어지는데(최대 214px 관측) 제목+설명
     블록은 76px에 그쳐, 아이브로 옆이 비어 보였다. 제목·설명을 키워 그 높이를 메운다.
     (전 섹션 22곳 실측: 평균 여백 49px → 11px) */
  --fs-section: clamp(1.5rem, 3.4vw, 2.25rem);
  --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);
  /* 0.35em은 긴 아이브로를 200px 넘게 늘여 제목 블록과의 높이 차를 키웠다.
     0.24em으로 좁혀도 세로쓰기 특유의 성근 리듬은 유지된다. */
  letter-spacing: 0.24em;
  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);
  /* 44em → 34em: 한 줄로 길게 흐르던 설명이 두 줄로 앉으면서 아이브로 높이를 함께 메운다 */
  max-width: 34em;
  font-size: 1.1875rem;
  line-height: 1.65;
}

/* 스크롤 리빌 — 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'],
input[type='email'],
input[type='password'] {
  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,
input[type='email']:hover,
input[type='password']: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,
input[type='email']:focus,
input[type='password']: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'],
  input[type='email'], input[type='password'] { 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; }
}

/* ---------- 25. 자료실(almanac) · 육십갑자(sexagenary) ---------- */
.almanac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--space-3);
}
.almanac-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.almanac-card { display: grid; gap: var(--space-2); align-content: start; }
.almanac-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.almanac-card__img {
  width: 4rem;
  height: 4rem;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
}
.almanac-card__hanja {
  font-family: var(--font-hanja);
  font-size: 2.25rem;
  line-height: 1;
  flex: none;
}
.almanac-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  color: var(--hanji);
}
.almanac-card__meta { font-size: var(--fs-caption); color: var(--gold); }
.almanac-card__text { color: var(--hanji-dim); line-height: 1.8; }

.almanac-card__body { display: grid; gap: var(--space-1); margin: 0; }
.almanac-card__body dt {
  font-size: var(--fs-caption);
  color: var(--gold);
  font-family: var(--font-display);
}
.almanac-card__body dd {
  margin: 0 0 var(--space-1);
  color: var(--hanji-dim);
  line-height: 1.75;
}
.almanac-card__body dd:last-child { margin-bottom: 0; }

/* 페이지 안 섹션 바로가기 */
.almanac-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.almanac-nav a {
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 0.4em 0.9em;
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.almanac-nav a:hover,
.almanac-nav a:focus-visible { border-color: var(--gold); color: var(--gold); }

/* 육십갑자 표 */
.sexagenary__hanja { font-family: var(--font-hanja); font-size: 1.25rem; letter-spacing: 0.1em; }
.compare tbody th { color: var(--hanji-dim); font-weight: 400; text-align: center; }

@media (max-width: 720px) {
  .almanac-grid, .almanac-grid--compact { grid-template-columns: 1fr; }
}

/* ---------- 26. 운세(fortune) ---------- */
.f-form { max-width: 44rem; }
.f-records-list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.f-record {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  color: var(--hanji-dim);
  padding: 0.5em 0.9em;
  font-size: var(--fs-caption);
  cursor: pointer;
  min-height: var(--control-h);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.f-record:hover, .f-record:focus-visible { border-color: var(--gold); color: var(--gold); }

/* 결과 머리 — 간지 카드 */
.f-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.f-ganji {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.1em var(--space-1);
  background: var(--ink-2);
  border: var(--line-gold);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  flex: none;
}
.f-ganji__char { font-family: var(--font-hanja); font-size: 2.5rem; line-height: 1.1; }
.f-ganji__kr {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
}
.f-head__unit { font-family: var(--font-display); font-size: var(--fs-sub); color: var(--gold); }
.f-head__range { color: var(--hanji-dim); font-size: var(--fs-caption); margin-top: 0.2em; }

.f-natal { color: var(--hanji-dim); margin-top: var(--space-1); }
.f-natal strong { color: var(--hanji); }

.f-summary {
  line-height: 1.85;
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--ink-3);
}

/* 판정 요약 4칸 */
.f-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.f-facts dt { font-size: var(--fs-caption); color: var(--gold); font-family: var(--font-display); }
.f-facts dd { margin: 0.25em 0 0; color: var(--hanji); }

.f-block { margin-top: var(--space-3); }
.f-block h4 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.0625rem;
  margin-bottom: var(--space-1);
}
.f-block p { color: var(--hanji-dim); line-height: 1.85; }
.f-block p + p { margin-top: var(--space-1); }
.f-block--caution { border-left: 3px solid var(--cinnabar); padding-left: var(--space-2); }
.f-disclaimer { font-size: var(--fs-caption); }

.f-rel { color: var(--hanji); }
.f-rel--chung { color: var(--e-fire); }
.f-rel--stemHap, .f-rel--yukhap, .f-rel--samhap { color: var(--e-wood); }

.f-advice {
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: var(--ink-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--hanji);
}
.f-basis { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--hanji-dim); }

/* 주간 표 */
.f-week__hanja { font-family: var(--font-hanja); color: var(--hanji-dim); }
.f-week__row--strong td, .f-week__row--strong th { color: var(--hanji); }
.f-week__row--weak td, .f-week__row--weak th { color: var(--hanji-dim); }
.f-week__row.is-today { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.f-today {
  font-size: 0.75rem;
  color: var(--ink);
  background: var(--gold);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  vertical-align: middle;
}

@media (max-width: 720px) {
  .f-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* 탭 컨테이너 안전망 — grid 자식(min-width:auto)이 min-width 가진 표를 품으면
   트랙이 뷰포트 밖으로 늘어난다. .result에 쓰던 minmax(0,1fr) 어법을 그대로 적용해
   .compare-wrap의 overflow-x:auto가 제 역할을 하게 한다 (D12와 동일한 처방). */
.tabs { grid-template-columns: minmax(0, 1fr); }

/* ---------- 27. 운세 우측 레일 ---------- */
/* 네 시점 한눈에 */
.f-glance { list-style: none; padding: 0; display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.f-glance__item {
  width: 100%;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  grid-template-areas: 'label main' 'label sub';
  align-items: center;
  gap: 0 var(--space-2);
  text-align: left;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: var(--space-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out);
}
.f-glance__item:hover, .f-glance__item:focus-visible { border-color: var(--gold); }
.f-glance__label {
  grid-area: label;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 0.95rem;
}
.f-glance__main {
  grid-area: main;
  font-family: var(--font-hanja);
  font-size: 1.35rem;
  color: var(--hanji);
  line-height: 1.3;
}
.f-glance__sub { grid-area: sub; font-size: var(--fs-caption); color: var(--hanji-dim); }

/* 내 사주 — 오행 분포 막대 */
.f-mine { margin-top: var(--space-2); color: var(--hanji-dim); }
.f-mine strong { color: var(--hanji); }

.f-elements { list-style: none; padding: 0; display: grid; gap: 0.4em; margin-top: var(--space-2); }
.f-elements li { display: grid; grid-template-columns: 1.5rem 1fr 1.5rem; align-items: center; gap: var(--space-1); }
.f-elements__name { font-family: var(--font-hanja); font-size: 1.05rem; text-align: center; }
.f-elements__bar { height: 0.5rem; background: var(--ink-3); border-radius: 999px; overflow: hidden; }
.f-elements__fill { display: block; height: 100%; border-radius: 999px; }
.f-elements__count { font-size: var(--fs-caption); color: var(--hanji-dim); text-align: right; }

.el-bg-wood  { background: var(--e-wood); }
.el-bg-fire  { background: var(--e-fire); }
.el-bg-earth { background: var(--e-earth); }
.el-bg-metal { background: var(--e-metal); }
.el-bg-water { background: var(--e-water); }

/* 운세 결과 탭은 레일과 나란히 서므로 본문 최대폭 제한을 풀어 좌우 균형을 맞춘다 */
#fortune-tabs .tab-panel { max-width: none; }
/* 기준 섹션의 prose도 레일과 2단을 이루므로 동일 */
#fortune-basis-title ~ * .prose, .form-layout > .prose { max-width: none; }

/* ---------- 28. 후기 작성 ---------- */
/* textarea는 전역 input 규칙(select/input[type=text])이 안 잡아 별도 지정 —
   높이만 auto·min-height로 두고 나머지 색·경계·포커스는 필드 언어를 그대로 따른다 */
textarea {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--hanji);
  background: var(--ink);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-field);
  padding: var(--space-2) var(--control-pad-x);
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  transition:
    border-color var(--dur-state) var(--ease-out),
    background   var(--dur-state) var(--ease-out),
    color        var(--dur-state) var(--ease-out);
}
textarea:hover { border-color: var(--line-field-hover); }
textarea:focus { border-color: var(--gold); outline: none; }
textarea::placeholder { color: color-mix(in srgb, var(--hanji-dim) 70%, var(--ink)); }

.rv-req { color: var(--cinnabar); }
.rv-optional {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
  margin-left: 0.4em;
}
/* legend 안에 놓인 textarea 레이블은 legend 스타일(금색·굵게)을 이어받게 둔다 */
.form-fieldset legend label { cursor: pointer; color: inherit; font: inherit; }

.rv-count { margin-top: var(--space-1); font-size: var(--fs-caption); color: var(--hanji-dim); text-align: right; }

/* 별점 입력 — 역순 DOM(5→1) + row-reverse로 왼쪽부터 1점, 뒤 형제 채색 어법 */
.rv-rate {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.15em;
}
.rv-rate input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rv-rate label {
  color: var(--ink-3);
  font-size: 2.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1em 0.05em;
  transition: color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.rv-rate label:hover,
.rv-rate label:hover ~ label,
.rv-rate input:checked ~ label { color: var(--gold); }
.rv-rate label:hover { transform: scale(1.12); }
.rv-rate input:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 저장 완료 안내 */
.rv-done {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--e-wood) 14%, var(--ink-2));
  border-left: 3px solid var(--e-wood);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--hanji);
}
.rv-done[hidden] { display: none; }

.rv-empty {
  color: var(--hanji-dim);
  padding: var(--space-3);
  border: 1px dashed var(--ink-3);
  border-radius: var(--radius);
  text-align: center;
}
.rv-empty[hidden] { display: none; }

/* 후기 카드 별점 표시 (reviews-ui.js가 그린다) */
.rv-stars {
  color: var(--ink-3);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
.rv-stars__on { color: var(--gold); }

/* 후기 카드 삭제 버튼 */
.rv-remove {
  align-self: flex-start;
  margin-top: auto;
  background: none;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  color: var(--hanji-dim);
  font-family: inherit;
  font-size: var(--fs-caption);
  padding: 0.4em 0.9em;
  min-height: 2.25rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.rv-remove:hover, .rv-remove:focus-visible { border-color: var(--cinnabar); color: var(--cinnabar); }

/* 홈 미리보기 빈 상태 */
.rv-home-empty {
  color: var(--hanji-dim);
  padding: var(--space-3);
  border: 1px dashed var(--ink-3);
  border-radius: var(--radius);
  text-align: center;
}
.rv-home-empty[hidden] { display: none; }
.rv-more { margin-top: var(--space-3); text-align: center; }

/* hidden 속성은 어떤 표시 규칙보다 우선해야 한다 — .saju-form 등의 display 지정이
   UA 스타일시트의 [hidden]을 덮어, 비로그인 상태에서 후기 작성 폼이 게이트 안내와
   함께 노출되던 버그의 수정. (JS는 전부 el.hidden 토글 방식이라 부작용 없음) */
[hidden] { display: none !important; }

/* ---------- 29. 계정 UI (login.html · reviews.html · auth.js) ----------
   밑줄 탭은 이 사이트의 어법이 아니었다 — 사주 폼의 양력/음력 알약 세그먼트
   (.radio-item)와 같은 형태로 통일한다. 상태 전달은 금 테두리 + 금 혼합 배경이
   맡고, 비텍스트 3:1은 gold 테두리 vs ink 배경 8.62:1로 충족한다(알약과 동일 근거).
   (이 사이트는 :root 팔레트 하나뿐인 단일 다크 테마 — 라이트 분기 없음) */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

/* 탭 아래 폼 리듬 — 필드 간 16px, 탭과 첫 필드 사이 24px */
#auth-card form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.auth-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 1em;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--hanji-dim);
  background: var(--ink);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-field);
  cursor: pointer;
  transition:
    color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    background var(--dur-state) var(--ease-out);
}
.auth-tab:hover { border-color: var(--line-field-hover); color: var(--hanji); }

/* login.js는 aria-selected와 .is-active를 함께 토글한다 — 둘 다 받는다 */
.auth-tab.is-active,
.auth-tab[aria-selected='true'] {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, var(--ink));
  color: var(--hanji);
}

/* ── "명부(名簿)에 이름을 올리다" — 로그인 카드를 문서로 구성한다 ──
   제첨(표제) → 알약 탭 → 서명(필드) → 날인(버튼 옆 도장) 순의 문서 흐름.
   도장은 빈 구석의 장식이 아니라 서명란 옆 날인 자리에 소속된다. */

/* 좌 이미지 · 우 문서 — 명부 정물 민화(좌)와 로그인 카드+각주(우)의 2단 무대.
   모바일은 이미지 없이 문서 한 컬럼 중앙(집중 태스크 우선, 510KB 이미지도 아낀다). */
.auth-layout {
  max-width: 36rem;
  margin-inline: auto;
  margin-top: var(--space-4);   /* 타이틀 블록과 무대 사이 숨 고르기 */
}

/* 로그인 설명문은 한 줄로 — 전역 34em 제한(두 줄 리듬용)이 여기선 어색한 줄바꿈을 만든다 */
.section-desc--wide { max-width: none; }
.auth-layout .form-rail { margin-top: var(--space-4); }

.auth-visual { display: none; }

@media (min-width: 900px) {
  .auth-layout {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
    gap: var(--space-4);
    align-items: stretch;
  }
  .auth-visual {
    display: block;
    position: relative;               /* 이미지가 우측 컬럼 높이를 그대로 따르게 */
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    box-shadow: var(--shadow-card);
    margin: 0;
  }
  .auth-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* 한지 질감 — 결과 카드(.card--hanji)와 같은 종이. #auth-card id가 .saju-form 배경을 이긴다 */
#auth-card {
  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;
}

/* 제첨(題簽) — 금세선 사이 표제 */
.auth-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.auth-head__rule {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 45%, transparent);
}
.auth-head__title {
  font-family: var(--font-hanja);
  font-size: 1.05rem;
  letter-spacing: 0.35em;
  margin-right: -0.35em;   /* letter-spacing 마지막 글자 뒤 공백 보정 */
  color: var(--gold);
}
.auth-head__sub {
  margin-top: var(--space-1);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
  letter-spacing: 0.08em;
}
#auth-card .auth-tabs { margin-top: var(--space-3); }

/* 날인(捺印) — 서명(버튼) 옆에 도장을 찍는다 */
.auth-submit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.auth-submit .btn { flex: 1; }
.auth-seal {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  color: var(--cinnabar);
  transform: rotate(-6deg);
  user-select: none;
  pointer-events: none;
}

/* 비로그인 안내 블록. reviews.html은 .saju-form과 함께 쓰므로 표면색은 그쪽을
   따르고, 단독으로 쓰일 때를 위해 같은 표면을 여기서도 지정한다. */
.auth-gate {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}
.auth-gate__title {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  color: var(--hanji);           /* #F2ECDD on #171D31 = 14.2:1 */
  margin: 0;
}
.auth-gate__text {
  color: var(--hanji-dim);       /* #B9B3A4 on #171D31 = 7.99:1 */
  font-size: var(--fs-caption);
  line-height: 1.7;
  margin: 0;
}

/* 헤더 계정 항목 — auth.js가 .nav__menu 안에 <li class="nav__auth">로 주입한다.
   다른 nav__menu li와 같은 축에 놓이도록 인라인 정렬만 맞춘다. */
.nav__auth {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav__user {
  color: var(--hanji-dim);       /* 헤더 배경(#0E1220 계열) 위 8.92:1 */
  font-size: var(--fs-caption);
  white-space: nowrap;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 클릭 영역 36×36px 이상 — U11(24×24) 상회 */
.nav__logout {
  min-height: 2.25rem;
  min-width: 3.5rem;
  padding: 0.35em 0.8em;
  background: none;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  color: var(--hanji-dim);
  font-family: inherit;
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: border-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.nav__logout:hover,
.nav__logout:focus-visible { border-color: var(--gold); color: var(--gold); }

/* ---------- 30. 잠금 안내 카드 (SPEC §8.2 — 사주·운세·타로 공용) ----------
   result-gate.js의 ResultGate.lockCard()가 만드는 요소의 유일한 스타일 자리다.
   saju.html·fortune.html은 tarot.css를 로드하지 않으므로 여기 말고는 둘 곳이 없고,
   tarot.css는 이 규칙들을 재정의하지 않는다.
   대비: .gate-lock__text #F2ECDD on #171D31 = 14.2:1 (본문 4.5:1 충족) */
.gate-lock {
  background: var(--ink-2);
  border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-3);
  max-width: 40rem;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-2);
}
.gate-lock__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--gold);
  flex: none;
}
/* 분위기용 장식 — 실제 해석문이 아니라 고정 문구이며 SR에서는 제외된다.
   흐림·저채도로 "아직 드러나지 않은 글"만 암시한다. */
.gate-lock__dummy {
  margin: 0;
  color: var(--hanji-dim);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.8;
  filter: blur(3px);
  opacity: 0.45;
  user-select: none;
  -webkit-user-select: none;
}
.gate-lock__text {
  margin: 0;
  color: var(--hanji);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.gate-lock__cta { margin-top: var(--space-1); }