/* Extracted from v8 prototype 08-constella-fitscore-v6-fulltraits.html.
   Everything is scoped under .cfs-report so this stylesheet does not bleed
   into the host profile page when injected. The container also owns the
   reset (box-sizing, font, color, background) so it looks identical to
   the prototype while leaving the document body alone. */
  .cfs-report {
    /* CSS vars used by every descendant — scoped here, not :root. */
    --bg: #faf7f2;
    --surface: #ffffff;
    --surface-deep: #faf7f2;
    --surface-elev: #f4efe6;
    --border: #e8e2d4;
    --border-strong: #d4cbb8;
    --accent: #7c3aed;
    --accent-strong: #5b21b6;
    --accent-deep: #4c1d95;
    --accent-soft: rgba(124, 58, 237, 0.30);
    --gold: #b45309;
    --gold-light: #d97706;
    --cream: #fffbeb;
    --text: #1f1d2e;
    --text-sub: #525065;
    --text-muted: #8c8a99;
    --elem-wood: #2d8659;
    --elem-fire: #d63031;
    --elem-earth: #d4a017;
    --elem-metal: #6b6862;
    --elem-water: #2d5fa3;
    --amber: #d97706;
    --warm-red: #b91c1c;
    --success: #059669;
    --shadow: 0 2px 12px rgba(31, 29, 46, 0.06);
    --shadow-elev: 0 8px 28px rgba(31, 29, 46, 0.10);

    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px;
    background: #faf7f2;
    color: #1f1d2e;
    font-family: 'Pretendard Variable', 'Noto Sans KR', -apple-system, sans-serif;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
  }
  .cfs-report, .cfs-report *, .cfs-report *::before, .cfs-report *::after {
    box-sizing: border-box;
  }

  /* Hero */
  .cfs-hero { text-align: center; padding: 64px 0 48px; border-bottom: 1px solid var(--accent-soft); }
  .cfs-brand-wordmark { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.6em; color: var(--accent); margin-bottom: 16px; text-transform: uppercase; }
  .cfs-hero-title { font-family: 'Noto Serif KR', serif; font-size: 38px; font-weight: 900; color: var(--text); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
  .cfs-hero-title em { color: var(--accent); font-style: normal; }
  .cfs-hero-sub { font-size: 13px; color: var(--text-sub); margin: 0 0 24px; letter-spacing: 0.04em; }
  .cfs-hero-pair { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 20px; }
  .cfs-hero-pair-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-feature-settings: 'tnum'; }
  .cfs-hero-pair-name { font-family: 'Noto Serif KR', serif; font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
  .cfs-hero-pair-birth { color: var(--text-muted); }
  .cfs-hero-pair-x { font-family: 'Noto Serif KR', serif; font-size: 14px; color: var(--accent); padding: 2px 0; }

  /* Small score badge in hero (deterministic, shown immediately during
     progressive render before any LLM section is ready). */
  .cfs-hero-score { display: inline-block; margin-top: 12px; font-family: 'Noto Serif KR', serif; font-size: 32px; font-weight: 900; line-height: 1; color: var(--accent); }
  .cfs-hero-score small { font-size: 13px; color: var(--text-sub); font-weight: 600; margin-left: 2px; }

  /* Pair summary card (formerly cfs-quickscan in hero, now in pair-block). */
  .cfs-pair-summary-card { background: linear-gradient(180deg, #ffffff 0%, #f6f0ff 100%); border: 1px solid var(--accent-soft); border-radius: 20px; padding: 28px 22px; margin: 0 0 24px; box-shadow: var(--shadow-elev); }
  .cfs-pair-score { font-family: 'Noto Serif KR', serif; font-size: 72px; font-weight: 900; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; text-align: center; }
  .cfs-pair-score small { font-size: 18px; color: var(--text-sub); -webkit-text-fill-color: var(--text-sub); }
  .cfs-pair-tag { text-align: center; font-family: 'Noto Serif KR', serif; font-size: 17px; font-weight: 700; color: var(--text); margin: 10px 0 6px; }
  .cfs-pair-tag-en { text-align: center; font-family: 'Cinzel', serif; font-size: 10px; color: var(--text-sub); letter-spacing: 0.2em; margin-bottom: 16px; }
  .cfs-pair-keywords { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
  .cfs-pair-kw { background: #f3edff; border: 1px solid var(--accent-soft); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--text); font-weight: 600; }
  .cfs-pair-summary-text { font-size: 13px; line-height: 1.7; color: var(--text-sub); margin-top: 16px; text-align: center; padding: 12px 0 0; border-top: 1px dashed var(--border); }
  .cfs-pair-summary-text strong { color: var(--accent); }

  /* Progressive indicator — sits below the last rendered section while
     the queue worker is still emitting. Composite spinner: rotating
     border ring + pulsing emoji in the centre. */
  .cfs-progressive-indicator { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; color: var(--text-sub); font-size: 13px; }
  .cfs-progressive-spinner { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
  .cfs-progressive-spinner::before { content: ''; position: absolute; inset: 0; border: 2px solid rgba(124, 58, 237, 0.15); border-top-color: var(--accent); border-radius: 50%; animation: cfs-progressive-spin 0.85s linear infinite; }
  .cfs-progressive-spinner-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; animation: cfs-progressive-pulse 1.6s ease-in-out infinite; }
  @keyframes cfs-progressive-spin { to { transform: rotate(360deg); } }
  @keyframes cfs-progressive-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.88); } 50% { opacity: 1; transform: scale(1.1); } }

  /* Section base */
  .cfs-section { padding: 48px 0; }
  .cfs-divider { text-align: center; margin: 0 auto; padding: 16px 0; }
  .cfs-divider::before, .cfs-divider::after { content: ''; display: inline-block; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); vertical-align: middle; }
  .cfs-divider-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin: 0 12px; vertical-align: middle; }

  /* Person header */
  .cfs-person-header { text-align: center; margin-bottom: 28px; }
  .cfs-person-badge { display: inline-block; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.3em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 14px; text-transform: uppercase; margin-bottom: 16px; }
  .cfs-person-name { font-family: 'Noto Serif KR', serif; font-size: 28px; font-weight: 800; color: var(--text); }
  .cfs-person-birth { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-feature-settings: 'tnum'; }

  /* Subsection title */
  .cfs-subsection-title { font-family: 'Noto Serif KR', serif; font-size: 18px; font-weight: 700; color: var(--text); margin: 40px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 10px; }
  .cfs-subsection-title::before { content: ''; display: inline-block; width: 4px; height: 14px; background: var(--accent); border-radius: 2px; }
  .cfs-subsection-title small { font-family: 'Cinzel', serif; font-size: 10px; color: var(--text-muted); letter-spacing: 0.2em; margin-left: auto; font-weight: 400; }

  /* Prose */
  .cfs-prose { font-family: 'Noto Serif KR', serif; font-size: 15px; line-height: 1.85; color: var(--text); text-align: left; margin: 0 0 16px; font-weight: 400; }
  .cfs-prose strong { color: var(--accent); font-weight: 700; }
  .cfs-prose p { margin: 0 0 14px; }
  .cfs-prose p:last-child { margin-bottom: 0; }

  /* Sajupalja */
  .cfs-sajupalja-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .cfs-sajupalja-cell { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 4px 12px; text-align: center; }
  .cfs-sajupalja-cell--day { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 4px 16px rgba(124, 58, 237, 0.18); }
  .cfs-sajupalja-head { font-family: 'Noto Serif KR', serif; font-size: 10px; color: var(--accent); letter-spacing: 0.12em; margin-bottom: 6px; font-weight: 700; padding-top: 2px; }
  .cfs-sajupalja-stem, .cfs-sajupalja-branch { display: flex; flex-direction: column; align-items: center; padding: 8px 0; border-radius: 6px; margin: 4px 0; }
  .cfs-sajupalja-hanja { font-family: 'Noto Serif KR', serif; font-size: 26px; font-weight: 900; color: #fff; line-height: 1; }
  .cfs-sajupalja-ko { font-size: 10px; color: rgba(255,255,255,0.75); margin-top: 2px; }
  .cfs-sajupalja-sipsin { font-size: 10px; color: var(--text-sub); margin-top: 4px; font-weight: 600; }
  .cfs-sajupalja-cell--day .cfs-sajupalja-sipsin { color: var(--accent); font-weight: 700; }
  .cfs-sajupalja-uns { font-size: 10px; color: var(--text-muted); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
  .cfs-report .elem-wood { background: linear-gradient(180deg, var(--elem-wood), color-mix(in srgb, var(--elem-wood) 80%, black)); }
  .cfs-report .elem-fire { background: linear-gradient(180deg, var(--elem-fire), color-mix(in srgb, var(--elem-fire) 80%, black)); }
  .cfs-report .elem-earth { background: linear-gradient(180deg, var(--elem-earth), color-mix(in srgb, var(--elem-earth) 80%, black)); }
  .cfs-report .elem-metal { background: linear-gradient(180deg, #a8a39a, #6b6862); color: #fff !important; }
  .cfs-report .elem-metal .cfs-sajupalja-hanja, .cfs-report .elem-metal .cfs-sajupalja-ko { color: #fff !important; }
  .cfs-report .elem-water { background: linear-gradient(180deg, var(--elem-water), color-mix(in srgb, var(--elem-water) 80%, black)); }

  /* Nickname card */
  .cfs-nickname-card { background: linear-gradient(180deg, #ffffff, #faf6ff); border: 1px solid var(--accent-soft); border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: var(--shadow); }
  .cfs-nickname-gapja { font-family: 'Noto Serif KR', serif; font-size: 32px; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: 4px; }
  .cfs-nickname-gapja-ko { font-size: 12px; color: var(--accent-soft); margin-top: 4px; letter-spacing: 0.4em; }
  .cfs-nickname-quote { font-family: 'Noto Serif KR', serif; font-size: 22px; font-weight: 700; color: var(--text); margin: 20px 0 12px; font-style: italic; line-height: 1.4; }
  .cfs-nickname-quote::before { content: '「'; color: var(--accent); }
  .cfs-nickname-quote::after { content: '」'; color: var(--accent); }
  .cfs-nickname-desc { font-size: 14px; color: var(--text-sub); line-height: 1.7; max-width: 360px; margin: 0 auto; }
  .cfs-nickname-archetype { font-family: 'Cinzel', serif; font-size: 11px; color: var(--gold); letter-spacing: 0.2em; margin-top: 14px; }

  /* Keyword chips */
  .cfs-keywords { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 6px; }
  .cfs-keyword { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--text); font-weight: 600; }
  .cfs-keyword-emoji { margin-right: 6px; }

  /* Scenario cards */
  .cfs-scenarios { display: flex; flex-direction: column; gap: 10px; }
  .cfs-scenario { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 16px; }
  .cfs-scenario-when { font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .cfs-scenario-title { font-family: 'Noto Serif KR', serif; font-size: 15px; font-weight: 700; color: var(--text); margin: 4px 0; }
  .cfs-scenario-body { font-size: 13.5px; line-height: 1.65; color: var(--text-sub); }
  .cfs-scenario-body strong { color: var(--text); font-weight: 600; }

  /* Strengths/Weaknesses 2-card */
  .cfs-twin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cfs-twin-card { background: var(--surface); border-radius: 12px; padding: 14px 14px 16px; border: 1px solid var(--border); }
  .cfs-twin-card--strong { border-color: var(--accent-soft); background: #f9f5ff; }
  .cfs-twin-card--weak { border-color: rgba(217, 119, 6, 0.4); background: #fffbeb; }
  .cfs-twin-head { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.18em; font-weight: 700; margin-bottom: 8px; }
  .cfs-twin-card--strong .cfs-twin-head { color: var(--accent); }
  .cfs-twin-card--weak .cfs-twin-head { color: var(--amber); }
  .cfs-twin-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--text); }
  .cfs-twin-list li::before { content: '• '; color: var(--accent); margin-right: 4px; }
  .cfs-twin-card--weak .cfs-twin-list li::before { color: var(--amber); }

  /* Trait scores */
  .cfs-traits { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 18px; box-shadow: var(--shadow); }
  .cfs-trait-row { display: grid; grid-template-columns: 100px 1fr 76px; gap: 12px; align-items: center; }
  .cfs-trait-label { display: flex; flex-direction: column; line-height: 1.2; }
  .cfs-trait-ko { font-size: 13px; font-weight: 700; color: var(--text); }
  .cfs-trait-en { font-family: 'Cinzel', serif; font-size: 9px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
  .cfs-trait-bar { height: 8px; background: var(--surface-elev); border-radius: 4px; overflow: hidden; }
  .cfs-trait-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 4px; }
  .cfs-trait-bar-fill.low { background: linear-gradient(90deg, #c4b8d8, #a89bbf); }
  .cfs-trait-bar-fill.top { background: linear-gradient(90deg, #b45309, #d97706); }
  .cfs-trait-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
  .cfs-trait-score { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700; color: var(--accent); text-align: right; font-feature-settings: 'tnum'; }
  .cfs-trait-score.low { color: var(--text-muted); }
  .cfs-trait-score.top { color: var(--gold-light); }
  .cfs-trait-rank { font-family: 'Cinzel', serif; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-light); text-transform: uppercase; margin-top: 1px; }
  .cfs-trait-rank.muted { color: var(--text-muted); }
  .cfs-trait-hint { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; text-align: center; line-height: 1.6; }

  /* Trait comparison (pair) */
  .cfs-trait-compare { display: flex; flex-direction: column; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 18px; }
  .cfs-trait-compare-row { display: flex; flex-direction: column; gap: 6px; }
  .cfs-trait-compare-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
  .cfs-trait-compare-ko { font-size: 13px; font-weight: 700; color: var(--text); }
  .cfs-trait-compare-en { font-family: 'Cinzel', serif; font-size: 9px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; }
  .cfs-trait-compare-line { display: grid; grid-template-columns: 56px 1fr 36px; gap: 10px; align-items: center; }
  .cfs-trait-compare-name { font-size: 11px; color: var(--text-sub); font-weight: 600; }
  .cfs-trait-compare-bar { height: 7px; background: var(--surface-elev); border-radius: 4px; overflow: hidden; }
  .cfs-trait-compare-fill-a { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 4px; }
  .cfs-trait-compare-fill-b { height: 100%; background: linear-gradient(90deg, #fde68a, #fbbf24); border-radius: 4px; }
  .cfs-trait-compare-num { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; color: var(--accent); text-align: right; font-feature-settings: 'tnum'; }
  .cfs-trait-compare-num.b { color: var(--gold); }
  .cfs-trait-compare-takeaway { font-size: 12px; color: var(--text-sub); line-height: 1.65; margin: 4px 0 0; padding: 8px 10px; background: #f6f0ff; border-radius: 8px; border-left: 2px solid var(--accent-soft); }
  .cfs-trait-compare-takeaway strong { color: var(--text); }

  /* Section blurb */
  .cfs-blurb { font-size: 12px; line-height: 1.6; color: var(--text-sub); background: #f6f0ff; border-left: 2px solid var(--accent-soft); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 0 0 14px; }
  .cfs-blurb strong { color: var(--accent); }

  /* Element donut */
  .cfs-elem-block { display: flex; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
  .cfs-elem-donut { flex-shrink: 0; width: 130px; height: 130px; position: relative; }
  .cfs-elem-donut svg { transform: rotate(-90deg); }
  .cfs-elem-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .cfs-elem-strength { font-family: 'Noto Serif KR', serif; font-size: 11px; color: var(--accent); letter-spacing: 0.15em; font-weight: 700; }
  .cfs-elem-strength-score { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; color: var(--text); margin-top: 2px; }
  .cfs-elem-list { flex: 1; display: flex; flex-direction: column; gap: 7px; }
  .cfs-elem-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
  .cfs-elem-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .cfs-elem-name { flex: 1; color: var(--text); font-weight: 500; }
  .cfs-elem-name strong { color: var(--accent); }
  .cfs-elem-pct { color: var(--text-sub); font-feature-settings: 'tnum'; font-size: 12px; }

  /* Tables */
  .cfs-table { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
  .cfs-table-row { display: grid; grid-template-columns: 60px 1fr 1fr 1fr 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; text-align: center; }
  .cfs-table-row:last-child { border-bottom: 0; }
  .cfs-table-row--head { color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; }
  .cfs-table-row > div:first-child { color: var(--text-muted); font-weight: 600; text-align: left; padding-left: 4px; }
  .cfs-table-row--head > div:first-child { color: var(--accent); }
  .cfs-jijanggan-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
  .cfs-jijanggan-row:last-child { border-bottom: 0; }
  .cfs-jijanggan-label { width: 36px; color: var(--accent); font-weight: 700; font-family: 'Noto Serif KR', serif; }
  .cfs-jijanggan-stems { color: var(--text-sub); font-family: 'Noto Serif KR', serif; }
  .cfs-jijanggan-stems strong { color: var(--text); font-weight: 700; }

  /* Sinsal */
  .cfs-sinsal-cards { display: flex; flex-direction: column; gap: 8px; }
  .cfs-sinsal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 12px; }
  .cfs-sinsal-card--good { border-color: var(--accent-soft); background: #f9f5ff; }
  .cfs-sinsal-card--bad { border-color: rgba(185, 28, 28, 0.45); background: #fef2f2; }
  .cfs-sinsal-icon { font-family: 'Noto Serif KR', serif; font-size: 18px; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
  .cfs-sinsal-card--good .cfs-sinsal-icon { background: #ede4ff; color: var(--accent); }
  .cfs-sinsal-card--bad .cfs-sinsal-icon { background: #fee2e2; color: var(--warm-red); }
  .cfs-sinsal-content { flex: 1; min-width: 0; }
  .cfs-sinsal-name { font-family: 'Noto Serif KR', serif; font-size: 14px; font-weight: 700; color: var(--text); }
  .cfs-sinsal-name small { font-family: 'Cinzel', serif; font-size: 9px; color: var(--text-muted); letter-spacing: 0.1em; font-weight: 400; margin-left: 6px; text-transform: uppercase; }
  .cfs-sinsal-desc { font-size: 12.5px; color: var(--text-sub); margin-top: 2px; line-height: 1.6; }

  /* Yongsin */
  .cfs-yongsin-card { display: flex; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 18px; }
  .cfs-yongsin-badge { flex-shrink: 0; width: 72px; height: 72px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Noto Serif KR', serif; }
  .cfs-yongsin-hanja { font-size: 28px; font-weight: 900; color: #fff; line-height: 1; }
  .cfs-yongsin-ko { font-size: 10px; color: rgba(255,255,255,0.85); margin-top: 4px; letter-spacing: 0.1em; }
  .cfs-yongsin-content { flex: 1; }
  .cfs-yongsin-label { font-family: 'Cinzel', serif; font-size: 10px; color: var(--accent); letter-spacing: 0.25em; margin-bottom: 4px; }
  .cfs-yongsin-strength { font-size: 14px; color: var(--text); font-weight: 700; margin-bottom: 4px; }
  .cfs-yongsin-meta { font-size: 12px; color: var(--text-sub); margin-bottom: 10px; }
  .cfs-yongsin-advice { font-size: 13px; color: var(--text); line-height: 1.65; }
  .cfs-yongsin-tips { margin-top: 10px; padding: 10px 12px; background: #f6f0ff; border-radius: 8px; font-size: 12px; color: var(--text-sub); line-height: 1.6; }
  .cfs-yongsin-tips strong { color: var(--accent); }

  /* Zodiac */
  .cfs-zodiac-card { background: linear-gradient(180deg, #ffffff, #faf6ff); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: var(--shadow); }
  .cfs-zodiac-symbol { font-size: 80px; color: var(--accent); line-height: 1; text-shadow: 0 4px 18px rgba(124, 58, 237, 0.25); }
  .cfs-zodiac-name { font-family: 'Noto Serif KR', serif; font-size: 20px; font-weight: 800; color: var(--text); margin: 12px 0 4px; }
  .cfs-zodiac-name-en { font-family: 'Cinzel', serif; font-size: 11px; color: var(--text-muted); letter-spacing: 0.3em; text-transform: uppercase; }
  .cfs-zodiac-attr-row { display: flex; justify-content: center; gap: 8px; margin: 20px 0 16px; flex-wrap: wrap; }
  .cfs-zodiac-attr { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #f3edff; border: 1px solid var(--accent-soft); border-radius: 999px; font-size: 11px; color: var(--accent); font-weight: 600; letter-spacing: 0.04em; }
  .cfs-zodiac-attr-label { color: var(--text-muted); font-weight: 400; }
  .cfs-zodiac-summary { font-size: 14px; color: var(--text); line-height: 1.7; margin: 0; text-align: left; }
  .cfs-zodiac-summary strong { color: var(--accent); }
  .cfs-zodiac-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; justify-content: center; }
  .cfs-zodiac-trait { padding: 4px 10px; background: var(--surface-elev); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; color: var(--text-sub); }
  .cfs-zodiac-deep { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-top: 12px; }
  .cfs-zodiac-deep-row { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
  .cfs-zodiac-deep-row:last-child { border-bottom: 0; }
  .cfs-zodiac-deep-label { flex-shrink: 0; width: 84px; font-size: 12px; color: var(--accent); font-weight: 700; }
  .cfs-zodiac-deep-text { font-size: 13px; color: var(--text); line-height: 1.65; flex: 1; }

  /* Fitscore score hero */
  .cfs-score-hero { background: linear-gradient(180deg, #ffffff, #faf6ff); border: 1px solid var(--accent); border-radius: 16px; padding: 36px 28px; text-align: center; box-shadow: var(--shadow-elev); }
  .cfs-score-label { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.4em; color: var(--accent); text-transform: uppercase; }
  .cfs-score-big { font-family: 'Noto Serif KR', serif; font-size: 88px; font-weight: 900; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; letter-spacing: -2px; margin: 4px 0; }
  .cfs-score-big small { font-size: 22px; color: var(--text-sub); font-weight: 500; -webkit-text-fill-color: var(--text-sub); }
  .cfs-score-sub { font-size: 14px; color: var(--text-sub); margin-top: 4px; }
  .cfs-score-archetype { font-family: 'Noto Serif KR', serif; font-size: 19px; font-weight: 700; color: var(--gold-light); margin: 16px 0 4px; font-style: italic; }
  .cfs-score-archetype::before { content: '「'; color: var(--gold-light); }
  .cfs-score-archetype::after { content: '」'; color: var(--gold-light); }
  .cfs-score-archetype-en { font-family: 'Cinzel', serif; font-size: 11px; color: var(--gold-light); letter-spacing: 0.25em; opacity: 0.85; margin-bottom: 4px; }
  .cfs-nickname-vs { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--border); }
  .cfs-nickname-vs-line { display: flex; gap: 10px; align-items: baseline; }
  .cfs-nickname-vs-name { font-family: 'Noto Serif KR', serif; font-size: 12px; color: var(--accent); font-weight: 700; }
  .cfs-nickname-vs-text { font-family: 'Noto Serif KR', serif; font-size: 17px; font-weight: 700; color: var(--text); }
  .cfs-nickname-vs-x { font-size: 16px; color: var(--accent); font-weight: 300; }

  /* Breakdown bars */
  .cfs-breakdown { display: flex; flex-direction: column; gap: 14px; }
  .cfs-breakdown-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
  .cfs-breakdown-cat { color: var(--text); font-weight: 700; font-size: 13px; }
  .cfs-breakdown-score { color: var(--accent); font-feature-settings: 'tnum'; font-weight: 700; font-size: 12px; }
  .cfs-breakdown-score.neg { color: var(--warm-red); }
  .cfs-breakdown-bar { height: 6px; background: var(--surface-elev); border-radius: 3px; overflow: hidden; }
  .cfs-breakdown-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 3px; }
  .cfs-breakdown-bar-fill.neg { background: linear-gradient(90deg, #fca5a5, var(--warm-red)); }
  .cfs-breakdown-reason { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

  /* Combo cards */
  .cfs-combo-grid { display: flex; flex-direction: column; gap: 10px; }
  .cfs-combo-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
  .cfs-combo-card--positive { border-color: var(--accent-soft); background: #f9f5ff; }
  .cfs-combo-card--negative { border-color: rgba(185, 28, 28, 0.5); background: #fef2f2; }
  .cfs-combo-card--warning { border-color: var(--amber); background: #fffbeb; }
  .cfs-combo-icon { font-size: 18px; width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ede4ff; color: var(--accent); font-weight: 700; }
  .cfs-combo-card--negative .cfs-combo-icon { color: var(--warm-red); background: #fee2e2; }
  .cfs-combo-card--warning .cfs-combo-icon { color: var(--amber); background: #fef3c7; }
  .cfs-combo-text { flex: 1; min-width: 0; }
  .cfs-combo-cat { font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  .cfs-combo-card--negative .cfs-combo-cat { color: var(--warm-red); }
  .cfs-combo-card--warning .cfs-combo-cat { color: var(--amber); }
  .cfs-combo-pair { font-family: 'Noto Serif KR', serif; font-size: 15px; font-weight: 700; color: var(--text); margin: 2px 0; }
  .cfs-combo-reason { font-size: 12px; color: var(--text-sub); line-height: 1.5; }

  /* Narrative card */
  .cfs-narrative-card { background: #ffffff; border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow); }
  .cfs-narrative-sub { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--border); }
  .cfs-narrative-sub:last-child { border-bottom: 0; }
  .cfs-narrative-sub-icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .cfs-narrative-sub-text { flex: 1; font-size: 14px; line-height: 1.7; color: var(--text); }
  .cfs-zodiac-pair-hero { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 24px 0 16px; }
  .cfs-zodiac-pair-side { text-align: center; }
  .cfs-zodiac-pair-symbol { font-size: 52px; color: var(--accent); line-height: 1; }
  .cfs-zodiac-pair-name { font-family: 'Noto Serif KR', serif; font-size: 13px; font-weight: 700; color: var(--text); margin-top: 6px; }
  .cfs-zodiac-pair-meta { font-size: 9px; color: var(--text-muted); letter-spacing: 0.1em; margin-top: 2px; }
  .cfs-zodiac-pair-x { font-family: 'Noto Serif KR', serif; font-size: 20px; color: var(--accent); }

  /* Pair scenarios */
  .cfs-pair-scenes { display: flex; flex-direction: column; gap: 14px; }
  .cfs-pair-scene { background: #ffffff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
  .cfs-pair-scene-when { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.25em; color: var(--accent); font-weight: 700; text-transform: uppercase; }
  .cfs-pair-scene-title { font-family: 'Noto Serif KR', serif; font-size: 17px; font-weight: 700; color: var(--text); margin: 4px 0 12px; }
  .cfs-pair-scene-emoji { font-size: 18px; margin-right: 6px; }
  .cfs-pair-scene-two { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .cfs-pair-scene-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; font-size: 13px; line-height: 1.6; }
  .cfs-pair-scene-name { color: var(--accent); font-weight: 700; }
  .cfs-pair-scene-name.b { color: var(--gold); }
  .cfs-pair-scene-action { color: var(--text); }
  .cfs-pair-scene-tip { font-size: 13px; color: var(--text-sub); line-height: 1.65; padding: 10px 12px; background: #f6f0ff; border-radius: 8px; border-left: 2px solid var(--accent-soft); }
  .cfs-pair-scene-tip strong { color: var(--accent); }
  .cfs-pair-scene-tip-label { font-family: 'Cinzel', serif; font-size: 9px; color: var(--accent); letter-spacing: 0.2em; margin-right: 6px; font-weight: 700; }

  /* Lists */
  .cfs-bullet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .cfs-bullet-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.7; color: var(--text); padding: 12px 14px; background: #ffffff; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; box-shadow: var(--shadow); }
  .cfs-bullet-list--caution li { border-left-color: var(--amber); }
  .cfs-bullet-icon { flex-shrink: 0; color: var(--accent); font-weight: 700; }
  .cfs-bullet-list--caution .cfs-bullet-icon { color: var(--amber); }
  .cfs-advice-block { background: linear-gradient(180deg, #f6f0ff, #ffffff); border: 1px solid var(--accent-soft); border-radius: 16px; padding: 22px; display: flex; gap: 14px; box-shadow: var(--shadow); }
  .cfs-advice-icon { font-size: 22px; flex-shrink: 0; }
  .cfs-advice-text { font-family: 'Noto Serif KR', serif; font-size: 14.5px; line-height: 1.85; color: var(--text); }
  .cfs-advice-text strong { color: var(--accent); }

  /* Phased advice */
  .cfs-phases { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
  .cfs-phase { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
  .cfs-phase-when { font-family: 'Cinzel', serif; font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: 0.1em; }
  .cfs-phase-when small { display: block; font-family: 'Noto Serif KR', serif; font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; margin-top: 2px; font-weight: 400; }
  .cfs-phase-body { font-size: 13px; line-height: 1.65; color: var(--text); }
  .cfs-phase-body strong { color: var(--accent); }

  /* Fun facts */
  .cfs-funfacts { display: flex; flex-direction: column; gap: 10px; }
  .cfs-funfact { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; }
  .cfs-funfact-emoji { font-size: 22px; flex-shrink: 0; }
  .cfs-funfact-text { flex: 1; font-size: 13.5px; line-height: 1.65; color: var(--text); }
  .cfs-funfact-text strong { color: var(--gold-light); }
  .cfs-funfact-cap { font-family: 'Cinzel', serif; font-size: 9px; color: var(--gold-light); letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 2px; }

  /* Personality archetype */
  .cfs-archetype-card { background: linear-gradient(180deg, #f6f0ff, #ffffff); border: 1px solid var(--accent-soft); border-radius: 14px; padding: 20px 22px; margin-top: 14px; box-shadow: var(--shadow); }
  .cfs-archetype-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.3em; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; }
  .cfs-archetype-name { font-family: 'Noto Serif KR', serif; font-size: 24px; font-weight: 800; color: var(--text); margin: 0 0 6px; line-height: 1.2; }
  .cfs-archetype-name em { color: var(--accent); font-style: normal; }
  .cfs-archetype-name-en { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 14px; }
  .cfs-archetype-desc { font-size: 13px; line-height: 1.7; color: var(--text-sub); }
  .cfs-archetype-desc strong { color: var(--text); }
  .cfs-archetype-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  .cfs-archetype-trait { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
  .cfs-archetype-trait-label { font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .cfs-archetype-trait-name { font-family: 'Noto Serif KR', serif; font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; }
  .cfs-archetype-trait-desc { font-size: 11px; color: var(--text-sub); margin-top: 2px; line-height: 1.5; }

  /* 3-Mode card */
  .cfs-modes { display: flex; flex-direction: column; gap: 10px; }
  .cfs-mode { display: grid; grid-template-columns: 70px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; align-items: start; }
  .cfs-mode-icon { font-size: 28px; text-align: center; line-height: 1; padding-top: 4px; }
  .cfs-mode-content { min-width: 0; }
  .cfs-mode-label { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.25em; color: var(--accent); font-weight: 700; text-transform: uppercase; }
  .cfs-mode-title { font-family: 'Noto Serif KR', serif; font-size: 15px; font-weight: 700; color: var(--text); margin: 2px 0 6px; }
  .cfs-mode-desc { font-size: 13px; color: var(--text-sub); line-height: 1.65; }
  .cfs-mode-desc strong { color: var(--text); }

  /* Message tone */
  .cfs-msg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
  .cfs-msg-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); align-items: center; }
  .cfs-msg-row:last-child { border-bottom: 0; }
  .cfs-msg-when { font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }
  .cfs-msg-example { font-family: 'Pretendard Variable', sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--text); }
  .cfs-msg-bubble { display: inline-block; background: #f3edff; border: 1px solid var(--accent-soft); border-radius: 12px; padding: 4px 10px; margin: 2px 4px 2px 0; font-size: 12.5px; color: var(--text); }
  .cfs-msg-bubble.b { background: #fef3c7; border-color: rgba(217, 119, 6, 0.35); }

  /* Gift guide */
  .cfs-gifts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cfs-gift-card { background: var(--surface); border-radius: 12px; padding: 14px 16px; border: 1px solid var(--border); }
  .cfs-gift-card--yes { border-color: var(--accent-soft); background: #f9f5ff; }
  .cfs-gift-card--no { border-color: rgba(185, 28, 28, 0.4); background: #fef2f2; }
  .cfs-gift-head { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; margin-bottom: 10px; }
  .cfs-gift-card--yes .cfs-gift-head { color: var(--accent); }
  .cfs-gift-card--no .cfs-gift-head { color: var(--warm-red); }
  .cfs-gift-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.55; color: var(--text); }
  .cfs-gift-list li { display: flex; gap: 6px; }
  .cfs-gift-card--yes .cfs-gift-list li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
  .cfs-gift-card--no .cfs-gift-list li::before { content: '✕'; color: var(--warm-red); font-weight: 700; flex-shrink: 0; }

  /* 5 elements diagram */
  .cfs-5elem-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 18px; }
  .cfs-5elem-svg { display: block; margin: 0 auto; width: 280px; max-width: 100%; height: auto; }
  .cfs-5elem-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--text-sub); }
  .cfs-5elem-legend-item { display: flex; align-items: flex-start; gap: 6px; }
  .cfs-5elem-legend-key { display: inline-block; min-width: 20px; flex-shrink: 0; font-weight: 700; }
  .cfs-5elem-legend-key.gen { color: var(--success); }
  .cfs-5elem-legend-key.over { color: var(--warm-red); }

  /* Chemistry signal lights */
  .cfs-signals { display: flex; flex-direction: column; gap: 12px; }
  .cfs-signal { display: grid; grid-template-columns: 56px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
  .cfs-signal--green { border-left: 4px solid var(--success); }
  .cfs-signal--yellow { border-left: 4px solid var(--amber); }
  .cfs-signal--red { border-left: 4px solid var(--warm-red); }
  .cfs-signal-light { font-size: 32px; text-align: center; line-height: 1; padding-top: 8px; }
  .cfs-signal-head { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.25em; font-weight: 700; text-transform: uppercase; }
  .cfs-signal--green .cfs-signal-head { color: var(--success); }
  .cfs-signal--yellow .cfs-signal-head { color: var(--amber); }
  .cfs-signal--red .cfs-signal-head { color: var(--warm-red); }
  .cfs-signal-title { font-family: 'Noto Serif KR', serif; font-size: 14px; font-weight: 700; color: var(--text); margin: 2px 0 6px; }
  .cfs-signal-items { list-style: none; padding: 0; margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-sub); display: flex; flex-direction: column; gap: 4px; }
  .cfs-signal-items li { padding-left: 12px; position: relative; }
  .cfs-signal-items li::before { content: '·'; position: absolute; left: 4px; color: var(--text-muted); }

  /* Scene dialogue ❌/✅ */
  .cfs-dialogue { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; padding: 12px 14px; background: #f4efe6; border-radius: 8px; }
  .cfs-dialogue-line { display: grid; grid-template-columns: 22px 56px 1fr; gap: 8px; align-items: start; font-size: 12.5px; line-height: 1.55; }
  .cfs-dialogue-mark.no { color: var(--warm-red); font-weight: 700; font-size: 14px; }
  .cfs-dialogue-mark.ok { color: var(--success); font-weight: 700; font-size: 14px; }
  .cfs-dialogue-who { color: var(--accent); font-weight: 700; font-size: 11px; padding-top: 2px; }
  .cfs-dialogue-who.b { color: var(--gold); }
  .cfs-dialogue-text { color: var(--text); }
  .cfs-dialogue-text em { font-style: normal; color: var(--text-muted); }

  /* Rulebook */
  .cfs-rules { display: flex; flex-direction: column; gap: 8px; counter-reset: rulecount; }
  .cfs-rule { display: grid; grid-template-columns: 36px 1fr; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; align-items: center; }
  .cfs-rule-num { font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700; color: var(--accent); text-align: center; line-height: 1; counter-increment: rulecount; }
  .cfs-rule-num::before { content: counter(rulecount, decimal-leading-zero); }
  .cfs-rule-text { font-size: 13.5px; line-height: 1.6; color: var(--text); }
  .cfs-rule-text strong { color: var(--accent); }

  /* Color palette swatches */
  .cfs-palette { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
  .cfs-palette-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .cfs-palette-swatch { flex: 1; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: relative; overflow: hidden; }
  .cfs-palette-swatch-name { position: absolute; bottom: 6px; left: 8px; font-size: 9px; color: rgba(255,255,255,0.9); font-family: 'Cinzel', serif; letter-spacing: 0.05em; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
  .cfs-palette-swatch.dark .cfs-palette-swatch-name { color: rgba(0,0,0,0.7); text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
  .cfs-palette-hint { font-size: 12px; color: var(--text-sub); line-height: 1.6; padding-top: 10px; border-top: 1px dashed var(--border); }
  .cfs-palette-hint strong { color: var(--accent); }

  /* Daily Energy curve */
  .cfs-energy { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 18px; box-shadow: var(--shadow); }
  .cfs-energy-svg { display: block; margin: 0 auto; width: 100%; height: auto; max-width: 420px; }
  .cfs-energy-legend { display: flex; gap: 16px; justify-content: center; margin-top: 12px; font-size: 11px; color: var(--text-sub); }
  .cfs-energy-legend-item { display: flex; align-items: center; gap: 6px; }
  .cfs-energy-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
  .cfs-energy-takeaway { font-size: 12.5px; color: var(--text-sub); line-height: 1.65; margin-top: 12px; padding: 10px 12px; background: #f6f0ff; border-radius: 8px; border-left: 2px solid var(--accent-soft); }
  .cfs-energy-takeaway strong { color: var(--accent); }

  /* TMI / Did you know */
  .cfs-tmi { display: flex; flex-direction: column; gap: 8px; }
  .cfs-tmi-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); }
  .cfs-tmi-icon { font-size: 22px; text-align: center; line-height: 1; padding-top: 2px; }
  .cfs-tmi-text { font-size: 13px; line-height: 1.65; color: var(--text); }
  .cfs-tmi-text strong { color: var(--accent); }

  /* "두 분이 ~라면" */
  .cfs-metaphors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cfs-metaphor { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; text-align: center; box-shadow: var(--shadow); }
  .cfs-metaphor-emoji { font-size: 32px; line-height: 1; }
  .cfs-metaphor-cat { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.2em; color: var(--text-muted); margin: 8px 0 4px; text-transform: uppercase; font-weight: 700; }
  .cfs-metaphor-name { font-family: 'Noto Serif KR', serif; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.35; }
  .cfs-metaphor-desc { font-size: 11.5px; color: var(--text-sub); margin-top: 4px; line-height: 1.55; }

  /* Communication scripts */
  .cfs-scripts { display: flex; flex-direction: column; gap: 12px; }
  .cfs-script { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
  .cfs-script-when { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.25em; color: var(--accent); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
  .cfs-script-situation { font-family: 'Noto Serif KR', serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
  .cfs-script-line { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 6px 0; font-size: 12.5px; line-height: 1.55; }
  .cfs-script-to { color: var(--accent); font-weight: 700; }
  .cfs-script-to.b { color: var(--gold-light); }
  .cfs-script-text { color: var(--text); }
  .cfs-script-text em { font-style: normal; color: var(--text-muted); font-size: 11.5px; }

  /* Glossary */
  .cfs-glossary { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
  .cfs-glossary-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; line-height: 1.6; }
  .cfs-glossary-row:last-child { border-bottom: 0; }
  .cfs-glossary-term { color: var(--accent); font-weight: 700; font-family: 'Noto Serif KR', serif; font-size: 13px; }
  .cfs-glossary-term small { display: block; font-family: 'Cinzel', serif; font-size: 9px; color: var(--text-muted); letter-spacing: 0.1em; font-weight: 400; margin-top: 1px; text-transform: uppercase; }
  .cfs-glossary-def { color: var(--text); }
  .cfs-glossary-def strong { color: var(--text); font-weight: 700; }

  /* Footer */
  .cfs-footer { text-align: center; padding: 48px 0 64px; border-top: 1px solid var(--border); margin-top: 48px; font-size: 10px; color: var(--text-muted); letter-spacing: 0.4em; }
  .cfs-footer-brand { font-family: 'Cinzel', serif; font-size: 14px; color: var(--accent); margin-bottom: 6px; letter-spacing: 0.4em; }