/* Kiss Data design tokens — Figma "Kiss Data - A data visualization design system (Community)"
   file GeLT8yoqwwFz6zzuoyOvax. 2026-09-29, 피그마 플러그인 API로 로컬 스타일을 읽기 전용 추출(값 가공 없음).
   라이트 = 기본, 다크 = [data-theme="dark"] 또는 .dark */

:root {
  /* ── Primitive: NeutralLight (nl) ── */
  --nl50:#F8F9FA; --nl100:#F5F7FA; --nl200:#F0F3FA; --nl300:#DDE3EE; --nl400:#B4BFCC;
  --nl500:#98A2B2; --nl600:#6E7B91; --nl700:#4B5468; --nl800:#26292E; --nl900:#131B2A;
  /* ── Primitive: NeutralDark (nd) — nl50 ↔ nd900 식 대응 ── */
  --nd50:#FFFFFF; --nd100:#FCFCFC; --nd200:#EBEEF5; --nd300:#CAD1E0; --nd400:#A8B0BF;
  --nd500:#636974; --nd600:#393E47; --nd700:#26292E; --nd800:#222226; --nd900:#18181A;
  --white:#FFFFFF; --black:#000000;

  /* ── Primitive: 컬러 계열 50~900 ── */
  --t50:#E6FFFA; --t100:#B2F5EA; --t200:#81E6D9; --t300:#4FD1C5; --t400:#38B2AC; --t500:#319795; --t600:#2C7A7B; --t700:#285E61; --t800:#234E52; --t900:#1D4044;
  --y50:#FFFDE7; --y100:#FFF9C4; --y200:#FFF59D; --y300:#FFF176; --y400:#FFEE58; --y500:#FFEB3B; --y600:#FDD835; --y700:#FBC02D; --y800:#B9722C; --y900:#5F370E;
  --b50:#EBF8FF; --b100:#BEE3F8; --b200:#90CDF4; --b300:#63B3ED; --b400:#4299E1; --b500:#148EF4; --b600:#2B6CB0; --b700:#0A62AE; --b800:#2A4365; --b900:#1A365D;
  --o50:#FFFAF0; --o100:#FEEBCB; --o200:#FFD789; --o300:#FEAE65; --o400:#ED8936; --o500:#DD6B20; --o600:#C05621; --o700:#9C4221; --o800:#7B341E; --o900:#652B19;
  --c50:#F0FCFF; --c100:#D9F8FF; --c200:#9DECF9; --c300:#82E9FF; --c400:#0BC5EA; --c500:#00B5D8; --c600:#00A3C4; --c700:#0987A0; --c800:#086F83; --c900:#065666;
  --p50:#FAF5FF; --p100:#E9D8FD; --p200:#D6BCFA; --p300:#B794F4; --p400:#9F7AEA; --p500:#805AD5; --p600:#6B46C1; --p700:#553C9A; --p800:#44337A; --p900:#322659;
  --g50:#F0FFF4; --g100:#C6F6D5; --g200:#9AE6B4; --g300:#68D391; --g400:#48BB78; --g500:#38A169; --g600:#25855A; --g700:#276749; --g800:#22543D; --g900:#1C4532;
  --r50:#FFF5F5; --r100:#FED7D7; --r200:#FEB2B2; --r300:#FC8181; --r400:#F56565; --r500:#E53E3E; --r600:#C53030; --r700:#9B2C2C; --r800:#822727; --r900:#63171B;
  --pi50:#FFF5F7; --pi100:#FFDFED; --pi200:#FBB6CE; --pi300:#FF84B7; --pi400:#ED64A6; --pi500:#ED2E7E; --pi600:#B83280; --pi700:#97266D; --pi800:#702459; --pi900:#521B41;

  /* ── 그라데이션 (차트) ── */
  --kd-3dbar: linear-gradient(180deg,#148EF4 0%,#1C5B9D 100%);            /* .3dbar-linear */
  --kd-3dbar-shadow: linear-gradient(180deg,#2B498C 0%,rgba(210,221,245,0) 100%);
  --kd-area-red:   linear-gradient(180deg,rgba(254,215,215,.75),rgba(254,215,215,0));
  --kd-area-blue:  linear-gradient(180deg,rgba(190,227,248,.70),rgba(190,227,248,0));
  --kd-area-green: linear-gradient(180deg,rgba(198,246,213,.80),rgba(198,246,213,0));

  /* ── Elevation ── */
  --kd-shadow-00: none;                                  /* base */
  --kd-shadow-02: 0 2px 6px rgba(41,35,35,.05);          /* 컴포넌트 내부 구분 요소 */
  --kd-shadow-04: 0 0 12px rgba(37,38,44,.08);           /* 일반 카드·내비·페이지 콘텐츠 (L02) */
  --kd-shadow-08: 6px 6px 14px rgba(37,38,44,.08);       /* 메뉴·드롭다운·호버카드 (L03·L04) */
  --kd-shadow-16: 12px 12px 24px rgba(37,38,44,.10);     /* 드로어·모달 */

  /* ── Radius ── */
  --kd-radius-none:0; --kd-radius-sm:.125rem; --kd-radius:.25rem; --kd-radius-lg:.5rem; --kd-radius-xl:1rem; --kd-radius-full:9999px;

  /* ── Typography ── root 16px, 굵기 400/500/600 */
  --kd-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --kd-text-maxw: 680px;

  /* ── Semantic: Light ── */
  --kd-page: var(--nl50);              /* 확인필요: 원본은 페이지 바탕 미명시(캔버스 F2F2F2) */
  --kd-surface: var(--white);          /* 페이지 콘텐츠·카드·내비 바탕 */
  --kd-surface-dropdown: var(--white); /* + shadow-08 */
  --kd-surface-input: var(--nl100);    /* input·select 바탕, 짙은 지브라 줄 */
  --kd-table-head: var(--nl200);
  --kd-title: var(--nl800);
  --kd-heading-focus: var(--nl900);
  --kd-body: var(--nl700);
  --kd-label: var(--nl600);            /* 폼 라벨·보조 텍스트 */
  --kd-placeholder: var(--nl500);
  --kd-line: var(--nl400);
  --kd-divider: var(--nl300);          /* 또는 nl200 */
  --kd-btn-tertiary-bg: var(--nl300);
  --kd-btn-tertiary-fg: var(--nl600);
  --kd-primary: var(--b500);           /* 페이지당 primary CTA는 하나 */
  --kd-error: var(--r400);
  --kd-error-form: var(--pi500);
  --kd-warn: var(--o300);
  --kd-select: var(--white);           /* 페이지 위 Select(패널 밖) */
  --kd-tab-indicator: #FF0000;         /* 예시 화면 원본값(토큰 미등록). 다크는 r400 */
  --kd-chart-grid: #A6A6A6;            /* 예시 화면 가로 격자(토큰 미등록) */
  --kd-scroll-track: var(--nl200); --kd-scroll-thumb: var(--nl400);  /* 예시 주석: 스크롤바 */

  /* ── 예시 화면 전용 색 (피그마 스타일 미등록, Olap 예시에서 직접 읽음) ── */
  --kd-ex-line-blue: #5B7EE2;          /* Line One 곡선 */
  --kd-ex-area-blue: linear-gradient(180deg, rgba(151,174,239,.48), rgba(8,8,8,0));
  --kd-ex-line-red: #F86F59;           /* Line Two + 속 빈 원 마커(흰 채움, 3px 테두리) */
  --kd-ex-vgrid: #37373F;              /* 세로 점선 */
  --kd-ex-tag-text: #434352;
}

[data-theme="dark"], .dark {
  --kd-page: var(--nd900);             /* 예시 화면(Olap 选表 다크) 확인 */
  --kd-surface: var(--nd700);          /* 페이지 요소·내비 */
  --kd-surface-dropdown: var(--nd600); /* 드롭다운·모달·드로어 바탕, + shadow-08 */
  --kd-surface-input: var(--nd800);    /* 드롭다운·모달·드로어 안의 input·select */
  --kd-table-head: var(--nd600);       /* 확인필요 (예시에 표 없음) */
  --kd-title: var(--nd100);
  --kd-heading-focus: var(--nd50);
  --kd-body: var(--nd200);             /* 예시 화면: 필드·축·메뉴 글자 nd200 */
  --kd-label: var(--nd300);            /* 예시 화면: 드롭다운 항목 nd300 (설명문의 nd600은 예시와 불일치) */
  --kd-placeholder: var(--nd400);
  --kd-line: var(--nd500);
  --kd-divider: var(--nd500);          /* 또는 nd600 */
  --kd-btn-tertiary-bg: var(--nd600);  /* 예시 화면: ButtonDark Tertiary = nd600 바탕 */
  --kd-btn-tertiary-fg: var(--nd200);  /*            글자 nd200 (설명문의 nd300/nd600과 다름 — 예시 우선) */
  --kd-select: var(--nd600);
  --kd-tab-indicator: var(--r400);
  --kd-chart-grid: var(--nd500);
}
/* ═══ Kiss Data — base (텍스트 스타일 27종 · 아이콘 · 리셋) ═══
   글꼴: 원본 PingFang SC → 한국어는 Pretendard 우선. 굵기는 원본 스타일 그대로(Medium 500 / Semibold 600 / Regular 400).
   차트 수치: 원본 Lato Medium → 웹 Lato에 500이 없어 400 사용. */
:root{
  --kd-font-ui: Pretendard, "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --kd-font-num: Lato, Pretendard, sans-serif;
  --kd-font-display: Jost, Futura, "Futura PT", sans-serif;      /* 문서 머리말 (원본 Futura Medium) */
  --kd-font-en: Quicksand, sans-serif;                           /* 절 제목 영문 (원본 Quicksand Medium) */
}
.kd, .kd *{box-sizing:border-box}
.kd{font-family:var(--kd-font-ui);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--kd-body);
  word-break:keep-all;-webkit-font-smoothing:antialiased}
.kd :where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure){margin:0}
.kd :where(button,input,select,textarea){font:inherit;color:inherit;letter-spacing:inherit}
.kd-i{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle;fill:currentColor}

