:root {
  --ink: #080808;
  --paper: #ffffff;
  --pearl: #f5f5f3;
  --line: #d8d8d4;
  --muted: #727272;
  --soft-ink: #343434;
  --control-border: rgba(0,0,0,.28);
  --control-border-hover: rgba(0,0,0,.55);
  --choice-border: rgba(0,0,0,.24);
  --focus-halo: rgba(0,0,0,.09);
  --selected-detail: #c8c8c8;
  --selected-halo: rgba(255,255,255,.15);
  --disabled-ink: #999999;
  --disabled-bottom: #dfdfdc;
  --prompt-field-border: rgba(0,0,0,.12);
  --prompt-surface: #f5f5f3;
  --prompt-focus: rgba(0,0,0,.08);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --matte-light: #f5f5f3;
  --matte-dark: #080808;
  --elevation-rest: 0 6px 16px rgba(0,0,0,.10);
  --elevation-hover: 0 9px 20px rgba(0,0,0,.14);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 16px;
  font-weight: 520;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.skip-link { position: fixed; top: var(--s3); left: var(--s3); z-index: 10; padding: var(--s3); color: var(--paper); background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.app-shell { width: min(100%, 660px); min-height: 100dvh; margin: 0 auto; padding: max(var(--s5), env(safe-area-inset-top)) var(--s6) max(var(--s5), env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto auto 1fr auto; }
.app-header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.wordmark { padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 1.08rem; font-weight: 850; letter-spacing: -.055em; transition: opacity 150ms ease, transform 180ms var(--ease); }
.wordmark:hover { opacity: .62; }
.wordmark:active { transform: scale(.96); }
.header-step { color: var(--muted); font-size: .7rem; font-weight: 760; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

.progress { height: 36px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; gap: var(--s1); }
.progress-segment { position: relative; height: 2px; background: var(--line); overflow: visible; }
.progress-segment::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); }
.progress-segment.done::before, .progress-segment.active::before { transform: scaleX(1); }
.progress-segment.active::after { content: ""; position: absolute; top: 50%; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px rgba(0,0,0,.08); transform: translateY(-50%); animation: bead-arrive 340ms var(--ease) both; }
@keyframes bead-arrive { from { opacity: 0; transform: translateY(-50%) scale(.35); } to { opacity: 1; transform: translateY(-50%) scale(1); } }

.stage { min-height: 0; display: grid; align-items: center; padding: var(--s8) 0; }
.screen { width: 100%; will-change: transform, opacity, filter; }
.screen.enter { animation: screen-in 280ms var(--ease) both; }
.screen.exit { animation: screen-out 160ms var(--ease) both; }
.screen.enter[data-direction="-1"] { animation-name: screen-in-back; }
.screen.exit[data-direction="-1"] { animation-name: screen-out-back; }
@keyframes screen-in { from { opacity: 0; filter: blur(5px); transform: translateX(24px); } to { opacity: 1; filter: blur(0); transform: translateX(0); } }
@keyframes screen-out { from { opacity: 1; filter: blur(0); transform: translateX(0); } to { opacity: 0; filter: blur(4px); transform: translateX(-18px); } }
@keyframes screen-in-back { from { opacity: 0; filter: blur(5px); transform: translateX(-24px); } to { opacity: 1; filter: blur(0); transform: translateX(0); } }
@keyframes screen-out-back { from { opacity: 1; filter: blur(0); transform: translateX(0); } to { opacity: 0; filter: blur(4px); transform: translateX(18px); } }
.step-label { margin: 0 0 var(--s4); color: var(--muted); font-size: .7rem; font-weight: 780; letter-spacing: .11em; }
.question-title { max-width: 11em; margin: 0; font-size: clamp(2.1rem, 9vw, 3.75rem); font-weight: 780; line-height: 1.06; letter-spacing: -.055em; }
.question-hint { max-width: 31rem; margin: var(--s5) 0 0; color: var(--muted); }
.start-title { max-width: 9.5em; font-size: clamp(3rem, 14vw, 4.8rem); line-height: .98; }
.start-copy { max-width: 28rem; margin: var(--s6) 0 0; color: var(--soft-ink); font-size: 1.02rem; }
.resume-note { margin: var(--s6) 0 0; color: var(--muted); font-size: .8rem; }

.numeric-field { position: relative; width: min(100%, 320px); min-height: 64px; margin-top: var(--s10); padding: 0 var(--s5); display: flex; align-items: center; gap: var(--s3); border: 1px solid var(--control-border); border-radius: var(--radius-pill); background: var(--matte-light); box-shadow: var(--elevation-rest); transition: border-color 160ms ease, box-shadow 200ms ease, transform 180ms var(--ease); }
.numeric-field:hover { border-color: var(--control-border-hover); transform: translateY(-1px); }
.numeric-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--focus-halo), var(--elevation-hover); transform: translateY(-1px); }
.numeric-field input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; caret-color: var(--ink); font-size: 2rem; font-weight: 780; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; appearance: textfield; }
.numeric-field input::-webkit-outer-spin-button, .numeric-field input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.numeric-field > span:last-child { color: var(--muted); font-size: .82rem; font-weight: 740; }
.error-text { min-height: 1.5rem; margin: var(--s3) 0 0 var(--s4); color: var(--soft-ink); font-size: .78rem; }

