/*
 * 국내은행 주요 통계 - 화면 디자인(단정한 기관형, 2026-10-08 고객 확정).
 * 은행연합회 홈페이지와 같은 말투: 남색 머리 띠, 가는 선과 표. 색은 아껴서 - 남색이 기본이고 주황은 확인할 것에만 쓴다.
 * 망분리라 외부 글꼴·스크립트를 불러오지 않는다. 글꼴은 나눔고딕이다(2026-10-08 확정) - 파일을 assets/fonts 에 함께 두어
 * 어느 PC 에서나 시안과 같게 보인다(깔려 있으면 그것을 쓴다). 글자를 빼지 않은 원본을 woff2 로만 바꿨다(SIL OFL 1.1, fonts/OFL.txt).
 */
@font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 400; font-display: swap;
  src: local('NanumGothic'), local('나눔고딕'), url('fonts/NanumGothic-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 700; font-display: swap;
  src: local('NanumGothicBold'), local('나눔고딕 Bold'), url('fonts/NanumGothic-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 800; font-display: swap;
  src: local('NanumGothicExtraBold'), local('나눔고딕 ExtraBold'), url('fonts/NanumGothic-ExtraBold.woff2') format('woff2'); }
/* 색과 글꼴의 이름 - 한 줄에 하나, 뒤 설명은 화면디자인가이드(D-009)의 색 표가 된다(문서를 만들 때 여기서 뽑는다) */
:root {
  /* 기본색 */
  --navy: #004685;      /* 남색 - 머리 띠, 주 단추, 덩어리 제목 밑줄, 지금 메뉴 */
  --navy-d: #003570;    /* 진한 남색 - 시스템 이름, 주 단추를 가리킬 때 */
  --navy-l: #eaf1f7;    /* 옅은 남색 - 고른 행, 단추를 가리킬 때, 지금 메뉴 바탕 */
  --navy-m: #bcd4e6;    /* 중간 남색 - 띠 위의 위치 줄 */
  /* 글자 */
  --ink: #1d2b36;       /* 본문 글자, 표 머리 */
  --ink2: #3f4c55;      /* 설명 글자, 도움말 */
  --muted: #55636c;     /* 보조 글자 - 단위, 시각, 작은 설명 */
  --faint: #7b8790;     /* 흐린 글자 - 빈 값(-)처럼 읽지 않아도 되는 것에만 */
  /* 선과 바탕 */
  --line: #dfe3e6;      /* 나란한 칸 사이 선, 접기 · 로그인 상자 테두리 */
  --line2: #d5dade;     /* 머리 밑선, 조용한 단추와 거르개 테두리 */
  --row: #e8ebee;       /* 표의 행 사이 선 */
  --input: #aab4bb;     /* 입력 칸 테두리 */
  --bg: #f7f8f9;        /* 화면 바탕 */
  --tint: #f2f6f9;      /* 옅은 바탕 - 표지, 코드, 메뉴를 가리킬 때 */
  --head: #f4f6f8;      /* 표 머리 바탕 */
  /* 상태 */
  --warn: #c2410c;      /* 주황 - 확인할 것(검사 경고, 지금 할 일, 다시 할 단계) */
  --warn-bg: #fff4ec;   /* 주황 표지 바탕 */
  --ok: #1b6e3a;        /* 초록 - 끝남, 입력값 */
  --ok-bg: #eef7f1;     /* 초록 바탕 - 성공 알림, 보도자료에서 읽은 칸 */
  --err: #b42318;       /* 빨강 - 로그인 오류 */
  --err-bg: #fef3f2;    /* 빨강 바탕 - 오류 알림 */
  --up: #c62828;        /* 오름(▲) */
  --down: #1f5fbf;      /* 내림(▼) */
  --focus: #f5a623;     /* 키보드 초점 테두리 */
  /* 글꼴 */
  --font: 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;   /* 화면 글꼴 - 나눔고딕, 없으면 맑은 고딕 */
  --mono: 'D2Coding', Consolas, Menlo, monospace;                                          /* 코드와 식별자 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--font); word-break: keep-all; overflow-wrap: anywhere; }
a { color: #0068a3; }
a:hover { color: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
code { font-family: var(--mono); font-size: 13px; background: var(--tint); padding: 1px 4px; border-radius: 2px; word-break: break-all; }
h2, h3 { letter-spacing: -0.02em; }
.wrap { width: 1200px; max-width: calc(100% - 48px); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 24px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; font-size: 14px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; color: #fff; }

/* ── 머리 - 위 작은 줄(비밀번호·사용자·로그아웃)과 주 메뉴 ── */
.util { background: #fff; border-bottom: 1px solid #eef0f2; font-size: 13px; color: var(--muted); }
.util .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 18px; min-height: 34px; }
.util a { color: var(--muted); text-decoration: none; }
.util a:hover { color: var(--navy); text-decoration: underline; }
.util b { color: var(--ink); }
.util form { margin: 0; }
.util button { height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 700; color: var(--ink2); border-color: var(--line2); }

.gnb { background: #fff; border-bottom: 1px solid var(--line2); }
.gnb .wrap { display: flex; align-items: stretch; gap: 28px; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand svg { display: block; }
.brand strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; color: var(--navy-d); line-height: 1.25; }
.brand small { display: block; font-size: 12px; color: var(--muted); }
.gnb nav { flex-grow: 1; }
.gnb nav > ul { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; justify-content: flex-end; }
.gnb nav > ul > li { display: flex; position: relative; }
.gnb nav > ul > li > a, .gnb summary {
  display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 15px; font-size: 16px; font-weight: 700; color: var(--ink);
  text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap;
}
.gnb nav > ul > li > a:hover, .gnb summary:hover { color: var(--navy); }
.gnb nav > ul > li > a[aria-current], .gnb summary.on { color: var(--navy); font-weight: 800; box-shadow: inset 0 -3px 0 var(--navy); }
.gnb details { height: 100%; }
.gnb summary::-webkit-details-marker { display: none; }
.gnb summary svg { transition: transform 0.15s; }
.gnb details[open] summary svg { transform: rotate(180deg); }
.gnb .menu { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 210px; margin: 0; padding: 8px 0; list-style: none;
  background: #fff; border: 1px solid var(--line2); box-shadow: 0 10px 24px rgba(29, 43, 54, 0.1); }
.gnb .menu a { display: block; padding: 9px 20px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.gnb .menu a:hover { background: var(--tint); color: var(--navy); }
.gnb .menu a[aria-current] { color: var(--navy); background: var(--navy-l); }
.gnb .menu small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }

/* ── 남색 띠 - 위치, 화면 이름, 한 줄 설명, 오른쪽에 동작·단계 ── */
.band { background: var(--navy); color: #fff; }
.band > .wrap { padding: 22px 0 26px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--navy-m); }
.crumbs li + li::before { content: '›'; margin-right: 8px; color: #8fb2cc; }
.crumbs a { color: var(--navy-m); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }
.band-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 10px; }
.band h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.band-sub { margin: 6px 0 0; font-size: 15px; color: #d3e3ef; }
.band-sub strong { color: #fff; }
.band-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.band-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.band-acts form { margin: 0; }
.band-meta { margin: 0; font-size: 14px; color: #d3e3ef; }
.band-meta strong { color: #fff; font-weight: 800; }
.band-meta a { color: #fff; }
.band .btn, .band button { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.8); }
.band .btn:hover, .band button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.band .btn.primary, .band button.primary { background: #fff; color: var(--navy); border-color: #fff; }
.band .btn.primary:hover, .band button.primary:hover { background: #e8f0f7; color: var(--navy-d); }
.band select { height: 38px; border-color: rgba(255, 255, 255, 0.8); }

/* 작업 단계 - 작업 현황 띠 아래 */
.steps { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.steps li { display: flex; gap: 10px; align-items: flex-start; }
.steps .dot { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; border: 2px solid rgba(255, 255, 255, 0.55); color: #fff; }
.steps .st-done .dot { background: #fff; border-color: #fff; color: var(--navy); }
.steps .st-now .dot { border-color: #ffd08a; color: #ffd08a; }
.steps .st-warn .dot { background: #ffd08a; border-color: #ffd08a; color: var(--navy-d); }
.steps b { display: block; font-size: 15px; font-weight: 800; line-height: 1.4; }
.steps .st-now b, .steps .st-warn b { color: #ffd08a; }
.steps small { display: block; font-size: 12.5px; color: #d3e3ef; line-height: 1.5; }
.steps a { color: #fff; font-size: 12.5px; font-weight: 700; }
.steps b a { font-size: inherit; font-weight: inherit; color: inherit; text-decoration: none; }
.steps b a:hover { text-decoration: underline; }

/* ── 본문 ── */
.main { padding: 36px 0 72px; }
.main.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.main > .col, .main > aside { min-width: 0; }
.main p { margin: 0 0 12px; }
.lead { font-size: 15px; color: var(--ink2); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.bad { color: var(--warn); font-weight: 700; }
.good { color: var(--ok); font-weight: 700; }
.up { color: var(--up); }
.down { color: var(--down); }
.num, td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.flash { margin: 0 0 22px; padding: 14px 18px; border: 1px solid #b9d3e6; background: #f2f8fc; font-size: 14.5px; }
.flash.ok { border-color: #a9d3b6; background: var(--ok-bg); }
.flash.error { border-color: #f1b7a3; background: var(--err-bg); color: #7a1a12; }

.sec { margin: 0 0 44px; }
.sec:last-child { margin-bottom: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 0 0 10px; border-bottom: 2px solid var(--navy); }
.sec-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.sec-head h2 .cnt { color: var(--warn); }
.sec-meta { margin: 0 !important; font-size: 14px; color: var(--ink2); text-align: right; }
.sec h3 { margin: 22px 0 10px; font-size: 16px; font-weight: 800; }

/* 상자에 색 띠 · 그림자 · 바탕색을 두르지 않는다 - 덩어리는 제목과 가는 선으로 나눈다(2026-10-16) */
.box { margin: 0 0 22px; }
.box > :last-child { margin-bottom: 0; }
.panel { margin: 0 0 30px; }
.panel h3, .note h3 { margin: 0 0 12px; padding: 0 0 8px; font-size: 16px; font-weight: 800; border-bottom: 1px solid var(--line2); }
.panel p, .note p { font-size: 14px; color: var(--ink2); }
.panel > :last-child, .note > :last-child { margin-bottom: 0; }
.note { margin: 0 0 30px; font-size: 14px; color: var(--ink2); }
.note ol, .note ul, .panel ol, .panel ul { margin: 6px 0 0; padding-left: 20px; font-size: 14px; }
.note li, .panel li { margin: 0 0 6px; }
.panel .btn, .panel button { width: 100%; }
.panel .field { display: flex; margin: 0 0 12px; }
.panel .field input, .panel .field select { width: 100%; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 700; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; margin: 0 0 20px; }
.split > div { padding: 0 26px 0 0; }
.split > div + div { border-left: 1px solid var(--line); padding: 0 0 0 26px; }

/* 칩·표지 */
.chip { display: inline-block; padding: 1px 8px; font-size: 12.5px; font-weight: 800; border-radius: 3px; background: var(--tint); color: var(--ink2); white-space: nowrap; vertical-align: 1px; }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.navy { background: var(--navy); color: #fff; }
.chip.line { background: #fff; border: 1px solid var(--line2); }

/* ── 표 ── */
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; margin: 0 0 16px; border-top: 2px solid var(--ink2); }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--row); }
th { background: var(--head); font-weight: 800; color: var(--ink); white-space: nowrap; }
tr + tr > th:first-child, table.form th, table.check th[scope=row] { white-space: normal; }
td.in { color: var(--ok); font-weight: 800; }
tr.hl > td, td.hl { background: #fff8e6; }
tr.sub > th { background: #fbfcfd; font-weight: 700; color: var(--ink2); }
table.form th { width: 150px; background: var(--head); }
table.plain { border-top: 1px solid var(--line); }
table.check th[scope=row] { width: 130px; background: #fbfcfd; }
table.check td:nth-child(2) { width: 150px; }
.tw { overflow-x: auto; margin: 0 0 16px; background: #fff; }
.tw > table { margin: 0; }
.tw > table th, .tw > table td { white-space: nowrap; }
.tw > table td.wrap-ok { white-space: normal; min-width: 240px; }
.more { margin: -6px 0 16px; font-size: 14px; }
.fold > summary { cursor: pointer; padding: 12px 16px; background: #fff; border: 1px solid var(--line); font-weight: 800; color: var(--navy); list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '▸'; display: inline-block; margin-right: 8px; transition: transform 0.15s; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold[open] > summary { border-bottom: 0; }

/* ── 양식 ── */
label { font-size: 14px; color: var(--ink2); }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select, textarea {
  font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--input); border-radius: 3px;
  height: 38px; padding: 0 10px; vertical-align: middle; max-width: 100%;
}
textarea { height: auto; padding: 8px 10px; line-height: 1.5; width: 100%; }
input[type=checkbox] { width: 16px; height: 16px; vertical-align: -3px; accent-color: var(--navy); }
input[type=file] { font: inherit; font-size: 14px; color: var(--ink2); max-width: 100%; }
input[type=file]::file-selector-button { height: 38px; padding: 0 14px; margin-right: 12px; border: 1px solid var(--navy); background: #fff;
  color: var(--navy); font: inherit; font-weight: 700; border-radius: 3px; cursor: pointer; }
input::placeholder, textarea::placeholder { color: #98a3ab; }
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; font: inherit; font-size: 14px;
  font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--navy); border-radius: 3px; cursor: pointer;
  text-decoration: none; white-space: nowrap; vertical-align: middle; line-height: 1;
}
button:hover, .btn:hover { background: var(--navy-l); color: var(--navy-d); }
button.primary, .btn.primary { background: var(--navy); color: #fff; }
button.primary:hover, .btn.primary:hover { background: var(--navy-d); color: #fff; }
button.big, .btn.big { height: 48px; padding: 0 22px; font-size: 16px; }
button.sm, .btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
button.quiet, .btn.quiet { border-color: var(--line2); color: var(--ink2); }
button svg, .btn svg { flex-shrink: 0; }
form { margin: 0; }
form.inline { display: inline; }
form.row, .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
form p, fieldset p { margin: 0 0 12px; }
fieldset { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
legend { float: left; width: 100%; padding: 0 0 8px; margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--line2); }
legend + * { clear: both; }
fieldset > :last-child { margin-bottom: 0; }
.hint { font-size: 13px; color: var(--muted); }
.field { display: inline-flex; flex-direction: column; gap: 4px; }
.fields { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 0 0 14px; }
.fields .field input, .fields .field select { min-width: 0; }

/* 파일 올리기 칸 */
.drop { border: 2px dashed #9fb6c8; background: #f8fbfd; padding: 26px 24px; text-align: center; margin: 0 0 14px; }
.drop svg { color: var(--navy); }
.drop p { margin: 8px 0 14px; font-size: 16px; font-weight: 800; }
.drop input[type=file] { display: block; margin: 0 auto 14px; }
.tips { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink2); }
.tips li { margin: 0 0 4px; }

/* 수 한 줄 - 결과 요약 */
.tally { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.tally li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #eef0f2; }
.tally li:last-child { border-bottom: 0; }
.tally b { font-variant-numeric: tabular-nums; }

/* 탭 모양 거르개 */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.tabs a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 18px;
  background: #fff; color: var(--ink2); font-size: 14px; font-weight: 700; text-decoration: none; }
.tabs a:hover { border-color: var(--navy); color: var(--navy); }
.tabs a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── 작업 현황 ── */
.now { margin: 0 0 20px; }
.now .state { margin-right: 4px; color: var(--warn); }
.now.done .state { color: var(--navy); }
.now h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.now p { color: var(--ink2); font-size: 14.5px; }
.now .row { margin-top: 14px; }
.todo td:first-child, .todo th:first-child { width: 64px; white-space: nowrap; }
.todo td:first-child { color: var(--muted); font-weight: 800; }
.todo td small { display: block; color: var(--muted); font-size: 13px; }
.log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.log li { display: grid; grid-template-columns: 120px 90px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef0f2; font-size: 14px; }
.log li:last-child { border-bottom: 0; }
.log time { color: var(--muted); font-variant-numeric: tabular-nums; }
.log b { font-weight: 800; }
.kpis { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.kpis li { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px solid #eef0f2; }
.kpis li:last-child { border-bottom: 0; }
.kpis small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpis strong { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpis em { font-style: normal; font-size: 13px; font-weight: 700; margin-left: 4px; }

/* ── 통계 요약 ── */
.keytbl td a { font-weight: 700; }
.keytbl tr.on > td { background: var(--navy-l); }
.changes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.changes li { padding: 14px 0; border-bottom: 1px solid #eef0f2; }
.changes li:last-child { border-bottom: 0; }
.changes .kind { font-size: 12.5px; font-weight: 800; color: var(--warn); }
.changes .kind.calm { color: var(--navy); }
.changes b { display: block; font-size: 15px; font-weight: 800; margin: 2px 0; }
.changes small { display: block; font-size: 13px; color: var(--muted); }
.deep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.deep > .box { margin: 0; }
.deep > .wide { grid-column: 1 / -1; }
.deep h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.deep h3 small { font-weight: 400; color: var(--muted); font-size: 13px; }
.chart { display: block; width: 100%; height: auto; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 120px; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.bars .track { height: 12px; background: #eef1f4; position: relative; }
.bars .fill { position: absolute; left: 0; top: 0; bottom: 0; background: #8bb4d4; }
.bars li.me .fill { background: var(--navy); }
.bars li.me { font-weight: 800; }
.bars .v { text-align: right; font-variant-numeric: tabular-nums; }
.bars .v small { color: var(--muted); font-weight: 400; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* ── 로그인 ── */
.login-page { min-height: 100vh; display: flex; flex-direction: column; }
.login-page .gnb .wrap { height: 72px; }
.login-main { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.login-card { width: 920px; max-width: calc(100% - 32px); display: grid; grid-template-columns: minmax(0, 1fr) 440px; background: #fff; border: 1px solid var(--line); }
.login-card .intro { padding: 46px 44px; background: var(--tint); border-right: 1px solid #e3e8ec; }
.login-card .intro .eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 800; color: var(--navy); }
.login-card .intro h2 { margin: 0 0 18px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.45; }
.login-card .flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: var(--ink2); }
.login-card .flow li { display: flex; gap: 10px; align-items: center; }
.login-card .flow span { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.login-card form { padding: 46px 44px; }
.login-card h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.login-card .field { display: flex; margin: 0 0 16px; }
.login-card .field input { height: 48px; font-size: 16px; }
.login-card .field label { font-weight: 800; color: var(--ink); }
.login-card button[type=submit] { width: 100%; height: 52px; font-size: 16px; }
.login-card .rules { margin: 22px 0 0; padding: 16px 0 0 18px; border-top: 1px solid #e6e9eb; font-size: 13px; color: var(--muted); }
.login-card .msg { display: block; min-height: 22px; margin: 10px 0 0; color: var(--err); font-weight: 700; font-size: 14px; }

/* ── 바닥 ── */
.foot { background: #fff; border-top: 1px solid #e3e3e3; font-size: 13px; color: var(--muted); }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0 24px; }
.foot p { margin: 0; }

/* ── 좁은 화면 - 메뉴는 가로로 밀어 보고, 오른쪽 칸은 아래로 ── */
@media (max-width: 1180px) {
  .gnb .wrap { height: auto; flex-wrap: wrap; gap: 6px 20px; padding-top: 12px; }
  .gnb nav { width: 100%; overflow-x: auto; }
  .gnb nav > ul { justify-content: flex-start; }
  .gnb nav > ul > li > a, .gnb summary { height: 50px; padding: 0 12px; }
  .gnb .menu { left: 0; right: auto; }
  .main.has-aside { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .wrap { max-width: calc(100% - 32px); }
  .band h1 { font-size: 24px; }
  .band-row { flex-direction: column; align-items: flex-start; }
  .band-side { align-items: flex-start; }
  .band-acts { justify-content: flex-start; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .split, .grid2, .deep, .login-card { grid-template-columns: minmax(0, 1fr); }
  .split > div { padding: 0; }
  .split > div + div { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; margin-top: 18px; }
  .login-card .intro { border-right: 0; border-bottom: 1px solid #e3e8ec; padding: 28px 24px; }
  .login-card form { padding: 28px 24px; }
  .log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .foot .wrap { flex-direction: column; }
}
/* 보도자료에서 읽은 표 - 값을 읽은 칸 */
table.grid td { font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); white-space: nowrap; }
table.grid td.read { background: var(--ok-bg); color: var(--ok); font-weight: 700; }