/* EV 관리 콘솔 (/console/) 공용 스타일
   색은 반드시 토큰만 쓴다. 라이트가 기본, 다크는 시스템 설정 또는 html[data-theme="dark"].
   시안 원본: C:\SRC\ev-admin-design\shared.css */

:root {
  --ground: #F3F5F4; --panel: #FFFFFF; --sunken: #F6F8F7; --hover: #F1F4F2;
  --line: #E2E7E4; --line-2: #EDF0EE;
  --ink: #15191A; --ink-2: #454D4F; --ink-3: #667073;
  --accent: #0F7A43; --accent-soft: #E1F2E8; --accent-ink: #0B5C32; --on-accent: #FFFFFF;
  --blue: #1D5FD1; --blue-soft: #E3ECFB;
  --violet: #5443B8; --violet-soft: #ECE9FA;
  --amber: #8A5200; --amber-soft: #FAEFD9;
  --red: #B42B22; --red-soft: #FBE8E6;
  --gray: #566063; --gray-soft: #ECEFEE;
  --btn: #15191A; --on-btn: #FFFFFF;
  --shadow: 0 1px 2px rgba(16, 24, 20, .05);
  --sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

/* 시스템이 다크이고 사용자가 라이트를 고르지 않았을 때 (JS 없이도 성립) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D1011; --panel: #15191A; --sunken: #1A1F20; --hover: #1D2324;
    --line: #272E2F; --line-2: #1F2526;
    --ink: #ECEFEE; --ink-2: #B4BCBB; --ink-3: #8C9695;
    --accent: #75DF8F; --accent-soft: rgba(117, 223, 143, .13); --accent-ink: #75DF8F; --on-accent: #0B1F12;
    --blue: #86B4FF; --blue-soft: rgba(134, 180, 255, .14);
    --violet: #B0A4FF; --violet-soft: rgba(176, 164, 255, .14);
    --amber: #F0B860; --amber-soft: rgba(240, 184, 96, .14);
    --red: #FF8F86; --red-soft: rgba(255, 143, 134, .14);
    --gray: #A3ACAB; --gray-soft: rgba(163, 172, 171, .13);
    --btn: #ECEFEE; --on-btn: #0D1011;
    --shadow: none;
    color-scheme: dark;
  }
}
/* 사용자가 다크를 고른 경우 (시스템 설정을 이긴다) */
:root[data-theme="dark"] {
  --ground: #0D1011; --panel: #15191A; --sunken: #1A1F20; --hover: #1D2324;
  --line: #272E2F; --line-2: #1F2526;
  --ink: #ECEFEE; --ink-2: #B4BCBB; --ink-3: #8C9695;
  --accent: #75DF8F; --accent-soft: rgba(117, 223, 143, .13); --accent-ink: #75DF8F; --on-accent: #0B1F12;
  --blue: #86B4FF; --blue-soft: rgba(134, 180, 255, .14);
  --violet: #B0A4FF; --violet-soft: rgba(176, 164, 255, .14);
  --amber: #F0B860; --amber-soft: rgba(240, 184, 96, .14);
  --red: #FF8F86; --red-soft: rgba(255, 143, 134, .14);
  --gray: #A3ACAB; --gray-soft: rgba(163, 172, 171, .13);
  --btn: #ECEFEE; --on-btn: #0D1011;
  --shadow: none;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); font-size: .93em; letter-spacing: -.01em; }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.grow { flex-grow: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 14px; height: 14px; }
.ico.lg { width: 20px; height: 20px; }

/* ── 앱 골격 (시안의 아트보드와 달리 뷰포트를 채운다) ── */
.app {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  height: 100vh; height: 100dvh;
}
.app.bare { display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }

/* ── 사이드바 ── */
.side { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px 14px; position: relative; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 16px; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--btn); color: var(--on-btn); display: flex; align-items: center; justify-content: center; flex: none; }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.brand-sub { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.nav-h { font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 14px 10px 4px; letter-spacing: .02em; }
.nav-a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.nav-a:hover { background: var(--hover); color: var(--ink); }
.nav-a.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); border: 1px solid var(--line); }
.nav-a.on .ico { color: var(--accent); }
.nav-a .ext { margin-left: auto; color: var(--ink-3); }
.nav-a.dim, .nav-a[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.nav-a[aria-disabled="true"]:hover { background: transparent; color: var(--ink-3); }
.nav-a .n { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--gray-soft); color: var(--gray); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.nav-a .n.hot { background: var(--red-soft); color: var(--red); }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 18px; padding-left: 10px; border-left: 1px solid var(--line); }
.nav-sub a, .nav-sub > span { height: 30px; padding: 0 8px; border-radius: 6px; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.nav-sub a:hover { background: var(--hover); color: var(--ink-2); }
.nav-sub a.on { color: var(--ink); font-weight: 600; background: var(--hover); }
.nav-sub [aria-disabled="true"] { cursor: default; }
.nav-sub [aria-disabled="true"]:hover { background: transparent; color: var(--ink-3); }
.side-foot { display: flex; align-items: center; gap: 10px; padding: 12px 10px 2px; border-top: 1px solid var(--line); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.theme-sw { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 9px; background: var(--gray-soft); }
.theme-sw button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); font-size: 12px; font-weight: 500; cursor: pointer; }
html:not([data-theme="dark"]) .theme-sw .t-light,
html[data-theme="dark"] .theme-sw .t-dark { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* ── 본문 패널 ── */
.main { margin: 10px 10px 10px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 28px; border-bottom: 1px solid var(--line-2); flex: none; justify-content: space-between; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); min-width: 0; }
.crumb b { color: var(--ink); font-weight: 600; }
.crumb .sep { color: var(--line); }
.topbar-right { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.page { padding: 28px 28px 36px; display: flex; flex-direction: column; gap: 20px; min-width: 0; overflow-y: auto; flex-grow: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.sub { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }
.h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gap4 { gap: 4px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; } .gap20 { gap: 20px; } .gap24 { gap: 24px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }

/* 통합 검색 (상단) */
.cmd { display: flex; align-items: center; gap: 10px; width: 520px; max-width: 46vw; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--sunken); color: var(--ink-3); font-size: 13px; }
.cmd .kbd { margin-left: auto; }
.cmd input { flex-grow: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: 13px; outline: none; padding: 0; }
.cmd input::placeholder { color: var(--ink-3); }
.cmd:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--panel); }

