/* 신고센터 관리 화면 — 국민의힘 누리집(peoplepowerparty.kr) 문법판(비교용 시안 v3-official, _build/official/design-official.md 5.2).
   틀: 흰 80px 머리줄(공식 로고 x=40·y=24 · 굵은 가로 주메뉴 20/800 x≈264 · 오른쪽 글자 링크 · 80px 진빨강(red-text) 붉은 정사각 전체 메뉴)
       — 1199 이하 64px 머리줄(로고 + 세로선 + 이름 · 64px CI 빨강 블록, 주메뉴 숨김) → 경로 표시줄(집 › 단계 · 주소 복사·인쇄)
       → 왼쪽 메뉴(지금 메뉴 붉은 글씨 + 왼쪽 3px 붉은 막대) → 본문(가운데 28/800 쪽 제목 + 18px 회색(o-ink-3) 부제, 절 제목 + 1px 검정 선).
   목록: 옅은 회색 검색 상자 + '총 N건'(붉은 숫자) → 위 1px 검정 표 + 옅은 회색 머리칸 → 붉은 채움 쪽 번호.
   상세: 누리집 게시판 상세(tbl-view) — 위 1px 검정 + 옅은 회색 제목 줄 + 1px 줄 칸, 아래 가운데 회색 '목록'.
   단추: 누리집 .mbtn — 높이 48 · 반경 5 · 주 붉은 글씨색 채움 · 보조 흰 + 1px 회색 · 검색 회색 · 위험 검정.
   누리집 결함은 따르지 않는다: 글자 14px 이상 · 대비 4.5 이상 · 입력칸 테두리 3:1 · 포커스 2px 남색 · 누르는 것 44px.
   색은 tokens.css 의 CI·누리집 토큰(--ppp-*·--ink-*·--bg-*·--line*)을 쓰고, 없는 회색 단계(카드 테두리)·옅은 빨강만 섞기(color-mix)로 만든다(hex 직접 쓰기 0).
   금지: 그라데이션 · 색 그림자 · 유리 · 아이콘 색 타일 · 이모지 · 고정폭 글꼴.
   [2026-10-15 부드러운 문법] 반경·옅은 채움·그림자는 tokens.css 의 --round-* · --fill-soft* · --hair-soft · --shadow-soft 만(아래 --a-r 도 그 값). 검정 윗선 표·1px 테두리 상자 대신 옅은 회색 채움 둥근 상자. */

:root {
  /* 누리집 실측(design-official.md 1절) + [올림] 값. 괄호 안은 흰 바탕 대비 */
  --a-bg:        var(--bg, white);
  --a-black:     black;                                              /* 표·상세 윗선 · 절 제목 밑선(누리집 순검정) */
  --a-ink-1:     var(--ink-1, black);                                /* 제목 · 표 머리(17,17,17) */
  --a-ink-2:     var(--ink-2, black);                                /* 본문(68,68,68 · 9.7) */
  --a-ink-3:     var(--ink-3, dimgray);                              /* 보조(102,102,102 · 5.74 · 옅은 회색 판 위 5.5) [올림: 누리집 117·153 회색] */
  --a-red:       var(--ppp-red, red);                                /* CI 채움 — 붉은 정사각 블록 · 오늘 막대(4.58) */
  --a-red-text:  var(--ppp-red-text, firebrick);                     /* 누리집 --symbol-color — 글씨 · 테두리 · 주 단추(5.40) */
  --a-red-press: var(--ppp-red-press, darkred);
  --a-navy:      var(--ppp-navy-text, midnightblue);                 /* 누리집 안내 상자 남색 — 상태 꼬리표 하나 · 포커스 */
  --a-gray-btn:  var(--o-gray, gray);                                /* 누리집 .mbtn 기본 회색 회색(o-gray)(검색·목록·흰 단추 테두리) — 흰 글씨 4.61 */
  --a-gray-press:var(--o-gray-press, dimgray);                       /* 진회색 — 흰 글씨 6.3 */
  --a-sub:       var(--o-ink-3, dimgray);                            /* 쪽 부제 회색(o-ink-3)(흰 7.0) [올림: 누리집 회색(o-gray)] */
  --a-soft:      var(--bg-soft, color-mix(in srgb, black 2%, white));   /* 250 — 표 머리칸 · 검색 상자 · 상세 제목 줄 */
  --a-band:      var(--bg-muted, color-mix(in srgb, black 4%, white));  /* 245 — 로그인 바탕 · hover */
  --a-line:      var(--hair-soft, color-mix(in srgb, black 9%, white));   /* 아주 옅은 줄 아래선 */
  --a-line-2:    var(--line-soft, color-mix(in srgb, black 6.7%, white)); /* 238 — 머리줄·경로 표시줄 아래선 · 메뉴 오른쪽 */
  --a-card:      color-mix(in srgb, black 11%, white);               /* 227 — 카드 테두리 */
  --a-tile-line: color-mix(in srgb, black 6.3%, white);              /* 239 — 공식 메인 카드 테두리(숫자 칸·시·도 칸) */
  --a-ctl-line:  var(--line-input, gray);                            /* 138 — 입력칸·확인란 테두리 3.45 [올림: 누리집 221 은 1.36] */
  --a-fill-2:    var(--line-soft, color-mix(in srgb, black 6.7%, white)); /* 막대 바탕 · 비활성 */
  --a-bar:       var(--ink-2, black);                                /* 그래프 막대(중립) */
  --a-red-soft:  color-mix(in srgb, var(--a-red) 6%, white);         /* 위험 경고 한 줄 바탕(그 위 빨강 글씨 4.9) */
  --a-red-line:  var(--ppp-red-tint, color-mix(in srgb, var(--a-red) 20%, white));
  --a-focus:     var(--a-navy);                                      /* 포커스 고리 */
  --a-pop: 0 12px 40px color-mix(in srgb, var(--a-black) 18%, transparent);   /* 대화상자만(중립) */
  --a-r: var(--round-btn);       /* 단추 · 입력칸 반경(12) */
  --a-r-card: var(--round-card); /* 카드 · 패널 · 표 상자(16) */
  --a-fill: var(--fill-soft);    /* 옅은 회색 채움 */
  --a-fill-hov: var(--fill-soft-2);
  --a-top-h: 80px;          /* 공식 머리줄(1199 이하 64px — 반응형 절) */
  --a-loc-h: 60px;
  --a-side-w: 220px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--a-ink-2);
  background: var(--a-bg);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--a-ink-1); text-underline-offset: 3px; }
a:hover { color: var(--a-red-text); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--a-focus); outline-offset: 2px; }
::placeholder { color: var(--a-ink-3); opacity: 1; }
.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.muted { color: var(--a-ink-3); }
.sub { display: block; font-size: var(--fs-small); color: var(--a-ink-3); }
.err-text { color: var(--a-red-text); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.over { color: var(--a-red-text); font-weight: var(--fw-bold); }
/* 보안 탭(10/15 5차): 약해진 설정 · 0 이 아닌 경보 숫자는 붉게 — 같은 칸의 .kv dd · .tbl td 글자색(명시도 0,1,1)보다 앞서게 */
.kv dd.sec-state.over, [data-sec-counts] .tbl td.over { color: var(--a-red-text); }

.ic { width: 18px; height: 18px; flex: none; }
.ic-alert { width: 16px; height: 16px; }
.ic-alert .ic-fill { fill: currentColor; }
.ic-alert .ic-cut { stroke: var(--a-bg); }

/* ───────────── 건너뛰기·인쇄 ───────────── */
.skip {
  position: absolute; left: 8px; top: -100px; z-index: 80;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--a-navy); color: var(--a-bg); font-weight: var(--fw-bold); border-radius: var(--a-r);
}
.skip:focus { top: 8px; color: var(--a-bg); }
.print-mark { display: none; }

