/* 돌담 홈페이지 — Terracotta + Editorial (typeui.sh 원칙 기반)
   - sun-baked, clay-toned editorial system
   - 매거진식 구조 그리드 + 정제된 세리프
   - 단일 액센트 디시플린 (terracotta primary 단일색)
   - 8pt 베이스라인 그리드 + 4/8/12/16/24/32/48/64 스페이싱 스케일 */

:root {
  /* Terracotta-flavored palette (돌담 브랜드 색 유지 + 약간 디퓨즈) */
  --bg: #F6EFE3;            /* warm cream surface (Terracotta #F3E9D8 와 가까운 톤) */
  --bg-2: #EAE0CC;
  --surface: #FFFCF7;       /* clean cream surface */
  --primary: #B8784C;       /* terracotta-leaning (앱 #C4956A 보다 진해서 정제됨) */
  --primary-soft: #C4956A;  /* 앱 브랜드 (악센트 보조) */
  --primary-deep: #8A5530;  /* deep terracotta */
  --primary-faint: rgba(184, 120, 76, 0.12);
  --primary-tint: rgba(184, 120, 76, 0.06);
  --ink: #1A1410;           /* near-black (editorial high contrast) */
  --ink-soft: #4A3E33;
  --ink-muted: #6F5F50;
  --rule: #D9C9B5;          /* hairline rule color */
  --rule-soft: #E8DCC8;

  /* 4/8/12/16/24/32/48/64 (8pt baseline) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 9999px;

  /* shadows — editorial은 그림자 절제 */
  --shadow-card: 0 1px 0 rgba(26, 20, 16, 0.06), 0 12px 32px -16px rgba(26, 20, 16, 0.16);
  --shadow-raised: 0 2px 0 rgba(26, 20, 16, 0.04), 0 24px 56px -20px rgba(26, 20, 16, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "kern";
}

h1, h2, h3, h4, h5 {
  font-family: 'Noto Serif KR', 'DM Serif Display', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--primary-faint);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s, color .15s;
}
a:hover {
  color: var(--primary-deep);
  text-decoration-color: var(--primary);
}
img { max-width: 100%; display: block; }

/* mono labels (Terracotta uses JetBrains Mono — fallback to IBM Plex/SF Mono) */
.mono {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', 'D2Coding', ui-monospace, SFMono-Regular, monospace;
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
}

/* :focus-visible 일관 */
*:focus { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip to content */
.skip {
  position: absolute;
  top: -56px; left: 0;
  background: var(--ink); color: var(--bg);
  padding: 12px 18px; text-decoration: none;
  border-radius: 0 0 var(--r-md) 0;
  z-index: 999;
  transition: top .15s;
  font-weight: 600;
}
.skip:focus-visible { top: 0; color: var(--bg); }

/* ──────────────── Nav (masthead) ──────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 239, 227, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: 1160px; margin: 0 auto;
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: 'Noto Serif KR', serif;
  font-weight: 700; font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.brand:hover { color: var(--primary-deep); text-decoration: none; }
.nav-links { display: flex; gap: var(--s-6); align-items: center; }
.nav-links a {
  font-size: 13px; color: var(--ink-muted); font-weight: 500;
  text-decoration: none;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }

/* ──────────────── Hero (masthead 스타일, 가운데 정렬) ──────────────── */
.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5) var(--s-8);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.hero-meta {
  display: inline-flex; gap: var(--s-3);
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-6);
  padding: 0 var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
}
.hero-meta .dot { color: var(--primary); }
.hero h1 {
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 auto var(--s-5);
  max-width: 16ch;
}
.hero h1 .accent {
  color: var(--primary);
  display: inline-block;
  font-weight: 700;
}
.hero-sub {
  font-size: clamp(16px, 2.4vw, 19px);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto var(--s-7);
}
.hero-sub .lede {
  font-weight: 600;
  color: var(--ink);
}

