/* G-WATCH 대시보드 스타일 — UI 개편 1단계(디자인 토큰 + 사이드바 셸 + 공통 컴포넌트).
   명세: _workspace/03_ui_revamp_spec.md. 단일 CSS, 빌드 도구·프레임워크·CDN 없음(폰트도 로컬).
   클래스는 src/web/views.py(htpy)가 부여한다. 색은 전부 아래 토큰을 쓴다(하드코딩 금지).
   테마: <html data-theme="dark|light"> — 기본 어두운 화면, theme.js가 저장값을 반영. */

/* ── 폰트: Paperlogy (SIL Open Font License) ─────────────────────────────── */
@font-face {
  font-family: "Paperlogy";
  src: url("fonts/Paperlogy-4Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("fonts/Paperlogy-5Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("fonts/Paperlogy-6SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("fonts/Paperlogy-7Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("fonts/Paperlogy-8ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ── 디자인 토큰 ─────────────────────────────────────────────────────────
   기존 변수명(--bg --surface --fg --muted --border --accent --tier-* --warn --danger --ok …)은
   유지하고 값만 재정의. *-fg = 배지·글자용(배경 대비 4.5:1 이상), *-solid = 막대·점·채움용. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --font: "Paperlogy", system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "D2Coding", monospace;

  --bg: #0a0c10;
  --surface: #11141a;
  --surface-2: #171b23;          /* 카드 내부 구획·표 헤더·입력 */
  --surface-3: #1e232d;          /* hover */
  --border: #222834;
  --border-strong: #2f3644;

  --fg: #e7e9ee;
  --fg-2: #b6bccb;
  --muted: #828a9c;

  --accent: #7c7cff;             /* 인디고-바이올렛 */
  --accent-2: #22d3ee;           /* 시안 */
  --accent-fg: #ffffff;
  --accent-text: #a3a3ff;        /* 어두운 배경 위 강조 글자 */
  --accent-solid: #5d5df2;       /* 채움 버튼(흰 글자 대비 4.87:1) */
  --accent-solid-hover: #6060f4; /* 호버 시 밝게 — 흰 글자 대비 4.69:1(4.5 이상 유지) */
  --accent-solid-hover-border: #7c7cff;   /* 호버 테두리는 더 밝게(밝아지는 느낌은 테두리로) */
  --accent-soft: rgba(124, 124, 255, .14);
  --accent-soft-2: rgba(124, 124, 255, .22);
  --ring: rgba(124, 124, 255, .45);       /* 은은한 후광용(포커스 표시 자체는 --focus) */
  --focus: #a3a3ff;              /* 키보드 포커스 테두리 — 모든 배경 대비 6.9:1 이상 */
  /* AI 요소에만 절제해서. accent → accent-2(테마마다 각자 값으로 계산됨). */
  --ai-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --highlight-inset: rgba(255, 255, 255, .14);   /* 채움 요소 윗면 하이라이트 */

  /* 입력칸 테두리 — 카드 배경 대비 3:1 이상(입력칸 경계가 보이게). 카드 구분선은 --border-strong. */
  --input-border: #646c7d;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828a9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --row-hover: var(--surface-3);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-pop: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02);

  /* 티어 색(DESIGN §5.9) */
  --tier-clear: #ff5d6c;   --tier-clear-bg: rgba(255, 93, 108, .13);   --tier-clear-fg: #ff7883;
  --tier-suspect: #f5b041; --tier-suspect-bg: rgba(245, 176, 65, .13); --tier-suspect-fg: #f5b041;
  --tier-normal: #8b93a7;  --tier-normal-bg: rgba(139, 147, 167, .14); --tier-normal-fg: #a6adbe;

  /* 민원(스팸 티어와 독립 축) — 파란 계열 */
  --minwon: #60a5fa;
  --minwon-bg: rgba(96, 165, 250, .14);

  --ok: #34d399;      --ok-bg: rgba(52, 211, 153, .13);
  --warn: #f5b041;    --warn-bg: rgba(245, 176, 65, .13);    --warn-solid: #f5b041;
  --danger: #ff6b78;  --danger-bg: rgba(255, 93, 108, .13);  --danger-solid: #ff5d6c;
  --on-danger-solid: #0a0c10;   /* 진한 빨강 채움 위 글자(실패 배지) — 6:1 이상 */

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --sidebar-w: 248px;

  --scrollbar: #2a303c;
  --scrollbar-hover: #3a4252;
  --backdrop: rgba(4, 5, 9, .62);
  --code-bg: #0b0e14;
  --code-fg: #c9d1e3;
  --glow: rgba(124, 124, 255, .12);
  --glow-2: rgba(34, 211, 238, .06);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f2f4f8;
  --surface-3: #e9edf4;
  --border: #e3e7ef;
  --border-strong: #cfd6e2;

  --fg: #141821;
  --fg-2: #3d4556;
  --muted: #5f6779;              /* 작은 글씨도 hover 행(surface-3)까지 대비 4.5:1 이상(4.83) */

  --accent: #5b5bf0;
  --accent-2: #0891b2;
  --accent-fg: #ffffff;
  --accent-text: #4646d8;
  --accent-solid: #5b5bf0;
  /* 밝은 화면은 채움색을 더 밝게 하면 흰 글자 대비가 4.5 아래로 떨어져 호버 때 진하게 한다(6.19:1). */
  --accent-solid-hover: #4a4ae4;
  --accent-solid-hover-border: #4a4ae4;
  --accent-soft: rgba(91, 91, 240, .12);
  --accent-soft-2: rgba(91, 91, 240, .18);
  --ring: rgba(91, 91, 240, .35);
  --focus: var(--accent);        /* 흰 바탕 5.0, bg 4.67, surface-3 4.26:1 */

  --input-border: #7f889a;       /* 흰 바탕 3.56, surface-2 3.24:1 */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6779' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .08);
  --shadow-pop: 0 24px 56px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .08);

  /* 글자색(*-fg, warn/danger/ok/minwon)은 배지 배경·hover 행 위에서도 4.5:1 이상이 되도록
     티어 기본색보다 진하게 잡았다. 배경 알파는 명세(12~14%)에 맞춤. */
  --tier-clear: #dc2f45;   --tier-clear-bg: rgba(220, 47, 69, .12);   --tier-clear-fg: #b4192f;
  --tier-suspect: #c27c0e; --tier-suspect-bg: rgba(194, 124, 14, .13); --tier-suspect-fg: #8a5600;
  --tier-normal: #6b7385;  --tier-normal-bg: rgba(107, 115, 133, .12); --tier-normal-fg: #4f576a;

  --minwon: #1d55c4;
  --minwon-bg: rgba(29, 85, 196, .12);

  --ok: #086b48;      --ok-bg: rgba(16, 150, 100, .12);
  --warn: #8a5600;    --warn-bg: rgba(194, 124, 14, .13);   --warn-solid: #c27c0e;
  --danger: #b91c32;  --danger-bg: rgba(220, 47, 69, .12);  --danger-solid: #dc2f45;
  --on-danger-solid: #ffffff;   /* 진한 빨강 채움 위 글자(실패 배지) — 4.5:1 이상 */

  --scrollbar: #cdd3de;
  --scrollbar-hover: #b4bccb;
  --backdrop: rgba(15, 20, 30, .38);
  --code-bg: #f4f6fa;
  --code-fg: #1d2433;
  --glow: rgba(91, 91, 240, .10);
  --glow-2: rgba(8, 145, 178, .07);
}

/* ── 기본 ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* :where()로 명시도 0 — 아래 입력칸 규칙(글자 크기·행간)이 이 초기화에 덮이지 않게. */
:where(button, input, select, textarea) { font: inherit; color: inherit; }

a { color: var(--accent-text); text-decoration: none; transition: color .14s ease; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { color: var(--fg); }
h1 { font-size: 24px; font-weight: 800; line-height: 1.25; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 20px; letter-spacing: -.02em; }
h3 { font-size: 13px; font-weight: 600; line-height: 1.4; margin: 0 0 12px; color: var(--fg-2); }
p { margin: 0 0 12px; }
h2 + p.muted { margin-top: -12px; margin-bottom: 18px; }

::selection { background: var(--accent-soft-2); color: var(--fg); }

/* 키보드 포커스 — 반투명 링 대신 단색 --focus(모든 배경 대비 3:1 이상). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 본문 바로가기 — 평소엔 화면 밖, 키보드로 포커스하면 왼쪽 위에 나타난다. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-solid); color: var(--accent-fg);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-pop);
  transform: translateY(calc(-100% - 16px));
  transition: transform .14s ease;
}
.skip-link:focus, .skip-link:focus-visible { transform: none; text-decoration: none; }
main.container:focus { outline: none; }    /* 바로가기 대상(tabindex=-1) — 테두리 표시 안 함 */

svg.icon { flex: none; display: inline-block; vertical-align: middle; width: 18px; height: 18px; }

.muted { color: var(--muted); }
p.muted { font-size: 13px; }

/* 스크롤바 — 어두운 화면에서 얇고 어둡게 */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar);
  border: 2px solid transparent; background-clip: padding-box; border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-hover); }

/* ── 앱 셸: 사이드바(header.topbar) + 본문(main.container) ─────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* header.topbar = 사이드바 셸. 넓은 화면에선 좌측 고정 열, 좁은 화면에선 상단 바 + drawer. */
.topbar {
  grid-column: 1;
  position: sticky; top: 0;
  align-self: start;
  height: 100vh; height: 100dvh;
  z-index: 30;
}
.mobilebar, .nav-backdrop, .nav-close { display: none; }

.sidebar {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 18px 16px 16px;
}

.brand { min-width: 0; }
.brand a { display: flex; align-items: center; gap: 11px; color: var(--fg); min-width: 0; }
.brand a:hover { text-decoration: none; }
.brand-mark {
  flex: none; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--ai-gradient); color: var(--accent-fg);
  box-shadow: inset 0 0 0 1px var(--highlight-inset), 0 6px 18px -8px var(--accent);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-name { font-size: 16px; font-weight: 800; letter-spacing: .02em; color: var(--fg); white-space: nowrap; }
.brand-sub {
  margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mainnav {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: 6px 12px 16px;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-label {
  padding: 0 10px 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--muted);
}
.nav-link {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-2); font-size: 13.5px; font-weight: 500;
  transition: background-color .14s ease, color .14s ease;
}
.nav-link .icon { width: 18px; height: 18px; color: var(--muted); transition: color .14s ease; }
.nav-link:hover { background: var(--surface-3); color: var(--fg); text-decoration: none; }
.nav-link:hover .icon { color: var(--fg-2); }
.nav-link.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-link.active .icon { color: var(--accent-text); }
.nav-link.active::before {            /* 좌측 2px 인디케이터(사이드바 가장자리) */
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--accent);
}
.nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 메뉴 숫자 배지(UI 2단계 §4) — 보이는 글자는 숫자만, 설명은 title·숨김 글자. 실패가 있으면 빨간 톤. */
.nav-badge {
  margin-left: auto; flex: none;
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-soft-2); color: var(--accent-text);
  font-size: 11.5px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* 실패가 있으면 색만이 아니라 모양으로도 구분(색각·터치 사용자): 진한 채움 + 경고 아이콘. */
.nav-badge.nb-danger {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--danger-solid); color: var(--on-danger-solid);
  box-shadow: 0 0 0 1.5px var(--surface);
}
.nav-badge .nb-icon { display: inline-flex; }
.nav-badge .nb-icon .icon { width: 11px; height: 11px; stroke-width: 2.4; }

.side-foot { padding: 12px; border-top: 1px solid var(--border); }
.userbox { display: flex; align-items: center; gap: 6px; }
.userbox .user {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-2); font-size: 13px; font-weight: 500;
}
.user-avatar {
  flex: none; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 12px; font-weight: 700;
}
.user-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.theme-toggle {
  margin-left: auto; flex: none;
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--fg-2); cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.theme-toggle:hover { background: var(--surface-3); color: var(--fg); border-color: var(--border-strong); }
.theme-toggle .icon { width: 17px; height: 17px; }
:root[data-theme="light"] .theme-toggle .i-sun,
:root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }

.logout-form { display: inline-flex; margin: 0; }
.btn.btn-logout { min-height: 32px; padding: 0 10px; gap: 6px; font-size: 12.5px; }
.btn-logout .icon { width: 16px; height: 16px; }

/* 본문 */
.container {
  grid-column: 2;
  width: 100%; max-width: 1240px; min-width: 0;
  margin: 0 auto;
  padding: 28px 32px 64px;
}

/* 중간 폭(960~1279px): 사이드바·본문 여백을 줄여 표가 쓸 폭을 확보한다. */
@media (min-width: 960px) and (max-width: 1279.98px) {
  .app { --sidebar-w: 232px; }
  .container { padding: 24px 24px 56px; }
}