/* ───────────── 머리줄 — 공식 header(흰 80px · 아래 1px 옅은 선 · 로고 136×32 @(40,24) · 굵은 가로 주메뉴 · 오른쪽 80px 진빨강(red-text) 정사각) ───────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-5);
  height: var(--a-top-h); padding-left: var(--sp-8);
  background: var(--a-bg); border-bottom: 1px solid var(--a-line-2);
}
.brand { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; min-width: 0; color: var(--a-ink-1); text-decoration: none; flex: none; }
a.brand:hover { color: var(--a-ink-1); }
.brand-logo { display: block; width: 136px; height: 32px; flex: none; }
.brand-org { font-size: 20px; font-weight: var(--fw-heavy); color: var(--a-red-text); white-space: nowrap; letter-spacing: var(--ls-tight); }
.brand-sep { width: 1px; height: 20px; background: var(--a-line); flex: none; }
.brand-title { font-size: 18px; font-weight: var(--fw-heavy); color: var(--a-ink-1); white-space: nowrap; letter-spacing: var(--ls-tight); }
/* 굵은 가로 주메뉴(공식 .gnb: 20/800 검정 · 마우스·지금 쪽 붉은 글씨 · 지금 쪽 아래 3px 붉은 선) — 업무 묶음만, 1199 이하 숨김 */
.gnb { display: flex; align-self: stretch; min-width: 0; margin-left: 44px; }   /* 머리줄 gap 20 + 44 = 로고에서 64 → 첫 메뉴 글자 x=264 */
.gnb-list { display: flex; height: 100%; }
.gnb-item {
  position: relative; display: flex; align-items: center; height: 100%; padding: 0 24px;
  font-size: 20px; font-weight: var(--fw-heavy); color: var(--a-black); letter-spacing: var(--ls-tight); white-space: nowrap; text-decoration: none;
}
.gnb-item:hover, .gnb-item[aria-current="page"] { color: var(--a-red-text); }
.gnb-item[aria-current="page"]::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 3px; background: var(--a-red-text); }
.gnb-item.is-disabled { color: var(--a-ink-3); cursor: not-allowed; }
.gnb-item:focus-visible { outline-offset: -6px; }
.tb-who { display: flex; align-items: center; height: 100%; margin-left: auto; min-width: 0; }
.tb-idle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--sp-5); color: var(--a-ink-1); font-size: 15px; font-weight: var(--fw-bold); white-space: nowrap; }
.tb-idle .ic { width: 16px; height: 16px; color: var(--a-ink-3); }
.idle-left { font-size: 15px; font-weight: var(--fw-bold); color: var(--a-ink-1); font-variant-numeric: tabular-nums; min-width: 2.9em; }
.idle-left.low { color: var(--a-red-text); }
.tb-idle:has(.idle-left.low) .ic { color: var(--a-red-text); }
.tb-user { display: inline-flex; align-items: center; min-width: 0; padding: 0 var(--sp-5); position: relative; }
.tb-user::before, .tb-logout::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--a-line); }
.tb-user-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.3; }
.tb-name { font-weight: var(--fw-bold); color: var(--a-ink-1); font-size: 15px; white-space: nowrap; }
.tb-meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--a-ink-3); white-space: nowrap; }
.tb-meta .chip-role { min-height: 0; padding: 0; border: 0; background: none; color: var(--a-ink-3); font-weight: var(--fw-regular); }
.tb-scope::before { content: "·"; margin-right: 6px; }
.tb-logout {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-6) 0 var(--sp-5);
  background: none; border: 0; color: var(--a-ink-1); font-size: 15px; font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap;
}
.tb-logout:hover { color: var(--a-red-text); }
.allmenu-btn {
  position: relative; display: grid; place-items: center; flex: none; width: var(--a-top-h); height: var(--a-top-h); margin: 0 0 -1px;
  background: var(--a-red-text); background-clip: padding-box; border: 12px solid transparent; border-radius: var(--a-r-card); padding: 0; cursor: pointer; color: var(--a-bg);   /* 80×80 칸 안 둥근 사각 버튼(데스크톱 진빨강 · 1199 이하 CI 빨강 64×64 칸) */
}
.allmenu-btn:hover { background: var(--a-red-press); background-clip: padding-box; }
.allmenu-btn:focus-visible { outline: 3px solid var(--a-focus); outline-offset: -6px; }
.allmenu-btn .bars { position: relative; width: 26px; height: 14px; }
.allmenu-btn .bars::before, .allmenu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--a-bg); }
.allmenu-btn .bars::before { top: 0; }
.allmenu-btn .bars::after { bottom: 0; }

/* 전체 메뉴(공식 휴대폰 전체 메뉴 문법: 붉은 윗줄 64px + 1단 목록, 줄마다 1px 회색 선 · 지금 것 붉은 글씨 + 붉은 밑선) */
.allmenu { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--a-bg); overflow-y: auto; }
.am-top { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--a-top-h); padding-left: var(--sp-8); background: var(--a-red-text); color: var(--a-bg); flex: none; }
.am-who { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 16px; font-weight: var(--fw-bold); }
.am-who span { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.am-logout {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); margin-left: auto;
  background: none; border: 0; color: var(--a-bg); font-size: 15px; font-weight: var(--fw-bold); cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
}
.am-close { display: grid; place-items: center; width: var(--a-top-h); height: var(--a-top-h); flex: none; background: none; border: 0; color: var(--a-bg); cursor: pointer; }
.am-close .ic { width: 28px; height: 28px; }
.am-logout:focus-visible, .am-close:focus-visible { outline-color: var(--a-bg); outline-offset: -4px; }
.am-body { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: var(--sp-8) var(--sp-10); padding: var(--sp-9) var(--sp-8); }
.am-cap { font-size: 26px; font-weight: var(--fw-heavy); color: var(--a-ink-1); letter-spacing: var(--ls-tight); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--a-line); }
.am-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 60px; padding: 0 2px;
  border-bottom: 1px solid var(--a-line); font-size: 18px; font-weight: var(--fw-bold); color: var(--a-ink-1); text-decoration: none;
}
.am-link:hover { color: var(--a-red-text); }
.am-link[aria-current="page"] { color: var(--a-red-text); }
.am-link[aria-current="page"] .am-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.am-link.is-disabled { color: var(--a-ink-3); cursor: not-allowed; }

/* ───────────── 경로 표시줄(공식 #loc: 60px · 아래 1px 옅은 선 · 집 › 단계 · 오른쪽 주소 복사·인쇄) ───────────── */
.mnav { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--a-loc-h); padding: 0 var(--sp-6) 0 var(--sp-8); background: var(--a-bg); border-bottom: 1px solid var(--a-line-2); }
.loc { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 16px; font-weight: var(--fw-medium); }
.loc > li { display: flex; align-items: center; gap: 4px; color: var(--a-ink-3); white-space: nowrap; min-width: 0; }
.loc > li + li::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 12px 0 6px; border-right: 1.5px solid var(--a-ink-3); border-top: 1.5px solid var(--a-ink-3); transform: rotate(45deg); }
.loc > li[aria-current], .loc > li.is-current { color: var(--a-ink-1); font-weight: var(--fw-semibold); }
.loc a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--a-ink-3); text-decoration: none; }
.loc a:hover { color: var(--a-ink-1); text-decoration: underline; }
.loc .loc-home { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; margin-left: -12px; color: var(--a-ink-3); }
.loc > li.only-narrow { display: none; }   /* 넓은 화면: 지금 화면 이름(글자) · 좁은 화면: 메뉴 고르기 칸 */
.loc .loc-home .ic { width: 20px; height: 20px; }
.loc-select {
  appearance: none; -webkit-appearance: none; min-height: 44px; max-width: 100%; padding: 0 30px 0 0; margin: 0;
  border: 0; background-color: transparent; color: var(--a-ink-1); font-size: 16px; font-weight: var(--fw-bold); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 4px center; background-size: 18px 18px; background-repeat: no-repeat;
}
.loc-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.loc-tools .icon-btn { color: var(--a-ink-1); }
.loc-tools .icon-btn .ic { width: 22px; height: 22px; }

/* ───────────── 왼쪽 메뉴(전체 메뉴 열 문법: 1단 18/800 · 항목 17/700 · 지금 것 붉은 글씨 + 왼쪽 3px 붉은 막대) ───────────── */
.frame { display: flex; align-items: stretch; min-height: calc(100vh - var(--a-top-h)); }
.sidenav {
  flex: 0 0 var(--a-side-w); width: var(--a-side-w);
  position: sticky; top: var(--a-top-h); align-self: flex-start; height: calc(100vh - var(--a-top-h)); overflow-y: auto;
  padding: var(--sp-7) 0 var(--sp-8);
  background: var(--a-bg); border-right: 1px solid var(--a-line-2);
}
/* 센터 이름(넓은 화면: 머리줄은 공식처럼 로고만 두고 이름은 왼쪽 메뉴 맨 위로) */
.side-brand { display: none; padding: 0 var(--sp-6) var(--sp-5); margin: 0 0 var(--sp-5); border-bottom: 1px solid var(--a-line-2); font-size: 20px; font-weight: var(--fw-heavy); color: var(--a-black); letter-spacing: var(--ls-tight); line-height: 1.3; }
.nav-cap { padding: 0 var(--sp-6); margin: 0 0 var(--sp-2); font-size: 18px; font-weight: var(--fw-heavy); color: var(--a-ink-1); letter-spacing: var(--ls-tight); }
.nav-list + .nav-cap { margin-top: var(--sp-7); }
.nav-list { display: flex; flex-direction: column; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: var(--sp-2);
  min-height: 48px; margin: 0 var(--sp-3); padding: 0 var(--sp-2) 0 var(--sp-3); border-radius: var(--a-r);
  font-size: 17px; font-weight: var(--fw-bold); color: var(--a-ink-2); text-decoration: none; letter-spacing: -0.01em;
  transition: color .12s;
}
.nav-label { flex: 1; min-width: 0; }
.nav-item:hover { color: var(--a-red-text); }
.nav-item.is-current { color: var(--a-red-text); background: var(--a-fill); }
.nav-item.is-current::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--a-red-text); }
.nav-item.is-disabled { color: var(--a-ink-3); cursor: not-allowed; font-weight: var(--fw-medium); }
.nav-item.is-disabled:hover { color: var(--a-ink-3); }
/* 새 건수 — 공식 .cate(흰 바탕 + 1px 붉은 테두리 알약 · 붉은 글씨) */
.nav-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 26px; padding: 0 9px;
  border: 1px solid var(--a-ink-3); border-radius: var(--round-pill); background: var(--a-bg);
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--a-ink-3); line-height: 1;
}
.nav-count.is-new { border-color: var(--a-red-text); color: var(--a-red-text); }
.content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.main { flex: 1; outline: none; min-width: 0; }
.app[data-mode="boot"] .frame { min-height: 100vh; }
.app[data-mode="login"] .frame { display: block; min-height: 0; }
.app[data-mode="login"] .topbar { position: static; }

