:root{--color-mint: #2bb8a6;--color-coral: #f0756a;--color-bg: #f7fbf9;--color-ink: #1c2b28;--color-surface: #ffffff;--color-muted: #5a6f6a;--color-border: #d4e8e2;--touch-min: 44px;--font-display: "Nunito", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;--font-body: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;--radius: 16px;--shadow: 0 8px 24px rgba(28, 43, 40, .08)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--font-body);color:var(--color-ink);background:radial-gradient(ellipse 80% 50% at 10% 0%,#dff5ef 0%,transparent 55%),radial-gradient(ellipse 70% 45% at 90% 5%,#ffe8e4 0%,transparent 50%),var(--color-bg);line-height:1.5}h1,h2,h3{font-family:var(--font-display);line-height:1.2}button,input{font:inherit}button{min-height:var(--touch-min);min-width:var(--touch-min);border-radius:12px;border:2px solid transparent;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--color-mint);outline-offset:2px}.app-shell{max-width:1100px;margin:0 auto;padding:1.25rem}.card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:999px;font-size:.875rem;font-weight:700}.badge-serving{background:#e8f8f4;color:#0f6f62}.badge-package{background:#fff0ee;color:#b24f45}.btn-primary{background:var(--color-mint);color:#fff;padding:.65rem 1rem;font-weight:700}.btn-secondary{background:#fff;color:var(--color-ink);border-color:var(--color-border);padding:.65rem 1rem}.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.muted{color:var(--color-muted)}.grid-2{display:grid;gap:1rem}@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}.app-header .eyebrow{color:var(--color-coral);font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:0 0 .25rem}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.food-head{display:flex;gap:.75rem;align-items:flex-start}.food-icon{font-size:2rem;width:3rem;height:3rem;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#e8f8f4,#fff0ee);flex-shrink:0}.badge-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}.badge.confirmed{box-shadow:inset 0 0 0 2px var(--color-mint)}.badge.needs-tap,.field-find.needs-tap{box-shadow:0 0 0 2px #2bb8a659;animation:pulse-tap 1.6s ease-in-out infinite}.tap-cue{margin:.35rem 0 0;font-size:.9rem;font-weight:700;color:var(--color-coral)}@keyframes pulse-tap{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.food-card.selected{border-color:var(--color-mint)}.nutrition-table{width:100%;border-collapse:collapse}.nutrition-table th,.nutrition-table td{border:1px solid var(--color-border);padding:.5rem;text-align:left}.mission-grid,.food-grid{display:grid;gap:1rem;margin:1rem 0}@media(min-width:768px){.mission-grid{grid-template-columns:repeat(3,1fr)}.food-grid{grid-template-columns:repeat(2,1fr)}}.mission-card{text-align:left;background:#fff;border:2px solid var(--color-border);border-radius:var(--radius);padding:1rem}.mission-card em{color:var(--color-mint);font-style:normal;font-weight:700}.stepper{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.stepper-value{min-width:3rem;text-align:center;font-weight:700}.result-box{white-space:pre-wrap;background:#f0faf7;border-radius:12px;padding:1rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c2b2873;display:grid;place-items:center;padding:1rem}.modal{max-width:520px;width:100%}.feedback,.hint{color:#0f6f62;font-weight:600}fieldset{border:2px solid var(--color-border);border-radius:12px;margin:1rem 0;padding:.75rem 1rem}label{display:block;margin:.35rem 0}input[type=text],input:not([type]){min-height:var(--touch-min);border:2px solid var(--color-border);border-radius:10px;padding:.5rem .75rem;margin-left:.5rem}.condition-checklist{list-style:none;padding:0;margin:1rem 0}.condition-checklist li{margin:.35rem 0;font-weight:600}.check-pass{color:#0f6f62}.check-fail{color:var(--color-muted)}.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chip{background:#fff;border:2px solid var(--color-border);border-radius:999px;padding:.4rem .85rem;font-weight:700}.chip.selected{border-color:var(--color-mint);background:#e8f8f4}.chip-row{margin:.75rem 0}.chip-row>p{margin:0 0 .35rem;font-weight:600}.field-find{background:#fffdf8;border:2px dashed var(--color-mint);border-radius:8px;padding:.25rem .5rem;min-height:var(--touch-min);width:100%;text-align:left;font-weight:700}.field-find.confirmed{border-style:solid;border-color:var(--color-mint);background:#e8f8f4;animation:none}.calc-hint{background:#fff8e8;border:2px solid #f0d48a;border-radius:12px;padding:.65rem .85rem;margin:.5rem 0 .75rem;font-weight:700;color:#6a4e12}.finish-hint{margin-top:.75rem;font-weight:700;color:var(--color-coral)}.start-screen{text-align:center;padding:1.5rem 1.25rem 1.75rem}.start-hero{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem;padding:1.25rem;border-radius:20px;background:linear-gradient(160deg,#e8f8f4,#fff0ee)}.tray-emoji{font-size:2.75rem;line-height:1}.tray-foods{display:flex;gap:.75rem;font-size:1.75rem}.start-title{margin:0 0 .5rem;font-size:1.35rem}.start-lead{margin:0 auto 1rem;max-width:36rem;color:var(--color-muted)}.tip-details{text-align:left;margin:0 auto 1rem;max-width:36rem;border:2px solid var(--color-border);border-radius:12px;padding:.5rem .85rem}.tip-details summary{cursor:pointer;font-weight:700;color:var(--color-mint)}.btn-lg{padding:.85rem 1.35rem;font-size:1.05rem}.btn-ghost{background:transparent;color:var(--color-muted);border-color:transparent;padding:.5rem .75rem;font-size:.875rem}.result-card{text-align:center;position:relative;overflow:hidden}.celebrate{margin:0 0 .35rem;font-size:1.35rem;font-weight:800;color:var(--color-coral);animation:pop-in .45s ease-out}.celebrate-lg{font-size:clamp(1.75rem,5vw,2.4rem);letter-spacing:-.02em}.result-title{margin:.25rem 0 .75rem;font-size:1.25rem}.result-lead{margin:0 auto 1rem;max-width:28rem;font-size:1.05rem;font-weight:600;color:var(--color-ink)}.result-details{text-align:left;margin:0 auto 1.25rem;max-width:28rem;border:2px dashed var(--color-border);border-radius:12px;padding:.5rem .85rem}.result-details summary{cursor:pointer;font-weight:700;color:var(--color-muted)}.result-summary{white-space:pre-wrap;margin:.5rem 0 0;color:var(--color-muted);font-size:.95rem}.result-actions{justify-content:center;flex-direction:column;align-items:center}.result-burst{position:absolute;inset:.5rem 0 auto;pointer-events:none;height:3rem}.burst-star{position:absolute;font-size:1.5rem;animation:float-star 1.2s ease-out both}.burst-star.s1{left:18%;animation-delay:.05s}.burst-star.s2{left:48%;animation-delay:.15s}.burst-star.s3{left:78%;animation-delay:.25s}@keyframes float-star{0%{transform:translateY(12px) scale(.4);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@keyframes confirm-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes fade-slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.anim-confirm{animation:confirm-pop .4s ease-out}.anim-pop{animation:pop-in .4s ease-out}.anim-fade-in{animation:fade-slide-in .35s ease-out}.cheer-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin:.85rem 0;padding:.75rem 1rem;border-radius:14px;background:linear-gradient(120deg,#e8f8f4,#fff0ee);border:2px solid var(--color-mint);font-weight:800;color:#0f6f62;animation:pop-in .4s ease-out}.cheer-stickers{font-size:1.25rem}.sticker-list .sticker{display:inline-block;min-width:1.4rem}.sticker-pop{animation:fade-slide-in .35s ease-out}.progress-pips{font-weight:700}.step-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.step-pill{display:inline-flex;align-items:center;gap:.25rem;padding:.35rem .75rem;border-radius:999px;border:2px solid var(--color-border);background:#fff;font-size:.875rem;font-weight:700;color:var(--color-muted)}.step-pill.active{border-color:var(--color-mint);color:var(--color-ink);background:#e8f8f4}.step-pill.done{border-color:var(--color-coral);color:#b24f45}.one-food-stage{animation:fade-slide-in .35s ease-out;max-width:420px}.feedback-correct{animation:pop-in .4s ease-out}.result-card .result-box{text-align:left}.result-card .actions{justify-content:center}.step-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.explanation-sentence{font-size:1.05rem}.mission-card .locked{display:block;color:var(--color-muted);font-weight:600}.mission-progress{margin:0 0 1rem;padding:.75rem 1rem;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius)}.mission-progress-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;margin-bottom:.5rem;font-size:.95rem}.mission-progress-track{height:10px;border-radius:999px;background:#e4efeb;overflow:hidden}.mission-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-mint),#5ec4b5);border-radius:999px;transition:width .35s ease}.mission-progress-dots{list-style:none;display:flex;gap:.35rem;padding:0;margin:.55rem 0 0}.mission-progress-dots li{width:1.75rem;height:1.75rem;border-radius:999px;display:grid;place-items:center;font-size:.75rem;font-weight:800;border:2px solid var(--color-border);color:var(--color-muted);background:#fff}.mission-progress-dots li.done{background:#fff0ee;border-color:var(--color-coral);color:#b24f45}.mission-progress-dots li.current{background:#e8f8f4;border-color:var(--color-mint);color:#0f6f62}.phase-guide{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 1rem}.phase-guide li{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:999px;border:2px solid var(--color-border);font-size:.85rem;font-weight:700;color:var(--color-muted);background:#fff}.phase-guide li.active{border-color:var(--color-mint);color:var(--color-ink);background:#e8f8f4}.phase-guide li.done{border-color:var(--color-coral);color:#b24f45}.phase-heading{margin:0 0 .5rem;font-size:1.05rem}.mission-phase-block{margin:1rem 0 1.25rem;padding-top:.5rem;border-top:2px dashed var(--color-border)}.radio-touch{display:flex;align-items:center;gap:.65rem;min-height:var(--touch-min);padding:.45rem .65rem;margin:.35rem 0;border-radius:12px;border:2px solid transparent;cursor:pointer}.radio-touch:has(input:checked){border-color:var(--color-mint);background:#e8f8f4}.radio-touch input{width:1.25rem;height:1.25rem;flex-shrink:0}.target-board{background:#fff8e8;border:2px solid #f0d48a;border-radius:12px;padding:.75rem 1rem;margin:.75rem 0}.target-board-title{margin:0 0 .35rem;font-weight:800}.target-board ul{margin:0;padding-left:1.1rem}.target-serving{margin:.35rem 0;font-weight:700;color:#6a4e12}.target-serving.match{color:#0f6f62}.target-dir{color:var(--color-coral)}.compare-food-block{margin-bottom:1rem}.builder-progress{height:8px;border-radius:999px;background:#e4efeb;overflow:hidden;margin-bottom:.35rem}.builder-progress-fill{height:100%;background:var(--color-mint);transition:width .3s ease}.builder-step-label{margin:0 0 .65rem;font-weight:700}.start-progress{font-weight:800;color:#0f6f62}.teacher-details{margin-top:1.25rem;text-align:left;color:var(--color-muted);font-size:.85rem}.teacher-details summary{cursor:pointer}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
