/*
 * app.css — Asset Manager Design System
 *
 * Design: Maison Luxury — True Fashion House Digital
 * Philosophy: "Quiet Luxury, Absolute Refinement"
 * Palette: Deep warm blacks + champagne gold accent
 * Typography: Refined weight, generous tracking, couture hierarchy
 * References: Louis Vuitton digital, Hermes.com, Bottega Veneta
 *
 * Copyright (c) 2026 Charles Kwon / MEDiThings Inc.
 */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Root Variables ── */
:root {
   /*
    * Design Philosophy: "Quiet Luxury, Absolute Refinement"
    *
    * - Warm darkness as sanctuary — never cold, never clinical
    * - Gold as earned distinction — singular, deliberate
    * - Typography breathes like a fashion editorial
    * - Movement is felt, never performed
    * - Inspired by: Hermès noir, Bottega Veneta, Louis Vuitton digital
    */

   /* Surface layers — warm progressive elevation */
   --bg-primary: #080808;
   --bg-secondary: #121210;
   --bg-tertiary: #1c1a18;
   --bg-hover: rgba(255, 248, 240, 0.055);   /* 2.5% 는 «올렸는지» 가 안 보였다 */
   --bg-active: rgba(201, 169, 110, 0.06);

   /* Typography — warm refined contrast */
   --text-primary: #e8e4df;
   /* ★ 2026-09-14 — 재서 올렸다.
      전: secondary 5.13:1 · tertiary 2.55:1 (카드 위). 셋째 켜가 아예 안 읽혔다.
      이 색으로 «단위·비고·이름표·설명» 을 다 적는다 — 안 읽히면 화면의 절반이 안 읽힌다.
      셋째만 올리면 둘째와 붙어 층이 사라지므로 둘째도 함께 올렸다.
      지금: 14.8 / 7.8 / 4.9 : 1 (카드 위) — 세 켜가 또렷하고 셋 다 AA 를 넘는다. */
   --text-secondary: #aaa7a3;
   --text-tertiary: #87827c;
   --text-inverse: #080808;

   /* Accent — champagne gold, singular luxury tone */
   --accent: #c9a96e;
   --accent-hover: #d4b87a;
   --accent-light: rgba(201, 169, 110, 0.08);

   /* Borders — warm, barely perceptible */
   /* ★ 2026-09-14 — 선이 «보이지 않았다»(1.15:1). 칸과 카드의 뼈대가 없어 화면이 뭉개져 보였다.
      바탕 위에서 선이 보이는 최소치를 재서 잡았다:
        줄 가르개 1.5:1(0.15) · 카드 테두리 2:1(0.23) · 입력칸·단추 3:1(0.34) · 초점 4.5:1(0.46) */
   --border: rgba(255, 248, 240, 0.20);
   --border-light: rgba(255, 248, 240, 0.13);
   --divider: rgba(255, 248, 240, 0.08);

   /* Status — ultra-muted, whispered tints (5% bg, 50% text) */
   --status-active: #22c55e;
   --status-active-bg: rgba(34, 197, 94, 0.05);
   --status-active-text: rgba(34, 197, 94, 0.5);
   --status-stored: #eab308;
   --status-stored-bg: rgba(234, 179, 8, 0.05);
   --status-stored-text: rgba(234, 179, 8, 0.5);
   --status-repair: #ef4444;
   --status-repair-bg: rgba(239, 68, 68, 0.05);
   --status-repair-text: rgba(239, 68, 68, 0.5);
   --status-disposed: #71717a;
   --status-disposed-bg: rgba(113, 113, 122, 0.05);
   --status-disposed-text: rgba(113, 113, 122, 0.5);

   /* Shadows — barely there, depth through warmth */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.18);
   --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.22);
   --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.35);

   /* Spacing (4px grid, generous) */
   --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
   --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;

   /* Radius — refined, slightly tighter */
   --r-sm: 8px;  --r-md: 12px; --r-lg: 12px;  --r-xl: 16px; --r-full: 100px;

   /* Transitions — imperceptible smoothness */
   --ease: cubic-bezier(0.16, 1, 0.3, 1);
   --duration: 0.2s;

   /* ── Theming primitives (라이트/다크 전환의 축) ──
    * 색을 직접 쓰지 말고 아래 토큰을 쓸 것. [data-theme="light"] 가 이 값만 뒤집는다.
    * --accent-rgb / --tint-rgb 는 rgba(var(--x), 알파) 형태로 농도 조절해 사용. */
   --accent-rgb: 201, 169, 110;      /* 샴페인 골드 */
   --tint-rgb: 255, 248, 240;        /* 표면 위 오버레이(다크=밝게, 라이트=어둡게) */

   --glass-bg: rgba(8, 8, 8, 0.92);       /* 상단 고정 네비 */
   --glass-bg-soft: rgba(8, 8, 8, 0.5);   /* 헤더 */
   --input-bg: rgba(255, 255, 255, 0.02); /* 입력 필드 */
   --border-strong: rgba(255, 248, 240, 0.34);      /* 입력칸·단추 — 누르는 것은 3:1 */
   --border-stronger: rgba(255, 248, 240, 0.46);    /* 초점 — 어디에 커서가 있는지 */
   --tint-weak: rgba(255, 248, 240, 0.01);   /* 표 줄무늬 */
   --tint: rgba(255, 248, 240, 0.02);
   --scrim: rgba(0, 0, 0, 0.55);          /* 모달 뒤 */
   --scrim-soft: rgba(0, 0, 0, 0.45);
   --sheen: rgba(255, 255, 255, 0.10);    /* 버튼 광택 */
   --check-mark: #ffffff;
   --login-bg: #000000;

   --shadow-table: 0 1px 3px rgba(0, 0, 0, 0.3);
   --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.4);
   --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
   --shadow-popup: 0 24px 80px rgba(0, 0, 0, 0.6);

   /* ── Semantic signal colors ──
    * 화면 곳곳(인라인 style 포함)에 하드코딩돼 있던 상태색을 토큰으로 승격.
    * 다크는 기존 iOS 계열 비비드 유지, 라이트는 흰 배경 대비 AA(4.5:1+) 값으로 교체. */
   --danger: #ff453a;
   --warn:   #ff9f0a;
   --ok:     #30d158;
   --info:   #0a84ff;
   --purple: #bf5af2;
   /* ★ 옅은 바탕(알파)을 만들려면 rgb 세 값이 따로 있어야 한다 — hex 토큰에는 알파를 못 붙인다.
      쓰는 법: background: rgba(var(--warn-rgb), .18)
      ★ 날색(rgba(var(--warn-rgb), .2))을 박아 두면 라이트 모드에서 그대로 얹혀 흰 종이가 형광이 된다.
        --accent-rgb · --tint-rgb 와 같은 규칙을 신호색까지 넓힌 것이다(2026-09-14). */
   --danger-rgb: 255, 69, 58;
   --warn-rgb:   255, 159, 10;
   --ok-rgb:     48, 209, 88;
   --info-rgb:   10, 132, 255;
   --purple-rgb: 191, 90, 242;

   /* ── 차트 계열색 ──
    * 여러 갈래(발주처·달)를 나눠 그릴 때 쓴다. 1번은 브랜드 골드로 시작해
    * 색상환을 돌며 이웃끼리 헷갈리지 않게 벌려 놓았다. 9번째부터는 1번으로 돌아간다. */
   --s1: #c9a96e;  --s2: #0a84ff;  --s3: #30d158;  --s4: #ff9f0a;
   --s5: #bf5af2;  --s6: #64d2ff;  --s7: #ff6375;  --s8: #5e5ce6;

   color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════
 * LIGHT MODE — 장시간 업무용 (data-theme="light")
 *
 * 설계 원칙
 *  1) 순백(#fff) 바탕 금지 — 눈부심·잔상 유발. 따뜻한 종이톤(#f4f2ee)을 바탕으로,
 *     카드/패널을 흰색으로 띄워 다크모드와 반대 방향의 고도(elevation)를 만든다.
 *  2) 골드 액센트는 밝은 배경에서 대비 2:1로 무너진다 → 앤티크 브라스(#8a6526)로 심화.
 *     본문 대비 4.8:1 (WCAG AA 충족) 이면서 브랜드 골드 정체성 유지.
 *  3) 텍스트는 순흑 대신 웜 니어블랙(#1c1a17) — 대비를 낮추지 않으면서 눈의 피로를 줄임.
 *  4) 그림자는 검정이 아니라 잉크톤 + 낮은 알파 — 종이 위 그림자처럼 자연스럽게.
 *  5) 상태색(성공/경고/오류)은 다크모드의 50% 알파로는 흰 배경에서 읽히지 않으므로 진한 색으로 교체.
 * ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
   /* Surface — 종이 위 카드 (다크와 반대: 위로 갈수록 밝음이 아니라 흼) */
   --bg-primary: #f4f2ee;
   --bg-secondary: #ffffff;
   --bg-tertiary: #eae7e1;
   --bg-hover: rgba(28, 26, 23, 0.07);       /* 4% 는 «올렸는지» 가 안 보였다 */
   --bg-active: rgba(138, 101, 38, 0.08);

   /* Typography — 웜 니어블랙 */
   --text-primary: #1c1a17;
   /* ★ 2026-09-14 — 흰 «카드» 위에서는 4.81 로 넘었지만, 바탕(#f4f2ee) 4.30 ·
      머리글칸(#eae7e1) 3.89 에서 무너졌다. 가장 나쁜 바탕을 잣대로 다시 잡았다.
      지금: 부연 7.0/7.8/6.4 · 흐린 글 5.0/5.6/4.5 (기본/카드/머리글칸) */
   --text-secondary: #57514a;
   --text-tertiary: #6d6761;
   --text-inverse: #ffffff;

   /* Accent — 앤티크 브라스 (밝은 배경 대비 확보) */
   /* 표 머리글이 10px 대문자라 4.5:1 이 필요한데 머리글칸 위에서 4.29 였다 — 조금 더 눕혔다 */
   --accent: #866225;
   --accent-hover: #6f5019;
   --accent-light: rgba(138, 101, 38, 0.10);
   --accent-rgb: 138, 101, 38;
   --tint-rgb: 28, 26, 23;

   /* Borders — 잉크 계열 */
   /* ★ 2026-09-14 — 1.28:1 이라 종이 위에 선이 없는 것과 같았다. 재서 잡았다:
      줄 가르개 1.5:1(0.20) · 카드 2:1(0.32) · 입력칸·단추 3:1(0.47) · 초점 4.5:1(0.60) */
   --border: rgba(28, 26, 23, 0.28);
   --border-light: rgba(28, 26, 23, 0.17);
   --divider: rgba(28, 26, 23, 0.11);
   --border-strong: rgba(28, 26, 23, 0.47);
   --border-stronger: rgba(28, 26, 23, 0.60);

   /* Effects */
   --glass-bg: rgba(252, 251, 249, 0.92);
   --glass-bg-soft: rgba(252, 251, 249, 0.72);
   --input-bg: #ffffff;
   --tint-weak: rgba(28, 26, 23, 0.02);
   --tint: rgba(28, 26, 23, 0.035);
   --scrim: rgba(38, 34, 28, 0.35);
   --scrim-soft: rgba(38, 34, 28, 0.25);
   /* 광택은 8% 상한 — 이보다 진하면 액센트 버튼 위 흰 글씨 대비가 4.5:1 아래로 무너짐 */
   --sheen: rgba(255, 255, 255, 0.08);
   --check-mark: #ffffff;
   --login-bg: #eae7e1;

   /* Status — 흰 배경에서 읽히는 진한 톤 */
   --status-active-bg: rgba(34, 197, 94, 0.12);
   --status-active-text: #15803d;
   --status-stored-bg: rgba(234, 179, 8, 0.16);
   --status-stored-text: #a16207;
   --status-repair-bg: rgba(239, 68, 68, 0.10);
   --status-repair-text: #b91c1c;
   --status-disposed-bg: rgba(113, 113, 122, 0.10);
   --status-disposed-text: #52525b;

   /* Shadows — 잉크톤 저알파 */
   --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
   --shadow-md: 0 2px 8px rgba(28, 26, 23, 0.08);
   --shadow-lg: 0 4px 16px rgba(28, 26, 23, 0.10);
   --shadow-xl: 0 12px 32px rgba(28, 26, 23, 0.14);
   --shadow-table: 0 1px 3px rgba(28, 26, 23, 0.06);
   --shadow-card-hover: 0 4px 20px rgba(28, 26, 23, 0.10);
   --shadow-modal: 0 20px 60px rgba(28, 26, 23, 0.18);
   --shadow-popup: 0 24px 80px rgba(28, 26, 23, 0.22);

   /* Signal — 흰 배경 대비 검증치 (vs #fff): 5.6 / 5.2 / 5.4 / 6.2 / 6.0 : 1 */
   --danger: #c62828;
   --warn:   #a15c00;
   --ok:     #1b7a34;
   --info:   #0b5fbf;
   /* 옅은 바탕용 — 흰 종이 위에서 눈이 아프지 않은 톤 */
   --danger-rgb: 198, 40, 40;
   --warn-rgb:   161, 92, 0;
   --ok-rgb:     27, 122, 52;
   --info-rgb:   11, 95, 191;
   --purple-rgb: 124, 58, 178;
   --purple: #7b2fb5;

   /* 차트 계열색 — 흰 종이 위에서 읽히는 진한 톤 (다크와 같은 차례의 색상환) */
   --s1: #8a6526;  --s2: #0b5fbf;  --s3: #1b7a34;  --s4: #a15c00;
   --s5: #7b2fb5;  --s6: #0f6d8a;  --s7: #b32448;  --s8: #3b3ab5;

   color-scheme: light;
}