/* ── KPI ── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 13px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); }
.kpi-l { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.kpi-v { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.kpi-v small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.kpi-d { font-size: 12px; color: var(--ink-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--gray); display: inline-block; }
.dot.ok { background: var(--accent); } .dot.blue { background: var(--blue); } .dot.violet { background: var(--violet); }
.dot.amber { background: var(--amber); } .dot.red { background: var(--red); } .dot.ink { background: var(--ink); }

/* ── 카드 / 섹션 ── */
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; overflow: hidden; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.card-b { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.card-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line-2); background: var(--sunken); }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.toolbar .spacer { flex-grow: 1; }

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--btn); border-color: var(--btn); color: var(--on-btn); font-weight: 600; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.danger { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn.lg { height: 40px; padding: 0 18px; font-size: 14px; }
.btn.icon { width: 34px; padding: 0; }
.btn.icon.sm { width: 28px; }
.btn[disabled] { opacity: .45; cursor: default; }

/* ── 입력 ── */
.field, .select, .textarea { height: 34px; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); padding: 0 11px; font-size: 13px; outline: none; }
.field::placeholder, .textarea::placeholder { color: var(--ink-3); }
.field:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.textarea { height: auto; min-height: 96px; padding: 9px 11px; line-height: 1.55; resize: vertical; }
.select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field.lg, .select.lg { height: 40px; font-size: 14px; }
.search { position: relative; width: 280px; }
.search .ico { position: absolute; left: 11px; top: 9px; color: var(--ink-3); }
.search .field { padding-left: 33px; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f > label, .lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.f .req { color: var(--red); margin-left: 2px; }
.hint { font-size: 12px; color: var(--ink-3); }
.hint.err { color: var(--red); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }

/* ── 세그먼트 / 탭 ── */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--gray-soft); }
.seg a, .seg button, .seg span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 7px; border: 0; background: transparent; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg .on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.seg .n { color: var(--ink-3); font-weight: 500; }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); }
.tabs a, .tabs button { padding: 0 0 11px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tabs .on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--gray-soft); color: var(--gray); font-size: 11px; font-weight: 600; }
.count.red { background: var(--red-soft); color: var(--red); }
.anchor { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--gray-soft); align-self: flex-start; flex-wrap: wrap; }
.anchor a { height: 30px; padding: 0 13px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.anchor a.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* ── 표 ── */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--sunken); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl td.strong, .tbl td .strong { color: var(--ink); font-weight: 600; }
.tbl td.wrap { white-space: normal; }
.tbl th.right, .tbl td.right { text-align: right; }
.tbl tr.sel td { background: var(--accent-soft); }
.tbl .sort { color: var(--ink); }
.tbl.compact td, .tbl.compact th { padding: 7px 12px; }
.cell2 { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.cell2 span:last-child { font-size: 12px; color: var(--ink-3); }
.pager { display: flex; align-items: center; gap: 4px; padding: 12px 14px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; }
.pager .info { margin-right: auto; }
.pager a, .pager span.p { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; color: var(--ink-2); }
.pager a:hover { background: var(--hover); }
.pager a.on { background: var(--btn); color: var(--on-btn); font-weight: 600; }
.pager a.off { color: var(--line); }

/* ── 배지 / 칩 ── */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--gray-soft); color: var(--gray); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge.ok { background: var(--accent-soft); color: var(--accent-ink); }
.badge.blue { background: var(--blue-soft); color: var(--blue); }
.badge.violet { background: var(--violet-soft); color: var(--violet); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.red { background: var(--red-soft); color: var(--red); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; font-family: var(--mono); }
.chip.x { font-family: var(--sans); font-weight: 500; font-size: 12px; background: var(--sunken); }

/* ── 상세 정보(키-값) ── */
.dl { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px 16px; font-size: 13px; }
.dl dt { color: var(--ink-3); margin: 0; }
.dl dd { margin: 0; color: var(--ink); font-weight: 500; min-width: 0; }
.dl.two { grid-template-columns: 112px minmax(0, 1fr) 112px minmax(0, 1fr); }

/* ── 안내 / 빈 상태 / 단계 ── */
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.note .ico { margin-top: 2px; color: var(--ink-3); }
.note.amber { background: var(--amber-soft); border-color: transparent; color: var(--amber); } .note.amber .ico { color: var(--amber); }
.note.red { background: var(--red-soft); border-color: transparent; color: var(--red); } .note.red .ico { color: var(--red); }
.note.ok { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); } .note.ok .ico { color: var(--accent-ink); }
.note.blue { background: var(--blue-soft); border-color: transparent; color: var(--blue); } .note.blue .ico { color: var(--blue); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 20px; color: var(--ink-3); font-size: 13px; text-align: center; }
.empty .ico { width: 24px; height: 24px; margin-bottom: 4px; }
.steps { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.step { display: inline-flex; align-items: center; gap: 8px; }
.step i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 600; }
.step.on { color: var(--ink); font-weight: 600; } .step.on i { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.step.done i { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.steps .bar { width: 28px; height: 1px; background: var(--line); }
.divider { height: 1px; background: var(--line-2); border: 0; margin: 0; }
.kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-3); }
.meter { height: 6px; border-radius: 3px; background: var(--gray-soft); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.meter.blue > span { background: var(--blue); } .meter.amber > span { background: var(--amber); } .meter.red > span { background: var(--red); }
.statbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.statbar span { display: block; height: 100%; border-radius: 2px; background: var(--gray-soft); }
.statbar .ok { background: var(--accent); } .statbar .blue { background: var(--blue); } .statbar .violet { background: var(--violet); } .statbar .off { background: var(--line); }
.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; position: relative; font-size: 13px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 1px; background: var(--line); }
.tl:last-child::before { display: none; } .tl:last-child { padding-bottom: 0; }
.tl .dot { margin: 6px 0 0 4px; }
.tl time { font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.logbox { font-family: var(--mono); font-size: 12px; line-height: 1.7; background: var(--sunken); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; color: var(--ink-2); overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

/* ── 작업 큐 / 카드형 목록 ── */
.q { display: flex; flex-direction: column; }
.q-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line-2); }
.q-item:last-child { border-bottom: 0; }
.q-item:hover { background: var(--hover); }
.q-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--gray-soft); color: var(--gray); }
.q-ico.red { background: var(--red-soft); color: var(--red); } .q-ico.amber { background: var(--amber-soft); color: var(--amber); } .q-ico.blue { background: var(--blue-soft); color: var(--blue); } .q-ico.ok { background: var(--accent-soft); color: var(--accent-ink); }
.q-t { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.q-m { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.lane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lane-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 0 2px; }
.ticket { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); font-size: 12.5px; color: var(--ink-2); }
.ticket.sel { border-color: var(--ink); box-shadow: 0 0 0 3px var(--gray-soft); }
.act { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink); width: 100%; border-left: 0; border-right: 0; border-top: 0; background: transparent; text-align: left; cursor: pointer; font-size: 13px; }
.act:last-child { border-bottom: 0; }
.act:hover { background: var(--hover); }
.act .ico:last-child { color: var(--ink-3); }

