/* =====================================================================
   웹프림 HQ 디자인 시스템 v3 — 판매 템플릿 관리자(_admin)와 같은 디자인 언어
   구조: 전역 헤더(60px) → 가로 대메뉴(50px, sticky) → 컨텍스트 사이드바(220px) + 콘텐츠
   언어: Pretendard(실 로드) · 인디고 #6366F1 · 뉴트럴 그레이스케일 · 필(pill) 라벨
         · 흰 탭 세그먼트 · 민트 토글 · 14px 라운드 카드 · 0 0 30px 소프트 섀도
   원칙: 클래스·레이아웃 치수는 v2 그대로 — 스킨만 바꾼다(전 페이지 무수정 호환)
   ===================================================================== */

/* ── 토큰 ─────────────────────────────────────────────────────────── */
:root{
  /* text — 템플릿 grayscale10/7/5 */
  --t-1:#171717; --t-2:#525252; --t-3:#A3A3A3; --t-inv:#FAFAFA;
  /* brand — 템플릿 --color-main 인디고 */
  --brand:#6366F1; --brand-d:#4F46E5; --brand-soft:#EEF0FE; --brand-line:#C7CBFA;
  /* semantic — 템플릿 label/state 색 */
  --ok:#16B978; --ok-bg:#E4F8EE; --ok-line:#A9E8CB;
  --warn:#EE7A21; --warn-bg:#FFF7E6; --warn-line:#F8D9A8;
  --danger:#E0524A; --danger-bg:#FDECEC; --danger-line:#F5BEBA;
  --info:#1677F8; --info-bg:#F2F7FF;
  /* surface — 템플릿 grayscale1/2/3/4 */
  --bg:#FAFAFA; --surface:#FFFFFF; --surface-2:#F5F5F5; --surface-hover:#F5F5F5; --surface-sel:#EEF0FE;
  --line:#E5E5E5; --line-strong:#D4D4D4;
  /* dark (토스트/벌크바) */
  --ink:#171717; --ink-2:#262626; --ink-line:#404040; --ink-text:#D4D4D4;
  /* metric — 카드 14px, 필 999px */
  --r-sm:8px; --r-md:14px; --r-lg:16px; --r-pill:999px;
  --gh-h:60px; --gn-h:50px; --side-w:220px;
  --shadow-soft:0 0 30px rgba(0,0,0,.05);
  --shadow-pop:0 8px 28px rgba(0,0,0,.14);
  --font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--t-1);font-size:13.5px;line-height:1.55;letter-spacing:-.2px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.num,td.num,.kpi-v,.mono{font-variant-numeric:tabular-nums}
svg{width:1em;height:1em;flex-shrink:0}

/* ── 전역 헤더 ────────────────────────────────────────────────────── */
.gh{height:var(--gh-h);background:var(--surface);color:var(--t-1);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 20px;position:sticky;top:0;z-index:60}
.gh-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15.5px;letter-spacing:-.02em;color:var(--t-1)}
.gh-logo b{color:var(--brand)}
.gh-env{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.03em}
.gh-env.live{background:var(--ok-bg);color:#15803D;border:1px solid var(--ok-line)}
.gh-env.test{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.gh-brandsel{font-size:12px;color:var(--t-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:5px 10px;display:flex;gap:6px;align-items:center}
.gh-brandsel b{color:var(--t-1);font-weight:600}
.gh-spacer{flex:1}
.gh-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);color:var(--t-3);border-radius:10px;padding:7px 12px;min-width:230px;font-size:12.5px;transition:border-color .15s}
.gh-search:hover{border-color:var(--brand-line);color:var(--t-2)}
.gh-search kbd{margin-left:auto;font-size:10px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--t-3);font-family:inherit}
.gh-user{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--t-2)}
.gh-user b{color:var(--t-1);font-weight:600}
.gh-user .role{font-size:10.5px;color:var(--t-3)}
.gh-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-sm);color:var(--t-2);border:1px solid transparent;font-size:16px;background:none}
.gh-ic:hover{background:var(--surface-hover);color:var(--t-1)}
.gh-burger{display:none}

/* ── 가로 대메뉴 ──────────────────────────────────────────────────── */
.gn{height:var(--gn-h);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:stretch;padding:0 12px;position:sticky;top:var(--gh-h);z-index:50;overflow-x:auto;scrollbar-width:none}
.gn::-webkit-scrollbar{display:none}
.gn a{position:relative;display:flex;align-items:center;gap:7px;padding:0 15px;font-size:13.5px;font-weight:600;color:var(--t-2);margin-bottom:-1px;white-space:nowrap;transition:color .15s}
.gn a::after{content:'';position:absolute;left:15px;right:100%;bottom:0;height:2px;background:var(--brand);transition:right .2s ease}
.gn a svg{font-size:16px;opacity:.75}
.gn a:hover{color:var(--t-1)}
.gn a:hover::after,.gn a.on::after{right:15px}
.gn a.on{color:var(--brand-d)}
.gn a.on svg{opacity:1}
.gn .gn-dot{min-width:17px;height:17px;padding:0 4px;border-radius:12px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

/* ── 레이아웃 ─────────────────────────────────────────────────────── */
.layout{display:flex;min-height:calc(100vh - var(--gh-h) - var(--gn-h))}
.side{width:var(--side-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);padding:16px 10px;position:sticky;top:calc(var(--gh-h) + var(--gn-h));height:calc(100vh - var(--gh-h) - var(--gn-h));overflow-y:auto}
.side-title{font-size:11px;font-weight:700;color:var(--t-3);letter-spacing:.05em;text-transform:uppercase;padding:2px 12px 10px}
.side a{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-sm);color:var(--t-2);font-weight:500;font-size:13px;margin-bottom:3px;transition:background-color .15s,color .15s}
.side a:hover{background:var(--bg);color:var(--t-1)}
.side a.on{background:var(--surface-sel);color:var(--brand-d);font-weight:700}
.side .sbadge{margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:12px;font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.side .sbadge.danger{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line)}
.side .sbadge.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.side .sbadge.plain{background:var(--surface-2);color:var(--t-2);border:1px solid var(--line)}

.content{flex:1;min-width:0;padding:26px 32px 48px}

/* ── 페이지 헤더 ──────────────────────────────────────────────────── */
.crumb{font-size:12px;color:var(--t-3);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.crumb b{color:var(--t-2);font-weight:500}
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.phead h1{font-size:20px;font-weight:800;letter-spacing:-.02em}
.phead .pdesc{color:var(--t-2);font-size:12.5px;margin-top:3px}
.phead .pmeta{color:var(--t-3);font-size:11.5px;margin-top:3px}
.phead-actions{display:flex;gap:8px;align-items:center}

/* ── 버튼 ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 15px;border-radius:var(--r-sm);font-size:13px;font-weight:600;border:1px solid transparent;transition:.12s;line-height:1.3}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn{background:var(--brand);color:#fff}          /* primary 기본 */
.btn:hover{background:#4F52D6}                    /* 템플릿 main-btn hover */
.btn.line,.btn.secondary{background:var(--surface);color:var(--t-1);border-color:var(--line-strong)}
.btn.line:hover,.btn.secondary:hover{background:var(--surface-hover);border-color:var(--t-3)}
.btn.ghost{background:none;color:var(--t-2)}
.btn.ghost:hover{background:var(--surface-hover);color:var(--t-1)}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:#B91C1C}
.btn.danger.line{background:var(--surface);color:var(--danger);border-color:var(--danger-line)}
.btn.danger.line:hover{background:var(--danger-bg)}
.btn.sm,.btn.small{padding:5px 11px;font-size:12px;border-radius:7px}
.btn.icon{width:34px;padding:0}
.btn.loading{pointer-events:none;position:relative;color:transparent}
.btn.loading::after{content:'';position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── segmented control (필터, a 링크 기반 → URL 반영) ─────────────── */
/* 템플릿 .tab-list 언어: 회색 트랙 + 흰 활성 탭(소프트 섀도) + 인디고 텍스트 */
.seg{display:inline-flex;background:var(--surface-2);border:0;border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg a,.seg button{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--t-2);border:0;background:none;white-space:nowrap;transition:background-color .15s,color .15s}
.seg a:hover,.seg button:hover{color:var(--t-1);background:var(--surface)}
.seg a.on,.seg button.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-soft)}
.seg .cnt{font-size:10.5px;opacity:.75;font-weight:700}
.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.filter-bar .gap{flex:1}

/* ── 폼 ───────────────────────────────────────────────────────────── */
select,input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],input[type=date],input[type=datetime-local],input[type=time],textarea{
  padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;font-family:inherit;background:var(--surface);color:var(--t-1);transition:border-color .12s}
