/* ==========================================================================
   MISOSAM Hub v2 — design tokens
   - 라이트 :root / 다크 html[data-theme="dark"]
   - 접두 --hub-. 컴포넌트는 ui.css, 아이콘은 icons.js
   - 프리페인트(인라인 plain JS)가 <html data-theme> 를 세팅한 뒤 이 파일이 적용됨
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 표면(surface) ---- */
  --hub-bg: #f5f6f8;
  --hub-surface: #ffffff;
  --hub-surface-2: #f9fafb;
  --hub-surface-3: #f3f4f6;          /* hover · 스켈레톤 · 코드 배경 */
  --hub-border: #e5e7eb;
  --hub-border-strong: #d1d5db;      /* 폼 컨트롤 테두리 */
  --hub-divider: #eef0f3;

  /* ---- 텍스트 ---- */
  --hub-text: #111827;
  --hub-text-2: #4b5563;
  --hub-text-3: #626a77;             /* 흰 면 5.5:1 · 줄무늬 4.95:1 · hover 4.6:1 (구 #6b7280 은 줄무늬 위 4.39 로 AA 미달) */
  --hub-text-4: #9ca3af;
  --hub-text-inverse: #ffffff;
  --hub-link: #1d4ed8;
  --hub-label: #5b6472;              /* 라벨(kv dt · 표 머리글) — 보조 텍스트보다 한 단계 진하게 */

  /* ---- 표 ---- */
  /* 목록 음영은 라이트 블루 톤(2026-10-22 사용자 요청 — 회색은 테마와 따로 놀았음). 대비: text-3 줄무늬 5.08·머리글 4.75·hover 4.67 */
  --hub-table-head-bg: #e8f0fa;      /* 머리글 — 줄무늬와 1.07 구분 */
  --hub-table-stripe: #f3f7fd;       /* 줄무늬(짝수 행·.hub-zebra) — 흰 면 대비 1.08 */
  --hub-table-hover: #e5eefb;
  --hub-col-key-tint: rgba(42, 120, 214, .07);   /* 핵심 열 강조(예: 상품 조회 재고·옵션 품절) — 줄무늬 위에 겹쳐 쓰는 반투명 블루 */

  /* ---- 브랜드 액센트(옐로) ---- */
  --hub-accent: #ffb800;
  --hub-accent-hover: #f0a800;
  --hub-accent-active: #e09c00;
  --hub-accent-soft: #fff4c2;        /* 선택·활성 배경 */
  --hub-accent-tint: rgba(255, 184, 0, .14);  /* 표 선택 행 등 아주 연한 틴트 */
  --hub-accent-ink: #1f2937;         /* 노란 배경 위 글자(대비 ≈ 9:1) */
  --hub-accent-soft-ink: #854d0e;    /* 연노랑(soft) 배경 위 글자 */
  --hub-accent-ring: rgba(255, 184, 0, .35);

  /* ---- 시맨틱 ---- */
  --hub-good: #16a34a;  --hub-good-soft: #dcfce7;  --hub-good-ink: #166534;
  --hub-warn: #d97706;  --hub-warn-soft: #fef3c7;  --hub-warn-ink: #92400e;
  --hub-bad: #dc2626;   --hub-bad-soft: #fee2e2;   --hub-bad-ink: #991b1b;
  --hub-info: #2563eb;  --hub-info-soft: #dbeafe;  --hub-info-ink: #1e40af;
  --hub-neutral-soft: #f3f4f6;       --hub-neutral-ink: #374151;
  --hub-bad-ring: rgba(220, 38, 38, .25);

  /* ---- 차트(dataviz 검증 팔레트 유지) ---- */
  --hub-chart-1: #2a78d6;            /* 기본 시리즈(순매출) */
  --hub-chart-1-soft: #86b6ef;       /* 진행 중(오늘)·추정 */
  --hub-chart-prev: #cbd5e1;         /* 작년·이전 */
  --hub-chart-ad: #d97706;           /* 광고 */
  --hub-chart-store: #34d399;        /* 스마트스토어 */
  --hub-chart-cafe: #60a5fa;         /* 카페24 */
  --hub-chart-consult: #f59e0b;      /* 상담판매 */
  --hub-chart-2: #eda100;            /* 수수료 등 보조 */
  --hub-chart-3: #4a3aa7;            /* 배송·포장 등 3번째 */
  --hub-chart-4: #e2e8f0;            /* 원가 추정 등 아주 연한 */
  --hub-chart-grid: #e5e7eb;
  --hub-chart-axis: #9ca3af;
  --hub-chart-label: #6b7280;
  --hub-heat-1: #cde2fb; --hub-heat-2: #9ec5f4; --hub-heat-3: #6da7ec; --hub-heat-4: #3987e5;
  --hub-heat-5: #256abf; --hub-heat-6: #184f95; --hub-heat-7: #0d366b;

  /* ---- 섹션 구분 색(사이드바 그룹 key) — 크롬 전용: 메뉴 아이콘·그룹 점·활성 막대/틴트·경로 점·런처 타일.
         상태 표시·본문 글자에는 쓰지 않는다(상태는 --hub-good/warn/info/bad). 컴포넌트는 ui.css 의 var(--sec)/var(--sec-soft) 를 쓴다.
         dataviz 팔레트 검증(인접 CVD·일반 시각) 라이트·다크 통과. -soft = 같은 색 12%(다크 20%) 투명 틴트 ---- */
  --hub-sec-home: var(--hub-accent);      --hub-sec-home-soft: var(--hub-accent-soft);
  --hub-sec-orders: #1baf7a;              --hub-sec-orders-soft: rgba(27, 175, 122, .12);
  --hub-sec-docs: #eb6834;                --hub-sec-docs-soft: rgba(235, 104, 52, .12);
  --hub-sec-products: #2a78d6;            --hub-sec-products-soft: rgba(42, 120, 214, .12);
  --hub-sec-supply: #008300;              --hub-sec-supply-soft: rgba(0, 131, 0, .12);
  --hub-sec-insights: #e87ba4;            --hub-sec-insights-soft: rgba(232, 123, 164, .12);
  --hub-sec-content: #6250d6;             --hub-sec-content-soft: rgba(98, 80, 214, .12);
  --hub-sec-support: #e34948;             --hub-sec-support-soft: rgba(227, 73, 72, .12);
  --hub-sec-settings: var(--hub-text-3);  --hub-sec-settings-soft: rgba(98, 106, 119, .12);
  --hub-sec-icon-opacity: .85;           /* 비활성 메뉴 아이콘을 살짝 옅게(라이트만 — 다크는 1) */

  /* ---- 간격(4px 그리드) ---- */
  --hub-s1: 4px;  --hub-s2: 8px;  --hub-s3: 12px; --hub-s4: 16px;
  --hub-s5: 20px; --hub-s6: 24px; --hub-s7: 28px; --hub-s8: 32px;

  /* ---- 반경 ---- */
  --hub-r-sm: 6px;
  --hub-r-md: 8px;
  --hub-r-lg: 12px;
  --hub-r-pill: 999px;

  /* ---- 그림자 ---- */
  --hub-shadow-1: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 1px rgba(17, 24, 39, .04);
  --hub-shadow-2: 0 4px 12px rgba(17, 24, 39, .10), 0 1px 3px rgba(17, 24, 39, .06);
  --hub-shadow-3: 0 16px 40px rgba(17, 24, 39, .18), 0 2px 8px rgba(17, 24, 39, .08);

  /* ---- 타이포 ---- */
  --hub-font: system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Pretendard",
              "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  --hub-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "D2Coding", "Liberation Mono", monospace;
  --hub-fs-xs: 11px;
  --hub-fs-sm: 12px;
  --hub-fs-md: 13px;                 /* 기본(밀도 우선) */
  --hub-fs-lg: 15px;
  --hub-fs-xl: 18px;
  --hub-fs-2xl: 22px;
  --hub-fs-3xl: 28px;
  --hub-lh: 1.45;
  --hub-lh-tight: 1.2;

  /* ---- 레이아웃 치수 ---- */
  --hub-sidebar-w: 232px;
  --hub-rail-w: 64px;
  --hub-topbar-h: 52px;
  --hub-bottomnav-h: 56px;
  --hub-touch: 44px;
  --hub-row-h: 44px;                 /* 표 기본 행 */
  --hub-row-h-dense: 36px;           /* 표 dense 행 */
  --hub-control-h: 32px;             /* 버튼·입력 기본 */
  --hub-control-h-sm: 26px;
  --hub-control-h-lg: 38px;
  --hub-drawer-w: min(300px, 86vw);
  --hub-page-pad: 16px;
  --hub-card-pad: 14px 16px;

  /* ---- safe-area ---- */
  --hub-safe-top: env(safe-area-inset-top, 0px);
  --hub-safe-right: env(safe-area-inset-right, 0px);
  --hub-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hub-safe-left: env(safe-area-inset-left, 0px);

  /* ---- z-index ---- */
  --hub-z-sticky: 5;
  --hub-z-sidebar: 30;
  --hub-z-topbar: 40;
  --hub-z-bottomnav: 45;
  --hub-z-drawer: 60;
  --hub-z-menu: 65;
  --hub-z-modal: 70;
  --hub-z-toast: 80;
  --hub-z-tooltip: 85;
  --hub-z-skip: 100;

  /* ---- 모션 ---- */
  --hub-dur: 160ms;
  --hub-dur-slow: 240ms;
  --hub-ease: cubic-bezier(.2, .8, .2, 1);

  /* ---- 포커스 링(2톤: 표면색 간격 + 링) ---- */
  --hub-focus-ring: #2563eb;
  --hub-focus: 0 0 0 2px var(--hub-surface), 0 0 0 4px var(--hub-focus-ring);

  /* ---- 오버레이·토스트 ---- */
  --hub-scrim: rgba(17, 24, 39, .48);
  --hub-toast-bg: #1f2937;
  --hub-toast-text: #f9fafb;
  --hub-tooltip-bg: #1f2937;
  --hub-tooltip-text: #f9fafb;
}

