.app-shell{width:min(100%, var(--content-readable));min-height:100vh;padding:max(var(--space-5), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right)) max(var(--space-10), env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left));margin-inline:auto}.app-screen{align-content:start;gap:var(--space-8);display:grid}.app-screen--start{padding-top:max(var(--space-8), env(safe-area-inset-top))}.app-screen--centered,.app-screen--result{align-content:center}.app-title h1,.app-heading h1{margin-bottom:var(--space-2);font-size:var(--font-size-title);line-height:var(--line-height-title)}.app-title p,.app-heading p{margin-bottom:var(--space-2);color:var(--color-text-muted)}.app-heading{gap:var(--space-1);display:grid}.app-heading--centered{text-align:center}.app-topbar{min-height:var(--size-control);justify-content:flex-start;gap:var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold);align-items:center;display:flex}.app-section,.app-mode-list,.app-actions{gap:var(--space-4);display:grid}.app-section>h2{font-size:var(--font-size-heading);line-height:var(--line-height-heading);margin-bottom:0}.app-chip-list{gap:var(--space-2);flex-wrap:wrap;display:flex}.app-help{color:var(--color-text-muted);font-size:var(--font-size-caption);margin-bottom:0}.app-screen--start .character-stage{min-height:10rem}@media (width>=48rem){.app-shell{padding-inline:var(--space-8)}.app-screen--start{padding-top:var(--space-10)}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-background:#f8f7f2;--color-surface:#fff;--color-surface-muted:#f0efe9;--color-text:#292832;--color-text-muted:#686670;--color-border:#dfddd5;--color-primary:#655cc8;--color-primary-hover:#554db2;--color-primary-pressed:#49429b;--color-primary-soft:#eceaff;--color-success:#28785c;--color-success-soft:#e5f5ee;--color-accent:#f2bc4d;--color-accent-soft:#fff4d6;--color-danger:#b74444;--color-danger-soft:#fceaea;--color-focus:#2e67d1;--color-overlay:#29283273;--font-family-base:Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;--font-size-display:2rem;--font-size-title:1.75rem;--font-size-heading:1.375rem;--font-size-body-large:1.125rem;--font-size-body:1rem;--font-size-label:.9375rem;--font-size-caption:.875rem;--line-height-display:1.25;--line-height-title:1.3;--line-height-heading:1.35;--line-height-body-large:1.55;--line-height-body:1.55;--line-height-label:1.4;--line-height-caption:1.45;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-small:.5rem;--radius-medium:.875rem;--radius-large:1.25rem;--radius-xlarge:1.75rem;--radius-pill:999px;--border-default:1px solid var(--color-border);--shadow-card:0 8px 24px #29283214;--shadow-raised:0 12px 32px #2928321f;--motion-fast:.16s;--motion-normal:.24s;--motion-celebrate:.6s;--size-touch-min:2.75rem;--size-control:3rem;--size-icon:1.25rem;--size-icon-large:1.5rem;--content-readable:35rem;--content-wide:60rem}*,:before,:after{box-sizing:border-box}html{background:var(--color-background);min-width:20rem;min-height:100%;color:var(--color-text);font-family:var(--font-family-base);font-synthesis:none;text-rendering:optimizelegibility}body{background:var(--color-background);min-height:100vh;color:var(--color-text);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:var(--line-height-body);margin:0}button,input,textarea,select{color:inherit;font:inherit}button,label{-webkit-tap-highlight-color:transparent}button:not(:disabled){cursor:pointer}img,svg{max-width:100%;display:block}h1,h2,h3,p{margin-block-start:0}a{color:var(--color-primary)}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}::selection{background:var(--color-primary-soft);color:var(--color-text)}#root{min-height:100vh}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}.button{min-height:var(--size-control);padding:var(--space-3) var(--space-5);border-radius:var(--radius-large);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold);line-height:var(--line-height-label);transition:background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);border:1px solid #0000}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{cursor:not-allowed;opacity:.56}.button--primary{background:var(--color-primary);color:var(--color-surface)}.button--primary:active:not(:disabled){background:var(--color-primary-pressed)}.button--secondary{border-color:var(--color-border);background:var(--color-surface);color:var(--color-text)}.button--secondary:active:not(:disabled){background:var(--color-surface-muted)}.button--text{color:var(--color-text-muted);background:0 0}.button--text:active:not(:disabled){background:var(--color-surface-muted);color:var(--color-text)}.button--danger{background:var(--color-danger);color:var(--color-surface)}.button--danger:active:not(:disabled){background:var(--color-text)}.button--full{width:100%}.icon-button{width:var(--size-control);min-width:var(--size-touch-min);height:var(--size-control);padding:var(--space-3);border:var(--border-default);border-radius:var(--radius-medium);background:var(--color-surface);place-items:center;display:inline-grid}.mode-card{width:100%;min-height:var(--size-touch-min);padding:var(--space-5);gap:var(--space-4);border:var(--border-default);border-radius:var(--radius-large);background:var(--color-surface);color:var(--color-text);text-align:left;transition:background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);grid-template-columns:auto 1fr auto;align-items:center;display:grid;position:relative}.mode-card:active{transform:translateY(1px)}.mode-card--selected{border-color:var(--color-primary);background:var(--color-primary-soft)}.mode-card__icon{width:var(--size-control);height:var(--size-control);border-radius:var(--radius-medium);background:var(--color-accent-soft);color:var(--color-text);font-size:var(--font-size-heading);place-items:center;display:grid}.mode-card__copy{gap:var(--space-1);display:grid}.mode-card__title{font-size:var(--font-size-body-large);line-height:var(--line-height-body-large)}.mode-card__description{color:var(--color-text-muted);font-size:var(--font-size-caption);line-height:var(--line-height-caption)}.mode-card__check{color:var(--color-primary);font-weight:var(--font-weight-bold)}.choice-chip{min-height:var(--size-touch-min);padding:var(--space-2) var(--space-4);gap:var(--space-2);border:var(--border-default);border-radius:var(--radius-pill);background:var(--color-surface);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold);align-items:center;display:inline-flex}.choice-chip--selected{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-pressed)}.mission-card{padding:var(--space-6);border:var(--border-default);border-radius:var(--radius-large);background:var(--color-surface);box-shadow:var(--shadow-card)}.mission-card__badge{padding:var(--space-1) var(--space-3);margin-bottom:var(--space-4);border-radius:var(--radius-pill);background:var(--color-primary-soft);color:var(--color-primary-pressed);font-size:var(--font-size-caption);display:inline-block}.mission-card__mission{margin-bottom:var(--space-5);font-size:var(--font-size-heading);line-height:var(--line-height-heading)}.mission-card__completion{padding:var(--space-4);margin-bottom:var(--space-4);gap:var(--space-1);border-radius:var(--radius-medium);background:var(--color-surface-muted);font-size:var(--font-size-caption);color:var(--color-text-muted);display:grid}.mission-card__completion strong{color:var(--color-text)}.mission-card__message{color:var(--color-primary-pressed);font-size:var(--font-size-caption);margin-bottom:0}.text-input{gap:var(--space-2);display:grid}.text-input__label{font-size:var(--font-size-label);font-weight:var(--font-weight-semibold)}.text-input__description,.text-input__error{font-size:var(--font-size-caption);line-height:var(--line-height-caption)}.text-input__description{color:var(--color-text-muted)}.text-input__control{width:100%;min-height:var(--size-control);padding:var(--space-3) var(--space-4);border:var(--border-default);border-radius:var(--radius-medium);background:var(--color-surface)}.text-input__control::placeholder{color:var(--color-text-muted)}.text-input__control--error{border-color:var(--color-danger)}.text-input__error{color:var(--color-danger);font-weight:var(--font-weight-semibold)}.character-stage{min-height:12rem;padding:var(--space-6);align-content:center;place-items:center;gap:var(--space-3);border-radius:var(--radius-xlarge);background:var(--color-primary-soft);color:var(--color-primary-pressed);text-align:center;display:grid}.character-stage--large{min-height:17rem}.character-stage__art{width:7.5rem;height:7.5rem}.character-stage--large .character-stage__art{width:10rem;height:10rem}.character-stage figcaption{font-size:var(--font-size-label);font-weight:var(--font-weight-semibold)}.character-stage__egg,.character-stage__shell{fill:var(--color-accent-soft);stroke:var(--color-accent);stroke-width:4px}.character-stage__crack,.character-stage__mouth{fill:none;stroke:var(--color-text);stroke-linecap:round;stroke-linejoin:round;stroke-width:3px}.character-stage__body{fill:var(--color-accent);stroke:var(--color-text);stroke-width:3px}.character-stage__eye{fill:var(--color-text)}.character-stage--shaking .character-stage__art{animation:character-wiggle var(--motion-celebrate) ease-in-out 1}@keyframes character-wiggle{0%,to{transform:rotate(0)}30%{transform:rotate(-3deg)}70%{transform:rotate(3deg)}}.progress-indicator{gap:var(--space-2);display:grid}.progress-indicator__copy{justify-content:space-between;gap:var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-caption);display:flex}.progress-indicator__copy strong{color:var(--color-text)}.progress-indicator__track{height:var(--space-2);border-radius:var(--radius-pill);background:var(--color-surface-muted);overflow:hidden}.progress-indicator__fill{border-radius:inherit;background:var(--color-success);height:100%;transition:width var(--motion-normal);display:block}.feedback-choice{border:0;margin:0;padding:0}.feedback-choice legend{margin-bottom:var(--space-3);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold);padding:0}.feedback-choice__options{gap:var(--space-2);display:grid}.feedback-choice__option{min-height:var(--size-control);padding:var(--space-3) var(--space-4);gap:var(--space-2);border:var(--border-default);border-radius:var(--radius-medium);background:var(--color-surface);text-align:left;align-items:center;display:flex}.feedback-choice__option--selected{border-color:var(--color-primary);background:var(--color-primary-soft)}.status-banner{min-height:var(--size-touch-min);padding:var(--space-3) var(--space-4);gap:var(--space-3);border-radius:var(--radius-medium);background:var(--color-surface-muted);font-size:var(--font-size-caption);grid-template-columns:auto 1fr auto;align-items:center;display:grid}.status-banner--update{background:var(--color-primary-soft)}.status-banner--error{background:var(--color-danger-soft)}.status-banner__icon{width:var(--size-icon-large);height:var(--size-icon-large);border-radius:var(--radius-pill);background:var(--color-text);color:var(--color-surface);font-size:var(--font-size-caption);font-weight:var(--font-weight-bold);place-items:center;display:grid}.status-banner--error .status-banner__icon{background:var(--color-danger)}.status-banner__action .button{min-height:var(--size-touch-min);padding:var(--space-2) var(--space-3)}.pwa-status{gap:var(--space-2);display:grid}@media (hover:hover){.button--primary:hover:not(:disabled){background:var(--color-primary-hover)}.button--secondary:hover:not(:disabled),.icon-button:hover:not(:disabled),.mode-card:hover:not(:disabled),.choice-chip:hover:not(:disabled),.feedback-choice__option:hover:not(:disabled){border-color:var(--color-primary)}.button--text:hover:not(:disabled){background:var(--color-surface-muted);color:var(--color-text)}}