/* ── 차량 한 장 ── */
.idhead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.plate { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--ink); font-size: 22px; font-weight: 700; letter-spacing: .02em; background: var(--panel); }
.hero { font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.hero small { font-size: 15px; font-weight: 500; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); min-width: 0; }
.tile:hover { border-color: var(--ink-3); }
.tile.warn { border-color: var(--red); }
.soc { display: flex; align-items: baseline; gap: 4px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.soc small { font-size: 12px; color: var(--ink-3); font-weight: 500; }

/* ── 차트(인라인 SVG) ── */
.chart { width: 100%; display: block; }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.chart .axis { fill: var(--ink-3); font-size: 11px; font-family: var(--mono); }
.chart .l1 { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .l2 { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .l3 { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .a1 { fill: var(--accent-soft); stroke: none; }
.chart .b1 { fill: var(--accent); } .chart .b2 { fill: var(--blue); } .chart .b0 { fill: var(--gray-soft); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ── 대화 / 받은함 ── */
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 72%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.55; background: var(--sunken); border: 1px solid var(--line-2); color: var(--ink); align-self: flex-start; }
.msg.me { align-self: flex-end; background: var(--accent-soft); border-color: transparent; color: var(--ink); }
.msg-t { font-size: 11px; color: var(--ink-3); font-family: var(--mono); align-self: flex-start; }
.msg-t.me { align-self: flex-end; }
.inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; min-height: 640px; }
.inbox > * { min-width: 0; border-right: 1px solid var(--line-2); }
.inbox > *:last-child { border-right: 0; }
.thread { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-3); }
.thread.on { background: var(--hover); }
.thread b { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.drop-over { position: absolute; inset: 8px; z-index: 4; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--accent); border-radius: 12px; background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel); color: var(--accent-ink); font-size: 14px; pointer-events: none; }
.drop-over[hidden] { display: none; }
.drop-over .ico { width: 28px; height: 28px; }
.file-error { font-size: 12.5px; color: var(--red); background: var(--red-soft); border-radius: 8px; padding: 6px 10px; }
.file-error[hidden] { display: none; }
.send-status { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.send-status[hidden] { display: none; }
.send-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.send-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .2s; }
.send-bar.indet i { width: 30%; animation: send-indet 1.1s ease-in-out infinite; }
@keyframes send-indet { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .send-bar.indet i { animation: none; width: 100%; opacity: .5; } }
form[data-care-reply].busy button[type="submit"] { cursor: progress; }
.phone { width: 300px; border: 1px solid var(--line); border-radius: 22px; padding: 14px; background: var(--sunken); display: flex; flex-direction: column; gap: 10px; }

/* ── 모달 / 드로어 ── */
.overlay { position: absolute; inset: 0; background: rgba(10, 14, 12, .46); display: flex; align-items: flex-start; justify-content: center; padding-top: 96px; z-index: 5; }
.modal { width: 520px; max-width: 92%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); overflow: hidden; }
.modal.wide { width: 760px; }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.modal-b { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line-2); background: var(--sunken); }
.scrim { position: absolute; inset: 0; background: rgba(10, 14, 12, .32); z-index: 5; border: 0; padding: 0; cursor: default; }
.drawer { position: absolute; top: 10px; right: 10px; bottom: 10px; width: 460px; max-width: calc(100vw - 20px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: -16px 0 48px rgba(0, 0, 0, .18); z-index: 6; display: flex; flex-direction: column; overflow: hidden; }
.drawer-b { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; overflow-y: auto; }

/* ── 좁은 화면 (관리 웹은 데스크톱 우선, 다만 깨지지는 않게) ── */
@media (max-width: 1100px) {
  .tiles, .kpis, .kpis.k5, .kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox > * { border-right: 0; border-bottom: 1px solid var(--line-2); }
}
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: absolute; z-index: 8; top: 0; bottom: 0; left: 0; width: 244px; background: var(--ground); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .16s ease-out; }
  .app[data-side="open"] .side { transform: none; }
  .main { margin: 10px; }
  .side-toggle { display: inline-flex; }
  .cmd { max-width: none; width: auto; flex-grow: 1; }
  .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .page { padding: 20px 16px 28px; }
  .topbar { padding: 0 16px; }
  .grid2, .grid3, .grid4, .kpis, .kpis.k3, .kpis.k5, .kpis.k6, .tiles, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .drawer { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; height: 76%; }
  .crumb { display: none; }
}
.side-toggle { display: none; }
@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

