:root {
  /* 색 띠(헤더·탭바·대외비)의 폭 — 창 끝까지 깔린다(full-bleed). dmc-did
     홈과 같은 구성이다: 띠는 창 전체, 그 안의 글과 본문은 아래 --content-w로
     가운데 정렬. 띠까지 가운데 카드형으로 되돌리려면 이 값을 --content-w와
     같게 두면 된다. */
  --shell-w: 100%;
  /* 좌우 여백 — 사용자 요청 「3cm 정도」. 다만 **고정 3cm는 쓰지 않는다**:
     1920px 창에서는 3cm(≈113px)가 한쪽 5.9%라 적당하지만, 1280px 노트북에서는
     같은 값이 8.8%씩 총 17.7%를 먹어 표가 좁아진다. 그래서 넓은 화면에서만
     3cm까지 벌어지고 좁아지면 비례해 줄어드는 clamp를 쓴다.
       1920px → 113px(3cm, 상한)  1536px → 92px  1280px → 77px  900px → 54px
     띠(헤더·탭바·대외비) 안쪽 글과 본문이 **같은 여백**을 쓰므로 탭 이름
     시작점과 카드 왼쪽 끝의 x가 일치한다(참고: dmc-did 홈).
     여백을 바꾸려면 이 값 하나만 고친다. */
  --gutter: clamp(16px, 6vw, 3cm);
  /* 본문 최대 폭 — 여백을 padding으로 주므로 폭 자체는 창에 맡긴다.
     초광폭 모니터에서 표가 지나치게 늘어나면 여기에 상한(예: 1720px)을 준다. */
  --content-w: 100%;
  --navy: #1a2b4a;
  --navy2: #24395f;
  --blue: #2f6fed;
  --sky: #5b9bff;
  --green: #1f9d57;
  --red: #d94848;
  --amber: #e0a11b;
  --gray: #5f6a78; /* 레거시 원본 #6b7684 대비 대비 미달 실측 후 조정된 값 — 되돌리지 않는다 */
  --line: #e5e8ee;
  --bg: #f4f6fa;
  --card: #fff;
  --ink: #1c2733;
  --thead: #f7f9fc;

  /* 진한 텍스트 변형 3종 — 흰 배경/--thead/--bg 위 작은 굵은 텍스트 전용.
     --amber/--red/--green 원본 토큰은 이런 배경 위 텍스트로 쓰면 2.14~4.22:1로
     WCAG AA(4.5:1) 미달이라 텍스트에는 쓰지 않는다(배경·아이콘·바는 원본 토큰
     그대로). 세 값 모두 새로 만든 색이 아니라 이 코드베이스에 이미 있던
     .signal.warn/.signal.ok/.report-forced-banner 텍스트색을 토큰화한 것 —
     실측 대비 4.96:1 이상(설계 문서 §5). */
  --amber-text: #8a6410;
  --red-text: #b23232;
  --green-text: #1f6b43;

  /* 타입 스케일 6단계 — 기존 11종의 산발적 px 값을 정리 */
  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 22px;

  /* ── 표 규격 — **전 화면 공통 한 벌**(담당자 지시, 2026-09-10:
     「메뉴 항목별로 표·선·글씨 크기는 동일하게 유지해」).
     화면마다 따로 적으면 「이 화면만 글자가 작다」가 생긴다(실측으로 여러 번
     겪었다). 표 규격을 바꿀 일이 생기면 **여기 세 값만** 고친다.
     열이 12개인 월별 추이표만 좌우 여백을 좁혀 쓰고(그 표에서만 토큰을 덮어쓴다),
     글자 크기·선은 그대로 따른다. */
  --tbl-fs: var(--fs-sm);      /* 머리·본문 같은 크기 */
  --tbl-pad-y: 11px;
  --tbl-pad-x: 12px;
  --tbl-line: 1px solid var(--line);

  /* 카드 안 내용 블록의 폭 — 표·제목 줄·각주를 한 덩어리로 묶어 **가운데**에
     놓는다(담당자 지시, 2026-09-10). 창 폭에 꽉 채우면 칸 사이가 벌어져 라벨과
     금액이 멀어진다. 화면마다 다른 값을 쓰지 않는다 — 여기 하나만 고친다. */
  --block-w: 1180px;

  /* 그림자 2단계 */
  --shadow-header: 0 10px 30px rgba(26, 43, 74, .18);
  --shadow-card: 0 1px 3px rgba(26, 43, 74, .05);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 14px;
}
a { color: var(--blue); text-decoration: none; }
[x-cloak] { display: none !important; }

/* ── 셸(헤더+탭바+대외비 배너 — 하나로 이어진 그라디언트 블록, A안).
   상태바(신선도·검증경고·유동성 신호 카드)는 이 셸에 속하지 않는다 —
   GNB와 이어붙는 건 대외비 배너까지만이고, 그 아래 카드들은 셸과는
   별개의 영역이어야 한다(사용자 요청, 2026-08-12). 그래서 셸 밖의
   독립된 블록으로 두고 폭만 같게 맞춘다.
   둥근 위쪽 모서리는 .app-shell이 아니라 .shell-band-header 자체에
   준다 — 예전엔 .app-shell에 overflow:hidden으로 클리핑했는데, 탭의
   톱니바퀴 드롭다운(.tabbar-settings-menu, position:absolute)이 셸
   바깥으로 내려오면서 그 overflow:hidden에 두 번째 메뉴 항목이
   잘려나갔다(실측 발견). 헤더만 스스로 라운드하면 클리핑이 필요 없다. ── */