/* Heading — Medium 500 / Bold = Semibold 600, 자간 0 */
.kd-h1{font-size:40px;line-height:48px;font-weight:500;letter-spacing:0}   .kd-h1b{font-size:40px;line-height:48px;font-weight:600;letter-spacing:0}
.kd-h2{font-size:32px;line-height:40px;font-weight:500;letter-spacing:0}   .kd-h2b{font-size:32px;line-height:40px;font-weight:600;letter-spacing:0}
.kd-h3{font-size:28px;line-height:36px;font-weight:500;letter-spacing:0}   .kd-h3b{font-size:28px;line-height:36px;font-weight:600;letter-spacing:0}
.kd-h4{font-size:24px;line-height:32px;font-weight:500;letter-spacing:0}   .kd-h4b{font-size:24px;line-height:32px;font-weight:600;letter-spacing:0}
.kd-h5{font-size:20px;line-height:28px;font-weight:500;letter-spacing:0}   .kd-h5b{font-size:20px;line-height:28px;font-weight:600;letter-spacing:0}
/* Subtitle */
.kd-sub1{font-size:16px;line-height:24px;font-weight:500;letter-spacing:.15px} .kd-sub1b{font-size:16px;line-height:24px;font-weight:600;letter-spacing:.15px}
.kd-sub2{font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px}  .kd-sub2b{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.1px}
/* Body */
.kd-body{font-size:14px;line-height:20px;font-weight:400;letter-spacing:.25px}
.kd-body-m{font-size:14px;line-height:20px;font-weight:500;letter-spacing:.25px}
.kd-body-sb{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.25px}
/* Button Text — Semibold + 대문자 */
.kd-btntext{font-size:14px;line-height:20px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
/* Caption 01 = Medium(강), Caption 02 = Regular(약) */
.kd-cap1{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.4px}
.kd-cap2{font-size:12px;line-height:16px;font-weight:400;letter-spacing:.4px}
/* Chart */
.kd-ch1{font:400 40px/44px var(--kd-font-num);letter-spacing:1px} .kd-ch2{font:400 32px/36px var(--kd-font-num);letter-spacing:1px}
.kd-ch3{font:400 24px/28px var(--kd-font-num);letter-spacing:1px} .kd-ch4{font:400 20px/24px var(--kd-font-num);letter-spacing:1px}
.kd-value{font:400 14px/20px var(--kd-font-num);letter-spacing:1px}
.kd-scale{font-size:14px;line-height:20px;font-weight:500;letter-spacing:2px}  /* Graph-scale: PingFang Medium, 자간 2px */
.kd-num{font-family:var(--kd-font-num);font-variant-numeric:tabular-nums}

/* 색 유틸 (텍스트) */
.t-title{color:var(--kd-title)} .t-focus{color:var(--kd-heading-focus)} .t-body{color:var(--kd-body)} .t-label{color:var(--kd-label)} .t-ph{color:var(--kd-placeholder)}
@media (prefers-reduced-motion:reduce){.kd *{transition:none!important;animation:none!important}}
.kd :focus-visible{outline:2px solid var(--b500);outline-offset:2px}
/* ═══ Kiss Data — 컴포넌트 CSS ═══
   모든 값은 피그마 COMPONENT_SET 변형 트리(src/components_tree.txt)에서 읽은 값이다.
   크기: 기본 = Medium 40 · .lg = 48 · .sm = 32 · 모서리 4 · 색은 tokens.css 변수만 쓴다.     */

/* ── Button: Primary / Secondary / Tertiary / Text ── */
.kd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:10px 16px;border-radius:4px;border:1px solid transparent;
  font-size:14px;line-height:20px;font-weight:600;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s;background:none}