/* ── 통합 검색 팔레트 (상단 검색창 아래로 내려오는 드롭다운) ──
   시안은 가운데 오버레이였는데, 실제 화면에서는 검색창이 상단에 있으니
   그 아래에 붙인다. 구성·크기는 시안(.palette)과 같다. */
.cmd { position: relative; }
.palette { width: 680px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 64px rgba(16, 24, 20, .24); overflow: hidden; }
.palette.pop { position: absolute; top: calc(100% + 8px); left: 0; width: min(680px, calc(100vw - 48px)); max-height: min(70vh, 620px); overflow-y: auto; z-index: 60; }
.palette-g { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 12px 18px 4px; }
.palette-r { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 18px; color: var(--ink); }
.palette-r.on { background: var(--hover); }
.palette-f { display: flex; gap: 16px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line-2); background: var(--sunken); font-size: 12px; color: var(--ink-3); position: sticky; bottom: 0; }
.palette-f a { color: var(--accent-ink); font-weight: 500; }
.hl { background: var(--accent-soft); color: var(--accent-ink); border-radius: 3px; padding: 0 2px; }

/* ── 차량 한 장 ── */
.rail { display: flex; flex-direction: column; gap: 12px; position: relative; }
/* 오른쪽 단이 좁은 배치. 인라인 style 로 두면 좁은 화면 대응이 깨진다. */
.split.narrow-rail { grid-template-columns: minmax(0, 1fr) 340px; }
/* 아직 만들지 않은 구획은 링크가 아니라 흐린 글자로 둔다 */
.anchor span { height: 30px; padding: 0 13px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; }

