/* 도담이 관리자 — 다크 대시보드(대시보드 하네스 토큰). 모바일 퍼스트: min-width 미디어쿼리만 쓴다. */
:root {
  --font: 'Pretendard', 'Inter', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --bg: #1c1c1c;
  --surface-card: #2b2b2b;
  --surface-inner: #161616;
  --surface-row: #202020;
  --surface-head: #121212;
  --stroke: #444;
  --divider: #333;
  --text: #fff;
  --text-sub: #b3b3b3;
  --text-dim: #8a8a8a;
  /* 데이터 색(프레임에는 쓰지 않는다) */
  --data: #6ea8fe;
  --data-dim: #23344d;
  --up-bg: #10342d;
  --up-fg: #40c4aa;
  --warn-bg: #341500;
  --warn-fg: #ffddc7;
  --crit-bg: #3a1214;
  --crit-fg: #ffb4b0;
  --crit: #f06a63;
  --page-x: 16px;
  --gap: 12px;
  --pad: 16px;
  --r: 8px;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px #9cc3ff;
}
@media (min-width: 768px) {
  :root { --page-x: 24px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.45 var(--font);
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1, h2, h3, p { margin: 0; }
b { font-weight: 600; }
code { font-size: 0.92em; color: var(--text); }
a { color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--text-sub); }
.small, .small code { font-size: 12px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

/* 브랜드 */
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.brand__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #3a3a3a; font-size: 14px; flex: none; }

/* 버튼 · 입력 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: #3a3a3a; color: var(--text); font: 500 14px/1 var(--font); cursor: pointer;
  transition: background-color 0.15s;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}
.btn:hover { background: #474747; }
.btn--primary { background: #f2f2f2; color: #111; }
.btn--primary:hover { background: #fff; }
.btn--ghost { background: transparent; color: var(--text-sub); }
.btn--ghost:hover { background: #2f2f2f; color: var(--text); }
.btn--icon { width: 44px; padding: 0; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
@media (min-width: 1024px) {
  .btn { min-height: 36px; }
  .btn--icon { width: 36px; }
}
.input {
  width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px;
  background: var(--surface-inner); color: var(--text); font: 400 16px/1 var(--font);
}
.input::placeholder { color: var(--text-dim); }
.input:focus { border-color: #5b5b5b; }
.field { display: grid; gap: 6px; }
.field__label { font: 500 12px/1.4 var(--font); color: var(--text-sub); }

/* 로그인 */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--page-x); }
.login__card { width: 100%; max-width: 400px; display: grid; gap: 16px; background: var(--surface-card); border-radius: 12px; padding: 20px; }
.login__title { font: 500 20px/1.4 var(--font); }
.form-error { color: var(--crit-fg); background: var(--crit-bg); border-radius: 8px; padding: 10px 12px; font-size: 13px; }

