/*
 * 웨비렌즈 관리자 — 토큰 · 공용 부품 · 화면 틀. 정본 시안 = 앱 저장소 design/WEBILENS_admin_v1.html 2판(G4 확정 · D-25) 절 T.
 *
 * 🔴 색·그림자·모서리·간격·글자는 «토큰 블록»(아래 :root 셋) 안에서만 값을 쓴다. 부품·화면 CSS 는 var(--…) 만 쓴다.
 *    tests/run.php 가 토큰 블록 밖의 색 값(#hex·rgb()·hsl())을 0건으로 단정하고, 다크 두 블록이 같은지도 단정한다.
 * 🔴 다크 토큰은 두 번 쓴다 — OS 다크(@media, data-theme 미지정·auto) 와 강제 다크([data-theme=dark]). CSS 만으로는
 *    미디어 질의 안팎을 한 블록으로 묶을 수 없다. 한쪽만 고치면 시험이 깨진다.
 * 서체 = Pretendard 셀프호스팅(KS X 1001 부분집합, OFL — fonts/LICENSE.txt). CSP default-src 'self' 라 외부 CDN 을 쓰지 않는다.
 */
@font-face{font-family:"Pretendard";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/Pretendard-Regular.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/Pretendard-Medium.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/Pretendard-SemiBold.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700 900;font-style:normal;font-display:swap;src:url("../fonts/Pretendard-Bold.subset.woff2") format("woff2")}

