/* 대신맨 — 화면 공통.
   색은 baesayo 관리자(admin.css)에서 그대로 가져왔다.
   앰버·브라운·오렌지는 쓰지 않는다. 강조는 파랑, 상태는 초록/빨강. */

:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-tint: #EAF2FE;
  --navy: #0C2E4E;

  --ok: #12A56A;
  --ok-tint: #E4F5EC;
  --warn: #2563EB;
  --warn-tint: #EAF2FE;
  --danger: #DC3B32;
  --danger-tint: #FCEBEA;

  --bg: #EEF1F4;
  --surface: #FFFFFF;
  --surface-2: #F6F8FA;
  --line: #E3E7EB;
  --line-strong: #D3D9DF;

  --ink: #1B2733;
  --ink-2: #3C4956;
  --muted: #697682;
  --subtle: #98A2AD;

  --sbw: 224px;   /* 좌측 내비 너비 */
  --tbh: 56px;    /* 상단 바 높이 */
  --r: 8px;
  --r-sm: 6px;
  --shadow: 0 1px 3px rgba(16, 32, 48, .08);

  --sans: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* 글꼴을 함께 담는다 — PC에 설치돼 있지 않아도, 인터넷이 막혀 있어도 같은 화면이 나온다 */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/static/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-display: swap;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

/* ── 뼈대 ────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sbw) minmax(0, 1fr); min-height: 100vh; }

.nav {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.nav .mark {
  height: var(--tbh);
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;   /* 누르면 첫 화면으로 */
}
.nav .mark:hover b { color: var(--primary-dark); }
.nav .mark b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.nav .mark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }

/* 좌측 항목은 다섯 개를 넘기지 않는다 (금지 사항) */
.nav ul { list-style: none; margin: 0; padding: 10px 8px; display: grid; gap: 2px; }
/* 큰 메뉴는 크게 — 하루 종일 누르는 자리라 눈을 찡그리게 하면 안 된다 */
.nav a {
  display: block; padding: 12px 14px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500;
}
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--primary-tint); color: var(--primary-dark); font-weight: 600; }
.nav .foot {
  margin-top: auto; padding: 12px 18px 14px; border-top: 1px solid var(--line);
  color: var(--subtle); font-size: 11.5px;
  display: grid; gap: 6px;
}
.nav .foot a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.nav .foot a:hover { color: var(--primary-dark); }

.top {
  height: var(--tbh);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
}
.top h1 { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.top .hint { color: var(--muted); font-size: 12.5px; }

main { padding: 22px 20px 40px; }
.wrap { max-width: 1120px; margin: 0 auto; }

/* ── 조각 ────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.card + .card { margin-top: 14px; }
.card h2 { font-size: 14.5px; font-weight: 600; margin: 0 0 10px; }

.muted { color: var(--muted); }
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.pill.ok { background: var(--ok-tint); color: var(--ok); }
.pill.off { background: var(--surface-2); color: var(--muted); }
.pill.bad { background: var(--danger-tint); color: var(--danger); }

.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink-2); }
.kv code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }

.pill.warn { background: var(--warn-tint); color: var(--primary-dark); }

.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.small { font-size: 12.5px; }

.btn {
  display: inline-block; margin-top: 4px;
  padding: 8px 14px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--primary); color: #fff; font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--primary-dark); }
.btn:disabled { background: var(--surface-2); color: var(--subtle); border-color: var(--line); cursor: default; }
.btn.ghost { background: var(--surface); color: var(--primary-dark); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--primary-tint); }
.btn .soon { font-weight: 500; font-size: 11.5px; opacity: .8; }

/* ── 찾기 ────────────────────────────────────────────── */
.col { min-width: 0; }

.find { margin-left: auto; }
.find input {
  width: 230px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2); font: inherit; font-size: 13px; color: var(--ink);
}
.find input:focus { outline: 2px solid var(--primary-tint); border-color: var(--primary); background: var(--surface); }

.ask { display: flex; gap: 8px; margin-bottom: 14px; }
.ask input {
  flex: 1; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow);
  font: inherit; font-size: 15px; color: var(--ink);
}
.ask input:focus { outline: 3px solid var(--primary-tint); border-color: var(--primary); }
.ask button {
  padding: 0 18px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--primary); color: #fff; font: inherit; font-weight: 600; font-size: 13.5px;
  white-space: nowrap; cursor: pointer;
}
.ask button:hover { background: var(--primary-dark); }

.found { padding: 2px 2px 10px; font-size: 13px; }

.ask button.alt { background: var(--surface); color: var(--primary-dark); border-color: var(--line-strong); }
.ask button.alt:hover { background: var(--primary-tint); }
.ask button:disabled { background: var(--surface-2); color: var(--subtle); border-color: var(--line); cursor: default; }