.kd-btn.lg{height:48px;padding:14px 16px}.kd-btn.sm{height:32px;padding:6px 16px}
.kd-btn .kd-i{width:12px;height:12px}
.kd-btn.primary{background:var(--b500);color:var(--white)}
.kd-btn.primary:hover,.kd-btn.primary.is-hover{background:var(--b300)}
.kd-btn.primary:active,.kd-btn.primary.is-active{background:var(--b700)}
.kd-btn.secondary{background:var(--white);border-color:var(--nl600);color:var(--nl600)}
.kd-btn.secondary:hover,.kd-btn.secondary.is-hover{background:var(--nl200)}
.kd-btn.secondary:active,.kd-btn.secondary.is-active{background:var(--nl300)}
.kd-btn.tertiary{background:var(--nl200);color:var(--nl700)}
.kd-btn.tertiary:hover,.kd-btn.tertiary.is-hover{background:var(--nl300)}
.kd-btn.tertiary:active,.kd-btn.tertiary.is-active{background:var(--nl400)}
.kd-btn.text{padding-left:0;padding-right:0;gap:8px;color:var(--nl600)}
.kd-btn.text:hover,.kd-btn.text.is-hover,.kd-btn.text:active,.kd-btn.text.is-active{color:var(--nl900)}
.kd-btn:disabled,.kd-btn.is-disabled{cursor:not-allowed}
.kd-btn.primary:disabled,.kd-btn.primary.is-disabled,.kd-btn.tertiary:disabled,.kd-btn.tertiary.is-disabled{background:var(--nl200);color:var(--nl400)}
.kd-btn.secondary:disabled,.kd-btn.secondary.is-disabled{background:var(--white);border-color:var(--nl400);color:var(--nl400)}
.kd-btn.text:disabled,.kd-btn.text.is-disabled{color:var(--nl300)}
.kd-btn.sm:disabled,.kd-btn.sm.is-disabled{opacity:.6}
/* 다크 (원본 ButtonDark: Tertiary = nd600 바탕 · nd200 글자) */
[data-theme="dark"] .kd-btn.secondary{background:transparent;border-color:var(--nd400);color:var(--nd200)}
[data-theme="dark"] .kd-btn.secondary:hover{background:var(--nd600)}
[data-theme="dark"] .kd-btn.tertiary{background:var(--nd600);color:var(--nd200)}
[data-theme="dark"] .kd-btn.tertiary:hover{background:var(--nd500)}
[data-theme="dark"] .kd-btn.text{color:var(--nd300)}[data-theme="dark"] .kd-btn.text:hover{color:var(--nd50)}
/* IconButton 48: 흰 바탕 · shadow02 · 아이콘 24 nl700 · hover 테두리 b500 */
.kd-iconbtn{width:48px;height:48px;border-radius:4px;border:1px solid transparent;background:var(--kd-surface);box-shadow:var(--kd-shadow-02);display:inline-grid;place-items:center;color:var(--nl700);cursor:pointer}
.kd-iconbtn .kd-i{width:24px;height:24px}
.kd-iconbtn:hover,.kd-iconbtn.is-hover{border-color:var(--b500)}
[data-theme="dark"] .kd-iconbtn{color:var(--nd200)}