/* ── Body ── */
body {
   background: var(--bg-primary);
   color: var(--text-primary);
   /* ★ 폰트는 fonts.css 가 정한다(프리텐다드). 여기서 이름을 다시 적으면 그것이 이긴다 —
      app.css 가 나중에 로드되기 때문이다. 그래서 토큰만 쓴다. */
   font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /* 300 은 표가 빽빽할 때 흐려 보인다. 400 이 같은 크기에서 훨씬 또렷하다 */
   font-weight: 400;
   line-height: 1.55;
   letter-spacing: -0.004em;
}

/* ── Scrollbars — thin, golden tint ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.15); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.25); }

/* ── Typography ── */
h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
h3 { font-size: 11px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.12em; }

/* ── Header ── */
.header {
   background: var(--glass-bg-soft);
   backdrop-filter: saturate(120%) blur(30px);
   -webkit-backdrop-filter: saturate(120%) blur(30px);
   border-bottom: 1px solid transparent;
   padding: 0 var(--sp-6);
   display: flex; align-items: center; gap: var(--sp-3);
   position: sticky; top: 0; z-index: 20;
   height: 52px; flex-wrap: nowrap;
}
.header h1 { white-space: nowrap; font-weight: 500; letter-spacing: -0.02em; }
.header .company { font-size: 10px; color: var(--text-tertiary); font-weight: 400; margin-top: -1px; letter-spacing: 0.12em; text-transform: uppercase; }
.header-spacer { flex: 1; }

