:root{
  /* Hwaseong Special City — 지정서체 (Pretendard) */
  --font:"Pretendard GOV Variable","Pretendard GOV","Pretendard Variable",Pretendard,
    -apple-system,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* Hwaseong Blue — 전용색상 BS 1-03 (PANTONE 7686C, primary) */
  --blue:#004696; --blue-text:#003C80; --blue-tint:#E6EEF5; --blue-hover:#003C80;
  /* Hwaseong Orange — sparing accent (PANTONE 1505C) */
  --orange:#DC6E2D; --orange-text:#9E4B18; --orange-tint:#FCF0E8;
  /* Cool neutral gray ramp (HS named grays) */
  --g00:#fff; --g05:#F6F8FA; --g10:#EDF1F5; --g20:#DDE3EA; --g30:#C6C6C6;
  --g50:#9B9B9B; --g60:#6E7884; --g70:#515963; --g80:#4B4B4B; --g90:#242A30; --g95:#1B2026; --g99:#14181C;
  /* semantic */
  --ok:#1E8A5B; --ok-text:#136141; --ok-bg:#E7F4EE;
  --warn:#E8950C; --warn-text:#A86A06; --warn-bg:#FEF6E6;
  --err:#D83A36; --err-text:#9E2723; --err-bg:#FCEBEA;
  --info:#004696; --info-text:#003C80; --info-bg:#E6EEF5;
  --sh-sm:0 1px 2px rgba(20,38,64,.05);
  --sh-md:0 4px 14px rgba(20,38,64,.08);
  --sh-lg:0 16px 40px -12px rgba(20,38,64,.16);
  --track:-.02em; --container:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--g95);font-size:17px;line-height:1.6;
  letter-spacing:var(--track);background:var(--g05);-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word}
a{color:var(--blue-text)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}

/* header */
header{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--g10);position:sticky;top:0;z-index:20}
.head{display:flex;align-items:center;gap:14px;height:64px}
.brandhome{display:flex;align-items:center;gap:14px;cursor:pointer;border-radius:10px;padding:4px 6px;margin-left:-6px;transition:background .15s}
.brandhome:hover{background:var(--g05)}
.logo{height:42px;width:auto;display:block;object-fit:contain}
.brand b{font-weight:700;font-size:16px;letter-spacing:-.03em;display:block;line-height:1.2}
.brand span{font-size:11.5px;color:var(--g60);letter-spacing:-.01em}
nav{margin-left:auto;display:flex;gap:2px}
nav button{border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--g70);
  padding:8px 14px;border-radius:8px;cursor:pointer;letter-spacing:-.01em;transition:.15s}
nav button:hover{background:var(--g05);color:var(--g95)}
nav button.active{color:var(--blue-text);background:var(--blue-tint)}

main{min-height:70vh}
.tab{display:none} .tab.show{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* hero */
.hero{padding:36px 0 56px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-200px 0 auto;height:520px;z-index:0;
  background:radial-gradient(ellipse 60% 80% at 50% 0,rgba(0,70,150,.10),transparent 70%)}
.hero .wrap{position:relative;z-index:1;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--blue-tint);color:var(--blue-text);
  font-size:13px;font-weight:600;padding:6px 12px;border-radius:9999px;letter-spacing:-.01em}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--blue)}
h1{font-size:clamp(25px,3.4vw,40px);font-weight:700;line-height:1.18;letter-spacing:-.035em;
  margin:20px 0 16px;white-space:nowrap}
h1 .accent{color:var(--orange)}
.lead{font-size:17px;color:var(--g70);line-height:1.62;max-width:980px;margin:0 auto;letter-spacing:-.015em}
.cta{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;font:inherit;font-weight:600;font-size:15.5px;
  padding:13px 22px;border-radius:10px;cursor:pointer;letter-spacing:-.01em;transition:.15s}