/* ── Input / Select: bg nl100 · 테두리 없음 · hover 아래선 1px · active/error/warning 아래선 2px ── */
.kd-field{display:flex;flex-direction:column;gap:4px;width:325px;max-width:100%}
.kd-input{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:10px 16px;border-radius:4px;background:var(--kd-surface-input);color:var(--nl700);
  font-size:14px;line-height:20px;font-weight:500;letter-spacing:.25px;overflow:hidden;border:0;text-align:left;width:100%;box-sizing:border-box;font-family:inherit}
.kd-input.lg{height:48px;padding:14px 16px}.kd-input.sm{height:32px;padding:6px 16px}
.kd-input::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--b500);transition:height .12s}
.kd-input:hover::after,.kd-input.is-hover::after{height:1px}
.kd-input:focus-within::after,.kd-input.is-active::after{height:2px;background:var(--b500)}
.kd-input.is-error::after{height:2px;background:var(--r400)}
.kd-input.is-warning::after{height:2px;background:var(--o300)}
.kd-input input,.kd-input select,.kd-input textarea{all:unset;flex:1;min-width:0;color:inherit;font:inherit}
.kd-input input::placeholder,.kd-input textarea::placeholder{color:var(--nl500)}
.kd-input .kd-i{color:var(--nl700)}
.kd-input.is-disabled{color:var(--nl300);pointer-events:none}.kd-input.is-disabled input::placeholder{color:var(--nl300)}
.kd-help{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.4px;color:var(--nl600)}
.kd-help.error{color:var(--r400)}.kd-help.warning{color:var(--o300)}
.kd-select{cursor:pointer}.kd-select .caret{margin-left:auto;width:16px;height:16px;color:var(--nl700);transition:transform .15s}
.kd-select[aria-expanded="true"] .caret{transform:rotate(180deg)}
.kd-textarea{height:auto;flex-direction:column;align-items:stretch;padding:16px}.kd-textarea textarea{min-height:80px;resize:vertical}
[data-theme="dark"] .kd-input{color:var(--nd200)}[data-theme="dark"] .kd-input input::placeholder{color:var(--nd400)}
[data-theme="dark"] .kd-help{color:var(--nd300)}
/* 드롭다운·모달·드로어 안의 입력은 한 단계 더 어둡게 (원본 규칙) */
[data-theme="dark"] :is(.kd-panel,.kd-modal,.kd-drawer) .kd-input{background:var(--nd800)}

/* ── Stepper 84: 값 56 + 버튼 28 (inner-shadow nl300) ── */
.kd-stepper{display:inline-flex;height:40px;border-radius:4px;background:var(--kd-surface-input)}
.kd-stepper.lg{height:48px}.kd-stepper.sm{height:32px}
.kd-stepper input{all:unset;width:56px;padding:0 16px;box-sizing:border-box;font-size:14px;font-weight:500;color:var(--nl700)}
.kd-stepper .arrows{width:28px;display:flex;flex-direction:column;box-shadow:inset 1px 0 0 var(--nl300)}
.kd-stepper .arrows button{all:unset;flex:1;display:grid;place-items:center;color:var(--nl600);cursor:pointer}
.kd-stepper .arrows button+button{box-shadow:0 -1px 0 var(--nl300)}
.kd-stepper .kd-i{width:12px;height:12px}
.kd-stepper.is-selected,.kd-stepper:focus-within{outline:1px solid var(--b500)}
.kd-stepper.is-disabled input{color:var(--nl300)}

/* ── Checkbox / Radio / Toggle ── */
.kd-check,.kd-radio{display:inline-flex;align-items:center;gap:10px;font-size:14px;line-height:20px;font-weight:500;color:var(--nl700);cursor:pointer}
.kd-check input,.kd-radio input{appearance:none;margin:0;flex:none;width:20px;height:20px;background:var(--white);border:1px solid var(--nl500);display:grid;place-items:center;cursor:pointer;transition:background .12s,border-color .12s}
.kd-check.md input,.kd-radio.md input{width:16px;height:16px}
.kd-check input{border-radius:4px}.kd-check.md input{border-radius:3.2px;border-width:.8px}
.kd-check input:hover{border-color:var(--nl600)}.kd-check input:active{border-color:var(--nl700)}
.kd-check input:checked,.kd-check input:indeterminate{background:var(--b500);border-color:var(--nl400)}
.kd-check input:checked:hover,.kd-check input:indeterminate:hover{background:var(--b300)}
.kd-check input:checked::after{content:"";width:10px;height:6px;border:solid var(--white);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.kd-check.md input:checked::after{width:8px;height:4px}
.kd-check input:indeterminate::after{content:"";width:10px;height:2px;background:var(--white)}
.kd-check input:disabled{background:var(--nl100)}.kd-check input:disabled:checked{background:var(--b500);opacity:.4}
.kd-check input:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--b300) 20%,transparent)}
.kd-radio input{border-radius:50%}
.kd-radio input:checked{background:var(--b500);border-color:var(--nl400)}
.kd-radio input:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--white)}
.kd-radio.md input:checked::after{width:6px;height:6px}
.kd-radio input:disabled:checked{opacity:.5}
[data-theme="dark"] :is(.kd-check,.kd-radio){color:var(--nd200)}
.kd-toggle{appearance:none;margin:0;position:relative;width:40px;height:20px;border-radius:99px;background:var(--nl500);cursor:pointer;transition:background .15s}
.kd-toggle.md{width:32px;height:16px}
.kd-toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--white);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.kd-toggle.md::after{width:13px;height:13px}
.kd-toggle:hover{background:var(--nl600)}
.kd-toggle:checked{background:var(--b500)}.kd-toggle:checked:hover{background:var(--b300)}.kd-toggle:checked:active{background:var(--b700)}
.kd-toggle:checked::after{transform:translateX(20px)}.kd-toggle.md:checked::after{transform:translateX(15px)}
.kd-toggle:disabled{background:var(--nl300);cursor:not-allowed}
.kd-toggle:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--b300) 10%,transparent)}
/* ButtonToggle: 바깥 흰 틀 shadow04 · 선택 탭 = 흰 + shadow02 · 비선택은 강조색 채움(원본 o300) */
.kd-btntoggle{display:inline-flex;gap:8px;padding:4px;height:40px;border-radius:4px;background:var(--kd-surface);box-shadow:var(--kd-shadow-04)}
.kd-btntoggle.md{height:32px}.kd-btntoggle.sm{height:24px}
.kd-btntoggle button{all:unset;display:inline-flex;align-items:center;padding:2px 16px;border-radius:4px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.25px;color:var(--white);background:var(--o300);cursor:pointer}
.kd-btntoggle.sm button{font-size:12px;padding:0 12px}
.kd-btntoggle button[aria-pressed="true"]{background:var(--kd-surface);color:var(--nl700);box-shadow:var(--kd-shadow-02)}

/* ── Slider: 트랙 4px nl300 · 채움 b500 · 손잡이 20 b500 ── */
.kd-slider{appearance:none;width:257px;height:20px;background:transparent;margin:0;--v:50%}
.kd-slider::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--b500) var(--v),var(--nl300) var(--v))}
.kd-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--b500);margin-top:-8px;cursor:pointer}
.kd-slider::-moz-range-track{height:4px;border-radius:4px;background:var(--nl300)}
.kd-slider::-moz-range-progress{height:4px;border-radius:4px;background:var(--b500)}
.kd-slider::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--b500)}

/* ── Tag / RoundTag ── */
.kd-tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:4px;border-radius:4px;background:var(--nl300);color:var(--nl700);font-size:14px;line-height:20px;font-weight:500;letter-spacing:.25px;white-space:nowrap}
.kd-tag.lg{height:32px}.kd-tag.sm{height:24px;padding:2px 4px}.kd-tag.xs{height:20px;padding:0 4px}
.kd-tag button{all:unset;display:grid;place-items:center;width:12px;height:12px;color:var(--nl900);cursor:pointer}.kd-tag button .kd-i{width:12px;height:12px}
.kd-roundtag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:2px 16px;border-radius:12px;background:var(--o100);color:var(--nl700);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.4px}
.kd-roundtag.has-caret{padding:2px 12px 2px 8px}.kd-roundtag .kd-i{width:12px;height:12px}
[data-theme="dark"] .kd-tag{background:var(--nd600);color:var(--nd200)}

/* ── Tabs: 활성 = nl800 + 아래 3px 선 · 비활성 nl600 ── */
.kd-tabs{display:flex;gap:40px;border-bottom:1px solid var(--kd-divider)}
.kd-tab{all:unset;position:relative;height:36px;box-sizing:border-box;padding-bottom:12px;font-size:16px;line-height:24px;font-weight:500;letter-spacing:.15px;color:var(--nl600);cursor:pointer}
.kd-tab.lg{height:40px;font-size:20px;line-height:28px;font-weight:600;letter-spacing:0}
.kd-tab.sm{height:32px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.1px}
.kd-tab:hover{color:var(--nl800)}
.kd-tab[aria-selected="true"]{color:var(--nl800)}
.kd-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--nl800)}
[data-theme="dark"] .kd-tab{color:var(--nd400)}[data-theme="dark"] .kd-tab[aria-selected="true"]{color:var(--nd100)}[data-theme="dark"] .kd-tab[aria-selected="true"]::after{background:var(--nd100)}