/* ==========================================================================
   다크 테마
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --hub-bg: #0f1115;
  --hub-surface: #171a21;
  --hub-surface-2: #1e222b;
  --hub-surface-3: #262b36;
  --hub-border: #323846;
  --hub-border-strong: #464e5e;
  --hub-divider: #2a3040;

  --hub-text: #e5e7eb;
  --hub-text-2: #c3c9d4;
  --hub-text-3: #9ca4b4;             /* 6.95:1 on surface · 6.1:1 on 줄무늬 */
  --hub-text-4: #7d8696;             /* 4.74:1 on surface (구 #737c8c 는 4.14 로 AA 미달) */
  --hub-text-inverse: #111827;
  --hub-link: #7fb0ff;
  --hub-label: #aab2c1;              /* 8.3:1 on surface */

  /* 목록 음영(다크) — 블루 기운의 남색 톤. 대비: text-3 줄무늬 5.98·머리글 5.28·hover 4.89 / text-4 줄무늬 4.08(구 회색 4.0) */
  --hub-table-head-bg: #243046;      /* 머리글 — 줄무늬와 1.13 구분 */
  --hub-table-stripe: #1e2738;       /* surface 대비 1.16 */
  --hub-table-hover: #283550;
  --hub-col-key-tint: rgba(57, 135, 229, .10);

  --hub-accent: #ffc233;
  --hub-accent-hover: #ffcd57;
  --hub-accent-active: #f5b41a;
  --hub-accent-soft: #3b3110;
  --hub-accent-tint: rgba(255, 194, 51, .14);
  --hub-accent-ink: #1f2937;         /* 노란 버튼 위 글자는 다크에서도 어둡게 */
  --hub-accent-soft-ink: #fcd34d;
  --hub-accent-ring: rgba(255, 194, 51, .35);

  --hub-good: #34c26a;  --hub-good-soft: #10311d;  --hub-good-ink: #86efac;
  --hub-warn: #f3a33a;  --hub-warn-soft: #3a2a0c;  --hub-warn-ink: #fcd34d;
  --hub-bad: #f06060;   --hub-bad-soft: #3b1515;   --hub-bad-ink: #fca5a5;
  --hub-info: #5b8ff5;  --hub-info-soft: #16244a;  --hub-info-ink: #93c5fd;
  --hub-neutral-soft: #262b36;       --hub-neutral-ink: #c3c9d4;
  --hub-bad-ring: rgba(240, 96, 96, .3);

  --hub-chart-1: #4f93e6;
  --hub-chart-1-soft: #86b6ef;
  --hub-chart-prev: #4b5563;
  --hub-chart-ad: #f3a33a;
  --hub-chart-store: #34d399;
  --hub-chart-cafe: #60a5fa;
  --hub-chart-consult: #f59e0b;
  --hub-chart-2: #f0b429;
  --hub-chart-3: #8b7cf6;
  --hub-chart-4: #334155;
  --hub-chart-grid: #2e3442;
  --hub-chart-axis: #737c8c;
  --hub-chart-label: #9ca4b4;
  --hub-heat-1: #1b2a44; --hub-heat-2: #1f3b66; --hub-heat-3: #244d88; --hub-heat-4: #2a62ad;
  --hub-heat-5: #3a7bd1; --hub-heat-6: #6ba0e6; --hub-heat-7: #a9c9f5;

  /* 섹션 구분 색(다크) — home·settings 는 --hub-accent·--hub-text-3 을 따라 자동 전환 */
  --hub-sec-home: var(--hub-accent);      --hub-sec-home-soft: var(--hub-accent-soft);
  --hub-sec-orders: #199e70;              --hub-sec-orders-soft: rgba(25, 158, 112, .20);
  --hub-sec-docs: #d95926;                --hub-sec-docs-soft: rgba(217, 89, 38, .20);
  --hub-sec-products: #3987e5;            --hub-sec-products-soft: rgba(57, 135, 229, .20);
  --hub-sec-supply: #008300;              --hub-sec-supply-soft: rgba(0, 131, 0, .20);
  --hub-sec-insights: #d55181;            --hub-sec-insights-soft: rgba(213, 81, 129, .20);
  --hub-sec-content: #9085e9;             --hub-sec-content-soft: rgba(144, 133, 233, .20);
  --hub-sec-support: #e66767;             --hub-sec-support-soft: rgba(230, 103, 103, .20);
  --hub-sec-settings: var(--hub-text-3);  --hub-sec-settings-soft: rgba(156, 164, 180, .20);
  --hub-sec-icon-opacity: 1;             /* 다크에선 옅게 하면 녹색·분홍 아이콘이 배경에 묻힘 */

  --hub-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --hub-shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
  --hub-shadow-3: 0 18px 48px rgba(0, 0, 0, .6);

  --hub-focus-ring: #7fb0ff;

  --hub-scrim: rgba(0, 0, 0, .6);
  --hub-toast-bg: #2a2f3a;
  --hub-toast-text: #f3f4f6;
  --hub-tooltip-bg: #2a2f3a;
  --hub-tooltip-text: #f3f4f6;
}

