/* 도담이 관리자 — 대시보드 규칙(무채색 틀 · 색은 데이터에만 · 타이트한 간격). 모바일 먼저(min-width 만), 모바일 터치 44 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
h1, h2, p, ul, ol, dl, dd, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid #b9adff; outline-offset: 2px; border-radius: 4px; }
.adm {
  --a-page: #0f0f0f; --a-card: #1f1f1f; --a-inner: #161616; --a-row: #171717; --a-head: #000; --a-sel: #323232; --a-stroke: #444; --a-div: #2b2b2b;
  --a-text: #fff; --a-sub: #b3b3b3; --a-mute: #8a8a8a;
  --a-up-bg: #10342d; --a-up-fg: #40c4aa; --a-warn-bg: #341500; --a-warn-fg: #ffddc7; --a-info-bg: #2b2b2b; --a-info-fg: #d0d0d0;
  --a-bar: #9c8cff; --a-bar-2: #40c4aa; --a-bar-bg: #2b2b2b;
  --a-pad: 16px; --a-gap: 12px; --a-r: 8px; --a-btn: 44px;
  margin: 0; background: var(--a-page); color: var(--a-text); font-family: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  font-size: 14px; line-height: 1.45; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
}
.adm .ico { display: block; flex: none; }
.num { font-variant-numeric: tabular-nums; }
.wrap-any { overflow-wrap: anywhere; word-break: break-all; }
.adm-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* 메뉴 — 모바일은 위쪽 줄, 1024 부터 왼쪽 */
.adm-side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-gap); padding: var(--a-gap) var(--a-pad); background: var(--a-head); }
.adm-brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--a-btn); }
.adm-brand img { display: block; border-radius: 8px; }
.adm-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.adm-brand b { font-size: 16px; font-weight: 600; }
.adm-brand small { color: var(--a-mute); font-size: 12px; font-weight: 500; }
.adm-nav { order: 3; display: flex; flex-wrap: wrap; gap: 2px; width: 100%; }
.adm-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--a-btn); min-width: 0; padding: 0 12px; border-radius: var(--a-r); color: var(--a-sub); font-size: 14px; line-height: 1.45; }
.adm-nav a:hover, .adm-nav a:focus-visible { color: var(--a-text); background: var(--a-sel); }
.adm-nav a[aria-current] { color: var(--a-text); background: var(--a-sel); font-weight: 600; }
.adm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--a-warn-bg); color: var(--a-warn-fg); font-style: normal; font-size: 12px; line-height: 1; font-weight: 500; }
.adm-out { margin-left: auto; }
.adm-main { display: flex; flex-direction: column; gap: var(--a-gap); flex: 1 1 auto; min-width: 0; padding: var(--a-pad); }

/* 버튼 — 무채색 pill, 텍스트가 주인공 */
.adm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--a-btn); padding: 0 16px; border: 0; border-radius: 999px; background: #333; color: var(--a-text); font: inherit; font-size: 14px; line-height: 1.45; font-weight: 500; cursor: pointer; }
.adm-btn:hover, .adm-btn:focus-visible { background: #3d3d3d; }
.adm-btn-pri { background: #e8e8e8; color: #111; }
.adm-btn-pri:hover, .adm-btn-pri:focus-visible { background: #fff; }

/* 알림 */
.adm-flash { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--a-r); background: var(--a-up-bg); color: var(--a-up-fg); font-size: 14px; line-height: 1.45; }
.adm-flash span { min-width: 0; }
.adm-flash.is-err { background: var(--a-warn-bg); color: var(--a-warn-fg); }
.adm-warn { display: flex; align-items: flex-start; gap: var(--a-gap); padding: var(--a-pad); border-radius: var(--a-r); background: var(--a-warn-bg); color: var(--a-warn-fg); }
.adm-warn div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-warn b { font-size: 15px; line-height: 1.45; font-weight: 600; }
.adm-warn p { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }

/* 머리말 */
.adm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--a-gap); padding: 4px 0; }
.adm-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-head h1 { font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -.025em; }
.adm-head p { color: var(--a-sub); font-size: 14px; line-height: 1.45; }