select:hover,input:hover,textarea:hover{border-color:var(--t-3)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--brand-d);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
input:disabled,select:disabled{background:var(--surface-2);color:var(--t-3)}
.field{margin-bottom:15px}
.field label{display:block;margin-bottom:5px;color:var(--t-2);font-size:12.5px;font-weight:600}
.field input,.field select,.field textarea{width:100%}
.field .hint{font-size:11.5px;color:var(--t-3);margin-top:4px}
.err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger);border-radius:var(--r-sm);padding:10px 14px;font-size:12.5px;margin-bottom:14px}
.ok-note{background:var(--ok-bg);border:1px solid var(--ok-line);color:#15803D;border-radius:var(--r-sm);padding:10px 14px;font-size:12.5px;margin-bottom:14px}

/* ── 카드/패널 ────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow-soft)}
.card h2{font-size:14.5px;font-weight:700;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card h2 .more{font-size:12px;font-weight:600;color:var(--brand-d)}
.card h2 .more:hover{text-decoration:underline}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c23{grid-template-columns:2fr 1fr}

/* ── KPI 스트립 (다크) ────────────────────────────────────────────── */
.kpi{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:12px;margin-bottom:18px}
.kpi>a,.kpi>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;display:block;box-shadow:var(--shadow-soft);transition:border-color .15s,transform .15s}
.kpi>a:hover{border-color:var(--brand-line);transform:translateY(-1px)}
.kpi .k{font-size:11.5px;color:var(--t-2);font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.kpi .kpi-v{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--t-1)}
.kpi .lead .kpi-v{font-size:28px}
.kpi .sub{font-size:11.5px;color:var(--t-3);margin-top:5px}
.kpi .delta{font-size:11px;font-weight:700;padding:1.5px 7px;border-radius:10px;margin-left:6px}
.kpi .delta.up{background:var(--ok-bg);color:var(--ok)}
.kpi .delta.down{background:var(--danger-bg);color:var(--danger)}
.kpi .st{width:7px;height:7px;border-radius:50%;display:inline-block}
.kpi .st.ok{background:var(--ok)}.kpi .st.warn{background:var(--warn)}.kpi .st.bad{background:var(--danger)}

/* ── 상태 요약 패널 ───────────────────────────────────────────────── */
.status-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.spanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 16px;display:flex;align-items:center;gap:12px;transition:border-color .12s}
a.spanel:hover{border-color:var(--line-strong)}
.spanel .n{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
/* H14-144: 알림톡 지갑 상단 6칸 — 금액이 줄바꿈되지 않게 살짝 작게 */
.status-row.six .spanel .n{font-size:17px}.status-row.six .spanel{padding:12px 13px;gap:10px}
.spanel .l{font-size:12px;color:var(--t-2);line-height:1.35}
.spanel.ok .n{color:var(--ok)}
.spanel.warn{border-color:var(--warn-line);background:var(--warn-bg)}.spanel.warn .n{color:var(--warn)}
.spanel.danger{border-color:var(--danger-line);background:var(--danger-bg)}.spanel.danger .n{color:var(--danger)}

/* ── 배지 — 템플릿 .label 언어: 보더 없는 소프트 필 + 상태 점 ────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3.5px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:500;border:0}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge.active,.badge.paid,.badge.confirmed,.badge.succeeded,.badge.sent,.badge.healthy,.badge.enabled{background:var(--ok-bg);color:var(--ok)}
.badge.pending,.badge.past_due,.badge.processing,.badge.provisioning,.badge.pg_review,.badge.awaiting_pg_review,.badge.reserved,.badge.limited,.badge.unknown{background:var(--warn-bg);color:var(--warn)}
.badge.failed,.badge.canceled,.badge.suspended,.badge.expired,.badge.insufficient_balance,.badge.down,.badge.full,.badge.revoked,.badge.disabled{background:var(--danger-bg);color:var(--danger)}
.badge.gray,.badge.inactive,.badge.terminated,.badge.draft{background:#EEF0F5;color:#5C6274}
.badge.brand{background:#F1EDFF;color:var(--brand)}

/* ── 테이블 ───────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;margin:0 -22px;padding:0 22px}
table{width:100%;border-collapse:collapse;font-size:12.8px}
th,td{padding:12px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
td{color:#404040} /* 템플릿 admin-table td = grayscale8 */
td b,td a b,td strong{color:var(--t-1)}
th{color:var(--t-2);font-weight:500;background:var(--surface-2);font-size:12px;letter-spacing:-.1px;position:sticky;top:0;white-space:nowrap}
td.num,th.num{text-align:right}
tbody tr{transition:background .1s}
tbody tr:hover td{background:var(--surface-2)}
tr[data-href]{cursor:pointer}
td .sub{display:block;font-size:11px;color:var(--t-3);margin-top:1px}
.empty{padding:44px 20px;text-align:center;color:var(--t-3);font-size:13px}
.empty b{display:block;color:var(--t-2);font-size:14px;margin-bottom:4px}

/* ── 차트 (무의존 CSS bar) ────────────────────────────────────────── */
.chart-bars{display:flex;align-items:stretch;gap:5px;height:150px;padding-top:6px}
.chart-bars .bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:0;position:relative}
.chart-bars .bar i{display:block;width:100%;max-width:34px;background:var(--brand);border-radius:4px 4px 0 0;min-height:2px;transition:background .12s}
.chart-bars .bar:hover i{background:var(--brand-d)}
.chart-bars .bar em{font-style:normal;font-size:10px;color:var(--t-3);white-space:nowrap}
.chart-bars .bar .tip{position:absolute;bottom:calc(100% + 4px);background:var(--ink);color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.chart-bars .bar:hover .tip{opacity:1}
/* ── SVG 라인차트 (data-linechart — hq.js 렌더) ───────────────────── */
.linechart{position:relative;width:100%;height:190px}
.linechart svg{display:block;width:100%;height:100%}
.linechart .lc-grid{stroke:var(--line);stroke-width:1}
.linechart .lc-area{fill:url(#lcFill);opacity:.9}
.linechart .lc-line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.linechart .lc-dot{fill:#fff;stroke:var(--brand);stroke-width:2}
.linechart .lc-dot:hover{fill:var(--brand)}
.linechart .lc-x{font-size:10px;fill:var(--t-3)}
.linechart .lc-y{font-size:10px;fill:var(--t-3)}

.hbar{margin-bottom:10px}
.hbar .lbl{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.hbar .lbl b{font-weight:600}
.hbar .lbl .v{color:var(--t-2);font-variant-numeric:tabular-nums}
.hbar .trk{height:8px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.hbar .trk i{display:block;height:100%;background:var(--brand);border-radius:6px}
.hbar.ok .trk i{background:var(--ok)}
.hbar.warn .trk i{background:var(--warn)}

/* ── 검색 팔레트 ──────────────────────────────────────────────────── */
.palette-back{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:90;display:none}
.palette-back.open{display:block}
.palette{position:fixed;top:12vh;left:50%;transform:translateX(-50%);width:min(620px,92vw);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);z-index:91;display:none;overflow:hidden}
.palette.open{display:block}
.palette input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:15px 18px;font-size:14.5px}
.palette input:focus{box-shadow:none;border-color:var(--line)}
.palette .results{max-height:46vh;overflow-y:auto;padding:8px}
.palette .grp-l{font-size:10.5px;font-weight:700;color:var(--t-3);padding:8px 12px 4px;text-transform:uppercase;letter-spacing:.05em}
.palette a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 12px;border-radius:var(--r-sm);font-size:13px}
.palette a:hover,.palette a.sel{background:var(--surface-sel)}
.palette a .meta{font-size:11.5px;color:var(--t-3)}
.palette .p-empty{padding:26px;text-align:center;color:var(--t-3);font-size:13px}

/* ── 토스트 ───────────────────────────────────────────────────────── */
.toast-zone{position:fixed;right:20px;bottom:20px;z-index:95;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink);color:#fff;border-radius:var(--r-md);padding:11px 16px;font-size:13px;box-shadow:var(--shadow-pop);display:flex;gap:9px;align-items:center;animation:tin .18s ease-out}
.toast.ok::before{content:'✓';color:#4ADE80;font-weight:800}
.toast.danger::before{content:'!';color:#F87171;font-weight:800}
@keyframes tin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ── 로그인 ───────────────────────────────────────────────────────── */
.login-wrap{max-width:400px;margin:9vh auto;padding:0 20px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow-soft)}
.login-card h1{font-size:21px;margin-bottom:6px;font-weight:800;letter-spacing:-.02em}
.login-card h1 span{color:var(--brand)}
.login-card p{color:var(--t-2);margin-bottom:22px;font-size:13px}

/* ── 유틸 ─────────────────────────────────────────────────────────── */
.muted{color:var(--t-3)}.small{font-size:12px}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.right{text-align:right}
.pill-nav{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.pill-nav a{padding:7px 15px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:400;color:#404040;transition:background-color .2s,border-color .2s,color .2s}
.pill-nav a:hover,.pill-nav a.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:500}
.kv{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:13px}
.kv dt{color:var(--t-2)}.kv dd{font-weight:500}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px;color:transparent!important}
@keyframes sk{to{background-position:-200% 0}}

/* =====================================================================
   상세·편집 화면 컴포넌트 (template-detail · templates · site-detail · merchant-submissions)
   — 뷰가 사용하지만 v2 코어에 누락돼 있던 클래스 정의. 토큰·기존 컴포넌트와 정합.
   ===================================================================== */

/* 체크박스·라디오는 전역 `.field input{width:100%}`에 걸려 거대해지는 문제 차단 */
.field input[type=checkbox],.field input[type=radio]{width:auto}

/* ── 상태 개요 스트립 (.ov) ───────────────────────────────────────── */
.ov{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:18px}
.ov>div{background:var(--surface);padding:13px 16px}
.ov .k{font-size:11.5px;color:var(--t-3);font-weight:600;margin-bottom:6px}
.ov .v{font-size:15px;font-weight:700;color:var(--t-1);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ov .v.num{font-variant-numeric:tabular-nums}
.ov .sub2{display:block;width:100%;font-size:11px;font-weight:500;color:var(--t-3);margin-top:2px}

/* ── 편집 섹션 카드 (.esec) ───────────────────────────────────────── */
.esec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:18px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.esec-h{padding:15px 20px 12px}
.esec-h h2{font-size:14.5px;font-weight:700}
.esec-h p{font-size:12px;color:var(--t-2);margin-top:3px;line-height:1.45}
.esec-b{padding:16px 20px 18px}
.esec-h+.esec-b{padding-top:4px}
.esec-f{padding:12px 20px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;align-items:center;gap:10px;justify-content:flex-end}
.esec>summary{padding:14px 20px;cursor:pointer;font-weight:700;font-size:13.5px;list-style:none}
.esec>summary::-webkit-details-marker{display:none}

/* ── 필드 그리드 / 필수 표시 (.fgrid · .req) ──────────────────────── */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fgrid .full{grid-column:1/-1}
.field label.req::after,label.req::after{content:' *';color:var(--danger);font-weight:700}
.unsaved{font-size:12px;color:var(--warn);font-weight:600}

/* ── 폼 세그먼트 라디오 (.fseg) ───────────────────────────────────── */
.fseg{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--surface-2);border:0;border-radius:12px;padding:3px}
.fseg label{position:relative;cursor:pointer;display:inline-flex}
.fseg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fseg span{display:inline-flex;align-items:center;padding:6px 14px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--t-2);transition:.15s}
.fseg input:checked+span{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-soft)}
.fseg input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}

/* ── 토글 스위치 (.switch) — 템플릿 custom-toggle 언어(민트) ──────── */
.switch{position:relative;display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--t-1)}
.switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;margin:0}
.switch i{display:inline-block;flex-shrink:0;position:relative;width:40px;height:23px;border-radius:var(--r-pill);background:var(--line);transition:background .2s;margin-top:1px}
.switch i::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:var(--shadow-soft),0 1px 2px rgba(0,0,0,.18);transition:transform .2s}
.switch input:checked+i{background:#14CF9E}
.switch input:checked+i::after{transform:translateX(17px)}
.switch input:focus-visible+i{outline:2px solid #14CF9E;outline-offset:2px}
.switch span{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.sw-d{font-size:11.5px;font-weight:500;color:var(--t-3)}

/* ── 체크박스 라벨 행 (.ck) ───────────────────────────────────────── */
.ck{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--t-1);cursor:pointer}
.ck input{width:auto;flex-shrink:0;accent-color:var(--brand)}

/* ── 이미지 그리드 (.img-grid) ────────────────────────────────────── */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.img-card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);cursor:grab}
.img-card.dragging{opacity:.45;cursor:grabbing;box-shadow:var(--shadow-pop)}
.img-card>img{display:block;width:100%;height:130px;object-fit:cover;background:var(--surface-2);border-bottom:1px solid var(--line)}
.img-m{padding:10px 12px 12px;display:flex;flex-direction:column;gap:7px}
.img-m .row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.img-m .row b{font-weight:700}
.img-m input{width:100%;font-size:12px;padding:6px 9px}