/* ═══ 토큰 — 라이트(기본) ═══ */
:root{
  --bg:#F3F4F6;--side:#FFFFFF;--sf:#FFFFFF;--sf2:#E9EBEE;
  --tx:#15171A;--sub:#5B6169;--dim:#646A71;
  --ac:#3F5A00;--acfill:#3F5A00;--onac:#FFFFFF;--acsoft:#EEF8D0;
  --dg:#C62A2F;--dgsoft:#FBE9E9;--ondg:#FFFFFF;
  --ok:#1E7A4C;--oksoft:#E3F3EA;
  --warn:#8A5A00;--warnsoft:#FBF1DC;
  --info:#2F5E9E;--infosoft:#E6EEF8;
  --line:#E4E6EA;--hover:#F6F7F8;--track:#D5D8DD;--knob:#FFFFFF;--knob-on:#FFFFFF;
  --scrim:rgba(21,23,26,.45);
  --toast-bg:#15171A;--toast-tx:#F2F3F5;
  --shadow-pop:0 24px 64px rgba(0,0,0,.3);--shadow-drawer:-12px 0 32px rgba(0,0,0,.18);--shadow-toast:0 10px 30px rgba(0,0,0,.25);
  --shadow-seg:0 1px 2px rgba(0,0,0,.08);--shadow-knob:0 1px 2px rgba(0,0,0,.25);--outline-pop:transparent;
  --skel-shine:rgba(255,255,255,.35);
  /* 늘 같은 값 — 브랜드 라임(로고 점·토스트 링크)과 로그인 왼쪽 패널(테마와 무관하게 어둡다) */
  --lime:#C8F04B;--panel-bg:#0D0E10;--panel-tx:#F2F3F5;--panel-sub:#A0A6AE;--panel-dim:#80868D;--panel-line:#2C2E33;
  /* 밀도 — 헤더 56 · 본문 여백 24 · 절 간격 16 · 카드 안쪽 16 · 모서리 12(모달 16) · 표 머리 36/줄 44 · 칩 32 · 버튼 36(큰 44) · 사이드 248/항목 36 */
  --w-side:248px;--h-hdr:56px;--h-ftr:40px;--pad:24px;--gap:16px;--pad-card:16px;
  --r-xs:5px;--r-sm:8px;--r-btn:9px;--r-in:10px;--r-card:12px;--r-modal:16px;--r-pill:999px;
  --h-th:36px;--h-row:44px;--h-chip:32px;--h-btn:36px;--h-btn-lg:44px;--h-btn-sm:28px;--h-nav:36px;--h-in:44px;
  /* 글자 — 페이지 제목 20/700 · 카드 제목 14.5/700 · 본문·표 13/500 · 보조 12/400 · KPI 26/800 */
  --font:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-page:20px;--fs-card:14.5px;--fs-body:13px;--fs-sub:12px;--fs-kpi:26px;--fs-input:14px;--fs-tiny:11px;
  color-scheme:light;
}
/* ═══ 토큰 — 다크(OS 설정 · 강제 지정이 없을 때) ═══ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D0E10;--side:#141518;--sf:#1A1C1F;--sf2:#24272B;
    --tx:#F2F3F5;--sub:#A0A6AE;--dim:#80868D;
    --ac:#C8F04B;--acfill:#C8F04B;--onac:#15171A;--acsoft:#262E12;
    --dg:#FF6B6F;--dgsoft:#3A1B1C;--ondg:#15171A;
    --ok:#5FD39A;--oksoft:#15301F;
    --warn:#F5B94A;--warnsoft:#33280F;
    --info:#8AB4F0;--infosoft:#172338;
    --line:#2A2D31;--hover:#202226;--track:#3A3D42;--knob:#FFFFFF;--knob-on:#15171A;
    --scrim:rgba(0,0,0,.6);
    --toast-bg:#2C2E33;--toast-tx:#F2F3F5;
    --outline-pop:rgba(255,255,255,.08);
    --skel-shine:rgba(255,255,255,.05);
    color-scheme:dark;
  }
}
/* ═══ 토큰 — 다크(강제 · 디자인 시스템 화면의 세그먼트) ═══ */
:root[data-theme="dark"]{
    --bg:#0D0E10;--side:#141518;--sf:#1A1C1F;--sf2:#24272B;
    --tx:#F2F3F5;--sub:#A0A6AE;--dim:#80868D;
    --ac:#C8F04B;--acfill:#C8F04B;--onac:#15171A;--acsoft:#262E12;
    --dg:#FF6B6F;--dgsoft:#3A1B1C;--ondg:#15171A;
    --ok:#5FD39A;--oksoft:#15301F;
    --warn:#F5B94A;--warnsoft:#33280F;
    --info:#8AB4F0;--infosoft:#172338;
    --line:#2A2D31;--hover:#202226;--track:#3A3D42;--knob:#FFFFFF;--knob-on:#15171A;
    --scrim:rgba(0,0,0,.6);
    --toast-bg:#2C2E33;--toast-tx:#F2F3F5;
    --outline-pop:rgba(255,255,255,.08);
    --skel-shine:rgba(255,255,255,.05);
    color-scheme:dark;
}
/* ═══ 토큰 끝 — 이 아래로는 색 값을 쓰지 않는다 ═══ */

/* ── 바탕 ──────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);font-size:var(--fs-body);font-weight:500;line-height:1.5;background:var(--bg);color:var(--tx);
  letter-spacing:-.01em;word-break:keep-all;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--mono);font-size:12px;font-weight:600}
code{background:var(--sf2);padding:1px 4px;border-radius:4px;color:var(--tx);word-break:break-all}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{flex:none}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--sf);padding:8px;border-radius:var(--r-sm)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
[hidden]{display:none!important}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:4px}
ul{margin:0;padding-left:18px}
.help{font-size:var(--fs-sub);font-weight:400;line-height:1.55;color:var(--sub)}
.help b,.help strong{color:var(--tx);font-weight:700}
.dim{color:var(--dim)}
.t-dg{color:var(--dg)}.t-ok{color:var(--ok)}.t-warn{color:var(--warn)}
.wrap{white-space:normal!important;word-break:break-all}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:start}
.grid-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start}

/* ── 로고(앱 아이콘과 같은 원본 — assets/img/logo.svg) ── */
.logo{width:32px;height:32px;flex:none;display:block}
.logo-lg{width:40px;height:40px}

