/* =========================================================================
   KNGS Design Tokens — v2.0 "Future Industrial / Precision Tech" (2026-10)
   Owner: Design. Mobile-first. 다른 CSS 는 반드시 이 토큰만 참조할 것.

   ▸ 다크 퍼스트: :root 기본값 = 다크(딥 네이비-블랙). 라이트는 <html data-theme="light">.
     layout.js 와 각 페이지 <head> 인라인 스크립트가 항상 data-theme 을 명시적으로 지정한다
     (저장값 없으면 'dark'). 기존 토큰명은 모두 유지 — 새 토큰은 추가만 했다.

   Breakpoints (CSS 변수는 media query 에서 못 쓰므로 주석으로 고정)
     base  : 0 – 599px      모바일 (360~430 기준 설계)
     sm    : @media (min-width: 600px)   큰 폰 가로 / 소형 태블릿
     md    : @media (min-width: 768px)   태블릿
     lg    : @media (min-width: 1024px)  데스크톱 — GNB 노출, 하단 탭바 숨김
     xl    : @media (min-width: 1280px)  와이드
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---------- Brand primitives ---------- */
  --ink-1000: #04070d;
  --ink-950: #060b14;    /* 다크 페이지 바탕 */
  --ink-900: #0b1424;    /* 다크 패널 */
  --ink-850: #0f1a2e;
  --ink-800: #14223a;
  --ink-700: #1c2d4a;

  --navy-950: #070f1c;
  --navy-900: #0e1c30;   /* KNGS 딥 네이비 (영업자료 --navy) */
  --navy-800: #17304f;   /* --navy2 */
  --navy-700: #1f4068;
  --navy-600: #2b5486;
  --navy-500: #3d6aa3;
  --navy-300: #8fa9cc;
  --navy-200: #c3d2e6;
  --navy-100: #e3eaf4;
  --navy-50:  #f1f5fa;

  --orange-700: #b23f08;
  --orange-600: #c2470c;  /* 흰 글자 AA (≈5.0:1) — 라이트 버튼 배경 */
  --orange-500: #f26a1b;  /* 세이프티 오렌지 */
  --orange-400: #ff8a42;
  --orange-300: #ff9a4d;  /* 그라디언트 끝점 */
  --orange-glow: #ff9a4d; /* 발광 액센트 색 (hero.css 등에서 사용) */
  --orange-200: #ffd2b3;
  --orange-100: #ffe9da;
  --orange-50:  #fff5ee;

  /* 보조 하이라이트 1색 — 아이스 블루 (아주 절제해서: 포커스·데이터 포인트·미세 라인) */
  --ice-500: #3aa0e8;
  --ice-400: #7cc7ff;
  --ice-300: #a9dbff;
  --ice-700: #0d5f9c;

  --gray-950: #0b0f15;
  --gray-900: #141a23;
  --gray-850: #1a212c;
  --gray-800: #222b38;
  --gray-700: #343f4f;
  --gray-600: #4f5b6d;
  --gray-500: #6a778c;
  --gray-400: #8d98aa;
  --gray-300: #b5bdca;
  --gray-200: #dbe1ea;
  --gray-150: #e7ebf1;
  --gray-100: #f1f3f7;
  --gray-50:  #f7f8fa;
  --white: #ffffff;

  /* 채널 브랜드 (공식 컬러) */
  --kakao: #fee500;
  --kakao-ink: #191600;
  --naver: #03c75a;
  --naver-strong: #00843c;
  --cejn: #12588f;
  --dnp: #a9392c;

  /* ---------- Signature gradients / glow (테마 공통) ---------- */
  --grad-accent: linear-gradient(135deg, #f26a1b 0%, #ff9a4d 100%);
  --grad-accent-h: linear-gradient(90deg, #f26a1b 0%, #ff9a4d 100%);
  --grad-ice: linear-gradient(135deg, #7cc7ff 0%, #3aa0e8 100%);
  --on-grad-accent: #160800;          /* 그라디언트 오렌지 위 글자 (≥6:1) */
  --glow-accent: 0 0 0 1px rgb(255 138 66 / 0.35), 0 10px 32px -10px rgb(242 106 27 / 0.75);
  --glow-accent-lg: 0 0 0 1px rgb(255 154 77 / 0.5), 0 18px 48px -12px rgb(242 106 27 / 0.7), 0 0 80px -20px rgb(255 122 46 / 0.45);
  --glow-ice: 0 0 0 1px rgb(124 199 255 / 0.35), 0 8px 28px -10px rgb(58 160 232 / 0.6);

  /* ---------- Semantic — Dark (기본) ---------- */
  --bg: #060b14;
  --bg-2: #08101d;                    /* 교차 섹션 밴드 */
  --surface: #0d1626;                 /* 카드/패널 */
  --surface-2: #131e33;               /* 입력·칩 hover·연한 면 */
  --surface-3: #1a2842;
  --surface-inverse: #e3eaf4;
  --overlay: rgb(2 5 10 / 0.7);
  --glass: rgb(9 15 27 / 0.72);       /* 헤더/탭바/시트 */
  --glass-strong: rgb(10 17 30 / 0.88);

  --text: #eef2f8;
  --text-2: #b6c2d5;
  --text-3: #8f9cb2;                  /* AA on --surface ≈ 6.4:1 */
  --text-inverse: #0e1c30;
  --text-on-brand: #ffffff;

  --line: #1d2b45;
  --line-2: #16223a;
  --line-strong: #2f4064;

  --brand: #13233d;
  --brand-2: #1b3053;
  --brand-soft: #0f1c31;
  --brand-text: #9fc0ea;

  --accent: #ff7a2e;
  --accent-hover: #ff9152;
  --accent-bright: #ff8a42;
  --on-accent: #1a0b00;
  --accent-soft: #24150c;
  --accent-soft-2: #3a2212;
  --accent-text: #ffa266;

  --ice: var(--ice-400);
  --ice-text: #9ad3ff;
  --ice-soft: rgb(124 199 255 / 0.1);

  --focus: #7cc7ff;
  --focus-ring: 0 0 0 3px rgb(124 199 255 / 0.5);

  --success: #3cc285; --success-soft: #0d261d;  --success-text: #6fdcaa;
  --warning: #f0b43c; --warning-soft: #2a210c;  --warning-text: #f5c96a;
  --danger:  #ff6f5c; --danger-soft:  #2d1411;  --danger-text:  #ff9384;
  --info:    #7cc7ff; --info-soft:    #0e1f36;  --info-text:    #a9d6ff;

  --cejn-soft: #10233a;
  --dnp-soft: #2a1513;
  --cejn-text: #8fc1ec;
  --dnp-text: #f1a196;

  --selected-bg: rgb(255 122 46 / 0.16);  /* 선택된 칩/세그먼트 — 오렌지 발광 */
  --selected-fg: #ffd9bf;
  --selected-bd: rgb(255 138 66 / 0.6);
  --media-bg: #ffffff;                    /* 상품 이미지 바탕은 다크에서도 밝게 */

  --skeleton-a: #111b2e;
  --skeleton-b: #1a2742;

  /* Glass / panel system (새 토큰) */
  --panel-bg: linear-gradient(180deg, rgb(255 255 255 / 0.035) 0%, rgb(255 255 255 / 0.012) 100%), var(--surface);
  --panel-bd: rgb(148 178 230 / 0.12);
  --panel-bd-hover: rgb(255 138 66 / 0.45);
  --panel-hi: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --panel-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -18px rgb(0 0 0 / 0.7);
  --glass-bd: rgb(170 196 240 / 0.14);
  --glass-hi: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --hairline: linear-gradient(90deg, transparent, rgb(148 178 230 / 0.28) 20%, rgb(255 138 66 / 0.45) 50%, rgb(148 178 230 / 0.28) 80%, transparent);
  --hairline-left: linear-gradient(90deg, rgb(255 138 66 / 0.7), rgb(148 178 230 / 0.25) 30%, transparent 85%);
  --border-grad: linear-gradient(160deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.03) 40%, rgb(255 255 255 / 0.06));
  --border-grad-hot: linear-gradient(160deg, #ff9a4d, rgb(242 106 27 / 0.35) 45%, rgb(124 199 255 / 0.35));
  --grid-line: rgb(140 170 220 / 0.045);
  --grid-dot: rgb(140 170 220 / 0.12);
  --well: radial-gradient(120% 100% at 50% 30%, #ffffff 0%, #f6f8fb 52%, #dfe5ee 100%);
  --well-ring: inset 0 0 0 1px rgb(255 255 255 / 0.6), inset 0 -18px 30px -18px rgb(14 28 48 / 0.18);
  --marker: rgb(255 138 66 / 0.85);   /* + 코너 마커 */
  --label: #7f8ca3;                   /* 모노 테크 라벨 (장식용 대형 대비 불필요 텍스트) */

  /* ---------- Typography ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Fluid type scale: 360px → 1280px */
  --fs-display: clamp(2.25rem, 1.6rem + 2.9vw, 4.25rem);   /* 36 → 68 */
  --fs-h1:      clamp(1.875rem, 1.45rem + 1.9vw, 3.25rem); /* 30 → 52 */
  --fs-h2:      clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);   /* 24 → 36 */
  --fs-h3:      clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);  /* 20 → 24 */
  --fs-h4:      clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); /* 17 → 19 */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 17 → 20 */
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-2xs:     0.75rem;
  --fs-label:   0.6875rem;   /* 11 — 모노 대문자 테크 라벨 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --ls-tight: -0.025em;
  --ls-snug: -0.012em;
  --ls-display: -0.042em;
  --ls-wide: 0.08em;
  --ls-mono: 0.14em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(3rem, 2rem + 4vw, 6rem);
  --gutter: 16px;
  --container: 1240px;
  --container-narrow: 760px;

  /* ---------- Radius ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadow (다크) ---------- */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 12px -4px rgb(0 0 0 / 0.45);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 14px 32px -12px rgb(0 0 0 / 0.65);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 28px 60px -20px rgb(0 0 0 / 0.8);
  --shadow-up: 0 -10px 30px -12px rgb(0 0 0 / 0.6);

  /* ---------- Motion ---------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 720ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-sheet: cubic-bezier(0.2, 1.12, 0.32, 1);   /* 바텀시트 — 살짝 오버슈트 */

  /* ---------- Layout metrics ---------- */
  --header-h: 60px;
  --header-h-compact: 52px;
  --header-float-gap: 8px;   /* 스크롤 시 플로팅 바 상단 간격 (compact 높이 안에 포함) */
  --tabbar-h: 62px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --bottom-ui: calc(var(--tabbar-h) + var(--safe-bottom));
  --tap: 44px;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-sticky-cta: 105;
  --z-tabbar: 110;
  --z-fab: 120;
  --z-overlay: 200;
  --z-sheet: 210;
  --z-toast: 300;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --header-h: 72px;
    --header-h-compact: 60px;
    --header-float-gap: 10px;
    --tabbar-h: 0px;
  }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  :root { --gutter: 24px; }
}