/* ── 위험 작업 존 (.dz) ───────────────────────────────────────────── */
.dz{border:1px solid var(--danger-line);border-radius:var(--r-md);margin:8px 0 18px;overflow:hidden}
.dz-h{background:var(--danger-bg);padding:12px 20px;border-bottom:1px solid var(--danger-line)}
.dz-h h2{font-size:13.5px;font-weight:700;color:var(--danger)}
.dz-b{padding:16px 20px;background:var(--surface)}
.dz-b p{font-size:12.5px;color:var(--t-2);margin-bottom:12px;line-height:1.5}

/* ── 타임라인 (.timeline) ─────────────────────────────────────────── */
.timeline{list-style:none;position:relative;padding-left:14px}
.timeline::before{content:'';position:absolute;left:3px;top:5px;bottom:5px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 13px 12px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:'';position:absolute;left:-12px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--brand);border:2px solid var(--surface)}
.tl-t{font-size:12.5px;font-weight:600;color:var(--t-1)}
.tl-m{font-size:11.5px;color:var(--t-3);margin-top:2px;line-height:1.4}

/* ── 목록 데이터테이블 툴바·정렬·페이지네이션 (.dtbl 등) ──────────── */
.card.dtbl{padding:0}
.card.dtbl .tbl-wrap{margin:0;padding:0}
.dt-top,.dt-foot{display:flex;align-items:center;gap:10px;padding:12px 18px}
.dt-top{border-bottom:1px solid var(--line)}
.dt-foot{border-top:1px solid var(--line)}
.dt-top .gap,.dt-foot .gap{flex:1}
.fcount{font-size:12.5px;color:var(--t-2)}
.fcount b{color:var(--t-1);font-weight:700}
.thumb{width:46px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);display:inline-block;vertical-align:middle}
.thumb.ph{display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--t-3);letter-spacing:.02em}
th a{display:inline-flex;align-items:center;gap:3px;color:inherit}
th a .arr{font-size:9px;opacity:.45}
th a.on,th a.on .arr{color:var(--brand-d);opacity:1}
.pgn{display:flex;align-items:center;gap:6px;font-size:12.5px}
.pgn a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border:1px solid transparent;border-radius:var(--r-pill);color:var(--t-2);font-weight:500;transition:.15s}
.pgn a:hover{background:var(--surface-hover);color:var(--t-1)}
.pgn a.dis{opacity:.4;pointer-events:none}
.pgn .cur{font-weight:700;color:var(--t-1)}

/* ── 드래그 정렬 (.drag-row · .grip · reorder) ────────────────────── */
.drag-row{cursor:grab}
.drag-row.dragging{opacity:.5;background:var(--surface-sel)}
.grip{color:var(--t-3);cursor:grab;font-size:15px;user-select:none}
.ord-num{width:58px;text-align:center}
.reorder-note{display:none;font-size:12px;font-weight:600;color:var(--warn)}
.changed .reorder-note,.reorder-wrap.changed .reorder-note{display:inline}