/* ───────────── 쪽 ───────────── */
.page { max-width: 1280px; margin: 0 auto; padding: var(--sp-8) var(--sp-8) var(--sp-11); display: flex; flex-direction: column; gap: var(--sp-8); }
.page-narrow { max-width: 760px; }
/* 쪽 제목 — 공식 .page-title(가운데 h2 28/800 검정 + 아래 18px 회색 설명). 단추는 제목 줄에 두지 않고 검색 상자·표 위 줄로 */
.page-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--sp-8); }
.page-title { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; max-width: 100%; }
.page-head h1 { font-size: 28px; font-weight: var(--fw-heavy); color: var(--a-black); letter-spacing: var(--ls-tight); line-height: 1.25; outline: none; }
.page-sub { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; font-size: 18px; line-height: 1.45; color: var(--a-sub); }
.page-sub .chip-scope { min-height: 0; padding: 0; border: 0; background: none; color: var(--a-ink-1); font-weight: var(--fw-bold); font-size: inherit; }
/* 표 위 단추 줄(공식 게시판 목록 위 오른쪽 단추 자리) */
.tbl-tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.tbl-tools + .panel { margin-top: calc(var(--sp-5) - var(--sp-8)); }
.notice-line { font-size: 15px; color: var(--a-ink-3); }
.loading { padding: var(--sp-6) 0; color: var(--a-ink-3); }
.boot-loading { max-width: 1280px; margin: 0 auto; padding: var(--sp-8); }
.empty { padding: var(--sp-8) 0; color: var(--a-ink-3); text-align: center; }
.empty.err { color: var(--a-red-text); }
.page-act { display: flex; justify-content: center; }   /* 권한 없음·없는 화면: 가운데 제목 아래 가운데 단추 */
.h-plain { font-size: 24px; font-weight: var(--fw-heavy); color: var(--a-ink-1); outline: none; margin-bottom: var(--sp-5); letter-spacing: var(--ls-tight); }
.back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px 0 6px; margin-left: -6px;
  font-size: 15px; font-weight: var(--fw-semibold); color: var(--a-ink-2); text-decoration: none;
}
.back:hover { color: var(--a-red-text); }
/* 공식 상세 아래 가운데 회색 '목록' */
.list-foot { display: flex; justify-content: center; padding-top: var(--sp-8); border-top: 1px solid var(--a-line); }
.list-foot .btn { min-width: 160px; }

/* 절 — 제목 20/800(검정 밑선 없음). 상자는 필요한 곳에서만 옅은 회색 채움 */
.panel { min-width: 0; padding: 0; background: none; border: 0; }
.panel-flush { padding: 0; }
.panel-flush > .empty, .panel-flush > .loading { padding: var(--sp-8) var(--sp-4); border-radius: var(--a-r-card); background: var(--a-fill); text-align: center; }
.panel-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 20px; font-weight: var(--fw-heavy); color: var(--a-ink-1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  padding-bottom: 0; margin-bottom: var(--sp-5);
}
.pad { padding: 0; }
.panel-title.pad, .panel-flush > .panel-title { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--sp-3); }
.notice-line.pad { padding-top: 0; margin-bottom: var(--sp-4); }
.list-total.pad { padding-bottom: var(--sp-4); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  padding-bottom: 0; margin-bottom: var(--sp-5); min-height: 48px;
}
.panel-head .panel-title { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.sub-title { font-size: 17px; font-weight: var(--fw-heavy); color: var(--a-ink-1); margin: var(--sp-6) 0 var(--sp-2); letter-spacing: -0.01em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-8); align-items: start; }
.grid-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.panel-note-line { font-size: var(--fs-small); color: var(--a-ink-3); }
.panel-strip { padding-bottom: var(--sp-1); }
.panel-strip .inline-form .field { flex: 0 1 360px; flex-direction: row; align-items: center; gap: var(--sp-3); }
.panel-strip .inline-form .lbl { white-space: nowrap; }
.strip-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.strip-row > .inline-form { flex: 1 1 auto; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding-bottom: var(--sp-4); }
.verify-result:not(:empty) { margin-bottom: var(--sp-4); }
.count-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 26px; padding: 0 8px;
  border: 1px solid var(--a-red-text); border-radius: var(--round-pill); color: var(--a-red-text); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1;
}
.vis-tag { display: inline-flex; align-items: center; min-height: 28px; font-size: var(--fs-small); color: var(--a-ink-3); white-space: nowrap; }
.vis-public { color: var(--a-red-text); font-weight: var(--fw-semibold); }

/* 알림 */
.flash-area { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-2); }
.flash-area:not(:empty) { padding-top: var(--sp-6); }
.flash {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--a-fill); border: 0; border-radius: var(--a-r);
  padding: 2px 4px 2px var(--sp-4);
}
.flash-text { display: flex; align-items: center; gap: var(--sp-2); color: var(--a-ink-1); font-weight: var(--fw-semibold); }
.flash-err { background: var(--a-red-soft); }
.flash-err .flash-text { color: var(--a-red-text); }
.msg {
  display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--a-fill); border: 0; border-radius: var(--a-r); font-weight: var(--fw-medium); color: var(--a-ink-1);
}
.msg .ic { margin-top: 4px; }
.msg-err { color: var(--a-red-text); background: var(--a-red-soft); font-weight: var(--fw-semibold); }
.msg-ok, .msg-info { background: var(--a-fill); color: var(--a-ink-1); }
.fact { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--a-ink-2); }
.fact .ic { color: var(--a-ink-3); width: 16px; height: 16px; }
/* 위험 경고 — 옅은 붉은 바탕 둥근 상자 한 줄 */
.alert-bar {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); background: var(--a-red-soft); border: 0; border-radius: var(--a-r-card);
}
.alert-ic { display: inline-flex; color: var(--a-red-text); flex: none; }
.alert-body { flex: 1 1 240px; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--sp-3); }
.alert-title { font-weight: var(--fw-heavy); color: var(--a-red-text); }
.alert-meta { font-size: var(--fs-small); color: var(--a-ink-2); }
.alert-bar .btn-secondary { background: var(--a-bg); }
.alert-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }   /* 보안 이벤트 띠의 '보안 탭에서 확인' */
.alert-link:hover { color: var(--a-red-press); }

/* ───────────── 단추 — 공식 .mbtn(높이 48 · 반경 5) ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--ctl-h); min-width: 44px; padding: 0 22px;   /* 입력칸(.inp)과 같은 48px — 옆에 놓여도 윗선·아랫선이 맞게 */
  border: 1px solid transparent; border-radius: var(--a-r);
  font-size: 16px; font-weight: var(--fw-semibold); line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn .ic { width: 18px; height: 18px; }
.btn-sm { min-height: 44px; font-size: 15px; padding: 0 16px; }   /* 표 안·판 머리의 작은 단추만 44px */
.btn-block { width: 100%; min-height: var(--ctl-h); }
.btn-primary { background: var(--a-red-text); color: var(--a-bg); border-radius: var(--round-pill); }                 /* 공식 .scolor */
.btn-primary:hover { background: var(--a-red-press); color: var(--a-bg); }
.btn-gray { background: var(--a-gray-btn); color: var(--a-bg); }                    /* 공식 .mbtn 기본(검색·목록) */
.btn-gray:hover { background: var(--a-gray-press); color: var(--a-bg); }
.btn-dark { background: var(--a-ink-1); color: var(--a-bg); }                       /* 공식 .black — 되돌릴 수 없는 일 */
.btn-dark:hover { background: var(--a-ink-2); color: var(--a-bg); }
.btn-secondary { background: var(--a-fill); color: var(--a-ink-1); border-color: var(--a-fill); }   /* 옅은 회색 채움 */
.btn-secondary:hover { background: var(--a-fill-hov); border-color: var(--a-fill-hov); color: var(--a-ink-1); }
.btn-ghost { background: transparent; color: var(--a-ink-2); }
.btn-ghost:hover { background: var(--a-band); color: var(--a-ink-1); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--a-fill-2); color: var(--a-ink-3); border-color: transparent; cursor: not-allowed;
}
.btn-text {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--sp-2);
  background: none; border: 0; color: var(--a-ink-2); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.btn-text:hover { color: var(--a-red-text); }
.btn-text:disabled { color: var(--a-ink-3); text-decoration: none; cursor: not-allowed; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  background: none; border: 0; border-radius: var(--a-r); color: var(--a-ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--a-band); color: var(--a-ink-1); }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0;
  background: none; border: 0; color: var(--a-ink-1); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left;
}
.link-btn:hover { color: var(--a-red-text); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ───────────── 상태 꼬리표 — 공식 .cate(흰 바탕 + 1px 테두리 알약 · 같은 색 글씨) ───────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 11px;
  border: 1px solid currentColor; border-radius: 999px; background: var(--a-bg);
  font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap; vertical-align: middle; line-height: 1.2; color: var(--a-ink-1);
}
.st-received { color: var(--a-navy); }                         /* 접수됨(착수 전) */
.st-review { color: var(--a-ink-1); }                          /* 검토 중 */
.st-supp { color: var(--a-red-text); }                         /* 보완 요청(신고자 차례) */
.st-moved, .st-done, .st-closed { color: var(--a-ink-3); }     /* 이관 · 처리 완료 · 종결 */
.st-withdrawn { color: var(--a-ink-3); border-style: dashed; }
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; }
.badge-count { display: inline-flex; align-items: center; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--a-line); border-radius: var(--round-pill);
  background: var(--a-bg); font-size: var(--fs-small); line-height: 20px; color: var(--a-ink-3); white-space: nowrap; vertical-align: middle; font-weight: var(--fw-semibold);
}
.chip-navy { border-color: var(--a-red-text); color: var(--a-red-text); font-weight: var(--fw-bold); }   /* 신고자 쪽에서 온 것(보완 도착 · 신고자) */
.chip-gray { border-color: var(--a-ctl-line); color: var(--a-ink-3); }
.chip-role { border-color: var(--a-line); color: var(--a-ink-2); }
.chip-scope { border-color: var(--a-line); color: var(--a-ink-2); }
.chip-mask { color: var(--a-ink-3); }
.masked { color: var(--a-ink-3); }
.revealed { color: var(--a-ink-1); font-weight: var(--fw-semibold); }
.dday { font-weight: var(--fw-semibold); color: var(--a-ink-1); white-space: nowrap; }
.dday.over { color: var(--a-red-text); font-weight: var(--fw-heavy); }

