/* tokens.json에서 생성. 크기·색·동작의 후보값; 실기기 측정과 구분한다. */
:root {
  --oa-p-iron-1000: #05080b;
  --oa-p-iron-950: #0b1218;
  --oa-p-iron-900: #101b23;
  --oa-p-iron-850: #15212b;
  --oa-p-iron-800: #1d2b37;
  --oa-p-iron-700: #26394a;
  --oa-p-iron-650: #2b3946;
  --oa-p-iron-500: #3a5062;
  --oa-p-parch-0: #fffaf0;
  --oa-p-parch-50: #fff6e6;
  --oa-p-parch-200: #efe4c8;
  --oa-p-parch-400: #c9bfa6;
  --oa-p-ash-450: #8f8a7e;
  --oa-p-ash-500: #857f72;
  --oa-p-brass-50: #fff1cc;
  --oa-p-brass-100: #f0d39a;
  --oa-p-brass-200: #e6bb68;
  --oa-p-brass-400: #c79a52;
  --oa-p-brass-600: #8a5f25;
  --oa-p-brass-900: #3a2408;
  --oa-p-crimson-400: #c63b2f;
  --oa-p-crimson-500: #bf3a2e;
  --oa-p-crimson-600: #a52a26;
  --oa-p-crimson-800: #6e161a;
  --oa-p-crimson-950: #2a0c08;
  --oa-p-teal-500: #2a7c80;
  --oa-p-teal-600: #21686d;
  --oa-p-teal-800: #14484e;
  --oa-p-teal-950: #061c1f;
  --oa-p-gold-300: #ecc57c;
  --oa-p-gold-600: #a8762e;
  --oa-p-echo-200: #c9d6e0;
  --oa-p-echo-300: #a9b7c2;
  --oa-p-echo-500: #8a9baa;
  --oa-p-echo-700: #5d6d7a;
  --oa-bg: var(--oa-p-iron-950);
  --oa-surface-0: var(--oa-p-iron-900);
  --oa-surface-1: var(--oa-p-iron-850);
  --oa-surface-2: var(--oa-p-iron-800);
  --oa-surface-raised: var(--oa-p-iron-700);
  --oa-surface-hud: rgba(16,27,35,.82);
  --oa-surface-chip: rgba(10,17,23,.90);
  --oa-scrim: rgba(3,6,9,.62);
  --oa-scrim-strong: rgba(3,6,9,.80);
  --oa-ink: var(--oa-p-parch-200);
  --oa-ink-strong: var(--oa-p-parch-50);
  --oa-ink-on-action: var(--oa-p-parch-0);
  --oa-ink-2: var(--oa-p-parch-400);
  --oa-ink-mute: var(--oa-p-ash-450);
  --oa-ink-on-gold: #2a1a08;
  --oa-ink-accent: var(--oa-p-brass-200);
  --oa-ink-error: #f2a08c;
  --oa-ink-success: #8fd6a8;
  --oa-line-deco: var(--oa-p-iron-500);
  --oa-line-control: var(--oa-p-ash-500);
  --oa-line-brass: var(--oa-p-brass-400);
  --oa-line-brass-soft: rgba(199,154,82,.6);
  --oa-divider: rgba(239,228,200,.12);
  --oa-focus: var(--oa-p-brass-100);
  --oa-focus-halo: rgba(240,211,154,.25);
  --oa-action-primary-top: var(--oa-p-crimson-400);
  --oa-action-primary-mid: var(--oa-p-crimson-600);
  --oa-action-primary-deep: var(--oa-p-crimson-800);
  --oa-action-primary-ledge: var(--oa-p-crimson-950);
  --oa-action-secondary-top: var(--oa-p-teal-500);
  --oa-action-secondary-mid: var(--oa-p-teal-600);
  --oa-action-secondary-deep: #0f3a40;
  --oa-action-secondary-ledge: var(--oa-p-teal-950);
  --oa-action-neutral-top: var(--oa-p-iron-700);
  --oa-action-neutral-deep: #142029;
  --oa-action-selected-base: var(--oa-p-iron-700);
  --oa-action-selected-edge: var(--oa-p-brass-200);
  --oa-action-gold-top: var(--oa-p-gold-300);
  --oa-action-gold-deep: var(--oa-p-gold-600);
  --oa-action-destructive-ink: var(--oa-ink-error);
  --oa-brand-brass: var(--oa-p-brass-400);
  --oa-brand-brass-light: var(--oa-p-brass-100);
  --oa-brand-brass-shade: var(--oa-p-brass-600);
  --oa-brand-anchor-metal: var(--oa-brand-brass);
  --oa-brand-anchor-vein: var(--oa-brand-brass-light);
  --oa-brand-silver: #d6d3ca;
  --oa-status-error-bg: rgba(48,14,10,.92);
  --oa-status-error-line: #e89a86;
  --oa-status-info-bg: rgba(21,33,43,.96);
  --oa-status-info-line: var(--oa-p-brass-400);
  --oa-success: #8fd6a8;
  --oa-warning: #e6a23c;
  --oa-badge-required: #c8322a;
  --oa-badge-growth: #f0b84a;
  --oa-badge-new: var(--oa-p-parch-50);
  --oa-el-fire: #e65c3f;
  --oa-el-water: #50bedc;
  --oa-el-wind: #5dab74;
  --oa-el-thunder: #656bc9;
  --oa-el-earth: #eec377;
  --oa-font-ui: "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",system-ui,sans-serif;
  --oa-font-display: var(--oa-font-ui);
  --oa-font-num: var(--oa-font-ui);
  --oa-space-1: 2px;
  --oa-space-2: 4px;
  --oa-space-3: 8px;
  --oa-space-4: 12px;
  --oa-space-5: 16px;
  --oa-space-6: 20px;
  --oa-space-7: 24px;
  --oa-space-8: 32px;
  --oa-gut: 12px;
  --oa-gap: 8px;
  --oa-btn-pad-x: 12px;
  --oa-edge-bottom: 10px;
  --oa-badge-inset: 2px;
  --oa-r-0: 0px;
  --oa-r-1: 2px;
  --oa-r-2: 4px;
  --oa-r-3: 6px;
  --oa-r-4: 8px;
  --oa-r-pill: 999px;
  --oa-border-hair: 1px;
  --oa-border-base: 2px;
  --oa-border-heavy: 3px;
  --oa-e0: none;
  --oa-e1: 0 2px 0 rgba(5,8,11,.55);
  --oa-e2: 0 3px 0 rgba(5,8,11,.6),0 6px 14px rgba(0,0,0,.35);
  --oa-e2-primary: 0 4px 0 #2a0c08,0 8px 18px rgba(0,0,0,.45);
  --oa-e2-secondary: 0 4px 0 #061c1f,0 8px 18px rgba(0,0,0,.45);
  --oa-e3: 0 -6px 14px rgba(0,0,0,.4);
  --oa-e4: 0 -10px 30px rgba(0,0,0,.5);
  --oa-e5: 0 12px 40px rgba(0,0,0,.6);
  --oa-inset-rim: inset 0 0 0 1px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,236,200,.12);
  --oa-inset-press: inset 0 3px 6px rgba(0,0,0,.35);
  --oa-glow-primary: 0 0 0 2px rgba(255,226,160,.45),0 0 18px 2px rgba(255,190,110,.30);
  --oa-glow-select: 0 0 0 2px rgba(230,187,104,.25);
  --oa-glow-recommend: 0 0 12px rgba(255,214,120,.55);
  --oa-text-on-art: 0 1px 2px #000,0 0 2px #000;
  --oa-text-on-primary: 0 2px 0 rgba(70,8,8,.85);
  --oa-text-on-secondary: 0 2px 0 rgba(4,30,32,.85);
  --oa-z-scene: 0;
  --oa-z-cast: 1;
  --oa-z-ui: 2;
  --oa-z-nav: 3;
  --oa-z-status: 20;
  --oa-z-sheet: 40;
  --oa-z-wipe: 70;
  --oa-c-primary-h: var(--oa-primary-h);
  --oa-c-mode-h: var(--oa-mode-h);
  --oa-c-target-h: var(--oa-target-h);
  --oa-c-tab-h: var(--oa-tab-h);
  --oa-c-chip-h: var(--oa-chip-h);
  --oa-dur-press: 80ms;
  --oa-dur-micro: 120ms;
  --oa-dur-fast: 160ms;
  --oa-dur-exit: 200ms;
  --oa-dur-base: 300ms;
  --oa-dur-slow: 400ms;
  --oa-dur-scene: 800ms;
  --oa-dur-sheen: 900ms;
  --oa-dur-loop: 2400ms;
  --oa-dur-ambient-breath: 4000ms;
  --oa-dur-ambient-light: 6000ms;
  --oa-dur-ambient-ray: 9000ms;
  --oa-dur-ambient-ember: 14000ms;
  --oa-dur-ambient-fog: 60000ms;
  --oa-delay-spinner: 300ms;
  --oa-delay-connecting: 1500ms;
  --oa-input-guard: 600ms;
  --oa-ease-out: cubic-bezier(.2,.8,.2,1);
  --oa-ease-in: cubic-bezier(.4,0,1,1);
  --oa-ease-move: cubic-bezier(.2,0,0,1);
  --oa-ease-pop: cubic-bezier(.34,1.56,.64,1);
  --oa-ease-breath: ease-in-out;
  --oa-touch-min: 48px;
  --oa-top-h: 54px;
  --oa-tab-h: 72px;
  --oa-primary-h: 92px;
  --oa-mode-h: 56px;
  --oa-target-h: 72px;
  --oa-bubble-h: 64px;
  --oa-chip-h: 56px;
  --oa-result-btn-h: 76px;
  --oa-row-h: 60px;
  --oa-tile-h: 72px;
  --oa-seg-h: 56px;
  --oa-input-h: 72px;
  --oa-close-h: 48px;
  --oa-icon-l: 30px;
  --oa-icon-m: 24px;
  --oa-icon-s: 18px;
  --oa-badge-dot: 8px;
  --oa-badge-num-h: 20px;
  --oa-panel-pad: 12px;
  --oa-focus-width: 3px;
  --oa-fs-caption: 13px;
  --oa-fs-body: 15px;
  --oa-fs-emph: 17px;
  --oa-fs-title: 22px;
  --oa-fs-primary: 24px;
  --oa-fs-tab: 13px;
  --oa-fs-display-name: 23px;
  --iron:var(--oa-surface-1); --deep:var(--oa-bg); --silver:var(--oa-ink); --gold:var(--oa-ink-accent); --steel:var(--oa-ink-2); --line:var(--oa-line-control); --sans:var(--oa-font-ui); --display:var(--oa-font-display);
}
[data-ui-scale="large"] {
  --oa-touch-min: 52px;
  --oa-top-h: 58px;
  --oa-tab-h: 80px;
  --oa-primary-h: 100px;
  --oa-mode-h: 60px;
  --oa-target-h: 80px;
  --oa-bubble-h: 72px;
  --oa-chip-h: 60px;
  --oa-result-btn-h: 84px;
  --oa-row-h: 68px;
  --oa-tile-h: 80px;
  --oa-seg-h: 60px;
  --oa-input-h: 80px;
  --oa-close-h: 52px;
  --oa-icon-l: 34px;
  --oa-icon-m: 26px;
  --oa-icon-s: 20px;
  --oa-badge-dot: 10px;
  --oa-badge-num-h: 22px;
  --oa-panel-pad: 14px;
  --oa-focus-width: 3px;
  --oa-fs-caption: 14px;
  --oa-fs-body: 17px;
  --oa-fs-emph: 19px;
  --oa-fs-title: 25px;
  --oa-fs-primary: 27px;
  --oa-fs-tab: 14px;
  --oa-fs-display-name: 25px;
}
[data-ui-scale="max"] {
  --oa-touch-min: 56px;
  --oa-top-h: 62px;
  --oa-tab-h: 88px;
  --oa-primary-h: 108px;
  --oa-mode-h: 64px;
  --oa-target-h: 88px;
  --oa-bubble-h: 80px;
  --oa-chip-h: 64px;
  --oa-result-btn-h: 92px;
  --oa-row-h: 76px;
  --oa-tile-h: 88px;
  --oa-seg-h: 64px;
  --oa-input-h: 88px;
  --oa-close-h: 56px;
  --oa-icon-l: 38px;
  --oa-icon-m: 28px;
  --oa-icon-s: 22px;
  --oa-badge-dot: 12px;
  --oa-badge-num-h: 24px;
  --oa-panel-pad: 16px;
  --oa-focus-width: 4px;
  --oa-fs-caption: 15px;
  --oa-fs-body: 19px;
  --oa-fs-emph: 21px;
  --oa-fs-title: 28px;
  --oa-fs-primary: 30px;
  --oa-fs-tab: 15px;
  --oa-fs-display-name: 28px;
}
[data-color-assist=rg] {
  --oa-el-fire: #d96c4e;
  --oa-el-water: #91c8ec;
  --oa-el-wind: #73b396;
  --oa-el-thunder: #4e6ad7;
  --oa-el-earth: #f8db87;
}
[data-color-assist=by] {
  --oa-el-fire: #d9665b;
  --oa-el-water: #2dcbde;
  --oa-el-wind: #6ab251;
  --oa-el-thunder: #a151b6;
  --oa-el-earth: #f6cf7f;
}
[data-motion=reduced] {
  --oa-dur-base: 150ms;
  --oa-dur-scene: 150ms;
  --oa-dur-slow: 150ms;
}
:root:lang(en) { --oa-font-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
:root:lang(ja) { --oa-font-ui:"Hiragino Sans","Noto Sans CJK JP","Yu Gothic UI","Meiryo",system-ui,sans-serif; }
:root:lang(zh-Hans) { --oa-font-ui:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif; }
[data-compact="true"] {
  --oa-touch-min: 48px;
  --oa-top-h: 52px;
  --oa-tab-h: 64px;
  --oa-primary-h: 92px;
  --oa-mode-h: 48px;
  --oa-target-h: 64px;
  --oa-bubble-h: 52px;
  --oa-chip-h: 52px;
  --oa-result-btn-h: 72px;
  --oa-row-h: 56px;
  --oa-tile-h: 64px;
  --oa-seg-h: 48px;
  --oa-input-h: 56px;
  --oa-close-h: 48px;
  --oa-icon-l: 28px;
  --oa-icon-m: 24px;
  --oa-icon-s: 18px;
  --oa-badge-dot: 8px;
  --oa-badge-num-h: 20px;
  --oa-panel-pad: 12px;
  --oa-focus-width: 3px;
  --oa-fs-caption: 13px;
  --oa-fs-body: 14px;
  --oa-fs-emph: 16px;
  --oa-fs-title: 21px;
  --oa-fs-primary: 21px;
  --oa-fs-tab: 13px;
  --oa-fs-display-name: 17px;
}
[data-compact="true"][data-ui-scale="large"], [data-compact="true"][data-ui-scale="max"], [data-ui-scale="large"] [data-compact="true"], [data-ui-scale="max"] [data-compact="true"] {
  --oa-touch-min: 48px;
  --oa-top-h: 54px;
  --oa-tab-h: 68px;
  --oa-primary-h: 92px;
  --oa-mode-h: 52px;
  --oa-target-h: 64px;
  --oa-bubble-h: 56px;
  --oa-chip-h: 56px;
  --oa-result-btn-h: 76px;
  --oa-row-h: 60px;
  --oa-tile-h: 68px;
  --oa-seg-h: 52px;
  --oa-input-h: 60px;
  --oa-close-h: 48px;
  --oa-icon-l: 30px;
  --oa-icon-m: 26px;
  --oa-icon-s: 20px;
  --oa-badge-dot: 10px;
  --oa-badge-num-h: 22px;
  --oa-panel-pad: 12px;
  --oa-focus-width: 3px;
  --oa-fs-caption: 13px;
  --oa-fs-body: 15px;
  --oa-fs-emph: 17px;
  --oa-fs-title: 23px;
  --oa-fs-primary: 23px;
  --oa-fs-tab: 13px;
  --oa-fs-display-name: 19px;
}
@media (max-height:699px) and (orientation:portrait), (max-height:429px) and (orientation:landscape) {
  .game-viewport {
    --oa-touch-min: 48px;
    --oa-top-h: 52px;
    --oa-tab-h: 64px;
    --oa-primary-h: 92px;
    --oa-mode-h: 48px;
    --oa-target-h: 64px;
    --oa-bubble-h: 52px;
    --oa-chip-h: 52px;
    --oa-result-btn-h: 72px;
    --oa-row-h: 56px;
    --oa-tile-h: 64px;
    --oa-seg-h: 48px;
    --oa-input-h: 56px;
    --oa-close-h: 48px;
    --oa-icon-l: 28px;
    --oa-icon-m: 24px;
    --oa-icon-s: 18px;
    --oa-badge-dot: 8px;
    --oa-badge-num-h: 20px;
    --oa-panel-pad: 12px;
    --oa-focus-width: 3px;
    --oa-fs-caption: 13px;
    --oa-fs-body: 14px;
    --oa-fs-emph: 16px;
    --oa-fs-title: 21px;
    --oa-fs-primary: 21px;
    --oa-fs-tab: 13px;
    --oa-fs-display-name: 17px;
  }
  [data-ui-scale="large"] .game-viewport, [data-ui-scale="max"] .game-viewport, .game-viewport[data-ui-scale="large"], .game-viewport[data-ui-scale="max"] {
    --oa-touch-min: 48px;
    --oa-top-h: 54px;
    --oa-tab-h: 68px;
    --oa-primary-h: 92px;
    --oa-mode-h: 52px;
    --oa-target-h: 64px;
    --oa-bubble-h: 56px;
    --oa-chip-h: 56px;
    --oa-result-btn-h: 76px;
    --oa-row-h: 60px;
    --oa-tile-h: 68px;
    --oa-seg-h: 52px;
    --oa-input-h: 60px;
    --oa-close-h: 48px;
    --oa-icon-l: 30px;
    --oa-icon-m: 26px;
    --oa-icon-s: 20px;
    --oa-badge-dot: 10px;
    --oa-badge-num-h: 22px;
    --oa-panel-pad: 12px;
    --oa-focus-width: 3px;
    --oa-fs-caption: 13px;
    --oa-fs-body: 15px;
    --oa-fs-emph: 17px;
    --oa-fs-title: 23px;
    --oa-fs-primary: 23px;
    --oa-fs-tab: 13px;
    --oa-fs-display-name: 19px;
  }
}