/* ==========================================================================
   LifeLove Design System (v4.0 Editorial Edition)
   Light & Dark Complete Dual Design System
   ========================================================================== */

:root {
  --content-max: 760px;
  --report-max: 760px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --body-leading: 1.7;
  --title-leading: 1.35;
  /* LIGHT MODE (Default: Clean Warm Editorial) */
  --bg: #fafbfc;
  --surface: #ffffff;
  --surface-soft: #f4f6f8;
  --surface-raised: #ffffff;
  --line: #e6e9ee;
  --line-subtle: #eff1f5;
  /* 버튼 테두리처럼 '윤곽이 보여야 하는' 자리 전용 (--line보다 진하다) */
  --line-strong: #cfd6e0;
  
  --text: #13161b;
  --text-secondary: #48505e;
  --text-muted: #646d7d;
  --text-subtle: #6b7484;
  
  /* Brand Editorial Accents */
  --yellow: #f5c538;
  --yellow-soft: #fef8e7;
  --blue: #5d93f7;
  --blue-soft: #edf4ff;
  --red: #f2726b;
  --red-soft: #fef1f0;
  --green: #48b87a;
  --green-soft: #ecf9f2;
  --mint: #3db8a5;
  --mint-soft: #ebfaf7;
  --purple: #8b72e8;
  --purple-soft: #f4f1fd;
  --indigo: #5b6ee0;
  --indigo-soft: #eef0fd;
  --orange: #ef8f4b;
  --orange-soft: #fef3ea;

  /* 액센트를 '글자색'으로 쓸 때의 값.
     밝은 배경 위 작은 글씨는 원래 액센트로는 대비가 나오지 않아(노랑 1.5:1)
     텍스트 자리에만 어두운 변형을 쓴다. 배경/테두리/그래프는 위 값을 그대로 쓴다. */
  --yellow-text: #8a6a00;
  --green-text: #1f7a4c;
  --red-text: #b03a33;
  --blue-text: #2f66c8;
  --mint-text: #16766a;
  --purple-text: #5b45b8;
  --indigo-text: #3d4fbf;
  --orange-text: #a35314;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.08);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  color-scheme: light;
}

/* DARK MODE (Deep Charcoal / Warm Navy Black - Editorial Night Reading) */
[data-theme="dark"] {
  --bg: #0e1116;
  --surface: #151921;
  --surface-soft: #1c222d;
  --surface-raised: #232a37;
  --line: #27303f;
  --line-subtle: #1e2532;
  --line-strong: #3a465c;

  --text: #f0f3f8;
  --text-secondary: #b8c1cf;
  --text-muted: #8e99aa;
  --text-subtle: #8792a3;

  /* Calibrated Soft Dark Accents */
  --yellow: #e5b834;
  --yellow-soft: #2d2613;
  --blue: #6b9ef8;
  --blue-soft: #16243d;
  --red: #e66a64;
  --red-soft: #331a19;
  --green: #4fc084;
  --green-soft: #142a1f;
  --mint: #49c5b2;
  --mint-soft: #122c27;
  --purple: #9a84f0;
  --purple-soft: #231c38;
  --indigo: #7a8bea;
  --indigo-soft: #1a1f3a;
  --orange: #f0995a;
  --orange-soft: #33220f;

  /* 다크에서는 원래 액센트가 이미 어두운 배경 위에서 충분히 밝다 */
  --yellow-text: var(--yellow);
  --green-text: var(--green);
  --red-text: var(--red);
  --blue-text: var(--blue);
  --mint-text: var(--mint);
  --purple-text: var(--purple);
  --indigo-text: var(--indigo);
  --orange-text: var(--orange);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* Base Styles */
* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
  transition: background-color 0.25s ease, color 0.25s ease;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Arial, sans-serif;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 한글 단어가 화면 폭에 따라 중간에서 끊기지 않도록 전체 기본값으로 통일한다
     (모바일 좁은 폭 포함). word-break은 상속되므로 개별 요소마다 반복하지 않는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

button, input {
  font: inherit;
}

button {
  cursor: pointer;
}

.app {
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.03);
  border-left: 1px solid var(--line-subtle);
  border-right: 1px solid var(--line-subtle);
}

/* TOPBAR & THEME TOGGLE */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}