/* ───────────── 입력칸 — 공식 쓰기 표 입력칸(48px · 1px 테두리 · 반경 5) ───────────── */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lbl { font-size: 15px; font-weight: var(--fw-bold); color: var(--a-ink-1); }
.req { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--a-red-text); }
.opt { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--a-ink-3); }
.help { font-size: var(--fs-small); color: var(--a-ink-3); }
.inp {
  width: 100%; min-height: var(--ctl-h); padding: 0 14px;
  font-size: var(--fs-body); color: var(--a-ink-1); background: var(--a-bg);
  border: 1px solid var(--a-ctl-line); border-radius: var(--a-r);
  transition: border-color .12s, box-shadow .12s;
}
.inp:hover { border-color: var(--a-ink-3); }
.inp:focus { border-color: var(--a-focus); outline: 2px solid transparent; box-shadow: 0 0 0 1px var(--a-focus); }
.inp[readonly] { background: var(--a-band); color: var(--a-ink-2); }
.inp:disabled { background: var(--a-band); color: var(--a-ink-3); border-color: var(--a-line); cursor: not-allowed; }
.inp[aria-invalid="true"], fieldset[aria-invalid="true"] { border-color: var(--a-red-text); }
.inp[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--a-red-text); }
.ta { padding: 12px 14px; min-height: 104px; line-height: var(--lh-body); resize: vertical; }
.sel {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='dimgray' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 12px center; background-size: 18px 18px; background-repeat: no-repeat;
}
.sel-sm { min-height: 44px; width: auto; font-size: 15px; }
.counter { align-self: flex-end; font-size: var(--fs-small); color: var(--a-ink-3); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--a-red-text); font-weight: var(--fw-bold); }
.field-err { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--a-red-text); }
.fs { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fs > legend { padding: 0; margin-bottom: 6px; }
.sub-fs { margin-top: var(--sp-2); }
.checks { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); }
.check, .opt-row {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; min-width: 44px; cursor: pointer; color: var(--a-ink-1);
}
.opt-row.fixed { cursor: default; gap: var(--sp-2); }
.check input, .opt-row input, .sel-box input { width: 20px; height: 20px; margin: 0; accent-color: var(--a-red-text); flex: none; cursor: pointer; }
.checks-sido { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 var(--sp-3); }
.sel-box { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
.switch-row { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 44px; cursor: pointer; }
.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 44px; height: 26px; border-radius: var(--round-pill); background: var(--a-ctl-line); transition: background .12s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--a-bg); transition: transform .12s;
}
.switch:checked { background: var(--a-red-text); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .55; cursor: not-allowed; }
.switch[aria-invalid="true"] { outline: 2px solid var(--a-red-text); outline-offset: 2px; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
[data-slot="status-fields"]:empty { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
.inline-form { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.inline-form .field { flex: 1 1 220px; }
.inline-form + .inline-form { margin-top: var(--sp-3); }
.sms-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--a-ink-2); }
.sms-line::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--a-red-text); flex: none; }

/* ───────────── 대시보드(10/16 다시 짬 — 큰 숫자 셋 · 응원 통계 · 신고 통계, SPEC 15절) ─────────────
   흰 바탕 위 옅은 회색 둥근 판(테두리·그림자 없음). 빨강은 '오늘'(막대·숫자)과 누를 때만. 숫자는 Pretendard tabular-nums. */
.dash { gap: var(--sp-9); }
.dstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.dstats > li { display: flex; min-width: 0; }
.dstat {
  flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; min-height: 176px;
  padding: var(--sp-6) var(--sp-6) var(--sp-5); background: var(--a-fill); border-radius: var(--a-r-card); color: var(--a-ink-2); text-decoration: none;
}
a.dstat { transition: background .12s; }
a.dstat:hover { background: var(--a-fill-hov); color: var(--a-ink-2); }
a.dstat:hover .dstat-label { color: var(--a-red-text); text-decoration: underline; text-underline-offset: 4px; }
.dstat-label { font-size: 17px; font-weight: var(--fw-bold); color: var(--a-ink-1); letter-spacing: -0.01em; }
.dstat-value { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0 4px; margin-top: auto; min-height: 54px; white-space: nowrap; }
.dstat-num { font-size: clamp(30px, 3.6vw, 46px); white-space: nowrap; font-weight: var(--fw-heavy); color: var(--a-ink-1); line-height: 1.15; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.dstat-unit { font-size: 20px; font-weight: var(--fw-bold); color: var(--a-ink-1); }
.dstat-skel { display: inline-block; width: 128px; height: 44px; margin-top: 6px; border-radius: var(--a-r); background: var(--a-fill-2); }
.dstat-sub { min-height: 24px; font-size: 15px; color: var(--a-ink-3); }
.dstat-sub .num { font-weight: var(--fw-bold); color: var(--a-ink-1); }
.dstat-sub .num.is-today { color: var(--a-red-text); }
.vbars-empty { padding: var(--sp-5) 0; color: var(--a-ink-3); font-size: 15px; }
.check-state .late { white-space: nowrap; }
.dsec { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dsec-title { font-size: 22px; font-weight: var(--fw-heavy); color: var(--a-ink-1); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.dcard { min-width: 0; padding: var(--sp-6); background: var(--a-fill); border-radius: var(--a-r-card); }
.dcard .empty { padding: var(--sp-6) 0; }
.dcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.dcard-title { font-size: 17px; font-weight: var(--fw-heavy); color: var(--a-ink-1); letter-spacing: -0.01em; }
.dcard-note { font-size: var(--fs-small); color: var(--a-ink-3); white-space: nowrap; }
.dcard-note .num { font-weight: var(--fw-bold); color: var(--a-ink-1); }
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; }
/* 막대 줄(분류별·상태별) — 이름 · 숫자 한 줄 + 아래 가는 막대(흰 홈 위 중립 막대). 줄 전체가 신고 목록으로 */
.drows { display: flex; flex-direction: column; }
.drow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label num" "track track"; align-items: center; gap: 6px var(--sp-3);
  min-height: 56px; padding: 8px 0; color: var(--a-ink-1); text-decoration: none;
}
.drow-label { grid-area: label; min-width: 0; font-size: 15px; font-weight: var(--fw-semibold); color: var(--a-ink-1); }
.drow-num { grid-area: num; font-size: 15px; font-weight: var(--fw-semibold); color: var(--a-ink-2); white-space: nowrap; }
.drow-num .num { font-size: 17px; font-weight: var(--fw-heavy); color: var(--a-ink-1); margin-right: 1px; }
.drow.is-zero .drow-num, .drow.is-zero .drow-num .num { color: var(--a-ink-3); font-weight: var(--fw-semibold); }
.drow-track { grid-area: track; height: 8px; border-radius: var(--round-pill); background: var(--a-bg); overflow: hidden; }
.drow-fill { display: block; height: 100%; border-radius: var(--round-pill); background: var(--a-bar); }
.drow:hover .drow-label { color: var(--a-red-text); text-decoration: underline; text-underline-offset: 3px; }
/* 최근 14일 세로 막대(응원·접수 같은 꼴) */
.vbars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 0; align-items: end; height: 200px; }
.vbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.vbar-num { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--a-ink-2); min-height: 22px; line-height: 22px; }
.vbar-col { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--a-ctl-line); }
.vbar-fill { display: block; width: min(22px, 64%); border-radius: var(--round-xs) var(--round-xs) 0 0; background: var(--a-bar); }
.vbar.is-today .vbar-fill { background: var(--a-red); }
.vbar.is-today .vbar-num { color: var(--a-red-text); }
.vbar-axis { font-size: var(--fs-small); color: var(--a-ink-3); margin-top: 8px; white-space: nowrap; }
.vbar.is-today .vbar-axis { color: var(--a-red-text); font-weight: var(--fw-bold); }
.vbar.axis-skip .vbar-axis { visibility: hidden; }   /* 날짜 축은 오늘부터 하루 걸러(14칸 글자가 겹치지 않게) */