/* ── 기다리는 동안 ───────────────────────────────────── */
.wait {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(238, 241, 244, .82); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.wait[hidden] { display: none; }
.wait-box {
  width: min(460px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(16, 32, 48, .16); padding: 24px 26px 18px;
}
.wait-box { text-align: center; }
.wait-clock { position: relative; width: 132px; height: 132px; margin: 2px auto 14px; }
.wait-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wait-track { fill: none; stroke: var(--primary-tint); stroke-width: 9; }
.wait-fill { fill: none; stroke: var(--primary); stroke-width: 9; stroke-linecap: round; }
.wait-hand { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.wait-pin { fill: var(--ink-2); }
.wait-clock-num {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 26px; font-variant-numeric: tabular-nums;
}
.wait-clock-num b { font-size: 22px; color: var(--ink); line-height: 1; }
.wait-clock-num span { font-size: 12px; color: var(--muted); margin-left: 2px; }
.wait.is-late .wait-fill, .is-late .wait-fill { stroke: var(--primary-dark); }
.wait-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.wait-time { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.wait-steps { text-align: left; }
.wait-steps { margin: 12px 0 8px; padding-left: 20px; font-size: 13px; color: var(--ink-2); }
.wait-steps li + li { margin-top: 3px; }
.wait-steps:empty { display: none; }

/* ── 업무판 (첫 화면) ────────────────────────────────── */
/* 숫자 칸 — 숫자가 곧 그림이다. 값은 글자 색만 쓴다. 강조색을 숫자에 칠하지 않는다 */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.outcome-verdicts .chip { cursor: pointer; }
.kpi {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 13px 16px 12px;
}
a.kpi:hover { border-color: var(--primary); }
a.kpi:hover .kpi-label::after { content: " →"; color: var(--primary); }
.kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi-value {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.kpi-value span { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }

.board { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.board .card + .card { margin-top: 0; }
.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.card-head a { margin-left: auto; text-decoration: none; }

.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li + li { border-top: 1px solid var(--line); }
.todo-channel {
  font-size: 12px; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 7px; text-align: center;
  white-space: nowrap;
}
.todo-list a {
  display: grid; grid-template-columns: 88px 64px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 4px; text-decoration: none; color: inherit; border-radius: var(--r-sm);
}
.todo-list a:hover { background: var(--surface-2); }
.todo-main { display: flex; gap: 8px; min-width: 0; font-size: 13.5px; }
.todo-main b { white-space: nowrap; color: var(--ink); }
.todo-title { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-when { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.todo-foot { margin: 10px 0 0; }
.quiet { padding: 18px 4px 6px; }
.quiet p { margin: 0 0 4px; }

.tidy-top { display: flex; gap: 18px; align-items: center; margin-bottom: 10px; }
.tidy-rate { min-width: 110px; }
.tidy-kv { grid-template-columns: 64px minmax(0, 1fr); flex: 1; }
.tidy-cats td { padding: 4px 8px; font-size: 12.5px; }
.tidy-cats td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); width: auto; }
.tidy-cats td:first-child { width: auto; color: var(--ink-2); }
.tidy-flags {
  list-style: none; margin: 0 0 10px; padding: 9px 12px;
  background: var(--primary-tint); border-radius: var(--r-sm); font-size: 13px;
}
.tidy-flags li + li { margin-top: 4px; }
.tidy-flags a { text-decoration: none; color: var(--primary-dark); }
.tidy-issues { margin-top: 12px; }
.tidy-issues summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary-dark); }
.issue-group { margin-top: 10px; }
.issue-head { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 12px; text-decoration: none; white-space: nowrap;
}
a.chip:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-dark); }
.chip.big { font-size: 12.5px; padding: 5px 12px; }

.lead-note { margin: 0 0 10px; font-size: 13px; }

.compare { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare th, .compare td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.compare thead th { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.compare td:first-child { color: var(--muted); width: 96px; }

/* ── 찾은 것 ─────────────────────────────────────────── */
.hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hit {
  display: block; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); text-decoration: none; color: inherit;
}
.hit:hover { border-color: var(--primary); }
.hit-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.hit-title { font-size: 14.5px; font-weight: 600; color: var(--primary-dark); }
.hit-snip { margin: 6px 0 8px; font-size: 13px; color: var(--ink-2); }
.hit-why { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; }
.why {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  background: var(--primary-tint); color: var(--primary-dark); font-weight: 600;
}
/* 표시는 파랑으로. 노란 형광펜은 앰버 계열이라 쓰지 않는다 */
mark { background: #D6E6FD; color: var(--primary-dark); font-weight: 600; border-radius: 2px; }

.card.next, .card.empty { margin-top: 14px; }
.hits + .card, form + .card, .diff + .card { margin-top: 14px; }
.card.empty h2 { font-size: 15px; }

/* ── 지식 화면 (내비 + 항목 목록 + 본문) ─────────────── */
.split { display: grid; grid-template-columns: 252px minmax(0, 1fr); align-items: start; }
/* width:100%가 없으면 그리드 칸이 내용 너비로 쪼그라든다 (margin auto + max-width의 함정) */
.split > .wrap { width: 100%; padding: 22px 24px 40px; max-width: 1240px; margin: 0 auto; }

.rail {
  position: sticky; top: 0;
  max-height: 100vh; overflow-y: auto;
  padding: 16px 12px 30px;
  background: var(--surface-2); border-right: 1px solid var(--line);
  font-size: 13px;
}
.railcat + .railcat { margin-top: 14px; }
.railcat-head {
  display: flex; gap: 6px; align-items: baseline;
  padding: 0 8px 5px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.railcat-head .muted { margin-left: auto; font-weight: 500; }
.railcat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.railcat a {
  display: block; padding: 6px 8px; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; line-height: 1.45;
}
.railcat a:hover { background: var(--surface); }
.railcat a[aria-current="page"] { background: var(--primary-tint); color: var(--primary-dark); font-weight: 600; }

/* ── 문서 본문 ───────────────────────────────────────── */
.doc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 24px 26px 20px;
}
.doc h1 { font-size: 20px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.02em; line-height: 1.35; }
.doc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; padding-bottom: 4px; }

.sec { padding-top: 16px; }
.sec h2 { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--navy); }
.sec h4 { font-size: 13.5px; font-weight: 600; margin: 14px 0 6px; color: var(--ink); }
.sec p { margin: 0 0 9px; color: var(--ink-2); font-size: 13.5px; }
.sec ul, .sec ol { margin: 0 0 10px; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; }
.sec li { margin-bottom: 4px; }
.sec code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }
.sec a { text-decoration: none; border-bottom: 1px solid var(--primary-tint); }
.sec a:hover { border-bottom-color: var(--primary); }
.sec .dead { color: var(--subtle); text-decoration: line-through; }

.sec blockquote {
  margin: 0 0 10px; padding: 9px 12px;
  background: var(--surface-2); border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2); font-size: 13.5px;
}
.sec blockquote.fix { background: var(--danger-tint); border-left-color: var(--danger); }