.btn.pri{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(0,70,150,.28)}
.btn.pri:hover{background:var(--blue-hover);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,70,150,.32)}
.btn.pri:disabled{opacity:.6;cursor:default;transform:none;box-shadow:0 2px 8px rgba(0,70,150,.28)}
.btn.ghost{background:#fff;color:var(--g90);border:1px solid var(--g20)}
.btn.ghost:hover{background:var(--g05);border-color:var(--g30)}

/* 관리자(⚙) 톱니 + 설정 모달 */
.gear{margin-left:auto;width:46px;height:46px;flex:0 0 auto;border:1px solid var(--g20);background:#fff;
  border-radius:11px;font-size:24px;line-height:1;cursor:pointer;color:var(--g60);
  display:flex;align-items:center;justify-content:center;transition:.15s}
.gear:hover{background:var(--g05);color:var(--blue);border-color:var(--g30)}
.modal-back{position:fixed;inset:0;background:rgba(19,20,22,.45);z-index:100;padding:20px;
  display:flex;align-items:center;justify-content:center}
.modal-back[hidden]{display:none}
.modal{background:#fff;border-radius:14px;max-width:440px;width:100%;padding:22px 22px 20px;
  box-shadow:0 18px 50px rgba(0,0,0,.25)}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:18px;font-weight:700;letter-spacing:var(--track)}
.modal-x{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--g50)}
.modal-sub{font-size:13px;color:var(--g60);margin:8px 0 12px;line-height:1.55}
.admin-pwrow{display:flex;gap:8px}
.admin-pwrow input{flex:1;padding:10px 12px;border:1px solid var(--g20);border-radius:9px;font:inherit;font-size:14px}
.admin-pwrow input:focus{outline:none;border-color:var(--blue)}
.admin-pwrow .btn{padding:10px 18px;font-size:14px}
.admin-msg{font-size:13px;color:var(--err);margin-top:8px;min-height:18px}
.admin-h4{font-size:14px;font-weight:700;margin:16px 0 2px;color:var(--g90)}
.admin-h4 span{color:var(--g50);font-weight:600}
#admin-supp{max-height:260px;overflow:auto;margin-top:4px}
.supp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border:1px solid var(--g10);border-radius:9px;margin-bottom:7px}
.supp-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.supp-text{font-size:13.5px;word-break:break-all}
.supp-link{font-size:12px;color:var(--blue);text-decoration:none;word-break:break-all}
.supp-link:hover{text-decoration:underline}
.supp-undo{flex:0 0 auto;border:1px solid var(--g20);background:#fff;border-radius:7px;
  padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--blue);white-space:nowrap;transition:.15s}
.supp-undo:hover{background:var(--g05)}
.supp-undo:disabled{opacity:.6;cursor:default}
.admin-empty{font-size:13px;color:var(--g50);padding:6px 0}
.admin-foot{margin-top:14px;text-align:right}
.admin-foot .btn{padding:9px 18px;font-size:14px}

/* 관리자 전용 페이지 */
.admin-top{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;margin-bottom:6px}
.admin-top .admin-title{color:var(--blue);text-align:center}
.admin-top .btn{position:absolute;right:0;top:50%;transform:translateY(-50%);padding:9px 18px;font-size:14px}
.admin-sec{font-size:16px;font-weight:700;letter-spacing:var(--track);margin:34px 0 4px;
  padding-top:18px;border-top:1px solid var(--g10)}
.admin-tag{display:inline-block;margin-left:6px;font-size:12px;font-weight:600;color:var(--blue);
  background:var(--blue-tint);border-radius:6px;padding:2px 8px;vertical-align:middle}
.admin-tag.soon{color:var(--g60);background:var(--g05)}
.setting-card{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--g10);border-radius:11px;padding:16px 18px;margin-top:8px}
.setting-card.disabled{opacity:.72;background:var(--g05)}
.setting-name{font-size:14.5px;font-weight:700}
.setting-desc{font-size:12.5px;color:var(--g60);margin-top:3px;line-height:1.5}
.setting-soon{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--g60);
  border:1px solid var(--g20);border-radius:7px;padding:5px 11px}
.setting-state{font-size:12px;color:var(--g60);margin-top:7px}
.setting-state.on{color:var(--blue);font-weight:600}
.setting-state.warn{color:var(--err);font-weight:600}
.toggle{flex:0 0 auto;width:48px;height:28px;border-radius:999px;border:0;background:var(--g20);
  position:relative;cursor:pointer;transition:background .15s;padding:0}
.toggle .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.toggle.on{background:var(--blue)}
.toggle.on .knob{left:23px}
.toggle:disabled{opacity:.45;cursor:not-allowed}

/* 관리자 하위 탭 */
.subnav{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0 24px;align-items:flex-start}
.subnav-group{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center;
  background:var(--g05);border:1px solid var(--g20);border-radius:12px;padding:5px;
  position:relative}
.subnav-cap{font-size:10.5px;font-weight:700;color:var(--g50);letter-spacing:.02em;
  align-self:center;padding:0 8px 0 6px;border-right:1px solid var(--g20);margin-right:2px}