.brand {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.04em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.brand-badge {
  font-size: 11px;
  font-weight: 800;
  background: var(--surface-soft);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Theme Switcher Segmented Control */
.theme-switch {
  display: inline-flex;
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
}

.theme-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.theme-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.theme-btn:hover:not(.active) {
  color: var(--text);
}

/* MAIN CONTENT */
main {
  flex: 1;
  padding: 24px 20px 80px;
}

.screen {
  display: none;
  animation: fadeIn 0.24s ease-out;
}

.screen.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0.15;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* TYPOGRAPHY */
h1, h2, h3, h4, p {
  margin-top: 0;
}

h1 {
  font-size: 32px;
  line-height: 1.28;
  letter-spacing: -0.05em;
  margin: 16px 0 12px;
  font-weight: 900;
  color: var(--text);
}

h2 {
  font-size: 23px;
  line-height: 1.34;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  font-weight: 800;
  color: var(--text);
}

h3 {
  font-size: 18px;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  font-weight: 800;
  color: var(--text);
}

.lead {
  font-size: 16px;
  color: var(--text-secondary);
  letter-spacing: -0.02em;
  line-height: 1.65;
}

/* BADGES & CHIPS */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.badge-partner {
  background: var(--green-soft);
  color: var(--green-text);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}

.chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* CARDS */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin: 16px 0;
  box-shadow: var(--shadow-sm);
}

.soft-card {
  background: var(--surface-soft);
  border: 1px solid var(--line-subtle);
}

/* HERO SECTION */
.hero {
  padding: 16px 0 10px;
}

.hero h1 { margin-bottom: 24px; }
.hero-question, .hero > .lead {
  text-align: center;
}
.hero-question {
  font-size: clamp(18px, 2.5vw, 23px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 12px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.intro-overview > p { color: var(--text-secondary); }
.intro-overview > .notice { color: var(--text-muted); }

.hero-art {
  margin: 20px 0 24px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--yellow-soft) 0%, var(--blue-soft) 50%, var(--green-soft) 100%);
  border: 1px solid var(--line);
}

.dots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.dot {
  aspect-ratio: 1;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

/* 화살표 칸만 글자를 키운다 (카드 크기·색은 그대로) */
.dot.is-arrow { font-size: 18px; }

.dot:nth-child(1) { background: var(--yellow); }
.dot:nth-child(2) { background: var(--blue); }
.dot:nth-child(3) { background: var(--red); }
.dot:nth-child(4) { background: var(--green); }
.dot:nth-child(5) { background: var(--mint); }

/* BENEFITS GRID */
.benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.benefit {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.benefit b {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 800;
  color: var(--text);
}

.benefit span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  display: block;
}

/* HOME "애착유형이란?" ACCORDION — 기본 접힘, 검사 CTA를 밀어내지 않는다 */
.intro-accordion {
  padding: 0;
  overflow: hidden;
}
.intro-accordion details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.intro-accordion details > summary::-webkit-details-marker { display: none; }
.intro-accordion-title { font-size: 15px; font-weight: 700; }
.intro-accordion-hint {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}
.intro-accordion-chevron {
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.2s ease;
}
.intro-accordion details[open] > summary .intro-accordion-chevron {
  transform: rotate(180deg);
}
.intro-accordion-body {
  padding: 8px 18px 20px;
  border-top: 1px solid var(--line);
}
.intro-accordion-body h4 {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  margin: 20px 0 6px;
  letter-spacing: -0.02em;
}
.intro-accordion-body h4:first-child { margin-top: 12px; }
.intro-accordion-body p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 8px 0;
}
.intro-accordion-body p b { color: var(--text); font-weight: 700; }
.intro-accordion-types {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  gap: 8px;
}
.intro-accordion-types li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.intro-accordion-types li b {
  color: var(--text);
  font-weight: 800;
  margin-right: 4px;
}

/* BUTTONS */
.btn {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-weight: 800;
  font-size: 15px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 52px;
  user-select: none;
}

.btn:active {
  transform: scale(0.985);
}

.btn-primary {
  background: var(--text);
  color: var(--surface);
}
.btn-primary:hover {
  opacity: 0.92;
}

.btn-secondary {
  background: var(--surface-soft);
  color: var(--text);
  /* 페이지 배경과 버튼 배경이 거의 같은 톤이라, 테두리로 윤곽을 세운다 */
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover {
  background: var(--surface-raised);
}

.btn-outline {
  background: var(--surface);
  /* 다크모드에서 카드 배경과 버튼 배경이 같아지는 자리가 있어,
     테두리만으로 윤곽이 서야 한다 → --line보다 진한 --line-strong 사용 */
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn-outline:hover {
  background: var(--surface-soft);
}

.btn-small {
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
  min-height: 36px;
  border-radius: var(--radius-pill);
}

.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

/* PROGRESS BAR */
.progress-wrap {
  margin-bottom: 24px;
}

.progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.progress {
  height: 6px;
  background: var(--surface-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--line-subtle);
}

.progress > div {
  height: 100%;
  background: var(--text);
  border-radius: var(--radius-pill);
  transition: width 0.2s ease;
}

/* TEST QUESTIONS */
.question-no {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.question {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.4;
  margin-bottom: 24px;
  color: var(--text);
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 24px;
}

.answer {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  transition: all 0.15s ease;
}

.answer:hover {
  background: var(--surface-soft);
  border-color: var(--text-subtle);
}

.answer.selected {
  background: var(--surface-raised);
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}

.radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s ease;
}

.answer.selected .radio {
  border-color: var(--text);
  background: var(--text);
}

.q-nav {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

/* RESULT SCREEN (FREE) */
.result-head {
  text-align: center;
  padding: 24px 10px 10px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.type-title {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.05em;
  margin: 4px 0;
  color: var(--text);
}

.type-sub {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.quote {
  padding: 14px 18px;
  border-left: 3px solid var(--text);
  background: var(--surface-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.55;
  text-align: left;
  margin: 14px 0;
}

/* SCORES SECTION */
.scores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.score-row {
  display: grid;
  grid-template-columns: 80px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.bar {
  height: 8px;
  background: var(--surface-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--line-subtle);
}

.bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
}

.bar.anxiety i { background: var(--red); }
.bar.avoid i { background: var(--blue); }
.bar.connection i { background: var(--yellow); }
.bar.reflect i { background: var(--purple); }
.bar.empathy i { background: var(--mint); }
.bar.solution i { background: var(--green); }
.bar.regulation i { background: var(--yellow); }
.bar.recovery i { background: var(--green); }

.score-num {
  text-align: right;
  font-weight: 800;
  color: var(--text);
}

.notice {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 10px;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.mini-card {
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.mini-card .accent {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text);
}

.mini-card p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.analysis-item {
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}

.analysis-item b {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

.analysis-item p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* DEEP ANALYSIS PROMOTIONAL HERO */
.deep-hero {
  background: linear-gradient(145deg, #1b202a 0%, #11141a 100%);
  border: 1px solid #2d3648;
  color: #ffffff;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.deep-hero h2 {
  color: #ffffff;
}

.deep-hero p {
  color: #c4cddb;
}

/* EDITORIAL DEEP REPORT (NEW 8-CHAPTER MAGAZINE EXPERIENCE) */
.deep-report-header {
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.chapter-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.chapter-headline {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.35;
  margin-bottom: 12px;
  color: var(--text);
}

.editorial-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
}

.editorial-p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 0.85em;
  letter-spacing: -0.015em;
}

.editorial-p:last-child {
  margin-bottom: 0;
}

.editorial-callout {
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border-left: 3px solid var(--text);
  margin: 18px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
}

/* Metric Chips in Deep Report */
.metric-summary-box {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 18px 0 24px;
}

.metric-chips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

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

.metric-chip-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
}

.chip-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.chip-score {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  margin: 2px 0;
}

.chip-status-tag {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-secondary);
  background: var(--surface-soft);
  padding: 1px 4px;
  border-radius: 4px;
}

/* 8-Step Flow in Chapter 3 */
.flow-steps-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
}

.flow-step-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.flow-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.flow-step-body strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.flow-step-body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.intervention-highlight {
  background: var(--yellow-soft);
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 14px;
}

.intervention-tag {
  font-size: 12px;
  font-weight: 900;
  color: var(--yellow-text);
  margin-bottom: 4px;
}

.intervention-highlight p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}

/* 3 Comparisons in Chapter 6 */
.comparison-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.comparison-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.comp-action-header {
  margin-bottom: 12px;
}

.comp-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

.comp-action-text {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  margin: 2px 0 0;
}

.comp-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 600px) {
  .comp-split-row {
    grid-template-columns: 1fr;
  }
}

.comp-subcard {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
}

.comp-subtag {
  display: block;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}

.green-tag { color: var(--green-text); }
.red-tag { color: var(--red-text); }

.comp-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ===== New v5.0 Deep-Analysis Sections (핵심 3가지 / 5대 심층 분석) ===== */

/* 핵심 3가지 */
.top-three-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.top-three-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.top-three-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-size: 13px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.top-three-body strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.5;
}

.top-three-body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* 두 마음 */
.two-minds-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.two-mind-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.two-mind-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--purple-text);
  margin: 0 0 10px;
  line-height: 1.5;
}

.two-mind-body {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* 행동 번역 (5단계) */
.behavior-pattern-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

.behavior-pattern-card:last-child {
  margin-bottom: 0;
}

.behavior-header {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.5;
}

.behavior-step-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
}

.behavior-step-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.behavior-step-label {
  flex-shrink: 0;
  width: 84px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  padding-top: 2px;
}

.behavior-step-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.behavior-step-row.translation {
  background: var(--green-soft);
  border-radius: var(--radius-sm);
  border-top: none;
  padding: 12px;
  margin-top: 6px;
}

.behavior-step-row.translation .behavior-step-label {
  color: var(--green-text);
}

.behavior-step-row.translation .behavior-step-text {
  color: var(--text);
  font-weight: 700;
}

/* 의도-오해 간극 */
.intent-gap-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.intent-gap-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.intent-gap-trigger {
  font-size: 14.5px;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.5;
}

.intent-gap-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .intent-gap-split {
    grid-template-columns: 1fr;
  }
}

.intent-gap-note {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.intent-gap-note.impact {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  margin-top: 4px;
}

/* Epilogue Priority Boxes */
.priority-box {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 14px;
}

.priority-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  background: var(--text);
  color: var(--surface);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
}

.priority-content {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.5;
}

.dialogue-quotes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.dialogue-quote-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.dialogue-sit-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.dialogue-quote-text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}

/* Relationship Manual Summary Card */
.personal-manual-card {
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-top: 16px;
}

.manual-card-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.manual-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.manual-title {
  font-size: 22px;
  font-weight: 900;
  margin: 4px 0 8px;
  color: var(--text);
}

.manual-quote {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}

.manual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .manual-grid {
    grid-template-columns: 1fr;
  }
}

.manual-item {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.manual-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.manual-item p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}

.manual-bottom-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 600px) {
  .manual-bottom-row {
    grid-template-columns: 1fr;
  }
}

.manual-bottom-item {
  padding: 14px;
  border-radius: var(--radius-sm);
}

.highlight-item {
  background: var(--yellow-soft);
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
}

.quote-item {
  background: var(--blue-soft);
  border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
}

.manual-bottom-item p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