/* ---------- Semantic — Light (토글) ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9;
  --bg-2: #eceff5;
  --surface: #ffffff;
  --surface-2: #f0f3f8;
  --surface-3: #e5eaf1;
  --surface-inverse: var(--navy-900);
  --overlay: rgb(7 15 28 / 0.5);
  --glass: rgb(255 255 255 / 0.78);
  --glass-strong: rgb(255 255 255 / 0.92);

  --text: #0d1828;
  --text-2: #3e4c64;
  --text-3: #5b687d;
  --text-inverse: #ffffff;
  --text-on-brand: #ffffff;

  --line: #d9dfe9;
  --line-2: #e6eaf1;
  --line-strong: #b3bccb;

  --brand: var(--navy-900);
  --brand-2: var(--navy-800);
  --brand-soft: var(--navy-50);
  --brand-text: var(--navy-700);

  --accent: var(--orange-600);
  --accent-hover: var(--orange-700);
  --accent-bright: var(--orange-500);
  --on-accent: #ffffff;
  --accent-soft: var(--orange-50);
  --accent-soft-2: var(--orange-100);
  --accent-text: #b23f08;

  --ice: var(--ice-700);
  --ice-text: #0b5590;
  --ice-soft: rgb(13 95 156 / 0.08);

  --focus: #1f6fe0;
  --focus-ring: 0 0 0 3px rgb(31 111 224 / 0.4);

  --success: #1c8f5a;  --success-soft: #e6f5ee;  --success-text: #146b43;
  --warning: #c98a06;  --warning-soft: #fdf4dd;  --warning-text: #835800;
  --danger:  #c0402f;  --danger-soft:  #fbebe8;  --danger-text:  #a3321f;
  --info:    #2b5486;  --info-soft:    #e9f1f8;  --info-text:    #1f4068;

  --cejn-soft: #e9f1f8;
  --dnp-soft: #f8ebe8;
  --cejn-text: #12588f;
  --dnp-text: #a9392c;

  --selected-bg: var(--navy-900);
  --selected-fg: #ffffff;
  --selected-bd: var(--navy-900);
  --media-bg: #ffffff;

  --skeleton-a: #e7ebf1;
  --skeleton-b: #f4f6f9;

  --panel-bg: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  --panel-bd: rgb(14 28 48 / 0.09);
  --panel-bd-hover: rgb(242 106 27 / 0.55);
  --panel-hi: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --panel-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(14 28 48 / 0.05), 0 10px 28px -16px rgb(14 28 48 / 0.18);
  --glass-bd: rgb(14 28 48 / 0.1);
  --glass-hi: inset 0 1px 0 rgb(255 255 255 / 0.8);
  --hairline: linear-gradient(90deg, transparent, rgb(14 28 48 / 0.16) 20%, rgb(242 106 27 / 0.55) 50%, rgb(14 28 48 / 0.16) 80%, transparent);
  --hairline-left: linear-gradient(90deg, rgb(242 106 27 / 0.8), rgb(14 28 48 / 0.14) 30%, transparent 85%);
  --border-grad: linear-gradient(160deg, rgb(14 28 48 / 0.14), rgb(14 28 48 / 0.05) 45%, rgb(14 28 48 / 0.1));
  --border-grad-hot: linear-gradient(160deg, #f26a1b, rgb(242 106 27 / 0.3) 45%, rgb(13 95 156 / 0.35));
  --grid-line: rgb(14 28 48 / 0.045);
  --grid-dot: rgb(14 28 48 / 0.1);
  --well: radial-gradient(120% 100% at 50% 30%, #ffffff 0%, #fafbfd 55%, #e9edf3 100%);
  --well-ring: inset 0 0 0 1px rgb(14 28 48 / 0.06), inset 0 -18px 30px -18px rgb(14 28 48 / 0.12);
  --marker: rgb(242 106 27 / 0.9);
  --label: #5b687d;

  --glow-accent: 0 0 0 1px rgb(242 106 27 / 0.25), 0 10px 26px -12px rgb(242 106 27 / 0.6);
  --glow-accent-lg: 0 0 0 1px rgb(242 106 27 / 0.35), 0 16px 40px -14px rgb(242 106 27 / 0.55);

  --shadow-xs: 0 1px 2px rgb(14 28 48 / 0.06);
  --shadow-sm: 0 1px 2px rgb(14 28 48 / 0.05), 0 2px 8px rgb(14 28 48 / 0.06);
  --shadow-md: 0 2px 4px rgb(14 28 48 / 0.05), 0 8px 24px rgb(14 28 48 / 0.09);
  --shadow-lg: 0 4px 8px rgb(14 28 48 / 0.06), 0 20px 48px rgb(14 28 48 / 0.16);
  --shadow-up: 0 -2px 16px rgb(14 28 48 / 0.08);
}
:root[data-theme="dark"] { color-scheme: dark; }

/* =========================================================================
   v3 (2026-10-28) — 10인 벤치마크 반영 레이어 (research/benchmark-10/00-synthesis.md)
   · 기본 테마 = 라이트 (흰 배경 상품사진·현장 가독성·산업 브랜드 관행). 다크는 토글 + 히어로/3D 무대.
   · 장식 절제: 그라디언트·글로우·그리드·코너마커·카드 그림자 → 단색/없음. 토큰 이름은 유지(기존 CSS 호환).
   · 타이포: 제목 자간 완화(-0.01~-0.025em)·행간 1.25~1.35, 최소 12px, 모노 라벨 자간 0.06em.
   · 모서리: 4/6/8/12/16 — 버튼·카드 8~12, pill 은 검색·칩만.
   ========================================================================= */