/* ───────────── 방문 통계(#/visits — 10/16 대시보드에서 옮김) ───────────── */
.visits-body { display: flex; flex-direction: column; gap: var(--sp-7); }
.visits-range { display: flex; gap: var(--sp-2); }
.visits > .visits-range { margin-bottom: var(--sp-6); }
.visits-range .btn { min-width: 64px; }
.visits-sub { min-height: 0; margin-bottom: var(--sp-2); }
.visits-sub .sub-title { margin: 0; }
.visits-note { margin-top: var(--sp-3); }
.visits-retry { display: flex; justify-content: center; }
.funnel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.funnel li { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-2); min-width: 0; min-height: 104px; padding: var(--sp-4) var(--sp-5); border-radius: var(--a-r-card); background: var(--a-fill); }
.fn-label { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: var(--fw-bold); color: var(--a-ink-1); letter-spacing: -0.01em; }
.fn-step { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--a-ink-1); color: var(--a-bg); font-size: 14px; font-weight: var(--fw-bold); }
.fn-num { font-size: 32px; font-weight: var(--fw-black); color: var(--a-ink-1); line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vchart { display: block; width: 100%; height: auto; max-width: 100%; }
.vchart text { font-family: inherit; font-size: 14px; fill: var(--a-ink-3); }
.vchart .vc-num { fill: var(--a-ink-2); font-weight: 700; }
.vchart .vc-today { fill: var(--a-red-text); font-weight: 700; }
.vchart .vc-grid { stroke: var(--a-line); stroke-width: 1; }
.vchart .vc-base { stroke: var(--a-black); stroke-width: 1; }
.vchart .vc-bar { fill: var(--a-bar); }
.vchart .vc-bar.is-today { fill: var(--a-red); }

/* ───────────── 표 — 옅은 회색 둥근 머리칸 · 줄 아래 아주 옅은 선 ───────────── */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.tbl caption { text-align: left; padding: var(--sp-2) 0; }
.tbl th, .tbl td { padding: 8px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--a-line); height: 60px; }
.tbl thead th {
  height: 60px; padding-top: 0; padding-bottom: 0; background: var(--a-fill); color: var(--a-black); border-bottom: 0;
  font-size: 18px; font-weight: var(--fw-medium); white-space: nowrap;
}
.tbl thead th:first-child { border-top-left-radius: var(--a-r); border-bottom-left-radius: var(--a-r); }
.tbl thead th:last-child { border-top-right-radius: var(--a-r); border-bottom-right-radius: var(--a-r); }
.tbl tbody th { font-size: 16px; font-weight: var(--fw-semibold); color: var(--a-ink-1); }
.tbl td { color: var(--a-ink-2); font-size: 16px; }
.tbl th, .tbl td { overflow-wrap: break-word; }   /* 칸 너비를 낱말 단위로 잡게(본문의 anywhere 는 '남양주시/갑'처럼 쪼갬) */
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .zero { color: var(--a-ink-3); }
.tbl a, .tbl .link-btn { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.tbl a { font-weight: var(--fw-semibold); color: var(--a-ink-1); text-decoration: none; }
.tbl a:hover { text-decoration: underline; color: var(--a-red-text); }
.tbl-compact th, .tbl-compact td { height: 52px; padding-top: 2px; padding-bottom: 2px; }
.tbl-compact thead th { height: 48px; }
.row-link { cursor: pointer; }
.row-link > * { transition: background .1s; }
.row-link:hover > * { background: var(--a-fill); }
.row-link:hover > :first-child { border-top-left-radius: var(--a-r); border-bottom-left-radius: var(--a-r); }
.row-link:hover > :last-child { border-top-right-radius: var(--a-r); border-bottom-right-radius: var(--a-r); }
.c-sel { width: 52px; padding: 0 4px !important; text-align: center !important; }
/* 순번(신고 목록 맨 왼쪽 — 주인 10/16) */
.c-no { width: 56px; text-align: center !important; color: var(--a-ink-2); font-variant-numeric: tabular-nums; }
.rcard-top .c-no { margin-right: 8px; font-weight: 700; }
.c-rno .rno, .rno { font-weight: var(--fw-bold); color: var(--a-ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
a.rno { color: var(--a-ink-1); }
.c-time .sub { display: block; }
.c-rep .rep-line { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* 이름+칩 / 휴대전화 두 줄 */
.c-rep .rep-line + .rep-line { margin-top: 2px; }
.c-st { white-space: nowrap; }
.c-st .chip { margin-left: 6px; }
.tbl.tbl-reports > * > tr > * { padding-left: 8px; padding-right: 8px; }   /* 열 10~11개 — 1280 에서 판 안에 들게(칸 글자는 16px 그대로) */
.tbl.tbl-reports thead th { font-size: 16px; }
.tbl.tbl-reports > * > tr > :first-child { padding-left: 12px; }
.tbl.tbl-reports > * > tr > :last-child { padding-right: 12px; }
.tbl-reports .badge { padding: 0 9px; }
.tbl-reports td:last-child a { white-space: nowrap; font-variant-numeric: tabular-nums; }   /* 사건번호 C-XXXX-XXXX 를 하이픈에서 끊지 않게 */
.c-email { word-break: normal; white-space: nowrap; }   /* 이메일은 한 줄(좁으면 표 안에서 가로로 밀림) */
.tbl .c-wide { min-width: 16em; }   /* 긴 설명 칸이 좁아져 줄이 아주 높아지지 않게(좁은 화면은 표 안 가로 밀기) */
.c-detail { min-width: 220px; }
.c-name { white-space: nowrap; }
.tbl .c-id { text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* IP·접수번호·휴대전화 같은 식별자: 머리와 같은 왼쪽 정렬 */
.th-sort {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px; padding: 0; background: none; border: 0;
  font-weight: inherit; color: var(--a-black); cursor: pointer; white-space: nowrap; font-size: inherit;
}
.th-sort:hover, [aria-sort] .th-sort { color: var(--a-red-text); }
.tbl .num .th-sort { justify-content: flex-end; }
.tbl-districts th, .tbl-districts td { padding-left: 12px; padding-right: 12px; height: 52px; }
.tbl-districts tbody th { position: sticky; left: 0; background: var(--a-bg); z-index: 1; }
.tbl-districts thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--a-soft); }
.tbl-districts tbody tr:hover th { background: var(--a-soft); }
.table-foot { padding: var(--sp-3) 0; font-size: var(--fs-small); color: var(--a-ink-3); text-align: right; }
.tbl-log td { height: auto; min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
.tbl-log th, .tbl-log td { padding-left: 12px; padding-right: 12px; }   /* 열 7개 + 긴 이메일 — 1280 에서 판 안에 들게 */
.only-narrow { display: none; }

/* 목록 줄(768 이하) — 공식 휴대폰 게시판(위 1px 검정 + 줄마다 번호·날짜 / 제목) */
.rcards { flex-direction: column; }   /* display 는 .only-narrow 가 정한다(넓은 화면에서 표와 함께 나오지 않게) */
.rcard { display: flex; align-items: flex-start; gap: var(--sp-1); border-bottom: 1px solid var(--a-line); }
.rcard-sel { padding: var(--sp-2) 0 0; margin-left: -12px; }
.rcard-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4) 0; text-decoration: none; color: var(--a-ink-2); }
.rcard-link:hover { color: var(--a-ink-2); }
.rcard-link:hover .rno { text-decoration: underline; }
.rcard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.rcard-line { font-size: 15px; }
.rcard-line.strong { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--a-ink-1); }
.rcard-line.sub { color: var(--a-ink-3); font-size: var(--fs-small); }

/* 목록 위 '총 N건'(공식 검색 상자 왼쪽 문장: 20px 굵게 · 붉은 숫자) · 쪽 넘김 */
.list-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; min-height: 44px; flex: 1 1 auto; }
.list-total { font-size: 20px; color: var(--a-ink-1); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.list-total .num { color: var(--a-red-text); font-weight: var(--fw-black); }
.sel-actions {
  display: flex; align-items: center; gap: var(--sp-3); padding: 0 4px 0 14px;
  background: var(--a-fill); border: 0; border-radius: var(--round-pill); color: var(--a-ink-1); font-size: 15px; font-weight: var(--fw-bold);
}
/* 쪽 번호 — 48×48 둥근 칸(옅은 회색 채움 · 지금 칸 붉은 채움 흰 글씨) */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-8) 0 0; }
.pg-group { display: flex; gap: 6px; }
.pg {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 1px solid transparent; border-radius: var(--round-pill); background: var(--a-fill); color: var(--a-ink-2); font-size: 16px; font-weight: var(--fw-medium); text-decoration: none;
}
.pg:hover { color: var(--a-red-text); background: var(--a-fill-hov); position: relative; z-index: 1; }
.pg.is-now { background: var(--a-red-text); border-color: var(--a-red-text); color: var(--a-bg); font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 6px; position: relative; z-index: 1; }
.pg .ic { width: 18px; height: 18px; }
.pager-now { font-weight: var(--fw-semibold); color: var(--a-ink-1); }
.pager-size { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--a-ink-3); margin-left: var(--sp-4); }

/* 찾기 조건 — 공식 .board-search(옅은 회색 · 1px 회색 선 · 반경 0) */
.filter-panel { padding: var(--sp-6) var(--sp-7); background: var(--a-fill); border: 0; border-radius: var(--a-r-card); }
.filter-panel .inp { background-color: var(--a-bg); }
.filter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.filter-head .panel-title { margin: 0; padding: 0; border: 0; font-size: 17px; }
.filter-tools { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-left: auto; }   /* CSV 단추 + 접기(쪽 제목 줄에서 옮김) */
.filters { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--a-line); }
.filter-panel > .filters:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-4); }
.filter-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.filter-btns { display: flex; gap: var(--sp-2); margin-left: auto; }
.filter-btns .btn { min-width: 100px; }
.fs-status .checks { gap: 0 var(--sp-6); }