/* 좁은 폭(<960px): 상단 모바일 바(햄버거+로고) + 화면 밖 사이드바 drawer */
@media (max-width: 959.98px) {
  .app { display: block; }
  .topbar { position: sticky; top: 0; height: auto; z-index: 40; }
  .mobilebar {
    display: flex; align-items: center; gap: 10px;
    height: 56px; padding: 0 16px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav-burger {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px; margin-left: -4px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: transparent; color: var(--fg); cursor: pointer;
  }
  .nav-burger:hover { background: var(--surface-3); }
  .nav-burger .icon { width: 20px; height: 20px; }
  .mobile-brand {
    display: inline-flex; align-items: center; gap: 9px; min-width: 0;
    color: var(--fg);
  }
  .mobile-brand:hover { text-decoration: none; }
  .mobile-brand .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
  .mobile-brand .brand-mark svg { width: 17px; height: 17px; }
  .mobile-brand .brand-name { font-size: 15px; }

  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 2;
    width: min(288px, 86vw); height: auto;
    box-shadow: var(--shadow-pop);
    transform: translateX(-100%);
    visibility: hidden;                      /* 닫힌 drawer 안 링크로 탭 이동 방지 */
    pointer-events: none;                    /* 닫히는 중(슬라이드 아웃)엔 클릭 통과 */
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s;
  }
  .topbar.nav-open .sidebar {
    transform: none; visibility: visible; pointer-events: auto;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: var(--backdrop);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .topbar.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .nav-close {
    display: inline-grid; place-items: center; flex: none;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: transparent; color: var(--fg-2); cursor: pointer;
  }
  .nav-close:hover { background: var(--surface-3); color: var(--fg); }
  /* 열린 동안 뒤 본문 스크롤 잠금 — 루트만 잠근다(body까지 잠그면 상단 바 고정이 풀림).
     스크롤바 자리를 늘 확보해 잠금 순간 화면이 옆으로 밀리지 않게 한다. */
  html { scrollbar-gutter: stable; }
  html.nav-locked { overflow: hidden; }

  .container { padding: 20px 16px 48px; }
  h2 { font-size: 20px; margin-bottom: 16px; }
}

/* ── 카드 ────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  /* grid/flex 자식일 때 기본 min-width:auto가 내용 최소폭 이하로 못 줄게 막아
     좁은 화면에서 카드가 뷰포트를 넘긴다. 0으로 풀어 내부 래핑/스크롤이 먹게 한다. */
  min-width: 0;
}
.card + .card { margin-top: 16px; }
.card > :last-child { margin-bottom: 0; }
.card > h3:not(:first-child) { margin-top: 22px; }
@media (max-width: 640px) { .card { padding: 16px; } }

.cards-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.cards-2col > .card { margin: 0; }    /* 그리드 간격과 겹치지 않게 */
.span-2 { grid-column: 1 / -1; }
@media (max-width: 760px) { .cards-2col { grid-template-columns: minmax(0, 1fr); } }