.choices { margin-top: var(--s8); display: grid; gap: var(--s3); }
.choice, .back-button, .next-button, .capture-button, .restart-button, .prompt-button { position: relative; overflow: hidden; border-radius: var(--radius-pill); transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 180ms ease, transform 180ms var(--ease), filter 180ms ease; }
.choice { width: 100%; min-height: 60px; padding: var(--s4) var(--s5); display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--choice-border); color: var(--ink); background: var(--matte-light); box-shadow: var(--elevation-rest); text-align: left; font-weight: 750; }
.choice span { display: grid; gap: 2px; }
.choice small { color: var(--muted); font-size: .72rem; font-weight: 560; }
.choice::after { content: ""; width: 10px; height: 10px; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; transition: transform 220ms var(--ease), background 150ms ease; }
.choice:hover { border-color: var(--control-border-hover); transform: translateY(-2px); box-shadow: var(--elevation-hover); }
.choice[aria-pressed="true"] { color: var(--paper); border-color: var(--ink); background: var(--matte-dark); box-shadow: var(--elevation-rest); transform: translateY(-1px); }
.choice[aria-pressed="true"] small { color: var(--selected-detail); }
.choice[aria-pressed="true"]::after { background: var(--paper); box-shadow: 0 0 0 4px var(--selected-halo); transform: scale(.72); }
.choice:active, .next-button:active, .capture-button:active, .prompt-button:active, .back-button:active, .restart-button:active { transform: scale(.97); }

.step-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.step-nav[hidden] { display: none; }
.back-button, .next-button, .capture-button, .restart-button, .prompt-button { min-height: 50px; padding: var(--s3) var(--s6); border: 1px solid var(--control-border); font-weight: 780; }
.back-button, .restart-button { color: var(--ink); background: var(--matte-light); box-shadow: var(--elevation-rest); }
.next-button, .capture-button { margin-left: auto; color: var(--paper); background: var(--matte-dark); box-shadow: var(--elevation-rest); }
.prompt-button { color: var(--ink); background: var(--matte-light); box-shadow: var(--elevation-rest); }
.back-button:hover, .restart-button:hover, .next-button:hover, .capture-button:hover, .prompt-button:hover { transform: translateY(-2px); box-shadow: var(--elevation-hover); }
.next-button:disabled { border-color: var(--line); color: var(--disabled-ink); background: var(--disabled-bottom); box-shadow: none; cursor: not-allowed; filter: none; transform: none; }

.report-screen { padding: var(--s2) 0 var(--s8); align-self: start; }
.capture-prompt { margin: 0 0 var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.capture-prompt strong { font-size: 1.2rem; }
.capture-prompt span { color: var(--muted); font-size: .73rem; }
.report { width: 100%; padding: var(--s6); border: 1px solid var(--ink); background: var(--paper); }
.report-head { display: flex; align-items: start; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--ink); }
.report-brand { font-size: .82rem; font-weight: 850; letter-spacing: .08em; }
.report-date { color: var(--muted); font-size: .7rem; }
.calorie-block { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.metric-label { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; }
.calorie-value { display: block; margin-top: var(--s1); font-size: clamp(3.35rem, 16vw, 5.8rem); font-weight: 800; line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.calorie-value small { font-size: .88rem; letter-spacing: 0; }
.macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.macro { min-width: 0; padding: var(--s5) var(--s3) var(--s5) 0; }
.macro + .macro { padding-left: var(--s3); border-left: 1px solid var(--line); }
.macro strong { display: block; margin-top: var(--s2); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.macro small { color: var(--muted); }
.chart-section { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.chart-heading { margin: 0; display: flex; justify-content: space-between; gap: var(--s4); }
.chart-heading strong { font-size: 1rem; }
.chart-heading span { color: var(--muted); font-size: .73rem; text-align: right; }
.chart-wrap { position: relative; margin-top: var(--s4); }
.weight-chart { width: 100%; height: auto; display: block; overflow: visible; touch-action: none; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-target { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 5; }
.chart-text { fill: var(--muted); font-size: 12px; font-weight: 650; }
.chart-path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: draw-line 900ms var(--ease) both; }
.chart-path.compare { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 5; }
@keyframes draw-line { from { stroke-dashoffset: var(--path-length); } to { stroke-dashoffset: 0; } }
.chart-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: transform 160ms var(--ease); transform-box: fill-box; transform-origin: center; }
.weight-chart:hover .chart-dot, .weight-chart:focus .chart-dot { transform: scale(1.35); }
.chart-tooltip { position: absolute; z-index: 2; min-width: 96px; padding: var(--s2) var(--s3); color: var(--paper); background: var(--ink); border-radius: var(--radius-pill); font-size: .73rem; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); animation: tooltip-in 140ms ease both; }
@keyframes tooltip-in { from { opacity: 0; filter: blur(4px); transform: translate(-50%, calc(-100% - 8px)) scale(.94); } }
.chart-tooltip[hidden] { display: none; }
.chart-legend { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s4); color: var(--muted); font-size: .7rem; }
.chart-legend span::before { content: ""; width: 18px; height: 2px; display: inline-block; margin-right: var(--s2); vertical-align: middle; background: var(--ink); }
.chart-legend .compare::before { height: 1px; background: var(--muted); }
.report-note { margin: var(--s5) 0 0; color: var(--soft-ink); font-size: .75rem; }
.report-actions { margin-top: var(--s4); display: flex; gap: var(--s3); }
.download-state { min-height: 1.3rem; margin: var(--s2) 0 0; color: var(--muted); font-size: .73rem; }
.source-links { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s3); }
.source-links a { color: var(--muted); font-size: .7rem; text-underline-offset: 3px; transition: color 150ms ease; }
.source-links a:hover { color: var(--ink); }