/* ── 사이트 상세 보조 (.qa-row · .inline-edit) ────────────────────── */
.qa-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.inline-edit{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-edit input,.inline-edit select{max-width:240px}

/* ── 서식 있는 상세본문 에디터 (.rte) ─────────────────────────────── */
.rte-tb{display:flex;flex-wrap:wrap;gap:2px;padding:6px;border:1px solid var(--line-strong);border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--surface-2)}
.rte-tb button{min-width:30px;height:28px;padding:0 8px;border:1px solid transparent;border-radius:6px;background:none;font-size:13px;font-weight:700;color:var(--t-2);display:inline-flex;align-items:center;justify-content:center}
.rte-tb button:hover{background:var(--surface-hover);color:var(--t-1);border-color:var(--line)}
.rte-tb .sep{width:1px;background:var(--line);margin:3px 3px}
.rte{min-height:150px;max-height:440px;overflow-y:auto;padding:12px 14px;border:1px solid var(--line-strong);border-radius:0 0 var(--r-sm) var(--r-sm);background:var(--surface);font-size:13.5px;line-height:1.65;color:var(--t-1)}
.rte:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.rte:empty::before{content:attr(data-ph);color:var(--t-3)}
.rte h3{font-size:15.5px;font-weight:700;margin:.7em 0 .3em}
.rte h4{font-size:13.5px;font-weight:700;margin:.7em 0 .3em}
.rte p{margin:.45em 0}
.rte ul,.rte ol{margin:.45em 0;padding-left:1.5em}
.rte li{margin:.15em 0}
.rte img{display:block;max-width:100%;height:auto;border-radius:8px;margin:10px 0}
/* 라디오 선택 카드 (M30 — 서버 폼 유형·상태) */
.grid.c2 .field.full{grid-column:1/-1}
.opt-radios{display:flex;gap:8px;flex-wrap:wrap}
.opt-radios label{flex:1;min-width:140px;cursor:pointer}
.opt-radios input{position:absolute;opacity:0;pointer-events:none}
.opt-radios span{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:10px;
  padding:10px 14px;background:var(--card,#fff);transition:border-color .12s ease,background .12s ease}
.opt-radios span b{font-size:13px;font-weight:700;color:var(--ink,#1a2233)}
.opt-radios span em{font-style:normal;font-size:11.5px;color:var(--g6)}
.opt-radios input:checked+span{border-color:var(--brand);background:var(--brand-bg,#eff4ff)}
.opt-radios input:checked+span b{color:var(--brand)}
.opt-radios input:focus-visible+span{outline:2px solid var(--brand);outline-offset:1px}
.opt-radios label:hover span{border-color:var(--brand)}
.rte a{color:var(--brand-d);text-decoration:underline}
.rte blockquote{margin:.5em 0;padding:2px 0 2px 12px;border-left:3px solid var(--line-strong);color:var(--t-2)}
.rte strong{font-weight:700}.rte em{font-style:italic}

/* ── 확인 모달 (data-confirm → shell-close의 <dialog id="hqModal">) ─ */
/* H14-119b: 전역 리셋 `*{margin:0}` 이 dialog 의 UA 기본 margin:auto 를 지워 모달이 좌상단에 붙었다 — 가운데로 되돌린다 */
dialog.modal{border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-pop);width:min(440px,94vw);padding:0;background:var(--surface);color:var(--t-1);position:fixed;inset:0;margin:auto;height:fit-content;max-height:90vh}
dialog.modal::backdrop{background:rgba(15,23,42,.5)}
.modal-h{padding:18px 22px 0;font-size:16px;font-weight:800}
.modal-b{padding:10px 22px 0;font-size:13px;color:var(--t-2);line-height:1.55}
.modal-b .msg{display:block}
.modal-b .target{margin-top:10px;padding:9px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px;font-weight:700;color:var(--t-1);word-break:break-all}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:20px 22px 20px}

/* ── 대시보드 상단 3패널 (.dash-top) ──────────────────────────────── */
.dash-top{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:16px;margin-bottom:18px}
.sysrow{display:flex;flex-wrap:wrap;gap:8px}
.sys{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);font-size:12px}
.sys svg{font-size:14px;color:var(--t-3)}
.sys .sname{font-weight:600;color:var(--t-1)}
.sys .sdot{font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.sys .sdot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.sys.ok .sdot{color:var(--ok)}
.sys.warn .sdot,.sys.warn2 .sdot{color:var(--warn)}
.sys.warn2{border-color:var(--warn-line);background:var(--warn-bg)}
.sys.bad{border-color:var(--danger-line);background:var(--danger-bg)}
.sys.bad .sdot{color:var(--danger)}
.todayrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.today{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12px;transition:border-color .12s,background .12s}
.today:hover{background:var(--surface-2);border-color:var(--line-strong)}
.today svg{font-size:14px;color:var(--t-3);flex-shrink:0}
.today .tname{color:var(--t-2);white-space:nowrap}
.today .tval{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.todo{display:flex;flex-direction:column;gap:6px}
.todo a{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px;font-weight:600;transition:background .12s}
.todo a:hover{background:var(--surface-2)}
.todo a i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.todo a b{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:8px}

/* ── 전역 헤더 브랜드 탭 (.gh-brands) ─────────────────────────────── */
.gh-brands{display:inline-flex;gap:6px;align-items:center}
.gh-brand{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:500;color:var(--t-2);border:1px solid var(--line);background:var(--surface);white-space:nowrap;transition:.15s}
.gh-brand i{width:7px;height:7px;border-radius:50%;display:inline-block}
.gh-brand b{font-weight:800;color:inherit}
.gh-brand:hover{border-color:var(--brand-line);color:var(--t-1)}
.gh-brand.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-d)}

/* ── 페이지 KPI 아이콘 (.ic) ──────────────────────────────────────── */
.kpi .ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand-d);font-size:16px;margin-bottom:10px}
.kpi .ic.ok{background:var(--ok-bg);color:var(--ok)}.kpi .ic.warn{background:var(--warn-bg);color:var(--warn)}.kpi .ic.bad,.kpi .ic.danger{background:var(--danger-bg);color:var(--danger)}

/* ── FilterBar (.fbar) ────────────────────────────────────────────── */
.fbar{margin-bottom:16px}
.fbar-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fbar-top .gap{flex:1}
.fbar-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.fsearch{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0 11px;min-width:280px;flex:0 1 380px}
.fsearch svg{font-size:15px;color:var(--t-3);flex-shrink:0}
.fsearch input{border:0;padding:8px 0;width:100%;background:none}
.fsearch input:focus{box-shadow:none}
.fsearch:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand-d);font-size:12px;font-weight:600}
.chip a{color:inherit;font-weight:800;opacity:.7}
.chip a:hover{opacity:1}
.chip.viewchip{background:var(--ink);border-color:var(--ink);color:#fff}
.fclear{font-size:12px;color:var(--t-3);text-decoration:underline}
.fclear:hover{color:var(--danger)}
.rng{display:flex;gap:6px;align-items:center}
.rng input{flex:1;min-width:0}
.rng span{color:var(--t-3)}

/* ── 고급 필터 드로어 (.fdrawer — 플로팅 패널) ────────────────────── */
.fdrawer-back{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);z-index:80;display:none;opacity:0;transition:opacity .22s}
body.drawer-open .fdrawer-back{display:block;opacity:1}
.fdrawer{position:fixed;top:12px;right:12px;max-height:calc(100vh - 24px);width:min(400px,calc(100vw - 24px));background:var(--surface);z-index:81;border-radius:18px;box-shadow:0 24px 64px rgba(15,23,42,.30);display:flex;flex-direction:column;overflow:hidden;transform:translateX(calc(100% + 24px));transition:transform .28s cubic-bezier(.32,.72,.28,1);visibility:hidden}
body.drawer-open .fdrawer{transform:none;visibility:visible}
.fdrawer-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 14px}
.fdrawer-h b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.fdrawer-sub{display:block;font-size:12px;color:var(--t-3);margin-top:3px;font-weight:400}
.fdrawer-x{width:32px;height:32px;flex-shrink:0;border:0;border-radius:50%;background:var(--surface-2);color:var(--t-2);font-size:14px;display:inline-flex;align-items:center;justify-content:center;transition:.12s}
.fdrawer-x:hover{background:var(--surface-hover);color:var(--t-1)}
.fdrawer-b{flex:1;overflow-y:auto;padding:8px 22px 20px}
.fdrawer-b .field{margin-bottom:18px}
.fdrawer-b .field label{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t-3);margin-bottom:7px}
.fdrawer-b select,.fdrawer-b input{padding:10px 12px;border-radius:10px;font-size:13px}
.fdrawer-b select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%239CA3AF' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.fdrawer-f{display:flex;gap:10px;padding:14px 22px 18px;border-top:1px solid var(--line);background:var(--surface)}
.fdrawer-f .btn.line{flex:0 0 auto;padding:10px 16px;border-radius:10px}
.fdrawer-f .btn:not(.line){flex:1;padding:10px 16px;border-radius:10px;box-shadow:0 4px 12px rgba(79,70,229,.30)}