/* ═══ 화면 틀(admin-site §F) ═══ */
.shell{display:grid;grid-template-columns:var(--w-side) minmax(0,1fr);min-height:100vh}
.side{background:var(--side);box-shadow:inset -1px 0 0 var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;min-height:0;z-index:30}
.brand{height:64px;display:flex;align-items:center;gap:10px;padding:0 14px 0 18px;flex:none;color:var(--tx)}
.brand:hover{text-decoration:none}
.brand-name{display:flex;flex-direction:column;flex:1;min-width:0;color:var(--tx)}
.brand-name:hover{text-decoration:none}
.brand-name b{font-size:15px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.brand-name span{font-size:11.5px;font-weight:500;color:var(--sub)}
.nav{flex:1;overflow-y:auto;padding:4px 10px calc(96px + env(safe-area-inset-bottom))}
.nav-group{font-size:var(--fs-tiny);font-weight:700;color:var(--dim);letter-spacing:.02em;margin:16px 10px 6px}
.nav ul{list-style:none;margin:0;padding:0}
.nav-item{height:var(--h-nav);display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:var(--r-btn);font-size:13.5px;font-weight:600;color:var(--sub);position:relative}
.nav-item:hover{background:var(--hover);color:var(--tx);text-decoration:none}
.nav-item.is-current{background:var(--acsoft);color:var(--tx)}
.nav-item.is-current::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--ac)}
.nav-item.is-current .icon{color:var(--ac)}
.nav-badge{margin-left:auto;font-size:var(--fs-tiny);font-weight:700;line-height:1;padding:3px 6px;border-radius:var(--r-xs)}
.nav-badge.is-warn{background:var(--warnsoft);color:var(--warn)}
.nav-badge.is-ac{background:var(--acsoft);color:var(--ac)}
.side-foot{padding:12px 18px;font-size:11.5px;line-height:1.5;color:var(--sub);box-shadow:inset 0 1px 0 var(--line);flex:none}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px;background:var(--dim)}
.dot.is-ok{background:var(--ok)}.dot.is-dg{background:var(--dg)}.dot.is-warn{background:var(--warn)}
.brand .side-close{display:none}
.main{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.hdr{height:var(--h-hdr);display:flex;align-items:center;gap:12px;padding:0 20px 0 24px;position:sticky;top:0;z-index:20;background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
.crumb{font-size:13px;font-weight:600;color:var(--sub);display:flex;gap:6px;align-items:center;white-space:nowrap;min-width:0;overflow:hidden}
.crumb b{color:var(--tx);font-weight:700}
.hdr-search{margin-left:auto;width:300px;height:var(--h-btn);border-radius:var(--r-in);background:var(--sf2);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--dim)}
.hdr-search input{flex:1;min-width:0;border:0;background:transparent;height:100%;padding:0;font-size:13px;color:var(--tx);box-shadow:none}
.hdr-search input:focus{outline:0}
.hdr-search:focus-within{box-shadow:0 0 0 2px var(--ac)}
.env-chip{height:28px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:700;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.env-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.env-chip.is-prod{background:var(--dgsoft);color:var(--dg)}
.env-chip.is-test{background:var(--infosoft);color:var(--info)}
.env-chip.is-sm{height:22px;font-size:11px;padding:0 8px}
.pend-chip{height:28px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:700;background:var(--warnsoft);color:var(--warn);display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.pend-chip:hover{text-decoration:none}
.hdr-btn{width:var(--h-btn);height:var(--h-btn);border-radius:var(--r-btn);display:grid;place-items:center;color:var(--sub);border:0;background:none;cursor:pointer}
.hdr-btn:hover{background:var(--hover);color:var(--tx)}
.account{position:relative}
.account summary{list-style:none;display:flex;align-items:center;gap:8px;padding:0 6px 0 4px;height:var(--h-btn);border-radius:var(--r-btn);cursor:pointer;font-size:13px;font-weight:600}
.account summary::-webkit-details-marker{display:none}
.account summary:hover{background:var(--hover)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--sf2);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--tx);flex:none}
.pop-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--sf);border-radius:var(--r-card);box-shadow:var(--shadow-pop);outline:1px solid var(--outline-pop);padding:6px;z-index:40}
.pop-who{font-size:var(--fs-sub);color:var(--sub);padding:6px 8px 8px;margin:0;box-shadow:inset 0 -1px 0 var(--line);margin-bottom:4px}
.pop-menu.is-fixed{position:fixed;top:auto;left:auto}
.pop-menu form{margin:0}
.menu-item{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 8px;border:0;background:none;color:var(--tx);font:inherit;font-weight:600;text-align:left;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap}
.menu-item:hover{background:var(--hover);text-decoration:none}
.menu-item:disabled{opacity:.4;cursor:not-allowed}
.menu-item.is-danger{color:var(--dg)}
.more{position:relative;display:inline-block}
.more summary{list-style:none}
.more summary::-webkit-details-marker{display:none}
.content{flex:1;padding:20px var(--pad) 32px;display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.ftr{min-height:var(--h-ftr);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px var(--pad);font-size:11.5px;color:var(--dim);box-shadow:inset 0 1px 0 var(--line)}
.ftr a{color:var(--sub);font-weight:500}
.ftr .sp{margin-left:auto}
.only-narrow{display:none}
.narrow-banner{display:none}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:25}