/* ───────────── 대화상자(떠 있는 것은 이것뿐 — 중립 그림자) ───────────── */
.dlg {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0;
  border: 0; border-radius: var(--round-dlg); overflow: auto; background: var(--a-bg); color: var(--a-ink-2);
  box-shadow: var(--a-pop);
}
.dlg-wide { width: min(760px, calc(100vw - 32px)); }
.dlg::backdrop { background: color-mix(in srgb, var(--a-black) 50%, transparent); }
.dlg-form { display: flex; flex-direction: column; max-height: calc(100vh - 36px); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--a-line); }
.dlg-title { font-size: 22px; font-weight: var(--fw-heavy); color: var(--a-ink-1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.dlg-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.dlg-msg { margin: 0 var(--sp-6) var(--sp-3); color: var(--a-red-text); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.dlg-actions { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6) var(--sp-5); border-top: 1px solid var(--a-line); flex-wrap: wrap; }
.dlg-actions .btn { min-width: 120px; }
.dlg-text { color: var(--a-ink-1); }
.dlg .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
.dlg .kv > div { grid-template-columns: 96px minmax(0, 1fr); padding: 10px 0; }
.dlg .kv > div:first-child, .dlg .kv > div:nth-child(2) { padding-top: 10px; }
.dlg .kv > div:last-child { border-bottom: 1px solid var(--a-line); padding-bottom: 10px; }
.dlg-side-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-3); border-top: 1px solid var(--a-line); }
.idle-warn-left { font-size: 28px; font-weight: var(--fw-heavy); color: var(--a-red-text); font-variant-numeric: tabular-nums; margin-left: var(--sp-2); }
.img-view { display: flex; justify-content: center; background: var(--a-fill); border: 0; border-radius: var(--a-r-card); overflow: hidden; }
.img-view img { max-height: 70vh; object-fit: contain; }
.secret-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.secret-row .inp { flex: 1 1 200px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.quote { padding: var(--sp-3) var(--sp-4); background: var(--a-fill); border: 0; border-radius: var(--a-r); max-height: 240px; overflow-y: auto; color: var(--a-ink-2); }

/* ───────────── 로그인 — 공식 로그인 쪽(회색 바탕 바탕 + 흰 판 1080px 두 칸: 왼쪽 제목·안내 | 오른쪽 입력) ───────────── */
.app[data-mode="login"] .main { background: var(--a-band); }
body:has(.app[data-mode="login"]) { background: var(--a-band); }   /* 로그인 쪽은 바탕 전체가 회색 판(데모 띠 아래 빈 흰 줄 없게) */
.app[data-mode="login"] .flash-area { max-width: 1160px; padding-left: var(--sp-8); padding-right: var(--sp-8); }
.login-wrap { display: flex; justify-content: center; align-items: flex-start; min-height: calc(100vh - var(--a-top-h) - var(--a-loc-h)); padding: var(--sp-9) var(--sp-8) var(--sp-11); background: var(--a-band); }
.login-card {
  width: 100%; max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--sp-9);
  padding: var(--sp-9) var(--sp-8) var(--sp-9); background: var(--a-bg); border: 0; border-radius: var(--a-r-card);
}
.login-side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.login-h1 { font-size: 28px; font-weight: var(--fw-heavy); color: var(--a-ink-1); letter-spacing: var(--ls-tight); line-height: 1.25; outline: none; }
.login-desc { font-size: 17px; color: var(--a-ink-3); line-height: 1.6; }
.login-more { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-6); margin-top: var(--sp-2); border-top: 1px solid var(--a-line); }
.login-mark { display: flex; align-items: center; gap: var(--sp-3); }
.login-center { font-size: 20px; font-weight: var(--fw-bold); color: var(--a-ink-1); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.login-notes { display: flex; flex-direction: column; gap: 6px; }
.login-note { font-size: 15px; color: var(--a-ink-3); line-height: 1.6; }
.login-note.is-red { color: var(--a-red-text); }
.login-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.login-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; padding: 10px var(--sp-4); border: 0; border-radius: var(--round-pill); background: var(--a-fill); }
.login-steps li { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 15px; font-weight: var(--fw-medium); color: var(--a-ink-3); }
.login-steps li + li::before { content: ""; width: 7px; height: 7px; margin: 0 14px 0 10px; border-right: 1.5px solid var(--a-ink-3); border-top: 1.5px solid var(--a-ink-3); transform: rotate(45deg); }
.ls-num { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ls-num .ic { width: 16px; height: 16px; }
.login-steps li.is-on { color: var(--a-red-text); font-weight: var(--fw-heavy); }
.login-steps li.is-done { color: var(--a-ink-2); }
.login-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.login-form .btn-block { margin-top: var(--sp-2); }
.login-step { color: var(--a-ink-1); }
.login-links { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-2); }
.login-links .btn-text { text-decoration: none; color: var(--a-ink-3); font-weight: var(--fw-medium); }
.login-links .btn-text:hover:not(:disabled) { color: var(--a-ink-1); text-decoration: underline; }
.login-links .btn-text + .btn-text { position: relative; padding-left: var(--sp-4); }
.login-links .btn-text + .btn-text::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--a-line); }
.otp-row { display: flex; align-items: center; gap: var(--sp-3); }
.otp { font-size: 24px; font-weight: var(--fw-semibold); letter-spacing: .3em; font-variant-numeric: tabular-nums; flex: 1; min-width: 0; }
.otp-left { font-weight: var(--fw-bold); color: var(--a-red-text); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* 경광등 표지 — 평면 단색(CI 빨강 돔 · 잉크 받침 · 흰 반사 한 줄). 빛살 세 줄만 1.6초에 은은하게, 동작 줄이기면 켜진 채 멈춤 */
.a-beacon { display: block; width: 40px; height: 40px; flex: none; overflow: visible; }
.a-beacon .bc-dome { fill: var(--a-red); }
.a-beacon .bc-base { fill: var(--a-navy); }
.a-beacon .bc-shine { stroke: var(--a-bg); }
.a-beacon .bc-ray { stroke: var(--a-red); animation: a-ray 1.6s ease-in-out infinite; }
.a-beacon .bc-ray-l { animation-delay: -.53s; }
.a-beacon .bc-ray-r { animation-delay: -1.07s; }
@keyframes a-ray { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .a-beacon .bc-ray { animation: none; opacity: 1; }
  .btn, .nav-item, .inp, .switch, .switch::after, .row-link > *, a.dstat { transition: none; }
}

/* ───────────── 상세 — 공식 게시판 상세(.tbl-view: 위 1px 검정 · 옅은 회색 제목 줄 · 1px 줄 칸) ───────────── */
.detail-head { display: flex; flex-direction: column; border-radius: var(--a-r-card); background: var(--a-fill); overflow: hidden; }
.detail-title { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; padding: var(--sp-5) var(--sp-7); border-bottom: 1px solid var(--a-line); }
.rno-lg { font-size: 22px; font-weight: var(--fw-bold); color: var(--a-ink-1); font-variant-numeric: tabular-nums; letter-spacing: 0; outline: none; line-height: 1.3; }
.h-case { font-size: 22px; font-weight: var(--fw-bold); color: var(--a-ink-1); outline: none; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); flex: 1 1 100%; }
.case-no { font-size: 15px; font-weight: var(--fw-bold); color: var(--a-red-text); }
.detail-meta { font-size: 15px; color: var(--a-ink-2); }
.detail-meta a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: var(--fw-semibold); }
.facts { display: flex; flex-wrap: wrap; gap: 0 var(--sp-8); padding: 10px var(--sp-7); border-bottom: 1px solid var(--a-line); }
.facts > div { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; min-height: 44px; align-content: center; flex-wrap: wrap; padding: 8px 0; }
.facts dt { font-size: 15px; font-weight: var(--fw-bold); color: var(--a-ink-1); white-space: nowrap; }
.facts dd { font-size: 15px; font-weight: var(--fw-regular); color: var(--a-ink-3); line-height: 1.4; }
.facts dd .muted { font-size: var(--fs-small); }
.facts dd a { min-height: 0; min-width: 0; padding: 12px 0; margin: -12px 0; color: var(--a-ink-1); }
.detail-head .notice-line { padding: var(--sp-3) var(--sp-7) 0; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8) var(--sp-9); align-items: start; }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: var(--sp-9); min-width: 0; }
.kv { display: grid; grid-template-columns: 1fr; }
.kv > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-3); padding: 12px 0; border-bottom: 1px solid var(--a-line); align-items: baseline; }
.kv > div:first-child { padding-top: 0; }
.kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { font-size: 15px; font-weight: var(--fw-bold); color: var(--a-ink-1); }
.kv dd { color: var(--a-ink-2); min-width: 0; }
.kv dd a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
/* 보안 탭 '점검'(10/16 대시보드에서 옮김) — 이름 · 마지막 시각(늦었으면 붉은 글씨) + 오른쪽 단추, 1px 옅은 줄 */
.checks { display: flex; flex-direction: column; }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 72px; padding: var(--sp-3) 0; border-bottom: 1px solid var(--a-line); }
.check-row:first-child { padding-top: 0; }
.check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check-label { font-size: 15px; font-weight: var(--fw-bold); color: var(--a-ink-1); }
.check-state { color: var(--a-ink-2); }
.check-state.over { color: var(--a-red-text); font-weight: var(--fw-bold); }
.check-row .btn { flex: none; }
.body-text { white-space: pre-wrap; color: var(--a-ink-1); font-size: var(--fs-body); line-height: 1.8; }
.files { display: flex; flex-direction: column; border-top: 1px solid var(--a-line); }
.file-row { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) 0; border-bottom: 1px solid var(--a-line); }
.file-name { font-weight: var(--fw-semibold); color: var(--a-ink-1); flex: 1 1 160px; min-width: 0; word-break: break-all; }
.file-meta { font-size: var(--fs-small); color: var(--a-ink-3); }
/* 진행 기록 — 세로 선 + 네모 점(공개=검정, 신고자=붉은 테두리, 내부=회색 테두리) */
.timeline { position: relative; display: flex; flex-direction: column; padding-left: 24px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--a-line); }
.tl-item { position: relative; padding-bottom: var(--sp-5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -24px; top: 8px; width: 9px; height: 9px;
  background: var(--a-ink-1); box-shadow: 0 0 0 3px var(--a-bg);
}
.tl-item.is-reporter::before { background: var(--a-bg); box-shadow: inset 0 0 0 2px var(--a-red-text), 0 0 0 3px var(--a-bg); }
.tl-item.is-internal::before { background: var(--a-bg); box-shadow: inset 0 0 0 2px var(--a-ctl-line), 0 0 0 3px var(--a-bg); }
.tl-card { min-width: 0; }
.tl-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-2); }
.tl-time { margin-left: auto; font-size: var(--fs-small); color: var(--a-ink-3); white-space: nowrap; }
.tl-kind { font-weight: var(--fw-bold); color: var(--a-ink-1); }
.tl-top > span:not(.badge):not(.chip):not(.tl-time):not(.tl-kind) { font-weight: var(--fw-medium); color: var(--a-ink-1); }
.tl-who { font-size: var(--fs-small); color: var(--a-ink-3); margin-top: 2px; }
.tl-meta { font-size: var(--fs-small); color: var(--a-ink-2); margin-top: 2px; }
.tl-body { margin-top: var(--sp-2); }
.tl-item.is-internal .tl-body { padding-left: var(--sp-3); border-left: 2px solid var(--a-line); }
.plain-list { display: flex; flex-direction: column; margin-bottom: var(--sp-3); }
.sub-title + p.muted { margin-bottom: var(--sp-3); }
.panel > .inline-form + .sub-title { margin-top: var(--sp-6); }
.plain-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 44px; border-bottom: 1px solid var(--a-line); color: var(--a-ink-1); }
.notes { display: flex; flex-direction: column; margin-bottom: var(--sp-5); }
.note { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--a-line); }
.note:first-child { padding-top: 0; }
.note-main { flex: 1; min-width: 0; }
.note-head { display: flex; align-items: center; gap: 4px var(--sp-2); flex-wrap: wrap; margin-bottom: 2px; font-size: var(--fs-small); color: var(--a-ink-1); }
.note-time { margin-left: auto; }
.note-empty { margin-bottom: var(--sp-4); }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--a-bg); border: 1px solid var(--a-line); color: var(--a-ink-2); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1;
}
.rel-list { display: flex; flex-direction: column; margin-bottom: var(--sp-3); }
.rel-row {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; min-height: 56px; padding: 4px 0;
  border-bottom: 1px solid var(--a-line); text-decoration: none; color: var(--a-ink-1);
}
.rel-row:hover { color: var(--a-ink-1); }
.rel-row:hover .rno { text-decoration: underline; text-underline-offset: 3px; color: var(--a-red-text); }
.rel-row .rno { color: var(--a-ink-1); }