/* COUPLE REPORT & INVITATION UX */
.couple-box {
  text-align: center;
  padding: 32px 20px;
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 24px;
}

.person {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  text-align: center;
}

.person small {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.person strong {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  display: block;
}

.person .mini {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.chapter-header {
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.chapter-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.chapter-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin: 4px 0 6px;
  color: var(--text);
}

.chapter-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Visual Loop */
.loop-container {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0;
}

.loop-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.loop-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.loop-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.loop-step-content b {
  display: block;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 2px;
}

.loop-step-content p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.loop-arrow {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}

/* SHARE GRID */
.share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 500px) {
  .share-grid {
    grid-template-columns: 1fr;
  }
}

/* TOAST */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--surface);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.22s ease;
  z-index: 100;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* SERVICE IDENTITY LINE — 사업자 footer 위에 놓이는 서비스 한 줄 소개 */
.service-identity {
  text-align: center;
  padding: 26px 22px 22px;
  border-top: 1px solid var(--line-subtle);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.service-identity strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.service-identity span {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
  margin: 0 auto;
}

/* 첫 페이지 "검사에서 함께 살펴보는 것" — 3개 의미 묶음 */
.benefit-group { margin-top: 16px; }
.benefit-group-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.hidden {
  display: none !important;
}

/* EXPANDABLE MODAL / DRAWER FOR INDIVIDUAL REPORT IN COUPLE VIEW */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0;
  animation: fadeIn 0.2s ease;
}

.modal-sheet {
  background: var(--surface);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  width: 100%;
  max-width: var(--content-max);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 20px 40px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.25s ease-out;
  border-top: 1px solid var(--line);
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: -24px;
  background: var(--surface);
  padding-top: 8px;
  z-index: 10;
}

.modal-close-btn {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

/* ==========================================================================
   PRICING & UPGRADE CHECKOUT ARCHITECTURE
   ========================================================================== */

.pricing-breakdown-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 14px 0;
}

.pricing-table {
  width: 100%;
  margin: 8px 0;
}

.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.pricing-row.deduction {
  color: var(--green-text);
  font-weight: 700;
}

.pricing-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

.pricing-row.total {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  padding-top: 4px;
}

/* 커플 화면 — 상태별(개인 심층 0/1/2명) 가격 안내 */
.couple-price-state {
  margin: 16px 0 14px;
  padding: 16px 18px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
}
.cps-check {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-text, #2f8f5b);
  margin-bottom: 8px;
}
.cps-amount-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
}
.cps-amount {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 2px 0 6px;
}
.cps-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.cps-note:empty { display: none; }

.pricing-trust-note {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  line-height: 1.5;
}

.value-checklist {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.value-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.45;
}

.value-checklist li::before {
  content: "✓";
  color: var(--green-text);
  font-weight: 900;
  font-size: 14px;
}

.couple-cta-card {
  margin-top: 24px;
  text-align: center;
  padding: 32px 22px;
  background: var(--surface-soft);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* HIDDEN EXPORT CARD (Off-screen render target for image download) */
.export-card-hidden {
  position: absolute;
  left: -99999px;
  top: -99999px;
  width: 360px;
  background: #ffffff;
  padding: 24px 20px;
  border-radius: 16px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: -999;
}

/* INSTAGRAM STORY CARD (9:16 share image, hidden html2canvas render target) */
.story-card-hidden {
  position: absolute;
  left: -99999px;
  top: -99999px;
  width: 405px;
  height: 720px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: -999;
  background: linear-gradient(165deg, #17191c 0%, #23262c 100%);
}

.story-card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 36px;
  box-sizing: border-box;
  color: #ffffff;
}

.story-brand {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #f5c538;
  margin-bottom: 28px;
}

.story-eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: #b8c1cf;
  margin-bottom: 10px;
}

.story-title {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 18px;
}

.story-quote {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #e4e7ec;
  max-width: 300px;
  margin-bottom: 36px;
}

.story-metrics {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}

.story-metric-label {
  font-size: 12px;
  font-weight: 800;
  color: #b8c1cf;
  margin-bottom: 6px;
  text-align: left;
}

.story-metric-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

.story-metric-bar i {
  display: block;
  height: 100%;
  background: #f5c538;
  border-radius: 999px;
}

.story-metric-num {
  font-size: 12px;
  font-weight: 700;
  color: #f0f3f8;
  text-align: right;
  margin-top: 4px;
}

.story-couple-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
}

.story-couple-label {
  font-size: 11px;
  font-weight: 700;
  color: #b8c1cf;
  margin-bottom: 6px;
}

.story-couple-type {
  font-size: 17px;
  font-weight: 900;
}

.story-couple-x {
  font-size: 18px;
  font-weight: 900;
  color: #f5c538;
}

.story-foot {
  font-size: 12px;
  font-weight: 700;
  color: #8b93a3;
  letter-spacing: 0.02em;
}

/* 커플 초대 대기 화면 — "결과가 나왔을까요?" 상태 확인 (버튼 클릭 시 1회 조회, polling 없음) */
.couple-status-check {
  margin-top: 16px;
}
.couple-status-check-divider {
  height: 1px;
  background: var(--line-subtle);
  margin: 0 0 14px;
}
.couple-status-msg {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 10px;
  text-align: center;
}
.couple-status-msg.is-checking {
  color: var(--text-secondary);
}
.couple-just-completed {
  text-align: center;
  border: 1.5px solid var(--green);
  background: var(--green-soft);
}

/* KAKAO SHARE BUTTON — Kakao's official brand yellow; disabled state (no
   KAKAO_JS_KEY configured server-side) is visually distinct and inert. */
.btn-kakao {
  background: #fee500 !important;
  border-color: #fee500 !important;
  color: #191600 !important;
  font-weight: 800;
}
.btn-kakao:disabled,
.btn-kakao.btn-disabled {
  background: var(--surface-soft) !important;
  border-color: var(--line-strong) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
  opacity: 0.85;
}

/* SAFE-AREA (iOS notch / home-indicator) — Samsung Internet, Chrome and
   Safari all support env(safe-area-inset-*) with viewport-fit=cover set. */
.topbar-inner {
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
  padding-top: calc(12px + env(safe-area-inset-top));
}
.site-footer {
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* ==========================================================================
   v4.0 — 리포트 후반부 강화 컴포넌트
   (기존 화이트 중심 · 연회색 카드 · 절제된 포인트 컬러 · 둥근 카드 유지)
   ========================================================================== */

/* 리포트 상단 액션 바 (되돌아가기 + 절제된 공유) */
.report-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

/* Tertiary 액션 — 버튼처럼 강해 보이지 않게 */
.btn-ghost-action {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.btn-ghost-action:hover {
  color: var(--text);
  border-color: var(--text-subtle);
  background: var(--surface-soft);
}

.section-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* 재방문 복구 카드 */
.returning-card {
  border: 1.5px solid var(--text);
  margin-top: 28px;
  margin-bottom: 0;
}
.returning-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 520px) {
  .returning-actions { flex-direction: row; }
  .returning-actions .btn { flex: 1; }
}

/* 비교형 UI — [편안할 때] VS [흔들릴 때] / [평상시] VS [흔들릴 때] */
.compare-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--surface);
}
.compare-block-axis {
  padding: 10px 14px;
  background: var(--surface-soft);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  border-bottom: 1px solid var(--line-subtle);
}
.compare-block-body {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .compare-block-body { grid-template-columns: 1fr 1fr; }
  .compare-side + .compare-side {
    border-left: 1px solid var(--line-subtle);
    border-top: none;
  }
}
.compare-side { padding: 13px 14px; }
.compare-side + .compare-side { border-top: 1px solid var(--line-subtle); }
.compare-side-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-bottom: 7px;
}
.compare-side-tag.calm { background: var(--green-soft); color: var(--green-text); }
.compare-side-tag.shaken { background: var(--red-soft); color: var(--red-text); }
.compare-side p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* 겉모습 / 속마음 대비 카드 */
.surface-inner-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface);
}
.surface-line {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 4px;
}
.surface-label, .inner-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
}
.surface-label { background: var(--surface-soft); color: var(--text-muted); }
.inner-label { background: var(--blue-soft); color: var(--blue-text); }
.surface-inner-divider {
  height: 1px;
  background: var(--line-subtle);
  margin: 12px 0;
}
.inner-line {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* A × B 만나는 지점 */
.meeting-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--surface);
}
.meeting-title {
  padding: 11px 14px;
  background: var(--surface-soft);
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  border-bottom: 1px solid var(--line-subtle);
}
.meeting-sides { display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .meeting-sides { grid-template-columns: 1fr 1fr; }
  .meeting-side + .meeting-side { border-left: 1px solid var(--line-subtle); border-top: none; }
}
.meeting-side { padding: 12px 14px; }
.meeting-side + .meeting-side { border-top: 1px solid var(--line-subtle); }
.meeting-side-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
  background: var(--surface-soft);
  color: var(--text-muted);
}
.meeting-side p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
.meeting-together {
  padding: 13px 14px;
  border-top: 1px solid var(--line);
  background: var(--yellow-soft);
}
.meeting-together-tag {
  display: block;
  font-size: 11.5px;
  font-weight: 900;
  color: var(--yellow-text);
  margin-bottom: 6px;
}
.meeting-together p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text); }