/* ═══ 공용 부품(admin-site §G) ═══ */
/* G-1 페이지 머리 */
.ph{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ph h1{font-size:var(--fs-page);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.ph p{font-size:13px;font-weight:400;line-height:1.5;color:var(--sub);margin-top:4px}
.ph-r{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.asof{font-size:var(--fs-sub);font-weight:500;color:var(--dim)}

/* 버튼 */
.btn{height:var(--h-btn);padding:0 14px;border-radius:var(--r-btn);font:inherit;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;border:0;cursor:pointer;background:var(--sf2);color:var(--tx);text-decoration:none}
.btn:hover{text-decoration:none;filter:brightness(.97)}
.btn-primary{background:var(--acfill);color:var(--onac)}
.btn-primary:hover{filter:brightness(1.15)}
.btn-ghost{background:transparent;color:var(--ac)}
.btn-ghost:hover{background:var(--hover);filter:none}
.btn-danger{background:var(--dg);color:var(--ondg)}
.btn-danger-tonal{background:var(--dgsoft);color:var(--dg)}
.btn-lg{height:var(--h-btn-lg);font-size:14.5px;padding:0 18px;border-radius:var(--r-in)}
.btn-sm{height:var(--h-btn-sm);font-size:12px;padding:0 9px;border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn:disabled,.btn.is-disabled{opacity:.4;cursor:not-allowed;filter:none}
.ibtn{width:32px;height:32px;border-radius:var(--r-sm);display:inline-grid;place-items:center;color:var(--sub);border:0;background:none;cursor:pointer;flex:none}
.ibtn:hover{background:var(--hover);color:var(--tx)}

/* G-2 요약 카드 */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{background:var(--sf);border-radius:var(--r-card);padding:14px var(--pad-card);display:block;color:var(--tx);min-width:0}
a.kpi:hover{text-decoration:none;background:var(--hover)}
.kpi.on-bg,.on-bg{background:var(--bg)}
.kpi-k{font-size:12.5px;font-weight:600;color:var(--sub);display:flex;gap:6px;align-items:center}
.kpi-v{font-size:var(--fs-kpi);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin-top:8px}
.kpi-v small{font-size:13px;font-weight:600;color:var(--sub);margin-left:3px}
.kpi-v.is-unknown{font-size:18px;color:var(--sub);font-weight:700}
.kpi-v.is-sm{font-size:20px}
.kpi-m{font-size:var(--fs-sub);font-weight:500;line-height:1.45;color:var(--dim);margin-top:6px}

/* 카드 */
.card{background:var(--sf);border-radius:var(--r-card);min-width:0}
.card.is-clip{overflow:hidden}
.card-head{display:flex;align-items:center;gap:8px;padding:14px var(--pad-card) 10px;flex-wrap:wrap}
.card-head h2,.card-head b{font-size:var(--fs-card);font-weight:700}
.card-head .r{margin-left:auto;font-size:var(--fs-sub);font-weight:600;color:var(--dim);display:flex;gap:6px;align-items:center}
.card-body{padding:0 var(--pad-card) 14px}
.card-pad{padding:14px var(--pad-card)}

/* G-6 상태 배지 */
.badge{font-size:11.5px;font-weight:700;line-height:1;padding:5px 7px;border-radius:6px;white-space:nowrap;display:inline-flex;gap:4px;align-items:center;background:var(--sf2);color:var(--sub)}
.badge .icon{width:12px;height:12px}
.b-ok{color:var(--ok);background:var(--oksoft)}
.b-dg{color:var(--dg);background:var(--dgsoft)}
.b-wn{color:var(--warn);background:var(--warnsoft)}
.b-mu{color:var(--sub);background:var(--sf2)}
.b-ac{color:var(--ac);background:var(--acsoft)}
.b-in{color:var(--info);background:var(--infosoft)}
.badge.is-sm{padding:3px 5px}

/* G-4 데이터 표 */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;font-weight:500}
.tbl th{font-size:var(--fs-sub);font-weight:700;color:var(--sub);text-align:left;padding:0 12px;height:var(--h-th);background:var(--sf);position:sticky;top:0;box-shadow:inset 0 -1px 0 var(--line);white-space:nowrap}
.tbl td{padding:8px 12px;height:var(--h-row);box-shadow:inset 0 -1px 0 var(--line);white-space:nowrap;vertical-align:middle}
.tbl tbody tr:last-child td{box-shadow:none}
.tbl tbody tr:hover td{background:var(--hover)}
.tbl tr.is-selected td{background:var(--acsoft)}
.tbl tr[data-href]{cursor:pointer}
.tbl td.num,.tbl th.num{text-align:right}
.tbl td.act{text-align:right;width:1%}
.tbl .cell-wide{white-space:normal;min-width:220px;max-width:420px}
.tbl .sub-line{display:block;font-size:var(--fs-sub);font-weight:400;color:var(--sub);white-space:normal}
.tbl a.row-link{color:var(--tx);font-weight:700}

/* G-3 필터 막대 · 칩 */
.fbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fbar .count{margin-left:auto}
.inp{height:var(--h-btn);border-radius:var(--r-btn);background:var(--sf);display:inline-flex;align-items:center;gap:8px;padding:0 12px;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
.inp input{border:0;background:transparent;box-shadow:none;height:100%;padding:0;min-width:0;width:180px;font-size:13px}
.inp input:focus{outline:0}
.inp:focus-within{box-shadow:inset 0 0 0 2px var(--ac)}
.chip{height:var(--h-chip);padding:0 12px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--sub);background:var(--sf);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
a.chip:hover{text-decoration:none;color:var(--tx)}
.chip.is-on{background:var(--acsoft);color:var(--ac);box-shadow:none}
.chip select,.chip input{border:0;background:transparent;box-shadow:none;height:auto;padding:0;font-size:12.5px;font-weight:600;color:inherit;min-height:0}
.chip select:focus,.chip input:focus{outline:0}
.chip:focus-within{box-shadow:inset 0 0 0 2px var(--ac)}

/* 세그먼트(탭 · 상태 단계) */
.seg{display:inline-flex;background:var(--sf2);border-radius:var(--r-in);padding:3px;gap:2px;flex-wrap:wrap}
.seg>a,.seg>button{height:30px;padding:0 14px;border-radius:var(--r-sm);font:inherit;font-size:13px;font-weight:600;line-height:30px;color:var(--sub);display:inline-flex;gap:6px;align-items:center;justify-content:center;border:0;background:none;cursor:pointer;white-space:nowrap}
.seg>a:hover,.seg>button:hover{color:var(--tx);text-decoration:none}
.seg>[aria-current="page"],.seg>[aria-pressed="true"],.seg>.is-on{background:var(--sf);color:var(--tx);box-shadow:var(--shadow-seg)}
.seg.is-full{display:flex;width:100%}
.seg.is-full>*{flex:1}

/* 토글(스위치) */
.tg{width:40px;height:24px;border-radius:12px;background:var(--track);position:relative;flex:none;display:inline-block;vertical-align:middle;border:0;padding:0;cursor:pointer}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--knob);box-shadow:var(--shadow-knob);transition:left .15s}
.tg[aria-checked="true"]{background:var(--acfill)}
.tg[aria-checked="true"]::after{left:19px;background:var(--knob-on)}
.tg.is-changed{box-shadow:0 0 0 2px var(--warn)}
.tg:disabled{opacity:.4;cursor:not-allowed}

/* G-7 폼 */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>label,.fld-label{font-size:13px;font-weight:700;color:var(--tx)}
.fld-req{color:var(--dg)}
.fld-h{font-size:var(--fs-sub);font-weight:400;line-height:1.5;color:var(--sub)}
.fld-e{font-size:var(--fs-sub);font-weight:600;line-height:1.5;color:var(--dg);display:flex;gap:4px;align-items:center}
.fld-e:empty{display:none}
input,select,textarea{font:inherit;font-size:var(--fs-input);font-weight:500;color:var(--tx);background:var(--sf2);border:0;border-radius:var(--r-in);padding:0 12px;height:var(--h-in);width:100%;min-width:0}
textarea{height:auto;min-height:72px;padding:10px 12px;line-height:1.5;resize:vertical}
input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:var(--acfill);flex:none}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ac);outline-offset:0}
input:disabled,select:disabled{opacity:.6}
[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--dg)}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%)}
.check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .wide{grid-column:1/-1}
.form-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form input{width:120px}
.doc{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:12.5px;line-height:1.55}
.doc dt{color:var(--sub);font-weight:600}
.doc dd{margin:0;min-width:0}

