/* XERKONIX TACTILE tokens · v4.4.0
   강조색 사용처: 제품 화면의 포인트 색은 화면당 1~2곳이다(0곳도 허용). Aquamarine은 사람 확인 칸·현재 위치·핵심 숫자·즐겨찾기 폴더 뒷판 기운에 쓴다. 버튼·배지·링크·포커스·앱 바탕에는 쓰지 않는다.
   공통 화면 토큰. */
:root {
  --palette-canvas: #FAFBFB;
  --palette-surface: #FBFBFC;
  --palette-white: #FFFFFF;
  --palette-mist: #CFD3DA;
  --palette-ice: #E9E9E9;
  --palette-aquamarine-light: #269DB0;
  --palette-aquamarine-dark: #65C9D9;
  --palette-ink: #111111;
  --palette-on-ink: #F5F5F5;
  --n-0: #FFFFFF;
  --n-50: #FBFBFC;
  --n-100: #F5F5F5;
  --n-200: #E9E9E9;
  --n-300: #CFD3DA;
  --n-400: #AEB4BD;
  --n-500: #767678;
  --n-600: #636365;
  --n-700: #3A3A3C;
  --n-800: #252727;
  --n-900: #111111;
  --white: #FFFFFF;
  --font: "Pretendard Variable",Pretendard,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans CJK KR","Malgun Gothic",sans-serif;
  --mono: "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --ease: cubic-bezier(.22,1,.36,1);
  --duration: 220ms;
  --glass-blur: 20px;
  --radius-pill: 999px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-circle: 50%;
  --space-9: 96px;
  --space-10: 128px;
  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-lead: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-label: 12px;
  --fs-caption: 12px;
  --fs-num-xl: 64px;
  --fs-num-lg: 40px;
  --fs-num-md: 28px;
  --fw-thin: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --lh-tight: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.6;
  --ls-display: -.045em;
  --ls-heading: -.03em;
  --ls-num: -.05em;
  --t-1: 120ms;
  --t-2: 200ms;
  --t-3: 320ms;
  --t-4: 560ms;
  --t-5: 900ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --press-scale: .97;
  --glass-1-blur: 16px;
  --glass-2-blur: 28px;
  --glass-2-blur-mobile: 16px;
  --panel-blur: 20px;
  --panel-blur-mobile: 16px;
  --glass-3-blur: 32px;
  --glass-saturate: 1;
  --control-h: 48px;
  --control-h-sm: 36px;
  --btn-h-sm: 32px;
  --btn-h-md: 38px;
  --btn-h-lg: 44px;
  --icon-btn-size: 44px;
  --text-to-action: 24px;
  --touch-min: 44px;
  --product-title-size: var(--fs-h1);
  --product-label-size: var(--fs-h3);
  --product-label-secondary-size: var(--fs-caption);
  --product-label-gap: var(--space-1);
  --product-card-padding: var(--space-5);
  --product-card-radius: var(--radius-card);
  --product-profile-size: 44px;
  --product-profile-large: 72px;
  --product-tab-height: 72px;
  --relationship-line-width: 1px;
  --relationship-company-line-width: 1.5px;
  --product-metric-size: var(--fs-num-lg);
  --fs-input: 15px;
  --fs-input-mobile: 16px;
  --fs-dialog-title: 24px;
  --fs-num-feature: 52px;
  --company-header-scrolled-fill: color-mix(in srgb,var(--overlay-fill) 96%,transparent);
  --company-header-scrolled-shadow: 0 6px 20px color-mix(in srgb,var(--n-900) 10%,transparent);
  color-scheme: light;
  --canvas: #FAFBFB;
  --surface: #FBFBFC;
  --surface-raised: #FFFFFF;
  --ink: #111111;
  --muted: #636365;
  --faint: #767678;
  --accent: #65C9D9;
  --accent-deep: #111111;
  --ice: #E9E9E9;
  --mist: #CFD3DA;
  --line: rgba(17,17,17,.10);
  --line-soft: rgba(17,17,17,.065);
  --line-strong: rgba(17,17,17,.18);
  --glass-rgb: 255,255,255;
  --glass-fill: rgba(255,255,255,.56);
  --glass-rim: rgba(255,255,255,.90);
  --glass-inset: transparent;
  --glass-fallback: #FBFBFC;
  --focus-ring: #111111;
  --selected-fill: rgba(17,17,17,.08);
  --selected-hover: rgba(17,17,17,.12);
  --selected-border: rgba(17,17,17,.35);
  --selected-text: #111111;
  --control-fill: rgba(255,255,255,.50);
  --control-hover: rgba(17,17,17,.06);
  --control-on: #111111;
  --control-mark: #FFFFFF;
  --control-track: #CFD3DA;
  --input-fill: rgba(232,233,233,.7);
  --input-border: transparent;
  --primary-text: #F5F5F5;
  --primary-base: #111111;
  --primary-gradient: none;
  --primary-hover: #2A2A2A;
  --primary-border: #111111;
  --primary-shadow: none;
  --secondary-fill: rgba(255,255,255,.82);
  --secondary-hover: #FFFFFF;
  --secondary-border: transparent;
  --secondary-shadow: 0 1px 2px rgba(17,17,17,.08),0 6px 16px rgba(17,17,17,.10);
  --disabled-fill: rgba(17,17,17,.06);
  --segment-track: rgba(17,17,17,.035);
  --segment-selected: rgba(255,255,255,.90);
  --segment-shadow: 0 1px 4px rgba(17,17,17,.07);
  --overlay-fill: var(--n-0);
  --overlay-border: transparent;
  --overlay-backdrop: rgba(17,17,17,.25);
  --header-fill: color-mix(in srgb,var(--canvas) 87%,transparent);
  --code-fill: rgba(251,251,252,.80);
  --panel-fill: var(--plate-fill),var(--plate-haze);
  --panel-border: transparent;
  --panel-shadow: var(--depth-2);
  --glass-float-shadow: var(--depth-3);
  --stage-fill: rgba(251,251,252,.60);
  --shadow: var(--depth-2);
  --shadow-float: var(--depth-3);
  --glass-1-fill: rgba(255,255,255,.58);
  --glass-2-fill: rgba(255,255,255,.50);
  --glass-3-fill: rgba(44,48,48,.64);
  --glass-3-ink: #F5F5F5;
  --glass-ring: transparent;
  --glass-edge: transparent;
  --backdrop-tint-accent: rgba(38,157,176,.14);
  --backdrop-tint-mist: rgba(207,211,218,.45);
  --backdrop-tint-white: rgba(255,255,255,.90);
  --depth-1: 0 1px 2px rgba(17,17,17,.06);
  --depth-2: 0 1px 2px rgba(17,17,17,.05),0 4px 12px rgba(17,17,17,.06);
  --depth-3: 0 2px 6px rgba(17,17,17,.06),0 12px 32px rgba(17,17,17,.10);
  --depth-4: 0 4px 12px rgba(17,17,17,.06),0 24px 64px rgba(17,17,17,.18);
  --product-light-mist: var(--backdrop-tint-mist);
  --product-light-white: var(--backdrop-tint-white);
  --product-profile-fill: var(--selected-fill);
  --relationship-line: var(--n-500);
  --product-accent-ink: #269DB0;
  --glass-light: linear-gradient(180deg,var(--glass-rim),transparent 2px);
  --input-shadow: none;
  --plate-fill: linear-gradient(180deg,rgba(var(--plate-rgb),.62) 0%,rgba(var(--plate-rgb),.92) 62%,rgba(var(--plate-rgb),.98) 100%);
  --plate-haze: radial-gradient(120% 70% at 10% 0%,var(--plate-haze-color) 0%,transparent 70%);
  --canvas-light: var(--canvas);
  --sidebar-fill: #F5F6F6;
  --accent-readable: #176575;
  --plate-haze-color: rgba(205,214,214,.35);
  --plate-rgb: 255,255,255;
}
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101111;
  --surface: #1B1C1C;
  --surface-raised: #252727;
  --ink: #F5F5F5;
  --muted: #AEB4BD;
  --faint: #9199A5;
  --accent: #65C9D9;
  --accent-deep: #F5F5F5;
  --ice: #303030;
  --mist: var(--n-700);
  --line: rgba(207,211,218,.13);
  --line-soft: rgba(207,211,218,.085);
  --line-strong: rgba(207,211,218,.23);
  --glass-rgb: 44,48,48;
  --glass-fill: rgba(44,48,48,.64);
  --glass-rim: rgba(207,211,218,.19);
  --glass-inset: transparent;
  --glass-fallback: #252727;
  --focus-ring: #F5F5F5;
  --selected-fill: rgba(245,245,245,.10);
  --selected-hover: rgba(245,245,245,.15);
  --selected-border: rgba(245,245,245,.4);
  --selected-text: #F5F5F5;
  --control-fill: rgba(207,211,218,.04);
  --control-hover: rgba(207,211,218,.10);
  --control-on: #F5F5F5;
  --control-mark: #111111;
  --control-track: var(--n-700);
  --input-fill: #1B1C1C;
  --input-border: transparent;
  --primary-text: #111111;
  --primary-base: #F5F5F5;
  --primary-gradient: none;
  --primary-hover: #DEDEDE;
  --primary-border: #F5F5F5;
  --primary-shadow: none;
  --secondary-fill: rgba(61,63,63,.64);
  --secondary-hover: var(--n-700);
  --secondary-border: transparent;
  --secondary-shadow: 0 1px 2px rgba(17,17,17,.4),0 6px 16px rgba(17,17,17,.35);
  --disabled-fill: rgba(245,245,245,.06);
  --segment-track: rgba(17,17,17,.20);
  --segment-selected: #323535;
  --segment-shadow: 0 1px 4px rgba(17,17,17,.15);
  --overlay-fill: var(--n-800);
  --overlay-border: transparent;
  --overlay-backdrop: rgba(17,17,17,.58);
  --header-fill: color-mix(in srgb,var(--canvas) 87%,transparent);
  --code-fill: rgba(207,211,218,.025);
  --panel-fill: var(--plate-fill),var(--plate-haze);
  --panel-border: transparent;
  --panel-shadow: var(--depth-2);
  --glass-float-shadow: var(--depth-3);
  --stage-fill: var(--surface);
  --shadow: var(--depth-2);
  --shadow-float: var(--depth-3);
  --glass-1-fill: rgba(44,48,48,.58);
  --glass-2-fill: rgba(44,48,48,.50);
  --glass-3-fill: rgba(44,48,48,.64);
  --glass-3-ink: #F5F5F5;
  --glass-ring: transparent;
  --glass-edge: transparent;
  --backdrop-tint-accent: transparent;
  --backdrop-tint-mist: rgba(60,63,63,.55);
  --backdrop-tint-white: rgba(245,245,245,.06);
  --depth-1: 0 1px 2px rgba(17,17,17,.5);
  --depth-2: 0 1px 2px rgba(17,17,17,.5),0 4px 12px rgba(17,17,17,.45);
  --depth-3: 0 2px 6px rgba(17,17,17,.5),0 12px 32px rgba(17,17,17,.6);
  --depth-4: 0 4px 12px rgba(17,17,17,.5),0 24px 64px rgba(17,17,17,.7);
  --product-light-mist: var(--backdrop-tint-mist);
  --product-light-white: var(--backdrop-tint-white);
  --product-profile-fill: var(--selected-fill);
  --relationship-line: var(--n-500);
  --product-accent-ink: var(--accent);
  --input-shadow: none;
  --glass-light: linear-gradient(180deg,var(--glass-rim),transparent 2px);
  --plate-fill: linear-gradient(180deg,rgba(var(--plate-rgb),.40) 0%,rgba(var(--plate-rgb),.78) 62%,rgba(var(--plate-rgb),.90) 100%);
  --plate-haze: radial-gradient(120% 70% at 10% 0%,var(--plate-haze-color) 0%,transparent 70%);
  --canvas-light: var(--canvas);
  --sidebar-fill: #252727;
  --accent-readable: var(--accent);
  --plate-haze-color: rgba(207,213,213,.10);
  --plate-rgb: 45,48,48;
}
html, body {
  background: var(--canvas);
  color: var(--ink);
}