/* ==========================================================================
   베이스(토큰 적용 최소 규칙)
   ========================================================================== */
html {
  font-size: var(--hub-fs-md);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--hub-bg);
}

body {
  margin: 0;
  font-family: var(--hub-font);
  font-size: var(--hub-fs-md);
  line-height: var(--hub-lh);
  color: var(--hub-text);
  background: var(--hub-bg);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

*, *::before, *::after { box-sizing: border-box; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

img, svg, video, canvas { display: inline-block; max-width: 100%; }
svg { vertical-align: middle; }

a { color: var(--hub-link); }

code, kbd, pre, samp { font-family: var(--hub-font-mono); }

/* 포커스 링: 마우스 클릭엔 안 보이고 키보드에만 */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--hub-focus);   /* 링은 요소 자체의 border-radius 를 따라감 */
}

::selection { background: var(--hub-accent-soft); color: var(--hub-accent-ink); }
html[data-theme="dark"] ::selection { background: #4a3d10; color: #fff; }

/* 스크롤바(데스크톱, 얇게) */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--hub-border-strong) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--hub-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
  *::-webkit-scrollbar-track { background: transparent; }
}

/* 모션 축소 선호 */
@media (prefers-reduced-motion: reduce) {
  :root { --hub-dur: 0ms; --hub-dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;   /* .01ms 는 크기 바뀐 직후 잰 값이 옛 값으로 남아 탑바 검색창이 접힌 채 있었음 */
    scroll-behavior: auto !important;
  }
}