/* 관계 지도 (8대 지표 A/B/차이/의미) */
.map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 420px) {
  .map-grid { grid-template-columns: 1fr; }
}
.map-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  background: var(--surface);
}
.map-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.map-item-label { font-size: 12.5px; font-weight: 800; color: var(--text); }
.map-item-gap {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--text-muted);
  white-space: nowrap;
}
.map-item-gap.large { background: var(--red-soft); color: var(--red-text); }
.map-item-gap.moderate { background: var(--yellow-soft); color: var(--yellow-text); }
.map-bar-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.map-bar-who { font-size: 11px; font-weight: 800; color: var(--text-muted); width: 16px; flex: none; }
.map-bar {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  overflow: hidden;
}
.map-bar i { display: block; height: 100%; border-radius: var(--radius-pill); }
.map-bar.a i { background: var(--blue); }
.map-bar.b i { background: var(--purple); }
.map-bar-num { font-size: 11px; font-weight: 800; color: var(--text-secondary); width: 24px; text-align: right; flex: none; }
.map-item-meaning {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* 오해받기 쉬운 모습 */
.misread-side { margin-bottom: 14px; }
.misread-side-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 8px;
}
.misread-item {
  border-left: 3px solid var(--line);
  padding: 2px 0 2px 12px;
  margin-bottom: 10px;
}
.misread-item b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 4px; }
.misread-item p { margin: 0 0 3px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.misread-item .misread-actual { color: var(--mint-text); }

/* 마음번역사전 (방향 표시 포함) */
.translation-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}
.translation-dir {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--text-muted);
  margin-bottom: 8px;
}
.translation-step { margin: 0 0 5px; font-size: 13px; line-height: 1.6; }
.translation-step b { color: var(--text); }
.translation-step.misread { color: var(--red-text); }
.translation-step.inner { color: var(--text-secondary); }
.translation-step.actual { color: var(--mint-text); }

/* 최종 프로필 카드 (일반 카드보다 조금 더 특별하게, 단 디자인 톤은 유지) */
.profile-card {
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  padding: 22px 18px 18px;
  margin: 20px 0 14px;
  box-shadow: var(--shadow);
}
.profile-card-head { text-align: center; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.profile-tag {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin-bottom: 6px;
}
.profile-title {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
}
.profile-subtitle { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.profile-rows { margin-top: 14px; }
.profile-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-subtle);
}
.profile-row:last-child { border-bottom: none; }
.profile-row .p-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1.4;
}
.profile-row .p-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
}
.profile-final {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: var(--radius);
  background: var(--surface-soft);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
}
.profile-foot {
  margin-top: 12px;
  text-align: center;
  font-size: 10.5px;
  color: var(--text-subtle);
}

/* 프로필 카드 아래 공유 액션 (Primary 1개 + Tertiary 2개) */
.share-actions { margin-bottom: 22px; }
.share-actions .btn-primary { width: 100%; }
.share-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.share-actions-row .btn { flex: 1; }

/* 마지막 한 문장 */
.final-sentence-card {
  border-left: 4px solid var(--text);
  background: var(--surface-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.final-sentence-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.final-sentence-text {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* 리포트 하단 이동 버튼 */
.report-footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 14px;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 520px) {
  .report-footer-nav { flex-direction: row; }
  .report-footer-nav .btn { flex: 1; }
}

/* 모바일 터치 타깃 확보 — .btn 기본값(52px)은 위 한 곳에서만 정한다 */
@media (max-width: 520px) {
  .btn-small { min-height: 42px; }
  .btn-ghost-action { min-height: 38px; }
}

.profile-final-label {
  display: block;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

@media (min-width: 560px) {
  .meeting-sides.mutual { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v7 — 이름 입력 화면 · 무료 결과 재구성 · 홈 보관함
   모든 색은 테마 변수만 사용한다 → 라이트/다크 어디서도 대비가 유지된다.
   ========================================================================== */

/* --- 결과 준비 · 이름 입력 --------------------------------------------- */
.naming-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 0 40px;
  text-align: center;
}
.naming-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin: 14px 0 10px;
  color: var(--text);
}
.naming-lead {
  color: var(--text-secondary);
  margin-bottom: 26px;
  line-height: 1.7;
}
.naming-label {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.naming-input {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.naming-input::placeholder { color: var(--text-subtle); font-weight: 500; }
.naming-input:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 4px var(--surface-soft);
}
.naming-help {
  text-align: left;
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 8px 2px 0;
  line-height: 1.6;
}
.naming-error {
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red-text);
  margin: 8px 2px 0;
}
.naming-submit { width: 100%; margin-top: 22px; }
.naming-skip {
  display: block;
  margin: 14px auto 0;
  color: var(--text-muted);
  font-size: 13.5px;
}
/* 모바일 키보드가 올라와도 입력창과 버튼이 가려지지 않도록 여백 확보 */
#naming.screen.active { padding-bottom: 30vh; }

/* --- 무료 결과: 유형이 전부가 아니라는 프레이밍 ------------------------ */
.type-frame-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}
.profile-nuance {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border-left: 3px solid var(--text);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* --- 8개 지표 (전체 공개, 잠금 없음, 의미별 3묶음) --------------------- */
.dimension-rows { display: flex; flex-direction: column; gap: 18px; }
.dimension-group { display: flex; flex-direction: column; gap: 9px; }
.dimension-group-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 1px;
}

/* 지표별 고유색 — 8개를 훑을 때 색으로 먼저 구분되게 한다.
   (data-dimension 값이 곧 --dim-<key> 변수 이름이다) */
.dimension-rows,
.style-tracks {
  --dim-anxiety: var(--red);
  --dim-avoid: var(--blue);
  --dim-connectionDrive: var(--purple);
  --dim-talkPace: var(--mint);
  --dim-emotionalCheck: var(--yellow);
  --dim-problemSolving: var(--green);
  --dim-emotionalRegulation: var(--indigo);
  --dim-emotionalRecovery: var(--orange);
}

.dimension-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.dimension-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim-c, var(--text));
}
.dimension-name {
  flex: 0 0 66px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.dimension-gauge {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  overflow: hidden;
}
.dimension-gauge i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--dim-c, var(--text));
}
.dimension-score {
  flex: 0 0 28px;
  text-align: right;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dimension-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* 03 TOP3 안에서는 지표명 칩으로 계속 쓰이므로 그 자리에서는 여백을 준다 */
.top-three-body .dimension-tag { margin: 6px 0 8px; }

@media (max-width: 360px) {
  /* 매우 좁은 화면에서만 좌우 여백을 16px까지 줄인다 (기준은 20px) */
  main { padding: 20px 16px 72px; }
  .dimension-name { flex-basis: 58px; font-size: 12.5px; }
  .dimension-tag { font-size: 10.5px; padding: 2px 7px; }
  .dimension-score { font-size: 13.5px; }
}

/* --- 04 관계 조합 ------------------------------------------------------- */
.combo-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.combo-chip {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1.5px solid var(--text);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}
.combo-x { font-size: 14px; font-weight: 900; color: var(--text-muted); }

/* --- 05 관계 방식 — 문장으로 읽는 성향 -------------------------------- */
.style-tracks { display: flex; flex-direction: column; gap: 14px; }
.style-track {
  padding: 12px 14px 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border-left: 3px solid var(--dim-c, var(--text));
}
.style-track-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.style-track-head b { font-size: 14.5px; font-weight: 800; color: var(--text); }
.style-track-sentence {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* --- 06 장점 / 주의 ---------------------------------------------------- */
.strength-watch-list { display: flex; flex-direction: column; gap: 14px; }
.strength-watch-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--surface-raised);
}
.strength-watch-item > .sw-head {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
}
.sw-line { display: flex; gap: 10px; margin-top: 8px; }
.sw-key {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 9px;
  height: fit-content;
  border-radius: var(--radius-pill);
}
.sw-key.good { background: var(--green-soft); color: var(--green-text); }
.sw-key.watch { background: var(--yellow-soft); color: var(--yellow-text); }
.sw-line p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }

/* --- 07 심층분석 안내 리스트 ------------------------------------------- */
.deep-cta-points {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.deep-cta-points li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  opacity: .92;
}
.deep-cta-points li::before {
  content: '·';
  position: absolute;
  left: 6px;
  font-weight: 900;
}

/* --- 커플: 8대 지표 두 사람 비교 -----------------------------------------
   지금은 개별 막대 행이 아니라 레이더 차트+범례 묶음 하나만 들어있는
   컨테이너다(renderCoupleRadarChartHTML 참고). 예전 2열 막대 목록 시절의
   grid-template-columns:1fr 1fr가 데스크톱에서 남아 있으면, 자식이 하나뿐인
   그리드가 그 하나를 첫 번째 칸에만 놓고 두 번째 칸을 빈 채로 남겨 차트가
   왼쪽으로 쏠려 보였다. 자식 하나를 폭 안에서 중앙에 두는 것뿐이므로
   그리드 대신 flex로 중앙 정렬한다 — 카드 폭이 아무리 넓어져도(반응형)
   고정 여백 없이 항상 가운데를 유지한다.
   ---------------------------------------------------------------------- */
.couple-dimension-rows {
  display: flex;
  justify-content: center;
}
.couple-dimension-row {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.cdr-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}
.cdr-head b { font-size: 12.5px; font-weight: 800; color: var(--text); line-height: 1.3; }
.cdr-person { display: flex; align-items: center; gap: 8px; margin-top: 2px; line-height: 1.2; }
.cdr-name {
  flex: 0 0 68px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdr-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  overflow: hidden;
}
.cdr-bar i { display: block; height: 100%; border-radius: var(--radius-pill); }
/* A = 차분한 블루 · B = 코랄(웜레드) — 계열이 달라 한눈에 갈린다 */
.cdr-person.is-me .cdr-bar i { background: var(--blue); }
.cdr-person.is-partner .cdr-bar i { background: var(--red); }
.cdr-person.is-me .cdr-name { color: var(--blue-text); }
.cdr-person.is-partner .cdr-name { color: var(--red-text); }
.cdr-score {
  flex: 0 0 24px;
  text-align: right;
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --- 홈 보관함 — 결과 하나 = 행 하나. 모든 행이 같은 규칙을 쓴다. ------ */
.vault-group { margin-top: 16px; }
.vault-group-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: .02em;
  margin: 16px 0 8px;
}
.vault-list { display: flex; flex-direction: column; gap: 8px; }
.vault-list > .hidden { display: none; }
.vault-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.vault-item + .vault-item { margin-top: 8px; }
.vault-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vault-item-main strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-item-main span {
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-item-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  margin-top: 0;
}
.vault-item-actions .btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* 좁은 화면에서는 버튼을 아래로 내려 겹침·줄바꿈을 막는다 */
@media (max-width: 430px) {
  .vault-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .vault-item-main strong,
  .vault-item-main span { white-space: normal; }
  .vault-item-actions .btn { flex: 1; }
}

@media (max-width: 400px) {
  .naming-title { font-size: 24px; }
  .cdr-name { flex-basis: 60px; }
  .vault-item { flex-wrap: wrap; }
  .vault-item .btn-small { width: 100%; }
}

/* 이름 바꾸기 (결과 화면) — 같은 resultId에서 표시 이름만 갱신한다 */
.eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.name-edit-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.name-edit-btn:hover { color: var(--text); border-color: var(--text); }

/* ==========================================================================
   8대 지표 레이더 차트 (개인 심층분석 SUMMARY)
   ========================================================================== */
.radar-wrap {
  width: 100%;
  max-width: 520px;
  margin: 20px auto 0;
}
.radar-wrap:empty { display: none; }
.radar-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 연인 화면의 두 사람 겹침 레이더 차트 범례 — 저장 이미지에서도 잘리지
   않도록 SVG 바깥의 일반 HTML로 둔다(고정폭·overflow 없음). */
.couple-radar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}
.couple-radar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}
.radar-caption {
  margin: 6px 0 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
}
.radar-caption:empty { display: none; }
@media (max-width: 380px) {
  .radar-caption { font-size: 12px; text-align: left; }
}

/* ==========================================================================
   무료 결과 — 03 눈에 띄는 3가지 / 04 관계의 장점 / 05 두 얼굴
   ========================================================================== */

/* 03 — 한 특징을 세 장면(평소 / 가까운 사이 / 흔들릴 때)으로 */
.feature-scene { margin-top: 12px; }
.feature-scene-key {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: .01em;
}
.feature-scene p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* 04 — 강점 카드 */
.strength-list { display: flex; flex-direction: column; gap: 12px; }
.strength-item {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border-left: 3px solid var(--purple);
}
.strength-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.02em;
}
.strength-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* 05 — 도움이 될 때 / 엇갈릴 때 */
.strength-watch-item { border-left: 3px solid var(--dim-c, var(--text)); }

/* ==========================================================================
   결과 공유 + 상품 카드 (개인 / 커플 동일 규칙)
   ========================================================================== */
.share-grid { display: flex; flex-direction: column; gap: 10px; }
.share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.share-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.share-row-main strong { font-size: 14px; font-weight: 800; color: var(--text); }
.share-row-main span { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.share-opt { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.share-opt input { width: 14px; height: 14px; accent-color: var(--text); }
.share-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.share-row .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 430px) {
  .share-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .share-row-actions .btn, .share-row > .btn { flex: 1; }
}

/* 두 상품 카드는 크기·밀도·타이포·버튼을 동일하게 맞춘다.
   한쪽만 크고 어두운 카드로 만들면 다른 한쪽이 부속 상품처럼 읽힌다. */
.product-card {
  border: 1.5px solid var(--text);
  background: var(--surface);
}
.product-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.product-tag {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--text);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.product-price {
  font-size: 13px;
  font-weight: 900;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.product-owned {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--green);
  /* 밝은 초록 위에서는 흰 글씨가 읽히지 않는다 (대비 2.3:1) */
  color: #0d1411;
  font-size: 11.5px;
  font-weight: 800;
}
.product-title {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  color: var(--text);
}
.product-lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.product-points {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 7px;
}
.product-points li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}
.product-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
}
.product-cta { width: 100%; font-size: 15px; font-weight: 900; padding: 14px 20px; }
.product-cta-row { display: flex; gap: 8px; }
.product-cta-side { flex: 0 0 auto; width: auto; padding: 14px 18px; }
.product-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 가격은 가치를 다 보여준 뒤 CTA 바로 위에서만 (§4·§5) */
.product-price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 18px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.product-price-amount {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
}
.product-price-caption {
  font-size: 12px;
  color: var(--text-muted);
}
.product-tag-note {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* 개인 심층분석 마무리 — 한 문장 */
.closing-final {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border-left: 3px solid var(--purple);
}
.closing-final-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-muted);
}
.closing-final p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
}