/* 상단 */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px var(--page-x); background: rgba(28, 28, 28, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);
}
.top__nav { order: 3; display: flex; flex-wrap: wrap; gap: 4px; width: 100%; min-width: 0; }
.top__nav a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 0 12px; border-radius: 8px; color: var(--text-sub); text-decoration: none; overflow-wrap: anywhere; }
.top__nav a:hover, .top__nav a.is-on { background: #2f2f2f; color: var(--text); }
.top__actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.updated { display: none; font-size: 12px; white-space: nowrap; }
@media (min-width: 768px) {
  .top__nav { order: 0; width: auto; }
  .updated { display: inline; }
}

/* 페이지 */
.page { width: 100%; max-width: 1440px; margin: 0 auto; padding: 16px var(--page-x) 48px; display: grid; gap: 20px; }
.section { display: grid; gap: var(--gap); min-width: 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.section__head h2 { font: 500 clamp(18px, 2.2vw, 20px)/1.4 var(--font); letter-spacing: -0.025em; }
.card { background: var(--surface-card); border-radius: var(--r); padding: var(--pad); min-width: 0; display: grid; gap: 12px; align-content: start; }
.card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.card__head h3 { font: 600 16px/1.45 var(--font); letter-spacing: -0.02em; min-width: 0; }
.card__head > * { min-width: 0; overflow-wrap: anywhere; }
.card__head--tools { align-items: center; }
.label { font: 500 12px/1.45 var(--font); color: var(--text-sub); }
.alert { background: var(--crit-bg); color: var(--crit-fg); border-radius: 8px; padding: 12px 16px; }

/* 상태 띠 */
.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.strip__item { display: grid; gap: 4px; min-width: 0; }
.strip__item b { font: 600 15px/1.4 var(--font); }
@media (min-width: 768px) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 6px; font: 500 12px/1 var(--font); background: #3a3a3a; color: var(--text-sub); }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--ok { background: var(--up-bg); color: var(--up-fg); }
.chip--bad { background: var(--crit-bg); color: var(--crit-fg); }
.chip--warn { background: var(--warn-bg); color: var(--warn-fg); }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.kpi { gap: 6px; }
.kpi--hero { grid-column: 1 / -1; }
.num { display: flex; align-items: baseline; gap: 4px; }
.num b { font: 600 clamp(22px, 3vw, 26px)/1.3 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero { display: flex; align-items: baseline; gap: 6px; }
.hero b { font: 500 clamp(44px, 7vw, 60px)/1.2 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.unit { color: var(--text-sub); font-size: 14px; }
.hero .unit { font-size: 18px; }
@media (min-width: 768px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis--priv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .kpis { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }
  .kpi--hero { grid-column: auto; }
  .kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis--priv { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 차트 */
.chart { position: relative; min-height: 180px; }
.chart:has(> .empty) { min-height: 0; }
.chart svg { display: block; width: 100%; height: 200px; }
.chart .grid line { stroke: var(--divider); stroke-width: 1; }
.chart .axis text { fill: var(--text-dim); font: 400 12px var(--font); }
.chart .bar { fill: var(--data); }
.chart .bar--dim { fill: var(--data-dim); }
.chart .bar--err { fill: var(--crit); }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover + .bar, .chart .bar.is-on { filter: brightness(1.25); }
.tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: rgba(12, 12, 12, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); border-radius: 6px; padding: 6px 10px; font-size: 12px; white-space: nowrap;
  transform: translate(-50%, -110%);
}

/* 상위 목록 */
.lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 768px) { .lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lists { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rank li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 10px; border-radius: 6px; overflow: hidden; }
.rank li::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--data-dim); border-radius: 6px; }
.rank--err li::before { background: var(--crit-bg); }
.rank .rank__name, .rank .rank__num { position: relative; }
.rank .rank__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .rank__num { flex: none; color: var(--text-sub); font-variant-numeric: tabular-nums; font-size: 13px; }
.rank .rank__num b { color: var(--text); font-weight: 500; }
.more { justify-self: start; }

/* 표: 모바일은 행마다 카드(라벨 · 값), 768px 부터 표 */
.table-wrap { min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead { display: none; }
tbody { display: grid; gap: 8px; }
tbody tr { display: grid; gap: 2px; padding: 8px 12px; background: var(--surface-row); border-radius: 6px; }
tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; color: var(--text-sub); font-variant-numeric: tabular-nums; min-width: 0; }
tbody td::before { content: attr(data-label); color: var(--text-dim); font-size: 12px; flex: none; }
tbody td > * { min-width: 0; }
tbody td.key { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
tbody td.key::before { display: none; }
@media (min-width: 768px) {
  .table-wrap { overflow-x: auto; border-radius: 6px; }
  thead { display: table-header-group; }
  tbody { display: table-row-group; }
  tbody tr { display: table-row; padding: 0; }
  table { table-layout: fixed; }
  thead th { background: var(--surface-head); color: var(--text-sub); font: 500 12px/1.4 var(--font); text-align: left; height: 40px; padding: 4px 12px; overflow-wrap: anywhere; }
  thead th:first-child { width: 26%; }
  tbody td { display: table-cell; height: 48px; padding: 6px 12px; border-top: 1px solid var(--divider); overflow-wrap: anywhere; }
  tbody td::before { display: none; }
  thead th.r, td.r { text-align: right; }
}
thead th button { all: unset; cursor: pointer; display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 44px; min-width: 44px; max-width: 100%; overflow-wrap: anywhere; }
thead th.r button { justify-content: flex-end; }
@media (min-width: 1024px) { thead th button { min-height: 36px; } }
thead th button:focus-visible { box-shadow: var(--focus); }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: #262626; }
td .pc-link { all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
td .pc-link:focus-visible { box-shadow: var(--focus); }
.badge { display: inline-flex; align-items: center; min-height: 21px; padding: 0 8px; border-radius: 999px; font: 500 12px/1 var(--font); white-space: nowrap; }
.badge--warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge--crit { background: var(--crit-bg); color: var(--crit-fg); }
.badge--ok { background: var(--up-bg); color: var(--up-fg); }
.c-crit { color: var(--crit-fg) !important; }
.search { width: 100%; }
@media (min-width: 768px) { .search { width: 320px; } }

/* 업데이트 관리 */
.alert--warn { background: var(--warn-bg); color: var(--warn-fg); }
.rel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 1024px) { .rel-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.rel-form { display: grid; gap: 14px; min-width: 0; }
.input--file { padding: 8px 10px; font-size: 14px; line-height: 1.4; min-width: 0; }
.input--file::file-selector-button { margin-right: 10px; min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: #3a3a3a; color: var(--text); font: 500 13px/1 var(--font); cursor: pointer; }
.check { display: flex; align-items: center; gap: 2px; min-height: 44px; cursor: pointer; color: var(--text-sub); min-width: 0; }
.check input {
  /* 보이는 상자는 18px, 누르는 영역은 44px */
  flex: none; width: 44px; height: 44px; margin: 0 0 0 -13px; appearance: none; cursor: pointer; border-radius: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='.75' y='.75' width='16.5' height='16.5' rx='3.5' fill='%23161616' stroke='%23777' stroke-width='1.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.check input:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='4' fill='%23f2f2f2'/%3E%3Cpath d='M4.5 9.2l3 3 6-6.4' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.check span { min-width: 0; }
.upload { display: grid; gap: 6px; }
.upload progress { width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-inner); appearance: none; }
.upload progress::-webkit-progress-bar { background: var(--surface-inner); }
.upload progress::-webkit-progress-value { background: var(--data); }
.upload progress::-moz-progress-bar { background: var(--data); }
.form-ok { color: var(--up-fg); background: var(--up-bg); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.rel-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rel-form__foot > * { min-width: 0; }
.rel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; }
.rel-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; color: var(--text-sub); font-size: 13px; }
.rel-actions a:hover { color: var(--text); }
td.notes { white-space: normal; }
@media (min-width: 768px) {
  #relTable thead th:first-child { width: 14%; }
  #relTable th.c-date { width: 16%; }
  #relTable th.c-size { width: 12%; }
  #relTable th.c-pcs { width: 10%; }
  #relTable th.c-act { width: 24%; }
}
@media (min-width: 1024px) { .rel-actions a { min-height: 36px; } }

/* 빈 · 불러오는 중 · 오류 */
.empty { display: grid; place-items: center; gap: 4px; padding: 28px 12px; text-align: center; color: var(--text-sub); background: var(--surface-inner); border-radius: 6px; }
.empty b { color: var(--text); font-weight: 500; }
.sk { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #303030, #3a3a3a, #303030); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
.sk + .sk { margin-top: 10px; }
@keyframes sk { to { background-position: -200% 0; } }

/* 서랍 */
.drawer { position: fixed; inset: 0; z-index: 30; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.drawer__panel {
  position: absolute; inset: auto 0 0 0; max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-radius: 12px 12px 0 0; padding: 16px var(--page-x) 24px; display: grid; gap: 12px; align-content: start;
  animation: up 0.2s ease-out;
}
@media (min-width: 768px) {
  .drawer__panel { inset: 0 0 0 auto; width: min(640px, 100%); max-height: none; border-radius: 0; animation: side 0.2s ease-out; }
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer__head h2 { font: 500 20px/1.4 var(--font); min-width: 0; overflow-wrap: anywhere; }
.drawer__body { display: grid; gap: 12px; min-width: 0; }
@keyframes up { from { transform: translateY(16px); opacity: 0; } }
@keyframes side { from { transform: translateX(16px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}