/* 인쇄는 항상 라이트 — 다크 테마에서 인쇄하면 짝수 행이 어두운 띠 + 밝은 글자로 찍히던 문제 */
@media print {
  html[data-theme="dark"] {
    color-scheme: light;
    --hub-bg: #ffffff; --hub-surface: #ffffff; --hub-surface-2: #f9fafb; --hub-surface-3: #f3f4f6;
    --hub-border: #cfd4dc; --hub-border-strong: #b8bec8; --hub-divider: #e3e6eb;
    --hub-text: #111827; --hub-text-2: #374151; --hub-text-3: #4b5563; --hub-text-4: #6b7280; --hub-label: #374151;
    --hub-link: #1d4ed8;
    --hub-table-head-bg: #f0f0f0; --hub-table-stripe: #f6f6f6; --hub-table-hover: transparent; --hub-col-key-tint: transparent;
    --hub-chart-grid: #e5e7eb; --hub-chart-axis: #9ca3af; --hub-chart-label: #4b5563;
    /* 섹션 구분 색도 라이트 값(런처 타일 등이 흰 종이에 맞게) */
    --hub-sec-orders: #1baf7a; --hub-sec-orders-soft: rgba(27, 175, 122, .12);
    --hub-sec-docs: #eb6834; --hub-sec-docs-soft: rgba(235, 104, 52, .12);
    --hub-sec-products: #2a78d6; --hub-sec-products-soft: rgba(42, 120, 214, .12);
    --hub-sec-supply: #008300; --hub-sec-supply-soft: rgba(0, 131, 0, .12);
    --hub-sec-insights: #e87ba4; --hub-sec-insights-soft: rgba(232, 123, 164, .12);
    --hub-sec-content: #6250d6; --hub-sec-content-soft: rgba(98, 80, 214, .12);
    --hub-sec-support: #e34948; --hub-sec-support-soft: rgba(227, 73, 72, .12);
    --hub-sec-settings-soft: rgba(98, 106, 119, .12);
  }
}