/* ── Table: 헤더 nl200 · 셀 흰/지브라 nl100 · 글자 nl800 · 테두리 nl300 / botline nl200 ── */
.kd-table{border-collapse:collapse;width:100%;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.25px}
.kd-table th{height:40px;padding:10px 16px;background:var(--nl200);color:var(--nl700);font-weight:500;text-align:left;white-space:nowrap}
.kd-table th .sort{display:inline-flex;vertical-align:-2px;margin-left:12px;color:var(--nl500)}.kd-table th .sort .kd-i{width:12px;height:12px}
.kd-table td{height:40px;padding:10px 16px;background:var(--white);color:var(--nl800);white-space:nowrap}
.kd-table.lg :is(th,td){height:48px}.kd-table.sm :is(th,td){height:32px;padding-top:6px;padding-bottom:6px}
.kd-table.zebra tbody tr:nth-child(even) td{background:var(--nl100)}
.kd-table.botline td{border-bottom:1px solid var(--nl200)}
.kd-table.border :is(th,td){border:1px solid var(--nl300)}
.kd-table .r{text-align:right}.kd-table .chk{width:52px;padding:0 16px}
.kd-table .act{display:flex;gap:16px}.kd-table .act a{color:var(--b500);text-decoration:none}.kd-table .act a.danger{color:var(--r400)}
[data-theme="dark"] .kd-table th{background:var(--nd600);color:var(--nd200)}
[data-theme="dark"] .kd-table td{background:var(--nd700);color:var(--nd100)}
[data-theme="dark"] .kd-table.zebra tbody tr:nth-child(even) td{background:var(--nd800)}
[data-theme="dark"] .kd-table.botline td{border-color:var(--nd600)}

/* ── Pagination: 칸 24 · hover b50+b500 · 선택 b100+b500 ── */
.kd-pager{display:flex;align-items:center;gap:16px;font-size:14px;line-height:20px;font-weight:500;color:var(--nl600)}
.kd-pager button{all:unset;box-sizing:border-box;min-width:24px;height:24px;display:grid;place-items:center;border-radius:4px;border:1px solid transparent;color:var(--nl600);cursor:pointer}
.kd-pager button:hover{background:var(--b50);border-color:var(--b500);color:var(--b500)}
.kd-pager button[aria-current]{background:var(--b100);border-color:var(--b500);color:var(--b500)}
.kd-pager button:disabled{color:var(--nl400);background:none;border-color:transparent;cursor:default}
.kd-pager .size{display:inline-flex;align-items:center;gap:4px;margin-left:16px}.kd-pager .size .kd-i{width:12px;height:12px;color:var(--nl500)}

/* ── Tooltip: 272 max · pad 8/16 · r4 · nl700 · Body 흰 ── */
.kd-tooltip{display:inline-block;max-width:272px;padding:8px 16px;border-radius:4px;background:var(--nl700);color:var(--white);font-size:14px;line-height:20px;letter-spacing:.25px}

/* ── Avatar: 48/40/32/24/20 · 이니셜 흰 · 원본 이니셜 바탕 t500 ── */
.kd-avatar{--s:32px;width:var(--s);height:var(--s);border-radius:50%;background:var(--t500);color:var(--white);display:inline-grid;place-items:center;overflow:hidden;flex:none;
  font-size:20px;line-height:28px;font-weight:600}
.kd-avatar.xl{--s:48px;font-size:28px;line-height:36px}.kd-avatar.lg{--s:40px;font-size:24px;line-height:32px}
.kd-avatar.sm{--s:24px;font-size:14px;line-height:20px}.kd-avatar.xs{--s:20px;font-size:12px;line-height:16px;font-weight:500}
.kd-avatar img{width:100%;height:100%;object-fit:cover}

/* ── Dropdown Panel: 300 · 흰 · 테두리 nl300 · r4 · shadow08 · 항목 40 pad10 · hover nl100 · max-h 400 ── */
.kd-panel{width:300px;max-height:400px;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--nl300);border-radius:4px;box-shadow:var(--kd-shadow-08);overflow:hidden}
.kd-panel .search{padding:10px 8px;background:var(--nl300)}.kd-panel .search .kd-input{height:40px}
.kd-panel ul{list-style:none;margin:0;padding:0;overflow:auto}
.kd-panel li{display:flex;align-items:center;gap:10px;height:40px;padding:10px 10px 10px 16px;font-size:14px;line-height:20px;font-weight:500;color:var(--nl600);cursor:pointer}
.kd-panel.multi li{padding-left:10px}
.kd-panel li:hover,.kd-panel li.is-hover{background:var(--nl100)}
.kd-panel li .kd-check{gap:10px}
.kd-panel li.sub{height:auto;flex-direction:column;align-items:flex-start;gap:0;padding:10px 16px}
.kd-panel li.sub small{font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:500;color:var(--nl700)}
.kd-panel .empty{height:130px;display:grid;place-items:center;color:var(--nl700);font-weight:500}
.kd-panel ::-webkit-scrollbar{width:6px}.kd-panel ::-webkit-scrollbar-track{background:var(--nl200)}.kd-panel ::-webkit-scrollbar-thumb{background:var(--nl400);border-radius:3px}
[data-theme="dark"] .kd-panel{background:var(--nd600);border-color:var(--nd500)}
[data-theme="dark"] .kd-panel li{color:var(--nd300)}[data-theme="dark"] .kd-panel li:hover{background:var(--nd500)}
[data-theme="dark"] .kd-panel .search{background:var(--nd500)}