/* 커플 갈등 루프 — 단계 + 의도 + 상대의 해석 */
.loop-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  margin-bottom: 14px;
}
.loop-layer {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-soft);
  border-left: 2px solid var(--green);
}
.loop-layer.misread { border-left-color: var(--red-text); }
.loop-layer-key {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
}
.loop-layer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.loop-golden {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--yellow-soft);
  border-left: 3px solid var(--yellow);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
}

/* 커플 — 공통점이 관계를 어떻게 움직이는가 (두 번째 층) */
.fit-effect {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* 커플 챕터 안의 소제목 (같은 주제를 한 챕터로 묶을 때) */
.chapter-subhead {
  margin: 26px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* 상품 카드의 보조 동선 (카카오 초대) — 주 CTA와 높이를 맞추되 강조는 낮춘다 */
.product-sub-cta {
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 20px;
}

/* 커플 초대 대기 화면 — 공유 / 링크 복사 */
.invite-actions { display: flex; flex-direction: column; gap: 8px; }
.invite-actions .btn { width: 100%; }
@media (min-width: 480px) {
  .invite-actions { flex-direction: row; }
  .invite-actions .btn { flex: 1; }
}

/* ==========================================================================
   계정 (카카오 로그인) — 보관함 아래, 선택 기능이므로 조용한 톤
   ========================================================================== */
/* 보관함 카드보다 한 단계 낮은 보조 블록 — 시선이 여기서 멈추지 않게
   테두리를 옅게, 배경을 한 톤 눌러서 카드와 급을 다르게 둔다. */
.account-box {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.account-signin strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.account-signin p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.account-login-btn { width: 100%; font-size: 14.5px; font-weight: 800; padding: 13px 20px; }
.account-note {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.account-signed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-signed-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.account-signed-main strong { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.account-signed-main span { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.account-signed .btn { flex: 0 0 auto; }
@media (max-width: 430px) {
  .account-signed { flex-direction: column; align-items: stretch; }
  .account-signed .btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   내 보관함 탭 — 기본 결과 / 개인 심층 / 연인 심층
   기존 카드 스타일 위에 얇게 얹는다 (홈 디자인은 그대로 유지).
   ------------------------------------------------------------------------- */
.vault-tabs {
  display: flex;
  gap: 6px;
  margin: 16px 0 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vault-tabs::-webkit-scrollbar { display: none; }
.vault-tab {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.vault-tab.is-active {
  border-color: var(--line-strong);
  background: var(--surface-raised);
  color: var(--text);
}
.vault-tab-count {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-subtle);
}
.vault-tab.is-active .vault-tab-count { color: var(--text-muted); }

.vault-empty,
.vault-login-hint {
  margin: 12px 2px 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* 심층 결과 줄은 무료 결과와 한눈에 구분되게 — 색만이 아니라 라벨도 함께 쓴다 */
.vault-item.is-deep { border-left: 3px solid var(--purple); }
.vault-item.is-couple { border-left: 3px solid var(--red); }
.vault-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.vault-tag.is-beta { border-color: var(--line-strong); }

/* 베타 안내 — 눈에 띄되 "공사 중" 느낌이 나지 않게 조용한 톤 */
.beta-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 2px 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.beta-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--text);
}
.vault-progress { margin-top: 4px; }

/* -------------------------------------------------------------------------
   내 보관함 — 세로 카드 3개 (개인 무료 / 개인 심층 / 연인 심층)
   폭·높이 규칙을 같게 두어 "같은 급의 항목"으로 읽히게 한다.

   색 원칙 — 카드마다 포인트 컬러를 하나만 정하고(--vault-accent),
   그 색을 "왼쪽 라인 · 오른쪽 상단 상태 배지 · 헤더의 아주 옅은 tint"
   세 곳에서만 쓴다. 배경은 어느 카드든 흰색(밝은 표면)을 유지한다.
   한쪽에만 색이 걸려 기울어 보이던 문제를 좌우 균형으로 푸는 방식이다.

   위계 — 카테고리 라벨(작게) < 유형명(가장 크게) < 보조 정보(톤다운).
   ------------------------------------------------------------------------- */
.vault-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.vault-card {
  --vault-accent: var(--yellow);
  --vault-accent-text: var(--yellow-text);
  --vault-accent-soft: var(--yellow-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 116px;
  padding: 16px 16px 16px 17px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--vault-accent);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
/* 헤더 구역에만 걸리는 아주 옅은 tint — 카드 전체를 칠하지 않는다 */
.vault-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 46px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(to bottom, var(--vault-accent-soft), transparent);
  opacity: .75;
  pointer-events: none;
}
.vault-card > * { position: relative; }
.vault-card.is-deep {
  --vault-accent: var(--purple);
  --vault-accent-text: var(--purple-text);
  --vault-accent-soft: var(--purple-soft);
}
.vault-card.is-couple {
  --vault-accent: var(--red);
  --vault-accent-text: var(--red-text);
  --vault-accent-soft: var(--red-soft);
}
.vault-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
  flex-wrap: wrap;
}
.vault-card-title { font-size: 12.5px; font-weight: 800; color: var(--text-secondary); }
/* 보관함 카드 종류 */
.vault-cards .vault-card-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  word-break: keep-all;
}
/* 상태 — 우측 상단 고정, 카드 색 계열의 조용한 배지 */
.vault-card-state {
  flex: 0 1 auto;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--vault-accent);
  background: var(--vault-accent-soft);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--vault-accent-text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-card-empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.vault-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* 유형명 — 카드에서 가장 잘 보여야 하는 정보 */
.vault-card-main strong {
  font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 날짜·설명 — 보조 정보 */
.vault-card-main span { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.vault-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 2px; }
.vault-card-actions .btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
}

/* 데스크톱에서는 여백을 조금 더 넉넉히 — 카드가 넓어지므로 */
@media (min-width: 560px) {
  .vault-cards { gap: 14px; }
  .vault-card { padding: 18px 20px 18px 21px; gap: 12px; }
  /* 1버튼 카드는 넓고 안정감 있게, 2버튼 카드는 같은 폭으로 나란히 */
  .vault-card-actions .btn { flex: 1 1 0; max-width: 260px; }
}

/* 리포트 마지막의 "핵심" 목록 — 본문을 다시 읽지 않아도 남는 것 */
.key-takeaways {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.key-takeaway {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.key-takeaway-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================================
   사이트 Footer — 사업자 정보 · 법적 고지 (모든 화면 하단에 공통 표시)
   ========================================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  margin-top: 12px;
}
.site-footer-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-footer-brand {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
}
.site-footer-lines,
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.site-footer-lines > span:not(:last-child)::after,
.site-footer-links > a:not(:last-child)::after {
  content: ' ·';
  margin-left: 6px;
  display: inline-block;
  color: var(--text-muted);
}
.site-footer-lines a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer-note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 2px 0;
  line-height: 1.65;
  word-break: keep-all;
}
.site-footer-links { margin-top: 4px; }
.site-footer-links a {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer-links a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   v003 - result report visual polish (editorial layout)
   Widen result/deep/couple screens. Reduce repeated gray cards.
   Number + big title + body + whitespace. Analysis content unchanged.
   ========================================================================== */

/* --- width: widen app, keep the question screen narrow --- */
.app { max-width: calc(var(--report-max) + 40px); }
#home, #test, #naming, #errorScreen { width: 100%; max-width: var(--content-max); margin-inline: auto; }
#result, #deep, #couple { width: 100%; max-width: var(--report-max); margin-inline: auto; }

/* 본문 문단은 그래프·그리드와 같은 카드 폭(920px)을 그대로 쓴다. 한때
   가독성을 이유로 --prose-max(760px)로 캡을 씌운 적이 있었는데, 그 결과
   차트/그리드는 카드 끝까지 가는데 문단만 그 앞에서 끝나면서 본문이
   왼쪽으로 쏠려 보이고 오른쪽에 빈 공간이 남는 문제가 생겼다 — 그래서
   다시 캡을 없앴다. 왼쪽 정렬은 유지하고(가운데 정렬 아님), 여러 줄
   본문에는 양쪽 정렬을 적용해 오른쪽 끝이 깔끔하게 떨어지게 한다. */
.report-screen .type-lean-narrative,
.report-screen .type-lean-explanation,
.report-screen .report-p,
.report-screen .editorial-p,
#result .top-three-body p,
#result .feature-scene p,
#result .strength-item p,
#result .sw-line p,
#result .section-intro,
#result .result-key-sentence,
#deep .editorial-p,
#deep .editorial-card > .lead,
#deep #deepCoupleCtaDesc,
#couple #coupleResult .card > .lead,
#couple #coupleResult .card > p,
#couple #coupleResult .editorial-p,
#modalDeepContent .editorial-p,
.report-key-sentence,
.reading-flow p,
#home .intro-overview p,
#home .intro-accordion-body p,
#home .intro-accordion-types li p,
#result .intro-accordion-body p {
  text-align: justify;
  text-align-last: left;
}

/* --- result top: attachment lean as the hero --- */
.result-lead-head {
  text-align: left;
  padding: 12px 0 4px;
  border: 0;
}
.result-lead-head .eyebrow {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.type-lean-title {
  font-size: 34px;
  line-height: 1.24;
  letter-spacing: -0.045em;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 16px;
}
.type-lean-narrative, .type-lean-explanation {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
/* 1층(유형 설명)은 2층(개인화 서술)과 시각적으로도 구분되도록 옅은 배경을
   준다 — "일반 설명 → 그런데 당신은" 순서가 한눈에 읽히게 한다. */
.type-lean-explanation {
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.type-lean-caption {
  /* 유형 일반 설명은 H1과 의미가 겹치므로 화면에서는 숨긴다 (DOM에는 유지) */
  display: none;
}
.result-lead-head .chips .chip {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-secondary);
  font-size: 12.5px;
}

/* --- report-section: editorial section, not a card --- */
.report-section { margin: 40px 0; }
.section-kicker {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.report-section > h2 {
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
}
.report-p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.report-p:empty { display: none; }

/* 8 metrics framed once, like a profile block */
.profile-metrics {
  margin-top: 18px;
  padding: 20px 20px 22px;
  background: var(--surface-soft);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
}
.profile-metrics .dimension-group-label { color: var(--text-secondary); }
.profile-metrics .dimension-name { font-size: 14px; }
.profile-metrics .dimension-score { font-size: 14px; font-weight: 800; }

/* --- 3 standout points: number + big title + body, no gray box --- */
#result .top-three-list { gap: 6px; margin-top: 18px; }
#result .top-three-item {
  display: block;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 0 22px;
}
#result .top-three-item:first-child { border-top: 0; padding-top: 4px; }
#result .top-three-num {
  width: auto; height: auto;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  display: block;
  place-items: initial;
  margin-bottom: 10px;
}
#result .top-three-body strong {
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
#result .top-three-body p { font-size: 15.5px; line-height: 1.78; }
#result .feature-scene { margin-top: 14px; }
#result .feature-scene p { font-size: 15px; line-height: 1.75; }

/* --- strengths: more presence --- */
#result .strength-list { gap: 4px; margin-top: 14px; }
#result .strength-item {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 22px 0;
}
#result .strength-item:first-child { border-top: 0; padding-top: 4px; }
#result .strength-item strong { font-size: 18px; line-height: 1.4; letter-spacing: -0.03em; margin-bottom: 10px; display: block; }
#result .strength-item p { font-size: 15.5px; line-height: 1.78; color: var(--text-secondary); }

/* --- intent vs how it lands: neutral, not warning colors --- */
#result .strength-watch-list { gap: 18px; margin-top: 16px; }
#result .strength-watch-item { border-left-color: var(--line-strong); padding-left: 16px; }
#result .sw-key.good { background: var(--surface-soft); color: var(--text-secondary); }
#result .sw-key.watch { background: var(--surface-soft); color: var(--text-secondary); }
#result .sw-line p { font-size: 15px; line-height: 1.75; }

/* --- personal deep: chapters as a report --- */
#deep .deep-report-header { padding: 8px 0 28px; }
#deep .deep-report-header h1 { font-size: 30px; line-height: 1.28; letter-spacing: -0.045em; }
#deep .deep-report-header .lead { font-size: 17px; line-height: 1.8; }

#deep .editorial-card {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 40px 0 8px;
  margin: 0;
}
#deep #deepCaptureArea > .editorial-card:first-of-type { border-top: 0; }
/* 무료 결과 챕터(#result .reading-chapter)도 개인 심층과 같은 "선으로만 구분되는"
   방식을 쓴다 — 챕터마다 똑같이 둥근 상자를 반복해서 보여주면 리포트가 다
   비슷해 보인다는 피드백을 반영해, 카드 테두리 대신 위쪽 구분선만 남긴다. */
#result .reading-chapter {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 32px 0 8px;
  margin: 0;
}
#result #freeReadingChapters > .reading-chapter:first-of-type { border-top: 0; }

/* 질문 리드 문장 + 목차 — 긴 리포트를 읽기 전에 전체 구성을 훑을 수 있게 한다. */
.deep-question-lead {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 8px 0 18px;
}
.chapter-toc { margin: 0 0 8px; }
.chapter-toc-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
}
.chapter-toc-list li { margin: 0; }
.chapter-toc-list a {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  text-decoration: none;
}
.chapter-toc-list a:hover { color: var(--text); border-color: var(--line-strong); }

/* 분석 로딩 실패 상태 — 빈 화면을 정상 완료처럼 보이지 않게 한다. */
.section-loading { color: var(--text-muted); font-size: 14.5px; padding: 24px 0; }
.section-load-error {
  padding: 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
  text-align: center;
}
.section-load-error p { margin: 0 0 12px; }
#deep .chapter-badge {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
#deep .chapter-headline {
  font-size: 25px;
  line-height: 1.34;
  letter-spacing: -0.038em;
  margin-bottom: 16px;
}
#deep .editorial-card > .lead {
  font-size: 17.5px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
#deep .editorial-p { font-size: 16.5px; line-height: 1.85; margin-bottom: 18px; }
#deep .chapter-subhead { font-size: 15px; margin-top: 22px; }
#deep .key-takeaways li { font-size: 15.5px; line-height: 1.7; }
#deep .editorial-callout { font-size: 16px; line-height: 1.7; padding: 20px 22px; border-radius: var(--radius); }
#deep .metric-summary-box, #deep .closing-final, #deep .profile-card, #deep .couple-cta-card { border-radius: var(--radius); }

/* --- couple deep: big section units --- */
#couple #coupleChaptersWrap .card,
#couple #coupleResult > .card {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 38px 0 8px;
  margin: 0;
}
#couple #coupleResult .chapter-headline { font-size: 24px; line-height: 1.34; letter-spacing: -0.035em; margin-bottom: 14px; }
#couple #coupleResult .card .lead,
#couple #coupleResult .card p { font-size: 16px; line-height: 1.8; }
#couple .analysis-list li { font-size: 15.5px; line-height: 1.78; }
#couple #coupleUpgradeCard,
#couple #coupleDimensionCompareCard,
#couple .profile-card,
#couple .compare .person {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
}