/* ── Search ── */
.search-box {
   display: flex; align-items: center;
   background: var(--input-bg); border-radius: var(--r-sm);
   padding: 8px var(--sp-4); max-width: 280px; flex: 1;
   border: 1px solid var(--border-strong);
   transition: all var(--duration) var(--ease);
}
.search-box:focus-within {
   background: var(--bg-secondary);
   border-color: rgba(var(--accent-rgb), 0.2);
   box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06);
}
.search-box input {
   border: none; background: none; font-size: 14px; width: 100%; outline: none;
   color: var(--text-primary); font-weight: 300; letter-spacing: 0.01em;
   caret-color: var(--accent);
}
.search-box input::placeholder { color: var(--text-tertiary); font-weight: 300; }

/* ── Buttons ── */
.btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
   padding: 0 var(--sp-5); height: 34px; border: none; border-radius: var(--r-sm);
   font-size: 13px; font-weight: 400; cursor: pointer;
   letter-spacing: 0.01em;
   transition: all var(--duration) var(--ease);
   white-space: nowrap;
}
.btn-primary {
   background: var(--accent); color: var(--text-inverse);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { opacity: 0.85; }
.btn-ghost { background: none; color: var(--accent); border: none; }
.btn-ghost:hover { color: var(--accent-hover); }
.btn-danger { background: none; color: var(--status-repair-text); border: none; }
.btn-danger:hover { color: var(--status-repair); }
.btn-sm { padding: 0 var(--sp-4); font-size: 12px; height: 32px; }
.btn-icon {
   padding: 0 10px; height: 32px; background: none; border: 1px solid var(--border);
   border-radius: var(--r-sm); cursor: pointer; color: var(--text-secondary);
   transition: all var(--duration) var(--ease);
   display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { border-color: rgba(var(--accent-rgb), 0.15); color: var(--text-primary); }
.btn-icon.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }


/* ── 닫기·보조 단추 ──────────────────────────────────────────────
   그때그때 style="" 로 박지 않는다. 화면마다 조금씩 달라져서
   같은 «닫기» 가 어디서는 흐리고 어디서는 진하게 보였다.
   새 단추가 필요하면 여기에 이름을 하나 만들고 그 이름을 쓴다. */

/* 목록·팝업 머리줄의 «닫기» — 눈에 띄어야 한다. 테두리와 글자를 또렷하게 둔다. */
.btn-close {
   display: inline-flex; align-items: center; justify-content: center; gap: 4px;
   padding: 4px 14px; border-radius: var(--r-sm);
   border: 1px solid rgba(var(--accent-rgb), 0.45);
   background: rgba(var(--accent-rgb), 0.10);
   color: var(--accent);
   font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.6;
   cursor: pointer; white-space: nowrap;
   transition: all var(--duration) var(--ease);
}
.btn-close:hover  { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.btn-close:active { opacity: .85; }
/* 좁은 자리(후보 상자 머리줄)에서 쓰는 작은 판 */
.btn-close.btn-close-sm { padding: 1px 10px; font-size: 11px; }

/* 표 안에서 쓰는 돋보기·연결 같은 잔 단추 */
.btn-mini {
   border: 1px solid var(--border); border-radius: var(--r-sm);
   background: transparent; color: var(--text-secondary);
   font-family: inherit; font-size: 11px; line-height: 1.5;
   padding: 2px 8px; cursor: pointer; white-space: nowrap;
   transition: all var(--duration) var(--ease);
}
.btn-mini:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.btn-mini.on    { border-color: rgba(var(--ok-rgb), .45); color: var(--ok); }
.btn-mini.warn  { border-color: rgba(var(--warn-rgb), .5);  color: var(--warn); }
.btn-mini.go    { border-color: rgba(var(--accent-rgb),.5); color: var(--accent); }
.btn-mini.off   { opacity: .7; }

/* ── Cards (Container) ── */
.card {
   background: var(--bg-secondary); border-radius: var(--r-lg);
   overflow: hidden;
   transition: background var(--duration) var(--ease);
}
.card-padded { padding: var(--sp-8); }

/* ── Asset Cards (Pinterest) ── */
.cards { column-count: 4; column-gap: var(--sp-4); }
.asset-card {
   break-inside: avoid; background: var(--bg-secondary); border-radius: 12px;
   overflow: hidden; margin-bottom: var(--sp-4); cursor: pointer;
   transition: background var(--duration) var(--ease);
}
.asset-card:hover { background: var(--bg-tertiary); }

.card-photo {
   width: 100%; aspect-ratio: 4/3; background: var(--bg-tertiary);
   display: flex; align-items: center; justify-content: center;
   color: var(--text-tertiary); overflow: hidden;
   position: relative;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 18px; }
.card-name { font-size: 16px; font-weight: 500; line-height: 1.4; margin-bottom: 4px; color: var(--text-primary); }
.card-category { font-size: 12px; color: var(--text-secondary); font-weight: 300; letter-spacing: 0.02em; }

/* ── Badge ── */
.badge {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 4px 12px; border-radius: var(--r-full);
   font-size: 12px; font-weight: 400;
   letter-spacing: 0.04em;
}
.badge-in_use { background: var(--status-active-bg); color: var(--status-active-text); }
.badge-stored { background: var(--status-stored-bg); color: var(--status-stored-text); }
.badge-repair { background: var(--status-repair-bg); color: var(--status-repair-text); }
.badge-disposed { background: var(--status-disposed-bg); color: var(--status-disposed-text); }

/* ── Layout ── */
.layout { display: flex; min-height: calc(100vh - 52px); }

/* ── Sidebar ── */
.sidebar {
   width: 240px; background: var(--bg-secondary);
   overflow-y: auto; flex-shrink: 0;
   padding-bottom: var(--sp-10);
   border-right: none;
}
.sidebar h3 { padding: var(--sp-5) var(--sp-5) var(--sp-2); }
.cat-item {
   display: flex; align-items: center; padding: 9px var(--sp-5);
   cursor: pointer; font-size: 13px; gap: var(--sp-2);
   transition: all var(--duration) var(--ease); border-radius: 0;
   color: var(--text-primary); font-weight: 300;
}
.cat-item:hover { background: var(--bg-hover); }
.cat-item.active { background: var(--accent-light); color: var(--accent); font-weight: 400; }
.cat-item .count {
   margin-left: auto; font-size: 11px; color: var(--text-tertiary);
   background: rgba(var(--tint-rgb), 0.03); padding: 2px 8px; border-radius: var(--r-full);
   font-weight: 300;
}
.cat-item.active .count { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.cat-item.depth-2 { padding-left: var(--sp-8); font-size: 13px; }
.cat-item.depth-3 { padding-left: 48px; font-size: 12px; color: var(--text-secondary); }

/* ── Status Chips ── */
.status-bar { display: flex; gap: 8px; padding: var(--sp-4) var(--sp-5); flex-wrap: wrap; }
.status-chip {
   padding: 5px 14px; border-radius: var(--r-full); font-size: 12px; font-weight: 400;
   cursor: pointer; border: 1px solid var(--border); background: transparent;
   transition: all var(--duration) var(--ease);
   letter-spacing: 0.02em;
}
.status-chip:hover { border-color: var(--border-strong); }
.status-chip.active { border-color: transparent; }
.status-chip[data-status="all"].active { background: var(--bg-tertiary); color: var(--text-primary); }
.status-chip[data-status="in_use"].active { background: var(--status-active-bg); color: var(--status-active-text); }
.status-chip[data-status="stored"].active { background: var(--status-stored-bg); color: var(--status-stored-text); }
.status-chip[data-status="repair"].active { background: var(--status-repair-bg); color: var(--status-repair-text); }
.status-chip[data-status="disposed"].active { background: var(--status-disposed-bg); color: var(--status-disposed-text); }

/* ── Container ── */
.container { max-width: 800px; margin: var(--sp-6) auto; padding: 0 var(--sp-5); }
.container-sm { max-width: 700px; margin: var(--sp-6) auto; padding: 0 var(--sp-5); }

/* ── Card Sections ── */
.card-padded h2 {
   font-size: 12px; color: var(--accent); margin-bottom: var(--sp-5); font-weight: 400;
   text-transform: uppercase; letter-spacing: 0.12em;
   padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
.card + .card { margin-top: var(--sp-4); }

/* ── Header Actions ── */
.header-right { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; }
.header-actions { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; }

/* ── Content ── */
.content { flex: 1; padding: var(--sp-5); overflow-y: auto; }
.content-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.content-header .total { font-size: 13px; color: var(--text-secondary); font-weight: 300; }

/* ── List Table ── */
.list-table {
   display: none; width: 100%; border-collapse: separate; border-spacing: 0;
   background: var(--bg-secondary); border-radius: var(--r-lg); overflow: hidden;
}
.list-table th {
   padding: var(--sp-3) var(--sp-5); text-align: left;
   font-size: 10px; font-weight: 400; color: var(--accent);
   text-transform: uppercase; letter-spacing: 0.12em;
   background: var(--bg-tertiary); cursor: pointer;
   white-space: nowrap; user-select: none;
}
.list-table th:hover { color: var(--accent); }
.list-table td {
   padding: var(--sp-3) var(--sp-5); font-size: 13px;
   font-weight: 300;
}
.list-table tr:last-child td { border-bottom: none; }
.list-table tbody tr { transition: background var(--duration) var(--ease); cursor: pointer; }
.list-table tbody tr:hover td { background: var(--bg-hover); }

/* ── Pagination ── */
.pagination { display: flex; justify-content: center; gap: 6px; padding: var(--sp-8) 0; }
.pagination button {
   padding: 6px 13px; border: 1px solid rgba(var(--tint-rgb), 0.04); border-radius: var(--r-sm);
   background: transparent; cursor: pointer; font-size: 12px; font-weight: 300;
   color: var(--text-tertiary);
   transition: all var(--duration) var(--ease);
}
.pagination button:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); }
.pagination button.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.pagination button:disabled { opacity: 0.15; cursor: default; }

/* ── Modal ── */
.modal-overlay {
   position: fixed; inset: 0; background: var(--scrim);
   backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
   display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.show { display: flex; }
.modal {
   background: var(--bg-secondary); border-radius: var(--r-xl);
   padding: var(--sp-8); width: 90%; max-width: 440px;
   box-shadow: var(--shadow-xl);
   border: 1px solid rgba(var(--accent-rgb), 0.1);
   animation: modalIn 0.2s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px); } }
.modal h2 {
   font-size: 12px; color: var(--accent); margin-bottom: var(--sp-6); font-weight: 400;
   text-transform: uppercase; letter-spacing: 0.12em;
   padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
.modal-footer { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-6); }

/* ── Form ── */
.form-group { margin-bottom: var(--sp-5); }
.form-group label {
   display: block; font-size: 10px; font-weight: 400;
   color: var(--accent); margin-bottom: 6px;
   letter-spacing: 0.12em; text-transform: uppercase;
}
.form-group label.required::after { content: ' *'; color: var(--status-repair-text); }
.form-group input, .form-group select, .form-group textarea {
   width: 100%; padding: 14px var(--sp-4);
   border: 1px solid var(--border-strong); border-radius: var(--r-sm);
   font-size: 15px; font-family: inherit; font-weight: 300;
   transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
   -webkit-appearance: none; appearance: none;
   background: var(--input-bg);
   color: var(--text-primary);
   caret-color: var(--accent);
   letter-spacing: 0.01em;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
   outline: none; border-color: rgba(var(--accent-rgb), 0.2);
   box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group select option { background: var(--bg-secondary); color: var(--text-primary); }
.form-row { display: flex; gap: var(--sp-4); }

/* ── User Avatar ── */
.user-menu { position: relative; }
.user-avatar {
   width: 32px; height: 32px; border-radius: var(--r-full);
   background: var(--accent);
   color: var(--text-inverse);
   display: flex; align-items: center; justify-content: center;
   font-size: 13px; font-weight: 400; cursor: pointer;
   transition: opacity var(--duration) var(--ease);
}
.user-avatar:hover { opacity: 0.85; }

/* ── Dropdown ── */
.dropdown {
   position: absolute; right: 0; top: 44px;
   background: var(--bg-secondary); border-radius: var(--r-md);
   box-shadow: var(--shadow-xl); min-width: 210px;
   display: none; overflow: hidden; z-index: 30;
   border: 1px solid rgba(var(--accent-rgb), 0.08);
   animation: dropIn 0.2s var(--ease);
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } }
.dropdown.show { display: block; }
.dropdown a {
   display: flex; align-items: center; padding: 11px var(--sp-5);
   color: var(--text-primary); text-decoration: none; font-size: 13px; font-weight: 300;
   transition: background var(--duration) var(--ease);
}
.dropdown a:hover { background: var(--bg-hover); }
.dropdown hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-1) 0; }