/* ── 통계(KPI) 카드 ──────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 1280px) { .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 540px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px;
  min-width: 0;
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat-card::before {                    /* 색조: 상단 2px 컬러 바 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: transparent;
}
.stat-card.tone-warn::before { background: var(--warn-solid); }
.stat-card.tone-clear::before { background: var(--tier-clear); }
.stat-card.tone-suspect::before { background: var(--tier-suspect); }
.stat-card.tone-clear .stat-value { color: var(--tier-clear-fg); }
.stat-card.tone-suspect .stat-value { color: var(--tier-suspect-fg); }
.stat-value {
  font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  color: var(--fg); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat-label { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.35; }

/* ── 표 ──────────────────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
.grid, .del-table { border-collapse: separate; border-spacing: 0; }
.grid th, .grid td,
.del-table th, .del-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.del-table th, .del-table td { font-size: 13px; }
.grid thead th, .del-table thead th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}
.grid thead th:first-child, .del-table thead th:first-child { border-top-left-radius: var(--radius-xs); }
.grid thead th:last-child, .del-table thead th:last-child { border-top-right-radius: var(--radius-xs); }
.grid tbody td, .del-table tbody td { transition: background-color .12s ease; }
.grid tbody tr:hover > td, .del-table tbody tr:hover > td { background: var(--row-hover); }
.grid tbody tr:last-child > td, .del-table tbody tr:last-child > td { border-bottom: 0; }
/* 표 안 제목 링크는 본문색(호버 시 강조) — 링크 남발로 시끄럽지 않게 */
.grid td.c-title a, .del-table td.c-title a { color: var(--fg); font-weight: 500; }
.grid td.c-title a:hover, .del-table td.c-title a:hover { color: var(--accent-text); text-decoration: none; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* `.grid td`(0,1,1)가 `.num`(0,1,0)을 덮던 버그 수정 — td.num도 우측정렬 보장 */
th.num, td.num, .grid th.num, .grid td.num, .del-table th.num, .del-table td.num { text-align: right; }

/* 판별결과 표(카드 밖에 단독으로 놓임) — 감싸는 .table-card가 카드 모양을 맡고, 표가 넘치면
   그 안에서만 가로로 스크롤된다(그림자가 잘리지 않게 래퍼에 둔다). */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.table-card > .grid thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.table-card > .grid thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
.row[data-href] { cursor: pointer; }
.clickable tbody tr.row:hover td.c-title a { color: var(--accent-text); }
.title-cell { max-width: 360px; overflow-wrap: anywhere; }   /* 띄어쓰기 없는 긴 주소도 칸 안에서 줄바꿈 */
.value-cell { word-break: break-all; max-width: 320px; }
.minwon-cell { white-space: nowrap; }

/* 표 폭이 빠듯할 때(사이드바 옆 중간 폭): 짧은 칸(게시판·등록자·날짜·배지)은 한 줄로 두고
   제목·사유 칸만 줄바꿈되게 한다. 그래도 넘치면 .tablewrap 안에서 가로 스크롤.
   (≤640px 카드형에선 적용하지 않음) */
@media (min-width: 641px) {
  .grid.clickable td[data-label="게시판"],
  .grid.clickable td[data-label="등록자"],
  .grid.clickable td[data-label="등록일"],
  .grid.clickable td[data-label="판정"],
  .grid.clickable td[data-label="판별 방식"],
  .del-list td[data-label="게시판"],
  .del-list td[data-label="등록자"],
  .del-list td[data-label="등록일"],
  .del-list td[data-label="승인자"],
  .del-list td[data-label="삭제시각"],
  .del-list td[data-label="번호"] { white-space: nowrap; }
  .grid.clickable td.c-title { min-width: 11em; }
  .del-list td.c-title { min-width: 10em; overflow-wrap: anywhere; }
  .del-list td[data-label="사유"] { min-width: 9em; }   /* 사유가 낱말 하나 폭으로 눌려 행이 길어지지 않게 */
}
/* 판별결과: 한국어 제목은 낱말 단위로 줄바꿈('보장'이 '보/장'으로 갈리지 않게). */
.grid.clickable td.c-title { word-break: keep-all; }
/* 사이드바 옆 중간 폭(641~1279px): 등록일은 날짜와 시각을 두 줄로 놓아 제목 칸 폭을 확보한다. */
@media (min-width: 641px) and (max-width: 1279.98px) {
  .grid.clickable td[data-label="등록일"] .dt-t { display: block; }
}
@media (max-width: 1439.98px) {
  .grid th, .grid td, .del-table th, .del-table td { padding: 8px 10px; }
}

/* 날짜·시각: Paperlogy는 띄어쓰기 폭이 좁아 '2026-10-04 01:45'가 붙어 보인다 — 간격 보강. */
td[data-label$="일"], td[data-label$="일시"], td[data-label$="시각"],
td.lg-date, .kv td, .next-poll .np-abs { word-spacing: .15em; }
/* 삭제리스트 '승인자별 집계': 내용은 접지 않고(날짜가 서너 글자씩 끊기던 문제) 넘치면 가로 스크롤. */
.del-top .del-table td { white-space: nowrap; word-spacing: .15em; }

/* key-value 표 */
.kv { width: 100%; table-layout: fixed; border-collapse: collapse; }
.kv th, .kv td { padding: 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.kv tr:last-child > th, .kv tr:last-child > td { border-bottom: 0; }
.kv th {
  width: 38%; padding-right: 12px;
  text-align: left; font-size: 13px; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 값 칸: 긴 URL·토큰도 줄바꿈해 카드/뷰포트를 넘지 않게 한다. */
.kv td { color: var(--fg); overflow-wrap: anywhere; word-break: break-word; }
.kv td a { overflow-wrap: anywhere; word-break: break-all; }
.kv td.num { text-align: left; }        /* 키-값 표의 숫자 값은 라벨 옆에 붙여 표시 */

/* ── 배지 ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--tier-normal-bg); color: var(--tier-normal-fg);
  font-size: 12px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; vertical-align: middle;
}
.badge .icon { width: 13px; height: 13px; flex: none; }
.badge-tier-clear   { color: var(--tier-clear-fg);   background: var(--tier-clear-bg); }
.badge-tier-suspect { color: var(--tier-suspect-fg); background: var(--tier-suspect-bg); }
.badge-tier-normal  { color: var(--tier-normal-fg);  background: var(--tier-normal-bg); }

/* 민원 배지 — 파란 계열(스팸 티어 배지와 시각적으로 구분) */
.badge-minwon { color: var(--minwon); background: var(--minwon-bg); }

/* 판별 출처 */
.badge-source  { color: var(--tier-normal-fg); background: var(--tier-normal-bg); }
.src-ai        { color: var(--accent-text); background: var(--accent-soft); }
.src-ai:not(:has(.icon))::before {      /* AI 판정 표시 — 그라디언트 점(아이콘 없는 배지만) */
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ai-gradient); flex: none;
}
.src-whitelist { color: var(--ok); background: var(--ok-bg); }
.src-blacklist { color: var(--danger); background: var(--danger-bg); }
.src-fallback  { color: var(--warn); background: var(--warn-bg); }

/* 피드백 종류(fb-<kind>) */
.fb-false_positive { color: var(--warn); background: var(--warn-bg); }
.fb-false_negative { color: var(--danger); background: var(--danger-bg); }

/* 상태 배지 */
.badge.active   { color: var(--ok); background: var(--ok-bg); }
.badge.inactive { color: var(--tier-normal-fg); background: var(--tier-normal-bg); }
.badge.warn     { color: var(--warn); background: var(--warn-bg); }

/* 목록 '처리' 칸·삭제 진행 카드 상태(UI 2단계 §3·§4) — 글자가 뜻을 말하고 색은 보조. */
.proc-states { display: flex; flex-wrap: wrap; gap: 4px; }
.badge.proc-wait    { color: var(--accent-text); background: var(--accent-soft); }
.badge.proc-fail    { color: var(--danger); background: var(--danger-bg); }
.badge.proc-ok      { color: var(--ok); background: var(--ok-bg); }
.badge.proc-removed,
.badge.proc-moved   { color: var(--tier-normal-fg); background: var(--tier-normal-bg); }
/* 홈페이지에서 없어진 글은 제목을 흐리게(목록에서 한눈에 구분). */
.grid tr.row.st-removed td.c-title a { color: var(--muted); }

/* ── 현황: 주간 리포트 검토 카드 / 연속 실패 ─────────────────────────── */
.card.attn {
  border-color: color-mix(in srgb, var(--warn-solid) 40%, var(--border));
  box-shadow: inset 0 2px 0 var(--warn-solid), var(--shadow);
}
.wr-summary { font-size: 16px; font-weight: 700; margin: 2px 0 12px; color: var(--fg); }
.wr-card .btn { margin-top: 2px; }

.fail-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.fail-count.bad { color: var(--danger); font-weight: 800; }

.between {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.between > h3 { margin: 0; }
.between > .filters { margin: 0; flex: 1 1 auto; }

/* ── 현황: 지금 할 일 한 줄(화면 정보구조 개편 §5) ─────────────────────── */
.todo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.todo-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.todo-item {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 5px 8px 5px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.todo-item:hover { background: var(--accent-soft-2); text-decoration: none; }
.todo-item .icon { width: 15px; height: 15px; }
.todo-item.todo-bad { background: var(--danger-bg); color: var(--danger); }
.todo-none { gap: 8px; color: var(--ok); font-size: 13.5px; font-weight: 600; }
.todo-none .icon { width: 17px; height: 17px; }
/* 시스템 상태 — 한 줄 요약(펼치기) */
details.dash-health > summary.health-sum {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  cursor: pointer; list-style: none;
}
details.dash-health > summary.health-sum::-webkit-details-marker { display: none; }
details.dash-health > summary.health-sum::after {
  content: "펼치기"; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent-text);
}
details.dash-health[open] > summary.health-sum::after { content: "접기"; }
details.dash-health[open] > summary.health-sum { margin-bottom: 12px; }
.health-title { font-size: 15px; font-weight: 700; color: var(--fg); }
.health-state { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.health-state .icon { width: 15px; height: 15px; }
.health-state.ok { color: var(--ok); }
.health-state.bad { color: var(--danger); }

/* ── 현황: AI 관제 대시보드(UI 2단계 §1 + 학습 L4 현황 부분) ─────────── */
/* 머리 줄: 제목·기간(왼쪽) + 다음 자동 확인·지금 1회 실행(오른쪽) */
.dash-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px 20px; margin-bottom: 18px;
}
.dash-title { min-width: 0; }
.dash-title h2 { margin: 0; }
.dash-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.dash-run { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.dash-run-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px;
}
.dash-run .next-poll { margin: 0; padding: 7px 12px; }
.dash-run .np-none { margin: 0; font-size: 12.5px; }
.dash-run .htmx-indicator { margin-left: 0; }
.dash-run .run-result { margin-top: 0; min-height: 0; text-align: right; }
.dash-run .run-result .alert { margin: 0; }
.dash-run .run-stats { justify-content: flex-end; }
.dash-run .run-stats .chip { padding: 3px 10px; font-size: 12.5px; }
.run-hint { margin: 0; font-size: 12.5px; }
@media (max-width: 760px) {
  .dash-run { width: 100%; align-items: flex-start; }
  .dash-run-row { justify-content: flex-start; }
  .dash-run .run-result { text-align: left; }
  .dash-run .run-stats { justify-content: flex-start; }
}

/* KPI 카드: 라벨 → 큰 숫자 → 보조 글 → 14일 스파크라인(아래 정렬) */
.stat-card.kpi { flex-direction: column; justify-content: flex-start; gap: 4px; padding-bottom: 12px; }
/* 큰 단독 숫자는 고정폭 숫자 대신 기본 숫자 모양(121이 헐겁게 보이지 않게) */
.stat-card.kpi .stat-value { font-variant-numeric: normal; }
.kpi-sub { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.kpi .spark { display: block; width: 100%; height: 26px; margin-top: auto; overflow: visible; color: var(--muted); }
.kpi.tone-clear .spark { color: var(--tier-clear); }
.kpi.tone-suspect .spark { color: var(--tier-suspect); }
.kpi.tone-accent .spark { color: var(--accent); }
.spark-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: currentColor; opacity: .12; stroke: none; }
/* 강조 KPI(검토 대기): 옅은 강조 배경 + 상단 강조 바. AI 지표: 상단 AI 그라디언트 바 */
.stat-card.tone-accent {
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.stat-card.tone-accent::before { background: var(--accent); }
.stat-card.tone-accent .stat-value { color: var(--accent-text); }
/* 강조 카드는 배경(accent-soft)이 깔려 muted 대비가 4.5:1 아래로 떨어진다 — 글자색을 올린다. */
.stat-card.tone-accent .stat-label, .stat-card.tone-accent .kpi-sub { color: var(--fg-2); }
.stat-card.tone-ai::before { background: var(--ai-gradient); }
a.kpi-link { color: inherit; text-decoration: none; transition: border-color .14s ease, background-color .14s ease; }
a.kpi-link:hover { border-color: var(--accent); text-decoration: none; }
.kpi-arrow { margin-left: 4px; color: var(--accent-text); font-weight: 700; }
.kpi-foot { margin: 8px 0 0; font-size: 12px; }

/* 본문: 넓은 화면은 두 열(왼쪽 추이·검토 대기·신고 | 오른쪽 비율·AI 학습·상태·주간 리포트),
   열마다 카드를 위에서부터 쌓는다(높이가 달라도 빈칸 없음). 좁은 화면은 열을 풀어(display:contents)
   한 줄로 — order로 중요한 것부터: 추이 → 비율 → 검토 대기 → AI 학습 → 상태 → 주간 리포트 → 신고. */
.dash-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.dash-col { display: contents; }
.dash-col > .card { margin: 0; }
.dash-trend { order: 1; }
.dash-ratio { order: 2; }
.dash-pending { order: 3; }
.learn-card { order: 4; }
.dash-health { order: 5; }
.dash-col .wr-card { order: 6; }
.dash-feedback { order: 7; }
.dash-feedback td.nowrap-dt { white-space: nowrap; }
@media (min-width: 1100px) {
  .dash-grid {
    display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); align-items: start;
  }
  .dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
}
.dash .cards-2col { margin-top: 16px; }
.dash .wm-details { margin-top: 16px; }
.card > h3.h3-sub { margin-top: 20px; }
.h3-count { color: var(--muted); font-weight: 500; }
.card-hint { margin: -4px 0 10px; font-size: 12.5px; }
.link-more { font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* 검토 대기 목록 */
.pending-list { list-style: none; margin: 0; padding: 0; }
.pending-item {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 9px 2px; border-top: 1px solid var(--border);
}
.pending-item:first-child { border-top: 0; }
.pending-board { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pending-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.pending-title:hover { color: var(--accent-text); }
.pending-ago { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pending-more { margin: 10px 0 0; font-size: 12.5px; }
.dash-pending .empty { padding: 28px 16px; }
@media (max-width: 540px) {
  .pending-item { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 4px; }
  .pending-title { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .pending-ago { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* AI 학습 링크 카드 */
a.learn-card { display: block; color: inherit; text-decoration: none; transition: border-color .14s ease; }
a.learn-card:hover { border-color: var(--accent); text-decoration: none; }
.learn-card.has-pending { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.learn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.learn-head h3 { margin: 0; flex: 1 1 auto; }
.learn-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--radius-xs);
  background: var(--ai-gradient); color: var(--accent-fg);
  box-shadow: inset 0 0 0 1px var(--highlight-inset);
}
.learn-icon svg.icon { width: 15px; height: 15px; }
.learn-main { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--fg); }
.learn-card.has-pending .learn-main { color: var(--accent-text); }
.learn-line { margin: 0 0 2px; font-size: 12.5px; }
.learn-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }

/* 게시판별 마지막 확인 글번호(접힘) */
.wm-details > summary { cursor: pointer; width: fit-content; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.wm-details > summary:hover { color: var(--fg); }
.wm-details[open] > summary { margin-bottom: 12px; }
.wm-details .grid { max-width: 440px; }

/* ── 차트(서버측 인라인 SVG — src/web/charts.py) ─────────────────────── */
/* 그림(막대·선·격자)은 SVG를 가로로 늘리고, 축 글자·범례는 HTML이라 휴대폰에서도 읽힌다.
   색은 .mk-* 클래스로만(테마 토큰). 막대 사이는 테두리 대신 2px 틈으로 구분한다. */
.mk-clear    { fill: var(--tier-clear);    color: var(--tier-clear);    background-color: var(--tier-clear); }
.mk-suspect  { fill: var(--tier-suspect);  color: var(--tier-suspect);  background-color: var(--tier-suspect); }
.mk-normal   { fill: var(--tier-normal);   color: var(--tier-normal);   background-color: var(--tier-normal); }
.mk-ai       { fill: var(--accent);        color: var(--accent);        background-color: var(--accent); }
.mk-rule     { fill: var(--muted);         color: var(--muted);         background-color: var(--muted); }
.mk-fallback { fill: var(--warn-solid);    color: var(--warn-solid);    background-color: var(--warn-solid); }
.mk-accent   { fill: var(--accent);        color: var(--accent);        background-color: var(--accent); }
.mk-ok       { fill: var(--ok);            color: var(--ok);            background-color: var(--ok); }
.mk-danger   { fill: var(--danger-solid);  color: var(--danger-solid);  background-color: var(--danger-solid); }

.chart { margin: 0; --plot-h: 168px; }
.chart-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 6px; }
.chart-y {
  display: flex; flex-direction: column; justify-content: space-between;
  height: var(--plot-h); min-width: 18px;
  color: var(--muted); font-size: 11px; text-align: right;
}
/* 높이 0 칸 = 눈금 글자가 격자선 높이에 정확히 가운데 오게 */
.chart-y > span { display: flex; align-items: center; justify-content: flex-end; height: 0; white-space: nowrap; }
.chart-main { min-width: 0; }
.chart-plot { display: block; width: 100%; height: var(--plot-h); overflow: visible; }
.chart-x { display: flex; margin-top: 6px; color: var(--muted); font-size: 11px; }
.chart-x > span { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; white-space: nowrap; }
.chart-x > span:last-child { color: var(--fg-2); font-weight: 600; }
@media (max-width: 640px) {
  .chart { --plot-h: 140px; }
  .chart-x > span:nth-last-child(even) { visibility: hidden; }   /* 하루 걸러 표시(오늘은 유지) */
}
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-hit { fill: transparent; }
.chart-col:hover .chart-hit { fill: color-mix(in srgb, var(--fg) 7%, transparent); }
.chart-plot .chart-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-plot .chart-area { fill: currentColor; opacity: .1; stroke: none; }
.chart-plot .chart-dot { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
.chart-plot .chart-dot-ring { fill: none; stroke: var(--surface); stroke-width: 12; stroke-linecap: round; }
.chart-empty {
  padding: 40px 16px; text-align: center; color: var(--muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
}

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 12px 0 0; padding: 0; list-style: none;
  font-size: 12.5px; color: var(--fg-2);
}
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-val { color: var(--muted); font-variant-numeric: tabular-nums; }

.chart-table { margin-top: 10px; }
.chart-table > summary { cursor: pointer; width: fit-content; color: var(--muted); font-size: 12px; font-weight: 600; }
.chart-table > summary:hover { color: var(--fg-2); }
.chart-table[open] > summary { margin-bottom: 8px; }
.chart-table .grid { font-size: 12.5px; }

/* 도넛: 고정 크기(원 유지) + 옆 범례(라벨 · 값 · %) */
.chart-donut { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.donut { display: block; width: 132px; height: 132px; flex: none; }
.donut-total { fill: var(--fg); font-family: var(--font); font-size: 22px; font-weight: 800; }
.donut-sub { fill: var(--muted); font-family: var(--font); font-size: 11px; }
.donut-seg { transition: opacity .12s ease; }
.donut:hover .donut-seg { opacity: .5; }
.donut .donut-seg:hover { opacity: 1; }
.chart-donut .chart-legend { flex: 1 1 150px; max-width: 320px; flex-direction: column; gap: 8px; margin: 0; }
.chart-donut .chart-legend li { display: flex; }
.chart-donut .legend-val { margin-left: auto; padding-left: 12px; white-space: nowrap; }

/* 가로 막대 목록: 라벨 | 막대 | 값 — 행끼리 칸을 맞추려고 행은 display:contents */
.hbars {
  display: grid; grid-template-columns: max-content minmax(60px, 1fr) max-content;
  align-items: center; gap: 9px 12px; font-size: 12.5px;
}
.hbar { display: contents; }
.hbar-label { color: var(--fg-2); white-space: nowrap; }
.hbar-label[title] { cursor: help; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; }
.hbar-note { color: var(--muted); font-size: 11.5px; }
.hbar-track { display: block; height: 8px; border-radius: 999px; overflow: hidden; }
.hbar-track svg { display: block; width: 100%; height: 8px; }
.hbar-bg { fill: var(--surface-2); }     /* 채움 막대와 트랙 대비 3:1 이상(밝은 화면 포함) */
.hbar-value { text-align: right; white-space: nowrap; color: var(--fg); font-variant-numeric: tabular-nums; }
.hbar-pct { color: var(--muted); }
/* 감시 꺼진 게시판: 글자는 대비 유지(흐린 글자색만), 막대만 흐리게 */
.hbar.is-off .hbar-label, .hbar.is-off .hbar-value { color: var(--muted); }
.hbar.is-off .hbar-track { opacity: .7; }   /* '감시 꺼짐' 글자가 함께 알리므로 살짝만 흐리게 */

/* ── 버튼 ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3;
  text-align: center; text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.btn:hover { background: var(--surface-3); color: var(--fg); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn .icon { width: 16px; height: 16px; }
.btn:disabled, .btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-sm { min-height: 28px; padding: 4px 10px; font-size: 12.5px; border-radius: var(--radius-xs); }
.btn-block { display: flex; width: 100%; }
.btn-primary {
  background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-fg);
  box-shadow: inset 0 1px 0 var(--highlight-inset), var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--accent-solid-hover); border-color: var(--accent-solid-hover-border); color: var(--accent-fg);
}
.btn-ghost { background: transparent; border-color: var(--border); color: var(--fg-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg); }
.btn-warn {
  background: var(--warn-bg); color: var(--warn);
  border-color: color-mix(in srgb, var(--warn-solid) 38%, transparent);
}
.btn-warn:hover {
  background: color-mix(in srgb, var(--warn-solid) 22%, transparent); color: var(--warn);
  border-color: color-mix(in srgb, var(--warn-solid) 60%, transparent);
}
.btn-danger {
  background: var(--danger-bg); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger-solid) 38%, transparent);
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--danger-solid) 22%, transparent); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger-solid) 60%, transparent);
}
.btn-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ── 폼 / 입력 ───────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, fieldset label { font-size: 12px; font-weight: 500; color: var(--muted); }
.field.grow { flex: 1 1 220px; }
.field.actions { flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 8px; }

/* 텍스트형 입력·select·textarea(:where로 명시도 0 — 개별 규칙이 쉽게 덮어씀) */
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"],
       [type="submit"], [type="button"]), select, textarea) {
  min-height: 34px;
  padding: 6px 10px;
  max-width: 100%;
  background-color: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.4;
  transition: border-color .14s ease, background-color .14s ease;
}
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"],
       [type="submit"], [type="button"]), select, textarea):hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--input-border));
}
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"],
       [type="submit"], [type="button"]), select, textarea):focus {
  outline: 2px solid var(--focus); outline-offset: 1px;
  border-color: var(--accent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
:where(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
::placeholder { color: var(--muted); opacity: 1; }   /* Firefox 기본(.54)도 덮어 대비 4.5:1 확보 */
textarea { line-height: 1.5; resize: vertical; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: var(--select-arrow);      /* 화살표 색은 테마별 muted(토큰) */
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px 14px;
}
option { background-color: var(--surface); color: var(--fg); }
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--accent); cursor: pointer;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* 필터 줄 기본(판별결과·지자체 점검·지자체 통계 공용) */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.filters .field { flex-direction: row; align-items: center; gap: 8px; }
.filters .field > label { white-space: nowrap; margin: 0; }
.filters .field.actions { margin-left: auto; gap: 6px; }

/* 판별결과 필터(UI 2단계 §3) — 한 줄(게시판·판정 select + 빠른 조건 칩 + 조회) + 접는 '상세 조건'.
   지자체 화면의 .filters에 영향이 없도록 이 화면 id로만 범위를 한정한다. */
#results-filters { gap: 0; }
#results-filters .filter-main { gap: 10px 16px; }
#results-filters select { min-width: 8.5em; }
#results-filters .filter-toggles { gap: 6px; }
.filter-more { margin-top: 10px; border-top: 1px dashed var(--border); }
.filter-more > summary {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 2px 4px 2px 2px;
  border-radius: var(--radius-xs);
  color: var(--fg-2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; list-style: none; user-select: none;
}
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more > summary::before {          /* 펼침 표시(닫힘 ▸ / 열림 ▾) */
  content: ""; width: 6px; height: 6px; margin: 0 2px 0 4px;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: rotate(-45deg); transition: transform .14s ease;
}
.filter-more[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.filter-more > summary:hover { color: var(--fg); }
.filter-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.filter-more-hint { color: var(--muted); font-weight: 500; }
.filter-more > .filter-row { padding-top: 10px; }

/* 범주형 필터 — 단일선택 토글 칩(라디오 기반) */
.chip-label { white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--muted); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; font-size: 12.5px; line-height: 1.2;
}
.chips .chip {
  position: relative;
  min-height: 28px; padding: 4px 11px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--fg-2); font-weight: 500;
  cursor: pointer; user-select: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.chips .chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); color: var(--fg); }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.chips .chip.on {
  background: var(--accent-soft); color: var(--accent-text); font-weight: 600;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);   /* 선택 = 두꺼운 테두리(색 말고도 구분되게) */
}
/* 서버가 붙인 .on은 첫 로드 기준 — htmx로 표만 바뀌면 실제 선택(:checked)을 따라 칩 강조를 맞춘다. */
.chips .chip:has(input:checked) {
  background: var(--accent-soft); color: var(--accent-text); font-weight: 600;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.chips .chip.on:has(input:not(:checked)) {
  background: var(--surface-2); color: var(--fg-2); font-weight: 500;
  border-color: var(--border-strong);
  box-shadow: none;
}
/* 키보드로 고를 때만 포커스 테두리(마우스 클릭엔 표시 안 함). */
.chips .chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

fieldset {
  margin: 0; min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
/* 범례 제목을 테두리 위가 아니라 카드 안쪽 첫 줄에 둔다(.card h3와 같은 톤). */
legend {
  float: left; width: 100%;
  padding: 0; margin: 0 0 12px;
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--fg-2);
}
legend + * { clear: both; }
.list-add-form { margin-bottom: 16px; }
.list-add-form fieldset {
  padding: 16px 18px 18px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.form-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-grid .field { min-width: 130px; }
.feedback-form .field { max-width: 420px; margin-bottom: 4px; }
.feedback-form .field input { width: 100%; }

/* 체크박스 라벨(위젯 + 텍스트 가로 배치) */
label.checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--fg);
  cursor: pointer;
}
label.checkbox input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; }