/* 카드 */
.card { padding: var(--a-pad); border-radius: var(--a-r); background: var(--a-card); min-width: 0; }
.card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--a-gap); margin-bottom: var(--a-gap); }
.card-h h2 { min-width: 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.45; font-weight: 600; letter-spacing: -.02em; }
.card-sub { color: var(--a-mute); font-size: 12px; line-height: 1.45; font-weight: 500; }
.adm-more { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: var(--a-btn); min-width: 44px; color: var(--a-sub); font-size: 13px; line-height: 1.45; }
.adm-more:hover, .adm-more:focus-visible { color: var(--a-text); }
.adm-empty { color: var(--a-mute); font-size: 14px; line-height: 1.6; }
.adm-empty-card { display: flex; flex-direction: column; gap: 8px; }
.adm-empty-card h2 { font-size: 16px; line-height: 1.45; font-weight: 600; }
.adm-empty-card p { color: var(--a-sub); line-height: 1.6; }
.adm-empty-card a { color: var(--a-text); text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; }
.code { padding: 12px; border-radius: 6px; background: var(--a-inner); color: var(--a-sub); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.hint { margin-top: 6px; color: var(--a-mute); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.split { height: 1px; margin: var(--a-gap) 0; background: var(--a-div); }

/* KPI — 화면마다 첫 칸만 크게 */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-gap); }
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi-link:hover, .kpi-link:focus-visible { background: #262626; }
.kpi-l { overflow-wrap: anywhere; color: var(--a-sub); font-size: 13px; line-height: 1.45; }
.kpi-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.kpi-v b { font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi-v b.kpi-s { font-size: 18px; }
.kpi-v span { color: var(--a-sub); font-size: 14px; line-height: 1.45; }
.kpi-main .kpi-v b { font-size: 32px; }
.delta { display: inline-flex; align-items: center; min-height: 21px; padding: 2px 8px; border-radius: 999px; background: #2b2b2b; color: var(--a-sub); font-style: normal; font-size: 12px; line-height: 1.3; font-weight: 500; }
.delta.up { background: var(--a-up-bg); color: var(--a-up-fg); }
.delta.warn { background: var(--a-warn-bg); color: var(--a-warn-fg); }

/* 상태 칩 */
.st { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap; flex: none; }
.st-pass { background: var(--a-up-bg); color: var(--a-up-fg); }
.st-warn { background: var(--a-warn-bg); color: var(--a-warn-fg); }
.st-info { background: var(--a-info-bg); color: var(--a-info-fg); }

/* 카드 묶음 */
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-gap); }

/* 일별 막대 */
.bars { display: block; width: 100%; height: 140px; background: var(--a-inner); border-radius: 6px; }
.bars rect { fill: #4a4a4a; }
.bars rect.s0 { fill: #5d5683; }
.bars rect.s1 { fill: var(--a-bar-2); }
.bars rect.is-today { fill: var(--a-bar); }
.bars rect.s1.is-today { fill: #7fe0cb; }
.bars-x { display: flex; justify-content: space-between; margin-top: 6px; color: var(--a-mute); font-size: 12px; line-height: 1.45; }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: block; width: 10px; height: 10px; border-radius: 2px; }
.legend i.lg1 { margin-left: 6px; }
.lg0 { background: #5d5683; } .lg1 { background: var(--a-bar-2); }

/* 가로 막대 */
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbars li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 48px; align-items: center; gap: var(--a-gap); min-height: 28px; }
.hb-l { min-width: 0; color: var(--a-sub); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.hb-track { display: block; width: 100%; height: 8px; }
.hb-bg { fill: var(--a-bar-bg); }
.hb-fill { fill: var(--a-bar); }
.hb-v { justify-self: end; font-size: 14px; line-height: 1.45; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 이어진 비율 */
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px var(--a-gap); }
.fu-l { min-width: 0; color: var(--a-sub); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.fu-bar { grid-column: 1 / -1; grid-row: 2; }
.funnel b { font-size: 14px; line-height: 1.45; font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel small { min-width: 44px; color: var(--a-mute); font-size: 12px; line-height: 1.45; text-align: right; font-variant-numeric: tabular-nums; }

/* 정의 목록 */
.ev { display: flex; flex-direction: column; }
.ev div { display: flex; align-items: center; justify-content: space-between; gap: var(--a-gap); min-height: 40px; border-bottom: 1px solid var(--a-div); }
.ev div:last-child { border-bottom: 0; }
.ev dt { min-width: 0; color: var(--a-sub); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ev dd { min-width: 0; font-size: 14px; line-height: 1.45; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mini { display: flex; flex-direction: column; }
.mini li { display: flex; align-items: center; gap: var(--a-gap); min-height: 52px; border-bottom: 1px solid var(--a-div); }
.mini li:last-child { border-bottom: 0; }
.mini-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mini-t b { font-size: 14px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.mini-t small { color: var(--a-mute); font-size: 12px; line-height: 1.45; }

/* 표 — 모바일은 카드, 768 부터 표 */
.tbl-wrap { width: 100%; }
.tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; line-height: 1.45; color: var(--a-sub); }
.tbl thead { display: none; }
.tbl b { color: var(--a-text); font-weight: 600; }
.tbl.as-cards tr { display: flex; flex-direction: column; gap: 4px; padding: var(--a-gap); margin-bottom: 8px; border-radius: 6px; background: var(--a-row); }
.tbl.as-cards td { display: flex; justify-content: space-between; align-items: center; gap: var(--a-gap); min-width: 0; min-height: 28px; overflow-wrap: anywhere; }
.tbl.as-cards td::before { content: attr(data-l); flex: none; color: var(--a-mute); font-size: 12px; line-height: 1.45; font-weight: 500; }

/* 입력 */
.field { display: flex; flex-direction: column; min-width: 0; }
.field-label { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; min-height: var(--a-btn); color: var(--a-sub); font-size: 12px; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
.field-label small { color: var(--a-mute); font-size: 12px; font-weight: 400; }
.inp { display: block; width: 100%; min-width: 0; min-height: var(--a-btn); padding: 8px 12px; border: 1px solid var(--a-stroke); border-radius: var(--a-r); background: var(--a-inner); color: var(--a-text); font: inherit; font-size: 14px; line-height: 1.45; }
.inp:focus { outline: none; border-color: #8a8a8a; }
textarea.inp { resize: vertical; }
input[type="file"].inp { padding: 10px 12px; }
.check { position: relative; display: flex; align-items: center; min-height: var(--a-btn); padding-left: 30px; color: var(--a-sub); font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check span::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1px solid var(--a-stroke); border-radius: 4px; background: var(--a-inner); }
.check input:checked + span::before { background: #e8e8e8; border-color: #e8e8e8; box-shadow: inset 0 0 0 3px var(--a-inner); }
.check input:focus-visible + span::before { outline: 2px solid #b9adff; outline-offset: 2px; }

/* 탭 */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--a-btn); padding: 0 14px; border-radius: 999px; background: var(--a-card); color: var(--a-sub); font-size: 14px; line-height: 1.45; }
.tabs a small { color: var(--a-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.tabs a:hover, .tabs a:focus-visible { color: var(--a-text); }
.tabs a[aria-current] { background: var(--a-sel); color: var(--a-text); font-weight: 600; }
.tabs-sub a { background: transparent; }

/* 배포 버전 */
.rel-adm { display: flex; flex-direction: column; gap: var(--a-gap); }
.ra { display: flex; flex-direction: column; gap: 10px; padding: var(--a-gap); border-radius: 6px; background: var(--a-inner); }
.ra.is-hidden { opacity: .6; }
.ra-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ra-h b { font-size: 16px; line-height: 1.45; font-weight: 600; }
.ra-m { width: 100%; color: var(--a-mute); font-size: 13px; line-height: 1.45; }
.ra-sha { display: flex; flex-direction: column; gap: 2px; }
.ra-sha span { color: var(--a-mute); font-size: 12px; line-height: 1.45; }
.ra-sha code { color: var(--a-sub); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; }
.ra-notes { display: flex; flex-direction: column; }
.ra-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rel-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-gap); }
.rel-form > .adm-btn { justify-self: start; }

/* 문의함 */
.inq-list { display: flex; flex-direction: column; gap: var(--a-gap); }
.inq { display: flex; flex-direction: column; gap: var(--a-gap); }
.inq header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.inq header h2 { width: 100%; font-size: 16px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.inq header time { color: var(--a-mute); font-size: 12px; line-height: 1.45; }
.kind { color: var(--a-sub); font-size: 13px; line-height: 1.45; }
.kv { display: flex; flex-direction: column; }
.kv div { display: flex; align-items: center; gap: var(--a-gap); min-height: 36px; border-bottom: 1px solid var(--a-div); }
.kv dt { flex: none; width: 64px; color: var(--a-mute); font-size: 12px; line-height: 1.45; }
.kv dd { min-width: 0; font-size: 14px; line-height: 1.45; }
.kv a { display: inline-flex; align-items: center; min-height: var(--a-btn); text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; }
.inq-msg { padding: 12px; border-radius: 6px; background: var(--a-inner); color: var(--a-sub); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.inq-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px var(--a-gap); align-items: center; }
.inq-form .adm-btn { justify-self: start; margin-top: 8px; }
.inq-form .field-label { min-width: 44px; }

/* 로그인 */
.adm-login-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a-gap); min-height: 100vh; padding: var(--a-pad); }
.adm-login-wrap > .adm-flash { width: 100%; max-width: 360px; }
.adm-login { display: flex; flex-direction: column; gap: var(--a-gap); width: 100%; max-width: 360px; padding: 24px; border-radius: var(--a-r); background: var(--a-card); }
.adm-login h1 { font-size: 20px; line-height: 1.4; font-weight: 500; }

@media (min-width: 640px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rel-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-form .field-wide, .rel-form .check { grid-column: 1 / -1; }
  .inq-form { grid-template-columns: auto minmax(0, 160px) auto minmax(0, 1fr) auto; }
  .inq-form .adm-btn { margin-top: 0; }
  .inq header h2 { width: auto; flex: 1 1 auto; min-width: 0; }
  .ra-m { width: auto; margin-left: auto; }
}
@media (min-width: 768px) {
  .adm-main { padding: 24px; }
  .adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2, .span-3 { grid-column: 1 / -1; }
  .tbl thead { display: table-header-group; }
  .tbl th { height: 40px; padding: 0 12px; background: var(--a-head); color: var(--a-sub); font-size: 12px; line-height: 1.45; font-weight: 500; text-align: left; overflow-wrap: anywhere; }
  .tbl th:first-child { border-radius: 6px 0 0 6px; } .tbl th:last-child { border-radius: 0 6px 6px 0; }
  .tbl.as-cards tr { display: table-row; padding: 0; margin: 0; border-radius: 0; background: none; }
  .tbl.as-cards td { display: table-cell; height: 55px; padding: 0 12px; border-bottom: 1px solid var(--a-div); vertical-align: middle; }
  .tbl.as-cards td::before { content: none; }
}
@media (min-width: 1024px) {
  .adm { --a-btn: 36px; }
  .adm-shell { flex-direction: row; background: linear-gradient(90deg, var(--a-head) 212px, transparent 212px); }
  .adm-side { flex-direction: column; flex-wrap: nowrap; align-items: stretch; flex: none; width: 212px; height: 100vh; padding: 20px 16px; position: sticky; top: 0; }
  .adm-brand { padding: 0 8px 12px; }
  .adm-nav { order: 0; flex-direction: column; flex-wrap: nowrap; }
  .adm-nav a { min-height: 44px; padding: 0 16px; }
  .adm-out { margin: auto 0 0; }
  .adm-out .adm-btn { width: 100%; }
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .adm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: 1 / -1; }
}