/* ── Tree (Categories) ── */
.tree-item {
   display: flex; align-items: center; padding: 11px var(--sp-5);
   cursor: pointer;
   transition: background var(--duration) var(--ease);
}
.tree-item:hover { background: var(--bg-hover); }
.tree-item:last-child { border-bottom: none; }
.tree-item.depth-1 { padding-left: var(--sp-5); font-weight: 400; }
.tree-item.depth-2 { padding-left: 44px; }
.tree-item.depth-3 { padding-left: 68px; font-size: 13px; color: var(--text-secondary); }
.tree-icon { width: 24px; text-align: center; margin-right: var(--sp-2); }
.tree-name { flex: 1; font-weight: 300; }
.tree-name-en { font-size: 11px; color: var(--text-tertiary); margin-left: var(--sp-2); font-weight: 300; }
.tree-code { font-size: 11px; color: var(--text-tertiary); margin-right: var(--sp-3); font-family: monospace; min-width: 56px; font-weight: 300; }
.tree-actions { display: flex; gap: 6px; opacity: 0; transition: opacity var(--duration) var(--ease); }
.tree-item:hover .tree-actions { opacity: 1; }
.tree-actions button {
   background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
   padding: 4px 8px; cursor: pointer; color: var(--text-secondary);
   transition: all var(--duration) var(--ease);
}
.tree-actions button:hover { border-color: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.tree-actions button.del:hover { border-color: rgba(var(--danger-rgb), 0.2); color: var(--status-repair-text); }

/* ── Language Toggle ── */
#langToggle { display: inline-flex; align-items: center; }
.lang-toggle {
   display: inline-flex; align-items: center; border: 1px solid var(--border);
   border-radius: 5px; overflow: hidden; font-size: 11px; font-weight: 300;
   height: 32px; vertical-align: middle;
}
.lang-toggle button {
   padding: 0 10px; border: none; background: none; cursor: pointer;
   color: var(--text-secondary); transition: all var(--duration) var(--ease);
   font-size: 11px; font-weight: 400; height: 100%;
}
.lang-toggle button.active { background: var(--accent); color: var(--text-inverse) !important; }
.lang-toggle button:not(.active) { background: var(--bg-tertiary); color: var(--text-secondary) !important; }
.lang-toggle button:not(.active):hover { color: var(--text-primary) !important; }

/* ── Checkbox — Gold Luxury ── */
input[type="checkbox"] {
   -webkit-appearance: none; appearance: none;
   width: 16px; height: 16px; border: 1px solid var(--border-stronger);
   border-radius: 4px; background: transparent; cursor: pointer;
   position: relative; vertical-align: middle; flex-shrink: 0;
   transition: all var(--duration) var(--ease);
}
input[type="checkbox"]:checked {
   background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
   content: '';
   position: absolute; top: 50%; left: 50%;
   width: 4px; height: 8px;
   border: solid var(--check-mark); border-width: 0 1.5px 1.5px 0;
   transform: translate(-50%, -60%) rotate(45deg);
}
input[type="checkbox"]:hover { border-color: rgba(var(--accent-rgb), 0.3); }

/* ── Status Radio Group ── */
.status-group { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.status-option { display: flex; align-items: center; gap: 6px; }
.status-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); }
.status-option label { font-size: 14px; cursor: pointer; font-weight: 300; }