.app-shell { max-width: var(--shell-w); margin: 0 auto; box-shadow: var(--shadow-card); }
.shell-band-header { background: linear-gradient(120deg, var(--navy), var(--navy2)); color: #fff; border-radius: 0; }
.shell-band-tabs { background: var(--navy2); }
.shell-band-status { background: var(--bg); max-width: var(--content-w); margin: 20px auto 0; padding: 0; }
.report-header-inner { max-width: var(--content-w); margin: 0 auto; padding: 12px var(--gutter); }
.shell-band-tabs .report-header-inner, .shell-band-status .report-header-inner { padding: 0 var(--gutter); }
.report-header-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.report-header-heading { display: flex; flex-direction: column; }
.report-header-title { font-weight: 800; font-size: var(--fs-lg); }
.report-header-tagline { margin-top: 2px; font-size: var(--fs-sm); opacity: .8; }
.header-badge { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 20px; padding: 3px 10px; font-weight: 600; }
/* 마감본 열람 중 — 실시간 화면과 눈으로 구분되어야 한다(설계 §5.2). */
.header-badge-closed { background: rgba(255,193,7,.22); border-color: rgba(255,193,7,.55); }
.header-month-form { display: inline-flex; align-items: center; }
.header-month-form select { font: inherit; font-size: 12px; color: #fff; font-weight: 600;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px; padding: 3px 6px; }
.header-month-form select option { color: var(--ink); background: #fff; }
.closed-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff8ec; border: 1px solid #f0d9a8; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; font-size: var(--fs-sm); color: #6b5316; }
.closed-banner b { color: var(--navy); }
.closed-banner-tag { background: var(--amber); color: #3a2c05; font-weight: 700;
  font-size: 11px; border-radius: 999px; padding: 2px 9px; }
.closed-banner-note { color: #8a6410; }
.closed-banner a { color: var(--blue); font-weight: 700; }
/* 마감본에 들어오면 **셸 탭바 한 줄이 그대로 그 달의 화면 목록이 된다**
   (2026-09-11). 탭바를 두 줄로 두면 대표이사께는 어느 쪽을 눌러야 하는지
   알 수 없는 화면이 된다 — 그래서 자리를 늘리지 않고 내용만 바꾼다.
   실시간 탭바와 눈으로 갈라지도록 **밑줄만 호박색**으로 둔다(띠 색까지 바꾸면
   다른 시스템처럼 보인다). */
.report-tabbar-closed { border-bottom: 2px solid var(--amber); }
.tabbar-closed-tag { background: var(--amber); color: #3a2c05; font-weight: 700;
  font-size: 11.5px; border-radius: 999px; padding: 3px 10px; align-self: center;
  white-space: nowrap; }
.report-tabbar-closed .tabbar-closed-exit { color: #ffe2a6; font-weight: 700; }
/* 종전의 `.closed-banner-live`(마감본을 고른 채 얼려 두지 않은 화면을 볼 때)는
   없앴다 — 마감본이 자기 주소로 갈라지면서 그런 어중간한 상태가 사라졌다. */
/* 표 안에서 성격이 다른 열 묶음을 가르는 세로 구분선(담당자 지정, 2026-09-09).
   「전년 대비 차이의 원인」이 월 3열 + 연 3열이라, 선이 없으면 여섯 열이
   한 덩어리로 읽힌다. 열 자체를 나누지 않고 경계만 그린다. */
.compare-table .col-sep, table .col-sep { border-left: 2px solid var(--line); }
.report-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: var(--fs-sm); }
.report-header-user { display: flex; align-items: center; gap: 6px; }
.viewer-badge { display: inline-block; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.15); border-radius: 20px; padding: 2px 10px; font-size: var(--fs-sm); }
.report-footer { max-width: var(--content-w); margin: 20px auto 0; padding: 0 var(--gutter) 20px; text-align: center; color: var(--gray); font-size: var(--fs-sm); }
.report-tabbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 8px 0; }
.report-tabbar a {
  color: #cdd6e4; padding: 8px 9px; font-size: var(--fs-sm); font-weight: 600;
  border-bottom: 2px solid transparent;
}
.report-tabbar a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.report-tabbar a.active { background: rgba(91,155,255,.14); color: #fff; border-bottom-color: var(--sky); }
.report-tabbar a.active:hover { background: rgba(91,155,255,.18); }
.report-tabbar a:focus-visible,
.report-header-actions a:focus-visible,
.report-header-actions button:focus-visible {
  outline: 2px solid var(--sky); outline-offset: 2px;
}
/* 탭 그룹 헤더 — 2026-09-01부로 화면에 남는 것은 `.roll`(3개월 이동계획 ·
   N~N월) 하나뿐이다. 「요약」·「당월 · N월」·「공통」은 사용자 요청으로 뺐다
   (탭 이름이 이미 무엇을 보는 화면인지 말하고, 당월 표기가 헤더 배지와 겹쳐
   읽혔다). #ffd98a는 navy2 위 실측 8.47:1이라 레거시 값 그대로 쓴다. */
.tabbar-group {
  display: flex; align-items: center; font-size: var(--fs-2xs); font-weight: 800;
  letter-spacing: .04em; padding: 0 9px 0 12px; margin-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, .16); white-space: nowrap;
}
.tabbar-group.roll { color: #ffd98a; }
/* 묶음 구분선 — 작은 글씨 그룹 헤더 대신 쓰는 세로선(사용자가 참고로 준
   사내 포털 nav와 같은 방식). 장식이므로 스크린리더에는 내지 않는다
   (aria-hidden). 앞뒤 여백이 항목 간격(2px)보다 넉넉해야 묶음으로 읽힌다. */
.tabbar-sep {
  width: 1px; height: 14px; margin: 0 8px;
  background: rgba(255, 255, 255, .22); flex: 0 0 auto;
}
/* 구분선 바로 뒤에 오는 그룹 이름은 이미 선으로 갈렸으므로 자기 선을 지운다. */
.tabbar-sep + .tabbar-group { border-left: 0; margin-left: 0; padding-left: 0; }

/* 상위 메뉴 + 드롭다운 (2026-09-01) — 번호(01~09)를 빼고 계획/실행/전망/데이터로
   묶었다. 버튼 모양은 탭 링크(.report-tabbar a)와 같게 맞춘다 — 경영 요약만
   하위가 없어 링크이고 나머지는 버튼인데, 둘이 달라 보이면 안 된다. */
.tabnav { position: relative; }
.tabnav-btn {
  background: none; border: none; cursor: pointer; font: inherit;
  color: #cdd6e4; padding: 8px 9px; font-size: var(--fs-sm); font-weight: 600;
  border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 4px;
}
.tabnav-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tabnav-btn.active { background: rgba(91,155,255,.14); color: #fff; border-bottom-color: var(--sky); }
.tabnav-btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.tabnav-btn .caret { font-size: 9px; opacity: .8; }
.tabnav-menu {
  position: absolute; top: 100%; left: 0; margin-top: 6px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-header);
  min-width: 190px; padding: 6px; z-index: 20;
}
.tabnav-menu a {
  display: block; padding: 8px 10px; border-radius: 6px;
  color: var(--ink); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
/* .report-tabbar a:hover와 specificity가 같아 소스 순서로만 이기면 깨지기 쉽다
   (톱니바퀴 메뉴에서 흰 글자+흰 배경으로 안 보인 실측 사례, 2026-08-12) —
   .tabnav를 덧붙여 확실히 이긴다. */
.tabnav .tabnav-menu a:hover { background: var(--thead); color: var(--ink); }
.tabnav .tabnav-menu a.here { background: #eaf1ff; color: var(--navy); }

/* 권한 관리·시스템 배포 — 예전 톱니바퀴 메뉴(2026-09-01부로 「데이터」 메뉴에
   흡수돼 화면에서는 쓰이지 않는다. 규칙은 참고용으로 남겨 둔다). */
.tabbar-settings { position: relative; }
.tabbar-settings-btn {
  background: none; border: none; cursor: pointer; color: #cdd6e4; padding: 8px 9px;
  font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 3px;
}
.tabbar-settings-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tabbar-settings-btn .caret { font-size: 9px; }
.tabbar-settings-menu {
  position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-header);
  min-width: 140px; padding: 6px; z-index: 20;
}
.tabbar-settings-menu a {
  display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
}
/* .report-tabbar a:hover(위)와 specificity가 같아 소스 순서로만 이기면
   깨지기 쉽다(실측 발견: 흰 글자+거의 흰 배경 겹침으로 호버 시 글자가
   안 보였음, 2026-08-12) — .tabbar-settings를 덧붙여 확실히 이긴다.
   a.active 강조는 일부러 뺐다 — 항목이 2개뿐인 이 드롭다운에서 활성
   배경의 위쪽 경계가 구분선처럼 보여 페이지마다 디자인이 달라 보이는
   문제로 실측 발견(2026-08-13) — 항상 중립 스타일로 통일한다. */
.tabbar-settings .tabbar-settings-menu a:hover { background: var(--thead); color: var(--ink); }
.report-header-actions { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.report-header-actions a, .report-header-actions button {
  color: #cdd6e4; background: none; border: none; cursor: pointer; font: inherit; padding: 4px 6px;
}
.report-forced-banner {
  background: var(--thead); color: var(--red-text); border: 1px solid var(--line); border-top: none;
  padding: 10px var(--gutter); font-size: var(--fs-sm); font-weight: 700;
  max-width: var(--content-w); margin: 0 auto;
}
.password-center { max-width: 420px; margin: 0 auto; }
.password-center .desc { white-space: nowrap; }

/* GNB 하단 상시 대외비 고지 — Jinja2 전환 때 이식이 빠졌던 문구(삭제된
   Next.js web/components/app-shell.tsx 원문 그대로). 신선도/유동성 신호
   (.notice-card/.signal)는 "C안: 중성 배경 + 핵심 키워드만 색"으로 이미
   통일했지만, 이 고지는 원본의 경고색(핑크)을 그대로 복원한다 — 상시
   노출되는 법적 고지라 다른 운영 신호와 달리 눈에 띄어야 하고, 인쇄 시에도
   빠지면 안 되므로 no-print를 걸지 않는다.*/
.shell-band-confidential { background: #fff4f4; border-radius: 0; box-shadow: var(--shadow-card); }
.shell-band-confidential .report-header-inner { padding: 8px var(--gutter); }
.confidential-banner { color: var(--red-text); font-size: var(--fs-sm); font-weight: 700; }
.report-main { max-width: var(--content-w); margin: 0 auto; padding: 20px var(--gutter); }

/* ── 신호 배너 (C안: 중성 배경 + 핵심 키워드만 색) ── */
.signal { display: flex; align-items: center; gap: 14px; border-radius: 12px; padding: 14px 20px; margin: 16px 0; background: var(--thead); color: var(--ink); }
.signal .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.signal.warn .dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(224,161,27,.18); }
.signal.warn b { color: var(--amber-text); }
.signal.ok .dot { background: var(--green); box-shadow: 0 0 0 4px rgba(31,157,87,.18); }
.signal.ok b { color: var(--green-text); }
.signal b { font-size: var(--fs-base); }
.signal .legend { margin-left: auto; font-size: var(--fs-xs); color: var(--gray); display: flex; gap: 12px; }

/* ── KPI 카드 ── */
.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 16px 0; }

/* ── 세로로 쌓는 변형 — 좌우 3단 배치에서 쓴다(2026-09-01, 01 경영 요약).
   가로 4열은 한 줄이 너무 넓어 라벨과 숫자가 멀어졌다. 세로로 쌓으면
   라벨→숫자→보조설명이 한 덩어리로 읽힌다. 굵은 5px 컬러바 대신 **왼쪽
   3px 실선**으로 낮춰 4장이 이어질 때 색이 화면을 지배하지 않게 한다. ── */
/* 세로로 쌓는 KPI. 진행 현황 카드가 4장에서 **5장**으로 늘어(담당자 지정,
   2026-09-08 — 마지막에 당월 마감잔액 추가) 한 장씩 낮췄다. 글자 크기는
   타입 스케일 그대로 두고 **여백만** 줄인다 — 화면마다 글자가 달라지는 것을
   막는 규칙(CLAUDE.md 「글자 크기는 타입 스케일만 쓴다」)을 지킨다. */
.kpis.stack { grid-template-columns: 1fr; gap: 6px; margin: 0; }
.kpis.stack .kpi {
  padding: 8px 14px 8px 16px; border-radius: 10px; box-shadow: none;
  background: linear-gradient(#fff, #fff) padding-box;
}
.kpis.stack .kpi .bar { width: 3px; opacity: .85; }
.kpis.stack .kpi .lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kpis.stack .kpi .val { font-size: var(--fs-lg); margin-top: 1px; }
.kpis.stack .kpi .sub { margin-top: 1px; }

/* 숫자는 자릿수가 흔들리지 않게 고정폭으로 — 위아래로 쌓았을 때 자릿수가
   맞아야 크기 비교가 눈으로 된다. */
.kpi .val { font-variant-numeric: tabular-nums; }

/* 누를 수 있는 칸 — 마우스를 올리면 살짝 떠오르고 「세부 ›」가 진해진다.
   키보드로도 열 수 있어야 하므로 focus-visible 링을 함께 준다. */
.kpi-clickable { cursor: pointer; }
.kpi-clickable:hover { border-color: #cfdcf6; box-shadow: 0 2px 10px rgba(26,43,74,.10); transform: translateY(-1px); }
.kpi-clickable:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.kpi-more { font-size: var(--fs-2xs); font-weight: 700; color: transparent; white-space: nowrap; transition: color .15s; }
.kpi-clickable:hover .kpi-more, .kpi-clickable:focus-visible .kpi-more { color: var(--blue); }

/* 좌우 2단 / 3단 — 카드가 같은 높이로 나란히 선다. 좁아지면 접힌다. */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.split-2 > .card { margin: 16px 0; }
@media (max-width: 1100px) { .split-2 { grid-template-columns: 1fr; } }
/* 계획 / 진행 / 유동성 — 셋을 나란히 놓아야 «세운 것 → 실제로 된 것 → 지금
   가진 것»이 한눈에 이어진다(2026-09-01 사용자 요청). */
.split-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.split-3 > .card { margin: 16px 0; display: flex; flex-direction: column; }
.split-3 > .card .note { margin-top: auto; }
/* 접히는 기준을 1400px → 1100px로 낮췄다(담당자 지시, 2026-09-10: 「8월
   자금계획 / 진행 현황(실시간) / 당월 유동성 자금 → 3단 구성」).
   1400px는 **실사용 창 폭(1370px)보다 커서** 이 화면이 늘 2+1로 접혀 있었다
   — 담당자는 코드가 바뀐 줄 알았지만 배치는 처음부터 3단이었고 미디어 쿼리만
   너무 일찍 걸렸다(실측). 셋이 나란히 서야 «세운 것 → 실제로 된 것 → 지금
   가진 것»이 한 줄로 읽힌다. 카드 안은 세로 stack이라 폭이 좁아져도 라벨이
   깨지지 않는다. */
@media (max-width: 1100px) { .split-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px)  { .split-3 { grid-template-columns: 1fr; } }

/* 유동성 인사이트 — 신호 배너를 대체한다(2026-09-01). 배경은 중성(흰색)이고
   심각도는 **왼쪽 선 색**으로만 낸다("중성 배경 + 핵심 키워드만 색" 원칙).
   범례(정상/주의/경고/부족 색 점)는 화면에서 뺐다 — 기호 대신 문장으로 읽는다. */
.insight {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gray);
  border-radius: 12px; padding: 14px 18px; margin: 16px 0 4px; box-shadow: var(--shadow-card);
}
.insight.ok   { border-left-color: var(--green); }
.insight.warn { border-left-color: var(--amber); }
.insight.hi   { border-left-color: var(--red); }
.insight-head { font-size: var(--fs-base); font-weight: 800; color: var(--navy); }
.insight.ok   .insight-head { color: var(--green-text); }
.insight.warn .insight-head { color: var(--amber-text); }
.insight.hi   .insight-head { color: var(--red-text); }
.insight-points { margin: 8px 0 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.75; }
.insight-points li::marker { color: var(--gray); }
.insight-src { margin-top: 8px; font-size: var(--fs-xs); color: var(--gray); }

/* 전년 대비 비교표 — 차트 아래에 「전년 / 당해 / 차이」 세 줄로 붙는다
   (참고 이미지 구성). 같은 달을 세로로 맞춰야 대비가 눈으로 읽히므로
   숫자는 고정폭이고 열 너비가 균등하다. */
/* 서식 원칙(2026-09-01, 사용자 요청 「가독성과 세련미」):
     ① 선을 줄인다 — 세로줄 없음, 가로줄은 행 사이 hairline 하나
     ② 셋 중 무엇이 주인공인지 굵기·색이 말한다 (당해 > 전년 > 차이)
     ③ 색은 「차이」 행의 숫자에만 쓴다 — 표 전체가 알록달록하면 신호가 죽는다
     ④ 당월(마지막 열)만 옅게 띄워 「지금 어디까지 왔는지」를 표시한다
   열이 12개까지 늘어날 수 있어(1~12월) 여백을 좁히고 글자를 한 단계 줄인다. */
/* 가로 폭 — 카드가 창 끝까지 넓어지면 표가 지나치게 늘어난다(사용자 요청으로
   「조금」 줄인 값). 차트와 표가 **같은 값**을 써야 월 위치가 어긋나지 않으므로
   변수 하나로 묶는다 — 더 줄이려면 이 숫자만 고친다. */
/* 940px에서 **월 한 칸당 0.3cm씩** 넓힌 값(사용자 요청) — 12개월 × 0.3cm ≈ 136px.
   칸 폭은 전체 폭을 열 수로 나눈 것이라 «한 칸을 넓힌다 = 전체를 그만큼 넓힌다»다. */
:root { --trend-w: 1076px; }
/* 월 / 분기 토글 — 참고 이미지의 분절 버튼 구성. 링크 두 개이므로 스타일만 준다. */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--card); margin: 0 auto 10px; }
.card > .seg { display: flex; width: max-content; }
.seg a { padding: 5px 16px; font-size: var(--fs-xs); font-weight: 700; color: var(--gray);
  border-right: 1px solid var(--line); }
.seg a:last-child { border-right: 0; }
.seg a:hover { background: var(--thead); color: var(--navy); }
.seg a.on { background: var(--navy); color: #fff; }
.seg a.on:hover { background: var(--navy2); color: #fff; }
.seg a:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.table-legend .legend-note { color: var(--gray); opacity: .85; }
.chart-wide { height: 300px; margin: 0 auto 2px; max-width: var(--trend-w); }
.compare-table {
  width: 100%; max-width: var(--trend-w); margin: 0 auto;
  border-collapse: collapse; table-layout: fixed;
}
/* 열이 12개까지 늘어나는 표라 **좌우 여백만** 좁힌다(담당자 지시, 2026-09-10:
   표·선·글씨는 화면마다 같게). 글자 크기·선·행 높이는 위 공통 규격을 그대로
   따르므로 여기서 다시 적지 않는다 — 단위를 천원으로 바꾸면 자릿수가 길어지니
   여백을 더 줄여야 할 수 있고, 그때도 이 한 줄만 고친다. */
.compare-table { --tbl-pad-x: 8px; }
.compare-table th, .compare-table td {
  text-align: center; font-variant-numeric: tabular-nums;
}
/* 행 이름 열 — 폭을 고정해야 월 열이 균등해진다(12개월까지 버틴다) */
.compare-table thead th:first-child, .compare-table tbody th {
  width: 8.5%; min-width: 52px; text-align: left; font-weight: 700;
  font-size: var(--fs-2xs); letter-spacing: .02em; white-space: nowrap; color: var(--gray);
}
/* 머리행 — 배경 띠와 구분선을 그대로 둔다(사용자 요청: 선을 걷어내지 말 것) */
/* 월 이름은 아래 「당해」 행 숫자와 **같은 크기**다(사용자 요청) — 열 머리가
   그 열의 주인공 숫자보다 작으면 표가 아래로 쏠려 보인다. 첫 칸(기간)은 값이
   아니라 행 이름이라 위의 :first-child 규칙이 계속 한 단계 작게 유지한다. */
.compare-table thead th {
  background: var(--thead); color: var(--navy); font-weight: 700;
  letter-spacing: .04em; white-space: nowrap;
  /* 월 이름은 **가운데**(사용자 요청) — 아래 숫자는 자릿수 비교를 위해 오른쪽
     정렬을 유지한다. 첫 칸(기간)은 위 :first-child 규칙이 왼쪽으로 잡는다. */
  text-align: center;
  border-bottom: 1px solid var(--line);
}
/* 전년 — 비교 기준선이므로 한 단계 물러난다 */
.compare-table tr.ref td { color: var(--gray); }
/* 당해 — 주인공. 한 단계 크고 굵게, 아주 옅은 바탕 */
.compare-table tr.tot th, .compare-table tr.tot td {
  background: #f7f9ff; color: var(--navy); font-weight: 800;
}
.compare-table tr.diff-row td { font-weight: 700; }
.compare-table td.diff-pos { color: var(--green-text); }
.compare-table td.diff-neg { color: var(--red-text); }
/* 증감 삼각형 — 색만으로는 색각 이상에서 방향이 사라진다(색 + 모양 이중 부호화) */
.compare-table .tri { font-size: 8px; margin-right: 3px; vertical-align: 1px; opacity: .8; }
/* 당월 열 — 「오늘 기준 어디까지」를 옅게 표시. 당해 행은 한 톤 더 진하게 */
.compare-table .now { background: #eef3ff; }
.compare-table tr.tot .now { background: #e3ecff; }
.compare-table thead th.now { color: var(--navy); }
/* 전망/실적 범례 — 머리행 배지를 뺀 자리를 대신한다(사용자 요청으로 배지 삭제) */
.table-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
  font-size: var(--fs-2xs); color: var(--gray); }
.table-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; }
.table-legend i.plan { background: #c3cede; }
.table-legend i.act { background: var(--navy); }
/* 「9월 전망」처럼 달 이름 뒤에 붙는다(사용자 지정). 머리행 배경이 --thead라
   같은 색 알약은 보이지 않으므로 테두리를 준 흰 알약을 쓴다. 알약이 열을
   넓히지 않도록 글자를 한 단계 더 줄이고 좌우 여백을 좁혔다. */
.compare-table .mark { display: inline-block; font-size: var(--fs-2xs); font-weight: 700;
  border-radius: 999px; padding: 0 5px; letter-spacing: 0; white-space: nowrap; }
.compare-table .mark.ok { background: #e9f7ef; color: var(--green-text); }
.compare-table .mark.wait { background: var(--card); border: 1px solid var(--line); color: var(--gray); }

/* 상단 요약 줄 — 참고 이미지 형식(2026-09-01): **라벨 한 줄 · 값 한 줄**의
   가로형 표. 카드가 아니라 표라서 세로줄 없이 라벨과 값이 세로로 딱 맞는다.
   값은 오른쪽 정렬(자릿수 비교), 라벨도 같이 오른쪽으로 맞춘다. */
.stat-strip { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 4px; }
.stat-strip th, .stat-strip td { padding: 10px 12px; text-align: center; }
.stat-strip th {
  font-size: var(--fs-sm); font-weight: 800; color: var(--navy);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.stat-strip td {
  font-size: var(--fs-xl); font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums; padding-top: 14px;
}

/* 02 단기유동자금 재구성(2026-09-01) 전용 보조 스타일 */
/* 오른쪽 단에 카드 두 장을 세로로 쌓는다(만기구조 + 지급 커버리지) */
.stack-cards { display: flex; flex-direction: column; }
.stack-cards > .card { margin: 16px 0; }
/* 비교표를 「구분 + 값 몇 칸」 형태로 쓸 때 — 열 폭 고정과 당월 강조가 필요 없다 */
/* `.plain`은 열이 3~5개뿐이라 12개월 표의 좁은 여백을 물려받을 이유가 없다 —
   공통 규격(`--tbl-pad-x`)으로 되돌린다. 글자 크기는 이제 전 화면이 같은 토큰을
   쓰므로 여기서 따로 적지 않는다. */
.compare-table.plain { table-layout: auto; --tbl-pad-x: 12px; }
/* 첫 열도 나머지와 **같은 크기**다(사용자 요청, 2026-09-01). 기본 규칙
   `.compare-table thead th:first-child`가 :first-child 덕에 우선순위가 높아
   10.5px로 눌러 놓고 있었으므로, `.plain`을 한 번 더 붙여 이겨야 한다. */
.compare-table.plain thead th:first-child,
.compare-table.plain tbody th {
  width: auto; min-width: 0; color: var(--ink); font-size: var(--tbl-fs);
}
.compare-table.plain tbody th { font-weight: 600; }
/* 비고·산출 기준도 값과 **같은 크기**다(사용자 요청, 2026-09-01) — 한 표 안에서
   칸마다 글자 크기가 다르면 정돈되어 보이지 않는다. 구분은 크기가 아니라
   색(--gray)과 왼쪽 정렬이 맡는다. */
.compare-table.plain .memo { font-size: var(--tbl-fs); }
/* 「항목 · 금액 · 설명」 3열 표 — 자동 폭에 맡기면 **설명 칸이 폭을 다 먹어**
   금액이 라벨에서 멀리 떨어진다(사용자 지적, 2026-09-01). 이 화면에서 중요한
   것은 금액이므로 앞 두 칸에 폭을 주고 설명을 뒤로 밀어 둔다. */
.compare-table.metrics { table-layout: fixed; }
.compare-table.metrics th:nth-child(1), .compare-table.metrics td:nth-child(1) { width: 35%; }
.compare-table.metrics th:nth-child(2), .compare-table.metrics td:nth-child(2) { width: 25%; }
.compare-table.metrics th:nth-child(3), .compare-table.metrics td:nth-child(3) { width: 40%; }
/* 금액 열은 **가운데 정렬**(사용자 지정, 2026-09-01) — 라벨과 설명 사이에 끼어
   있어 오른쪽에 붙이면 설명 쪽으로 쏠려 보인다. tabular-nums라 가운데여도
   자릿수가 흔들리지 않는다. */
.compare-table.metrics th:nth-child(2), .compare-table.metrics td:nth-child(2) { text-align: center; }
.compare-table .memo { text-align: left; color: var(--gray); font-size: var(--fs-2xs); }
/* 결론·요약과 원자료 표 사이의 구분 */
.section-divider {
  margin: 28px 0 0; font-size: var(--fs-sm); font-weight: 800; color: var(--gray);
  letter-spacing: .06em; border-top: 1px solid var(--line); padding-top: 16px;
}

/* 요약 ↔ 상세를 오가는 링크 줄(02 단기유동자금) — 카드가 아니라 얇은 줄이다.
   메뉴에도 같은 항목이 있지만, 화면 안에서 바로 넘어가는 길이 함께 있어야
   「이 표의 원자료가 어디 있나」를 찾아 헤매지 않는다. */
.detail-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin: 18px 0 4px; font-size: var(--fs-xs); }
.detail-links > span { font-weight: 800; color: var(--gray); letter-spacing: .04em; }
.detail-links a { font-weight: 700; color: var(--blue); }
.detail-links a:hover { text-decoration: underline; }

/* 지표 카드 가로 배치 — **표 대신 카드**가 이 프로젝트의 기본 지표 배치다
   (사용자 지정, 2026-09-01 · 참고: 사내 결산현황 위젯).
   한 장에 「이름 · 배지 · 큰 숫자 · 산출 기준」이 묶여 한 칸씩 눈에 집힌다.
   auto-fit이라 카드 수가 바뀌어도 줄바꿈이 알아서 된다. */
.metric-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-top: 4px;
}
.metric-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px 14px; display: flex; flex-direction: column;
}
/* 결론 카드 — 테두리와 옅은 바탕으로만 올린다(색은 값에 쓰지 않는다) */
.metric-card.key { border-color: var(--navy); background: #f7f9ff; }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.metric-badge {
  flex: 0 0 auto; font-size: var(--fs-2xs); font-weight: 700; border-radius: 999px;
  padding: 2px 8px; background: var(--thead); color: var(--gray);
}
.metric-badge.key { background: var(--navy); color: #fff; }
.metric-value {
  margin-top: 10px; font-size: var(--fs-2xl); font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
/* 실시간(자금일보 실적) 한 줄 — 큰 숫자가 계획이고 이것이 그 옆의 실적이다.
   값 자체는 계획보다 한 단계 작게 두어 위계가 유지된다. */
.metric-live {
  margin-top: 6px; display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.metric-live-tag {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--gray);
  background: var(--thead); border-radius: 999px; padding: 1px 7px;
}
/* 산출 기준은 카드 바닥에 붙여 카드 높이가 달라도 아래 선이 맞는다 */
.metric-basis {
  margin-top: auto; padding-top: 10px; font-size: var(--fs-2xs); color: var(--gray);
  line-height: 1.5;
}

/* 커버리지 답 한 줄 — 「몇 개월 버티나」가 이 표의 질문이므로 근거표보다
   먼저, 크게 낸다(담당자 지정, 2026-09-01). */
.coverage-answer {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 14px; margin-bottom: 12px;
  background: #f7f9ff; border: 1px solid var(--navy); border-radius: 12px;
}
.coverage-answer-label { font-size: var(--fs-sm); font-weight: 700; color: var(--gray); }
.coverage-answer-value {
  font-size: var(--fs-2xl); font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.coverage-answer-note { font-size: var(--fs-2xs); color: var(--gray); }

/* ── 세부 내역 팝업 ── */
.modal-backdrop {
  /* 기본은 닫힘 — 스크립트가 열 때만 보인다(위 템플릿 주석 참고). */
  display: none;
  position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center;
  background: rgba(26, 43, 74, .38); padding: 20px;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow-header);
  width: min(520px, 100%); max-height: 80vh; overflow: auto; padding: 18px 20px 16px;
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.modal-head h3 { margin: 0; font-size: var(--fs-lg); color: var(--navy); }
.modal-sub { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--gray); }
.modal-x { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--gray); padding: 2px 6px; border-radius: 6px; }
.modal-x:hover { background: var(--thead); color: var(--ink); }
.modal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.modal-table th, .modal-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.modal-table th { text-align: left; font-weight: 600; color: var(--ink); white-space: nowrap; }
.modal-table td { font-variant-numeric: tabular-nums; }
.modal-table tr.tot th, .modal-table tr.tot td { background: var(--thead); font-weight: 800; color: var(--navy); border-bottom: 0; }
.modal-note { color: var(--amber-text); font-size: var(--fs-2xs); }
.modal-empty { font-size: var(--fs-sm); color: var(--gray); margin: 6px 2px 2px; line-height: 1.6; }
@media print { .modal-backdrop { display: none !important; } }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .15s, transform .15s; }
.kpi:hover { box-shadow: 0 4px 16px rgba(26,43,74,.1); transform: translateY(-1px); }
.kpi .lbl { font-size: var(--fs-xs); color: var(--gray); font-weight: 600; }
.kpi .val { font-size: var(--fs-xl); font-weight: 800; margin-top: 6px; letter-spacing: -.5px; }
.kpi .sub { font-size: var(--fs-xs); margin-top: 4px; color: var(--gray); }
.kpi .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.up { color: var(--green-text); } .down { color: var(--red-text); } .warn { color: var(--amber-text); }

/* ── 레거시 이식: 카드 ── */
section.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin: 16px 0; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sec-h h2 { font-size: 16px; font-weight: 800; margin: 0; }
/* 카드 제목 옆 부제(단위·기준일·원천)는 **10.5px 하나로 통일**한다(담당자 지시,
   2026-09-10). 02·04만 인라인으로 내려 놓고 나머지 20여 곳이 12.5px로 남아
   화면마다 이 줄의 크기가 달랐다 — 값을 한 곳에서만 정의하도록 기본값을 내리고
   인라인 override는 걷어냈다. 제목 안의 「›」(상세로 가는 표시)는 부제가 아니라
   제목의 일부라 종전 크기를 유지한다. */
.sec-h span { font-size: var(--fs-2xs); color: var(--gray); }
.sec-h h2 span { font-size: var(--fs-sm); }
/* 단위·기준일은 제목과 **같은 줄이 아니라 표 바로 위 오른쪽**에 놓는다(담당자
   지시, 2026-09-10). 제목 옆에 붙여 두면 카드가 넓을수록 제목에서 멀어져 어느
   표의 단위인지 눈으로 잇기 어렵다. `.sec-h`가 flex라 폭을 100%로 주면 다음
   줄로 내려간다 — 템플릿을 화면마다 고치지 않고 한 곳에서 바꾸기 위해서다.
   `>`로 직계 자식만 잡는다: 제목 안의 「›」(h2 > span)는 그대로 둔다. */
.sec-h { flex-wrap: wrap; }
.sec-h > span { flex: 0 0 100%; text-align: right; margin-top: 4px; }
.desc { font-size: var(--fs-sm); color: var(--gray); margin-bottom: 14px; }
.note { font-size: var(--fs-xs); color: var(--gray); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.deploy-branch-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.deploy-branch-row form { margin: 0; }

.deploy-log {
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 8px;
  padding: 12px;
  white-space: pre-wrap;
  max-height: 480px;
  overflow: auto;
}

/* ── 레거시 이식: 업로드 탭 프로세스 흐름도 (DMC자금보고_대시보드.html 09번 탭) ── */
.flow { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.flow .step { flex: 1; min-width: 120px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px; position: relative; }
.flow .step .n { font-size: 11px; font-weight: 800; color: var(--blue); }
.flow .step .nm { font-size: 13px; font-weight: 700; margin: 3px 0; }
.flow .step .dv { font-size: 11px; color: var(--gray); }
.sheet-badge { font-family: Consolas, monospace; background: #eef1f6; color: #24395f; padding: 1px 6px; border-radius: 5px; font-size: 11px; }
.link-btn { background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--blue); text-decoration: underline; cursor: pointer; }

/* ── 업로드 검증 결과 상세(findings) — PASS 제외, WARN/FAIL만 표시 ── */
.finding-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.finding-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: var(--fs-sm); }
.finding-row.hi { background: #fdecec; color: #b23232; }
.finding-row.warn { background: #fff8ec; color: #8a6410; }
.finding-row .rule { font-family: Consolas, monospace; font-size: 11px; opacity: .7; }

/* ── 표 강조행 + 호버 + 증감 색상 ── */
/* 카드 안 내용 블록 — 제목 줄·표·각주를 이 안에 넣으면 셋의 좌우 끝이 맞고
   카드 가운데에 놓인다. 제목 줄을 밖에 두면 제목이 첫 열보다 왼쪽으로 삐져나온다. */
.card-block { max-width: var(--block-w); margin: 0 auto; }
.card-block > .sec-h { margin-bottom: 16px; }

/* **모든 카드가 같은 폭을 쓴다.** 03·상세 3종은 `.card-block`으로 감쌌지만
   나머지 화면은 템플릿이 제각각이라, 카드의 **직계 자식**을 같은 폭으로 잡아
   전 화면을 한 번에 맞춘다(담당자 지시, 2026-09-10: 「메뉴 항목별로 동일하게」).
   템플릿 스무 곳을 고치지 않고 여기 한 곳만 본다.
   목록에 없는 것(`.metric-cards`의 가로 카드, `.split-3` 같은 2·3단 배치)은
   원래 넓게 써야 하는 구성이라 일부러 뺐다. */
section.card > .sec-h,
section.card > table,
section.card > .desc,
section.card > .note,
section.card > .chart-box,
section.card > .chart-wide {
  max-width: var(--block-w); margin-left: auto; margin-right: auto;
}

/* 표 규격은 `:root`의 `--tbl-*` 한 벌을 따른다 — 화면마다 다시 정의하지 않는다.
   행 높이에 여유를 둔 것은 담당자가 참고로 준 사내 결산현황 화면과 같은 근거다
   (칸이 붙어 있으면 한 행을 눈으로 따라가다 위아래 줄로 샌다). 머리행 글자는
   본문과 **같은 크기**다 — 머리가 값보다 작으면 표가 아래로 쏠려 보인다. */
table { width: 100%; border-collapse: collapse; font-size: var(--tbl-fs); }
/* 칸 정렬은 **가운데**가 기본이다(담당자 지시, 2026-09-10: 「메뉴 항목들 전체
   가운데 정렬」). 행 이름인 첫 칸만 왼쪽이다. 화면마다 다르게 두지 않는다. */
th, td { padding: var(--tbl-pad-y) var(--tbl-pad-x); border-bottom: var(--tbl-line); text-align: center; }
th:first-child, td:first-child { text-align: left; }
thead th { background: var(--thead); font-size: var(--tbl-fs); color: var(--gray); position: sticky; top: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: #f9fbff; }
.tot td { background: #f2f5fb; font-weight: 800; border-top: 2px solid var(--navy); }
.grp td { background: #eef2f8; font-weight: 800; color: var(--navy); }
.report-empty { text-align: center !important; color: var(--gray); padding: 24px 10px; }
.diff-pos { color: var(--green-text); font-weight: 700; }
.diff-neg { color: var(--red-text); font-weight: 700; }

/* ── 열 묶음 테두리 (03 당월 계획·실행·차이) ──
   **선 자체는 여기 없다.** `/static`에 캐시 버스팅이 없어 규칙을 여기 두면
   Ctrl+F5 전까지 안 그려지므로(실측 2026-09-10) 색·두께는 라우터의
   `_GROUP_BORDER`가 인라인으로 낸다. 이 클래스는 인쇄 색 강제에만 쓴다 —
   값을 두 곳에 적지 않기 위해 여기서 선을 다시 정의하지 않는다. */
@media print {
  .cur-group { print-color-adjust: exact; }
}

/* ── pill 5종 ── */
.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.p-ok { background: #e6f6ec; color: var(--green); }
.p-warn { background: #fff5e0; color: var(--amber); }
.p-mut { background: #eef1f6; color: var(--gray); }
.p-hi { background: #fdecec; color: var(--red); }
.p-blue { background: #e8f0fe; color: var(--blue); }

/* ── 핵심질문 카드 ── */
.qgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 6px; }
.qcard { border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; background: #fbfcfe; position: relative; }
.qcard .qn { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: var(--fs-xs); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.qcard .qq { font-size: var(--fs-sm); color: var(--gray); font-weight: 600; margin: 8px 0 6px; line-height: 1.4; }
.qcard .qa { font-size: var(--fs-base); font-weight: 800; color: var(--ink); letter-spacing: -.3px; }
.qcard .qa small { font-size: var(--fs-xs); font-weight: 600; color: var(--gray); }

/* ── 진행률 바 ── */
.prog { margin: 12px 0; }
.prog .pl { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 5px; }
.prog .pl b { font-size: var(--fs-base); }
.prog .pt { height: 15px; background: #eef1f6; border-radius: 8px; overflow: hidden; }
.prog .pf { height: 100%; border-radius: 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.chart-box { position: relative; height: 290px; }
.report-missing { color: var(--gray); }

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .qgrid { grid-template-columns: 1fr; }
}

/* ── 로그인 카드 ── */
.report-bare { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.login-card { width: 360px; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-header); }
.login-card-header { background: linear-gradient(135deg, var(--navy), var(--navy2)); color: #fff; padding: 22px 24px; font-weight: 800; font-size: var(--fs-lg); }
.login-form { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.login-form label { font-size: var(--fs-sm); color: var(--gray); font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.login-form input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: var(--fs-base); }
.login-form button { margin-top: 6px; padding: 10px; border: none; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; cursor: pointer; }
.login-error { color: var(--red-text); font-size: var(--fs-sm); margin: 0; }
.login-footer { text-align: center; font-size: var(--fs-xs); color: var(--gray); padding: 0 24px 18px; }

/* ── 상태바·신호 배너 공용 알림 카드(D안: DID 스타일 흰 카드 + 앞머리 pill).
   단, 검증 경고·유동성 신호 두 카드는 삭제된 Next.js 원본 구조(각자 독립된
   카드 + pill 대신 원형 dot/네이티브 ▶ 마커)로 되돌리되 배경은 이 흰
   notice-card를 그대로 쓴다(사용자 요청 — 배경색만 유지, 구성은 원복). ── */
.notice-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; box-shadow: var(--shadow-card); }
.notice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.notice-divider { color: var(--line); }
.status-badge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.status-badge b { font-weight: 800; }
/* 유동성 신호 카드는 레거시(.signal, DMC자금보고_대시보드_실시간.html
   46~52행)처럼 dot·제목+설명 텍스트블록·범례가 한 행에서 나란히
   가운데정렬돼야 한다(2026-08-13 사용자 요청 — dot이 제목 줄에만
   맞춰지지 않고 두 줄 전체 높이의 중앙에 오도록). .status-badge로 dot과
   제목만 묶으면 이 정렬이 안 돼 .signal-card에서는 .status-badge를 쓰지
   않고 .notice-row의 직계 자식으로 dot·.signal-text·범례를 나란히 둔다. */
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; }
/* 정상/경고/부족 — 레거시 실시간 대시보드 범례(DMC자금보고_대시보드_실시간.html
   183~190행)의 정상=green·경고=red·부족=#7a1a1a를 그대로 옮긴 값. */
.dot.warn { background: var(--amber); box-shadow: 0 0 0 4px rgba(224,161,27,.18); }
.dot.ok { background: var(--green); box-shadow: 0 0 0 4px rgba(31,157,87,.18); }
.dot.danger { background: var(--red); box-shadow: 0 0 0 4px rgba(217,72,72,.18); }
.dot.shortage { background: #7a1a1a; box-shadow: 0 0 0 4px rgba(122,26,26,.18); }
.signal-card .notice-row { flex-wrap: nowrap; }
.signal-text { font-size: var(--fs-base); }
.signal-text b { font-weight: 800; font-size: 15px; }
.signal-text .report-missing { display: inline-block; margin-top: 4px; font-size: var(--fs-sm); }

/* 유동성 신호 카드 배경 — 2026-08-13 레거시처럼 상태별 배경색(민트그린/
   크림 등)을 한 번 넣어봤으나, 사용자가 실제 화면을 보고 이전 색상
   (중성 흰 배경, C안 — 위 241행 .notice-card 그대로)으로 되돌려달라고
   함. 카드 배경은 다시 상태와 무관하게 흰색이고, 제목 글자색만 상태별로
   색이 들어간다("중성 배경 + 핵심 키워드만 색" 원칙 유지). */
.signal-card.ok .signal-text b { color: var(--green-text); }
.signal-card.warn .signal-text b { color: var(--amber-text); }
.signal-card.danger .signal-text b { color: var(--red-text); }
.signal-card.shortage .signal-text b { color: #7a1a1a; }

/* 유동성 신호 범례 — 레거시 .signal .legend(53~55행)와 동일하게 우측 정렬,
   작은 점(.lg, 9px — 본문 상태점 .dot 14px보다 작음, 후광 없음). */
.signal-legend { margin-left: auto; display: flex; gap: 12px; font-size: var(--fs-xs); color: var(--gray); }
.signal-legend i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.signal-legend .lg { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.signal-legend .lg.ok { background: var(--green); }
.signal-legend .lg.warn { background: var(--amber); }
.signal-legend .lg.danger { background: var(--red); }
.signal-legend .lg.shortage { background: #7a1a1a; }
.warning-panel { margin-top: 10px; font-size: var(--fs-sm); }
.warning-panel summary { cursor: pointer; color: var(--gray); font-weight: 600; }
.finding-fail { background: var(--thead); color: var(--red-text); padding: 4px 8px; border-radius: 6px; }
.finding-warn { background: var(--thead); color: var(--amber-text); padding: 4px 8px; border-radius: 6px; }

/* ── admin/upload 공용 레이아웃 (인라인 style 대체) ── */
.two-col-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.search-input { margin-bottom: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; width: 100%; font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .two-col-grid { grid-template-columns: 1fr; }
}

/* ── 인쇄 ── */
@media print {
  /* 종이에서는 화면 여백(최대 3cm)을 쓰지 않는다 — 여백은 프린터 마진이
     맡고, 남는 폭은 표에 준다. */
  :root { --gutter: 8px; }
  @page { size: A4 landscape; margin: 11mm; }
  body { background: #fff; font-size: 10.5px; }
  .no-print { display: none !important; }
  .app-shell { box-shadow: none; }
  .shell-band-header { background: var(--navy) !important; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  section.card, .kpi, .signal, .notice-card, .qcard, .prog, .chart-box, .flow .step, .shell-band-confidential { break-inside: avoid; }
  h1, h2, h3, .sec-h { break-after: avoid; }
  /* 상세로 가는 링크는 종이에서 밑줄을 빼고 검은 글씨로 낸다 — 눌러 갈 수
     없는 매체에서 파란 밑줄은 잉크만 먹는다(02 구성표의 「구분 ›」). */
  .compare-table th a { color: var(--ink) !important; text-decoration: none !important; }
  table { break-inside: auto; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  thead th { position: static !important; }
  .chart-box { height: 230px; }
  table + .note { break-before: avoid; }
  .note, p { orphans: 3; widows: 3; }
  th, .tot td, .grp td, .pill, .signal, .kpi .bar, .prog .pf, .diff-pos, .diff-neg, .flow .step .n, .sheet-badge, .finding-row, .shell-band-confidential {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-section { page-break-before: always; break-before: page; }
  .print-section:first-child { page-break-before: avoid; break-before: avoid; }
}