/* ── details 팝오버 (.pop — 저장 보기·표시 설정) ──────────────────── */
details.pop{position:relative}
details.pop>summary{list-style:none;cursor:pointer}
details.pop>summary::-webkit-details-marker{display:none}
.pop-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:12px 14px}
.pop-panel hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.pop-panel .ck{padding:3px 0}
.pop-t{font-size:10.5px;font-weight:700;color:var(--t-3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.views-list{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.views-list a{display:block;padding:6px 9px;border-radius:7px;font-size:12.5px}
.views-list a:hover{background:var(--surface-hover)}
.views-list a.on{background:var(--surface-sel);color:var(--brand-d);font-weight:700}
.views-save input[type=text]{width:100%;margin-bottom:7px}

/* ── DataTable 보강 (.dt-ck 등) ───────────────────────────────────── */
th.dt-ck,td.dt-ck{width:36px;text-align:center}
.dt-ck input{accent-color:var(--brand)}
.ellip{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
table.compact th,table.compact td{padding:6px 10px}
.per-sel{display:inline-flex;gap:5px;align-items:center;font-size:12px;color:var(--t-3)}
.per-sel a{padding:2px 7px;border-radius:6px;font-weight:600;color:var(--t-2)}
.per-sel a:hover{background:var(--surface-hover)}
.per-sel a.on{background:var(--brand-soft);color:var(--brand-d)}
.tags-cell{display:inline-flex;gap:4px;flex-wrap:wrap}
.tag{display:inline-flex;padding:1.5px 8px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:10.5px;font-weight:600;color:var(--t-2)}
.rowact{display:inline-flex;gap:5px}

/* ── 일괄 작업 바 (.bulkbar) ──────────────────────────────────────── */
.bulkbar{display:none;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:var(--r-md);padding:10px 16px;margin-bottom:14px;position:sticky;bottom:14px;z-index:30;box-shadow:var(--shadow-pop)}
.bulkbar.on{display:flex}
.bulkbar .cnt{font-size:13px}
.bulkbar select,.bulkbar input[type=text]{background:var(--ink-2);border-color:var(--ink-line);color:#fff}
.bulk-x{font-size:12px;color:#94A3B8;text-decoration:underline;margin-left:auto}
.bulk-x:hover{color:#fff}

/* ── 폼 행 (.form-row — site-quota 등) ────────────────────────────── */
.form-row{margin-bottom:15px}
.form-row label{display:block;margin-bottom:5px;color:var(--t-2);font-size:12.5px;font-weight:600}
.form-row input,.form-row select{width:100%}

@media (max-width:1439px){
  .dash-top{grid-template-columns:1fr 1fr}
  .dash-top>.card:first-child{grid-column:1/-1}
}
@media (max-width:1023px){
  .dash-top{grid-template-columns:1fr}
  .todayrow{grid-template-columns:repeat(2,1fr)}
  .gh-brands{display:none}
}
@media (max-width:767px){
  .fgrid{grid-template-columns:1fr}
  .fsearch{min-width:0;flex:1 1 100%}
}

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media (max-width:1439px){
  .gn a{padding:0 11px;font-size:13px}
  .content{padding:22px 22px 40px}
  .kpi{grid-template-columns:repeat(3,1fr)}
  .kpi .lead{grid-column:1/-1}
  .grid.c2,.grid.c3,.grid.c23{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  .gh-search{min-width:0;width:38px;padding:7px}
  .gh-search span,.gh-search kbd{display:none}
  .side{position:fixed;left:0;top:var(--gh-h);height:calc(100vh - var(--gh-h));z-index:70;transform:translateX(-100%);transition:transform .18s;box-shadow:var(--shadow-pop)}
  body.side-open .side{transform:none}
  .side-back{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:65;display:none}
  body.side-open .side-back{display:block}
  .gh-burger{display:inline-flex}
  .grid.c2,.grid.c3,.grid.c23{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .gh{padding:0 12px;gap:10px}
  .gh-brandsel,.gh-user .role{display:none}
  .content{padding:16px 14px 36px}
  .kpi{grid-template-columns:1fr}
  .phead{flex-direction:column;align-items:flex-start}
  th,td{padding:9px 8px}
}

/* ── 서버·인프라 개선 (M31) ─────────────────────────────────────── */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.toolbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tb-search input[type=search]{width:220px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;background:var(--surface)}
.sum-chips{display:flex;gap:6px;flex-wrap:wrap}
.sum-chips .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--t-2);background:var(--surface)}
.sum-chips .chip b{font-weight:800}
.sum-chips .chip:hover{border-color:var(--brand)}
.sum-chips .chip.on{border-color:var(--brand);background:var(--surface-sel);color:var(--brand-d);font-weight:700}
.t-good{color:var(--good,#059669)}.t-warn{color:var(--warnc,#D97706)}.t-danger{color:var(--danger,#DC2626)}.t-info{color:var(--brand)}
.rgrid{display:flex;flex-direction:column;gap:3px;min-width:120px}
.rcell{display:flex;flex-direction:column;gap:1px}
.rlab{display:flex;justify-content:space-between;font-size:10.5px;color:var(--t-3)}
.rlab b{font-weight:700;color:var(--t-1)}
.rbar{display:block;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.rbar i{display:block;height:100%;border-radius:2px}
.row-link{cursor:pointer}
.row-link:hover td{background:var(--surface-hover)}
.row-actions{white-space:nowrap}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.pop-menu{display:flex;flex-direction:column;gap:2px;padding:8px}
.pop-menu a,.pop-menu button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:7px;font-size:12.5px;background:none;border:0;cursor:pointer;color:var(--t-1)}
.pop-menu a:hover,.pop-menu button:hover{background:var(--surface-hover)}
/* 모바일 카드형 (지침 5-6·7-8): 테이블 → 카드 스택, data-th 라벨 */
@media (max-width: 860px){
  table.cardable thead{display:none}
  table.cardable, table.cardable tbody, table.cardable tr, table.cardable td{display:block;width:100%}
  table.cardable tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:6px 2px;background:var(--surface)}
  table.cardable td{border:0;padding:6px 12px;display:flex;gap:10px;align-items:flex-start}
  table.cardable td::before{content:attr(data-th);flex:0 0 74px;font-size:11px;color:var(--t-3);font-weight:600;padding-top:2px}
  table.cardable td.empty{display:block}
  table.cardable td.empty::before{content:none}
  .tb-search input[type=search]{width:100%}
  .toolbar-right{width:100%}
}

.badge{white-space:nowrap}
td .badge{vertical-align:middle}

/* ── M33 서버 상세 개요 ─────────────────────────── */
.srv-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.srv-meta{font-size:12px;color:var(--t-3)}
#srvAutoref{display:inline-flex;align-items:center;gap:5px}
#srvAutoref::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok,#059669);animation:srvPulse 2s infinite}
#srvAutoref.paused::before{background:var(--g4,#cbd5e1);animation:none}
@keyframes srvPulse{0%,100%{opacity:1}50%{opacity:.35}}
.strip{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;border-radius:var(--r-sm,10px);padding:10px 14px;font-size:12.5px;margin-bottom:16px;border:1px solid var(--line)}
.strip b{font-weight:700}
.strip span{color:var(--t-2)}
.strip-ok{background:var(--ok-bg,#ECFDF5);border-color:var(--ok-line,#A7F3D0)}
.strip-ok b{color:#15803D}
.strip-warn{background:#FFFBEB;border-color:#FDE68A}
.strip-warn b{color:#B45309}
.strip-danger{background:var(--danger-bg,#FEF2F2);border-color:var(--danger-line,#FECACA)}
.strip-danger b{color:var(--danger,#DC2626)}
.strip-gray{background:var(--surface);border-color:var(--line)}
.strip-gray b{color:var(--t-2)}
.kpi.k5{grid-template-columns:repeat(5,1fr)}
.kpi .kpi-v.t-warn{color:var(--warnc,#D97706)}
.kpi .kpi-v.t-danger{color:var(--danger,#DC2626)}
.k-spark{margin-left:auto;width:64px;height:18px;opacity:.85}
.k-spark svg.spark{width:100%;height:100%;display:block}
.k-spark.t-ok{color:var(--good,#059669)}
.k-spark.t-none{color:var(--g4,#cbd5e1)}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.chart-ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.leg{display:flex;gap:6px;flex-wrap:wrap}
.leg-c{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--t-3);border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:3.5px 10px;cursor:pointer}
.leg-c i{width:9px;height:9px;border-radius:50%;display:inline-block;opacity:.35}
.leg-c.on{color:var(--t-1);border-color:var(--line-strong)}
.leg-c.on i{opacity:1}
#srvChart{position:relative;min-height:220px}
#srvChart svg{width:100%;height:auto;display:block}
.chart-skel{height:210px;border-radius:10px}
.skeleton{background:linear-gradient(90deg,var(--surface-hover,#F1F5F9) 25%,var(--line,#E2E8F0) 50%,var(--surface-hover,#F1F5F9) 75%);background-size:200% 100%;animation:skel 1.4s infinite}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.chart-note{padding:56px 16px;text-align:center;color:var(--t-3);font-size:12.5px}
.chart-note.err-note{color:var(--danger,#DC2626)}
.sc-grid{stroke:var(--line,#E2E8F0);stroke-width:1}
.sc-y,.sc-x{font-size:10px;fill:var(--t-3,#94A3B8)}
.sc-gap{fill:rgba(220,38,38,.10)}
.sc-hover-line{stroke:var(--g4,#cbd5e1);stroke-width:1;stroke-dasharray:3 3}
.sc-tip{position:absolute;pointer-events:none;background:var(--t-1,#0F172A);color:#fff;font-size:11px;line-height:1.5;border-radius:8px;padding:7px 10px;box-shadow:0 4px 14px rgba(15,23,42,.25);z-index:5;white-space:nowrap;transform:translate(-50%,-100%);display:none}
.sc-tip b{font-weight:700}
.info3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.info-t{font-size:11.5px;font-weight:700;color:var(--t-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.card-head-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dom-copy{cursor:copy}
.dom-copy.copied{color:var(--good,#059669)}
@media (max-width: 1100px){.kpi.k5{grid-template-columns:repeat(2,1fr)}.info3{grid-template-columns:1fr}}
@media (max-width: 640px){.kpi.k5{grid-template-columns:1fr}.chart-head{flex-direction:column;align-items:flex-start}.strip{flex-direction:column;gap:3px}}

/* ── M36 대시보드 개선: 상태 그룹 구분·처리 필요 축약·플랜 카드 여백 (기존 토큰만 사용) ── */
.status-groups{display:flex;gap:14px;margin-bottom:18px;align-items:stretch;flex-wrap:wrap}
.status-groups .sgroup{flex:1 1 0;min-width:220px}
.status-groups .sgroup:first-child{flex:2 1 0}
.status-groups .gt{font-size:11px;font-weight:700;color:var(--t-2);letter-spacing:.02em;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.status-groups .gok{font-weight:600;color:#15803D;background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:99px;padding:1px 8px;font-size:10px}
.status-groups .status-row{margin-bottom:0;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.todo-clear{padding:10px 12px;font-size:12.5px;color:var(--t-1);background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--r-md)}
.todo-clear span{color:var(--t-2)}
.dash-top .card h2 + .todo:has(.todo-clear){margin-top:2px}
.grid.c23 .card .hbar{margin-bottom:8px}
@media (max-width: 900px){.status-groups{flex-direction:column;flex-wrap:nowrap;gap:10px}.status-groups .sgroup,.status-groups .sgroup:first-child{flex:0 0 auto;min-width:0}}

/* ── M-USAGE 사용량 UI: 목록 게이지·경고 마크·요약 (기존 토큰만) ── */
.meter-cell{display:flex;flex-direction:column;gap:3px;min-width:120px}
.meter-cell .mv{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.meter-cell .mv b{font-weight:700}
.meter-cell .meter{height:5px;background:var(--surface-2);border-radius:4px;overflow:hidden;max-width:140px}
.meter-cell .meter i{display:block;height:100%;background:var(--ok);border-radius:4px}
.meter-cell .meter.warn i{background:var(--warn)}
.meter-cell .meter.danger i{background:var(--danger)}
.warn-mark{color:var(--warn);cursor:help;font-size:12px}
.usum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.usum a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;display:flex;flex-direction:column;gap:2px}
.usum a b{font-size:18px;font-variant-numeric:tabular-nums}
.usum a span{font-size:11.5px;color:var(--t-2)}
.usum a.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.usum a.danger{border-color:var(--danger-line);background:var(--danger-bg)}
@media (max-width: 768px){.meter-cell{min-width:0}}
.kv-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.kv-tbl th{width:170px;text-align:left;font-weight:500;color:var(--t-2);padding:6px 8px 6px 0;vertical-align:top}
.kv-tbl td{padding:6px 0}
.kv-tbl .badge{margin-left:6px}
.warn-note{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-sm);padding:8px 12px;font-size:12px;color:var(--t-1);margin-top:4px}
@media (max-width:768px){.usum{grid-template-columns:repeat(2,1fr)}.kv-tbl th{width:120px}}

/* ── M-USAGE 상태 변경 라디오 카드 (site-manage) ── */
.action-cards{display:flex;flex-direction:column;gap:8px}
label.action-card{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line,#d1d5db);border-radius:8px;padding:12px 14px;cursor:pointer;background:#fff}
.action-card:hover{border-color:#9ca3af}
.action-card:has(input:checked){border-color:#2563eb;background:#f0f6ff}
.action-card.danger:has(input:checked){border-color:#c0392b;background:#fdf3f2}
.action-card input[type=radio]{margin-top:3px;flex:0 0 auto}
.action-card .ac-body{display:block}
.action-card .ac-body strong{display:block;font-size:14px;margin-bottom:2px}
.action-card.danger .ac-body strong{color:#c0392b}
.action-card .ac-desc{display:block;font-size:12px;color:#6b7280;line-height:1.5}

/* ── M-USAGE 도메인 신청 상세 타임라인 ── */
.dr-timeline{list-style:none;margin:0;padding:0}
.dr-ev{position:relative;padding:0 0 18px 26px;border-left:2px solid #e5e7eb;margin-left:8px}
.dr-ev:last-child{padding-bottom:2px}
.dr-dot{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:#9ca3af;border:2px solid #fff;box-shadow:0 0 0 1px #d1d5db}
.dr-ev.ok .dr-dot{background:#1a7f37}
.dr-ev.fail .dr-dot{background:#c0392b}
.dr-ev.current{background:#f8fafc;border-radius:0 8px 8px 0}
.dr-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dr-src{font-size:11px;color:#6b7280;background:#f3f4f6;border-radius:10px;padding:1px 8px}
.dr-detail{display:block;font-size:12px;color:#374151;margin-top:2px;word-break:break-all}
.dr-at{display:block;font-size:11px;color:#9ca3af;margin-top:2px}

/* ── M-USAGE 사이트 목록 더보기 드롭다운 (기준 10) ── */
.act-more{position:relative;display:inline-block}
.act-more summary{list-style:none;cursor:pointer}
.act-more summary::-webkit-details-marker{display:none}
.act-more[open] summary{background:#f3f4f6}
.act-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.10);min-width:180px;padding:4px;text-align:left}
.act-menu a{display:block;padding:7px 10px;border-radius:6px;font-size:13px;color:#374151;text-decoration:none;white-space:nowrap}
.act-menu a:hover{background:#f3f4f6}
.act-menu a.danger{color:#c0392b}

/* ══ M-USAGE v2 시안 스타일 (patch37v2) ══════════════════════════ */

/* ── 굵은 사용량 게이지 (사이트 목록·상세 공용) ── */
.gauge{display:flex;flex-direction:column;gap:4px;min-width:150px}
.gauge-top{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.gauge-top b{font-size:13px;color:var(--t-1)}
.gauge-top .g-quota{font-size:11.5px;color:var(--t-3)}
.gauge-pct{font-size:11px;font-weight:700;border-radius:10px;padding:1px 7px;margin-left:auto}
.gauge-pct.ok{background:var(--ok-bg);color:#15803D}
.gauge-pct.warn{background:var(--warn-bg);color:var(--warn)}
.gauge-pct.danger{background:var(--danger-bg);color:var(--danger)}
.gauge-bar{height:8px;border-radius:6px;background:#EDF0F4;overflow:hidden}
.gauge-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#34D399,#10B981)}
.gauge-bar i.warn{background:linear-gradient(90deg,#FBBF24,#F59E0B)}
.gauge-bar i.danger{background:linear-gradient(90deg,#F87171,#EF4444)}
.gauge .g-badge{font-size:10.5px}
.gauge-empty{color:var(--t-3);font-size:12.5px}

/* ── KPI 카드 그리드 (사이트 상세) ── */
.kpi-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}
.kpi-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.kpi-card .k-label{font-size:11.5px;color:var(--t-3);margin-bottom:6px;display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-card .k-value{font-size:20px;font-weight:800;color:var(--t-1);letter-spacing:-.02em;line-height:1.15}
.kpi-card .k-value small{font-size:12px;font-weight:600;color:var(--t-3);margin-left:2px}
.kpi-card .k-sub{font-size:11.5px;color:var(--t-3);margin-top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kpi-card .k-sub .up{color:#15803D;font-weight:700}
.kpi-card .k-sub .down{color:var(--danger);font-weight:700}
.kpi-card .k-frac b{color:var(--danger)}
.kpi-card .k-frac span{color:var(--brand)}
.kpi-card.k-ok .k-value{color:#15803D}
.kpi-cards.sub3{grid-template-columns:repeat(3,1fr)}
.kpi-mini{font-size:11px;font-weight:700;border-radius:8px;padding:1px 7px;background:var(--ok-bg);color:#15803D}
.kpi-mini.est{background:#F3F4F6;color:var(--t-2)}

/* ── 교차검증 3분할 ── */
.xver{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 6px}
.xver > div{flex:1;text-align:center;padding:2px 10px}
.xver > div + div{border-left:1px solid var(--line)}
.xver .x-l{font-size:11px;color:var(--t-3);margin-bottom:4px}
.xver .x-v{font-size:15px;font-weight:800;color:var(--t-1)}

/* ── 상세 탭 ── */
.dtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.dtabs a{padding:9px 14px;font-size:13px;color:var(--t-2);border-bottom:2px solid transparent;white-space:nowrap}
.dtabs a.on{color:var(--brand-d);font-weight:700;border-bottom-color:var(--brand)}

/* ── 상단 액션 바 ── */
.act-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.act-bar .btn.primary{background:var(--brand);color:#fff}

/* ── 가로 상태 카드 (상태 변경) ── */
.state-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 16px}
.state-card{position:relative;border:1.5px solid var(--line);border-radius:12px;padding:14px;background:#fff;cursor:pointer;display:block}
.state-card input{position:absolute;opacity:0;pointer-events:none}
.state-card .sc-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:8px}
.state-card.tone-ok .sc-ico{background:var(--ok-bg)}
.state-card.tone-warn .sc-ico{background:var(--warn-bg)}
.state-card.tone-danger .sc-ico{background:var(--danger-bg)}
.state-card .sc-title{display:block;font-size:14px;font-weight:800;color:var(--t-1)}
.state-card.tone-danger .sc-title{color:var(--danger)}
.state-card .sc-desc{display:block;font-size:11.5px;color:var(--t-3);line-height:1.55;margin:4px 0 8px;min-height:34px}
.state-card .sc-scope{font-size:11px;color:var(--t-2);border-top:1px dashed var(--line);padding-top:8px}
.state-card .sc-scope b{display:block;color:var(--t-3);font-weight:700;font-size:10.5px;margin-bottom:3px}
.state-card .sc-scope li{list-style:none;padding-left:10px;position:relative;line-height:1.6}
.state-card .sc-scope li::before{content:'·';position:absolute;left:2px}
.state-card.current{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.state-card.current::after{content:'현재 상태';position:absolute;top:10px;right:12px;font-size:10px;font-weight:700;color:#15803D;background:var(--ok-bg);border-radius:8px;padding:2px 8px}
.state-card:has(input:checked):not(.current){border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.state-card.tone-danger:has(input:checked){border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.state-card.disabled{opacity:.55;cursor:not-allowed}

/* ── 쿼터 조정 2단 레이아웃 ── */
.quota-wrap{display:grid;grid-template-columns:1fr 260px;gap:14px;align-items:start}
.quota-now{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.quota-preview{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:12px;padding:16px}
.quota-preview h3{font-size:12.5px;color:var(--brand-d);margin:0 0 10px;font-weight:800}
.quota-preview .qp-row{display:flex;justify-content:space-between;font-size:12.5px;padding:7px 0;border-bottom:1px dashed var(--brand-line)}
.quota-preview .qp-row:last-child{border-bottom:0}
.quota-preview .qp-row b{font-size:14px}
.quota-preview .qp-big{font-size:22px;font-weight:800;color:var(--brand-d)}
.shrink-note{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--t-1);line-height:1.7;margin:12px 0}
.shrink-note b{color:var(--warn)}

/* ── 도메인 단계 배지 ── */
.stage{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:9px;padding:3px 9px;white-space:nowrap}
.stage::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.stage.s-dns{background:var(--brand-soft);color:var(--brand-d)}
.stage.s-dnsfail{background:var(--danger-bg);color:var(--danger)}
.stage.s-ssl{background:#F5F3FF;color:#6D28D9}
.stage.s-done{background:var(--ok-bg);color:#15803D}
.stage.s-rejected{background:#F3F4F6;color:var(--t-2)}
.stage.s-redo{background:var(--warn-bg);color:var(--warn)}

/* ── 도넛·라인 차트 ── */
.donut-wrap{display:flex;align-items:center;gap:14px}
.chart-legend{display:flex;gap:14px;font-size:11.5px;color:var(--t-2);align-items:center}
.chart-legend i{width:10px;height:3px;border-radius:2px;display:inline-block;margin-right:4px;vertical-align:middle}
.usage-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}

/* ── 반응형 ── */
@media (max-width:1280px){.kpi-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){.quota-wrap{grid-template-columns:1fr}.usage-2col{grid-template-columns:1fr}}
@media (max-width:768px){.kpi-cards{grid-template-columns:repeat(2,1fr)}.state-cards{grid-template-columns:1fr}.quota-now{grid-template-columns:1fr}}

/* ── 시안형 인라인 드롭다운 필터 ── */
.fsel-row{gap:8px}
.fsel{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:9px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' fill='none' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;padding:7px 28px 7px 12px;font-size:12.5px;color:var(--t-1);cursor:pointer}
.fsel:hover{border-color:var(--brand-line)}
.act-more summary{padding:4px 9px;font-size:15px;line-height:1;color:var(--t-2)}
.usum a.on-static{pointer-events:none}
.usum a.on-static b{font-size:16px}

/* ── patch38 템플릿 수정 — 시안 레이아웃 (앵커 네비 + 우측 레일) ── */
.tpl-layout{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:16px;align-items:start}
.tpl-main{min-width:0}
.tpl-rail{min-width:0}
.qa-list{display:flex;flex-direction:column;gap:6px}
.qa-list a{display:block;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:700;color:var(--t-1)}
.qa-list a:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.qa-list a span{display:block;font-weight:500;font-size:11.5px;color:var(--t-3);margin-top:2px}
.qa-list a.danger{color:var(--danger)}
.qa-list a.danger:hover{border-color:var(--danger-line);background:var(--danger-bg)}

@media (max-width:900px){.tpl-layout{grid-template-columns:1fr}}

/* ── patch38v2 이미지 타일 (시안 — 대표 이미지 & 갤러리) ── */
.imgsec{margin-bottom:18px}
.imgsec-t{font-size:13px;font-weight:800;color:var(--t-1);margin-bottom:8px}
.imgsec-t span{font-weight:500;font-size:11.5px;color:var(--t-3);margin-left:6px}
.tile-row{display:flex;gap:10px;flex-wrap:wrap}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.tile-lg{width:230px}
.tile-lg img{aspect-ratio:4/3}
.tile-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(17,24,39,.65);color:#fff;border:0;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tile-x:hover{background:var(--danger)}
.tile-grip{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:7px;background:rgba(17,24,39,.5);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:grab}
/*
 * patch(이미지 화질): 타일에 저장 픽셀·용량을 적는다. 권장 미달이면 빨간 띠로 다시 올릴 신호를 준다.
 * 이미지 위에 겹치지 않고 **아래에 흐르는 띠**다 — 겹치면 alt 입력칸·[변경] 라벨과 부딪힌다.
 */
.tile-meta{display:block;padding:4px 8px;border-top:1px solid var(--line);background:#f9fafb;color:var(--t-3);font-size:11px;line-height:1.5;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-meta.low{background:#fef2f2;color:#b91c1c;font-weight:700}
/* 대표 이미지 타일은 [변경] 라벨이 이미지 위 맨 아래에 떠 있다 — 띠가 생긴 만큼 올려 준다. */
.tile-lg:has(.tile-meta) .tile-change{bottom:30px}
.tile-change{position:absolute;left:6px;bottom:34px;background:rgba(17,24,39,.7);color:#fff;font-size:11.5px;font-weight:700;border-radius:8px;padding:4px 10px;cursor:pointer}
.tile-lg .tile-change{bottom:6px}
.tile-change:hover{background:var(--brand)}
.tile-alt{width:100%;border:0;border-top:1px solid var(--line);padding:6px 8px;font-size:11.5px;color:var(--t-2);border-radius:0}
.tile-alt:focus{outline:none;background:var(--brand-soft)}
.tile-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:120px;border:1.5px dashed var(--line);border-radius:12px;cursor:pointer;background:var(--surface,#fafbfc);text-align:center}
.tile-add:hover{border-color:var(--brand);background:var(--brand-soft)}
.tile-add-b{font-size:13px;font-weight:700;color:var(--t-2)}
.tile-add:hover .tile-add-b{color:var(--brand-d)}
.tile-add-d{font-size:11px;color:var(--t-3)}
.tile.dragging{opacity:.5}

/* ── 패치39: FAQ·매뉴얼 스텝 편집 ─────────────────────────────────── */
.step-box{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin-bottom:12px;background:var(--surface,#fafbfc)}
.step-box legend{font-size:12.5px;font-weight:700;color:var(--t-2);padding:0 6px;display:flex;align-items:center;gap:8px}
.step-box legend .step-no{color:var(--brand-d)}
.step-box .fgrid{margin-top:2px}
.step-box textarea{background:#fff}
.step-box input[type=text]{background:#fff}

/* ============================================================
   업종 SEO 패치 — 검색결과 미리보기 · 공개 진단 · 중복 진단
   ============================================================ */
.serp-preview {padding: 14px 16px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; max-width: 620px;}
.serp-title {font-size: 17px; line-height: 1.35; color: #1a0dab; margin-bottom: 3px; word-break: break-all;}
.serp-url {font-size: 12.5px; color: #4d5156; margin-bottom: 5px;}
.serp-desc {font-size: 13.5px; line-height: 1.6; color: #4d5156;}

.ckgrid {display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 0;}

.diag-list {list-style: none; margin: 8px 0 0;}
.diag-list li {display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13px;}
.diag-ok {color: #16a34a; font-weight: 700;}
.diag-ng {color: #dc2626; font-weight: 700;}
.diag-note {color: #737373;}

.dup-group {border: 1px solid #e5e5e5; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;}
.dup-group.warn {border-color: #fca5a5; background: #fef2f2;}
.dup-key {font-weight: 700; font-size: 13.5px; margin-bottom: 6px; word-break: break-all;}
.dup-where {list-style: none; font-size: 12.5px; color: #525252;}
.dup-where li {padding: 2px 0;}
.dup-where a {text-decoration: underline;}

/* ── 매뉴얼 이미지 업로더 (2026-07-31) ─────────────────────────
   판매 템플릿의 타일 UI(.tile 계열)를 그대로 쓰고, 상태 표시와
   드래그 강조만 더한다. 고르는 즉시 업로드되므로 별도 버튼이 없다. */
.mi-up{position:relative;display:flex;flex-direction:column;gap:6px;max-width:230px}
.mi-up .tile-add{min-height:104px}
.mi-up .tile-lg{width:230px}
.mi-up.mi-drop .tile-add,.mi-up.mi-drop .tile{border-color:var(--brand);background:var(--brand-soft)}
.mi-state{font-size:11.5px;line-height:1.4;color:var(--t-3);min-height:16px}
.mi-state.err{color:var(--danger)}
.lnk{border:0;background:none;padding:0;font:inherit;color:var(--brand-d);text-decoration:underline;cursor:pointer}

/* =====================================================================
   v3 스킨 보정 레이어 — 위쪽 구간(M31~patch39)에 하드코딩돼 있던 구(舊)
   팔레트(파랑 #2563eb 계열·진초록 #15803D 계열)를 템플릿 언어로 정렬한다.
   파일 말미라 동일 특이도에서 항상 이긴다. 클래스·마크업 무수정.
   ===================================================================== */

/* 구 초록(#15803D 계열) → 템플릿 그린 */
.gh-env.live,.ok-note,.status-groups .gok{color:var(--ok)}
.strip-ok b,.kpi .delta.up,.kpi-card .k-sub .up,.gauge-pct.ok,.kpi-mini,.stage.s-done,.diag-ok{color:var(--ok)}
.dr-ev.ok .dr-dot{background:var(--ok)}
.t-good{color:var(--ok)}
.dom-copy.copied{color:var(--ok)}

/* 구 파랑/구 인디고 하드코딩 → 브랜드 인디고 */
.action-card:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.action-card.danger:has(input:checked){border-color:var(--danger);background:var(--danger-bg)}
.action-card.danger .ac-body strong{color:var(--danger)}
.strip-warn b{color:var(--warn)}
.strip-danger b{color:var(--danger)}
.diag-ng{color:var(--danger)}
.dr-ev.fail .dr-dot{background:var(--danger)}
.t-warn{color:var(--warn)}.t-danger{color:var(--danger)}
label.action-card{border-color:var(--line);border-radius:10px}
.act-menu{border-color:var(--line);border-radius:12px;box-shadow:var(--shadow-pop)}
.act-menu a{color:var(--t-1)}
.act-menu a:hover{background:var(--surface-hover)}
.act-menu a.danger{color:var(--danger)}
.act-more[open] summary{background:var(--surface-hover)}

/* 게이지·미터 — 템플릿 상태색 그라데이션 */
.gauge-bar{background:var(--surface-2)}
.gauge-bar i{background:linear-gradient(90deg,#3EE6A3,var(--ok))}
.gauge-bar i.warn{background:linear-gradient(90deg,#FDBA74,var(--warn))}
.gauge-bar i.danger{background:linear-gradient(90deg,#F5A19B,var(--danger))}
.meter-cell .meter i{background:var(--ok)}

/* 카드류 라운드 통일(구 12px 하드코딩 → 토큰) + 소프트 섀도 */
.kpi-card,.state-card,.quota-preview,.xver,.tile,.tile-add,.step-box{border-radius:var(--r-md)}
.kpi-card,.xver{box-shadow:var(--shadow-soft)}
.esec,.spanel,.ov{box-shadow:var(--shadow-soft)}
.serp-preview,.dup-group{border-color:var(--line);border-radius:var(--r-md)}
.dup-group.warn{border-color:var(--danger-line);background:var(--danger-bg)}

/* 상태 카드 현재 표시(구 초록 배지) */
.state-card.current::after{color:var(--ok)}

/* 태그·칩 필 통일 */
.tag,.chip,.sum-chips .chip,.dr-src{border-radius:var(--r-pill)}
.chip{background:#F1EDFF;border-color:transparent;color:var(--brand)}
.sum-chips .chip.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-d)}

/* 모달·팔레트·팝오버 — 템플릿 라운드 */
dialog.modal{border-radius:var(--r-md)}
.palette{border-radius:var(--r-md)}
.pop-panel{border-radius:var(--r-md);box-shadow:var(--shadow-pop)}

/* 스켈레톤·차트 잔재 회색 정렬 */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 50%,var(--surface-2) 75%);background-size:200% 100%}
.sc-grid{stroke:var(--line)}
.sc-hover-line{stroke:var(--line-strong)}
.linechart .lc-line{stroke:var(--brand)}
.linechart .lc-dot{stroke:var(--brand)}
.chart-bars .bar i{background:var(--brand)}
.chart-bars .bar:hover i{background:var(--brand-d)}

/* KPI 아이콘 원 — 템플릿 소프트 배경 */
.kpi .ic{background:#F1EDFF;color:var(--brand)}
.kpi .ic.ok{background:var(--ok-bg);color:var(--ok)}
.kpi .ic.warn{background:var(--warn-bg);color:var(--warn)}
.kpi .ic.bad,.kpi .ic.danger{background:var(--danger-bg);color:var(--danger)}

/* 스테이지 배지 필 */
.stage{border-radius:var(--r-pill)}
.stage.s-dns{background:var(--info-bg);color:var(--info)}
.stage.s-ssl{background:#F1EDFF;color:var(--brand)}

/* 델타 배지 */
.kpi .delta{border-radius:var(--r-pill)}
.kpi .delta.up{background:var(--ok-bg)}
.kpi .delta.down{background:var(--danger-bg);color:var(--danger)}

/* 버튼 — 템플릿 gray-line-btn hover 감각 */
.btn.line:hover,.btn.secondary:hover{background:var(--bg);border-color:var(--line-strong)}
.btn.sm,.btn.small{border-radius:8px}

/* 정렬 화살표·페이지네이션 활성 */
th a.on,th a.on .arr{color:var(--brand)}
.pgn .cur{color:var(--brand);font-weight:700}
.per-sel a.on{background:#F1EDFF;color:var(--brand)}

/* 사이드 배지 톤 정리 */
.side .sbadge.danger{border:0;background:var(--danger-bg);color:var(--danger)}
.side .sbadge.warn{border:0;background:var(--warn-bg);color:var(--warn)}
.side .sbadge.plain{border:0;background:var(--surface-2);color:var(--t-2)}

/* =====================================================================
   v3.1 폴리시 레이어 — 사이트이지 로고 헤더 · 네이비 히어로 KPI(템플릿
   admin-navy-box 언어) · 버튼 소프트 섀도 · 아바타 칩 · 로그인 리프레시
   ===================================================================== */

/* ── 헤더: SITE2Z 로고 + HQ 태그 ── */
.gh{gap:14px}
.gh-logo{gap:8px}
.gh-logo img{height:22px;width:auto;display:block}
.hq-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;background:linear-gradient(135deg,#6366F1,#818CF8);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em}
.gh::after{content:none}
.gh-logo+.gh-env{margin-left:2px}

/* ── 스태프 아바타 칩 ── */
.gh-user{gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface)}
.gh-user .avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6366F1,#818CF8);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}

/* ── 페이지 타이틀 위계 강화 ── */
.phead h1{font-size:22px;letter-spacing:-.03em}
.phead{margin-bottom:22px}
.crumb{margin-bottom:8px}
.card h2{font-size:15px}

/* ── 네이비 히어로 KPI (.kpi .lead) — 템플릿 admin-navy-box(#000133) ── */
.kpi .lead{position:relative;overflow:hidden;background:#000133;border-color:#000133}
.kpi .lead::before{content:'';position:absolute;top:-70px;right:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.55),transparent 68%);pointer-events:none}
.kpi .lead::after{content:'';position:absolute;bottom:-90px;left:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(129,140,248,.28),transparent 70%);pointer-events:none}
.kpi .lead .k{color:#C7CBFA}
.kpi .lead .kpi-v{color:#fff}
.kpi .lead .sub{color:rgba(255,255,255,.55)}
.kpi .lead .ic{background:rgba(255,255,255,.14);color:#fff}
.kpi .lead .delta.up{background:rgba(62,230,163,.18);color:#3EE6A3}
.kpi .lead .delta.down{background:rgba(245,161,155,.2);color:#F5A19B}
.kpi .lead:hover{border-color:#000133;box-shadow:0 10px 30px rgba(0,1,51,.28)}
.kpi .lead>*{position:relative;z-index:1}

/* ── 버튼 소프트 섀도 (템플릿 fdrawer 주 버튼 감각) ── */
.btn{box-shadow:0 4px 12px rgba(99,102,241,.22)}
.btn:hover{box-shadow:0 6px 16px rgba(99,102,241,.3)}
.btn.line,.btn.secondary,.btn.ghost,.btn.danger.line,.btn.refresh{box-shadow:none}
.btn.line:hover,.btn.secondary:hover,.btn.ghost:hover,.btn.danger.line:hover{box-shadow:none}
.btn.danger{box-shadow:0 4px 12px rgba(224,82,74,.2)}
.btn.danger:hover{box-shadow:0 6px 16px rgba(224,82,74,.26)}

/* ── 사이드바 마감 ── */
.side{padding:18px 12px}
.side-title{font-size:10.5px;letter-spacing:.08em;padding:2px 14px 12px}
.side{scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* ── 카드 링크·행 호버 인디고 틴트 ── */
tbody tr:hover td{background:#FAFAFE}
.today:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.todo a:hover{background:var(--brand-soft);border-color:var(--brand-line)}

/* ── 토스트·벌크바 필 ── */
.toast{border-radius:var(--r-pill);padding:11px 18px}
.bulkbar{border-radius:var(--r-md)}

/* ── 로그인 리프레시 ── */
body:has(.login-wrap){background:radial-gradient(900px 500px at 50% -10%,#EEF0FE 0%,var(--bg) 60%)}
.login-wrap{margin:12vh auto}
.login-logo{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.login-logo img{height:26px;width:auto;display:block}
.login-sub{color:var(--t-3);font-size:12.5px;margin-bottom:24px}
.login-card{padding:38px 34px;border-radius:18px;box-shadow:0 18px 50px rgba(23,23,23,.07)}
.login-card .btn{width:100%;padding:11px 15px;border-radius:10px;margin-top:4px}

/* ── 빈 상태 마감 ── */
.empty{padding:52px 20px}
.empty b{font-size:14.5px}

/* ── 검색 팔레트 마감 ── */
.palette{border-radius:18px}
.palette input{padding:16px 20px}

/* ── H14-137: 오늘 처리 필요 묶음 제목 · 자동 작업 상태 카드 ── */
.todo-gt{font-size:11px;font-weight:700;color:var(--t-3);letter-spacing:.04em;margin:10px 0 6px}
.todo-gt:first-of-type{margin-top:0}
.workers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.worker{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px}
.worker .wdot{width:8px;height:8px;border-radius:50%;background:var(--t-3);flex-shrink:0}
.worker.ok .wdot{background:var(--ok)}
.worker.late .wdot{background:var(--danger,#DC2626);box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.worker.late{border-color:var(--danger,#DC2626)}
.worker .wname{font-weight:600;color:var(--t-1)}
.worker .wago{margin-left:auto;color:var(--t-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.worker .wago small{color:var(--t-3)}
/* ── H14-137: 사이트 상세 운영 도구 ── */
.ops-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.ops-item{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.ops-item>b{display:block;font-size:13px;margin-bottom:4px}
.ops-item>p{font-size:12px;color:var(--t-2);margin:0 0 8px;line-height:1.6}
.ops-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.ops-form input[type=password],.ops-form input[type=date],.ops-form input[type=number],.ops-form input[type=text]{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:12px}