/* ============================================================
   Debriefly 랜딩 공유 스타일 (D2 골격 — 5개 페르소나 변형이 공유)
   토큰 정본: docs/new_business/voice-app-design-system-2026-06-09.md
   규칙: 그라데이션은 로고 마크·불릿 점·녹음 링에만(넓은 면 채색 금지),
   하드한 진한 테두리 금지(1px 헤어라인만), 모션 절제.
   접근성: 디자인 시스템 §5 권고 반영 — 기능성 메타 텍스트는 #6b7280
   (장식성 faint 회색은 토큰 그대로 유지).
   ============================================================ */

:root {
  /* 컬러 — 라이트 (메인) */
  --bg: #ffffff;
  --surface: #fbfbfc;
  --hairline: #ececef;
  --hairline-2: #f0f0f2;
  --ink: #0a0a0a;
  --body: #33373d;
  --muted: #6b7280;          /* 정본 #9aa0a8의 접근성 보정톤(§5 권고) */
  --muted-deco: #9aa0a8;     /* 장식용(라벨 점 등)은 정본 그대로 */
  --faint: #c2c7ce;
  --chip-text: #3f444b;

  /* 악센트 — 유일한 색 모먼트 */
  --grad: linear-gradient(135deg, #6366f1, #3b82f6, #22d3ee);
  --grad-text: linear-gradient(120deg, #6366f1, #3b82f6, #22d3ee);
  --indigo: #4f46e5;
  --mark-bg: rgba(59, 130, 246, .11);
  --mark-text: #1d4ed8;
  --live-red: #ef4444;
  --ok-green: #22c55e;

  /* 형태 */
  --r-window: 15px;
  --r-card: 11px;
  --r-chip: 9px;
  --r-btn: 11px;
  --r-check: 7px;
  --shadow-window: 0 24px 64px -28px rgba(10, 12, 20, .30),
                   0 2px 8px -4px rgba(10, 12, 20, .10);

  /* 타이포 */
  --font-sans: "Inter", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Consolas", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 레이아웃 ---------- */
.container { max-width: 1020px; margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 720px; }
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--hairline-2); }

/* 섹션 라벨 (SUMMARY 등 — 모노 대문자) */
.section-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  display: block;
  margin-bottom: 14px;
}

h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.25;
}

/* ---------- 헤더 ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline-2);
}

.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo-mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.logo-mark::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: .92;
}
.logo-word {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.header-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.header-link:hover { color: var(--ink); }

/* ---------- 버튼 ---------- */
.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
  padding: 13px 26px;
  border: none;
  border-radius: var(--r-btn);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease;
}
.btn-primary:hover { opacity: .82; }

.btn-secondary {
  display: inline-block;
  background: var(--bg);
  color: var(--chip-text);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  text-decoration: none;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--faint); }

/* CTA 아래 지지선 마이크로카피 */
.cta-support {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 12px;
}

/* ---------- 히어로 ---------- */
.hero { text-align: center; padding: 84px 0 72px; }

.hero-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--chip-text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.12;
  color: var(--ink);
  max-width: 760px;
  margin: 0 auto 20px;
}

.hero-sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  max-width: 600px;
  margin: 0 auto 30px;
}

mark {
  background: var(--mark-bg);
  color: var(--mark-text);
  padding: 0 3px;
  border-radius: 3px;
}

/* ---------- 앱 윈도우 목업 ---------- */
.window {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-window);
  box-shadow: var(--shadow-window);
  overflow: hidden;
  text-align: left;
}

.window-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-2);
  padding: 10px 14px;
}
.window-dots { display: flex; gap: 5px; }
.window-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #e3e3e7; /* 맥 신호등 색 아님 — 모노 절제 */
}
.window-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.window-body { padding: 26px 30px 30px; }

/* MOCKUP 정직 라벨 — 미구현 화면 표기 (스프린트 헌법 불변규칙 3) */
.mockup-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
}

/* 윈도우 안 콘텐츠 — 화면 제목 토큰(30px)은 560px 목업 윈도우 스케일에 맞춰 의도적 축소 */
.meeting-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 4px;
}
.meeting-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.summary-list { list-style: none; margin-bottom: 22px; }
.summary-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.6;
}
.summary-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--grad);
}

.action-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 14px;
  color: var(--body);
}
.action-item:last-of-type { border-bottom: none; }
.action-check {
  width: 20px; height: 20px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-check);
  flex: none;
}
.action-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

.decision-line {
  font-size: 14px;
  color: var(--body);
  padding: 9px 0;
}

.route-chips { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--chip-text);
}

.review-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 16px;
}
.review-toggle .dot-on {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok-green);
}

/* BEFORE 쪽 — 받아쓰기 덩어리 */
.transcript-blob {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-height: 280px;
  overflow: hidden;
  position: relative;
}
.transcript-blob::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

/* ---------- Before / After 그리드 ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 30px;
}
.proof-col-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  text-align: center;
}
.proof-caption {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-top: 24px;
}

/* ---------- Problem 불릿 ---------- */
.problem-list { list-style: none; max-width: 640px; }
.problem-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}
.problem-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--grad);
}