/* Store row — 같은 크기 박스에 contain (시각적 동일) */
.store-row {
  display: flex; gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 56px;
  opacity: 0.78;
  cursor: not-allowed;
  transition: opacity .2s, transform .2s;
}
.store-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.store-link img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.cta-note {
  margin-top: var(--s-5);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* ──────────────── Promise (수평 흐름) ──────────────── */
.promises {
  max-width: 1160px;
  margin: var(--s-8) auto 0;
  padding: 0 var(--s-5);
}
.promise-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--s-7) var(--s-5);
  position: relative;
}
.promise-step {
  text-align: center;
  padding: 0 var(--s-3);
  position: relative;
}
.promise-step + .promise-step {
  border-left: 1px solid var(--rule-soft);
}
.promise-num {
  font-size: 11px;
  color: var(--primary);
  letter-spacing: 0.12em;
  margin-bottom: var(--s-3);
}
.promise-icon {
  width: 40px; height: 40px;
  color: var(--ink);
  margin: 0 auto var(--s-3);
  display: flex; align-items: center; justify-content: center;
}
.promise-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-1);
  font-family: 'Noto Serif KR', serif;
  letter-spacing: -0.01em;
}
.promise-sub {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.55;
}

/* ──────────────── 섹션 헤더 (매거진 chapter 스타일) ──────────────── */
.chapter {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-5) var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
}
.chapter-meta {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-3);
}
.chapter-meta .num {
  color: var(--primary);
  font-weight: 700;
}
.chapter h2 {
  font-size: clamp(28px, 4.8vw, 44px);
  letter-spacing: -0.025em;
  margin-bottom: var(--s-3);
  max-width: 18ch;
}
.chapter-lede {
  font-size: clamp(15px, 2vw, 17px);
  color: var(--ink-soft);
  max-width: 56ch;
  line-height: 1.65;
}

/* ──────────────── 기능 ─ 각 섹션 컨테이너 ──────────────── */
.features {
  background: var(--bg);
}
.feature-block {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
}
.feature-eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--s-5);
}
.feature-eyebrow .num {
  color: var(--primary);
  font-weight: 700;
}
.feature-eyebrow .rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.feature-text h3 {
  font-size: clamp(26px, 4.2vw, 38px);
  letter-spacing: -0.025em;
  margin-bottom: var(--s-4);
  line-height: 1.15;
  max-width: 14ch;
}
.feature-text h3 .accent {
  color: var(--primary);
  font-weight: 700;
}
.feature-text p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: var(--s-3);
  max-width: 52ch;
}
.feature-text p strong {
  color: var(--ink);
  font-weight: 600;
}

/* Variant A: 풀 폰 + 텍스트 (asymmetric grid) */
.variant-phone {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.variant-phone.right .text { order: 2; }
.variant-phone.right .phone-wrap { order: 1; }
.variant-phone .phone-wrap {
  display: flex; justify-content: center;
}
.variant-phone .phone-wrap img {
  max-width: 320px;
  border-radius: 28px;
  box-shadow: var(--shadow-raised);
}

/* Variant B: 검증 — 큰 폰 2개 + 큰 인용구 (full bleed) */
.variant-verify {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
.verify-headline {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.verify-pullquote {
  font-family: 'Noto Serif KR', serif;
  font-size: clamp(24px, 3.8vw, 38px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--s-5);
}
.verify-pullquote .accent { color: var(--primary); font-weight: 700; }
.verify-body {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.8;
  max-width: 52ch;
  margin: 0 auto var(--s-6);
}
.verify-flow {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: 0 auto var(--s-6);
}
.verify-step {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.verify-step .v-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  background: var(--surface);
}
.verify-step.done .v-pill {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.verify-step.current .v-pill {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-tint);
}
.verify-arrow {
  color: var(--rule);
  font-size: 16px;
  margin: 0 4px;
}
.verify-phones {
  display: flex; justify-content: center; align-items: flex-end;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.verify-phone-main {
  max-width: 340px;
  border-radius: 32px;
  box-shadow: var(--shadow-raised);
}
.verify-phone-aside {
  max-width: 280px;
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--rule);
  transform: translateY(28px) rotate(-2.5deg);
}

/* Variant C: 채팅 — 가짜 채팅 preview 카드 */
.variant-chat {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  max-width: 760px;
  margin: 0 auto;
}
.chat-text { text-align: center; }
.chat-text h3 {
  max-width: 100%;
  margin-left: auto; margin-right: auto;
}
.chat-text p { margin-left: auto; margin-right: auto; }
.chat-preview {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
  box-shadow: var(--shadow-card);
}
.chat-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-muted);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: var(--s-4);
}
.chat-meta .members { font-weight: 700; color: var(--ink); }
.chat-meta .countdown { color: var(--primary); font-weight: 700; }
.chat-list {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.chat-msg {
  display: flex;
  gap: var(--s-2);
  align-items: flex-end;
  max-width: 78%;
}
.chat-msg.self {
  margin-left: auto;
  flex-direction: row-reverse;
}
.chat-msg .avatar {
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--bg-2);
  color: var(--ink);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-msg.self .avatar { background: var(--primary); color: #fff; }
.chat-body { display: flex; flex-direction: column; gap: 2px; }
.chat-msg.self .chat-body { align-items: flex-end; }
.chat-nick { font-size: 10px; color: var(--ink-muted); padding: 0 4px; letter-spacing: 0.02em; }
.chat-bubble {
  background: var(--bg-2);
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}
.chat-msg.self .chat-bubble { background: var(--primary); color: #fff; }
.chat-poll {
  background: linear-gradient(135deg, var(--primary-tint), var(--bg-2));
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  text-align: left;
  max-width: 240px;
}
.chat-poll-q { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.chat-poll-cta { font-size: 11px; color: var(--primary-deep); font-weight: 600; }

/* Variant D: 투표 — 가로 카드 발췌 + 텍스트 */
.variant-vote {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-7);
  align-items: center;
}
.vote-stack {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.vote-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--s-4);
  border-radius: var(--r-lg);
}
.vote-meta {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 11px; margin-bottom: var(--s-2);
  letter-spacing: 0.06em;
}
.vote-hot {
  background: var(--primary);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-full);
  letter-spacing: 0.08em;
}
.vote-count { color: var(--ink-muted); }
.vote-q {
  font-size: 16px; font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-3);
  line-height: 1.4;
  font-family: 'Noto Serif KR', serif;
  letter-spacing: -0.015em;
}
.vote-bar {
  display: flex; height: 28px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 6px;
  background: var(--bg-2);
}
.vote-pro {
  background: var(--ink);
  color: var(--bg);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center;
  padding: 0 10px;
  letter-spacing: 0.04em;
}
.vote-con {
  background: var(--primary);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 10px;
  letter-spacing: 0.04em;
}
.vote-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* Variant E: 기분 — 큰 폰 + 이모지 인덱스 */
.variant-mood {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.mood-phone img {
  max-width: 300px;
  border-radius: 28px;
  box-shadow: var(--shadow-raised);
  margin: 0 auto;
  display: block;
}
.mood-pull h3 { max-width: 14ch; }
.mood-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-5);
  max-width: 480px;
}
.mood-cell {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px 4px 10px;
  text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mood-cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--primary-faint);
}
.mood-cell.active {
  border-color: var(--primary);
  background: var(--primary-tint);
}
.mood-emoji { font-size: 28px; margin-bottom: 4px; }
.mood-label {
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mood-cell.active .mood-label { color: var(--primary-deep); font-weight: 700; }

/* Variant F: 회복 — 인용 카드 (full bleed) */
.variant-rebuild {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.rebuild-text h3 { max-width: 14ch; }
.story-stack {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.story-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  position: relative;
}
.story-card::before {
  content: '"';
  position: absolute;
  top: -6px; left: 12px;
  font-family: 'Noto Serif KR', serif;
  font-size: 56px;
  color: var(--primary);
  opacity: 0.35;
  line-height: 1;
}
.story-meta {
  font-size: 10px;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
  display: flex; gap: var(--s-2); align-items: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.story-cat {
  background: var(--bg);
  color: var(--primary-deep);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.story-title {
  font-size: 16px; font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-2);
  font-family: 'Noto Serif KR', serif;
  letter-spacing: -0.015em;
  line-height: 1.4;
}
.story-snippet {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ──────────────── Safety (딥 톤, 단일 액센트 유지) ──────────────── */
.safety {
  background: var(--ink);
  color: var(--bg);
  padding: var(--s-9) var(--s-5);
  margin-top: var(--s-8);
}
.safety-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.safety .chapter {
  border-bottom: 1px solid rgba(246, 239, 227, 0.12);
  padding: 0 0 var(--s-6);
  margin-bottom: var(--s-6);
  max-width: none;
}
.safety .chapter-meta { color: rgba(246, 239, 227, 0.55); }
.safety .chapter-meta .num { color: var(--primary-soft); }
.safety .chapter h2 { color: var(--bg); }
.safety .chapter-lede { color: rgba(246, 239, 227, 0.7); }

.safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-1);
  border: 1px solid rgba(246, 239, 227, 0.12);
}
.safety-card {
  padding: var(--s-5) var(--s-4);
  background: var(--ink);
  border: 1px solid rgba(246, 239, 227, 0.06);
}
.safety-num {
  font-size: 11px;
  color: var(--primary-soft);
  letter-spacing: 0.14em;
  margin-bottom: var(--s-3);
  font-weight: 700;
}
.safety-card h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: var(--s-2);
  color: var(--bg);
}
.safety-card p {
  font-size: 13px;
  color: rgba(246, 239, 227, 0.68);
  line-height: 1.7;
}

/* ──────────────── FAQ ──────────────── */
.faq {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
}
.faq .chapter {
  padding: 0 0 var(--s-6);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-6);
  max-width: none;
}
.faq-list {
  border-top: 1px solid var(--rule);
}
.faq-item { border-bottom: 1px solid var(--rule); }
details { padding: var(--s-5) 0; }
summary {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Noto Serif KR', serif;
  letter-spacing: -0.015em;
  padding-right: 4px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+';
  font-size: 24px;
  color: var(--ink-muted);
  font-weight: 300;
  transition: transform .2s, color .2s;
  font-family: 'Pretendard', sans-serif;
}
details[open] summary::after {
  content: '−';
  color: var(--primary);
}
.faq-answer {
  padding: var(--s-3) 0 4px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.85;
  max-width: 60ch;
}

