/* 상상플렉스 Clarity — generated from tokens.json */
:root, [data-theme="light"] {
  --cl-canvas: #f2f3f5;
  --cl-surface: #ffffff;
  --cl-surface-2: #f7f8fa;
  --cl-fill: #e7e9ed;
  --cl-thumb: #ffffff;
  --cl-label: #0f1216;
  --cl-label-2: #454c57;
  --cl-label-3: #5f6672;
  --cl-separator: #e1e3e8;
  --cl-control: #7d8590;
  --cl-glass: rgba(248, 249, 251, .78);
  --cl-glass-tinted: rgba(248, 249, 251, .93);
  --cl-glass-clear: rgba(255, 255, 255, .16);
  --cl-glass-solid: #f7f8fa;
  --cl-glass-specular: rgba(255, 255, 255, .95);
  --cl-glass-rim: rgba(15, 18, 22, .14);
  --cl-glass-glow: rgba(255, 255, 255, .7);
  --cl-dim: rgba(0, 0, 0, .35);
  --cl-scrim: rgba(15, 18, 22, .28);
  --edu-blue: #0081cc;
  --edu-blue-deep: #0054a7;
  --edu-yellow: #fff100;
  --cl-accent: var(--edu-blue-deep);
  --cl-on-accent: #ffffff;
  --cl-accent-tint: #e3edf8;
  --cl-highlight: var(--edu-yellow);
  --cl-on-highlight: var(--edu-blue-deep);
  --cl-mark-bg: var(--edu-yellow);
  --cl-mark-text: var(--cl-label);
  --brand-blue: #0788c7;
  --brand-green: #6abd2e;
  --brand-pink: #e43d68;
  --cl-success: #2f7736;
  --cl-on-success: #ffffff;
  --cl-success-tint: #e6f3dd;
  --cl-info: #066a9e;
  --cl-on-info: #ffffff;
  --cl-info-tint: #e6f1f9;
  --cl-danger: #a71943;
  --cl-on-danger: #ffffff;
  --cl-danger-tint: #fbe9ee;
  --cl-warning: var(--cl-info);
  --cl-on-warning: var(--cl-on-info);
  --cl-warning-tint: var(--cl-info-tint);
  --accent-green: #2f7736;
  --on-accent-green: #ffffff;
  --accent-green-tint: #e6f3dd;
  --accent-ink: #0f1216;
  --on-accent-ink: #ffffff;
  --accent-ink-tint: #e7e9ed;
  --brand-plate: #ffffff;
  --brand-ink: #0f1216;
  --chart-1: #0054a7;
  --chart-2: #3f9a2c;
  --chart-3: #0a8fd0;
  --chart-4: #c8285a;
  --chart-5: #7d8590;
  --chart-seq-1: #7fb0e6;
  --chart-seq-2: #3f86d0;
  --chart-seq-3: #0060b8;
  --chart-seq-4: #003f80;
  --chart-grid: var(--cl-separator);
  --chart-track: var(--cl-fill);
  --cl-shadow-float: 0 6px 24px rgba(15, 18, 22, .10), 0 1px 2px rgba(15, 18, 22, .06);
  --cl-shadow-modal: 0 24px 64px rgba(15, 18, 22, .18), 0 2px 6px rgba(15, 18, 22, .08);
  --cl-shadow-knob: 0 2px 6px rgba(15, 18, 22, .2), 0 0 0 .5px rgba(15, 18, 22, .08);
}
[data-theme="dark"] {
  --cl-canvas: #000000;
  --cl-surface: #16181c;
  --cl-surface-2: #1f2226;
  --cl-fill: #24272d;
  --cl-thumb: #3a3e46;
  --cl-label: #f5f6f8;
  --cl-label-2: #c1c6ce;
  --cl-label-3: #9aa1ac;
  --cl-separator: #2c2f35;
  --cl-control: #6c737e;
  --cl-glass: rgba(30, 32, 37, .74);
  --cl-glass-tinted: rgba(30, 32, 37, .92);
  --cl-glass-clear: rgba(255, 255, 255, .08);
  --cl-glass-solid: #1e2025;
  --cl-glass-specular: rgba(255, 255, 255, .34);
  --cl-glass-rim: rgba(0, 0, 0, .62);
  --cl-glass-glow: rgba(255, 255, 255, .2);
  --cl-dim: rgba(0, 0, 0, .35);
  --cl-scrim: rgba(0, 0, 0, .5);
  --edu-blue: #0081cc;
  --edu-blue-deep: #0054a7;
  --edu-yellow: #fff100;
  --cl-accent: var(--edu-yellow);
  --cl-on-accent: #0b0d10;
  --cl-accent-tint: #2b2a0a;
  --cl-highlight: var(--edu-yellow);
  --cl-on-highlight: var(--edu-blue-deep);
  --cl-mark-bg: rgba(0, 0, 0, 0);
  --cl-mark-text: var(--edu-yellow);
  --brand-blue: #0788c7;
  --brand-green: #6abd2e;
  --brand-pink: #e43d68;
  --cl-success: #7fcc45;
  --cl-on-success: #0b0d10;
  --cl-success-tint: #1c2a14;
  --cl-info: #5cb8ea;
  --cl-on-info: #0b0d10;
  --cl-info-tint: #0f2230;
  --cl-danger: #ff7591;
  --cl-on-danger: #0b0d10;
  --cl-danger-tint: #2e1219;
  --cl-warning: var(--cl-info);
  --cl-on-warning: var(--cl-on-info);
  --cl-warning-tint: var(--cl-info-tint);
  --accent-green: #7fcc45;
  --on-accent-green: #0b0d10;
  --accent-green-tint: #1c2a14;
  --accent-ink: #f5f6f8;
  --on-accent-ink: #0b0d10;
  --accent-ink-tint: #2a2d33;
  --brand-plate: #ffffff;
  --brand-ink: #0f1216;
  --chart-1: #0081cc;
  --chart-2: #579b26;
  --chart-3: #1fa0dc;
  --chart-4: #e43d68;
  --chart-5: #8a919c;
  --chart-seq-1: #1d4f85;
  --chart-seq-2: #2a6cb0;
  --chart-seq-3: #4f9be0;
  --chart-seq-4: #9cc8f0;
  --cl-shadow-float: 0 6px 24px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
  --cl-shadow-modal: 0 24px 64px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
  --cl-shadow-knob: 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(0, 0, 0, .3);
}
[data-theme="light-hc"] {
  --cl-canvas: #ffffff;
  --cl-surface: #ffffff;
  --cl-surface-2: #f2f3f5;
  --cl-fill: #e7e9ed;
  --cl-thumb: #ffffff;
  --cl-label: #000000;
  --cl-label-2: #262a31;
  --cl-label-3: #353a42;
  --cl-separator: #6b727d;
  --cl-control: #4a515c;
  --cl-glass: rgba(255, 255, 255, .97);
  --cl-glass-tinted: #ffffff;
  --cl-glass-clear: rgba(255, 255, 255, .92);
  --cl-glass-solid: #ffffff;
  --cl-glass-specular: rgba(255, 255, 255, 0);
  --cl-glass-rim: #000000;
  --cl-glass-glow: rgba(0, 0, 0, .08);
  --cl-dim: rgba(0, 0, 0, .35);
  --cl-scrim: rgba(0, 0, 0, .5);
  --edu-blue: #0081cc;
  --edu-blue-deep: #0054a7;
  --edu-yellow: #fff100;
  --cl-accent: #003f80;
  --cl-on-accent: #ffffff;
  --cl-accent-tint: #e3edf8;
  --cl-highlight: var(--edu-yellow);
  --cl-on-highlight: #003f80;
  --cl-mark-bg: var(--edu-yellow);
  --cl-mark-text: var(--cl-label);
  --brand-blue: #0788c7;
  --brand-green: #6abd2e;
  --brand-pink: #e43d68;
  --cl-success: #1f5426;
  --cl-on-success: #ffffff;
  --cl-success-tint: #e6f3dd;
  --cl-info: #04406a;
  --cl-on-info: #ffffff;
  --cl-info-tint: #e6f1f9;
  --cl-danger: #7d0f30;
  --cl-on-danger: #ffffff;
  --cl-danger-tint: #fbe9ee;
  --cl-warning: var(--cl-info);
  --cl-on-warning: var(--cl-on-info);
  --cl-warning-tint: var(--cl-info-tint);
  --accent-green: #1f5426;
  --on-accent-green: #ffffff;
  --accent-green-tint: #e6f3dd;
  --accent-ink: #000000;
  --on-accent-ink: #ffffff;
  --accent-ink-tint: #e7e9ed;
  --brand-plate: #ffffff;
  --brand-ink: #0f1216;
  --chart-1: #0054a7;
  --chart-2: #3f9a2c;
  --chart-3: #0a8fd0;
  --chart-4: #c8285a;
  --chart-5: #7d8590;
  --chart-seq-1: #7fb0e6;
  --chart-seq-2: #3f86d0;
  --chart-seq-3: #0060b8;
  --chart-seq-4: #003f80;
  --cl-shadow-float: 0 2px 8px rgba(0, 0, 0, .25);
  --cl-shadow-modal: 0 8px 24px rgba(0, 0, 0, .35);
  --cl-shadow-knob: 0 0 0 1.5px #000000;
}
[data-theme="dark-hc"] {
  --cl-canvas: #000000;
  --cl-surface: #0d0e10;
  --cl-surface-2: #16181c;
  --cl-fill: #24272d;
  --cl-thumb: #4a4f58;
  --cl-label: #ffffff;
  --cl-label-2: #e3e6ea;
  --cl-label-3: #ccd1d7;
  --cl-separator: #8a919c;
  --cl-control: #9aa1ac;
  --cl-glass: rgba(13, 14, 16, .97);
  --cl-glass-tinted: #0d0e10;
  --cl-glass-clear: rgba(13, 14, 16, .92);
  --cl-glass-solid: #0d0e10;
  --cl-glass-specular: rgba(255, 255, 255, .35);
  --cl-glass-rim: #ffffff;
  --cl-glass-glow: rgba(255, 255, 255, .14);
  --cl-dim: rgba(0, 0, 0, .35);
  --cl-scrim: rgba(0, 0, 0, .72);
  --edu-blue: #0081cc;
  --edu-blue-deep: #0054a7;
  --edu-yellow: #fff100;
  --cl-accent: #fff100;
  --cl-on-accent: #000000;
  --cl-accent-tint: #2b2a0a;
  --cl-highlight: var(--edu-yellow);
  --cl-on-highlight: #003f80;
  --cl-mark-bg: rgba(0, 0, 0, 0);
  --cl-mark-text: var(--edu-yellow);
  --brand-blue: #0788c7;
  --brand-green: #6abd2e;
  --brand-pink: #e43d68;
  --cl-success: #a3e07a;
  --cl-on-success: #000000;
  --cl-success-tint: #1c2a14;
  --cl-info: #8fd0f5;
  --cl-on-info: #000000;
  --cl-info-tint: #0f2230;
  --cl-danger: #ff9db2;
  --cl-on-danger: #000000;
  --cl-danger-tint: #2e1219;
  --cl-warning: var(--cl-info);
  --cl-on-warning: var(--cl-on-info);
  --cl-warning-tint: var(--cl-info-tint);
  --accent-green: #a3e07a;
  --on-accent-green: #000000;
  --accent-green-tint: #1c2a14;
  --accent-ink: #ffffff;
  --on-accent-ink: #000000;
  --accent-ink-tint: #2a2d33;
  --brand-plate: #ffffff;
  --brand-ink: #0f1216;
  --chart-1: #0081cc;
  --chart-2: #579b26;
  --chart-3: #1fa0dc;
  --chart-4: #e43d68;
  --chart-5: #8a919c;
  --chart-seq-1: #1d4f85;
  --chart-seq-2: #2a6cb0;
  --chart-seq-3: #4f9be0;
  --chart-seq-4: #9cc8f0;
  --cl-shadow-float: 0 2px 8px rgba(0, 0, 0, .8);
  --cl-shadow-modal: 0 8px 24px rgba(0, 0, 0, .9);
  --cl-shadow-knob: 0 0 0 1.5px #ffffff;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-11: 44px;
  --space-16: 64px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-sheet: 38px;
  --radius-capsule: 999px;
  --material-thin: 10px;
  --material-regular: 24px;
  --material-thick: 44px;
  --material-saturate: 180%;
  --dur-instant: 100ms;
  --dur-press: 350ms;
  --dur-snappy: 520ms;
  --dur-smooth: 680ms;
  --dur-bouncy: 740ms;
  --dur-fade: 200ms;
  --ease-press: linear(0, 0.062, 0.191, 0.337, 0.475, 0.594, 0.691, 0.769, 0.829, 0.874, 0.908, 0.934, 0.952, 0.966, 0.976, 0.983, 0.988, 0.991, 0.994, 0.996, 0.997, 0.998, 1);
  --ease-snappy: linear(0, 0.056, 0.181, 0.33, 0.477, 0.608, 0.718, 0.804, 0.87, 0.918, 0.952, 0.975, 0.99, 0.999, 1.003, 1.006, 1.006, 1.006, 1.005, 1.004, 1.003, 1.003, 1);
  --ease-smooth: linear(0, 0.058, 0.183, 0.325, 0.46, 0.578, 0.676, 0.755, 0.816, 0.864, 0.9, 0.926, 0.946, 0.961, 0.972, 0.98, 0.986, 0.99, 0.993, 0.995, 0.996, 0.997, 1);
  --ease-bouncy: linear(0, 0.073, 0.237, 0.428, 0.611, 0.763, 0.879, 0.959, 1.009, 1.035, 1.045, 1.045, 1.038, 1.03, 1.021, 1.014, 1.008, 1.003, 1, 0.999, 0.998, 0.998, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --spring-press: 0.25 0;
  --spring-snappy: 0.4 0.15;
  --spring-smooth: 0.5 0;
  --spring-bouncy: 0.5 0.3;
  --spring-fade: 0.2 0;
  --motion-enter-distance: 12px;
  --motion-pop-scale: 0.92;
  --motion-menu-scale: 0.18;
  --motion-stagger: 30ms;
  --motion-stagger-max: 6;
  --motion-flex: 3px;
  --motion-deceleration: 0.998;
  --layout-max: 1080px;
  --layout-readable: 680px;
  --margin: 20px;
  --gutter: 16px;
  --hit-min: 44px;
  --bar-height: 56px;
  --z-content: 0;
  --z-bar: 20;
  --z-popover: 40;
  --z-sheet: 50;
  --z-toast: 60;
  --font-sans: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-rounded: Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-code: ui-monospace, "D2Coding", Consolas, monospace;
}
@font-face { font-family: "Pretendard"; src: url("fonts/PretendardVariable.woff2") format("woff2"); font-weight: 45 920; font-style: normal; font-display: swap; }
.large-title { font-family: var(--font-sans); font-size: 2.125rem; line-height: 1.24; font-weight: 800; letter-spacing: -0.022em; }
.title-1 { font-family: var(--font-sans); font-size: 1.75rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.title-2 { font-family: var(--font-sans); font-size: 1.375rem; line-height: 1.36; font-weight: 700; letter-spacing: -0.016em; }
.title-3 { font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.012em; }
.headline { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.5; font-weight: 600; letter-spacing: -0.008em; }
.body { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.62; font-weight: 400; letter-spacing: -0.008em; }
.callout { font-family: var(--font-sans); font-size: 1rem; line-height: 1.55; font-weight: 400; }
.subheadline { font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.5; font-weight: 400; }
.footnote { font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.45; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.4; font-weight: 500; letter-spacing: 0.01em; }
.metric { font-family: var(--font-sans); font-size: 3rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }