/* SkillLens: generated from tokens.json (v1). DO NOT EDIT: node scripts/build-tokens.mjs */
:root, [data-theme="light"] {
  --skill-blue: #6557f6;
  --focus-lime: #dfff59;
  --optical-cyan: #60d6fa;
  --change-coral: #ff7f50;
  --change-coral-strong: #b8401a;
  --change-coral-tint: #fff0e8;
  --on-accent: #111218;
  --skill-blue-strong: #4f41d8;
  --on-skill-blue-strong: #ffffff;
  --skill-blue-tint: #eef0ff;
  --glow-blue: #6557f629;
  --glow-lime: #dfff5947;
  --glow-cyan: #60d6fa33;
  --surface: #ffffff;
  --surface-sunken: #f7f7fb;
  --canvas: #f5f6fb;
  --ambient-base: #f3f2ff;
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --surface-pressed: #e4e6f1;
  --glass: #f0f1fae6;
  --glass-card: #ffffff9e;
  --glass-card-edge: #ffffffcc;
  --on-glass-muted: #505650;
  --ink: #111218;
  --ink-muted: #5b6073;
  --ink-subtle: #626779;
  --action: #111218;
  --action-pressed: #2b2d3a;
  --action-hover: #000000;
  --on-action: #ffffff;
  --on-action-accent: #b9b0ff;
  --border: #e6e8f2;
  --border-strong: #7b80b3;
  --divider: #e2e4ee;
  --scrim: #11121859;
  --track: #eceef7;
  --focus-ring: var(--skill-blue-strong);
  --tile-orange: #ffefe0;
  --tile-orange-ink: #c2410c;
  --tile-yellow: #fff6cc;
  --tile-yellow-ink: #8a5a00;
  --tile-pink: #ffe4ee;
  --tile-pink-ink: #be185d;
  --tile-red: #ffe4e1;
  --tile-red-ink: #b42318;
  --tile-violet: #eceeff;
  --tile-violet-ink: #4f41d8;
  --tile-green: #e3f7ea;
  --tile-green-ink: #0b7a4b;
  --tile-cyan: #e0f6fd;
  --tile-cyan-ink: #0e7490;
  --success: #0b7a4b;
  --success-tint: #e6f6ee;
  --success-fill: #12935a;
  --warning: #8a5a00;
  --warning-tint: #fff4d6;
  --warning-fill: #b87800;
  --danger: #b42318;
  --on-danger: #ffffff;
  --danger-tint: #fdecea;
  --chart-1: #4f46e5;
  --chart-2: #ffb27a;
  --chart-3: #0e7490;
  --chart-4: #f9a8c9;
  --chart-5: #1f2a6b;
  --chart-6: #6cb81f;
  --chart-seq-1: #eef0ff;
  --chart-seq-2: #c7cbff;
  --chart-seq-3: #9fa3ff;
  --chart-seq-4: #7c7ff5;
  --chart-seq-5: #6366f1;
  --chart-seq-6: #4f46e5;
  --chart-seq-7: #3730a3;
  --chart-div-1: #b8401a;
  --chart-div-2: #ff7f50;
  --chart-div-3: #ffd3c0;
  --chart-div-4: #f1f1f6;
  --chart-div-5: #c7cbff;
  --chart-div-6: #6366f1;
  --chart-div-7: #3730a3;
  --chart-ring: #11121833;
  --night: #0f1024;
  --on-night: #ffffff;
  --on-night-muted: #b4b8d4;
  --on-night-accent: #b6ff75;
  --shadow-card: 0 4px 20px rgba(101, 87, 246, 0.08);
  --shadow-sheet: 0 12px 40px rgba(17, 18, 24, 0.12);
  --shadow-hover: 0 8px 28px rgba(101, 87, 246, 0.14);
  --shadow-dialog: 0 24px 60px rgba(17, 18, 24, 0.3);
  --shadow-sheet-side: -12px 0 32px rgba(17, 18, 24, 0.12);
  --shadow-glass-card: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 36px -18px rgba(17, 18, 24, 0.28);
  --shadow-lens: 0 28px 40px rgba(79, 70, 229, 0.22);
  --shadow-thumb: 0 2px 6px rgba(17, 18, 24, 0.2);
}
[data-theme="dark"] {
  --change-coral-strong: #ff9b78;
  --change-coral-tint: #3d1f14;
  --skill-blue-strong: #9fa3ff;
  --on-skill-blue-strong: #15173a;
  --skill-blue-tint: #2d3072;
  --glow-blue: #6366f147;
  --glow-lime: #b6ff7529;
  --glow-cyan: #60d6fa29;
  --surface: #15173a;
  --surface-sunken: #0f1026;
  --canvas: #090a1a;
  --ambient-base: #15173a;
  --surface-raised: #1d1f47;
  --surface-overlay: #262960;
  --surface-pressed: #333777;
  --glass: #262960e6;
  --glass-card: #1d1f47cc;
  --glass-card-edge: #2f3270;
  --on-glass-muted: #b4b8d2;
  --ink: #f4f5fb;
  --ink-muted: #a9aecb;
  --ink-subtle: #a6abdc;
  --action: #f4f5fb;
  --action-pressed: #d9dbea;
  --action-hover: #ffffff;
  --on-action: #15173a;
  --on-action-accent: #4f41d8;
  --border: #2f3270;
  --border-strong: #8a8fcc;
  --divider: #363a78;
  --scrim: #000000a6;
  --track: #363a78;
  --focus-ring: var(--skill-blue-strong);
  --tile-orange: #3d2412;
  --tile-orange-ink: #ffb27a;
  --tile-yellow: #3a2d0a;
  --tile-yellow-ink: #fbbf24;
  --tile-pink: #3f1226;
  --tile-pink-ink: #f9a8c9;
  --tile-red: #43171a;
  --tile-red-ink: #ff8f86;
  --tile-violet: #24265a;
  --tile-violet-ink: #9fa3ff;
  --tile-green: #12382b;
  --tile-green-ink: #4ade80;
  --tile-cyan: #0f3340;
  --tile-cyan-ink: #67e8f9;
  --success: #4ade80;
  --success-tint: #12382b;
  --success-fill: #4ade80;
  --warning: #fbbf24;
  --warning-tint: #3a2d0a;
  --warning-fill: #fbbf24;
  --danger: #ff8f86;
  --on-danger: #111218;
  --danger-tint: #43171a;
  --chart-1: #9fa3ff;
  --chart-2: #c2410c;
  --chart-3: #b6ff75;
  --chart-4: #0e7490;
  --chart-5: #f9a8c9;
  --chart-6: #1d8f6a;
  --chart-seq-1: #3730a3;
  --chart-seq-2: #4f46e5;
  --chart-seq-3: #6366f1;
  --chart-seq-4: #7c7ff5;
  --chart-seq-5: #9fa3ff;
  --chart-seq-6: #c7cbff;
  --chart-seq-7: #eef0ff;
  --chart-ring: #ffffff33;
  --night: #090a1a;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.55);
  --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-sheet-side: -12px 0 32px rgba(0, 0, 0, 0.5);
  --shadow-glass-card: 0 12px 36px -18px rgba(0, 0, 0, 0.6);
  --shadow-lens: 0 28px 40px rgba(0, 0, 0, 0.5);
  --shadow-thumb: 0 2px 6px rgba(0, 0, 0, 0.5);
}
:root {
  --space-1: 4px;
  --space-0-5: 2px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;
  --target-min: 24px;
  --space-label: 6px;
  --space-group: 20px;
  --space-link-pair: 16px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-md: 12px;
  --radius-tile: 14px;
  --radius-dialog: 16px;
  --radius-lg: 20px;
  --radius-sheet-phone: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --gradient-canvas: linear-gradient(180deg, #ffffff 0%, #eef0ff 100%);
  --gradient-lens: linear-gradient(135deg, #6557f6 0%, #60d6fa 62%, #dfff59 100%);
  --gradient-splash: linear-gradient(160deg, #2a2d7a 0%, #12132b 70%);
  --duration-press: 100ms;
  --duration-release: 200ms;
  --duration-sheet: 260ms;
  --duration-intro: 1200ms;
  --duration-reveal: 520ms;
  --duration-stagger: 60ms;
  --duration-breathe: 6000ms;
  --duration-page: 420ms;
  --duration-hover: 160ms;
  --duration-page-mobile: 360ms;
  --duration-step: 360ms;
  --duration-step-mobile: 300ms;
  --ease-scene: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-view: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-out-view: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-lens: cubic-bezier(0.65, 0, 0.15, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.5px;
  --bp-phone-max: 767px;
  --bp-tablet-min: 768px;
  --bp-pc-min: 1024px;
  --bp-wide-min: 1440px;
  --layout-content-max: 1200px;
  --layout-card-max: 880px;
  --layout-nav-w: 240px;
  --layout-nav-w-rail: 64px;
  --layout-page-px-pc: 48px;
  --layout-page-px-tablet: 24px;
  --layout-page-px-phone: 16px;
  --layout-row-h-touch: 56px;
  --layout-row-h-dense: 44px;
  --layout-content-reading: 760px;
  --font-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}
.display-pc { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 72px; line-height: 76px; font-weight: 900; letter-spacing: -4.6px; }
.display-xl { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 56px; line-height: 66px; font-weight: 800; letter-spacing: -2.2px; }
.display { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 36px; line-height: 44px; font-weight: 800; letter-spacing: -1.4px; }
.score { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 56px; line-height: 56px; font-weight: 800; letter-spacing: -2.2px; }
.h1-lg { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -1.6px; }
.h1 { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -1px; }
.h2 { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.6px; }
.h3 { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -0.24px; }
.body { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.24px; }
.body-sm { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 13px; line-height: 20px; font-weight: 400; }
.label { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 14px; line-height: 20px; font-weight: 600; }
.caption { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 12px; line-height: 16px; font-weight: 500; }
.eyebrow { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.4px; }
@font-face { font-family: "Pretendard Variable"; src: url("../fonts/PretendardVariable.woff2") format("woff2"); font-weight: 45 920; font-style: normal; font-display: swap; }