/* ──────────────── 푸터 ──────────────── */
footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: var(--s-8) var(--s-5) var(--s-6);
}
.footer-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-7);
}
.footer-brand .brand {
  font-size: 24px;
  display: inline-block;
  margin-bottom: var(--s-3);
}
.footer-brand p {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.7;
  max-width: 32ch;
}
.footer-col h5 {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--s-2); }
.footer-col a {
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  max-width: 1080px;
  margin: var(--s-7) auto 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--ink-muted);
  display: flex; justify-content: space-between;
  letter-spacing: 0.04em;
}

/* ──────────────── 모션 ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease-out, transform .7s ease-out;
  }
  .reveal.in-view { opacity: 1; transform: none; }
}

/* ──────────────── 정책 페이지 ──────────────── */
.legal-wrap {
  display: grid;
  grid-template-columns: 1fr 220px;
  max-width: 1080px;
  margin: var(--s-7) auto var(--s-9);
  padding: 0 var(--s-5);
  gap: var(--s-7);
  align-items: flex-start;
}
.legal-container { max-width: 720px; }
.legal-container .effective {
  display: block;
  color: var(--ink-muted);
  font-size: 13px;
  margin: var(--s-2) 0 var(--s-6);
  letter-spacing: 0.02em;
}
.legal-container h1 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: var(--s-2);
}
.legal-container h2 {
  font-size: 21px;
  margin: var(--s-6) 0 var(--s-3);
  scroll-margin-top: 88px;
  letter-spacing: -0.015em;
}
.legal-container h3 {
  font-size: 16px;
  margin: var(--s-5) 0 var(--s-2);
  color: var(--primary-deep);
}
.legal-container p {
  font-size: 14.5px; color: var(--ink);
  line-height: 1.8; margin-bottom: var(--s-3);
}
.legal-container ul, .legal-container ol {
  margin: var(--s-2) 0 var(--s-4) var(--s-5);
}
.legal-container li {
  font-size: 14.5px; color: var(--ink);
  line-height: 1.8; margin-bottom: 6px;
}
.legal-container table {
  width: 100%; border-collapse: collapse;
  margin: var(--s-3) 0 var(--s-4);
  font-size: 13px;
}
.legal-container th, .legal-container td {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-container th { background: var(--bg); font-weight: 700; letter-spacing: -0.01em; }
.legal-container hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}
.legal-container .back {
  display: inline-block;
  margin-bottom: var(--s-5);
  font-size: 13px;
  color: var(--primary-deep);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.legal-container .back:hover { color: var(--ink); }

/* Floating TOC */
.legal-toc {
  position: sticky;
  top: 88px;
  align-self: start;
  font-size: 13px;
  padding-left: var(--s-4);
  border-left: 1px solid var(--rule);
}
.legal-toc-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.14em;
  margin-bottom: var(--s-3);
  text-transform: uppercase;
}
.legal-toc ul { list-style: none; }
.legal-toc li { margin-bottom: var(--s-2); }
.legal-toc a {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
  display: block;
  padding: 2px 0;
  text-decoration: none;
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc a[aria-current="true"] {
  color: var(--primary-deep);
  font-weight: 600;
}

/* ──────────────── 반응형 ──────────────── */
@media (max-width: 900px) {
  .legal-wrap { grid-template-columns: 1fr; gap: var(--s-4); }
  .legal-toc {
    position: static;
    border-left: none;
    padding-left: 0;
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-4);
  }
  .legal-toc-title { margin-bottom: var(--s-2); }
  .legal-toc ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .legal-toc li { margin-bottom: 0; }
  .legal-toc a {
    background: var(--bg-2);
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .nav-links { gap: var(--s-3); }
  .nav-links a { font-size: 12px; }
  .hero { padding: var(--s-7) var(--s-4) var(--s-6); }
  .promise-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) 0;
    padding: var(--s-5) var(--s-3);
  }
  .promise-step + .promise-step { border-left: none; }
  .promise-step:nth-child(3) { border-top: 1px solid var(--rule-soft); padding-top: var(--s-5); }
  .promise-step:nth-child(4) { border-top: 1px solid var(--rule-soft); padding-top: var(--s-5); }
  .variant-phone, .variant-vote, .variant-rebuild, .variant-mood {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .variant-phone.right .text { order: 1; }
  .variant-phone.right .phone-wrap { order: 2; }
  .variant-phone .phone-wrap img { max-width: 280px; }
  .verify-flow { gap: var(--s-2); }
  .verify-phone-aside { display: none; }
  .mood-grid { grid-template-columns: repeat(5, 1fr); max-width: 100%; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: var(--s-2); text-align: center; }
}

@media (max-width: 480px) {
  .store-link { width: 160px; height: 48px; }
  .footer-inner { grid-template-columns: 1fr; }
  .mood-grid { grid-template-columns: repeat(3, 1fr); }
}