.subnav button{border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--g60);
  padding:10px 18px;border-radius:9px;cursor:pointer;transition:.15s;letter-spacing:-.01em}
.subnav button:hover{color:var(--g90);background:var(--g00)}
.subnav button.on{color:#fff;background:var(--blue);box-shadow:0 2px 8px rgba(0,70,150,.28)}
.subnav button.on:hover{background:var(--blue)}
.subpanel[hidden]{display:none}
/* AI 사용량 */
.usage-today{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:11px;padding:16px 18px;margin-bottom:8px}
.usage-today.warn{background:#fff7ed;border-color:#fed7aa}
.usage-today .u-label{font-size:14px;color:var(--g70)}
.usage-today .u-num{font-size:22px;font-weight:800;color:var(--g90);letter-spacing:-.02em}
.usage-today .u-sub{font-size:13px;color:var(--g60)}
.usage-table{width:100%;border-collapse:collapse;margin-top:4px;font-size:13.5px}
.usage-table th{text-align:left;color:var(--g60);font-weight:600;font-size:12px;padding:7px 10px;border-bottom:1px solid var(--g10)}
.usage-table td{padding:9px 10px;border-bottom:1px solid var(--g05)}
.usage-table .u-cnt{font-variant-numeric:tabular-nums;font-weight:600}
.u-tag{font-size:12px;font-weight:600;border-radius:6px;padding:2px 9px;white-space:nowrap}
.u-tag.lv0{color:var(--g50);background:var(--g05)}
.u-tag.lv1{color:#15803d;background:#f0fdf4}
.u-tag.lv2{color:var(--blue);background:var(--blue-tint)}
.u-tag.lv3{color:#c2410c;background:#fff7ed}
.usage-help{margin-top:18px;background:var(--g05);border-radius:11px;padding:16px 18px}
.usage-help h4{font-size:13.5px;font-weight:700;margin-bottom:8px}
.usage-help ul{margin:0;padding-left:18px}
.usage-help li{font-size:12.5px;color:var(--g70);line-height:1.65;margin-bottom:7px}

/* 처리 기록 뱃지·버튼 */
.rv-badge{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.rv-badge.ing{color:#c2410c;background:#fff7ed}
.rv-badge.done{color:#15803d;background:#f0fdf4}
.op-btn.proc{color:var(--blue);border-color:var(--g20)}
/* 처리 모달 */
.rv-row{display:flex;gap:8px;margin:6px 0 12px;flex-wrap:wrap}
.rv-btn{border:1px solid var(--g20);background:#fff;border-radius:9px;padding:9px 16px;font:inherit;
  font-size:13.5px;font-weight:600;color:var(--g70);cursor:pointer;transition:.15s}
.rv-btn:hover{background:var(--g05)}
.rv-btn.on{color:#fff;background:var(--blue);border-color:var(--blue)}
.rv-btn.rv-clear.on{background:var(--g60);border-color:var(--g60)}
.review-note{width:100%;min-height:74px;resize:vertical;padding:10px 12px;border:1px solid var(--g20);
  border-radius:9px;font:inherit;font-size:13.5px;line-height:1.5;box-sizing:border-box}
.review-note:focus{outline:none;border-color:var(--blue)}
/* 처리 보고서 */
.report-actions{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.report-actions .btn{padding:10px 16px;font-size:14px}
.report-table td{vertical-align:middle}
.report-table .diff2{font-size:13px}
/* 변경 이력: 기록 간격을 조금 넓혀 읽기 쉽게 */
#audit-body table{margin-top:2px}
#audit-body td{padding:13px 12px}
.audit-no{color:var(--g60);font-variant-numeric:tabular-nums;text-align:right;width:48px;white-space:nowrap}

/* 산하기관 진단·등록 */
.sub-addbox{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sub-addbox input{flex:1;min-width:160px;padding:10px 12px;border:1px solid var(--g20);
  border-radius:9px;font:inherit;font-size:14px}
.sub-addbox input:focus{outline:none;border-color:var(--blue)}
.sub-addbox .btn{padding:10px 16px;font-size:14px;flex:0 0 auto}
.vbadge{display:inline-block;font-size:12px;font-weight:700;border-radius:7px;padding:3px 10px}
.vbadge.ok{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}
.vbadge.limited{color:#c2410c;background:#fff7ed;border:1px solid #fed7aa}
.vbadge.blocked{color:#9E2723;background:#FCEBEA;border:1px solid #f6c6bb}
.insp-card{background:#fff;border:1px solid var(--g10);border-radius:12px;padding:18px;
  margin-top:8px;box-shadow:var(--sh-sm)}
.insp-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.insp-url{font-size:13px;color:var(--g60);word-break:break-all}
.insp-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.insp-table th{text-align:left;color:var(--g60);font-weight:600;padding:7px 10px;
  border-bottom:1px solid var(--g10);width:90px;vertical-align:top}
.insp-table td{padding:7px 10px;border-bottom:1px solid var(--g05);color:var(--g80)}
.insp-hints{margin-top:12px;padding:12px 16px;background:var(--g05);border-radius:9px;list-style:disc inside}
.insp-hints li{font-size:13px;color:var(--g80);line-height:1.55;margin-bottom:4px}
.sub-row{background:#fff;border:1px solid var(--g10);border-radius:11px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh-sm)}
.sub-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sub-name{font-size:15px;font-weight:700;color:var(--g90)}
.verdict-reason{font-size:12.5px;color:var(--g60)}
.sub-meta{font-size:12.5px;color:var(--g60);margin-top:4px}
.sub-date{color:var(--g50)}
.sub-acts{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap;align-items:center}
.btn-group{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;
  background:var(--g05);border:1px solid var(--g10);border-radius:10px}
.btn-group-label{font-size:11px;font-weight:700;color:var(--g50);margin-right:2px}
.supp-undo.danger{color:var(--err-text);border-color:#f6c6bb}
.supp-undo.danger:hover{background:var(--err-bg)}
.supp-undo.view-on{background:var(--blue);color:#fff;border-color:var(--blue)}
.insp-titlebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.insp-titlebar .admin-h4{margin:0}
.insp-close{border:1px solid var(--g20);background:#fff;border-radius:8px;padding:6px 12px;
  font:inherit;font-size:12.5px;cursor:pointer;color:var(--g70);white-space:nowrap}
.insp-close:hover{background:var(--g05);border-color:var(--g30);color:var(--err-text)}
/* SSR 진입점 자동 추천 카드 */
.alt-card{margin-top:14px;background:linear-gradient(135deg,var(--blue-tint),var(--orange-tint));
  border:1px solid var(--g10);border-radius:11px;padding:16px 18px}
.alt-title{font-size:14px;font-weight:700;color:var(--blue-text)}
.alt-desc{font-size:13px;color:var(--g80);margin-top:6px;line-height:1.55}
.alt-url{font-size:13px;color:var(--g90);background:#fff;border:1px solid var(--g20);
  border-radius:7px;padding:8px 12px;margin-top:10px;word-break:break-all;font-variant-numeric:tabular-nums}
.alt-use{margin-top:10px;padding:9px 16px;font-size:14px}
.sub-inline-insp{margin-top:12px;padding-top:12px;border-top:1px dashed var(--g20)}
.sub-inline-insp[hidden]{display:none}
.scan-prog{margin-top:10px;font-size:13px;color:var(--g70);padding:9px 12px;border-radius:9px;background:var(--g05)}
.scan-stop{display:block;margin-top:10px}
.scan-prog.s-running{background:var(--blue-tint);color:var(--blue-text)}
.scan-prog.s-done{background:#f0fdf4;color:#15803d}
.scan-prog.s-error{background:#fff7ed;color:#c2410c}
.scan-prog[hidden]{display:none}
.scan-bar{height:6px;background:rgba(0,0,0,.08);border-radius:3px;margin-top:6px;overflow:hidden}
.scan-bar-fill{height:100%;background:var(--blue);transition:width .4s ease}

/* hero product visual — floating browser frame */
.shot{background:#fff;border:1px solid var(--g10);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden;
  max-width:820px;margin:52px auto 0;text-align:left}
.shot .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--g10);background:var(--g05)}
.shot .bar i{width:10px;height:10px;border-radius:50%;background:var(--g20);display:block}
.shot .bar .url{margin-left:10px;font-size:11.5px;color:var(--g60);background:#fff;border:1px solid var(--g10);
  padding:4px 10px;border-radius:6px;flex:1}
.shot .body{padding:20px}
.shot .ttl{font-size:13px;color:var(--g60);font-weight:600;margin-bottom:12px}
.sugg{border:1px solid var(--g10);border-radius:12px;padding:14px 16px;box-shadow:var(--sh-sm)}
.sugg .row1{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tag{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px;flex-shrink:0}
.tag.err{background:var(--err-bg);color:var(--err-text)}
.tag.warn{background:var(--warn-bg);color:var(--warn-text)}
.tag.info{background:var(--info-bg);color:var(--info-text)}
.tag.ok{background:var(--ok-bg);color:var(--ok-text)}
.tag.muted{background:#eef0f3;color:#637184}
.conf{margin-left:auto;font-size:12px;color:var(--g50);font-variant-numeric:tabular-nums}
.diff{font-size:16px}
.diff .o{color:var(--err-text);text-decoration:line-through;text-decoration-color:rgba(189,44,15,.5)}
.diff .arw{color:var(--g30);margin:0 8px}
.diff .s{color:var(--ok-text);font-weight:700;background:var(--ok-bg);padding:1px 7px;border-radius:5px}
.sugg .why{font-size:13px;color:var(--g60);margin-top:8px;line-height:1.5}
.sugg .acts{display:flex;gap:8px;margin-top:12px}
.sugg .acts button{font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:7px;cursor:pointer;border:1px solid var(--g20);background:#fff;color:var(--g80)}
.sugg .acts button.ok{background:var(--blue);color:#fff;border-color:var(--blue)}

/* 히어로: 실시간 점검 활동 콘솔 */
.console{max-width:760px;margin:30px auto 0;background:#0f1720;border:1px solid #1e2a37;
  border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden;text-align:left}
.console-bar{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 16px;border-bottom:1px solid #1e2a37;background:#0b1118;flex-wrap:wrap}
.livedot{width:9px;height:9px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:livepulse 1.8s infinite}
.livedot.warn{background:#f59e0b}
.console-note{margin-top:14px;font-size:14.5px;color:var(--g80);font-weight:600;line-height:1.55;text-align:center}
.hw-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 12px;flex-wrap:wrap}
.hw-actions .btn{padding:8px 14px;font-size:13px;flex:0 0 auto}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.console-status{color:#e2e8f0;font-size:13px;font-weight:700;letter-spacing:-.01em}
.console-meta{color:#7c8a99;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.console-feed{height:208px;overflow:hidden;padding:10px 16px;font-family:var(--mono);position:relative}
.cline{display:flex;gap:8px;align-items:baseline;font-size:13px;line-height:2;color:#94a3b8;
  white-space:nowrap;overflow:hidden;animation:crise .45s ease}
@keyframes crise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cline .time{color:#64748b;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:60px}
.cline .ic{flex-shrink:0;width:15px}
.cline.scan .ic{color:#38bdf8}
.cline.scan .txt{color:#cbd5e1}
.cline.status .ic{color:#a78bfa}
.cline.status .txt{color:#c4b5fd}
.cline .path{color:#64748b;overflow:hidden;text-overflow:ellipsis}
.cline .note{color:#475569;flex-shrink:0}
.cline.warn{color:#e2e8f0}
.cline.warn .ic{color:#fb923c}
.cline.warn .o{color:#f87171;text-decoration:line-through;text-decoration-color:rgba(248,113,113,.5)}
.cline.warn .fix{color:#34d399;font-weight:700}
@media(max-width:860px){ .console-meta{display:none} }

/* sections */
section.block{padding:64px 0;border-top:1px solid var(--g10)}
.h2{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.3}
.sub{color:var(--g60);font-size:16px;margin-top:8px;letter-spacing:-.015em}
.kicker{font-size:13px;font-weight:600;color:var(--blue-text);letter-spacing:.0em;margin-bottom:10px}

/* stats — 메인 3카드(화성 통합 · 다른 시군구 · 운영비) */
.stats3{display:grid;grid-template-columns:1.4fr 1.4fr 1fr;gap:16px;margin-top:28px}
.bigstat{background:#fff;border:1px solid var(--g20);border-radius:14px;padding:22px 24px;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:14px}
.bigstat.clickable{cursor:pointer;transition:.15s}
.bigstat.clickable:hover{border-color:var(--blue);box-shadow:var(--sh-md);transform:translateY(-2px)}
.bigstat-title{font-size:13.5px;font-weight:700;color:var(--g70);letter-spacing:-.01em}
.bigstat-metrics{display:flex;gap:16px}
.bigstat-metrics>div{flex:1;text-align:center}
.bigstat-metrics .num{font-size:34px;font-weight:600;line-height:1.05;color:var(--g99);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.bigstat-metrics .num.blue{color:var(--blue)}
.bigstat-metrics .label{font-size:12.5px;color:var(--g60);margin-top:5px}
.citylist{display:flex;flex-direction:column;gap:9px;justify-content:center;flex:1}
.cityrow{display:flex;align-items:center;gap:9px;font-size:13px}
.cityrow .cn{min-width:46px;color:var(--g90);font-weight:700;flex-shrink:0}
.cityrow .bar{flex:1;height:7px;background:var(--g10);border-radius:4px;overflow:hidden}
.cityrow .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#4D86BA);border-radius:4px}
.cityrow .cv{min-width:56px;text-align:right;color:var(--g70);font-variant-numeric:tabular-nums;flex-shrink:0}
.cmore{font-size:12px;color:var(--g50)}
.bigstat.cost{align-items:center;justify-content:center;text-align:center;gap:6px}
.bigstat.cost .costnum{font-size:40px;font-weight:700;letter-spacing:-.03em}
.bigstat.cost .cost-sub{font-size:12.5px;color:var(--g60)}
@media(max-width:860px){ .stats3{grid-template-columns:1fr} }

/* stats (구) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.stat{background:#fff;border:1px solid var(--g20);border-radius:12px;padding:22px 24px;box-shadow:var(--sh-sm)}
.stat .num{font-size:34px;font-weight:600;line-height:1.1;color:var(--g99);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat .num.blue{color:var(--blue)}
.stat .label{font-size:13.5px;font-weight:500;color:var(--g60);margin-top:6px}
.stat.clickable{cursor:pointer;transition:.15s}
.stat.clickable:hover{border-color:var(--blue);box-shadow:var(--sh-md);transform:translateY(-2px)}

/* 강조: 24/7 자율·무료 하이라이트 */
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.hcard{background:#fff;border:1px solid var(--g10);border-radius:14px;padding:24px;box-shadow:var(--sh-sm);text-align:center}
.hcard .big{font-size:30px;font-weight:800;color:var(--blue);letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.hcard .big.sm{font-size:22px}
.hcard h4{font-size:16px;font-weight:700;margin-top:10px;letter-spacing:-.02em}
.hcard p{font-size:13.5px;color:var(--g60);margin-top:6px;line-height:1.5}

/* how */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.step{background:#fff;border:1px solid var(--g10);border-radius:14px;padding:22px;box-shadow:var(--sh-sm)}
.step .n{width:30px;height:30px;border-radius:8px;background:var(--blue-tint);color:var(--blue-text);
  font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step h4{font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.step p{font-size:13.5px;color:var(--g60);margin-top:5px;line-height:1.5}

/* budget */
.budget{margin-top:32px;background:linear-gradient(135deg,var(--blue-tint),var(--orange-tint));
  border:1px solid var(--g10);border-radius:16px;padding:32px}
.budget h3{font-size:20px;font-weight:700;letter-spacing:-.025em}
.budget p{color:var(--g70);font-size:15.5px;margin-top:10px;max-width:60rem;line-height:1.65}
.budget-table{margin-top:18px;background:#fff;border:1px solid var(--g10);border-radius:12px;overflow:hidden;box-shadow:var(--sh-sm)}
.budget-table table{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px}
.budget-table th{height:42px;padding:0 16px;text-align:left;background:#eef2f7;font-size:13px;font-weight:700;color:var(--g99);border-bottom:1px solid #d6e0eb}
.budget-table td{padding:12px 16px;color:var(--g80);border-bottom:1px solid var(--g10);vertical-align:top}
.budget-table tr:last-child td{border-bottom:0}
.budget-table td:first-child{font-weight:700;color:var(--g95);white-space:nowrap}
.budget-table td.won{color:var(--ok-text);font-weight:800;text-align:right;white-space:nowrap}
.budget-table th:last-child{text-align:right}
.budget-foot{font-weight:600;color:var(--g90)!important;
  border-left:4px solid var(--blue);background:#fff;padding:14px 18px;
  border-radius:0 10px 10px 0;margin-top:20px!important;box-shadow:var(--sh-sm)}

/* live */
.urlbox{display:flex;gap:10px;margin-top:24px;max-width:680px}
.urlbox input{flex:1;border:1px solid var(--g20);border-radius:10px;padding:13px 16px;font:inherit;font-size:15px;color:var(--g95)}
.urlbox input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,70,150,.2)}
.results{margin-top:28px;display:grid;gap:12px;max-width:760px}
#live-history{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-width:760px}
.lh-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--g10);
  border-radius:10px;background:#fff;cursor:pointer;transition:.12s;font-size:13.5px}
.lh-item:hover{border-color:var(--blue);background:var(--g05)}
.lh-time{color:var(--g50);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:74px}
.lh-url{color:var(--blue-text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lh-count{flex-shrink:0;font-weight:600;font-size:12px;padding:3px 10px;border-radius:20px}
.lh-count.has{background:var(--err-bg);color:var(--err-text)}
.lh-count.ok{background:var(--ok-bg);color:var(--ok-text)}
.note{font-size:13px;color:var(--g50);margin-top:18px;letter-spacing:-.01em}

/* filters segmented */
.filterbox{background:var(--g05);border:1px solid var(--g10);border-radius:12px;
  padding:14px 18px;margin:22px 0 14px;display:flex;flex-direction:column;gap:8px}
.filters-row{display:flex;align-items:center;gap:10px;margin:0}
.filters-row .flabel{font-size:13px;font-weight:700;color:var(--g80);min-width:38px}
.filters-row .seg{margin:0;flex-wrap:wrap;background:#fff;border:1px solid var(--g10)}
.cap-hint{color:var(--g50);font-weight:400}
.seg{display:inline-flex;background:var(--g05);border-radius:9px;padding:3px;gap:2px;margin:24px 0 18px}
.seg button{font:inherit;font-size:13.5px;font-weight:600;color:var(--g60);border:0;background:none;
  padding:7px 16px;border-radius:7px;cursor:pointer;transition:.12s}
.seg button.on{background:#fff;color:var(--g99);box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* table */
.tablewrap{background:#fff;border:1px solid var(--g10);border-radius:14px;overflow:hidden;box-shadow:var(--sh-sm)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
thead th{height:44px;padding:0 18px;text-align:left;background:#eef2f7;font-size:13px;font-weight:700;
  color:var(--g99);border-bottom:1px solid #d6e0eb}
tbody td{height:54px;padding:0 18px;vertical-align:middle;color:var(--g80);border-bottom:1px solid var(--g10)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--g05)}
.diff2 .o{color:var(--err-text);font-weight:600}
.diff2 .arw{color:var(--g30);margin:0 6px}
.diff2 .s{color:var(--ok-text);font-weight:700}
td a{font-size:13.5px;text-decoration:none;font-weight:600}
td a:hover{text-decoration:underline}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;
  font-size:12.5px;font-weight:600;line-height:1}
.badge .bd{width:6px;height:6px;border-radius:50%}
.badge.det{background:var(--err-bg);color:var(--err-text)} .badge.det .bd{background:var(--err)}
.badge.pend{background:var(--warn-bg);color:var(--warn-text)} .badge.pend .bd{background:var(--warn)}
.badge.fix{background:var(--ok-bg);color:var(--ok-text)} .badge.fix .bd{background:var(--ok)}

/* 페이지 펼침 링크(수정용 — 그룹 행의 모든 페이지 주소) */
.pagetoggle{font:inherit;font-size:13.5px;font-weight:600;color:var(--blue-text);background:none;border:0;cursor:pointer;padding:0}
.pagetoggle:hover{text-decoration:underline}
.pagelist{margin:10px 0 4px;padding:0;list-style:decimal;border:1px solid var(--g10);
  border-radius:8px;max-width:560px;background:var(--g05);overflow:hidden}
.pagelist .pageitem{padding:7px 12px 7px 8px;margin-left:24px;border-top:1px solid var(--g10);
  font-size:13px;line-height:1.45;color:var(--g60);font-variant-numeric:tabular-nums}
.pagelist .pageitem:first-child{border-top:0}
.pagelist .plink{color:var(--blue-text);text-decoration:none;word-break:break-all}
.pagelist .plink:hover{text-decoration:underline}

/* empty state */
.empty{display:none;text-align:center;padding:52px 24px;border:1px dashed var(--g20);
  border-radius:14px;background:var(--g05);margin-top:0}
.empty .ic{font-size:34px;opacity:.5}
.empty h4{font-size:15.5px;font-weight:700;margin-top:10px;color:var(--g80)}
.empty p{font-size:13.5px;color:var(--g50);margin-top:4px}

/* showcase */
.cities{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.city{background:#fff;border:1px solid var(--g10);border-radius:16px;padding:26px;box-shadow:var(--sh-sm)}
.city.expanded{grid-column:1 / -1}   /* 검출 내역 펼치면 카드를 전체 폭으로 → 옆 카드와 겹쳐 막혀 보이지 않게 */
.city .ch{display:flex;align-items:center;gap:10px}
.city .ch h3{font-size:19px;font-weight:700;letter-spacing:-.025em}
.city .ch .cnt{margin-left:auto;font-size:13px;color:var(--g60);font-variant-numeric:tabular-nums}
.pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:9999px;background:var(--info-bg);color:var(--info-text)}
.pill.blocked{background:var(--g10);color:var(--g70)}
.blocked-note{border-top:1px solid var(--g10);margin-top:18px;padding-top:14px}
.blocked-note .bn-title{font-size:14px;font-weight:700;color:var(--g80)}
.blocked-note .bn-sub{font-size:13px;color:var(--g60);margin-top:6px;line-height:1.55}
.city .exs{border-top:1px solid var(--g10);margin-top:18px;padding-top:8px}
.city .ex{display:flex;align-items:center;gap:9px;font-size:14.5px;padding:9px 0}
.city .ex .tag{flex-shrink:0}
.city .lnk{margin-top:10px}
.citymore{margin-top:14px}
.city-detail{margin-top:16px;border-top:1px solid var(--g10);padding-top:16px}
.city-detail[hidden]{display:none}
.city-detail .seg.citytype{margin:0 0 14px}
.city-detail .tablewrap{font-size:14px}

footer{border-top:1px solid var(--g10);background:#fff}
footer .wrap{padding:28px 24px;color:var(--g50);font-size:12.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
footer .sep{color:var(--g20)}

/* 운영자 모드 (제외 버튼·배너) */
.op-bar{background:var(--g99);color:#fff;text-align:center;font-size:13px;font-weight:600;
  padding:9px 12px;letter-spacing:-.01em}
.op-btn{margin-left:10px;font:inherit;font-size:12px;font-weight:600;color:var(--err-text);
  background:#fff;border:1px solid var(--g20);border-radius:6px;padding:3px 9px;cursor:pointer;
  vertical-align:middle;transition:.12s}
.op-btn:hover{background:var(--err-bg);border-color:#f6c6bb}
.op-btn:disabled{opacity:.6;cursor:default}
/* 오류 위치 보기 — '위치' 버튼 + 행 아래 펼침 + 노란 하이라이트 */
.op-btn.loc{color:var(--blue);border-color:var(--g20)}
.op-btn.loc.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.locate-row td{background:#fffbe6;border-bottom:1px solid var(--g10);padding:10px 14px}
.locate-box{font-size:13.5px;line-height:1.7;color:var(--g80,#333);white-space:pre-line}
.locate-hit{background:#ffec3d;color:#000;font-weight:700;padding:1px 2px;border-radius:3px}
.locate-loading{color:var(--g60);font-size:13px}
.locate-miss{color:var(--g60);font-size:13px}
/* 산하기관: 공통영역(메뉴·바닥글) 추정 배지 */
.cms-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:#7a4d00;
  background:#fff3cd;border:1px solid #ffe08a;border-radius:5px;padding:1px 6px;vertical-align:middle}

/* JS 상태 표시 (로딩·더보기·메시지) */
.loading{color:var(--g50);font-size:14px;padding:18px 0}
.more{margin-top:16px;font:inherit;font-size:14px;font-weight:600;color:var(--blue-text);
  background:#fff;border:1px solid var(--g20);border-radius:9px;padding:10px 18px;cursor:pointer}
.more:hover{background:var(--g05);border-color:var(--g30)}
.msg{margin-top:20px;max-width:760px;padding:14px 18px;border-radius:10px;font-size:14.5px;
  border:1px solid var(--g20);background:#fff;color:var(--g80)}
.msg.err{background:var(--err-bg);border-color:#f6c6bb;color:var(--err-text)}
.msg.warn{background:var(--warn-bg);border-color:#f3dca0;color:var(--warn-text)}
.msg.ok{background:var(--ok-bg);border-color:#bfe3c6;color:var(--ok-text)}

@media(max-width:860px){
  h1{white-space:normal} .stats,.steps{grid-template-columns:repeat(2,1fr)}
  .cities,.highlights{grid-template-columns:1fr}
  /* 메뉴를 숨기지 않고(탭 접근 보장) 가로 스크롤로 유지 */
  .head{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px}
  nav{margin-left:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  nav button{flex-shrink:0;padding:8px 12px}
}
