:root {
        --shadow-soft: 0 1px 3px rgba(0,0,0,0.04);
        --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
        --shadow-cta: none;
        --radius: 16px;
        --radius-sm: 14px;
      }
      body { font-family: var(--font-ui); background: var(--color-bg); color: var(--color-ink); }
      .serif { font-family: 'Noto Serif KR', Georgia, serif; }
      .fade-up { animation: fadeUp 0.6s ease-out both; }
      @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
      .slide-left { animation: slideLeft 0.4s ease-out both; }
      @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
      @keyframes gaugeIn { from{stroke-dashoffset:251} to{stroke-dashoffset:var(--gauge-offset)} }
      @keyframes countUp { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }
      @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

      .step-section { display:none; }
      .step-section.active { display:block; }

      /* Stepper */
      .stepper { display:flex; align-items:center; justify-content:center; gap:0; padding:12px 24px; }
      .stepper-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; border:2px solid #E4E7EB; background:#fff; color:#9AA5B1; transition:all 0.3s; flex-shrink:0; }
      .stepper-dot.active { border-color: var(--color-green-deep); background-color: var(--color-green-deep); color:white; box-shadow:0 0 0 4px rgba(47,93,80,0.15); }
      .stepper-dot.done { border-color: var(--color-green-deep); background:#E8F0ED; color: var(--color-green-deep); }
      .stepper-line { flex:1; height:2px; background:#E4E7EB; max-width:48px; transition:background 0.3s; }
      .stepper-line.done { background-color: var(--color-green-deep); }

      .gender-card { width:148px; height:168px; border-radius: var(--radius-xl); border:2.5px solid #E4E7EB; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:all 0.2s; box-shadow:var(--shadow-soft); }
      .gender-card:hover { border-color: var(--color-green-deep); transform:translateY(-4px); box-shadow:var(--shadow-card); }
      .gender-card.selected { border-color: var(--color-green-deep); background:#E8F0ED; box-shadow:0 0 0 4px rgba(47,93,80,0.12); }

      .age-chip { padding:12px 28px; border-radius: var(--radius-md); font-size:15px; font-weight:600; background:#fff; border:2px solid #E4E7EB; color:#52606D; cursor:pointer; transition:all 0.2s; box-shadow:var(--shadow-soft); }
      .age-chip:hover { border-color: var(--color-green-deep); color: var(--color-green-deep); transform:translateY(-2px); box-shadow:var(--shadow-card); }
      .age-chip.selected { background:#E8F0ED; border-color: var(--color-green-deep); color: var(--color-green-deep); }

      .goal-card { padding:10px 18px; border-radius: var(--radius-md); font-size:13px; font-weight:600; background:#fff; border:2px solid #E4E7EB; color:#52606D; cursor:pointer; transition:all 0.15s; user-select:none; box-shadow:var(--shadow-soft); }
      .goal-card:hover { border-color: var(--color-green-deep); transform:translateY(-1px); }
      .goal-card.selected { background:#E8F0ED; border-color: var(--color-green-deep); color: var(--color-green-deep); }

      .search-input { box-shadow:var(--shadow-soft); }
      .search-input:focus { box-shadow:0 3px 16px rgba(47,93,80,0.15); border-color: var(--color-green-deep) !important; }
      .result-item { transition:all 0.15s; }
      .result-item:hover { background:#F7F6F2; }
      .cta-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 32px; border-radius:var(--radius-sm); font-size:16px; font-weight:600; color:white; background-color: var(--color-green-deep); transition:opacity 0.15s; cursor:pointer; border:none; }
      .cta-primary:hover { opacity:0.9; }
      .cta-primary:disabled { opacity:0.3; cursor:not-allowed; }

      /* Report styles */
      .rpt-card { background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-soft); }
      .rpt-hero { background:linear-gradient(180deg,#E8F0ED 0%,#fff 100%); border-radius:var(--radius); padding:24px 20px; box-shadow:var(--shadow-card); }
      .gap-bar { height:6px; border-radius:99px; background:#E4E7EB; overflow:hidden; }
      .gap-bar-fill { height:100%; border-radius:99px; transition:width 0.8s ease; }
      .gap-warn { border-radius:var(--radius-sm); padding:14px; position:relative; overflow:hidden; }
      .gap-warn::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:4px 0 0 4px; }
      .gap-warn.sev-high { background:#FFF7ED; } .gap-warn.sev-high::before { background:#A0522D; }
      .gap-warn.sev-mid { background:#FFFBEB; } .gap-warn.sev-mid::before { background:#B8860B; }
      .gap-warn.sev-low { background:#F0FDF4; } .gap-warn.sev-low::before { background:#6B8F85; }
      .gap-warn.sev-crit { background:#FEF2F2; } .gap-warn.sev-crit::before { background:#DC2626; }
      .rec-card { background:#fff; border:1px solid #E4E7EB; border-radius:var(--radius); padding:14px; transition:all 0.2s; box-shadow:var(--shadow-soft); }
      .rec-card:hover { box-shadow:var(--shadow-card); transform:translateY(-2px); }
      .grade-badge { display:inline-flex; align-items:center; justify-content:center; padding:2px 8px; border-radius:6px; font-size:10px; font-weight:700; color:white; }
      .accordion-toggle { cursor:pointer; user-select:none; border:none; background:none; }
      .accordion-body { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
      .accordion-body.open { max-height:2000px; }
      .header-compact { display:none; }
      .header-compact.visible { display:flex; }
      .header-default.hidden-h { display:none; }
      ::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-thumb { background:#D1D5DB; border-radius:4px; }
      .dropdown { box-shadow:0 8px 30px rgba(0,0,0,0.12); }
      .gauge-circle { animation: gaugeIn 1.2s ease-out 0.3s both; }
      .gauge-score { animation: countUp 0.6s ease-out 0.8s both; }
      .share-mini { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:99px; font-size:11px; font-weight:600; color: var(--color-green-deep); background:#E8F0ED; border:none; cursor:pointer; transition:all 0.15s; }
      .share-mini:hover { background:#D4E8E0; }
      .loading-step { display:flex; align-items:center; gap:12px; opacity:0; transform:translateY(10px); transition:all 0.5s ease; }
      .loading-step.show { opacity:1; transform:translateY(0); }
      .loading-step .icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
      .loading-step .icon.done { background:#E8F0ED; }
      .loading-step .icon.pending { background:#F3F4F6; animation:pulse 1.5s infinite; }