/* ---------- How it works 3단계 ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 24px;
}
.step-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
}
.step-card h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.step-card p { font-size: 14px; color: var(--body); }

/* ---------- What ships when ---------- */
.ships-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
}
.ships-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 24px;
}
.ships-card--launch { background: var(--surface); }
.ships-card h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.ships-card--roadmap h3 { color: var(--muted); }
.ships-card ul { list-style: none; }
.ships-card li {
  display: flex;
  gap: 9px;
  font-size: 14px;
  margin-bottom: 9px;
  color: var(--body);
}
.ships-card--roadmap li { color: var(--muted); }
.ships-ok { color: var(--ok-green); font-weight: 600; flex: none; }
.ships-later { color: var(--faint); flex: none; }
.ships-refund-note {
  font-size: 14px;
  color: var(--body);
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

/* ---------- Offer ---------- */
.offer-card {
  max-width: 560px;
  margin: 30px auto 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-window);
  box-shadow: var(--shadow-window);
  padding: 36px;
  text-align: center;
}
.offer-price {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.offer-price small {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.offer-list {
  list-style: none;
  text-align: left;
  margin: 24px 0;
  border-top: 1px solid var(--hairline-2);
}
.offer-list li {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 14px;
  color: var(--body);
}
.offer-honest {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 18px;
  line-height: 1.6;
}
.offer-refund {
  font-size: 13.5px;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 13px 16px;
  margin-top: 16px;
  line-height: 1.6;
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 680px; }
.faq-list details {
  border-bottom: 1px solid var(--hairline-2);
  padding: 4px 0;
}
.faq-list summary {
  font-size: 15px;
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -0.01em;
  cursor: pointer;
  padding: 14px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--muted);
  flex: none;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p {
  font-size: 14px;
  color: var(--body);
  padding: 0 0 16px;
  max-width: 620px;
}

/* ---------- Final CTA + 이메일 폴백 ---------- */
.final-cta { text-align: center; }
.email-fallback {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-2);
}
.email-fallback p { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.email-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
}
.email-form input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  padding: 11px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  background: var(--bg);
  outline: none;
  min-width: 0;
}
.email-form input:focus { border-color: var(--faint); }
.email-form input::placeholder { color: var(--muted-deco); }

/* ---------- 푸터 ---------- */
.site-footer {
  border-top: 1px solid var(--hairline-2);
  padding: 34px 0 44px;
  font-size: 13px;
  color: var(--muted);
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-bip a { color: var(--chip-text); text-decoration: none; font-weight: 500; }
.footer-bip a:hover { color: var(--ink); }
.footer-note { margin-top: 14px; font-size: 12px; color: var(--muted-deco); }

/* ---------- 정책 페이지 (privacy/terms 공용) ---------- */
.legal-page { padding: 56px 0 80px; }
.legal-page h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 8px;
}
.legal-updated {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}
.legal-page h2 {
  font-size: 19px;
  margin: 36px 0 10px;
}
.legal-page p, .legal-page li { font-size: 14.5px; color: var(--body); margin-bottom: 10px; }
.legal-page ul { padding-left: 20px; }
.legal-draft-banner {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--chip-text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  padding: 8px 14px;
  display: inline-block;
  margin-bottom: 28px;
}
.to-confirm {
  background: var(--mark-bg);
  color: var(--mark-text);
  padding: 0 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ============================================================
   페르소나 카드 컴포넌트 (D3 — builder/coach/realtor/student 변형 공용)
   원칙: 기존 토큰·.window 골격 재사용. 신규 색/형태 토큰 도입 없음.
   카드 스펙 정본: echo-landing-plans-5personas-2026-06-12.md 각 §Output proof.
   ============================================================ */

/* 윈도우 상단 키커 (초록 점 + 모노 라벨) — 결과창의 "무엇으로 정리됐는지" 한 줄 */
.card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.card-kicker .dot-on {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok-green);
  flex: none;
}

/* 카드 안 소제목 (Last time · PREFERENCES · Key concepts 등) — meeting-meta 톤 재사용, 간격만 조정 */
.card-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 6px;
}
.card-label:first-of-type { margin-top: 0; }

/* 카드 본문 텍스트 줄 (요약/선호/내용) */
.card-line {
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 6px;
}

/* 인라인 태그 (#product 등) — 빌더 변형 */
.note-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mark-text);
  margin-left: 6px;
}

/* 모노 태그 프리픽스가 붙는 아사이드 노트 (YOU / ASK / RAW) */
.card-aside {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-chip);
  padding: 9px 12px;
  margin: 10px 0;
}
.aside-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
  padding-top: 1px;
}

/* 인라인 플래그 칩 (EXAM · FRI — confirm? · 검토대기) — mark 색 재사용, 단정 아님(추정 표기) */
.card-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--mark-text);
  background: var(--mark-bg);
  border-radius: var(--r-check);
  padding: 2px 7px;
  margin-left: 6px;
  white-space: nowrap;
}

/* 카드 하단 1차 액션 버튼 (Route to vault · Open history 등) + 키보드 힌트 */
.window-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  margin-top: 18px;
  font-size: 13.5px;
  padding: 11px 18px;
}
.window-cta .kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: .65;
}

/* 내보내기 줄 (Export as: Anki · Quizlet · Notion · .md / .md · copy) */
.export-row {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .5px;
  color: var(--muted);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-2);
}
.export-row strong { color: var(--chip-text); font-weight: 500; }

/* 이메일 폼 제출 후 감사 메시지 (app.js가 폼을 이걸로 치환) */
.email-thanks {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

/* ---------- 반응형 (390px 폰 기준) ---------- */
@media (max-width: 860px) {
  .steps-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .ships-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  section { padding: 52px 0; }
  /* 390px 첫 화면에 CTA 노출 (랜딩 플랜 §4 체크) */
  .hero { padding: 40px 0 52px; }
  .hero h1 { font-size: 30px; }
  .hero-sub { font-size: 15px; margin-bottom: 24px; }
  .hero-badge { margin-bottom: 18px; }
  h2 { font-size: 22px; }
  .window-body { padding: 20px; }
  .offer-card { padding: 26px 20px; }
  .email-form { flex-direction: column; }
  .btn-primary { width: 100%; text-align: center; }
  .hero .btn-primary { width: auto; }
}