/* ───────────── 설정 ───────────── */
.intake-box { display: flex; flex-direction: column; gap: var(--sp-2); }
.intake-box .panel-title { margin-bottom: 0; }
.intake-box .panel-title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--a-bg); box-shadow: inset 0 0 0 2px var(--a-ctl-line); }
.intake-box.is-open .panel-title::before { background: var(--a-red-text); box-shadow: none; }
.page[data-op="A"] .only-b { display: none; }
.conv-wrap { display: flex; flex-direction: column; gap: 4px; }
.conv { font-size: var(--fs-small); color: var(--a-ink-3); font-weight: var(--fw-medium); min-height: 22px; }
.types-list { display: flex; flex-direction: column; }
.type-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 2fr) 96px; gap: var(--sp-3); align-items: end; padding: var(--sp-3) 0; border-bottom: 1px solid var(--a-line); }
.type-code { font-size: var(--fs-small); color: var(--a-ink-3); align-self: center; word-break: break-all; }
.field-switch { justify-content: flex-end; }
.settings-form .form-actions { padding-top: var(--sp-2); }

/* ───────────── 개설 필수 화면(정정·가리기·처리정지·점검·공지·변경 이력·유출 대응·통지서) ───────────── */
.head-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.file-btns { display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; }
.inline-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.inline-row > .notice-line { flex: 1 1 260px; min-width: 0; }
.stop-on { color: var(--a-red-text); font-weight: var(--fw-bold); }
.form-grid > .span-2 { grid-column: 1 / -1; }
.fs-group { gap: var(--sp-3); }
.fs-group > legend.sub-title { margin: var(--sp-2) 0 var(--sp-1); }
.field-short { max-width: 220px; }
.notice-state { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--a-ink-2); }
.notice-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--a-bg); box-shadow: inset 0 0 0 2px var(--a-ctl-line); flex: none; }
.notice-state.is-on { color: var(--a-ink-1); }
.notice-state.is-on::before { background: var(--a-red); box-shadow: none; }
.hist { display: flex; flex-direction: column; }
.hist-row { display: grid; grid-template-columns: 96px 168px minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: var(--sp-3); align-items: end; padding: var(--sp-3) 0; border-bottom: 1px solid var(--a-line); }
.hist-row:first-child { padding-top: 0; }
.hist-row:last-child { border-bottom: 0; }
.hist .empty { padding: var(--sp-3) 0; }
.tbl tbody th .sub { font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.panel > .notice-line + .form-actions { margin-top: var(--sp-3); }
.step-no { display: inline-block; min-width: 1.4em; color: var(--a-ink-3); font-variant-numeric: tabular-nums; }
.byte-count { align-self: flex-end; margin-top: calc(var(--sp-2) * -1); font-size: var(--fs-small); color: var(--a-ink-3); }
.byte-count.over { color: var(--a-red-text); font-weight: var(--fw-bold); }
.preview-box { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--a-line); }
.result-line { display: flex; align-items: baseline; gap: 6px; color: var(--a-ink-2); }
.big-num { font-size: 28px; font-weight: var(--fw-bold); color: var(--a-ink-1); letter-spacing: var(--ls-tight); line-height: 1.15; }
[data-rekey-result]:not(:empty), [data-send-result]:not(:empty) { margin-top: var(--sp-4); }
/* 통지서(서버가 그린 고시 별지 서식 꼴) — 대화상자와 인쇄에서 같은 모양 */
.notice-sheet { color: var(--a-ink-1); line-height: 1.7; }
.notice-sheet h1 { font-size: var(--fs-h3); font-weight: var(--fw-bold); text-align: center; margin: var(--sp-2) 0 var(--sp-4); letter-spacing: var(--ls-tight); }
.notice-sheet h2, .notice-sheet h3 { font-size: var(--fs-body); font-weight: var(--fw-bold); margin: var(--sp-4) 0 var(--sp-2); }
.notice-sheet p { margin: var(--sp-2) 0; }
.notice-sheet table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; }
.notice-sheet th, .notice-sheet td { border: 1px solid var(--a-line-2); padding: 10px 12px; text-align: left; vertical-align: top; font-size: var(--fs-small); }
.notice-sheet th { width: 28%; font-weight: var(--fw-semibold); }
.notice-sheet .nd-form { font-size: var(--fs-small); color: var(--a-ink-3); }
.notice-sheet .nd-date { text-align: center; margin-top: var(--sp-5); }
.notice-sheet .nd-sender { text-align: right; font-weight: var(--fw-semibold); }
.print-sheet { display: none; }
@media (max-width: 1024px) {
  .hist-row { grid-template-columns: 96px 168px minmax(0, 1fr); }
  .hist-row > .field:nth-child(3), .hist-row > .field:nth-child(4) { grid-column: 1 / -1; }
  .hist-del { justify-self: end; grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .breach-grid .detail-side { order: 0; }   /* 유출 대응은 통지 단계(1·2)를 먼저 */
}
@media (max-width: 560px) {
  .funnel { gap: var(--sp-2); }
  .funnel li { min-height: 96px; padding: var(--sp-3); }
  .fn-label { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 15px; }
  .fn-num { font-size: 26px; }
  .visits-range .btn { min-width: 56px; padding: 0 12px; }
  .hist-row { grid-template-columns: minmax(0, 1fr); }
  .notice-sheet th { width: 34%; }
}

/* ───────────── 반응형 ───────────── */
/* 넓은 화면(1200~): 공식처럼 머리줄에 로고만(센터 이름은 화면 읽기용으로 남기고 왼쪽 메뉴 맨 위에 보임) */
@media (min-width: 1200px) {
  .app[data-mode="app"] .brand-sep { display: none; }
  .app[data-mode="app"] .brand-title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .app[data-mode="app"] .side-brand { display: block; }
}
@media (max-width: 1439px) {
  .tb-meta { display: none; }   /* 역할·범위는 전체 메뉴 윗줄에 — 주메뉴 자리 확보 */
  .gnb-item { padding: 0 18px; }   /* 주메뉴 6개(10/16 '방문 통계')와 사용자 줄 사이 여백 확보 */
  .gnb-item[aria-current="page"]::after { left: 18px; right: 18px; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
  .gnb { margin-left: 24px; }
  .gnb-item { padding: 0 13px; font-size: 19px; }   /* 좁은 데스크톱 */
  .gnb-item[aria-current="page"]::after { left: 13px; right: 13px; }
}
/* 1199 이하: 64px 머리줄 + CI 빨강 64×64 블록(공식 휴대폰 머리줄), 주메뉴 숨김(왼쪽 메뉴·전체 메뉴·경로 표시줄 고르기 칸이 대신) */
@media (max-width: 1199px) {
  :root { --a-top-h: 64px; }
  .gnb { display: none; }
  .allmenu-btn { background: var(--a-red); }
  .allmenu-btn:hover { background: var(--a-red-text); }
  .allmenu-btn, .allmenu-btn:hover { background-clip: padding-box; }
  .allmenu-btn { border-width: 8px; border-radius: var(--a-r); }
  .allmenu-btn .bars { width: 24px; }
}
@media (max-width: 1180px) {
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-meta { display: none; }
}
@media (max-width: 1024px) {
  .grid-2, .grid-5-7 { grid-template-columns: minmax(0, 1fr); }
  .page { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .flash-area { padding: 0 var(--sp-6); }
  :root { --a-side-w: 200px; }
  .topbar { padding-left: var(--sp-6); }
  .mnav { padding-left: var(--sp-6); }
  .login-card { gap: 0 var(--sp-7); padding: var(--sp-7) var(--sp-6); }
  .am-body { padding: var(--sp-7) var(--sp-6); gap: var(--sp-7); }
}
@media (max-width: 768px) {
  .topbar { padding-left: var(--sp-4); gap: var(--sp-2); }
  .brand { gap: 10px; }
  .brand-logo { width: 96px; height: 23px; }
  .brand-sep { height: 16px; }
  .brand-title { font-size: 15px; }
  .tb-user, .tb-logout { display: none; }
  .tb-idle { padding: 0 var(--sp-3) 0 0; font-size: var(--fs-small); }
  .idle-left { font-size: var(--fs-small); }
  .frame { display: block; min-height: 0; }
  .sidenav { display: none; }
  .mnav { min-height: 52px; padding: 0 var(--sp-3) 0 var(--sp-4); }
  .loc .loc-group, .loc > li.only-wide { display: none; }
  .loc > li.only-narrow { display: flex; }
  .page { padding: var(--sp-6) var(--sp-4) var(--sp-10); gap: var(--sp-7); }
  .page-head { padding-top: var(--sp-3); }
  .page-head h1 { font-size: 26px; }
  .page-title { gap: 10px; }
  .page-sub { font-size: 16px; }
  .flash-area { padding: 0 var(--sp-4); }
  .flash-area:not(:empty) { padding-top: var(--sp-4); }
  .only-wide { display: none; }
  .only-narrow { display: flex; }
  .dash { gap: var(--sp-8); }
  .dstats { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .dstat { min-height: 0; padding: var(--sp-5); }
  .dstat-value { min-height: 0; margin-top: var(--sp-1); }
  .dstat-num { font-size: 40px; }
  .dstat-sub:empty { display: none; }
  .dgrid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .dcard { padding: var(--sp-5); }
  .dsec-title { font-size: 20px; }
  .filter-panel { padding: var(--sp-5) var(--sp-4); }
  .list-total { font-size: 18px; }
  .facts { flex-direction: column; gap: 0; padding: 6px var(--sp-4); }
  .facts > div { padding: 4px 0; min-height: 40px; }
  .detail-title { padding: var(--sp-4); }
  .anon-banner { padding: var(--sp-4); }
  .anon-mark.anon-lg { font-size: 16px; min-height: 32px; }
  .detail-head .notice-line { padding: var(--sp-3) var(--sp-4) 0; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-side { order: -1; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .type-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dlg .kv { grid-template-columns: minmax(0, 1fr); }
  .dlg .kv > div { grid-template-columns: minmax(0, 1fr); }
  .panel-strip .inline-form .field { flex: 1 1 auto; }
  .dlg-head { padding-left: var(--sp-5); }
  .dlg-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .dlg-msg { margin: 0 var(--sp-5) var(--sp-3); }
  .dlg-actions { padding: var(--sp-3) var(--sp-5) var(--sp-4); }
  .dlg-actions .btn { flex: 1 1 auto; min-width: 0; }
  .pager { gap: var(--sp-2); }
  .pg { width: 44px; height: 44px; }
  .pager-size { margin-left: 0; }
  .login-wrap { padding: var(--sp-5) var(--sp-4) var(--sp-9); min-height: 0; }
  .login-card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-6) var(--sp-5); }
  .login-h1 { font-size: 26px; }
  .login-desc { font-size: 16px; }
  .login-side { gap: var(--sp-3); }
  .login-more { display: none; }
  .a-beacon { width: 36px; height: 36px; }
  .am-top { padding-left: var(--sp-4); }
  .am-body { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5) var(--sp-4) var(--sp-8); gap: var(--sp-6); }
  .am-cap { font-size: 22px; }
}
@media (max-width: 560px) {
  .filter-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-btns { width: 100%; }
  .filter-btns .btn { flex: 1; min-width: 0; }
  .vbars { height: 180px; }
  .dcard { padding: var(--sp-5) var(--sp-4); }
  .rno-lg, .h-case { font-size: 20px; }
}
@media (max-width: 400px) {
  .brand-logo { width: 88px; height: 21px; }
  .brand-title { font-size: 14px; }
}

/* ───────────── 10/15 새 신고 절차 — 분류·하위 항목·익명 요청 ─────────────
   익명 요청은 목록·상세에서 크게: CI 글씨 빨강(red-text) 채움 + 흰 글씨(5.40) 네모 꼬리표(알약 상태 꼬리표와 모양을 다르게). */
.anon-mark {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--a-r);
  background: var(--a-red-text); color: var(--a-bg); font-size: 15px; font-weight: var(--fw-heavy); line-height: 1.2;
  white-space: nowrap; vertical-align: middle; letter-spacing: -0.01em;
}
.anon-mark.anon-lg { min-height: 34px; padding: 0 14px; font-size: 17px; }
.c-rep .anon-mark { margin-bottom: 4px; }
.c-rep .anon-mark + .rep-line { display: block; }
.anon-banner {
  display: grid; gap: 6px; margin: 0; padding: var(--sp-4) var(--sp-7);
  border-bottom: 1px solid var(--a-line); background: var(--a-red-soft);
}
.anon-banner-title { font-size: 17px; font-weight: var(--fw-heavy); color: var(--a-red-text); }
.anon-quote { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--a-ink-1); line-height: 1.6; }
.anon-banner-help { font-size: var(--fs-small); color: var(--a-ink-2); }
.anon-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-small); color: var(--a-ink-2); }
.anon-warn { display: grid; gap: var(--sp-3); }
.anon-warn .anon-quote { padding: var(--sp-3) var(--sp-4); border-radius: var(--a-r); background: var(--a-red-soft); }
.dlg-text.strong, .kv dd.strong { font-weight: var(--fw-bold); color: var(--a-ink-1); }
.kv dd.pre { white-space: pre-wrap; }
.kv + .kv { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--a-line); }
.sub-list { display: grid; gap: 4px; }
.sub-list li { position: relative; padding-left: 14px; color: var(--a-ink-1); font-weight: var(--fw-semibold); }
.sub-list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--a-ink-2); }
.c-cat .cat-line { display: block; font-weight: var(--fw-semibold); color: var(--a-ink-1); }