/* ── Modal: 흰 · r8 · shadow16 · 머리 pad 24/32 · 제목 H5 nl900 · 꼬리 nl50 64px pad 12/32 ── */
.kd-modal{width:600px;max-width:100%;min-height:192px;max-height:70vh;display:flex;flex-direction:column;background:var(--white);border-radius:8px;box-shadow:var(--kd-shadow-16)}
.kd-modal.sm{width:400px}.kd-modal.lg{width:800px}
.kd-modal .hd{display:flex;align-items:flex-start;gap:12px;padding:24px 32px 0}
.kd-modal .hd h3{flex:1;font-size:20px;line-height:28px;font-weight:500;color:var(--nl900)}
.kd-modal.sm .hd h3{font-size:16px;line-height:24px;letter-spacing:.15px}
.kd-close{all:unset;width:24px;height:24px;display:grid;place-items:center;color:var(--nl900);cursor:pointer;flex:none}.kd-close .kd-i{width:16px;height:16px}
.kd-modal .bd{flex:1;padding:16px 32px 24px;overflow:auto;color:var(--nl700)}
.kd-modal .ft{display:flex;align-items:center;gap:8px;padding:12px 32px;background:var(--nl50);border-radius:0 0 8px 8px}
.kd-modal .ft .end{margin-left:auto;display:flex;gap:8px}
.kd-shade{position:fixed;inset:0;background:rgba(19,27,42,.5);display:grid;place-items:center;padding:24px;z-index:50}
[data-theme="dark"] .kd-modal{background:var(--nd600)}[data-theme="dark"] .kd-modal .hd h3{color:var(--nd50)}[data-theme="dark"] .kd-modal .bd{color:var(--nd200)}
[data-theme="dark"] .kd-modal .ft{background:var(--nd700)}[data-theme="dark"] .kd-close{color:var(--nd100)}

/* ── Drawer: 오른쪽 · 70%(max 1344) / 30%(min 512) ── */
.kd-drawer{position:fixed;top:0;right:0;bottom:0;width:30vw;min-width:512px;max-width:100vw;display:flex;flex-direction:column;background:var(--white);box-shadow:var(--kd-shadow-16);z-index:51}
.kd-drawer.lg{width:70vw;max-width:1344px}
.kd-drawer .hd{display:flex;align-items:center;padding:24px 32px}.kd-drawer .hd h3{flex:1;font-size:20px;line-height:28px;font-weight:500;color:var(--nl900)}
.kd-drawer .bd{flex:1;overflow:auto;padding:0 32px 24px}
.kd-drawer .ft{display:flex;justify-content:flex-end;gap:8px;padding:12px 32px;background:var(--nl50)}

/* ── Confirmation Popup: 268 · pad16 · r8 · shadow04 · 아이콘 20(r50 원) ── */
.kd-confirm{display:flex;gap:10px;width:268px;padding:16px;border-radius:8px;background:var(--white);box-shadow:var(--kd-shadow-04)}
.kd-confirm .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none}
.kd-confirm .ic .kd-i{width:13px;height:13px}
.kd-confirm.delete .ic,.kd-confirm.error .ic{background:var(--r50);color:var(--r400)}
.kd-confirm.info .ic{background:var(--c50);color:var(--c400)}.kd-confirm.warning .ic{background:var(--o50);color:var(--o400)}
.kd-confirm .msg{flex:1;display:flex;flex-direction:column;gap:20px;font-size:14px;line-height:20px;font-weight:500;color:var(--nl700)}
.kd-confirm .acts{display:flex;justify-content:flex-end;gap:8px}
.kd-confirm .acts button{all:unset;font-size:14px;line-height:20px;font-weight:600;letter-spacing:1px;cursor:pointer;color:var(--nl600)}
.kd-confirm.delete .ok,.kd-confirm.error .ok{color:var(--r400)}.kd-confirm.info .ok{color:var(--c400)}.kd-confirm.warning .ok{color:var(--o400)}