/* ── No Data ── */
.no-data { text-align: center; padding: 80px var(--sp-6); color: var(--text-tertiary); }
.no-data .icon { font-size: 48px; margin-bottom: var(--sp-4); opacity: 0.3; }

/* ── Back Link ── */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 300; }

/* ── Mobile Overlay ── */
.overlay { display: none; position: fixed; inset: 0; background: var(--scrim-soft); z-index: 14; backdrop-filter: blur(6px); }
.overlay.show { display: block; }
.sidebar.mobile-show {
   display: block; position: fixed; top: 52px; left: 0; bottom: 0; z-index: 15;
   box-shadow: var(--shadow-xl);
}

/* ── Responsive ── */
@media (max-width: 1024px) { .cards { column-count: 3; } }
@media (max-width: 768px) {
   .sidebar { display: none; }
   .cards { column-count: 2; }
   .search-box { max-width: 160px; }
   .header .company { display: none; }
   .header h1 { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
   .lang-toggle button { padding: 3px 7px; font-size: 10px; }
   .tree-actions { opacity: 1; }
   .tree-name-en { display: none; }
}
@media (max-width: 480px) {
   .cards { column-count: 1; }
   .form-row { flex-direction: column; gap: 0; }
   .header h1 { font-size: 15px; }
   .header { padding: 0 var(--sp-4); gap: var(--sp-2); }
   .search-box { max-width: 120px; padding: 6px 10px; }
   .search-box input { font-size: 13px; }
   .btn-sm { padding: 5px 10px; font-size: 11px; }
}

/* ── Login Page ── */
.login-bg {
   background: var(--login-bg);
   min-height: 100vh; display: flex; align-items: center; justify-content: center;
   padding: var(--sp-6);
}
.login-card {
   background: var(--bg-secondary); border-radius: var(--r-xl);
   padding: 48px; width: 100%; max-width: 400px;
   box-shadow: var(--shadow-xl);
   border: 1px solid rgba(var(--accent-rgb), 0.15);
}
.login-card .logo { text-align: center; margin-bottom: var(--sp-10); }
.login-card .logo h1 { font-size: 24px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.login-card .logo p { font-size: 11px; color: var(--text-tertiary); margin-top: var(--sp-2); font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; }
.login-card .btn-login {
   width: 100%; padding: 14px; border: none; border-radius: var(--r-sm);
   background: var(--accent); color: var(--text-inverse);
   font-size: 14px; font-weight: 400; cursor: pointer; letter-spacing: 0.06em;
   transition: all var(--duration) var(--ease);
}
.login-card .btn-login:hover { background: var(--accent-hover); }
.login-card .btn-login:active { opacity: 0.85; }
.login-card .btn-login:disabled { opacity: 0.3; cursor: not-allowed; }
.error-msg {
   background: rgba(var(--danger-rgb), 0.05); color: var(--status-repair-text);
   border-radius: var(--r-sm); padding: 12px var(--sp-5); font-size: 13px; font-weight: 300;
   margin-bottom: var(--sp-5); display: none; text-align: center;
}
.error-msg.show { display: block; }
.remember-row {
   display: flex; align-items: center; justify-content: space-between;
   margin-bottom: var(--sp-8);
}
.remember-row label { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; cursor: pointer; color: var(--text-secondary); font-weight: 300; }
.remember-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.login-lang { text-align: center; margin-top: var(--sp-6); }

@media (max-width: 480px) {
   .login-card { padding: var(--sp-8) var(--sp-6); border-radius: var(--r-lg); }
}

/* ── Print ── */
@media print {
   .header, .sidebar, .pagination, .search-box, .btn, .tree-actions { display: none !important; }
   .content { padding: 0; }
   .cards { column-count: 2; }
   .card, .asset-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ── 표 머리글 — 모든 화면이 같은 꼴을 쓴다 ────────────────────────────
   화면마다 따로 적어 9가지가 돼 있었다(2026-09-08 정리). 여기서만 고친다.
   빽빽한 표(발주 변환처럼 칸이 20개 넘는 것)는 .dense 를 함께 걸어 여백만 줄인다. */
.table-wrap th,
.grid-wrap th {
  position: sticky; top: 0; z-index: 2;
  padding: 8px 10px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); background: var(--bg-tertiary);
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.15);
  text-align: left; white-space: nowrap;
}
.table-wrap.dense th,
.grid-wrap.dense th { padding: 6px 8px; letter-spacing: 0.04em; }

/* ── 긴 글이 들어가는 칸 ────────────────────────────────────────────────
   규격·설명처럼 긴 값이 그대로 늘어나면 오른쪽 칸(단가)이 화면 밖으로 밀린다.
   보이는 폭만 묶고 값은 그대로 둔다 — 마우스를 올리면 전문이 뜨고,
   머리글 경계를 끌면(col-resize.js) 원하는 만큼 넓힐 수 있다. */
.cell-long { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 규격·분류처럼 «이름보다는 짧은» 긴 글 칸.
   단가 관리 표는 td 가 nowrap 이라 상한이 없으면 한 줄이 표를 넓혀 단가가 화면 밖으로 밀린다.
   머리글 경계를 끌면 col-resize 가 max-width 를 !important 로 덮으므로 이것은 «기본값» 이다. */
/* 발주 통로 딱지 — 두탑·블루시스를 통해 발주하는 곳 (order_channel.js) */
.ch { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
      font-size: 10px; font-weight: 500; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.ch-dt { background: rgba(var(--info-rgb), .18); color: var(--info); }
.ch-bs { background: rgba(var(--purple-rgb), .18); color: var(--purple, #bf5af2); }

.cell-mid { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 단가 관리 표 — 긴 글 칸 기본 상한 (.tbl-cap) ─────────────────────────
   td 가 nowrap 이라 상한이 없으면 «가장 긴 한 줄» 이 표 너비를 정한다.
   실측(두탑 2026-09): 이름 629px · 규격 715px · 분류 185px … 합 2,143px + 단가 2칸 ≈ 2,343px.
   그래서 단가·과세 같은 기본 정보가 화면 밖으로 밀렸다.
   이름만 조이면 분류·등급이 다시 넓히므로 «모든 글 칸» 에 상한을 두고 이름만 넓게 둔다.
   ★ 이것은 «기본값» 이다 — 머리글 경계를 끌면 col-resize 가 max-width 를 !important 로 덮는다.
   ★ 숫자 칸(.num·.price)은 상한을 두지 않는다 — 금액이 잘리면 읽을 수 없다. */
.tbl-cap td { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.tbl-cap td.cell-long { max-width: 260px; }
.tbl-cap td.num, .tbl-cap td.price { max-width: none; overflow: visible; }


/* 표 안 입력 칸 — 공통 바탕 (2026-09-12)
   화면마다 이름이 다르다: .jd-input · .cj-input · .sb-input · .ig-input.
   새 화면이 또 다른 이름을 만들어도 «크기·줄간격·초점» 은 여기서 같아진다.
   화면 안 <style> 이 뒤에 오므로 그쪽이 이기지만, 없으면 이 값이 쓰인다. */
.jd-input, .cj-input, .sb-input, .ig-input, .grid-wrap input[type=text], .table-wrap input[type=text] {
  font-size: 13px; line-height: 1.45; font-family: var(--font-sans); letter-spacing: -0.004em;
}
.grid-wrap input:focus, .table-wrap input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16);
}
/* 숫자를 치는 칸은 자리가 맞아야 읽기 쉽다 */
.jd-input.num, .cj-input.num, .sb-input.num, .ig-input.num, input.num { font-variant-numeric: tabular-nums; }


/* 발주변환 — «이 거래처 물건이 아닐 수 있다» 안내 (match_guard.js) */
.mg-warn { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: var(--r-full);
  background: rgba(var(--danger-rgb), .14); color: var(--danger); font-size: 11.5px; font-weight: 500; }
.mg-warn b { font-weight: 700; }


/* 고르개 목록 — 색을 안 주면 브라우저가 제 색(흰 바탕)으로 그린다 (2026-09-12)
   다크 모드에서 «누르면 하얗게» 뜨던 것이 이것이다. 17개 화면이 같은 문제를 안고 있었다.
   ★ 화면 안에 더 좁은 규칙이 있으면 그쪽이 이긴다 — 여기 것은 «받침» 이다. */
select option { background: var(--bg-secondary); color: var(--text-primary); padding: 6px; }
select option:checked { background: var(--accent-light); color: var(--accent); }
select:disabled { opacity: .55; }


/* ═══════════════════════════════════════════════════════════════
 * 차트 (js/chart.js) — 막대 · 순위 · 도넛 · 히트맵
 * 색은 계열 토큰(--s1..--s8)만 쓴다. 하드코딩하면 라이트 모드에서 깨진다.
 * ═══════════════════════════════════════════════════════════════ */
.ch-empty { padding: 26px; text-align: center; color: var(--text-tertiary); font-size: 12px; }

/* ── 세로 막대 ──
   ★ 막대 높이를 «%» 로 주므로 그 칸(가운데 줄)의 높이가 확정이어야 한다.
     그래서 칸을 「값 / 막대 / 이름」 세 줄 격자로 짠다 — flex 로 하면 %가 먹지 않는다. */
.ch-bars { display: flex; align-items: flex-end; gap: 5px; padding-top: 4px; --ch-h: 128px; }
.ch-col { flex: 1 1 0; min-width: 0; display: grid; gap: 5px; justify-items: center;
          grid-template-rows: 12px var(--ch-h) 13px; }
.ch-col.clk { cursor: pointer; }
.ch-val { align-self: end; font-size: 10px; color: var(--text-tertiary); line-height: 1;
          font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-bar { align-self: end; width: 100%; max-width: 46px; min-height: 3px;
          border-radius: 4px 4px 2px 2px; background: rgba(var(--accent-rgb), .34);
          transition: background var(--duration) var(--ease); }
.ch-bar[data-zero] { height: 2px; min-height: 2px; background: var(--border); }
.ch-col.hi .ch-bar { background: var(--accent); }
.ch-col.clk:hover .ch-bar { background: var(--accent-hover); }
.ch-col.clk:hover .ch-k { color: var(--accent); }
.ch-k { align-self: center; max-width: 100%; font-size: 10px; color: var(--text-tertiary);
        line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 가로 순위 ── */
.ch-rank { display: flex; flex-direction: column; gap: 9px; padding-top: 8px; }
.ch-r { display: grid; grid-template-columns: minmax(96px, 168px) 1fr auto 46px; gap: 11px;
        align-items: center; }
.ch-r.clk { cursor: pointer; }
.ch-rn { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-r.clk:hover .ch-rn { color: var(--accent); }
.ch-rb { height: 9px; border-radius: 5px; background: var(--border); overflow: hidden; }
.ch-rb > span { display: block; height: 100%; border-radius: 5px; opacity: .9; }
.ch-ra { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-rp { font-size: 10.5px; text-align: right; color: var(--text-tertiary);
         font-variant-numeric: tabular-nums; }

/* ── 도넛 ── */
.ch-donut { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
            padding: 8px 0 2px; }
.ch-dsvg { width: 140px; height: 140px; flex: none; }
.ch-seg { transition: opacity var(--duration) var(--ease); }
.ch-dsvg:hover .ch-seg { opacity: .45; }
.ch-dsvg .ch-seg:hover { opacity: 1; }
.ch-dmid { position: absolute; left: 70px; top: 50%; transform: translate(-50%, -50%);
           text-align: center; pointer-events: none; }
.ch-dmid b { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-dmid span { display: block; font-size: 10px; color: var(--text-tertiary); margin-top: 1px; }
.ch-dleg { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-dl { display: grid; grid-template-columns: 9px 1fr auto; gap: 8px; align-items: center;
         font-size: 11.5px; }
.ch-dl i { width: 9px; height: 9px; border-radius: 3px; }
.ch-dl .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-dl .p { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* ── 히트맵 ── */
.ch-heat { overflow-x: auto; }
.ch-heat table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 11px; }
.ch-heat th { font-size: 10px; font-weight: 400; color: var(--text-tertiary); padding: 3px 6px;
              white-space: nowrap; text-align: center; }
.ch-heat th.rh { text-align: left; min-width: 104px; max-width: 160px; color: var(--text-secondary);
                 overflow: hidden; text-overflow: ellipsis; }
.ch-heat td { padding: 6px 7px; text-align: right; border-radius: 5px; white-space: nowrap;
              font-variant-numeric: tabular-nums; background: var(--bg-tertiary); }
.ch-heat td.nil { color: var(--text-tertiary); text-align: center; background: none;
                  border: 1px dashed var(--border-light); }
.ch-heat td.tot, .ch-heat th.tot { background: none; font-weight: 600; color: var(--text-primary); }


/* ── 축이 있는 차트 (Chart.lines · Chart.combo) ──
   ★ 글자는 SVG 밖에 얹는다. SVG 를 preserveAspectRatio="none" 으로 늘리면
     안에 있는 글자도 같이 늘어나 찌그러진다 — 그래서 겹친 칸으로 둔다. */
.ch-ax { --ch-ah: 200px; }
.ch-plot { position: relative; height: var(--ch-ah); }
.ch-axsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-ylabs, .ch-yrabs { position: absolute; inset: 0; pointer-events: none; }
.ch-yl, .ch-yr { position: absolute; font-size: 10.5px; line-height: 1; color: var(--text-tertiary);
                 transform: translateY(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-yl { left: 0; width: 46px; text-align: right; }
.ch-yr { right: 0; width: 40px; text-align: left; }
.ch-xlabs { position: relative; height: 18px; margin-top: 2px; }
.ch-xl { position: absolute; top: 0; font-size: 10.5px; line-height: 1; color: var(--text-tertiary);
         transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 값을 짚어 보는 자리 — 마우스를 올리면 그 달 숫자가 뜬다 */
.ch-hovs { position: absolute; inset: 0; }
.ch-hv { position: absolute; top: 0; bottom: 0; cursor: crosshair; }
.ch-hv:hover { background: rgba(var(--tint-rgb), .05); }
.ch-leg { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 11px;
          font-size: 11.5px; color: var(--text-secondary); }
.ch-leg i { display: inline-block; width: 13px; height: 3px; border-radius: 2px;
            margin-right: 6px; vertical-align: middle; }

/* ── 가로 막대 (Chart.hbar) ── */
.ch-hb { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.ch-hbr { display: grid; grid-template-columns: minmax(110px, 190px) 1fr auto 44px;
          gap: 12px; align-items: center; }
.ch-hbr .nm { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
              padding-right: 2px; }
/* ★ 바탕(--tint-weak)은 1% 라 거의 안 보인다 — 자(尺)가 안 보이면 길이를 견줄 수 없다 */
.ch-hbr .tr { height: 20px; border-radius: 4px; background: var(--bg-tertiary); overflow: hidden;
              display: flex; align-items: center; }
.ch-hbr .fl { display: block; height: 100%; border-radius: 4px; opacity: .85;
              transition: width var(--duration) var(--ease); }
.ch-hbr .va { font-size: 12.5px; font-weight: 600; text-align: right; white-space: nowrap;
              font-variant-numeric: tabular-nums; }
.ch-hbr .sb { font-size: 11px; text-align: right; color: var(--text-tertiary);
              font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 가로막대 머리줄 — 숫자 옆에 «무슨 숫자인지» 를 적는다 */
.ch-hbh { display: grid; grid-template-columns: minmax(110px, 190px) 1fr auto 44px; gap: 12px;
          align-items: center; padding-bottom: 7px; margin-bottom: 3px;
          border-bottom: 1px solid var(--border);
          font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
          color: var(--text-tertiary); }
.ch-hbh b { font-weight: 500; text-align: right; white-space: nowrap; }
.ch-hbh span:last-child { text-align: right; white-space: nowrap; }