:root {
  color-scheme: light;
  --ink: #183b56;
  --ink-soft: #4e6678;
  --muted: #7d8e9a;
  --line: #dce6eb;
  --surface: #ffffff;
  --wash: #f6fafb;
  --blue: #23618b;
  --blue-pale: #e9f3f8;
  --mint: #3e9b8b;
  --mint-pale: #e7f5f1;
  --amber: #b46b29;
  --amber-pale: #fff4e8;
  --danger: #b24d51;
  --danger-pale: #fff0f1;
  --shadow: 0 18px 46px rgba(24, 59, 86, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--wash); color: var(--ink); line-height: 1.55; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.site-shell { min-height: 100vh; }
.topbar { max-width: 1180px; margin: 0 auto; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--ink); color: white; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: -.02em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.privacy-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.privacy-chips span, .source-badge, .muted-label, .required-label { border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface); padding: 5px 10px; font-size: 11px; font-weight: 700; }
main { max-width: 1180px; margin: 0 auto; padding: 0 28px 72px; }
.hero { min-height: 430px; padding: 58px 0 72px; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 80px; align-items: center; }
.eyebrow, .panel-kicker { margin: 0 0 11px; color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 20px; font-size: clamp(38px, 6vw, 68px); line-height: 1.06; letter-spacing: -.07em; }
h1 em { color: var(--mint); font-style: normal; }
.hero-lede { max-width: 560px; color: var(--ink-soft); font-size: 17px; }
.hero-actions, .result-actions, .form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-actions { margin-top: 30px; }
.button { appearance: none; border: 1px solid transparent; border-radius: 12px; min-height: 42px; padding: 10px 16px; color: var(--ink); background: transparent; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, .tab:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(62, 155, 139, .32); outline-offset: 2px; }
.button-primary { background: var(--ink); color: white; box-shadow: 0 8px 18px rgba(24, 59, 86, .18); }
.button-primary:hover { background: #0e2d45; }
.button-quiet { color: var(--blue); }
.button-outline { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }
.button-small { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.button-large { min-height: 50px; padding: 13px 20px; }
.hero-card { border: 1px solid #d7e7e7; border-radius: 26px; padding: 24px; background: linear-gradient(155deg, #f0faf7, #fff); box-shadow: var(--shadow); }
.hero-card-top, .hero-card-line { display: flex; align-items: center; gap: 8px; }
.hero-card-top { color: var(--ink-soft); font-size: 12px; }
.hero-card-date { margin-left: auto; color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--mint); box-shadow: 0 0 0 5px rgba(62, 155, 139, .12); }
.hero-card-line { justify-content: space-between; padding: 34px 0 18px; color: var(--ink-soft); font-size: 13px; }
.hero-card-line strong { color: var(--ink); font-size: 21px; }
.hero-card p { margin: 20px 0 0; color: var(--ink-soft); font-size: 13px; }
.mini-curve { height: 110px; padding: 15px 0; display: flex; align-items: end; justify-content: space-around; border-bottom: 1px solid #cce2de; background: repeating-linear-gradient(to bottom, transparent 0, transparent 24px, rgba(62, 155, 139, .08) 25px); }
.mini-curve span { width: 15%; border-radius: 12px 12px 3px 3px; background: linear-gradient(to top, #83c9ba, #3e9b8b); transform: rotate(-14deg); }
.mini-curve span:nth-child(1) { height: 34%; }.mini-curve span:nth-child(2) { height: 44%; }.mini-curve span:nth-child(3) { height: 50%; }.mini-curve span:nth-child(4) { height: 68%; }.mini-curve span:nth-child(5) { height: 83%; }
.tabbar { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 42px; }
.tab { border: 0; padding: 15px 18px; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-weight: 800; }
.tab span { margin-right: 6px; color: #a7b7c0; font-size: 11px; }.tab.is-active { border-color: var(--mint); color: var(--ink); }.tab.is-active span { color: var(--mint); }
.tab-panel { animation: fadeIn .25s ease; }.tab-panel[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.section-heading, .result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading h2, .result-header h2 { margin-bottom: 8px; font-size: 34px; line-height: 1.15; letter-spacing: -.05em; }.section-heading p, .result-header p { color: var(--ink-soft); }
.notice { display: flex; gap: 14px; align-items: baseline; margin: 18px 0; padding: 15px 18px; border-radius: 13px; font-size: 13px; }.notice strong { white-space: nowrap; }.notice-blue { background: var(--blue-pale); color: var(--blue); }.notice-amber { background: var(--amber-pale); color: #7c501f; }
.form-layout { display: grid; gap: 15px; }.panel { border: 1px solid var(--line); border-radius: 18px; padding: 23px; background: var(--surface); box-shadow: 0 6px 20px rgba(24, 59, 86, .035); }.form-panel { padding: 25px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }.panel-heading h3 { margin: 0; font-size: 20px; letter-spacing: -.04em; }.panel-heading h3 small { color: var(--muted); font-size: 13px; font-weight: 500; }.panel-intro { margin: -6px 0 16px; color: var(--ink-soft); font-size: 13px; }
.field-grid { display: grid; gap: 15px; }.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }.field span b { color: var(--mint); }.field small, .check-row small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }.field input, .field select, .unit-input { width: 100%; min-height: 44px; border: 1px solid #cfdee4; border-radius: 10px; background: #fcfefe; color: var(--ink); }.field input, .field select { padding: 9px 11px; }.unit-input { display: flex; align-items: center; overflow: hidden; }.unit-input input { min-width: 0; flex: 1; border: 0; }.unit-input i { padding-right: 11px; color: var(--muted); font-size: 12px; font-style: normal; }.field.compact { max-width: 150px; }.prematurity-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #edf2f4; }
.check-row { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); font-size: 13px; }.check-row input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--mint); }.check-row b, .check-row small { display: block; }.save-choice { flex: 1; }.important-check { padding: 17px; border-radius: 12px; background: var(--amber-pale); }.important-check b { color: #7c501f; }
.measurement-help { display: flex; gap: 9px; align-items: flex-start; min-height: 72px; padding: 11px 12px; border-radius: 10px; background: var(--wash); color: var(--ink-soft); }.measurement-help p { margin: 0; font-size: 11px; line-height: 1.5; }.help-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 99px; background: var(--blue); color: white; font-size: 11px; font-weight: 800; }
.history-rows { display: grid; gap: 10px; }.history-row { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr) auto; gap: 8px; align-items: end; padding: 12px; border: 1px solid #e5edf0; border-radius: 12px; background: #fbfdfd; }.history-row label { font-size: 11px; color: var(--ink-soft); font-weight: 700; }.history-row input { width: 100%; margin-top: 5px; min-height: 37px; padding: 6px 8px; border: 1px solid #d3e0e5; border-radius: 8px; }.remove-history { align-self: center; border: 0; background: transparent; color: var(--danger); font-weight: 800; }.history-empty { padding: 14px; color: var(--muted); font-size: 12px; text-align: center; border: 1px dashed #d2e1e5; border-radius: 10px; }.form-actions { justify-content: space-between; padding: 8px 2px; }.form-disclaimer { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; }
.result-section { margin-top: 48px; padding-top: 42px; border-top: 1px solid var(--line); }.result-summary { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }.summary-card { padding: 18px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line); }.summary-card.primary { background: var(--ink); color: white; border-color: var(--ink); }.summary-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }.summary-card.primary span { color: #b9cbd5; }.summary-card strong { display: block; margin-top: 7px; font-size: 18px; letter-spacing: -.03em; }.result-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }.result-grid-bottom { margin-top: 15px; }.metric-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.metric-card { padding: 14px; border-radius: 12px; background: var(--wash); }.metric-card .metric-title { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 12px; font-weight: 700; }.metric-card strong { display: block; margin-top: 8px; font-size: 24px; letter-spacing: -.05em; }.metric-card strong small { font-size: 12px; font-weight: 600; color: var(--muted); }.metric-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.metric-card.is-low, .metric-card.is-high { background: var(--amber-pale); }.metric-card.is-low strong, .metric-card.is-high strong { color: var(--amber); }.metric-card.is-out { background: var(--blue-pale); }.metric-card.is-out strong { color: var(--blue); }.empty-metric { color: var(--muted); font-size: 13px; }
.chart-panel .panel-heading { align-items: center; }.chart-panel select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--ink-soft); background: white; font-size: 12px; }.growth-chart { min-height: 240px; border-radius: 12px; background: linear-gradient(to bottom, rgba(62,155,139,.04), transparent); overflow: hidden; }.growth-chart svg { display: block; width: 100%; height: 240px; }.chart-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; }.projection-panel { background: linear-gradient(140deg, #eef9f5, white); }.projection-panel h3 { margin: 0 0 6px; }.projection-value { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 5px; }.projection-value strong { font-size: 29px; }.projection-range { color: var(--ink-soft); font-size: 13px; }.projection-panel p { margin: 11px 0 0; color: var(--muted); font-size: 11px; }.next-step-panel { min-height: 180px; }.next-step-panel .panel-heading { margin-bottom: 10px; }.next-step-copy { margin: 0; color: var(--ink-soft); font-size: 14px; }.next-step-copy strong { color: var(--ink); }.warning-list { margin-top: 16px; }.warning-list ul { margin: 0; padding-left: 18px; color: var(--amber); font-size: 12px; }.result-footnote { margin-top: 15px; padding: 15px 17px; border-radius: 12px; background: #f8fbfc; color: var(--ink-soft); font-size: 12px; }.result-footnote strong { color: var(--ink); }
.question-list { display: grid; gap: 10px; }.question-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 15px; border: 1px solid #e1ebee; border-radius: 12px; }.question-domain { margin: 0 0 3px; color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.question-prompt { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; }.question-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }.question-options { display: flex; gap: 6px; }.question-options label { position: relative; }.question-options input { position: absolute; opacity: 0; }.question-options span { display: inline-block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); background: white; font-size: 11px; font-weight: 700; white-space: nowrap; }.question-options input:checked + span { border-color: var(--mint); background: var(--mint-pale); color: #287d70; }.answer-summary { display: grid; gap: 10px; }.answer-group { padding: 12px; border-radius: 10px; background: var(--wash); }.answer-group h4 { margin: 0 0 5px; color: var(--mint); font-size: 11px; }.answer-group p { margin: 0; color: var(--ink-soft); font-size: 13px; }.answer-group p + p { margin-top: 4px; }.empty-state { padding: 24px; border-radius: 12px; background: var(--wash); color: var(--muted); text-align: center; font-size: 13px; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }.guide-card { min-height: 190px; }.guide-number { color: var(--mint); font-size: 13px; font-weight: 900; }.guide-card h3 { margin: 28px 0 8px; font-size: 18px; }.guide-card p { margin: 0; color: var(--ink-soft); font-size: 13px; }.guide-sources { margin-top: 15px; }.source-list { margin: 0; }.source-list div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 15px; padding: 14px 0; border-top: 1px solid #edf2f4; }.source-list dt { font-size: 12px; font-weight: 800; }.source-list dd { margin: 0; color: var(--ink-soft); font-size: 13px; }
.guide-data-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.footer { max-width: 1180px; margin: 0 auto; padding: 26px 28px 40px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }.footer strong { color: var(--ink); margin-right: 8px; }.footer p { margin: 0; }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }.hero-card { max-width: 500px; }.field-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }.result-grid, .result-summary { grid-template-columns: 1fr; }.guide-grid { grid-template-columns: 1fr; }.guide-card { min-height: auto; }.history-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }.remove-history { justify-self: end; }
}
@media (max-width: 560px) {
  .topbar, main, .footer { padding-left: 18px; padding-right: 18px; }.topbar { align-items: flex-start; }.privacy-chips { display: none; }.hero { min-height: auto; padding-bottom: 46px; }.hero-lede { font-size: 15px; }.hero-actions .button { width: 100%; }.tabbar { overflow-x: auto; margin-left: -18px; margin-right: -18px; padding-left: 10px; }.tab { white-space: nowrap; padding-left: 13px; padding-right: 13px; }.section-heading, .result-header { display: block; }.section-heading .source-badge { display: inline-block; margin-top: 8px; }.result-actions { margin-top: 15px; }.field-grid.three, .field-grid.four { grid-template-columns: 1fr; }.prematurity-row, .form-actions { align-items: stretch; flex-direction: column; }.field.compact { max-width: none; }.panel, .form-panel { padding: 18px; }.metric-cards { grid-template-columns: 1fr 1fr; }.question-card { grid-template-columns: 1fr; }.question-options { display: grid; grid-template-columns: repeat(3, 1fr); }.question-options span { width: 100%; text-align: center; }.source-list div { grid-template-columns: 1fr; gap: 4px; }.footer { display: block; }.footer p { margin-top: 8px; }.history-row { grid-template-columns: 1fr 1fr; }.history-row label:first-child { grid-column: 1 / -1; }.result-header h2, .section-heading h2 { font-size: 29px; }
}

@media print {
  body { background: white; }.topbar, .hero, .tabbar, .form-layout, .result-actions, .footer, [data-panel="development"], [data-panel="guide"] { display: none !important; }.site-shell, main { max-width: none; padding: 0; }.tab-panel[data-panel="growth"] { display: block !important; }.result-section { margin-top: 0; padding-top: 0; border: 0; }.panel { box-shadow: none; break-inside: avoid; }.result-grid { gap: 10px; }.result-footnote { border: 1px solid var(--line); }
}

.next-step-secondary { margin-top: 10px; }