/* ── Notification: 448 · 흰 · shadow04 · pad 24/24/20 · 아래 8px 띠 · 제목 Sub01 Bold nl700 ── */
.kd-notice{width:448px;max-width:100%;background:var(--white);border-radius:8px;box-shadow:var(--kd-shadow-04);overflow:hidden;border-bottom:8px solid var(--b400)}
.kd-notice .in{padding:24px 24px 20px;display:grid;grid-template-columns:24px 1fr 24px;column-gap:16px;row-gap:16px}
.kd-notice .ic{width:24px;height:24px}.kd-notice .ic .kd-i{width:24px;height:24px}
.kd-notice h4{font-size:16px;line-height:24px;font-weight:600;letter-spacing:.15px;color:var(--nl700)}
.kd-notice p{grid-column:1/-1;color:var(--nl700)}
.kd-notice .kd-btn{grid-column:1/-1;justify-self:start;margin-top:-8px;color:var(--b500)}
.kd-notice.info{border-color:var(--b400)}.kd-notice.info .ic{color:var(--b400)}
.kd-notice.success{border-color:var(--g400)}.kd-notice.success .ic{color:var(--g400)}
.kd-notice.warning{border-color:var(--o300)}.kd-notice.warning .ic{color:var(--o300)}
.kd-notice.error{border-color:var(--r400)}.kd-notice.error .ic{color:var(--r400)}
.kd-toasts{position:fixed;top:24px;right:24px;display:flex;flex-direction:column;gap:16px;z-index:60}

/* ── Progress indicator: 점 16/20/24 · t500 ── */
.kd-steps{display:flex;align-items:center;gap:8px}
.kd-step{display:flex;align-items:center;gap:4px}
.kd-step .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:500 10px/1 var(--kd-font-num);background:var(--t500);color:var(--white);flex:none}
.kd-step .dot .kd-i{width:12px;height:12px}
.kd-step.waiting .dot{background:none;border:1px solid var(--t500);color:var(--t500)}
.kd-step b{display:block;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.4px;color:var(--nl700)}
.kd-step small{display:block;font-size:12px;line-height:16px;letter-spacing:.4px;color:var(--nl500)}
.kd-steps .link{width:24px;height:2px;background:var(--t500)}.kd-steps .link.todo{background:var(--nl300)}

/* ── 데이터 시각화 ── */
.kd-graph{background:var(--kd-surface);border-radius:8px;box-shadow:var(--kd-shadow-02);padding:24px;display:flex;flex-direction:column;min-width:0}
.kd-graph .hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.kd-graph .hd h4{font-size:16px;line-height:24px;font-weight:500;letter-spacing:.15px;color:var(--nl800)}
.kd-graph .hd p{font-size:14px;line-height:20px;color:var(--nl600)}
.kd-graph .hd .more{all:unset;margin-left:auto;width:24px;height:24px;display:grid;place-items:center;color:var(--nl400);cursor:pointer}
.kd-legend{display:flex;gap:24px;flex-wrap:wrap;margin-left:auto}
.kd-legend span{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--nl600)}
.kd-legend i{width:12px;height:12px;background:var(--c,var(--b500))}
.kd-legend.circle i{border-radius:50%}.kd-legend.line i{height:2px;width:14px}
.kd-hint{display:inline-flex;padding:2px 8px;background:var(--nl800);color:var(--white);font:400 14px/20px var(--kd-font-num);letter-spacing:1px;white-space:nowrap}
.kd-trend{display:inline-flex;align-items:center;gap:12px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:2px}
.kd-trend .ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center}.kd-trend .ic .kd-i{width:16px;height:16px}
.kd-trend.up{color:var(--r400)}.kd-trend.up .ic{background:var(--r50);color:var(--r500)}
.kd-trend.down{color:var(--g400)}.kd-trend.down .ic{background:var(--g50);color:var(--g500)}
.kd-trend.flat{color:var(--nl500)}.kd-trend.flat .ic{background:var(--nl100);color:var(--nl500)}
.kd-indicator{display:flex;flex-direction:column;gap:6px}
.kd-indicator .lab{font-size:14px;line-height:20px;font-weight:500;color:var(--nl500)}
.kd-indicator .val{font:400 32px/36px var(--kd-font-num);letter-spacing:1px;color:var(--nl800)}
.kd-indicator.h1 .val{font-size:40px;line-height:44px}.kd-indicator.h3 .val{font-size:24px;line-height:28px}.kd-indicator.h4 .val{font-size:20px;line-height:24px}
[data-theme="dark"] .kd-graph .hd h4,[data-theme="dark"] .kd-indicator .val{color:var(--nd100)}
[data-theme="dark"] :is(.kd-graph .hd p,.kd-legend span,.kd-indicator .lab){color:var(--nd300)}
/* 다크: 미선택 체크박스·라디오는 흰 원 대신 테두리만 (원본 다크 예시에 없음 → 확인필요) */
[data-theme="dark"] :is(.kd-check,.kd-radio) input:not(:checked):not(:indeterminate){background:transparent;border-color:var(--nd400)}
/* 공통 스크롤바: 바탕 nl200 · 막대 nl400 (원본 주석) */
.kd ::-webkit-scrollbar{width:6px;height:6px}.kd ::-webkit-scrollbar-track{background:var(--kd-scroll-track,var(--nl200));border-radius:3px}.kd ::-webkit-scrollbar-thumb{background:var(--kd-scroll-thumb,var(--nl400));border-radius:3px}
[data-theme="dark"]{--kd-scroll-track:var(--nd600);--kd-scroll-thumb:var(--nd400)}

/* 다크 차트 면 채우기 = 선 색 25% (원본 다크 차트 없음 → 샘플에서 정함) */
[data-theme="dark"] .kd-area-stop{stop-color:var(--c)!important;stop-opacity:.25!important}