.prompt-screen { min-height: 0; height: 100%; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; align-self: stretch; }
.prompt-screen-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); }
.prompt-screen-head .question-title { max-width: none; }
.prompt-screen-head > span { padding-bottom: var(--s1); color: var(--muted); font-size: .65rem; font-weight: 760; letter-spacing: .06em; white-space: nowrap; }
.prompt-status { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s4); color: var(--muted); font-size: .66rem; font-weight: 780; letter-spacing: .1em; }
.prompt-document { width: 100%; min-width: 0; min-height: 0; margin: var(--s5) 0 0; padding: var(--s5); overflow: auto; overflow-wrap: anywhere; border: 1px solid var(--prompt-field-border); border-radius: var(--radius-sm); color: var(--soft-ink); background: var(--prompt-surface); box-shadow: var(--elevation-rest); font: 540 .78rem/1.68 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: normal; }
.prompt-document:focus { border-color: var(--ink); outline: 0; box-shadow: 0 0 0 4px var(--prompt-focus), var(--elevation-rest); }
.prompt-document::selection { color: var(--paper); background: var(--ink); }
.next-button[data-copied="true"] { animation: copy-swap 260ms var(--ease) both; }
@keyframes copy-swap { 0% { opacity: 0; filter: blur(7px); transform: translateY(7px) scale(.92); } 100% { opacity: 1; filter: blur(0); transform: none; } }
.copy-state { min-height: 1.3rem; margin: var(--s3) 0 0; color: var(--muted); font-size: .72rem; }

.site-preferences { position: fixed; z-index: 20; top: var(--s4); left: 50%; width: min(680px, calc(100% - var(--s8))); padding: var(--s4); display: flex; align-items: center; gap: var(--s4); border: 1px solid var(--control-border); border-radius: 20px; background: var(--paper); box-shadow: var(--elevation-hover); transform: translateX(-50%); }
.site-preferences p { margin: 0; display: grid; gap: 2px; font-size: .78rem; }
.site-preferences p span { color: var(--muted); font-size: .69rem; }
.site-preferences div { margin-left: auto; display: flex; gap: var(--s2); }
.site-preferences button { min-height: 40px; padding: var(--s2) var(--s3); border: 1px solid var(--control-border); border-radius: var(--radius-pill); color: var(--ink); background: var(--matte-light); font-size: .72rem; font-weight: 760; white-space: nowrap; }
.site-preferences button:last-child { color: var(--paper); background: var(--matte-dark); }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.app-shell.report-mode { width: min(100%, 760px); grid-template-rows: 1fr; }
.report-mode .app-header, .report-mode .progress { display: none; }
.report-mode .stage { padding-block: var(--s3); align-items: start; }
.report-mode .report-screen { padding-bottom: 0; }
.app-shell.prompt-mode { height: 100dvh; overflow: hidden; }
.prompt-mode .stage { min-height: 0; align-items: stretch; overflow: hidden; padding-block: var(--s5); }

@media (min-width: 760px) {
  .app-shell { padding-inline: var(--s8); }
  .stage { padding-block: var(--s10); }
  .report-mode .stage { padding-block: var(--s3); }
}
@media (max-width: 520px) {
  .app-shell { padding-inline: var(--s4); }
  .capture-prompt { align-items: start; flex-direction: column; }
  .report-actions { flex-direction: column; }
  .capture-button, .restart-button, .prompt-button { width: 100%; margin: 0; }
  .report { padding: var(--s4); }
  .macro { padding-block: var(--s4); }
  .macro strong { font-size: 1.02rem; }
  .macro small { font-size: .66rem; }
  .report-note { font-size: .68rem; }
  .prompt-screen-head { align-items: start; flex-direction: column; gap: var(--s2); }
  .prompt-document { padding: var(--s4); }
  .site-preferences { align-items: stretch; flex-direction: column; }
  .site-preferences div { width: 100%; margin: 0; }
  .site-preferences button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .app-header, .progress, .capture-prompt, .report-actions, .download-state, .source-links { display: none !important; }
  .app-shell { min-height: 0; padding: 0; }
  .stage { padding: 0; }
  .report { border: 0; }
}