:root{--font-display:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;--font-technical:ui-monospace, SFMono-Regular, Menlo, monospace;--font-feature-headings:normal;--color-primary:#0064e0;--color-canvas:#fff;--color-surface-soft:#f1f4f6;--color-hairline:#c9ced3;--color-hairline-soft:#e4e6eb;--color-ink-deep:#0a1317;--color-ink:#1c2b33;--color-charcoal:#344854;--color-steel:#627885;--color-stone:#94a3ad;--color-success:#1b8e3a;--color-warning:#f7c948;--color-ink-button:#000;--color-on-ink-button:#fff;--color-disabled-text:#c9ced3;--border-translucent:#0a13171f;--text-primary:var(--color-ink-deep);--text-body:var(--color-ink);--text-muted:var(--color-steel);--text-disabled:var(--color-stone);--surface-card:var(--color-canvas);--surface-soft:var(--color-surface-soft);--border-soft:var(--color-hairline-soft);--space-xxs:4px;--space-xs:8px;--space-sm:10px;--space-md:12px;--space-base:16px;--space-lg:20px;--space-xl:24px;--space-xxl:32px;--space-xxxl:40px;--space-section-sm:48px;--space-section:64px;--space-section-lg:80px;--space-hero:120px;--container-max:1280px;--rail-max:380px;--gutter:32px;--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:16px;--radius-xxl:24px;--radius-xxxl:32px;--radius-feature:40px;--radius-full:100px;--radius-circle:50%;--elevation-0:none;--elevation-1:#0003 1px 1px 0px 0px;--elevation-2:#14161a4d 0px 1px 4px 0px;--motion-surface:.2s cubic-bezier(.2, 0, 0, 1);--motion-accordion:.3s cubic-bezier(.4, 0, .2, 1);--type-hero-display-size:64px;--type-hero-display-weight:500;--type-hero-display-lh:1.16;--type-hero-display-ls:0;--type-display-lg-size:48px;--type-display-lg-weight:500;--type-display-lg-lh:1.17;--type-display-lg-ls:0;--type-heading-lg-size:36px;--type-heading-lg-weight:500;--type-heading-lg-lh:1.28;--type-heading-lg-ls:0;--type-heading-md-size:28px;--type-heading-md-weight:300;--type-heading-md-lh:1.21;--type-heading-md-ls:0;--type-heading-sm-size:24px;--type-heading-sm-weight:500;--type-heading-sm-lh:1.25;--type-heading-sm-ls:0;--type-subtitle-lg-size:18px;--type-subtitle-lg-weight:700;--type-subtitle-lg-lh:1.44;--type-subtitle-lg-ls:0;--type-subtitle-md-size:18px;--type-subtitle-md-weight:400;--type-subtitle-md-lh:1.44;--type-subtitle-md-ls:0;--type-body-md-size:16px;--type-body-md-weight:400;--type-body-md-lh:1.5;--type-body-md-ls:-.16px;--type-body-md-bold-weight:700;--type-body-sm-size:14px;--type-body-sm-weight:400;--type-body-sm-lh:1.43;--type-body-sm-ls:-.14px;--type-body-sm-bold-weight:700;--type-caption-size:12px;--type-caption-weight:400;--type-caption-lh:1.33;--type-caption-ls:0;--type-caption-bold-weight:700;--type-button-md-size:14px;--type-button-md-weight:700;--type-button-md-lh:1.43;--type-button-md-ls:-.14px;--type-link-md-size:16px;--type-link-md-weight:700;--type-link-md-lh:1.5;--type-link-md-ls:-.16px}.type-hero-display,.type-display-lg,.type-heading-lg,.type-heading-md,.type-heading-sm{font-family:var(--font-display);font-feature-settings:var(--font-feature-headings);margin:0}.type-subtitle-lg,.type-subtitle-md,.type-body-md,.type-body-md-bold,.type-body-sm,.type-body-sm-bold,.type-caption,.type-caption-bold,.type-button-md,.type-link-md{font-family:var(--font-body);margin:0}.type-hero-display{font-size:var(--type-hero-display-size);font-weight:var(--type-hero-display-weight);line-height:var(--type-hero-display-lh);letter-spacing:var(--type-hero-display-ls)}.type-display-lg{font-size:var(--type-display-lg-size);font-weight:var(--type-display-lg-weight);line-height:var(--type-display-lg-lh);letter-spacing:var(--type-display-lg-ls)}.type-heading-lg{font-size:var(--type-heading-lg-size);font-weight:var(--type-heading-lg-weight);line-height:var(--type-heading-lg-lh);letter-spacing:var(--type-heading-lg-ls)}.type-heading-md{font-size:var(--type-heading-md-size);font-weight:var(--type-heading-md-weight);line-height:var(--type-heading-md-lh);letter-spacing:var(--type-heading-md-ls)}.type-heading-sm{font-size:var(--type-heading-sm-size);font-weight:var(--type-heading-sm-weight);line-height:var(--type-heading-sm-lh);letter-spacing:var(--type-heading-sm-ls)}.type-subtitle-lg{font-size:var(--type-subtitle-lg-size);font-weight:var(--type-subtitle-lg-weight);line-height:var(--type-subtitle-lg-lh)}.type-subtitle-md{font-size:var(--type-subtitle-md-size);font-weight:var(--type-subtitle-md-weight);line-height:var(--type-subtitle-md-lh)}.type-body-md{font-size:var(--type-body-md-size);font-weight:var(--type-body-md-weight);line-height:var(--type-body-md-lh);letter-spacing:var(--type-body-md-ls)}.type-body-md-bold{font-size:var(--type-body-md-size);font-weight:var(--type-body-md-bold-weight);line-height:var(--type-body-md-lh);letter-spacing:var(--type-body-md-ls)}.type-body-sm{font-size:var(--type-body-sm-size);font-weight:var(--type-body-sm-weight);line-height:var(--type-body-sm-lh);letter-spacing:var(--type-body-sm-ls)}.type-body-sm-bold{font-size:var(--type-body-sm-size);font-weight:var(--type-body-sm-bold-weight);line-height:var(--type-body-sm-lh);letter-spacing:var(--type-body-sm-ls)}.type-caption{font-size:var(--type-caption-size);font-weight:var(--type-caption-weight);line-height:var(--type-caption-lh)}.type-caption-bold{font-size:var(--type-caption-size);font-weight:var(--type-caption-bold-weight);line-height:var(--type-caption-lh)}.type-button-md{font-size:var(--type-button-md-size);font-weight:var(--type-button-md-weight);line-height:var(--type-button-md-lh);letter-spacing:var(--type-button-md-ls)}.type-link-md{font-size:var(--type-link-md-size);font-weight:var(--type-link-md-weight);line-height:var(--type-link-md-lh);letter-spacing:var(--type-link-md-ls)}.btn{justify-content:center;align-items:center;gap:var(--space-xs);cursor:pointer;font-family:var(--font-body);font-size:var(--type-button-md-size);font-weight:var(--type-button-md-weight);line-height:var(--type-button-md-lh);letter-spacing:var(--type-button-md-ls);border-radius:var(--radius-full);white-space:nowrap;transition:background var(--motion-surface), color var(--motion-surface), border-color var(--motion-surface), transform var(--motion-surface);border:none;display:inline-flex}.btn:active{transform:scale(.98)}.button-primary{background:var(--color-ink-button);color:var(--color-on-ink-button);padding:14px 30px}.button-primary:active{background:var(--color-charcoal)}.button-primary-disabled{background:var(--color-disabled-text);color:var(--color-on-ink-button);cursor:not-allowed}.button-primary-disabled:active{transform:none}.button-secondary{color:var(--color-ink-deep);border:2px solid var(--color-ink-deep);background:0 0;padding:12px 28px}.button-secondary-disabled{color:var(--text-disabled);border-color:var(--text-disabled);cursor:not-allowed}.button-secondary-disabled:active{transform:none}.button-pill-tab{background:var(--color-canvas);color:var(--color-ink);border:1px solid var(--color-hairline);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--type-body-sm-size);letter-spacing:-.14px;cursor:pointer;padding:8px 16px;font-weight:700}.button-pill-tab-active{background:var(--color-ink-deep);color:var(--color-canvas);border-color:#0000}.badge{font-family:var(--font-body);font-size:var(--type-caption-size);font-weight:var(--type-caption-bold-weight);line-height:var(--type-caption-lh);border-radius:var(--radius-full);align-items:center;padding:4px 10px;display:inline-flex}.badge-success{background:var(--color-success);color:var(--color-canvas)}.promo-banner{justify-content:center;align-items:center;gap:var(--space-xs);background:var(--color-ink-deep);color:var(--color-canvas);font-size:var(--type-body-sm-size);letter-spacing:-.14px;padding:var(--space-md) var(--space-xl);font-weight:700;display:flex}.promo-banner a{color:inherit;text-decoration:underline}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--surface-soft);color:var(--text-body);font-family:var(--font-body);touch-action:manipulation;min-height:100vh}#app{min-height:100vh}canvas{image-rendering:pixelated}.panel{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-xl);width:320px;max-width:calc(100vw - 32px);padding:16px}.modal-overlay{z-index:30;background:#0a1317b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.game-layer{z-index:20;background:var(--surface-soft);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.hidden{display:none!important}.shell{flex-direction:column;min-height:100vh;display:flex}.shell-header{justify-content:space-between;align-items:center;gap:var(--space-md);padding:var(--space-lg) var(--space-base);border-bottom:1px solid var(--border-soft);flex-wrap:wrap;display:flex}.wordmark{align-items:baseline;gap:var(--space-sm);display:flex}.wordmark-title{font-family:var(--font-display);font-size:var(--type-heading-sm-size);font-weight:var(--type-heading-sm-weight);color:var(--text-primary);letter-spacing:-.4px}.wordmark-sub{font-size:var(--type-caption-size);color:var(--text-muted)}.currency-pills{align-items:center;gap:var(--space-xs);display:flex}.currency-pill{align-items:center;gap:var(--space-xxs);padding:7px var(--space-base);border-radius:var(--radius-full);background:var(--surface-soft);font-size:var(--type-body-sm-size);color:var(--text-primary);font-weight:700;display:inline-flex}.tab-bar{gap:var(--space-xs);padding:var(--space-base);flex-wrap:wrap;display:flex}.shell-body{padding:0 var(--space-base) var(--space-xxl);flex:1;justify-content:center;display:flex}.panel-wide{width:100%;max-width:960px}.wardrobe-header{justify-content:space-between;align-items:flex-end;gap:var(--space-md);margin-bottom:var(--space-xl);flex-wrap:wrap;display:flex}.wardrobe-sub{color:var(--text-muted);margin-top:var(--space-xs)}.wardrobe-count{color:var(--text-muted);white-space:nowrap}.outfit-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));display:grid}.outfit-card{gap:var(--space-sm);flex-direction:column;display:flex}.outfit-preview{border-radius:var(--radius-xl);background:var(--surface-soft);border:2px solid #0000;justify-content:center;align-items:center;height:140px;display:flex;position:relative}.outfit-preview-equipped{border-color:var(--color-success)}.outfit-badge{position:absolute;top:8px;left:8px}.outfit-info{gap:var(--space-xxs);flex-direction:column;display:flex}.outfit-cost-row{align-items:center;gap:var(--space-xxs);display:flex}.outfit-cost-owned{color:var(--text-disabled)}.outfit-cost-short{color:var(--color-warning)}.outfit-action{width:100%}.shop-header{gap:var(--space-xs);margin-bottom:var(--space-xl);flex-direction:column;display:flex}.shop-sub{color:var(--text-muted)}.shop-section-heading{margin:var(--space-md) 0 var(--space-lg)}.upgrade-list{gap:var(--space-md);margin-bottom:var(--space-xxl);flex-direction:column;display:flex}.upgrade-card{align-items:center;gap:var(--space-lg);border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:var(--space-lg);flex-wrap:wrap;display:flex}.upgrade-icon{border-radius:var(--radius-lg);background:var(--surface-soft);flex:0 0 56px;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.upgrade-info{gap:var(--space-xxs);flex-direction:column;flex:200px;min-width:160px;display:flex}.upgrade-desc{color:var(--text-muted)}.upgrade-level{align-items:center;gap:4px;display:flex}.upgrade-level-label{color:var(--text-muted);margin-left:var(--space-xxs);white-space:nowrap}.level-dots{align-items:center;gap:4px;display:flex}.level-dot{border-radius:var(--radius-circle);background:var(--border-soft);width:10px;height:10px}.level-dot-filled{background:var(--color-success)}.upgrade-price{align-items:center;gap:var(--space-xxs);white-space:nowrap;display:flex}.consumable-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.consumable-card{gap:var(--space-md);border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:var(--space-lg);flex-direction:column;display:flex}.consumable-icon{border-radius:var(--radius-lg);background:var(--surface-soft);justify-content:center;align-items:center;height:90px;display:flex}.consumable-info{gap:var(--space-xxs);flex-direction:column;display:flex}.consumable-info-top{justify-content:space-between;align-items:center;gap:var(--space-xs);display:flex}.consumable-stock{color:var(--text-muted);white-space:nowrap}.consumable-footer{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-top:auto;display:flex}.lobby-hero{gap:var(--space-xxl);width:100%;max-width:1100px;padding:var(--space-xxl) 0;grid-template-columns:420px 1fr;align-items:center;display:grid}.lobby-preview{border-radius:var(--radius-xxxl);background:linear-gradient(180deg, #cfe6f7 0%, #eef4f8 60%, var(--surface-soft) 100%);justify-content:center;align-items:flex-end;height:420px;display:flex;overflow:hidden}.lobby-preview canvas{margin-bottom:var(--space-xxl)}.lobby-info{gap:var(--space-xl);flex-direction:column;display:flex}.lobby-stat-label{color:var(--text-muted)}.lobby-stat-value{margin-top:var(--space-xxs);color:var(--text-primary);line-height:1}.lobby-stat-sub{color:var(--text-muted);margin-top:var(--space-sm)}.lobby-equipped{align-items:center;gap:var(--space-md);display:flex}.lobby-consumables{gap:var(--space-sm);flex-direction:column;max-width:460px;display:flex}.lobby-consumables-label{color:var(--text-muted)}.lobby-chip-row{gap:var(--space-xs);flex-wrap:wrap;display:flex}.lobby-chip{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);border:1px solid var(--border-soft);border-radius:var(--radius-full);background:var(--surface-card);font-family:var(--font-body);cursor:pointer;display:inline-flex}.lobby-chip-empty{color:var(--text-muted)}.lobby-actions{gap:var(--space-md);padding-top:var(--space-xxs);flex-wrap:wrap;display:flex}.lobby-hint{color:var(--text-muted)}.panel.result-panel{width:460px;max-width:calc(100vw - 48px);max-height:90vh;padding:var(--space-xxl);overflow-y:auto}.result-tag{color:var(--text-muted)}.result-height{margin-top:var(--space-xs);line-height:1}.result-stats{gap:var(--space-md);margin:var(--space-xl) 0;display:flex}.result-stat{align-items:center;gap:var(--space-sm);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:var(--space-base);flex:1;display:flex}.result-stat-label,.result-note{color:var(--text-muted)}.result-actions{gap:var(--space-sm);margin-top:var(--space-xl);display:flex}.result-actions .btn{flex:1}.panel.quiz-panel{width:480px;max-width:calc(100vw - 48px);max-height:90vh;padding:var(--space-xxl);overflow-y:auto}.quiz-title{margin-bottom:var(--space-md)}.quiz-timer-bar{background:var(--border-soft);border-radius:var(--radius-full);height:4px;margin-bottom:var(--space-lg);overflow:hidden}.quiz-timer-fill{background:var(--text-primary);width:100%;height:100%}.quiz-question{margin-bottom:var(--space-lg);color:var(--text-body)}.quiz-choices{gap:var(--space-xs);flex-direction:column;display:flex}.quiz-choice{text-align:left;width:100%;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);border:1px solid var(--border-soft);background:var(--surface-card);color:var(--text-primary);cursor:pointer;font:inherit}.quiz-choice:active{transform:scale(.98)}.quiz-reward-choice{text-align:left;white-space:normal;border-radius:var(--radius-lg);width:100%;padding:var(--space-md) var(--space-lg);flex-direction:column;align-items:flex-start;gap:2px}.quiz-reward-choice+.quiz-reward-choice{margin-top:var(--space-xs)}.quiz-reward-desc{color:var(--text-muted);font-weight:400}.loadout-header{margin-bottom:var(--space-xl)}.loadout-sub{color:var(--text-muted);margin-top:var(--space-xs)}.loadout-list{gap:var(--space-md);margin-bottom:var(--space-xl);flex-direction:column;display:flex}.loadout-stock{color:var(--text-muted);margin-left:var(--space-xxs)}.loadout-footer{gap:var(--space-md);display:flex}.loadout-footer .btn{flex:1}.records-header{gap:var(--space-xs);margin-bottom:var(--space-xl);flex-direction:column;display:flex}.records-sub{color:var(--text-muted)}.records-top{gap:var(--space-lg);margin-bottom:var(--space-lg);grid-template-columns:1fr 1fr;display:grid}.records-best-card{border-radius:var(--radius-xxl);background:var(--color-ink-deep);color:var(--color-canvas);padding:var(--space-xxl);flex-direction:column;justify-content:center;display:flex}.records-best-label{opacity:.7}.records-best-value{margin-top:var(--space-xs);line-height:1}.records-best-sub{opacity:.7;margin-top:var(--space-md)}.records-stat-grid{gap:var(--space-md);grid-template-columns:1fr 1fr;display:grid}.records-stat-tile{border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:var(--space-lg);flex-direction:column;justify-content:center;display:flex}.records-stat-label{color:var(--text-muted);margin-top:var(--space-xxs)}.records-chart-panel{border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:var(--space-xl);margin-bottom:var(--space-lg)}.records-chart-empty{color:var(--text-muted);margin-top:var(--space-md)}.records-chart{align-items:flex-end;gap:var(--space-sm);height:160px;margin-top:var(--space-xl);display:flex}.records-bar-col{justify-content:flex-end;align-items:center;gap:var(--space-xs);flex-direction:column;flex:1;height:100%;display:flex}.records-bar-label{color:var(--text-muted)}.records-bar{background:var(--surface-soft);border-radius:4px 4px 0 0;width:100%}.records-bar-best{background:var(--color-success)}.records-zone-grid{gap:var(--space-md);grid-template-columns:repeat(3,1fr);display:grid}.records-zone-card{border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:var(--space-lg)}.records-zone-top{justify-content:space-between;align-items:center;display:flex}.records-zone-range{color:var(--text-muted)}.zone-bar-track{border-radius:var(--radius-full);background:var(--border-soft);height:6px;margin-top:var(--space-base);overflow:hidden}.zone-bar-fill{height:100%}.zone-bar-fill-ground{background:var(--color-primary)}.zone-bar-fill-sky{background:var(--color-warning)}.zone-bar-fill-space{background:var(--color-ink-deep)}.records-zone-note{color:var(--text-muted);margin-top:var(--space-sm)}.touch-overlay{z-index:1;pointer-events:none;--touch-glyph:#fffffff2;--touch-glyph-outline:#0000008c;--touch-glyph-idle:.25;--touch-glyph-active:.6;--touch-bottom:max(24px, calc(env(safe-area-inset-bottom) + 12px));position:absolute;inset:0}.touch-overlay-glyphs-hidden .touch-track-rest,.touch-overlay-glyphs-hidden .touch-track-live,.touch-overlay-glyphs-hidden .touch-jump-glyph{display:none}.touch-track{border-radius:var(--radius-full);width:96px;height:28px;color:var(--touch-glyph);text-shadow:0 0 2px var(--touch-glyph-outline), 0 0 1px var(--touch-glyph-outline);opacity:var(--touch-glyph-idle);background:#0000002e;justify-content:space-between;align-items:center;padding:0 6px;transition:opacity .12s;display:flex;position:absolute}.touch-track.is-hidden{display:none}.touch-track.is-active{opacity:var(--touch-glyph-active)}.touch-track-arrow{font-size:14px;line-height:1}.touch-knob{border-radius:var(--radius-circle);background:var(--touch-glyph);width:14px;height:14px;box-shadow:0 0 0 1px var(--touch-glyph-outline);margin:-7px 0 0 -7px;transition:transform 60ms linear;position:absolute;top:50%;left:50%}.touch-track-rest{left:25%;bottom:var(--touch-bottom);transform:translate(-50%)}.touch-track-live{opacity:var(--touch-glyph-active);transform:translate(-50%,-50%)}.touch-jump-glyph{left:75%;bottom:var(--touch-bottom);width:56px;height:56px;color:var(--touch-glyph);text-shadow:0 0 2px var(--touch-glyph-outline), 0 0 1px var(--touch-glyph-outline);opacity:var(--touch-glyph-idle);justify-content:center;align-items:center;font-size:40px;line-height:1;transition:opacity .12s;display:flex;position:absolute;transform:translate(-50%)}.touch-jump-glyph.is-active{opacity:var(--touch-glyph-active)}.touch-hint{top:max(24px, calc(env(safe-area-inset-top) + 12px));border-radius:var(--radius-full);color:var(--color-canvas);white-space:nowrap;opacity:0;background:#0a1317b8;padding:6px 12px;transition:opacity .3s;position:absolute;left:50%;transform:translate(-50%)}.touch-hint-shown{opacity:1}.touch-hint-fading{opacity:0}@media (width<=760px){.lobby-hero{padding:var(--space-xl) 0;grid-template-columns:1fr}.lobby-preview{height:320px}}@media (width<=480px){.shell-header{flex-direction:column;align-items:flex-start}.tab-bar{padding:var(--space-sm) var(--space-xs);justify-content:center}.lobby-preview{height:280px}.records-top,.records-zone-grid{grid-template-columns:1fr}}