/* 금융기관(모의) 관리자 포털 — 흑백 위주 업무 화면. 외부 폰트/CDN 없음(폐쇄망 대응).
   색은 상태(정상·주의·위험)와 위험 버튼에만 쓴다. 카드 그림자·왼쪽 색 띠·알약 배지는 쓰지 않는다. */
:root {
  --ink:#171717; --ink2:#3a3a3a; --muted:#6b6b6b; --faint:#8a8a8a;
  --line:#e2e2e2; --line2:#ececec; --side:#f3f3f3; --panel:#f5f5f5; --bg:#fff;
  --ok:#1f7a3a; --warn:#b45309; --bad:#b42318;
  --sans:-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
body { margin:0; font:14px/1.55 var(--sans); color:var(--ink); background:var(--bg); }
a { color:var(--ink); }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* 맨 위 한 줄: PoC 표기와 운영 금지 경고 */
.envbar { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; padding:5px 12px; background:var(--ink); color:#d4d4d4; font-size:12px; }
.envbar b { color:#fff; font-weight:600; }
.envbar .danger { color:#f5b74e; font-weight:700; }

/* 화면 틀: 왼쪽 메뉴 + 본문 */
.shell { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100vh; }
.side { background:var(--side); border-right:1px solid var(--line); padding:18px 10px 14px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:10px; padding:0 8px 14px; }
.brand svg { flex:none; }
.brand b { display:block; font-size:14.5px; letter-spacing:-.01em; }
.brand small { display:block; font-size:12px; color:var(--muted); }
.side .grp { font-size:12px; color:var(--faint); padding:14px 10px 4px; }
.side a { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:6px; color:var(--ink); text-decoration:none; font-size:14px; }
.side a::before { content:""; width:17px; height:17px; flex:none; background:var(--ink2); -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
.side a:hover { background:#e9e9e9; }
.side a.active { background:#dfdfdf; font-weight:600; }
.side-foot { margin-top:auto; padding-top:10px; border-top:1px solid var(--line); }
.side-foot a { font-size:13px; color:var(--ink2); }
.side a[data-k=dashboard] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.side a[data-k=flow] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-7 4 14 3-7h4'/%3E%3C/svg%3E"); }
.side a[data-k=history] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16M4 10h16M4 15h10M4 20h7'/%3E%3C/svg%3E"); }
.side a[data-k=stats] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M2 20h20'/%3E%3C/svg%3E"); }
.side a[data-k=fraud] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6zM9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.side a[data-k=channels] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v11H3zM8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.side a[data-k=destroy] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.side a[data-k=link] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12h8M9 8H7a4 4 0 0 0 0 8h2M15 8h2a4 4 0 0 1 0 8h-2'/%3E%3C/svg%3E"); }
.side a[data-k=inference] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h12v12H6zM9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3'/%3E%3C/svg%3E"); }
.side a[data-k=compat] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3-3M20 16H6l3 3'/%3E%3C/svg%3E"); }
.side a[data-k=security] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12v9H6zM8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.side a[data-k=compliance] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h10M10 12h10M10 18h10M4 6l1.5 1.5L8 5M4 12l1.5 1.5L8 11M4 18l1.5 1.5L8 17'/%3E%3C/svg%3E"); }
.side a[data-k=backup] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3zM4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }
.side a[data-k=keys] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15a4 4 0 1 0 8 0 4 4 0 1 0-8 0M11 12l9-9M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E"); }
.side a[data-k=ops] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12a5 5 0 1 0 10 0 5 5 0 1 0-10 0M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E"); }
.side a[data-k=audit] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5'/%3E%3C/svg%3E"); }
.side a[data-k=docs] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h10a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3zM5 17a3 3 0 0 1 3-3h10'/%3E%3C/svg%3E"); }
.side a[data-k=simulator] { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8v18H8zM11 18h2'/%3E%3C/svg%3E"); }

.main { min-width:0; padding:0 32px 56px; }
.who { display:flex; justify-content:flex-end; align-items:center; gap:14px; min-height:48px; border-bottom:1px solid var(--line2); font-size:13px; color:var(--ink2); flex-wrap:wrap; }
.who .refresh { display:inline-flex; gap:6px; align-items:center; color:var(--ink2); margin:0; }
form.inline { display:inline; margin:0; }
.crumb { font-size:12.5px; color:var(--faint); margin:22px 0 4px; }
main#app { min-width:0; }

/* 제목 영역 */
h1 { font-size:32px; line-height:1.15; letter-spacing:-.03em; font-weight:700; margin:0 0 6px; }
h2 { font-size:16px; letter-spacing:-.01em; margin:0 0 10px; color:var(--ink); }
h3 { font-size:14px; margin:14px 0 6px; }
.phead { display:flex; justify-content:space-between; align-items:flex-end; gap:16px 24px; flex-wrap:wrap; margin-bottom:22px; }
.phead p { margin:0; color:var(--muted); max-width:46em; }
.phead .pacts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toolbar { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-bottom:12px; }
.toolbar h1 { margin:0; }
.muted { color:var(--muted); } .small { font-size:12.5px; }
.code { font-family:var(--mono); font-size:12px; color:var(--muted); }

/* 묶음: 카드 대신 위쪽 검은 선으로 구획 */
.grid { display:grid; gap:28px 32px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1180px) { .g3,.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .g2,.g3,.g4 { grid-template-columns:1fr; } }
.card { background:var(--bg); border-top:1px solid var(--ink); padding:12px 0 4px; min-width:0; }
.card.pad0 { padding:0; }
.card h2 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.card h2 a, .card h2 .muted { font-size:13px; font-weight:400; }

/* 현황 숫자: 한 줄 띠(세로 구분선) */
.kpi { border-top:1px solid var(--ink); padding:12px 0 6px; min-width:0; }
.grid:has(> .kpi) { gap:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.grid:has(> .kpi) > .kpi { border-top:0; padding:12px 18px 12px; border-left:1px solid var(--line); }
.g4:has(> .kpi) > .kpi:nth-child(4n+1), .g3:has(> .kpi) > .kpi:nth-child(3n+1), .g2:has(> .kpi) > .kpi:nth-child(2n+1) { border-left:0; padding-left:0; }
@media (max-width:1180px) { .g4:has(> .kpi) > .kpi { border-left:1px solid var(--line); padding-left:18px; } .g4:has(> .kpi) > .kpi:nth-child(2n+1) { border-left:0; padding-left:0; } }
.kpi .l { color:var(--muted); font-size:13px; }
.kpi .v { font-size:28px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.25; margin-top:2px; }
.kpi .s { font-size:12px; color:var(--faint); }
.kpi.bad .v { color:var(--bad); } .kpi.warn .v { color:var(--warn); }

/* 조회조건 상자 */
form.toolbar, .cond { background:var(--panel); padding:12px 16px; }
.cond { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:10px 22px; align-items:center; margin:0; }
.cond .f { display:flex; align-items:center; gap:8px; min-width:0; }
.cond .f > .lb { width:68px; flex:none; font-size:13px; font-weight:600; color:var(--ink2); }
.cond .f input:not([type=checkbox]), .cond .f select { flex:1; min-width:0; }
.cond .acts { grid-column:1/-1; display:flex; justify-content:flex-end; gap:6px; border-top:1px solid var(--line); padding-top:10px; }

/* 표: 가로로 넘치면 표 안에서만 스크롤 */
.tscroll { overflow-x:auto; max-width:100%; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { padding:9px 16px 9px 0; text-align:left; vertical-align:top; }
th { font-weight:500; font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--ink); white-space:nowrap; }
td { border-bottom:1px solid var(--line2); white-space:nowrap; }
td.wrap { white-space:normal; min-width:180px; max-width:420px; }
tbody tr:hover td { background:#fafafa; }
td.r, th.r { text-align:right; } td.c, th.c { text-align:center; }
.scroll { max-height:360px; overflow:auto; }
code, .mono { font-family:var(--mono); font-size:12.5px; }

/* 상태 표시: 점 + 글자(알약 배경 없음) */
.badge { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap; }
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#a3a3a3; flex:none; }
.badge.ok::before { background:var(--ok); }
.badge.bad { color:var(--bad); } .badge.bad::before { background:var(--bad); }
.badge.warn { color:var(--warn); } .badge.warn::before { background:transparent; border:1.5px solid var(--warn); width:6px; height:6px; }
.badge.info::before { background:var(--ink2); }
.badge.gray { color:var(--muted); } .badge.gray::before { background:#c4c4c4; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:#a3a3a3; vertical-align:middle; }
.status-dot.ok { background:var(--ok); } .status-dot.warn { background:var(--warn); } .status-dot.bad { background:var(--bad); }

/* 버튼·입력 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 14px; border:1px solid #bdbdbd; background:#fff; color:var(--ink); border-radius:0; cursor:pointer; font:inherit; font-size:13.5px; text-decoration:none; white-space:nowrap; }
.btn:hover { background:var(--panel); }
.btn.primary { background:var(--ink); border-color:var(--ink); color:#fff; font-weight:600; } .btn.primary:hover { background:#000; }
.btn.danger { border-color:var(--bad); color:var(--bad); } .btn.danger:hover { background:#fdf3f2; }
.btn.small { height:28px; padding:0 10px; font-size:12.5px; }
.btn[disabled] { opacity:.4; cursor:not-allowed; }
input, select, textarea { font:inherit; font-size:13.5px; height:32px; padding:0 8px; border:1px solid #c8c8c8; border-radius:0; background:#fff; color:var(--ink); }
input[type=checkbox] { height:auto; }
textarea { height:auto; padding:6px 8px; }
label { display:inline-flex; align-items:center; gap:6px; margin-right:10px; color:var(--ink2); font-size:13px; }

/* 알림 상자: 왼쪽 띠 없이 얇은 테두리 */
.alert { padding:10px 14px; margin:0 0 14px; border:1px solid var(--line); background:var(--panel); color:var(--ink2); font-size:13.5px; }
.alert.ok { background:#f3f8f4; border-color:#cfe3d4; color:#1f5130; }
.alert.warn { background:#fdf7ec; border-color:#ecd5a8; color:#6f4400; }
.alert.bad { background:#fdf2f1; border-color:#efc5bf; color:#8a1c1c; }
.alert.info { background:var(--panel); border-color:var(--line); color:var(--ink2); }
.alert ul { margin:6px 0 0; padding-left:18px; } .alert li { margin:2px 0; }
.notes { margin-top:30px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.75; }
.notes p { margin:0; }
.empty { color:var(--muted); padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }
.pager { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; font-size:13px; color:var(--muted); }
.pager span:last-child { display:flex; gap:4px; }

/* 막대·목록·정의 목록 */
.bars .row { display:flex; align-items:center; gap:10px; margin:5px 0; }
.bars .lbl { width:110px; flex:none; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bars .bar { flex:1; background:#ededed; height:8px; position:relative; }
.bars .bar i { display:block; height:100%; background:var(--ink2); }
.bars .bar i.bad { background:var(--bad); }
.bars .val { width:auto; min-width:60px; text-align:right; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tl { list-style:none; margin:0; padding:0; }
.tl li { padding:6px 0; border-bottom:1px solid var(--line2); font-size:13px; }
.tl time { color:var(--faint); margin-right:8px; font-size:12px; font-variant-numeric:tabular-nums; }
.chain-ok { color:var(--ok); font-weight:600; } .chain-bad { color:var(--bad); font-weight:700; }
.kv { display:grid; grid-template-columns:150px minmax(0,1fr); gap:6px 12px; font-size:13.5px; margin:0; }
.kv dt { color:var(--muted); } .kv dd { margin:0; word-break:break-word; }
.chip { display:inline-block; margin:2px 4px 2px 0; padding:1px 8px; border:1px solid var(--line); font-size:12px; }
pre.out { background:var(--panel); color:var(--ink); border:1px solid var(--line); padding:10px; overflow:auto; max-height:260px; font-size:12px; }
svg text { font:11px var(--sans); fill:#6b6b6b; }
.legend span { display:inline-flex; align-items:center; margin-right:14px; font-size:12px; color:var(--muted); }
.legend i { width:10px; height:10px; display:inline-block; margin-right:5px; }
.steps { list-style:none; padding:0; margin:0 0 8px; } .steps li { padding:4px 0; }
.posture { list-style:none; padding:0; margin:0; } .posture li { padding:7px 0; border-bottom:1px solid var(--line2); }
.progress { height:8px; background:#ededed; overflow:hidden; } .progress i { display:block; height:100%; background:var(--ink); transition:width .4s; }
.progress.bad i { background:var(--bad); }
.cmp td.hit { color:var(--bad); background:#fdf2f1; font-weight:600; }
.cmp tr.hl td { background:var(--panel); font-weight:600; }

/* 확인 창·알림 토스트 */
.modal-ov { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal { background:#fff; border:1px solid var(--ink); padding:22px 24px 18px; width:min(460px,92vw); box-shadow:0 12px 32px rgba(0,0,0,.18); }
.modal p { margin:0 0 18px; font-size:15px; line-height:1.6; }
.modal-btns { display:flex; justify-content:flex-end; gap:8px; }
.toast { position:fixed; right:20px; bottom:20px; max-width:460px; padding:11px 16px; color:#fff; background:var(--ink); z-index:60; font-size:13.5px; }
.toast.bad { background:var(--bad); }

/* 로그인 */
.login-body { display:flex; flex-direction:column; min-height:100vh; background:var(--side); }
.login-card { margin:12vh auto 0; background:#fff; border-top:2px solid var(--ink); padding:30px 32px 26px; width:min(420px,92vw); }
.login-card h1 { font-size:28px; margin-bottom:4px; }
.login-card label { display:flex; flex-direction:column; align-items:stretch; margin:12px 0 0; gap:5px; font-weight:600; }
.login-card .btn { width:100%; margin-top:18px; height:40px; }
.hint { font-size:12.5px; color:var(--muted); margin-top:18px; line-height:1.7; } .err { color:var(--bad); } .ok { color:var(--ok); }

/* 대시보드 상단 "처리 흐름" — 그림 자체의 모양은 공용 flow-diagram.css 가 정한다 */
.pipe-card { margin-bottom:28px; } .pipe-card h2 { margin-bottom:4px; } .pipe-foot { margin:6px 0 0; }

@media (max-width:760px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; padding:12px 8px; }
  .side nav { display:flex; flex-wrap:wrap; gap:2px; } .side .grp { width:100%; padding:8px 10px 2px; }
  .side-foot { display:none; }
  .main { padding:0 16px 40px; }
  h1 { font-size:26px; }
}