/* 키-값 · 원문 */
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;font-size:13px;line-height:1.5;margin:0}
.kv dt{color:var(--sub)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
pre.code,.code{font-family:var(--mono);font-size:12px;font-weight:500;line-height:1.55;background:var(--sf2);border-radius:var(--r-in);padding:12px 14px;color:var(--tx);white-space:pre;overflow:auto;max-height:420px;margin:0}

/* 차이(diff) — 추가 초록 · 삭제 빨강 · 맥락 회색 */
.diff{font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:1.6;border-radius:var(--r-in);overflow:hidden;margin:0;padding:0;list-style:none}
.diff li{padding:2px 12px;word-break:break-all}
.d-add{background:var(--oksoft);color:var(--ok)}
.d-del{background:var(--dgsoft);color:var(--dg)}
.d-chg{background:var(--warnsoft);color:var(--warn)}
.d-ctx{background:var(--sf2);color:var(--sub)}

/* 판 이력 줄 */
.ver{display:flex;gap:10px;align-items:flex-start;padding:10px 0;box-shadow:inset 0 -1px 0 var(--line)}
.ver-n{font-size:13px;font-weight:800;width:44px;flex:none}
.ver-t{flex:1;font-size:12.5px;line-height:1.5;color:var(--sub);min-width:0}
.ver-t b{color:var(--tx);font-weight:700}
.ver-a{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* 모달(네이티브 dialog) */
.modal{border:0;border-radius:var(--r-modal);padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);background:var(--sf);color:var(--tx);box-shadow:var(--shadow-pop);outline:1px solid var(--outline-pop)}
.modal::backdrop{background:var(--scrim)}
.modal:has(.modal-wide){width:min(720px,calc(100vw - 32px))}
.modal>form,.modal>div{display:flex;flex-direction:column;max-height:calc(100vh - 50px)}
.mh{padding:20px 22px 6px;display:flex;align-items:flex-start;gap:10px}
.mh h2{font-size:17px;font-weight:800;line-height:1.35;flex:1}
.mb{padding:8px 22px 18px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.mf{padding:14px 22px;display:flex;gap:8px;justify-content:flex-end;align-items:center;box-shadow:inset 0 1px 0 var(--line);flex-wrap:wrap}
.mf .mf-note{margin-right:auto}
.note-box{background:var(--bg);border-radius:var(--r-card);padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.note-box .icon{color:var(--ac);margin-top:1px}

/* G-5 상세 서랍 */
.with-drawer{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:var(--gap);align-items:start}
.with-drawer.is-376{grid-template-columns:minmax(0,1fr) 376px}
.drawer{background:var(--sf);border-radius:var(--r-card);display:flex;flex-direction:column;min-width:0;position:sticky;top:calc(var(--h-hdr) + 16px)}
.drawer-head{height:52px;display:flex;align-items:center;gap:8px;padding:0 12px 0 18px;box-shadow:inset 0 -1px 0 var(--line);flex:none}
.drawer-head h2{font-size:15px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-body{padding:14px 18px;display:flex;flex-direction:column;gap:14px}

/* 토스트 · 배너(B5) */
.toasts{position:fixed;right:24px;bottom:56px;display:flex;flex-direction:column;gap:8px;z-index:1000;max-width:min(440px,calc(100vw - 32px))}
.toast{background:var(--toast-bg);color:var(--toast-tx);border-radius:var(--r-card);padding:12px 16px;font-size:13px;font-weight:600;line-height:1.4;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow-toast);transition:opacity .4s}
.toast a,.toast button.toast-act{color:var(--lime);font-weight:700;margin-left:auto;background:none;border:0;font:inherit;cursor:pointer;padding:0;white-space:nowrap}
.toast-error{background:var(--dg);color:var(--ondg)}
.toast-error a{color:var(--ondg)}
.toast-warn{background:var(--warn);color:var(--ondg)}
.toast.is-leaving{opacity:0}
.banner{border-radius:var(--r-card);padding:12px 14px;font-size:13px;font-weight:600;line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.banner .icon{margin-top:1px}
.banner-info{background:var(--infosoft);color:var(--info)}
.banner-error{background:var(--dgsoft);color:var(--dg)}
.banner-warn{background:var(--warnsoft);color:var(--warn)}
.banner-ok{background:var(--oksoft);color:var(--ok)}
.banner b{color:inherit}

/* G-8 빈 · 로딩 · 오류 */
.skel{background:var(--sf2);border-radius:var(--r-sm);position:relative;overflow:hidden;display:block}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,var(--skel-shine) 50%,transparent 70%)}
.skel-line{height:14px}
.skel-block{height:40px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:28px 20px}
.empty-ic{width:48px;height:48px;border-radius:14px;background:var(--sf2);display:grid;place-items:center;color:var(--sub)}
.empty b{font-size:var(--fs-card);font-weight:700}
.empty span{font-size:12.5px;font-weight:400;line-height:1.55;color:var(--sub);max-width:420px}
.err-line{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:600;color:var(--dg)}
.err-line.t-ok{color:var(--ok)}

/* 검증 결과(설정 «검증» 버튼) */
.verify-out{flex-basis:100%;font-size:var(--fs-sub)}
.verify-out:empty{display:none}
.verify-out.is-pass{color:var(--ok)}
.verify-out.is-fail{color:var(--dg)}

/* 쪽 나눔 */
.pager{display:flex;gap:10px;align-items:center;justify-content:center}

/* 디자인 시스템 견본 — 인라인 style 금지(CSP) → 토큰마다 클래스 */
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-size:11.5px;font-weight:600;line-height:1.4}
.swatch-chip{height:40px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:4px}
.sw-ac{background:var(--ac)}.sw-acsoft{background:var(--acsoft)}.sw-bg{background:var(--bg)}.sw-sf{background:var(--sf)}.sw-sf2{background:var(--sf2)}
.sw-tx{background:var(--tx)}.sw-sub{background:var(--sub)}.sw-dg{background:var(--dg)}.sw-ok{background:var(--ok)}.sw-warn{background:var(--warn)}.sw-info{background:var(--info)}.sw-line{background:var(--line)}
.type-page{font-size:var(--fs-page);font-weight:700}.type-card{font-size:var(--fs-card);font-weight:700}.type-body{font-size:var(--fs-body);font-weight:500}.type-sub{font-size:var(--fs-sub);font-weight:400;color:var(--sub)}.type-kpi{font-size:var(--fs-kpi);font-weight:800}
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.icon-cell{display:flex;gap:8px;align-items:center;font-size:var(--fs-sub)}
.is-hover-demo{filter:brightness(1.15)}

/* ── 로그인(D-1) ─────────────────────────── */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth-panel{background:var(--panel-bg);color:var(--panel-tx);padding:56px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-panel .brand-name span{color:var(--panel-sub)}
.auth-panel .brand-name b{font-size:18px}
.auth-art{position:absolute;left:40px;bottom:60px;width:min(600px,calc(100% - 80px));opacity:.9}
.auth-art .ln{stroke:var(--panel-line);fill:none}
.auth-art .ring{stroke:var(--lime);fill:none;stroke-width:2;stroke-dasharray:6 5}
.auth-art .pt{fill:var(--lime)}
.auth-tag{margin-top:auto;font-size:13px;line-height:1.6;color:var(--panel-dim);position:relative}
.auth-side{display:flex;flex-direction:column;justify-content:center;padding:40px clamp(24px,10vw,140px);background:var(--bg)}
.auth-form{display:flex;flex-direction:column;gap:14px;max-width:420px;width:100%}
.auth-form h1{font-size:26px;font-weight:800;letter-spacing:-.03em}
.auth-host{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:-6px 0 14px}
.auth-mobile-brand{display:none}
.auth-foot{font-size:11px;color:var(--dim);margin-top:18px}

/* ── 오류 화면(B7) ───────────────────────── */
.err-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.err-card{background:var(--sf);border-radius:var(--r-modal);padding:32px 36px;max-width:440px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.err-card h1{font-size:40px;font-weight:800;letter-spacing:-.03em}

/* ═══ 좁은 화면 — 390(M) · 메뉴는 왼쪽 서랍(폭 300, 본문을 덮는다) · 본문 가로 넘침 0 ═══ */
@media (max-width:1180px){
  .with-drawer,.with-drawer.is-376{grid-template-columns:minmax(0,1fr)}
  .drawer{position:static}
  .kpis-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-main,.grid-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:300px;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-drawer)}
  body.side-open .side{transform:none}
  .brand .side-close{display:inline-grid}
  .only-narrow{display:inline-grid}
  .hdr{padding:0 8px 0 8px;gap:6px}
  .hdr-search,.account-name,.hdr .pend-chip span.lbl,.crumb>span:first-child,.crumb>.icon{display:none}
  /* 390 원격 설정 = 확인 + 긴급 끄기만(시안 M-5 · G3 반영) — 편집·켜기·되돌리기는 넓은 화면. 화면 편의 제한이지 권한 경계가 아니다 */
  .wide-only{display:none!important}
  .narrow-banner{display:flex}
  .rc-flags .tg[aria-checked="false"]{opacity:.4;pointer-events:none}
  .content{padding:16px}
  .grid-2,.form-grid,.kpis-3{grid-template-columns:minmax(0,1fr)}
  .toasts{left:16px;right:16px;bottom:16px}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-panel{display:none}
  .auth-side{padding:40px 24px;justify-content:flex-start}
  .auth-mobile-brand{display:flex;gap:10px;align-items:center;margin-bottom:18px}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0;margin:0}
  .modal>form,.modal>div{max-height:100vh;height:100%}
  .mb{flex:1}
}
@media (max-width:520px){
  .kpis-4{grid-template-columns:minmax(0,1fr)}
  .ph-r{margin-left:0;width:100%}
  .ph-r .btn-primary{flex:1}
}