/* ── 결과 메타 / 페이지네이션 / 빈 상태 ─────────────────────────────── */
.result-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 10px;
}
.result-meta > .muted { font-size: 13px; }
.pager { display: flex; align-items: center; gap: 6px; }
.pager .btn { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
.pager-info {
  min-width: 48px; text-align: center;
  color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
/* 표 안 빈 상태 행(예: 리스트 '항목이 없습니다.') — 가운데, 넉넉한 여백 */
td[colspan].muted { text-align: center; padding: 28px 12px; }
.empty {
  margin: 0;
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* ── 상세(UI 2단계 §2 + 학습 L1): 판정 히어로 · 근거 하이라이트 · 비슷한 과거 판단 ─── */
/* 화면엔 안 보이고 화면 읽기 프로그램만 읽는 라벨 */
.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;
}

/* 하이라이트 색 — 판정 톤을 따른다(명백=빨강, 의심=주황, 그 밖=강조색). 밑줄은 글자색 토큰(*-fg)이라
   배경 대비 3:1 이상(색만이 아니라 모양으로도 구분). */
.detail { --hl-bg: var(--accent-soft-2); --hl-line: var(--accent-text); }
.detail.tone-clear { --hl-bg: var(--tier-clear-bg); --hl-line: var(--tier-clear-fg); }
.detail.tone-suspect { --hl-bg: var(--tier-suspect-bg); --hl-line: var(--tier-suspect-fg); }

.detail-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px 16px; margin-bottom: 16px;
}
.detail-head-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.detail-head h2 { margin: 0; }
.detail-no { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.detail-head .btn .icon { width: 15px; height: 15px; }

/* 판정 히어로 — 왼쪽 3px 판정색 막대 + 위쪽에 아주 옅은 판정색 */
.detail-hero { position: relative; overflow: hidden; padding: 18px 20px 16px 22px; }
.detail-hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--border-strong);
}
.hero-clear {
  border-color: color-mix(in srgb, var(--tier-clear) 34%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--tier-clear) 6%, var(--surface)), var(--surface) 70%);
}
.hero-suspect {
  border-color: color-mix(in srgb, var(--tier-suspect) 34%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--tier-suspect) 6%, var(--surface)), var(--surface) 70%);
}
.hero-clear::before { background: var(--tier-clear); }
.hero-suspect::before { background: var(--tier-suspect); }
.hero-normal::before { background: var(--tier-normal); }   /* 정상은 차분하게 — 회색 막대 */

.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hero-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--tier-normal-bg); color: var(--tier-normal-fg);
}
.hero-icon .icon { width: 20px; height: 20px; }
.hero-clear .hero-icon { background: var(--tier-clear-bg); color: var(--tier-clear-fg); }
.hero-suspect .hero-icon { background: var(--tier-suspect-bg); color: var(--tier-suspect-fg); }
.hero-normal .hero-icon { background: var(--ok-bg); color: var(--ok); }
.hero-tier { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--fg); }
.hero-clear .hero-tier { color: var(--tier-clear-fg); }
.hero-suspect .hero-tier { color: var(--tier-suspect-fg); }

/* 확신도: AI는 막대 + %, 규칙 판정·분석보류는 글자 배지 */
.conf { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.conf-bar {
  position: relative; flex: none; width: 112px; height: 8px;
  border-radius: 999px; background: var(--surface-3); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border);
}
.conf-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--ai-gradient); }
.conf-val { font-size: 14px; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; }
.conf-rule, .conf-fallback {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--fg-2); font-weight: 600;
}
.conf-fallback { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn-solid) 32%, transparent); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto;
  font-size: 12.5px; color: var(--muted);
}
.meta-v { color: var(--fg-2); font-weight: 600; }
.hero-reason { margin: 14px 0 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--fg); overflow-wrap: anywhere; }
.hero-reason p { margin: 0; }
.hero-reason .hero-cause { margin-top: 4px; font-size: 13px; font-weight: 400; }
.hero-none .hero-reason { font-size: 13.5px; }

/* 게시판 안내(더 맞는 게시판 · 권고 · 같은 글) */
.hero-placement {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin-top: 12px; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  font-size: 13px; color: var(--fg-2);
}
.hero-placement > .icon { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
/* 같은 글 삭제 권고(반복·다른 게시판) — 의심(노랑)과 헷갈리지 않게 보라 계열로 */
.hero-placement.is-dup {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: var(--accent-soft); color: var(--fg);
}
.hero-placement.is-dup > .icon { color: var(--accent-text); }
.pl-dup-name { font-weight: 700; color: var(--accent-text); }
.pl-board { font-weight: 700; color: var(--fg); }
.pl-links { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.pl-copy { flex-basis: 100%; }                 /* 남아 있는 글·지워진 글은 한 줄씩 */
.dup-quiet { margin: 8px 0 0; font-size: 12.5px; }
.badge-dup { color: var(--accent-text); background: var(--accent-soft-2); }
.badge-sm { margin-left: 4px; padding-top: 1px; padding-bottom: 1px; font-size: 11px; }

/* 근거 칩 */
.ev-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ev-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.ev-label { flex: none; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 220px; }
.ev-chip {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface-2); color: var(--fg-2);
  font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere;
}
a.ev-chip { text-decoration: none; transition: border-color .14s ease, color .14s ease; }
.ev-found { background: var(--hl-bg); color: var(--fg); border-color: transparent; box-shadow: inset 0 -2px 0 var(--hl-line); }
a.ev-found:hover { color: var(--fg); box-shadow: inset 0 -2px 0 var(--hl-line), 0 0 0 1px var(--hl-line); }
.ev-signal { background: transparent; border-style: dashed; }     /* 본문에 직접 없는 신호 — 오류 톤 아님 */

/* 조치 줄 */
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.hero-actions form { margin: 0; }
.action-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.action-main form { display: inline-flex; }
.action-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.action-feedback input[type="text"] { width: 170px; min-height: 28px; padding: 4px 10px; font-size: 12.5px; }
.action-hint { flex: 1 1 100%; margin: 0; font-size: 12px; }
/* '이미 진행·완료' 상태 표시 — 누를 수 있는 버튼(.btn)과 다르게 보이게: 테두리·버튼 높이 없이
   배지처럼 작고 둥근 모양 + 왼쪽 굵은 색 막대. 커서도 기본. */
.action-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 0; border-left: 3px solid var(--border-strong); border-radius: 4px 999px 999px 4px;
  background: transparent; color: var(--fg-2);
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  cursor: default;
}
.action-state .icon { width: 14px; height: 14px; }
.action-state.st-wait { color: var(--warn); border-left-color: var(--warn-solid); background: var(--warn-bg); }
.action-state.st-done,
.action-state.st-ok { color: var(--ok); border-left-color: var(--ok); background: var(--ok-bg); }
.action-note {
  margin: 0; padding: 6px 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg-2); font-size: 12.5px;
}
/* '문제없음' 버튼 — 초록 계열(삭제=빨강과 구분) */
.btn-ok {
  background: var(--ok-bg); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 38%, transparent);
}
.btn-ok:hover {
  background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 60%, transparent);
}
@media (max-width: 760px) {
  .hero-meta { margin-left: 0; flex-basis: 100%; }
  .action-feedback { margin-left: 0; }
}
@media (max-width: 540px) {
  .detail-hero { padding: 16px 16px 14px 18px; }
  .action-feedback { flex-basis: 100%; }
  .action-feedback input[type="text"] { flex: 1 1 100%; width: auto; }   /* 메모 한 줄 → 신고 버튼 둘 */
}

/* 민원 줄(민원일 때만, 히어로 바로 아래) */
.detail-verdict > .minwon-line { margin-top: 8px; }
.minwon-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 12px 18px;
  border-color: color-mix(in srgb, var(--minwon) 34%, var(--border));
}
.mw-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mw-summary { flex: 1 1 260px; }
.mw-k { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mw-v { color: var(--fg); overflow-wrap: anywhere; }

/* 본문(왼쪽) + 글 정보·비슷한 과거 판단·처리 이력(오른쪽) */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.detail-grid > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-grid > div > .card { margin: 0; }
@media (max-width: 1140px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }

.detail-title { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--fg); overflow-wrap: anywhere; }
.body-text {
  white-space: pre-wrap;
  word-break: break-word; overflow-wrap: anywhere;
  max-height: min(70vh, 640px); overflow: auto;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg); line-height: 1.7;
}
mark.ev-hl {
  padding: 0 1px; border-radius: 3px;
  background: var(--hl-bg); color: inherit;
  box-shadow: inset 0 -2px 0 var(--hl-line);
  scroll-margin: 80px 0 40px;   /* 좁은 화면의 고정 상단 바(56px)에 가리지 않게 */
}
mark.ev-hl:target { outline: 2px solid var(--focus); outline-offset: 1px; }
.hl-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.hl-swatch { display: inline-block; width: 22px; height: 12px; border-radius: 3px; background: var(--hl-bg); box-shadow: inset 0 -2px 0 var(--hl-line); }
.detail-body .between { margin-bottom: 10px; }

/* 비슷한 과거 판단 */
.site-gone { font-size: 12.5px; padding: 6px 4px; }
.similar-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.similar-head h3 { margin: 0; }
.similar-list { list-style: none; margin: 0; padding: 0; }
.similar-item {
  display: grid; grid-template-columns: 3.2em 9.5em minmax(0, 1fr);   /* 배지 칸 고정 — 제목 열 정렬 */
  align-items: center; gap: 10px;
  padding: 8px 2px; border-top: 1px solid var(--border);
}
.similar-item .badge { justify-self: start; }      /* 그리드 칸만큼 늘어나지 않게 */
.similar-item:first-child { border-top: 0; }
.sim-pct { text-align: right; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.similar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.similar-title:hover { color: var(--accent-text); }
.badge.dec-delete { color: var(--danger); background: var(--danger-bg); }
.badge.dec-keep { color: var(--ok); background: var(--ok-bg); }
@media (max-width: 540px) {
  .similar-item { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .sim-pct { text-align: left; }
  .similar-title { grid-column: 1 / -1; white-space: normal; }
}

/* 처리 이력 */
.hist-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hist-meta { font-size: 12px; line-height: 1.45; color: var(--muted); }
.hist-cell form { margin: 2px 0 0; }
.badge.bad { color: var(--danger); background: var(--danger-bg); }
.history-card .kv th { width: 28%; }
/* 처리 이력의 신고 표는 좁은 옆 칸에 있어 화면 폭과 상관없이 카드형(칸마다 라벨)으로 */
.history-card .rcards thead { display: none; }
.history-card .rcards, .history-card .rcards tbody,
.history-card .rcards tr, .history-card .rcards td { display: block; width: auto; }
.history-card .rcards tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
.history-card .rcards tbody tr:last-child { border-bottom: none; }
.history-card .rcards td {
  border: none; padding: 2px 0; background: transparent;
  font-size: 13px; white-space: normal; text-align: left; overflow-wrap: anywhere;
}
.history-card .rcards td::before {
  content: attr(data-label) ": "; color: var(--muted); font-size: 12px; font-weight: 600; margin-right: 4px;
}
.history-card .rcards td:empty { display: none; }

/* 판별 원본 데이터(접힘) */
.raw-details { margin-top: 16px; }
.raw-details > summary { cursor: pointer; width: fit-content; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.raw-details > summary:hover { color: var(--fg); }
.raw-details[open] > summary { margin-bottom: 12px; }
.raw-details .json {
  margin: 0;
  padding: 12px 14px;
  max-height: min(60vh, 480px); overflow: auto;
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  white-space: pre;
}

/* ── AI 학습 화면(학습 L4 — /learning): KPI · 주별 일치율 · 기준 개선 제안 · 판단 기록 ── */
.learn-flash { margin: 0 0 16px; }
/* KPI 4장: 넓은 화면 4열, 좁은 화면 2열 */
.cards.learn-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .cards.learn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.learn-kpis .stat-card.tone-ai .stat-value { color: var(--accent-text); }

/* 주별 일치율(넓게) + AI가 배우는 방식(옆) — 좁은 화면은 한 줄 */
.learn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.learn-grid > .card { margin: 0; }
@media (min-width: 1100px) {
  .learn-grid { grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); align-items: start; }
}
.learn .subnav-body > .card + .card { margin-top: 16px; }
/* 하위 메뉴 옆 본문이 좁은 폭: KPI 2열, 추이·배우는 방식은 위아래로 */
@media (max-width: 1279.98px) { .subnav-body .cards.learn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) and (max-width: 1439.98px) {
  .subnav-body .learn-grid { grid-template-columns: minmax(0, 1fr); }
}
/* 요약 위 '승인을 기다리는 제안 N건 ›' */
.learn-todo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-sm);
  color: var(--accent-text); font-size: 13.5px; font-weight: 600;
}
.learn-todo:hover { text-decoration: none; background: var(--accent-soft-2); }
.learn-todo .icon { width: 17px; height: 17px; }
.learn-todo .i-chevron-right { margin-left: auto; }
/* 판단 기록 — 비교 탭 + 게시판 칩 */
.learn-filter { margin-bottom: 12px; }
.learn-filter .tabs { margin-bottom: 10px; }
/* 지금 판별 기준(게시판별) — 게시판마다 접힘 */
.crit-now { border-top: 1px solid var(--border); padding: 10px 0; }
.crit-now:first-of-type { border-top: 0; }
.crit-now > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; cursor: pointer;
}
.crit-now-board { font-weight: 700; color: var(--fg); }
.crit-now-meta { font-size: 12.5px; }
.crit-now-body { display: grid; gap: 6px; margin-top: 10px; }
.crit-now-body .crit-label { margin-top: 4px; }
.howto-list { list-style: none; margin: 0; padding: 0; }
.howto-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.howto-list li:first-child { border-top: 0; padding-top: 2px; }
.howto-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 13.5px; font-weight: 600; color: var(--fg);
}
.howto-list p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; }