/* ───────────── 인쇄(모든 쪽 머리 '대외비', 메뉴 숨김) ───────────── */
@media print {
  body { background: var(--a-bg); }
  .print-mark {
    display: block; position: fixed; top: 0; right: 0;
    padding: 2px 10px; border: 2px solid var(--a-red-text); color: var(--a-red-text);
    font-size: 16px; font-weight: var(--fw-heavy); background: var(--a-bg);
  }
  .skip, .topbar, .sidenav, .mnav, .allmenu, .flash-area, .form-actions, .toolbar, .pager, .filter-panel, .list-foot, .btn, .btn-text, .icon-btn, dialog { display: none !important; }
  .frame { display: block; }
  .page { padding: 32px 0 0; max-width: none; }
  .panel, .detail-head { break-inside: avoid; }
  .only-wide { display: block !important; }
  .only-narrow { display: none !important; }
  .detail-grid { grid-template-columns: 1fr; }
  /* 통지서 한 장만 찍을 때(권리 요청 '인쇄') — 관리 화면·대화상자는 가리고 '대외비' 머리만 남긴다 */
  body.is-print-sheet > *:not(.print-sheet):not(.print-mark) { display: none !important; }
  body.is-print-sheet .print-sheet { display: block; padding: 40px 0 0; }
  .notice-sheet th, .notice-sheet td { border-color: var(--a-ink-3); }
}