:root {
  --fs-display: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);     /* 36 → 56 */
  --fs-h1:      clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);  /* 28 → 40 */
  --fs-h2:      clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);/* 22 → 28 */
  --fs-h3:      clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);/* 18 → 20 */
  --fs-h4:      1.0625rem;                                /* 17 */
  --fs-lead:    clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --fs-label:   0.75rem;                                  /* 12 — 최소 정보 글자 */
  --lh-tight: 1.25;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --ls-tight: -0.015em;
  --ls-snug: -0.01em;
  --ls-display: -0.025em;
  --ls-wide: 0.04em;
  --ls-mono: 0.06em;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --grad-accent: linear-gradient(var(--accent), var(--accent));
  --grad-accent-h: linear-gradient(var(--accent), var(--accent));
  --on-grad-accent: var(--on-accent);
  --glow-accent: none;
  --glow-accent-lg: none;
  --glow-ice: none;
  --panel-bg: var(--surface);
  --panel-hi: none;
  --panel-shadow: none;
  --glass-hi: none;
  --hairline: linear-gradient(var(--line), var(--line));
  --hairline-left: linear-gradient(var(--line), var(--line));
  --border-grad: linear-gradient(var(--line), var(--line));
  --border-grad-hot: linear-gradient(var(--accent), var(--accent));
  --grid-line: transparent;
  --grid-dot: transparent;
  --marker: transparent;
  --well: #ffffff;
  --well-ring: inset 0 0 0 1px rgb(14 28 48 / 0.06);
}
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #e9ecf0;
  --text: #111827;
  --text-2: #4b5563;
  --text-3: #6b7280;                 /* on #fff 4.8:1 */
  --line: #e5e7eb;
  --line-2: #eef0f3;
  --line-strong: #cbd2db;
  --accent: #c2410c;                 /* 흰 글자 5.2:1 */
  --accent-hover: #9a3412;
  --accent-text: #b43b0a;
  --accent-soft: #fff4ed;
  --accent-soft-2: #ffe4d1;
  --panel-bg: #ffffff;
  --panel-bd: #e5e7eb;
  --panel-bd-hover: #cbd2db;
  --glass: rgb(255 255 255 / 0.9);
  --glass-strong: rgb(255 255 255 / 0.96);
  --label: #6b7280;
}