/* --- product cards: value before price --- */
.product-card { padding: 26px 24px; }
.product-card .product-title { font-size: 21px; line-height: 1.35; margin: 6px 0 10px; }
.product-card .product-lead { font-size: 15px; line-height: 1.72; }
#coupleInviteCta { background: var(--surface-soft); }

@media (max-width: 700px) {
  main { padding: 20px 20px 72px; }
  #result, #deep, #couple, #home, #test, #naming { max-width: 100%; }
  .type-lean-title { font-size: 27px; }
  .type-lean-narrative, .type-lean-explanation { font-size: 16px; line-height: 1.8; }
  .report-section { margin: 32px 0; }
  .report-section > h2 { font-size: 20px; }
  #result .top-three-body strong { font-size: 17.5px; }
  #deep .chapter-headline { font-size: 22px; }
  #deep .editorial-card { padding-top: 32px; }
  #deep .editorial-card > .lead { font-size: 16.5px; }
  #deep .editorial-p { font-size: 16px; }
  #couple #coupleChaptersWrap .card, #couple #coupleResult > .card { padding-top: 30px; }
}

/* ==========================================================================
   v004 — 개인/연인 심층 콘텐츠 완성도
   ========================================================================== */

/* 상품 소개 도치형 한 문장 */
.product-tagline-echo {
  margin: 14px 0 4px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* 개인 심층 — '지표가 합쳐지면' 세 영역 조합 해석 */
.three-area {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.three-area:first-child { border-top: 0; padding-top: 2px; }
.three-area-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
}
.three-area-reading {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.three-area-strength {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
}
.three-area-strength span {
  font-weight: 800;
  color: var(--text-muted);
  margin-right: 4px;
}
#deep .three-area-reading { font-size: 16px; }

@media (max-width: 700px) {
  .three-area-reading, #deep .three-area-reading { font-size: 15.5px; }
}


/* Free result reading flow and product questions. */
/* 핵심 문장 — 본문과 굵기만 다르면 훑어볼 때 눈에 안 들어와서, 왼쪽 강조선 +
   옅은 배경으로 인용구처럼 도드라지게 한다. 무료 결과·개인 심층이 공유. */
#result .result-key-sentence, #deep .result-key-sentence {
  margin: 20px 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  font-weight: 700;
  padding: 14px 18px;
  border-left: 3px solid var(--purple);
  background: var(--purple-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
#result .dimension-rows, #deep .dimension-rows { gap: 14px; }
#result #coreSummary .report-p + .report-p { margin-top: 16px; }
#result .feature-scene p + p { margin-top: 10px; }
#result .strength-item strong { color: var(--text); }
#result .sw-line { display: block; margin-top: 14px; }
#result .sw-key { display: inline-block; margin-bottom: 6px; white-space: normal; }
#result .result-share .lead { margin: 8px 0 18px; }
#result .result-share-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#result .result-share-actions .btn { flex: 1 1 180px; margin: 0; }
#result #couplePriceNote { margin: 0 0 18px; }

@media (max-width: 640px) {
  #result .result-key-sentence, #deep .result-key-sentence { font-size: 17px; }
}

/* Shared reading rhythm. Controls, colour tokens and theme behaviour stay intact. */
.screen h1 { line-height: 1.3; }
.screen h2, .screen .chapter-headline { line-height: var(--title-leading); }
.screen h3 { line-height: 1.4; }
.screen .card, .screen .editorial-card, .screen .couple-cta-card {
  width: 100%; box-sizing: border-box; padding: var(--space-8); margin-block: 0 var(--space-6);
}
.screen .lead, .screen .report-p, .screen .editorial-p, .screen .section-intro {
  line-height: var(--body-leading); margin-block: 0 var(--space-4);
}
#result .top-three-body p, #result .strength-item p, #result .sw-line p,
#result .type-lean-narrative, #deep .type-lean-narrative { line-height: var(--body-leading); }
#result .top-three-body p + p, #result #coreSummary .report-p + .report-p { margin-top: var(--space-4); }
#result .section-intro { color: var(--text-secondary); }
#result .product-questions li { padding-block: var(--space-6); }
#result .product-price-line { margin-top: var(--space-6); margin-bottom: var(--space-4); }
.service-identity, .site-footer-inner { max-width: var(--content-max); box-sizing: border-box; margin-inline: auto; }
.deep-report-header, .chapter-header { margin-bottom: var(--space-8); }
#deep .deep-report-header .lead { line-height: var(--body-leading); }
#deep .editorial-p, #couple #coupleResult .editorial-p, #modalDeepContent .editorial-p {
  font-size: 16px; line-height: var(--body-leading); margin-bottom: var(--space-4);
}
.reading-chapter { border-top: 1px solid var(--line); }
.reading-chapter .chapter-badge { margin-bottom: var(--space-3); }
.reading-chapter .chapter-headline { font-size: clamp(22px, 3vw, 27px); margin-bottom: var(--space-6); word-break: keep-all; overflow-wrap: anywhere; }
.report-key-sentence { font-size: 18px; font-weight: 750; line-height: 1.65; margin: 0 0 var(--space-6); color: var(--text); }
.report-type-lean { font-weight: 650; color: var(--text-secondary); margin-bottom: var(--space-4); }
.reading-comparison { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.reading-comparison h3 { margin: 0 0 var(--space-4); font-size: 17px; }
.reading-comparison-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); }
.reading-comparison-columns.is-triple { grid-template-columns: repeat(3,minmax(0,1fr)); }
.reading-scene { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.reading-scene h3 { margin: 0 0 var(--space-4); font-size: 17px; }
.reading-scene-row { margin: 0 0 var(--space-3); line-height: var(--body-leading); color: var(--text-secondary); }
.reading-scene-row:last-child { margin-bottom: 0; }
.reading-scene-row strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 14px; }
.reading-comparison-columns b { display: block; margin-bottom: var(--space-2); font-size: 14px; color: var(--text); }
.reading-comparison-columns p { margin: 0; color: var(--text-secondary); line-height: var(--body-leading); }
.reading-flow { list-style: none; margin: var(--space-6) 0 0; padding: 0 0 0 var(--space-6); border-left: 2px solid var(--line-strong); counter-reset: reaction; }
.reading-flow li { position: relative; padding: 0 0 var(--space-6) var(--space-4); counter-increment: reaction; }
.reading-flow li::before { content: counter(reaction); position: absolute; left: -37px; top: 0; width: 24px; height: 24px; text-align: center; border-radius: 50%; background: var(--surface-soft); color: var(--text); font-size: 13px; line-height: 24px; }
.reading-flow li:last-child { padding-bottom: 0; }
.reading-flow p { margin: var(--space-2) 0 0; line-height: var(--body-leading); color: var(--text-secondary); }
.report-summary .profile-row { padding-block: var(--space-4); }
#deepMetricRows .cdr-person { grid-template-columns: minmax(0,1fr) 36px; }
#coupleReadingChapters > .reading-chapter:first-child { background: var(--surface-soft); }
#modalDeepContent { max-width: var(--report-max); margin-inline: auto; }
@media (max-width: 700px) {
  .screen .card, .screen .editorial-card, .screen .couple-cta-card { padding: var(--space-6) var(--space-4); }
  .reading-comparison-columns { grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
  .report-key-sentence { font-size: 17px; }
}