.sec-lead { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.sec-lead p { font-size: 15px; color: var(--ink); }

/* 「조심할 것」은 절대 묻히지 않게 한다 (D-22) */
.sec-caution {
  margin-top: 16px; padding: 14px 16px 6px;
  background: var(--danger-tint); border: 1px solid #F3C9C6; border-radius: var(--r);
}
.sec-caution h2 { color: var(--danger); }
.sec-caution li { color: var(--ink); }

/* ── 현황 ────────────────────────────────────────────── */
.problems {
  margin: 0 0 12px; padding: 11px 14px 11px 30px;
  background: var(--danger-tint); border: 1px solid #F3C9C6; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--ink);
}
.problems li + li { margin-top: 4px; }
.problems .fix-link { margin-left: 6px; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.problems .fix-link:hover { text-decoration: underline; }
.allgood { margin: 0 0 12px; font-size: 13.5px; }

/* ── 문서 가져오기 ───────────────────────────────────── */
.picks th, .picks td { vertical-align: middle; }
.picks code { font-family: var(--mono); font-size: 11.5px; }
.picks input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); }

.contra {
  border: 1px solid var(--line); border-left: 3px solid var(--danger);
  border-radius: var(--r-sm); padding: 11px 13px; margin-bottom: 10px;
  background: var(--surface-2); font-size: 13px;
}
.contra-head { font-weight: 700; margin-bottom: 6px; }
.contra-row { color: var(--ink-2); margin-bottom: 3px; }
.contra-row code { font-family: var(--mono); font-size: 11.5px; margin-right: 5px; }
.contra-ask { margin-top: 7px; color: var(--danger); font-weight: 600; }

/* ── 승인 대기 ───────────────────────────────────────── */
.bulk { margin-bottom: 12px; }
.bulk .row + .row { margin-top: 10px; }
.draftrow { cursor: default; }
.draftrow:hover { border-color: var(--line); }
.draftrow input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); }
.intake-name { overflow-wrap: anywhere; min-width: 0; }   /* 긴 주소·zip 안 경로가 휴대폰 폭을 밀지 않게 */
.intake-plain { color: var(--ink-2); }                     /* 따라갈 초안·문의가 없는 줄 — 링크처럼 보이지 않게 */
.draftrow .hit-title { text-decoration: none; }
.draftrow .hit-title:hover { text-decoration: underline; }