/* 기준 개선 제안 */
.learn-run-form { margin: 0; }
.learn-run-line { margin: -2px 0 12px; font-size: 12.5px; }
.wd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.proposal {
  margin-top: 12px; padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.proposal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.proposal-board { font-weight: 700; color: var(--fg); }
.proposal-when { font-size: 12.5px; word-spacing: .15em; }
.proposal-head .badge { margin-left: auto; }
.proposal-why { margin: 0 0 12px; }
.proposal-k, .crit-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.proposal-why p { margin: 2px 0 0; color: var(--fg); line-height: 1.6; overflow-wrap: anywhere; }
.proposal .alert { margin: 0 0 12px; }
.crit-block { margin-top: 12px; }
.crit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.crit-count { font-size: 12px; }
.word-diff {
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: min(60vh, 480px); overflow: auto;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg); font-size: 13.5px; line-height: 1.75;
}
/* 지울 부분 = 취소선, 더할 부분 = 강조(배경 + 밑줄). 색만으로 구분하지 않는다. */
.wd-del {
  padding: 0 1px; border-radius: 3px;
  background: var(--danger-bg); color: var(--danger);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.wd-del + .wd-ins { margin-left: 3px; }      /* 바꿈(지움 → 더함)이 붙어 보이지 않게 */
.wd-ins {
  padding: 0 1px; border-radius: 3px;
  background: var(--ok-bg); color: var(--ok); font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--ok);    /* 실색 밑줄 — 배경 대비 3:1 이상(색만으로 구분 안 함) */
}
/* 화면 읽기 프로그램용 표시(취소선·강조는 소리로 전달되지 않음) — 화면엔 안 보임 */
.word-diff .wd-del::before, .word-diff .wd-del::after,
.word-diff .wd-ins::before, .word-diff .wd-ins::after {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.word-diff .wd-del::before { content: " [지울 부분] "; }
.word-diff .wd-del::after { content: " [지울 부분 끝] "; }
.word-diff .wd-ins::before { content: " [더할 부분] "; }
.word-diff .wd-ins::after { content: " [더할 부분 끝] "; }
.cited-cases, .crit-full { margin-top: 10px; }
.cited-cases > summary, .crit-full > summary, .learn-history > summary {
  cursor: pointer; width: fit-content; font-size: 12.5px; font-weight: 600; color: var(--fg-2);
}
.cited-cases > summary:hover, .crit-full > summary:hover, .learn-history > summary:hover { color: var(--fg); }
.crit-full[open] > summary { margin-bottom: 6px; }
.cited-list { margin: 8px 0 0; padding-left: 18px; }
.cited-list li { margin: 3px 0; overflow-wrap: anywhere; }
.cite-no { margin-left: 6px; font-size: 12px; }
.proposal-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.proposal-actions form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.privacy-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
.proposal-no { font-size: 12px; font-variant-numeric: tabular-nums; }
.learn-history { margin-top: 14px; }
.learn-history[open] > summary { margin-bottom: 10px; }
.hist-why { max-width: 32em; overflow-wrap: anywhere; }

.learn-none { margin: 2px 0 0; font-size: 12.5px; }
.learn .row-actions .btn { white-space: nowrap; }

/* 최근 담당자 판단 기록 */
.learn-count { font-size: 12.5px; }
.badge.agr-over { color: var(--warn); background: var(--warn-bg); }
.decision-table td[data-label="판단 시각"] { white-space: nowrap; word-spacing: .15em; font-size: 12.5px; color: var(--fg-2); }
.decision-table td[data-label="게시판"] { white-space: nowrap; }
/* 한국어 제목·기록은 낱말 단위로 줄바꿈('미기재'가 '미/기재'로 갈리지 않게) */
.decision-table td.c-title { min-width: 11em; word-break: keep-all; overflow-wrap: anywhere; }
.decision-table td[data-label="기록"] { min-width: 7.5em; font-size: 12.5px; word-break: keep-all; }
@media (max-width: 640px) {
  .learn-kpis .stat-value { font-size: 24px; }
  .proposal { padding: 14px 12px; }
  .proposal-head .badge { margin-left: 0; }
  /* 카드형 표: 라벨 옆에 배지·설명이 한 줄로 이어지게 */
  .rcards .hist-cell {
    display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px;
    vertical-align: middle;
  }
}

/* ── 탭 (리스트) ─────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab {
  padding: 10px 14px; margin-bottom: -1px;
  color: var(--muted); font-size: 13.5px; font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .14s ease, border-color .14s ease;
}
.tab:hover { text-decoration: none; color: var(--fg); }
.tab.active { color: var(--accent-text); border-bottom-color: var(--accent); }
/* 언더라인 탭은 포커스 테두리를 안쪽에(가로 스크롤 영역에서 잘리지 않게). */
.tab:focus-visible, .rtab:focus-visible { outline-offset: -2px; border-radius: var(--radius-xs); }

/* ── 수동 실행 / 다음 폴링 / 결과 칩 ─────────────────────────────────── */
.run-result { margin-top: 12px; min-height: 24px; }
.next-poll {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  margin: 2px 0 14px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.next-poll::before {                    /* 자동 감시 동작 중 표시 점 */
  content: ""; align-self: center; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
  animation: gw-pulse 2.4s ease-in-out infinite;
}
.next-poll .np-label { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.next-poll .np-sep { color: var(--muted); }
.next-poll .np-abs { font-size: 15px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.next-poll .np-rel { color: var(--accent-text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.next-poll.is-imminent .np-rel { color: var(--warn); }
.next-poll.is-imminent::before { background: var(--warn-solid); }
.np-none { margin: 2px 0 14px; }
.run-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.run-stats .chip {
  padding: 5px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--fg-2); font-size: 13px;
}
.chip-num { font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ── 알림 박스 ───────────────────────────────────────────────────────── */
.alert {
  margin: 8px 0; padding: 10px 12px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.5;
}
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger-solid) 32%, transparent); }
.alert-warn  { background: var(--warn-bg);   color: var(--warn);   border-color: color-mix(in srgb, var(--warn-solid) 32%, transparent); }
.alert-ok    { background: var(--ok-bg);     color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 32%, transparent); }

/* ── HTMX 인디케이터 (기본 숨김, 요청 중 표시) ────────────────────────── */
.htmx-indicator {
  display: none; align-items: center; gap: 6px;
  margin-left: 8px; vertical-align: middle;
  color: var(--muted); font-size: 12.5px;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-flex; }
.spinner::before {
  content: ""; flex: none;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: gw-spin .7s linear infinite;
}

@keyframes gw-spin { to { transform: rotate(360deg); } }
@keyframes gw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ── 로그인 페이지 ───────────────────────────────────────────────────── */
.login-page {
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(640px 420px at 50% 18%, var(--glow), transparent 70%),
    radial-gradient(520px 380px at 82% 90%, var(--glow-2), transparent 70%),
    var(--bg);
}
.login-card {
  position: relative;
  width: 100%; max-width: 380px;
  padding: 32px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
}
.login-card::before {                   /* 상단 가장자리 그라디언트 헤어라인 */
  content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 1px;
  background: var(--ai-gradient); opacity: .75;
}
.login-mark { margin-bottom: 18px; }
.login-mark .brand-mark { width: 44px; height: 44px; border-radius: 12px; }
.login-mark .brand-mark svg { width: 26px; height: 26px; }
.login-card h1 { font-size: 24px; letter-spacing: .02em; margin: 0 0 4px; }
.login-card > .muted { margin: 0 0 20px; }
.login-card form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.login-card label { font-size: 12.5px; font-weight: 500; color: var(--fg-2); }
.login-card input { min-height: 42px; padding: 8px 12px; font-size: 14px; }
.login-card .btn-block { margin-top: 10px; min-height: 42px; font-size: 14px; }
.login-theme { position: fixed; top: 16px; right: 16px; }

/* ── 설정 페이지 ─────────────────────────────────────────────────────── */
.settings-form .settings-section { margin-bottom: 14px; }
.settings-form .settings-section:last-of-type { margin-bottom: 0; }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}
@media (max-width: 620px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }
.settings-grid .field { gap: 6px; }
.settings-grid input[type="number"],
.settings-grid input[type="time"],
.settings-grid input[type="text"],
.settings-grid select { width: 100%; max-width: 18rem; }
.field-hint { color: var(--muted); font-size: 12px; line-height: 1.45; }
p.field-hint { margin: 12px 0 0; }
.field-error { color: var(--danger); font-size: 12px; font-weight: 600; }
.field[data-error] input,
.field[data-error] select,
.field[data-error] textarea { border-color: var(--danger-solid); }
.form-actions {
  display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ── 하위 메뉴 화면(설정·AI 학습 공용 — 화면 정보구조 개편 §공통) ──────────
   넓은 화면: 본문 왼쪽 좁은 목록 + 오른쪽 내용. 휴대폰(<760px): 상위 주소(.is-index)는 목록만,
   하위 주소는 내용만 + 왼쪽 위 '‹ 목록'. JS 없이 CSS로만 전환. */
.subnav-layout {
  display: grid; grid-template-columns: 212px minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.subnav {
  position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.subnav-link {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-2); font-size: 13.5px; font-weight: 500;
  transition: background-color .14s ease, color .14s ease;
}
.subnav-link .icon { flex: none; width: 17px; height: 17px; color: var(--muted); }
.subnav-link:hover { background: var(--surface-3); color: var(--fg); text-decoration: none; }
.subnav-link.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.subnav-link.active .icon { color: var(--accent-text); }
.subnav-link:focus-visible { outline-offset: -2px; }
.subnav-text { display: flex; flex-direction: column; min-width: 0; }
.subnav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subnav-desc, .subnav-chev, .subnav-back { display: none; }
.subnav-body { min-width: 0; }
.subhead { margin: 0 0 16px; }
.subhead h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--fg); }
.subhead p { margin: 4px 0 0; font-size: 13px; }
.subhead-2 { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.subnav-body > .alert { margin-bottom: 14px; }

@media (max-width: 759.98px) {
  .subnav-layout { display: block; }
  /* 상위 주소: 목록만 — 항목마다 설명 한 줄 + 오른쪽 화살표 */
  .subpage.is-index .subnav-body { display: none; }
  .subpage.is-index .subnav { position: static; padding: 4px; }
  .subpage.is-index .subnav-link {
    min-height: 60px; padding: 8px 12px; gap: 12px;
    background: transparent; color: var(--fg); font-weight: 600;
  }
  .subpage.is-index .subnav-link + .subnav-link { border-top: 1px solid var(--border); border-radius: 0; }
  .subpage.is-index .subnav-link .icon { width: 20px; height: 20px; color: var(--accent-text); }
  .subpage.is-index .subnav-desc {
    display: block; margin-top: 2px;
    font-size: 12px; font-weight: 400; color: var(--muted);
    white-space: normal;
  }
  .subpage.is-index .subnav-chev { display: inline-flex; margin-left: auto; color: var(--muted); }
  .subpage.is-index .subnav-link .nav-badge + .subnav-chev { margin-left: 6px; }
  /* 하위 주소: 내용만 — 화면 제목(h2) 대신 '‹ 설정 목록' */
  .subpage:not(.is-index) .subnav { display: none; }
  .subpage:not(.is-index) .subpage-title {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .subpage:not(.is-index) .subnav-back {
    display: inline-flex; align-items: center; gap: 2px;
    min-height: 36px; margin: -6px 0 6px -6px; padding: 0 8px 0 2px;
    border-radius: var(--radius-sm);
    color: var(--accent-text); font-size: 13.5px; font-weight: 600;
  }
  .subnav-back .icon { width: 18px; height: 18px; }
  .subnav-back:hover { background: var(--surface-3); text-decoration: none; }
  .subhead h3 { font-size: 20px; }
}

/* 설정 예시 — 긴 설명 대신 실제로 나가는 메시지·가림 결과(src/web/setting_examples.py) */
.settings-grid .field-wide { grid-column: 1 / -1; }
.field-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.ex-label { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ex-msg {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 12.5px; line-height: 1.6; color: var(--fg-2);
}
.setting-example {
  margin-top: 2px; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.55; color: var(--fg-2);
}
.settings-grid .field-wide .setting-example { max-width: 46rem; }
.setting-example .ex-line { overflow-wrap: anywhere; }
.setting-example .ex-line + .ex-line { margin-top: 4px; }
.setting-example .ex-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 8px; }
.setting-example .ex-row + .ex-row { margin-top: 4px; }
.setting-example .ex-row .ex-label { margin: 0; padding-top: 1px; }
.setting-example-more > summary, .field-more > summary {
  cursor: pointer; width: fit-content; font-size: 12px; font-weight: 600; color: var(--accent-text);
}
.setting-example-more[open] > .ex-msg {
  margin-top: 6px; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.field-more > p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* 선택지마다 실제 메시지 카드 — 고른 것은 강조 테두리 */
.msg-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.msg-choice {
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .14s ease, background-color .14s ease;
}
.msg-choice:hover { border-color: var(--border-strong); }
.msg-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.msg-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.msg-choice-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--fg); }
.msg-choice-head input[type="radio"] { flex: none; }
.msg-choice .ex-msg { font-size: 12px; }
@media (max-width: 899.98px) { .msg-choices { grid-template-columns: minmax(0, 1fr); } }
/* 개인정보 가림 — 원래 글 → AI가 받는 글 */
.pii-preview {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 8px; margin-top: 14px;
}
.pii-box {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.pii-box p { margin: 0; font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.pii-after { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.pii-after .ex-label { color: var(--ok); }
.pii-arrow { display: inline-flex; color: var(--muted); }
@media (max-width: 899.98px) {
  .pii-preview { grid-template-columns: minmax(0, 1fr); }
  .pii-arrow { justify-self: center; transform: rotate(90deg); }
}

/* 설정 묶음 카드(fieldset) — 제목은 카드 머리처럼 */
/* 하위 메뉴 옆 본문이 좁은 폭(태블릿·작은 노트북)에선 입력칸을 한 줄에 하나씩(도움말이 눌리지 않게). */
@media (min-width: 760px) and (max-width: 1179.98px) {
  .subnav-body .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
fieldset.settings-card { min-width: 0; margin: 0; }
fieldset.settings-card + fieldset.settings-card { margin-top: 16px; }
fieldset.settings-card > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 14px;
  font-size: 15px; font-weight: 700; color: var(--fg);
}
fieldset.settings-card > legend + * { clear: both; }
.settings-more { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.settings-more > summary {
  cursor: pointer; width: fit-content;
  color: var(--accent-text); font-size: 13px; font-weight: 600;
}
.settings-more[open] > summary { margin-bottom: 14px; }
.settings-link { margin: 14px 0 0; font-size: 13px; }
.settings-link a { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.settings-link .icon { width: 15px; height: 15px; }
/* 저장 단추 줄 — 긴 화면에서도 늘 보이게 아래에 붙인다. */
.form-actions.save-bar {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 16px; padding: 12px 0;
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
  border-top: 0;
}
.form-actions.save-bar .btn { min-width: 96px; }
@media (max-width: 759.98px) {
  .form-actions.save-bar { padding: 10px 0 12px; }
  .form-actions.save-bar .btn { flex: 1; min-height: 44px; }     /* 휴대폰: 엄지로 누르기 쉽게 */
}
/* 게시판·분류 탭 — 넘치면 가로로 밀어 본다(휴대폰) */
.tabs-scroll { overflow-x: auto; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tab-off {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 600;
}
.accounts-page .cards-2col + .card { margin-top: 16px; }
/* 변경 이력: 분류 탭 + '누가' 고르기 한 줄 */
.history-bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px;
  flex-wrap: wrap; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.history-bar .tabs { border-bottom: 0; margin-bottom: 0; }
.history-filter { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.history-filter label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.history-filter select { min-width: 9rem; }
.history-pager { justify-content: center; margin-top: 12px; }
.audit-long > summary { cursor: pointer; list-style: none; }
.audit-long > summary::-webkit-details-marker { display: none; }
.audit-long > summary::after { content: " 펼치기"; color: var(--accent-text); font-size: 12px; white-space: nowrap; }
.audit-long[open] > summary { font-size: 0; }          /* 펼치면 앞부분 대신 '접기'만 */
.audit-long[open] > summary::after { content: "접기"; }
/* 변경 이력 표 — 한국어는 낱말 단위로 줄바꿈, 사람·시각은 한 줄(본문 폭이 좁아도 행이 길어지지 않게) */
.audit-table td { word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 641px) {
  .audit-table td[data-label="항목"] { min-width: 12em; }
  .audit-table td[data-label="이전 값"], .audit-table td[data-label="새 값"] { min-width: 8em; }
  .audit-table td[data-label="변경자"],
  .audit-table td[data-label="시각"] { white-space: nowrap; }
}
.history-count { margin: 10px 0 0; font-size: 12.5px; text-align: right; }

/* ── 텔레그램 설정 섹션 ──────────────────────────────────────────────── */
.tg-actions { justify-content: flex-end; }
#tg-form input[type="password"],
#tg-form input[type="text"] { width: 100%; max-width: 26rem; }
.tg-test-result { margin-top: 12px; min-height: 20px; }
.tg-test {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 13px;
}
.tg-test .tg-test-icon { font-size: 15px; line-height: 1; }
.tg-test-msg { overflow-wrap: anywhere; }
.tg-test.ok  { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.tg-test.err { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger-solid) 32%, transparent); }

/* ── 게시판별 설정 카드 ──────────────────────────────────────────────── */
.board-cards { display: flex; flex-direction: column; gap: 12px; }
.board-card {
  padding: 20px 20px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.board-card .form-actions.save-bar { margin: 4px -20px 0; padding: 12px 20px; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); }
.board-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.board-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--fg); }
.board-card-row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 12px 24px;
  margin-bottom: 12px;
}
.board-card .field { gap: 6px; margin-bottom: 10px; }
.board-card textarea.criteria {
  width: 100%; min-height: 56px; resize: vertical;
  font-size: 13px; line-height: 1.5;
}

/* ── 삭제리스트 ──────────────────────────────────────────────────────── */
/* 상단 '진행 중 · 실패' 카드(UI 2단계 §4) */
.prog-card { margin-bottom: 16px; }
.prog-sub { margin: 4px 0 6px; }
.prog-howto { margin-bottom: 10px; }
.prog-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.prog-who { display: block; white-space: nowrap; }
.prog-when { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; word-spacing: .15em; }
.prog-error { max-width: 22em; overflow-wrap: anywhere; }
.prog-table td[data-label="게시판"], .prog-table td[data-label="상태"] { white-space: nowrap; }
/* 상단: 달력(좌) + 승인자별 집계(우) 2열 — 넓은 화면에서 우측 여백 활용. */
.del-top {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 16px; align-items: start;
  margin-bottom: 16px;
}
.del-top > .card, .del-top > .cal-card { margin: 0; }
@media (max-width: 1180px) { .del-top { grid-template-columns: minmax(0, 1fr); } }

/* ── 주간 삭제 리포트 ────────────────────────────────────────────────── */
.report > .cal-head {
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.needs-review td { background: color-mix(in srgb, var(--warn-solid) 8%, transparent); }
/* 공지 제외 행: 흐리게 + 제목 취소선. 되돌리는 '공지 포함' 버튼·삭제사유 칸은 흐리게 하지 않는다. */
.nc-excluded td:not([data-label="공지"]):not([data-label="삭제사유"]) { opacity: .5; }
.nc-excluded td.c-title { text-decoration: line-through; }
.nc-unverified td { background: color-mix(in srgb, var(--warn-solid) 12%, transparent); }
.nc-unverified .nc-eff { color: var(--fg-2); }    /* 노란 바탕 위 muted는 대비 부족 → 한 단계 진하게 */
.nc-form { display: inline; margin: 0; }
.nc-form select { margin-top: 4px; max-width: 12rem; min-height: 30px; padding-top: 4px; padding-bottom: 4px; font-size: 12.5px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nc-eff { display: block; font-size: 12.5px; color: var(--muted); }
.nc-head-meta { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.nc-publish { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.nc-publish form { display: inline; margin: 0; }
.nc-publish .badge { white-space: normal; }
.notice-copy { margin-top: 12px; }
.notice-copy summary {
  cursor: pointer; user-select: none;
  color: var(--accent-text); font-size: 13px; font-weight: 600;
}
.notice-copy textarea {
  width: 100%; margin-top: 8px; padding: 10px 12px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  white-space: pre;
  background-color: var(--surface-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  resize: vertical;
}

/* 주간 리포트 게시판 탭 */
.rtabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin: 12px 0 16px;
}
.rtab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent;
  background: none; cursor: pointer;
  color: var(--muted); font-size: 13.5px; font-weight: 600;
  transition: color .14s ease, border-color .14s ease;
}
.rtab:hover { color: var(--fg); }
.rtab.active { color: var(--accent-text); border-bottom-color: var(--accent); }
.rtab-name { white-space: nowrap; }
.rtab-count {
  padding: 1px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--fg-2);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rtab.active .rtab-count { background: var(--accent-soft); color: var(--accent-text); }
.rtab-attn {
  padding: 1px 7px; border-radius: 999px;
  background: var(--danger-bg); color: var(--danger);
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rpanel[hidden] { display: none; }
.rpanel .nc-publish { margin-top: 2px; }

/* ── 달력(삭제리스트 날짜 / 주간 리포트 주 선택) ─────────────────────── */
.cal-card { margin: 10px 0 16px; max-width: 30rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-title { font-size: 14.5px; font-weight: 700; color: var(--fg); }
.cal-nav {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--fg-2);
  font-size: 17px; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.cal-nav:hover { background: var(--surface-3); color: var(--fg); text-decoration: none; }
.cal-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cal-grid th { padding: 6px 0; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; }
.cal-grid th.dow-sun { color: var(--danger); }
.cal-grid th.dow-sat { color: var(--minwon); }
.cal-grid td.cal-cell { height: 48px; padding: 0; border: 1px solid var(--border); vertical-align: top; }
.cal-grid td.cal-cell .cal-day {
  display: block; padding: 4px 6px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.cal-grid td.cal-out { background: var(--surface-2); }
.cal-grid td.cal-out .cal-day { opacity: .45; }
/* 삭제가 있는 날: 셀 전체가 링크(카운트 배지 표시). */
.cal-grid td.cal-has a {
  display: flex; flex-direction: column; align-items: stretch;
  height: 100%; min-height: 47px;
  color: var(--fg); text-decoration: none;
  transition: background-color .12s ease;
}
.cal-grid td.cal-has a:hover { background: var(--surface-3); text-decoration: none; }
.cal-grid td.cal-has .cal-day { color: var(--fg); font-weight: 700; }
.cal-grid td.cal-has .cal-count {
  align-self: flex-start; margin: auto 6px 5px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn);
  font-size: 11px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cal-grid td.cal-sel { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-grid a:focus-visible { outline-offset: -2px; }   /* 칸을 꽉 채운 링크 — 테두리를 칸 안쪽에 */
.cal-grid td.cal-sel .cal-count { background: var(--accent-solid); color: var(--accent-fg); }

/* 월간 리포트 달 이동(‹ 2026년 9월 ›) */
.report-month { margin-bottom: 14px; }
.report-month .cal-title { font-weight: 700; color: var(--fg); }
/* 선택한 주가 다른 달에 걸치면(예: 9.27~10.3) 그 줄의 다른 달 칸도 같은 주로 강조. */
.cal-grid tr:has(> .cal-week) > .cal-out { background: var(--accent-soft); }
.cal-grid td.cal-today .cal-day {
  display: inline-block; margin: 3px 0 0 3px; padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--accent-solid); color: var(--accent-fg); font-weight: 700;
}

/* ── 공용 표 래퍼(.tablewrap) ────────────────────────────────────────── */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 지자체 점검 ─────────────────────────────────────────────────────── */
#lg-q { min-width: 14rem; }
td.lg-set { color: var(--muted); font-weight: 500; white-space: nowrap; }
td.lg-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.lg-topbar > .lg-tabs { border-bottom: 0; }
.lg-actionbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
/* 목록 화면: '통계' 버튼(왼쪽)과 '지금 수집·수집 설정'(오른쪽)을 한 줄에. */
.lg-topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 12px; margin-bottom: 12px;
}
.lg-topbar > .lg-tabs, .lg-topbar > .lg-actionbar { margin: 0; }
.lg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stats-block { margin: 16px 0; }

/* 지자체 점검 — 지도(실제 지형). 삭제율 5단계 = 파랑 한 가지 진하기(밝은·어두운 화면 각각 검증한 단계,
   어두운 화면은 높을수록 밝게). 빗금 = 삭제율 없음(수집 전·삭제 추적 안 함), 회색 = 점검하지 않는 곳. */
:root {
  --lg-b0: #184f95; --lg-b1: #256abf; --lg-b2: #3987e5; --lg-b3: #6da7ec; --lg-b4: #b7d3f6;
  --lg-label: #e8ecf3; --lg-halo: rgba(10, 12, 16, .78);
}
:root[data-theme="light"] {
  --lg-b0: #86b6ef; --lg-b1: #5598e7; --lg-b2: #2a78d6; --lg-b3: #1c5cab; --lg-b4: #104281;
  --lg-label: #141821; --lg-halo: rgba(255, 255, 255, .85);
}
.lg-map-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; }
.lg-map-head h3 { margin: 0; }
.lg-crumb { font-weight: 600; }
.lg-crumb-sep { color: var(--muted); }
.lg-map-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .lg-map-layout { grid-template-columns: 1fr; } }
.lg-map-card { margin: 0; padding: 14px; }
.lg-map { display: block; width: 100%; height: auto; max-height: 72vh; }
.lg-area path { stroke: var(--surface); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lg-area.b0 path { fill: var(--lg-b0); }
.lg-area.b1 path { fill: var(--lg-b1); }
.lg-area.b2 path { fill: var(--lg-b2); }
.lg-area.b3 path { fill: var(--lg-b3); }
.lg-area.b4 path { fill: var(--lg-b4); }
.lg-area.is-none path { fill: url(#lg-hatch); }
.lg-area.is-off path { fill: var(--surface-3); }
.lg-hatch-bg { fill: var(--surface-2); }
.lg-hatch-line { stroke: var(--muted); stroke-width: 1.4; opacity: .55; }
a .lg-area { cursor: pointer; }
a:hover .lg-area path, a:focus-visible .lg-area path { stroke: var(--fg); stroke-width: 2px; }
.lg-label {
  fill: var(--lg-label); font-weight: 700; pointer-events: none;
  paint-order: stroke; stroke: var(--lg-halo); stroke-width: 3px; stroke-linejoin: round;
}
.lg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: 12.5px; }
.lg-legend ul { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.lg-legend li { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-2); }
.lg-legend-title { font-weight: 700; color: var(--fg); }
.lg-sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--border); }
.lg-sw.b0 { background: var(--lg-b0); } .lg-sw.b1 { background: var(--lg-b1); }
.lg-sw.b2 { background: var(--lg-b2); } .lg-sw.b3 { background: var(--lg-b3); }
.lg-sw.b4 { background: var(--lg-b4); }
.lg-sw.is-none { background: repeating-linear-gradient(45deg, var(--surface-2) 0 3px, var(--muted) 3px 4px); }
.lg-sw.is-off { background: var(--surface-3); }
.lg-map-cap { margin-top: 8px; font-size: 12px; }
.lg-map-side { padding: 14px; }
.lg-map-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.lg-map-sum > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.lg-sum-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-sum-k { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .lg-map-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lg-map-table td a { font-weight: 600; }
.lg-map-note { margin: 10px 0 0; font-size: 12.5px; }
@media (forced-colors: active) {
  .lg-area path { stroke: CanvasText; }
  .lg-area.is-off path { fill: Canvas; }
}
.account-rename-label { display: block; width: 100%; font-size: 12px; color: var(--muted); margin-top: 6px; }
th.lg-sort { cursor: pointer; user-select: none; transition: color .12s ease; }
th.lg-sort:hover { color: var(--fg); }
th.lg-sort::after { content: " \2195"; opacity: .35; font-size: .85em; }          /* ↕ 정렬 가능 */
th.lg-sort.sort-asc::after { content: " \25B2"; opacity: 1; font-size: .7em; color: var(--accent-text); }   /* ▲ */
th.lg-sort.sort-desc::after { content: " \25BC"; opacity: 1; font-size: .7em; color: var(--accent-text); }  /* ▼ */
tr.lg-deleted td { color: var(--danger); text-decoration: line-through; }
tr.lg-deleted a, tr.lg-deleted td.c-title a { color: var(--danger); }
/* 상태 배지의 취소선은 제외(가독성) */
tr.lg-deleted .badge { text-decoration: none; }

/* 수집/저장 알림 */
.lg-notice {
  margin: 8px 0; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); border-radius: var(--radius-sm);
  background: var(--ok-bg); color: var(--ok);
  font-size: 13px;
}
.lg-notice.is-error { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger-solid) 32%, transparent); }
.lg-notice.is-busy  { background: var(--warn-bg);   color: var(--warn);   border-color: color-mix(in srgb, var(--warn-solid) 32%, transparent); }

/* 수집 설정 모달 */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-card {
  width: 100%; max-width: 32rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 14.5px; color: var(--fg); }
.modal-x {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.modal-x:hover { background: var(--surface-3); color: var(--fg); }
.modal-card form { padding: 16px 18px 18px; }
.modal-card .form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px; align-items: end;
}
.modal-card .form-grid .field { min-width: 0; }
.modal-card .form-grid input:not([type="checkbox"]),
.modal-card .form-grid select { width: 100%; }
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ── 모바일(≤640px): 폼·필터 세로 스택 + 레코드 목록 표 → 카드 ─────────── */
@media (max-width: 640px) {
  /* 일반 표(카드형 아님): 칸 여백·머리글 줄바꿈 허용으로 폭을 줄인다. */
  .grid th, .grid td, .del-table th, .del-table td { padding: 8px; }
  .grid thead th, .del-table thead th { white-space: normal; }
  .del-top .del-table thead th { white-space: nowrap; }

  .filters .filter-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .filters .field { flex-direction: column; align-items: stretch; gap: 6px; }
  .filters .field > label, .filters .chip-label { font-size: 12px; }
  .filters .field.actions { margin-left: 0; flex-direction: row; align-items: center; }
  #results-filters .filter-main {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  }
  #results-filters .filter-main > .field.actions { justify-content: flex-end; }
  #results-filters select { min-width: 0; }
  .filters input:not([type="radio"], [type="checkbox"]), .filters select { width: 100%; max-width: none; font-size: 16px; }
  #lg-q { min-width: 0; }
  .form-grid, .settings-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .form-grid { flex-direction: column; align-items: stretch; }
  .form-grid .field { min-width: 0; }
  .form-grid input:not([type="checkbox"]), .form-grid select { width: 100%; }
  .settings-grid input:not([type="checkbox"], [type="radio"]), .settings-grid select,
  #tg-form input:not([type="checkbox"]), #tg-form textarea { max-width: none !important; width: 100%; }
  .modal-overlay { padding: 16px 10px; }

  /* 레코드 목록 표 → 카드(구분선 방식 — .card 안에 중첩돼도 깔끔) */
  .rcards thead { display: none; }
  .rcards, .rcards tbody, .rcards tr, .rcards td { display: block; width: auto; }
  .rcards tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .rcards tbody tr:last-child { border-bottom: none; }
  .rcards td {
    border: none; padding: 2px 0; font-size: 13.5px; white-space: normal; text-align: left;
    overflow-wrap: anywhere;                       /* 긴 설정 키·URL도 카드 폭 안에서 줄바꿈 */
  }
  .rcards td.num, .rcards th.num { text-align: left; }
  .rcards td::before {
    content: attr(data-label) ": "; color: var(--muted); font-size: 12px; font-weight: 600; margin-right: 4px;
  }
  .rcards td:not([data-label])::before { content: none; }   /* 빈 상태 행 등 라벨 없는 칸 */
  .rcards td[colspan].muted { padding: 20px 0; text-align: center; }
  .rcards td.c-title { font-size: 15px; font-weight: 600; line-height: 1.4; padding-bottom: 4px; }
  .rcards td.c-title::before { content: none; }
  .rcards td:empty { display: none; }              /* 값 없는 셀은 숨겨 잡음 제거 */
  .grid.clickable.rcards tr { padding: 10px 14px; }
  .grid.clickable.rcards tbody tr:last-child > td { border-radius: 0; }
  /* 결번(지자체 점검) 카드: 좌측 빨간 띠 */
  .rcards tr.lg-deleted { border-left: 3px solid var(--danger-solid); padding-left: 10px; }

  /* 주간 리포트: 탭은 가로 스크롤(넘치면), 카드 안 드롭다운·버튼 폭 확보 */
  .rtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rtab { white-space: nowrap; padding: 10px 10px; }
  .rcards .nc-form { display: block; }
  .rcards .prog-who, .rcards .prog-when { display: inline; }
  .rcards .prog-when { margin-left: 6px; }
  .rcards .nc-form select { width: 100%; max-width: 100%; }
  .rcards td[data-label="공지"] .btn { width: 100%; }
  /* 라벨('처리:' 등)과 값이 한 줄로 이어지게 */
  .rcards .proc-states {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; vertical-align: middle;
  }
}

/* ── 고대비 모드(Windows forced-colors) ─────────────────────────────── */
/* 차트 막대·도넛은 원래 색을 유지하므로 범례 색칸도 원래 색으로 둔다(막대와 범례가 맞게).
   SVG 글자·근거 하이라이트·더할 부분은 시스템 색으로 보이게 한다. */
@media (forced-colors: active) {
  .swatch, .hl-swatch { forced-color-adjust: none; }
  .donut-total, .donut-sub { fill: CanvasText; }
  mark.ev-hl { background: Mark; color: MarkText; text-decoration: underline; }
  .wd-ins { text-decoration: underline; }
  .wd-del { text-decoration: line-through; }
  .nav-badge.nb-danger { border: 1px solid CanvasText; }
  .action-state { border: 1px dashed CanvasText; }
}

/* ── 모션 ────────────────────────────────────────────────────────────── */
/* 화면 밝기 전환 순간에는 색 전환 애니메이션을 끈다(theme.js가 잠깐 붙임). */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* 로딩 표시는 의미가 있으므로 느리게 유지 */
  .spinner::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* ── 알림 기록 · 알림 채널 상태 (알림 2중화) ── */
.alert-filters { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.alert-filters .chip { text-decoration: none; }
.alert-table .c-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.alert-table .c-kind, .alert-table .btn, .alert-idx { white-space: nowrap; }
.alert-board { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.alert-summary { color: var(--fg-2); }
.badge + .alert-summary { margin-left: 6px; }
.alert-pager { justify-content: center; margin-top: 12px; }
.dchip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.dchip.ds-sent { color: var(--ok); background: var(--ok-bg); }
.dchip.ds-wait { color: var(--warn); background: var(--warn-bg); }
.dchip.ds-fail { color: var(--danger); background: var(--danger-bg); }
.dchip.ds-none { color: var(--muted); background: transparent; }
/* 알림 기록 위 채널 상태 한 줄 */
.ch-summary {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 14px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--fg-2);
}
.ch-item { display: inline-flex; align-items: center; gap: 7px; }
.ch-item strong { color: var(--fg); font-weight: 700; }
.alert-tabs { margin-bottom: 10px; }
.alert-kinds { margin: 0 0 12px; }
.alert-kinds .chip { text-decoration: none; }
.tab-count.tc-bad { background: var(--danger-bg); color: var(--danger); }
.results-tabs { margin-bottom: 12px; }
.ch-lines { display: flex; flex-direction: column; gap: 4px; }
.ch-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.ch-dot.ch-ok { background: var(--ok); }
.ch-dot.ch-wait { background: var(--warn-solid); }
.ch-dot.ch-bad { background: var(--danger-solid); }
.ch-name { font-weight: 600; min-width: 4.5em; }
.ch-text { color: var(--fg-2); }
/* 현황 시스템 상태 칸(좁음) — 채널 이름 아래 줄에 상태를 둬 줄바꿈 모양을 맞춘다 */
.ch-lines { gap: 6px; }
.ch-lines .ch-line { row-gap: 0; }
.ch-lines .ch-text { flex-basis: 100%; padding-left: 17px; font-size: 13px; }

/* ── 웹 알림 · 알림 받는 기기 (웹앱 명세 §3) ── */
/* 버튼·띠는 display를 갖고 있어 hidden 속성이 이기도록 범위를 좁혀 강제한다 */
.push-nudge[hidden], .notify-page [hidden] { display: none !important; }
.login-next {
  margin: -12px 0 14px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-text); font-size: 13px;
}
.push-nudge {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--fg);
  font-size: 13.5px;
}
.push-nudge-icon { display: inline-flex; color: var(--accent-text); }
.push-nudge-text { flex: 1 1 260px; min-width: 0; }
.push-cards { margin-bottom: 14px; align-items: start; }
.push-device h3, .push-guide h3, .device-list h3 { margin-top: 0; }
.push-state { margin: 4px 0 12px; font-size: 14px; line-height: 1.55; color: var(--fg); }
.push-device[data-state="on"] .push-state { color: var(--ok); }
.push-device[data-state="blocked"] .push-state,
.push-device[data-state="failed"] .push-state,
.push-device[data-state="keychanged"] .push-state { color: var(--warn); }
.push-label-field { max-width: 320px; }
.push-msg { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; }
.push-guide .guide { border-top: 1px solid var(--border); padding: 10px 0; }
.push-guide .guide:first-of-type { border-top: 0; padding-top: 2px; }
.push-guide summary { cursor: pointer; font-weight: 600; }
.push-guide p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.guide-steps { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.guide-steps li + li { margin-top: 4px; }
.device-table .device-name { font-weight: 600; }
.device-table .device-this { margin-left: 6px; }
.device-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.device-actions .nc-form { margin: 0; }
.device-rename > summary { list-style: none; }
.device-rename > summary::-webkit-details-marker { display: none; }
.device-rename-form { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.device-rename-form input { min-width: 0; width: 180px; max-width: 100%; }
.push-foot { margin-top: 12px; font-size: 12.5px; }
@media (max-width: 640px) {
  /* 휴대폰 카드 모양에서도 기기 관리 버튼을 한 줄에(이름 바꾸기 입력은 아래로 펼침) */
  .rcards td.device-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .rcards td.device-actions::before { flex-basis: 100%; }
  .rcards .device-actions .nc-form { display: inline-block; }
  .device-rename[open] { flex-basis: 100%; }
}

/* ── 웹 조치 패리티 · 휴대폰 검토함 (웹앱 명세 §4) ── */
.btn-lg { min-height: 48px; padding: 10px 18px; font-size: 15px; border-radius: var(--radius); }
.btn-lg .icon { width: 18px; height: 18px; }
.action-flash { margin: 0 0 12px; }
.flash-link { margin-left: 6px; }
.pending-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pending-inbox .icon { width: 15px; height: 15px; }

/* 삭제 이유(조례 호) 고르기 — [🗑 삭제 요청]을 누르면 펼쳐진다(스크립트 없음) */
.reason-picker { display: inline-block; position: relative; max-width: 100%; }
.reason-picker > summary { list-style: none; user-select: none; }
.reason-picker > summary::-webkit-details-marker { display: none; }
.reason-picker[open] > summary { box-shadow: 0 0 0 2px var(--ring); }
/* 펼쳤을 때 옆 버튼이 패널 가운데로 내려가지 않게(위쪽 맞춤) */
.action-main:has(> .reason-picker[open]) { align-items: flex-start; }
.reason-panel {
  margin-top: 8px; padding: 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  width: min(520px, calc(100vw - 48px));
}
.reason-hint { margin: 0 0 10px; font-size: 13px; color: var(--fg-2); }
.reason-form { margin: 0; }
/* 조치 줄·검토함의 폼 배치 규칙(inline-flex)보다 우선 — 이유 버튼 격자가 줄어들지 않게 */
.action-main .reason-form, .inbox-actions .reason-form { display: block; }
.reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reason-btn {
  flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 52px; padding: 8px 12px; text-align: left;
}
.reason-main { font-size: 14px; font-weight: 700; }
/* 보조 설명은 흐리게(opacity) 하지 않는다 — 밝은 화면에서 글자 대비 4.5:1 아래로 떨어진다. */
.reason-sub { font-size: 12px; font-weight: 500; line-height: 1.35; }
.reason-none { grid-column: 1 / -1; }
/* 나머지 사유(제1·2·3·7호)는 펼쳐야 보인다 — 자주 쓰는 4개 아래, '사유 없이' 위 */
.reason-more { margin: 8px 0; }
.reason-more > summary { list-style: none; cursor: pointer; width: 100%; justify-content: center; }
.reason-more > summary::-webkit-details-marker { display: none; }
.reason-more[open] > summary { margin-bottom: 8px; }
@media (max-width: 540px) {
  .reason-picker { display: block; }
  .reason-picker > summary { display: flex; width: 100%; }
  .reason-panel { width: auto; }
  .reason-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 검토함 — 넓은 화면(≥1100px): 왼쪽 목록 + 오른쪽 고른 글. 그보다 좁으면 목록 → 글 2단계
   (첫 화면 .is-index는 목록만, 글을 고르면 글만 + '‹ 목록'·'다음 글 ›'). */
.inbox-split {
  display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.inbox-list-col {
  position: sticky; top: 16px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.inbox-filters { padding: 4px 12px 10px; border-bottom: 1px solid var(--border); }
.inbox-tabs { margin-bottom: 10px; }
.inbox-tabs .tab { padding: 10px 8px; font-size: 13px; }
.tab-count, .chip-count {
  margin-left: 5px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--fg-2);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tab.active .tab-count { background: var(--accent-soft-2); color: var(--accent-text); }
.inbox-boards .chip { text-decoration: none; font-size: 12px; }
.inbox-list-wrap { overflow-y: auto; min-height: 0; }
.inbox-list { list-style: none; margin: 0; padding: 6px; }
.inbox-item {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 9px 10px 9px 14px; border-radius: var(--radius-sm);
  color: var(--fg); text-decoration: none;
}
.inbox-item::before {                          /* 판정 색 막대 */
  content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px;
  width: 3px; border-radius: 2px; background: var(--tier-normal);
}
.inbox-item.tone-clear::before { background: var(--tier-clear); }
.inbox-item.tone-suspect::before { background: var(--tier-suspect); }
.inbox-item.tone-dup::before { background: var(--accent); }
.inbox-item:hover { background: var(--surface-3); text-decoration: none; }
.inbox-item.active { background: var(--accent-soft); }
.inbox-item:focus-visible { outline-offset: -2px; }
.ii-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ii-tier { font-weight: 700; }
.ii-tier.t-clear { color: var(--tier-clear-fg); }
.ii-tier.t-suspect { color: var(--tier-suspect-fg); }
.ii-tier.t-dup { color: var(--accent-text); }
.ii-board { color: var(--fg-2); font-weight: 600; }
.ii-auto { display: inline-flex; color: var(--warn); }
.ii-auto .icon { width: 13px; height: 13px; }
.ii-when { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ii-title {
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-item.active .ii-title { font-weight: 700; }
.inbox-none, .inbox-cap { margin: 0; padding: 14px; font-size: 13px; }
.inbox-cap { border-top: 1px solid var(--border); font-size: 12px; }
.inbox-detail { min-width: 0; }
.inbox-back, .inbox-next { display: none; }
.inbox-fullbody { margin-top: 12px; }
.inbox-fullbody > summary { cursor: pointer; width: fit-content; color: var(--accent-text); font-size: 13px; font-weight: 600; }
.inbox-fullbody .body-text {
  margin-top: 8px; padding: 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); max-height: 420px; overflow-y: auto;
}
@media (max-width: 1099.98px) {
  .inbox-split { display: block; }
  .inbox-list-col { position: static; max-height: none; }
  .inbox.is-index .inbox-detail { display: none; }
  .inbox:not(.is-index) .inbox-list-col { display: none; }
  .inbox:not(.is-index) .inbox-back {
    display: inline-flex; align-items: center; gap: 2px;
    min-height: 36px; margin: 0 0 6px -6px; padding: 0 8px 0 2px;
    border-radius: var(--radius-sm);
    color: var(--accent-text); font-size: 13.5px; font-weight: 600;
  }
  .inbox-back:hover { background: var(--surface-3); text-decoration: none; }
  .inbox-back .icon, .inbox-next .icon { width: 18px; height: 18px; }
  .inbox:not(.is-index) .inbox-next {
    display: flex; justify-content: center; align-items: center; gap: 2px;
    width: 100%; min-height: 44px; margin-top: 12px;
  }
  .inbox-fullbody .body-text { max-height: none; }
  /* 목록만 보이는 첫 화면에선 '고른 글' 강조가 뜻이 없다 */
  .inbox.is-index .inbox-item.active { background: transparent; }
  .inbox.is-index .inbox-item.active .ii-title { font-weight: 500; }
  /* 글 화면: 머리(제목·건수) 대신 '‹ 검토함 목록'으로 시작해 글이 바로 보이게 */
  .inbox:not(.is-index) .inbox-head {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}
.inbox-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.inbox-head h2 { margin: 0; }
.inbox-head h2 + p.inbox-sub { margin: 4px 0 0; font-size: 13px; }
.inbox-card { border-left-width: 4px; --hl-bg: var(--accent-soft-2); --hl-line: var(--accent-text); }
.inbox-card.tone-clear { border-left-color: var(--tier-clear);
  --hl-bg: var(--tier-clear-bg); --hl-line: var(--tier-clear-fg); }
.inbox-card.tone-suspect { border-left-color: var(--tier-suspect);
  --hl-bg: var(--tier-suspect-bg); --hl-line: var(--tier-suspect-fg); }
.inbox-card.tone-dup { border-left-color: var(--accent); }
.inbox-card .hero-placement { margin-top: 10px; }
.inbox-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.inbox-board { font-weight: 700; color: var(--fg); }
.inbox-when, .inbox-no { color: var(--muted); font-size: 12.5px; }
.inbox-no { margin-left: auto; }
.inbox-title {
  margin: 12px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.45;
  color: var(--fg); overflow-wrap: anywhere;
}
.inbox-excerpt {
  margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg-2);
  font-size: 14px; line-height: 1.6; overflow-wrap: anywhere;
}
.inbox-reason { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--fg); }
.inbox-ev { margin: 0 0 10px; align-items: center; }
.inbox-ev .ev-label { padding-top: 0; }
.inbox-similar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 0 0 10px; font-size: 13px; color: var(--fg-2);
}
.inbox-similar-title { min-width: 0; overflow-wrap: anywhere; color: var(--fg); }
.inbox-auto {
  margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn); font-size: 13.5px; font-weight: 600;
}
.inbox-note { margin: 0 0 10px; font-size: 13px; }
.inbox-card .action-note { margin: 0 0 10px; }
.inbox-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.inbox-actions form { margin: 0; display: flex; }
.inbox-actions form > .btn, .inbox-actions > .btn { width: 100%; }
.inbox-actions .reason-picker { display: block; grid-column: 1 / -1; }
.inbox-actions .reason-picker > summary { display: flex; width: 100%; }
.inbox-actions .reason-panel { width: auto; box-shadow: none; }
.inbox-links {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  margin-top: 14px;
}
.inbox-links .icon { width: 13px; height: 13px; vertical-align: -2px; }
.inbox-empty { text-align: center; padding: 28px 18px; }
.inbox-empty p { margin: 0 0 10px; }
.inbox-empty-icon { display: inline-flex; color: var(--ok); margin-bottom: 6px; }
.inbox-empty-icon .icon { width: 32px; height: 32px; }
@media (max-width: 540px) {
  .inbox-actions { grid-template-columns: minmax(0, 1fr); }
  .inbox-title { font-size: 16px; }
  .inbox-no { margin-left: 0; }
}

/* ── 담당자 계정 (웹앱 명세 §5) — 계정 관리 · 내 계정 · 권한 안내 ── */
.userbox a.user-link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; margin: -4px -6px; border-radius: var(--radius-sm);
  color: var(--fg-2); font-size: 13px; font-weight: 500; text-decoration: none;
}
.userbox a.user-link:hover, .userbox a.user-link[aria-current="page"] { background: var(--accent-soft); }
.user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-role { font-size: 11.5px; font-weight: 500; color: var(--muted); }
/* 강조 배경(마우스를 올렸을 때·내 계정 화면) 위에서는 더 밝게 — 어두운 화면 대비 4.5:1 */
.userbox a.user-link:hover .user-role,
.userbox a.user-link[aria-current="page"] .user-role { color: var(--fg-2); }
.readonly-note { margin: 8px 0 0; font-size: 13px; }
.login-remember { margin-top: 4px; font-weight: 400; }
.login-remember span { font-size: 13px; color: var(--fg-2); }
.login-help { margin: 14px 0 0; font-size: 12.5px; text-align: center; }
.account-form .checkbox { margin: 6px 0 2px; }
.account-first .alert p { margin: 0 0 6px; }
.account-first .alert p:last-child { margin-bottom: 0; }
.account-issued { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.account-issued h3 .icon { width: 16px; height: 16px; vertical-align: -3px; }
.temp-password { margin: 10px 0; }
.temp-password .code, .tg-actor-list .code {
  font-family: var(--font-mono); letter-spacing: .04em;
}
.temp-password .code {
  display: inline-block; padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px dashed var(--border);
  font-size: 20px; font-weight: 700; color: var(--fg); user-select: all;
}
.role-help { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.role-help li { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); }
.role-help .badge { margin-right: 2px; }
.account-table .account-username { font-size: 12.5px; }
.account-table tr.account-off .account-name { color: var(--muted); }
.account-role-form, .account-tg-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.account-role-form { flex-wrap: nowrap; }
.account-role-form select { min-width: 6.5rem; }
.account-tg { display: inline-block; }
.account-tg > summary { list-style: none; display: inline-flex; }
.account-tg > summary::-webkit-details-marker { display: none; }
.account-tg-form { margin-top: 6px; }
.account-tg-form input { width: 10rem; }
.account-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-actor-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--fg-2); }
.account-kv { display: grid; gap: 8px; font-size: 14px; }
.account-kv > div { overflow-wrap: anywhere; }
.account-password h3 .icon { width: 16px; height: 16px; vertical-align: -3px; }
.forbidden-page { display: flex; justify-content: center; padding-top: 6vh; }
.forbidden-card { max-width: 520px; width: 100%; }
.forbidden-card h2 .icon { width: 20px; height: 20px; vertical-align: -3px; color: var(--warn); }
.device-owner { font-size: 12.5px; }
.tg-links { margin-top: 10px; }
.login-card .alert + .login-next { margin-top: 0; }
.login-card > .alert { margin-bottom: 14px; }
.account-actions .nc-form { margin: 0; }
@media (max-width: 640px) {
  /* 휴대폰 카드 모양에서도 계정 관리 버튼을 한 줄에 */
  .rcards td.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .rcards td.account-actions::before { flex-basis: 100%; }
  .rcards .account-actions .nc-form { display: inline-block; }
}
.account-table .btn, .account-table .badge { white-space: nowrap; }


/* ── 접근성·터치 보강(검토 지적 36·39·40·41) ─────────────────────────────── */
/* 상태 칩 아래 사유·다음 시도 — 마우스 설명(title)만으로는 휴대폰·키보드에서 보이지 않는다 */
.dchip-meta, .device-state-note { display: block; margin-top: 3px; }
.device-ownerless { display: block; margin-top: 2px; font-size: 12.5px; color: var(--warn); }
.alert-full { margin-top: 4px; font-size: 12.5px; }
.alert-full > summary { cursor: pointer; color: var(--accent-text); }
.alert-full-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg-2); }
.inbox-actions + .inbox-similar { margin-top: 14px; }
/* 되돌릴 수 없는 [지우기]는 [끄기]와 떼어 둔다 */
.device-actions .device-delete { margin-left: 10px; }
.btn-danger-text { color: var(--danger); }
/* 넓은 화면의 글 상세 — 삭제 이유 패널을 버튼 아래 떠 있는 상자로(옆 버튼이 밀려나지 않게) */
@media (min-width: 541px) {
  .action-main .reason-picker[open] > .reason-panel {
    position: absolute; top: 100%; left: 0; z-index: 30;
  }
  /* 상세 머리 카드는 왼쪽 띠를 둥근 모서리에 맞추려 넘침을 자른다 — 패널이 열린 동안만 풀어 잘리지 않게 */
  .detail-hero:has(.reason-picker[open]) { overflow: visible; z-index: 5; }
}
@media (max-width: 640px) {
  /* 휴대폰 터치 크기 44px 이상 */
  .btn, .btn-sm, summary.btn, .chips .chip, .btn.btn-logout { min-height: 44px; }
  .btn-sm { padding: 8px 12px; font-size: 13.5px; }
  /* 글 상세 주요 조치는 검토함 큰 버튼처럼 전체 폭·48px로 쌓는다 */
  .hero-actions > .action-main { flex: 1 1 100%; }
  .action-main { flex-direction: column; align-items: stretch; }
  .action-main > form, .action-main > form > .btn, .action-main > .btn,
  .action-main > .reason-picker, .action-main > .reason-picker > summary { width: 100%; }
  .action-main .btn { min-height: 48px; font-size: 15px; }
  .action-main > .reason-picker { display: block; }
  .action-main > .reason-picker > summary { display: flex; }
  /* 작은 글자 링크도 누르기 쉽게(터치 영역 넓히기) */
  .link-more, a.alert-idx, .inbox-links a { display: inline-block; padding: 10px 0; }
  .device-actions .device-delete { margin-left: 16px; }
  /* 아이폰은 16px보다 작은 입력칸을 누르면 화면을 확대한다 — 로그인·기기·계정 화면 공통 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
    font-size: 16px;
  }
}

/* ── 판정 사유 · 강진 단서 사전 (2026-10-06) ───────────────────────────── */
.notes-card textarea, .inbox-note textarea { width: 100%; resize: vertical; min-height: 64px; }
.note-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.note-list { list-style: none; margin: 12px 0 0; padding: 0; }
.note-item { padding: 10px 0; border-top: 1px solid var(--border); }
.note-meta { font-size: 12px; color: var(--muted); }
.note-text { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-result { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.note-clues .badge { margin-left: 4px; }
.inbox-note { margin: 10px 0; }
.inbox-note > summary { cursor: pointer; font-size: 13.5px; color: var(--muted); }
.inbox-note textarea { margin-top: 8px; }
.clue-counts { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.clue-table .clue-term { white-space: nowrap; font-weight: 600; }
.clue-filters { margin-bottom: 12px; }
.clue-manage { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.clue-table .clue-memo { min-width: 8em; }
.clue-manage form { margin: 0; }
.clue-manage .btn { white-space: nowrap; }
.clue-log { font-size: 12.5px; }