/* ── 나머지 화면에서 쓰는 것 (shared.css 에서 옮김) ── */
.gap8 { gap: 8px; }
.switch { width: 34px; height: 20px; border-radius: 10px; background: var(--line); position: relative; flex: none; display: inline-block; border: 0; padding: 0; cursor: pointer; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.switch.on { background: var(--accent); }
.switch.on::after { left: 16px; }
.map-ph { border-radius: 10px; background: var(--sunken); border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 12.5px; }
/* 사이드바의 '기존 화면' 표시 */
.nav-legacy { margin-left: auto; font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; line-height: 16px; }
/* 라디오를 품은 버튼(<label class="btn"><input type="radio">…) — 고른 것을 버튼 모양으로 보인다 */
.btn:has(input:checked) { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.btn input[type="radio"], .btn input[type="checkbox"].sr-toggle { position: absolute; opacity: 0; pointer-events: none; }
.btn:has(input[type="radio"]) { position: relative; }
/* .page 는 세로 flex 라, 아래 표가 길면 위 카드가 눌려 내용이 잘린다(overflow:hidden 카드는 min-height 가 0 이 됨). 줄어들지 않게 한다. */
.page > * { flex-shrink: 0; }

/* ── 상태 필터 칸(개통·구독 상단) ──
   숫자 카드처럼 보이면 누를 생각을 못 한다: 누를 수 있는 모양 + 고른 칸은 확실히 켠다. */
.kpis.k7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kpi-filter .kpi { cursor: pointer; transition: border-color .12s, background .12s; }
.kpi-filter .kpi:hover { border-color: var(--ink-3); background: var(--hover); }
.kpi-filter .kpi.on { border: 2px solid var(--accent); background: var(--accent-soft); padding: 13px 15px 12px; }
.kpi-filter .kpi.on .kpi-l { color: var(--accent-ink); font-weight: 600; }
.kpi-filter .kpi-check { margin-left: auto; color: var(--accent-ink); display: inline-flex; }
.kpi-filter .kpi-flag { height: 18px; padding: 0 7px; font-size: 10.5px; letter-spacing: 0; }
@media (max-width: 1200px) { .kpis.k7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kpis.k7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 선택한 항목 작업 막대 — 체크하면 화면 아래 가운데에 고정 */
.bulkbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 20, .18); white-space: nowrap; }
.bulkbar[hidden] { display: none; }
@media (max-width: 700px) { .bulkbar { left: 10px; right: 10px; transform: none; flex-wrap: wrap; white-space: normal; } }

/* ── 피드백: 화면 높이에 맞춘 3단 — 목록·대화·상담 정보가 각자 스크롤 ── */
.page.fill { overflow: hidden; padding-bottom: 20px; }
.page.fill > .inbox-card { flex: 1 1 0; min-height: 420px; display: flex; }
.inbox.fixed { flex: 1 1 auto; min-height: 0; }
.inbox.fixed > * { min-height: 0; display: flex; flex-direction: column; }
.pane-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.thread-group { position: sticky; top: 0; z-index: 1; padding: 8px 16px 6px; font-size: 11px; font-weight: 700; background: var(--panel); border-bottom: 1px solid var(--line-2); }
.btn.done { color: var(--accent-ink); }
@media (max-width: 1100px) {
  .page.fill { overflow-y: auto; }
  .page.fill > .inbox-card { flex: none; }
  .pane-scroll { flex: none; max-height: 70vh; }
}
.pager.compact { gap: 2px; padding: 8px 10px; flex-wrap: nowrap; }
.pager.compact a, .pager.compact span.p { min-width: 26px; height: 26px; padding: 0 5px; }

/* ── 긴 입력 화면: 저장·발송 버튼 줄을 화면 아래에 붙여 둔다 ── */
.card:has(.card-f.sticky) { overflow: visible; }
.card-f.sticky { position: sticky; bottom: 0; z-index: 3; border-radius: 0 0 12px 12px; box-shadow: 0 -8px 18px rgba(0, 0, 0, .06); }
.card-f.sticky.bar { border: 1px solid var(--line); border-radius: 12px; }

/* ── 커뮤니티: 글 본문 · 사진 · 댓글 스레드 ── */
.post-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.75; color: var(--ink); }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.img-grid:empty { display: none; }
.img-grid img { width: 100%; height: 132px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); display: block; background: var(--sunken); }
.img-cell { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.cmt-list { display: flex; flex-direction: column; }
.cmt { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line-2); scroll-margin-top: 80px; }
.cmt-list > .cmt:first-child { border-top: 0; }
.cmt .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; min-height: 28px; }
.cmt .body { font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.cmt.op > .body { background: var(--accent-soft); padding: 8px 11px; border-radius: 9px; align-self: flex-start; max-width: 100%; }
.cmt.dim > .body { color: var(--ink-3); }
.cmt:target { background: var(--amber-soft); border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.cmt-actions { display: flex; align-items: center; gap: 2px; }
.cmt-actions form { display: inline-flex; }
.cmt-replies { margin-left: 18px; padding-left: 16px; border-left: 2px solid var(--line-2); }
.cmt-replies .cmt:first-child { border-top: 0; }
.cmt-form { display: flex; flex-direction: column; gap: 8px; }
.cmt-form[hidden] { display: none; }
.cmt-ctx { padding: 12px 0 4px; border-top: 1px solid var(--line); }
.cmt-ctx:first-child { border-top: 0; padding-top: 0; }
.cmt-ctx > .cmt { border-top: 0; padding-top: 6px; }
.cmt-quote { font-size: 13px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; margin: 6px 0 8px; }

/* ── 기존 대시보드에서 옮겨 온 안내 ── */
.legacy-note { display: flex; align-items: flex-start; gap: 10px; margin: 16px 28px 0; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; line-height: 1.55; flex: none; }
.legacy-note .ico { margin-top: 2px; }
.legacy-note > span { flex: 1; }
.legacy-note a { text-decoration: underline; }
@media (max-width: 960px) { .legacy-note { margin: 12px 16px 0; } }

/* ── 피드백: 상담 메모 ── */
.memo-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--amber-soft); border: 1px solid transparent; }
.memo-box .textarea { background: var(--panel); min-height: 88px; }
.memo-box.saving [data-memo-status] { color: var(--ink-3); }
.memo-box.saved [data-memo-status] { color: var(--accent-ink); }
.memo-box.error [data-memo-status] { color: var(--red); }
.memo-hist summary { cursor: pointer; font-size: 12px; color: var(--ink-3); }
.memo-hist-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid var(--line-2); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.memo-peek { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--amber); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.memo-peek .ico { width: 12px; height: 12px; flex: none; }
.msg-t .unread { color: var(--amber); font-weight: 600; }
.msg-acts .btn.sm { height: 24px; padding: 0 8px; font-size: 11.5px; }
.msg-acts form { display: inline-flex; }
.msg-edit[hidden] { display: none; }

/* ── 프리미엄 기간 변경 드로어(vact/premium.html) ──
   '어디부터?'는 빠른 조정일 때만, 날짜 칸은 '날짜 직접 선택'일 때만 보인다. */
form:has(input[name="adjust"][value="exact"]:checked) .pp-base { display: none; }
form:not(:has(input[name="adjust"][value="exact"]:checked)) .pp-exact { display: none; }
.pp-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.pp-red { color: var(--red); }
.btn.pp-neg { color: var(--red); }
.btn.pp-neg:has(input:checked) { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.pp-adv > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.pp-adv[open] > summary { margin-bottom: 2px; }
.note.pp-sync .btn { margin-left: auto; flex: none; }