.diff {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow-x: auto; background: var(--surface-2);
}
.diff > div { padding: 1px 10px; white-space: pre-wrap; }
.d-add { background: var(--ok-tint); color: #0B6B44; }
.d-del { background: var(--danger-tint); color: #8E241C; text-decoration: line-through; }
.d-head { background: var(--primary-tint); color: var(--primary-dark); font-weight: 600; }
.d-same { color: var(--muted); }

/* ── 접수함 ──────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tabs a {
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.tabs a:hover { border-color: var(--primary); }
.tabs a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

.stack { display: grid; gap: 9px; }
.row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.row > input[type="text"], .row > input[type="tel"] { flex: 1; min-width: 160px; }

textarea, input[type="text"], input[type="tel"], input[type="datetime-local"], input[type="file"], .inbox-find input[type="search"] {
  font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); width: 100%;
}
textarea { resize: vertical; line-height: 1.6; }
textarea:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="datetime-local"]:focus, .inbox-find input[type="search"]:focus { outline: 2px solid var(--primary-tint); border-color: var(--primary); }
input[type="file"] { padding: 7px 9px; background: var(--surface-2); }

.sub-head { font-size: 13px; font-weight: 700; color: var(--muted); margin: 16px 0 7px; }

/* ── 문의 작업 화면 ──────────────────────────────────── */
/* 처리 막대 — 스크롤해도 맨 위에 붙어 있다 */
.actionbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 9px 14px;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(4px);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 4px 14px rgba(16, 32, 48, .07);
}
.ab-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ab-who b { font-size: 16px; }
.ab-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ab-actions form { margin: 0; }
.ab-actions .btn { margin-top: 0; }
.ab-more { position: relative; }
.ab-more summary { list-style: none; cursor: pointer; padding: 8px 12px; }
.ab-more summary::-webkit-details-marker { display: none; }
.ab-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 270px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(16, 32, 48, .14); padding: 6px;
}
.ab-menu form { display: grid; }
.ab-menu button {
  text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: var(--r-sm);
  font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.ab-menu button:hover { background: var(--surface-2); }
.ab-menu p { margin: 6px 10px 4px; }

/* 고객이 보낸 말 — 가장 먼저 눈이 가야 한다 */
.said {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 18px 14px 18px; margin-bottom: 14px;
}
.said-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.said-label { font-size: 12px; font-weight: 700; color: var(--primary-dark); letter-spacing: .02em; }
.said-subject { font-size: 15px; font-weight: 700; color: var(--ink); }
.said-text { white-space: pre-wrap; font-size: 16px; line-height: 1.75; color: var(--ink); }
.said-from { margin-top: 6px; }
.said-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }

/* 메일 받는 규칙 — 메일을 보는 자리에서 클릭 한 번 */
.rule-strip { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong); display: grid; gap: 6px; }
.rule-row, .rule-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.rule-who { color: var(--ink-2); margin-right: 4px; }
.rule-btn {
  font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2);
}
.rule-btn.allow:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-tint); }
.rule-btn.block:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-tint); }
.rule-note { margin: 0; }
.inline-form { display: inline; margin: 0; }
.trend-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--muted); margin-left: auto; }
.trend-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.sw.in, .bar.in { background: #5B8DEF; }
.sw.ai, .bar.ai { background: var(--primary-dark); }
.trend .card-head { flex-wrap: wrap; gap: 4px 12px; }
.trend-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.trend-facts .kpi-value { font-size: 22px; }
.trend-bars { display: flex; gap: 3px; align-items: flex-end; height: 110px; padding-bottom: 18px; border-bottom: 1px solid var(--line, #e5e7eb); }
.trend-day { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.trend-pair { flex: 1; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.trend-pair .bar { flex: 1; max-width: 14px; min-height: 0; border-radius: 3px 3px 0 0; }
.trend-label { position: absolute; bottom: -18px; left: 0; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.trend-day:last-child .trend-label { left: auto; right: 0; }
.trend-table { margin-top: 10px; }
.table-scroll { overflow-x: auto; }
.repick { margin-top: 10px; }
.repick form { display: grid; gap: 6px; margin-top: 6px; }
.repick input[type="text"] { width: 100%; max-width: 280px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; }
.digest-steps { margin: 6px 0 0 18px; padding: 0; }
.digest-table td { vertical-align: top; }
.digest-changes { margin-top: 4px; }
.src-quote { margin: 3px 0 2px; padding: 2px 0 2px 10px; border-left: 3px solid var(--primary-tint); color: var(--ink-2); font-size: 12.5px; }
.code-scroll { overflow-x: auto; max-height: 320px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; font-family: var(--mono); font-size: 12px; white-space: pre; }
.history-list li { overflow-wrap: anywhere; }
.linkish { font: inherit; font-size: 12.5px; background: none; border: 0; padding: 0 4px; color: var(--primary-dark); text-decoration: underline; cursor: pointer; }

.only-listed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.only-listed .btn { margin: 0 0 0 auto; }
.switch { width: 34px; height: 20px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.is-on { background: var(--primary); }
.switch.is-on::after { left: 17px; }
.rules-table td { vertical-align: middle; font-size: 13px; }
.rules-table form { margin: 0; }
.rules-table code { white-space: nowrap; }

/* 조치안 카드 — 제목 줄에 버튼이 붙는다 */
.plan-card { padding: 0; overflow: visible; }
.plan-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.plan-head h2 { margin: 0; font-size: 15.5px; }
.plan-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.plan-head-actions form { margin: 0; }
.plan-head-actions .btn { margin-top: 0; }
.small-btn { padding: 6px 11px; font-size: 12.5px; }
.plan-card .quiet { padding: 22px 20px 18px; }

/* 칸 이름을 왼쪽에, 내용을 오른쪽에 — 목차처럼 훑을 수 있게 */
.plan-grid { display: grid; }
.prow {
  display: grid; grid-template-columns: 158px minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.prow:first-child { border-top: 0; }
.plabel {
  position: sticky; top: 64px; align-self: start;
  margin: 0; padding: 15px 12px 15px 20px;
  font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.45;
}
.plabel small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.pcount {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 3px;
  border-radius: 999px; background: var(--primary-tint); color: var(--primary-dark);
  font-size: 11.5px; font-weight: 700; text-align: center; vertical-align: 1px;
}
.pbody { padding: 14px 20px 14px 4px; min-width: 0; }
.pbody p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.pbody ul, .pbody ol { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.pbody li + li { margin-top: 5px; }
.prow.is-caution { background: var(--danger-tint); }
.prow.is-caution .plabel { color: var(--danger); }
.prow.is-caution .pcount { background: #F8D3D0; color: var(--danger); }
.prow.is-caution li { color: var(--ink); }
/* .draft 의 pre-wrap 이 틀 안의 줄바꿈까지 살려 빈 줄이 생기고 복사에도 섞였다 — 겹쳐서 이긴다 */
.draft.reply-draft { font-size: 14px; line-height: 1.75; white-space: normal; }
.reply-draft .reply-body { white-space: pre-wrap; }
.reply-head:not(:empty) { margin-bottom: 10px; white-space: pre-wrap; }
.reply-foot:not(:empty) { margin-top: 10px; white-space: pre-wrap; }

/* 말투 버튼 — 상대마다 매번 바꾸는 자리라 회신 바로 위에 둔다 */
.tone-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.tone {
  font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2);
}
.tone:hover { border-color: var(--primary); color: var(--primary-dark); }
.tone.is-on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.tone[data-internal="1"] { border-style: dashed; }
.tone[data-internal="1"].is-on { border-style: solid; }
.tone-bar.is-busy .tone { opacity: .55; pointer-events: none; }
.tone-bar.is-busy .tone-status::before { content: "⏱ "; }
.tone-sig-open {
  margin-left: auto; font: inherit; font-size: 12.5px; cursor: pointer;
  background: none; border: 0; color: var(--primary-dark); text-decoration: underline;
}
.sig-panel {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
  padding: 12px; margin-bottom: 10px;
}
.sig-panel[hidden] { display: none; }
.sig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.sig-row label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.copy-btn { margin-top: 8px; }
.copy-btn.is-done, [data-copy].is-done { border-color: var(--ok); color: var(--ok); }
.trace-inline summary { cursor: pointer; font-size: 13px; color: var(--primary-dark); }
.trace-inline table { margin-top: 8px; }
.plan-foot { margin: 0; padding: 10px 20px 14px; border-top: 1px solid var(--line); }
.plan-summary { margin: 0; }

/* ── 조치안 ──────────────────────────────────────────── */
.plan .sec:first-child { padding-top: 0; }
.plan-summary {
  margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink);
  letter-spacing: -.01em;
}
.plan-summary.is-unsure {
  background: var(--primary-tint); border-radius: var(--r-sm);
  padding: 13px 16px; color: var(--navy); font-weight: 600;
}
.steps { margin: 0; padding-left: 22px; display: grid; gap: 9px; font-size: 13.5px; }
.steps li { color: var(--ink-2); }
.steps b { display: block; color: var(--ink); }
.steps .why-line { display: block; color: var(--ink-2); }
.steps .muted { display: block; font-size: 12.5px; }

.draft {
  white-space: pre-wrap;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; font-size: 13.5px; color: var(--ink);
}

.note-line { margin: 8px 2px 0; }

/* 찾는 과정은 기본으로 접어 둔다 — 헤맨 과정을 늘 보여주면 신뢰가 깎인다 */
.trace { margin-top: 14px; }
.trace summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary-dark); }
.trace table { margin-top: 10px; }
.trace td { font-size: 12.5px; color: var(--ink-2); }

.tablewrap { overflow-x: auto; margin: 0 0 12px; }
.sec table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sec th, .sec td { padding: 7px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.sec thead th { background: var(--surface-2); color: var(--ink-2); font-weight: 600; white-space: nowrap; }

.doc-foot { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; }
.doc-foot code { font-family: var(--mono); }

/* 넓은 화면에서 여백을 버리지 않는다. 폭을 늘리는 만큼 글자도 한 단계 키워
   한 줄에 들어가는 글자 수가 읽기 힘들 만큼 늘어나지 않게 한다 */
@media (min-width: 1700px) {
  .wrap { max-width: 1360px; }
  .split { grid-template-columns: 300px minmax(0, 1fr); }
  .split > .wrap { max-width: 1420px; }
  .doc { padding: 28px 32px 22px; }
  .doc h1 { font-size: 22px; }
  .sec p, .sec ul, .sec ol { font-size: 14.5px; }
  .sec table { font-size: 13.5px; }
  .hit-snip, .hit-title { font-size: 14px; }
}

@media (max-width: 1080px) {
  .split { grid-template-columns: 210px minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* minmax(0, …) — 메뉴 한 줄이 칸을 밀어 넓히지 않고, 그 안에서 옆으로 밀리게 */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav { min-width: 0; }
  .kv dd { min-width: 0; overflow-wrap: anywhere; }
  .nav { border-right: none; border-bottom: 1px solid var(--line); }
  .nav ul { grid-auto-flow: column; overflow-x: auto; }
  .nav .foot { display: none; }
  .kv { grid-template-columns: 1fr; }
  .top { height: auto; flex-wrap: wrap; padding: 10px 16px; }
  .find { margin: 0; width: 100%; }
  .find input { width: 100%; }
  .ask { flex-wrap: wrap; }
  .ask button { flex: 1; padding: 10px; }
  .split { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
  .prow { grid-template-columns: 1fr; }
  .plabel { position: static; padding: 12px 16px 0; }
  .pbody { padding: 6px 16px 14px; }
  .actionbar { padding: 9px 12px; }
  .ab-actions { margin-left: 0; }
  .split > .wrap { padding: 16px 14px 30px; }
  .doc { padding: 18px 16px 14px; }
}

/* ── 설정 · 사람 · 폴더 (2026-09-13) ─────────────────────── */
input:not([type]), input[type="password"], input[type="email"], select {
  font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); width: 100%;
}
input:not([type]):focus, input[type="password"]:focus, input[type="email"]:focus, select:focus {
  outline: 2px solid var(--primary-tint); border-color: var(--primary);
}
input:disabled { background: var(--surface-2); color: var(--muted); }

.form-card label, .form-grid label, .form-inline label, .gate-card label {
  display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); font-weight: 600;
}
.form-card { display: grid; gap: 10px; align-content: start; }
.form-card h2 { margin-bottom: 0; }
.form-card .btn { justify-self: start; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 12px; margin: 8px 0 10px; }
.form-grid .wide, .form-inline .wide { grid-column: span 2; flex: 1 1 320px; }
.form-actions { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.form-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 10px 0 6px; }
.form-inline label { min-width: 160px; }
.form-inline label.check { display: flex; align-items: center; gap: 6px; font-weight: 500; min-width: 0; }
.form-inline label.check input { width: 16px; height: 16px; accent-color: var(--primary); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.grid-2 .card + .card { margin-top: 0; }

.found.is-bad { color: var(--danger); }

/* 설정 묶음 — 좌측 내비를 늘리지 않고 화면 안에서 나눈다 */
.set-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.set-tabs a {
  padding: 10px 16px; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px; display: flex; gap: 6px; align-items: center;
}
.set-tabs a:hover { color: var(--primary-dark); }
.set-tabs a[aria-current="page"] { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 700; }
.tab-badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; line-height: 18px; }

.people-table td:first-child, .contacts-table td:first-child, .small-table td:first-child { color: var(--ink); width: auto; }
.people-table tr.is-off td { color: var(--subtle); }
.edit-row > td { background: var(--surface-2); padding: 12px 14px !important; }
.edit-row .form-inline { border-top: 1px dashed var(--line-strong); padding-top: 10px; }
.new-person { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.new-person h3 { font-size: 14px; margin: 0; }
.role-help { margin: 10px 0 0; font-size: 13px; }
.role-help summary { cursor: pointer; color: var(--primary-dark); }
.role-help table { margin-top: 8px; }

.two-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 8px 0; }
.two-kinds > div { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px; }
.two-kinds p { margin: 4px 0 0; }
.folder-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.folder-path { font-size: 13.5px; word-break: break-all; }
.small-table { margin: 8px 0; }
.small-table code { word-break: break-all; }
.estimate { border: 1px solid var(--primary-tint); background: #F7FAFF; border-radius: var(--r-sm); padding: 10px 14px; margin: 6px 0 10px; }
.estimate.is-bad { border-color: var(--danger-tint); background: #FFF8F8; }
.estimate.is-bad > p b { color: var(--danger); }

.meter { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 4px 0 10px; }
.meter span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.meter span.is-over { background: var(--danger); }

/* 고객사 담당자 */
.contacts-card { margin-top: 16px; }
.contacts-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; }
.contacts-head h2 { margin: 0; }
.reveal { font: inherit; font-size: 13px; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; border-bottom: 1px dashed var(--line-strong); }
.reveal.is-open { border-bottom: 0; cursor: text; }
.row-actions { white-space: nowrap; }
.inbox-find { margin-bottom: 10px; }
.inbox-find input[type="search"] { flex: 2; min-width: 180px; }
.inbox-find select { max-width: 100%; }
.row-actions form { display: inline; }
.add-contact { margin-top: 10px; }
.add-contact summary { cursor: pointer; color: var(--primary-dark); font-weight: 600; font-size: 13.5px; }
.ab-contact { font-size: 13.5px; color: var(--ink-2); }

/* 좌측 아래 — 누가 들어와 있나 */
.nav .foot .me { display: grid; grid-template-columns: 1fr auto; gap: 0 6px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.nav .foot .me-name { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; }
.nav .foot > a { padding: 4px 0; }
.nav .foot .me-role { font-size: 11.5px; color: var(--muted); }
.nav .foot .me form { grid-column: 1 / -1; }
.nav .foot .me .linkish { padding: 0; font-size: 12px; color: var(--muted); }

/* 로그인 · 처음 설정 */
.gate-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate { width: 100%; max-width: 420px; }
.gate-mark { display: flex; align-items: center; gap: 8px; justify-content: center; }
.gate-mark .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.gate-mark b { font-size: 22px; letter-spacing: -.02em; }
.gate-tag { text-align: center; margin: 2px 0 16px; font-size: 13px; }
.gate-card { display: grid; gap: 12px; padding: 24px 26px; }
.gate-card h1 { font-size: 19px; margin: 0; }
.gate-card p { margin: 0; }
.gate-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.gate-btn { width: 100%; padding: 11px; font-size: 15px; margin-top: 4px; }
.gate-error { background: var(--danger-tint); color: var(--danger); border-radius: var(--r-sm); padding: 8px 11px; font-size: 13px; }
.gate-note { background: var(--ok-tint); color: var(--ok); border-radius: var(--r-sm); padding: 8px 11px; font-size: 13px; }
.gate-card label.check { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.gate-card label.check input { width: 16px; height: 16px; accent-color: var(--primary); }
.gate-card textarea { width: 100%; box-sizing: border-box; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .gate-two { grid-template-columns: 1fr; } }

/* ── QnA 게시판 연결 ────────────────────────────────── */
.steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; }
.steps li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.steps li b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: 11.5px; }
.steps li.now { border-color: var(--primary); color: var(--primary-dark); font-weight: 600; }
.steps li.now b { background: var(--primary); color: #fff; }
.steps li.done { color: var(--ok); }
.steps li.done b { background: var(--ok-tint); color: var(--ok); }
.method-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.method-card { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--ink); text-decoration: none; background: var(--surface); }
.method-card:hover { border-color: var(--primary); }
.method-card.is-on { border: 2px solid var(--primary); background: #F7FAFF; padding: 11px 13px; }
.mc-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.mc-row { font-size: 13px; line-height: 1.5; }
.mc-row .muted { display: block; }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.chip.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.advanced { margin: 4px 0 10px; }
.advanced summary { cursor: pointer; color: var(--primary-dark); font-weight: 600; font-size: 13.5px; }
.field-help { font-weight: 400; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.req { color: var(--danger); }
.safe-list { margin-top: 12px; padding: 9px 12px; background: var(--surface-2); border-radius: var(--r-sm); }
.form-grid label.check { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.form-grid label.check input { width: 16px; height: 16px; accent-color: var(--primary); }
.preview-list { display: grid; gap: 10px; margin-top: 8px; }
.preview-post { border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--r-sm); padding: 10px 13px; }
.preview-post header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.preview-post p { margin: 3px 0; }
.preview-body { white-space: pre-wrap; font-size: 13px; background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 4px; }
.detect-form { margin-top: 0; }
.form-grid { align-items: start; }
.form-grid label.qf { align-content: start; }
.qf-label { display: block; min-height: 19px; }

/* ── 사용 · 비용 ──────────────────────────────────── */
.usage-filter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 0 0 8px; }
.usage-filter label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 160px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.seg a { padding: 8px 13px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; border-right: 1px solid var(--line); }
.seg a:last-child { border-right: 0; }
.seg a[aria-current="page"] { background: var(--primary); color: #fff; font-weight: 600; }
.usage-notice { margin: 0 0 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.legend i, .swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend b { font-weight: 600; color: var(--ink); margin-left: 3px; }
.chart-wrap { overflow-x: auto; }
.chart { width: 100%; min-width: 560px; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--line-strong); stroke-width: 1; }
.chart .axis { font-size: 11px; fill: #898781; font-family: var(--sans); }
.chart .capline { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .hit { fill: transparent; }
.chart .daybar:hover .hit { fill: rgba(37, 99, 235, .06); }
.table-wrap { overflow-x: auto; }
.usage-table td:first-child { color: var(--ink); width: auto; }
.usage-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-table tr.is-auto td { background: #F7FAFF; }
.usage-table tr.is-event td { color: var(--muted); }
.usage-table tr.is-error td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.flag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flag-list li { border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13.5px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart .capnote { fill: var(--danger); font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; }

/* 관리자 띠 — 확인할 것이 있을 때만 */
.problem-bar { display: flex; gap: 10px; align-items: center; padding: 8px 20px; background: var(--danger-tint); color: var(--danger); text-decoration: none; font-size: 13.5px; border-bottom: 1px solid #F3C9C6; }
.problem-bar span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.problem-bar:hover b { text-decoration: underline; }

/* 백과사전 고치기 */
.editor-meta { margin-bottom: 10px; }
.editor-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.editor-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.pane-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.editor-text { font-family: var(--mono); font-size: 13px; line-height: 1.65; min-height: 560px; }
.editor-preview { max-height: 620px; overflow: auto; padding: 0 4px; }
.editor-actions { margin-top: 10px; }
.verify-form { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.doc-actions { display: flex; gap: 6px; justify-content: flex-end; float: right; }
.doc-actions form { margin: 0; }
@media (max-width: 900px) { .editor-panes { grid-template-columns: 1fr; } .doc-actions { float: none; } }
.editor-text { font-family: var(--sans); font-size: 14px; letter-spacing: 0; tab-size: 2; }
.problem-bar.is-soft { background: var(--primary-tint); color: var(--primary-dark); border-bottom-color: #CFE0FB; }
.first-help a { display: flex; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.first-help a:hover b { text-decoration: underline; }
.first-help form { margin-left: auto; }

/* 휴대폰 폭 — 위쪽 띠는 자르지 않고 접는다. 아래쪽 「내 정보 · 로그아웃 · 따라 하기」는 숨기지 않고 한 줄로 */
@media (max-width: 760px) {
  .nav a { white-space: nowrap; padding: 10px 12px; font-size: 15px; }
  .nav .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 16px; font-size: 13px; }
  .nav .foot > span { display: none; }
  .nav .foot .me { display: flex; gap: 8px; align-items: baseline; padding: 0; margin: 0; border: none; }
  .nav .foot .me-role { display: none; }
  .nav .foot .me form { grid-column: auto; }
  .nav .foot a { font-size: 13px; }
  .nav .foot > a { padding: 0; }
  .problem-bar { flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 16px; }
  .problem-bar span { white-space: normal; }
  .first-help a { flex-wrap: wrap; gap: 2px 8px; }
}
@media (max-width: 420px) {
  .nav ul { padding: 6px 4px; gap: 0; }
  .nav a { padding: 9px 8px; font-size: 14px; }
}

/* 따라 하기 */
.help .card + .card { margin-top: 14px; }
.help-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.help-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 4px 0 10px; }
.help-flow > div { border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 3px; align-content: start; }
.help-flow .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; }
.help-flow b { font-size: 14px; }
.help-flow span:not(.n) { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.help-table td:first-child { color: var(--ink); font-weight: 600; width: 190px; white-space: nowrap; }
@media (max-width: 700px) { .help-table td:first-child { white-space: normal; width: auto; } }

/* 뒤에서 도는 일 */
.task-notes { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 3px; color: var(--ink-2); }
.task-notes li:last-child { font-weight: 600; color: var(--ink); }

/* 문의 첨부에서 읽은 것 */
.said-digest { margin-top: 8px; }
.said-digest summary { cursor: pointer; }
.digest-piece { margin-top: 8px; }
.digest-text { margin: 4px 0 0; padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-sm); font-size: 12.5px;
  white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; }

/* 편집기 서식 버튼 · 자동 저장 */
.md-tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.md-tools button { font: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.md-tools button:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-tint); }
.autosave-restore { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--primary-tint); border-radius: var(--r-sm); padding: 7px 10px; margin: 0 0 6px; font-size: 13px; }
.autosave-restore .btn { margin-top: 0; }

/* ── 못 답한 질문 ─────────────────────────────────── */
.open-q { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.open-q li { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 13px; display: grid; gap: 4px; }
.open-q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.open-q p { margin: 0; overflow-wrap: anywhere; }
.query-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.query-list code { white-space: normal; overflow-wrap: anywhere; }
.expiring { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.expiring h3 { margin: 0 0 6px; font-weight: 600; }
.expiring li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hook-paths { max-height: 220px; overflow: auto; white-space: pre; background: var(--surface-2); padding: 8px; border-radius: var(--r-sm); font-family: var(--mono); font-size: 11.5px; }

/* ── 설정 › 연결 묶음 ─────────────────────────────── */
.connect-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.connect-nav .muted { margin-left: 6px; font-weight: 600; }
.group-head { font-size: 15px; font-weight: 700; margin: 22px 2px 8px; color: var(--ink); }
.group-head .muted { font-weight: 400; }
.table-group th { background: var(--surface-2); text-align: left; font-size: 12.5px; font-weight: 700; padding: 6px 10px; }
.key-guide { margin-top: 10px; }
.key-guide ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.key-guide summary { cursor: pointer; }
.contra-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.contra-pick input[name=note] { flex: 1; min-width: 160px; }
.contra-target { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; width: 100%; }
.contra-target select { max-width: 100%; min-width: 0; }
.conn-table th, .conn-group th { text-align: left; }
.conn-group th { background: var(--surface-2); font-size: 12px; color: var(--muted); font-weight: 600; }
.unverified { background: var(--danger-tint); color: var(--danger); border-radius: 3px; padding: 0 3px; font-weight: 600; }

/* 메뉴 옆 건수 — 새 문의 · 승인 대기 */
.nav-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px;
  background: var(--primary-tint); color: var(--primary); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }

/* 승인 대기 위 활동 띠 — 좌측 활동 피드 대신 (레일 양자택일: 좌측엔 목록 하나) */
.grow-strip { margin-bottom: 12px; }
.grow-strip summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.grow-strip summary::-webkit-details-marker { display: none; }
.grow-strip .grow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #2F8560); display: inline-block; }
.grow-strip ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }

/* 목차에 있지만 아직 본문이 없는 주제 — 회색 */
.railcat.empty-topics li a { color: var(--muted); }
.railcat.empty-topics li a::before { content: "○ "; }


/* AI 고르기 — 조치안 AI · 가벼운 일 AI */
.ai-choice fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px 12px; margin: 0; }
.ai-choice .price { white-space: nowrap; }
.ai-choice .price input { width: 5.5em; display: inline-block; }
.ai-table td { vertical-align: top; }