/* 패널 공용 꼴(⑤-1 공용 부품). 앞부분 = 뼈대(④-1) html.ts 의 기본 꼴을 옮겨 이음, 뒷부분 = 공용 부품 꼴.
   넘침 기준(49 §A-3): 페이지 · 서랍 · 모달 모두 가로 스크롤 0, 안쪽 가로 스크롤 상자도 쓰지 않음(로그 원문 .hp-raw 만 예외). */
:root{--bg:#f6f7f9;--fg:#1d2330;--muted:#5b6475;--line:#d9dde4;--card:#fff;--accent:#2457c5;--bad:#b42318;--good:#137333;--warn:#9a6700;
  --soft:#eef1f5;--web:#2457c5;--db:#7a5af5;--hot:#c2410c;--bad-bg:#fdecea;--warn-bg:#fff6e0;--ok-bg:#e8f5ec;--shadow:0 10px 30px rgba(0,0,0,.18)}
@media (prefers-color-scheme: dark){:root{--bg:#14171c;--fg:#e6e9ef;--muted:#9aa3b2;--line:#2b313b;--card:#1b1f26;--accent:#7aa2ff;--bad:#ff8a80;--good:#7ee2a8;--warn:#f2cc60;
  --soft:#232832;--web:#7aa2ff;--db:#b39dff;--hot:#ffb27a;--bad-bg:#3a1f1f;--warn-bg:#3a3220;--ok-bg:#1d3326;--shadow:0 10px 30px rgba(0,0,0,.5)}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;overflow-wrap:anywhere}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card)}
header .brand{font-weight:700}header nav{display:flex;flex-wrap:wrap;gap:10px}header a{color:var(--accent);text-decoration:none}
header .me{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
main{max-width:1100px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px;margin:0 0 16px}
.narrow{max-width:420px;margin:40px auto}
h1{font-size:20px;margin:0 0 12px}h2{font-size:16px;margin:0 0 10px}h3{font-size:14px;margin:0 0 8px}
label{display:block;margin:8px 0 4px;color:var(--muted);font-size:13px}
input,select,textarea{width:100%;max-width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);font:inherit}
textarea{min-height:70px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
button,.hp-btn{display:inline-block;padding:8px 14px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:6px;font:inherit;cursor:pointer;margin-top:10px;text-decoration:none;line-height:1.3}
button.plain,.hp-btn.plain{background:transparent;color:var(--accent)}button.danger,.hp-btn.danger{border-color:var(--bad);background:var(--bad);color:#fff}
button:disabled{opacity:.55;cursor:default}
.inline{display:inline}.inline button{margin:2px 4px 2px 0;padding:4px 8px;font-size:13px}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600}.scroll{overflow-x:auto}
.msg{padding:10px 12px;border-radius:6px;margin:0 0 12px;border:1px solid var(--line)}.msg.bad{color:var(--bad);border-color:var(--bad)}.msg.good{color:var(--good);border-color:var(--good)}
.muted{color:var(--muted)}.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px;word-break:break-all}
.dim td{opacity:.6}.pill{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:10px;font-size:12px}
img.qr{width:200px;height:200px;background:#fff;padding:8px;border-radius:6px}

/* ---------- 공용 부품 ---------- */
.hp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 호버 설명 — JS 가 있으면 #hp-bubble 하나를 화면 안에 맞춰 띄움, 없으면 CSS 만으로 */
.hp-tip{position:relative;display:inline-block;max-width:100%;cursor:help;border-radius:4px}
div.hp-tip{display:block}
.hp-tip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html:not(.js) .hp-tip:hover>.hp-sr,html:not(.js) .hp-tip:focus>.hp-sr{clip:auto;width:max-content;max-width:min(300px,80vw);height:auto;margin:0;white-space:normal;left:0;top:100%;z-index:60;
  background:var(--fg);color:var(--bg);padding:6px 9px;border-radius:6px;font-size:12.5px;line-height:1.45}
#hp-bubble{position:fixed;z-index:200;display:none;max-width:min(320px,calc(100vw - 16px));background:var(--fg);color:var(--bg);padding:7px 10px;border-radius:7px;font-size:12.5px;line-height:1.45;box-shadow:var(--shadow);pointer-events:none}
#hp-bubble.on{display:block}
/* 상태 */
.st{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.st-ok{color:var(--good);background:var(--ok-bg)}.st-warn{color:var(--warn);background:var(--warn-bg)}.st-bad{color:var(--bad);background:var(--bad-bg)}.st-dim{color:var(--muted);background:var(--soft)}
.hp-dash{color:var(--muted)}
/* 사용량 막대 — 웹 · DB 두 색, 합계 기준 */
.hp-use{min-width:0;font-size:12.5px}.hp-use-l{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.hp-track{display:flex;height:7px;border-radius:4px;background:var(--soft);overflow:hidden;margin:3px 0 1px}
.hp-fill{display:block;height:100%}.hp-fill.web{background:var(--web)}.hp-fill.db{background:var(--db)}
.hp-use.hot .hp-fill.web{background:var(--hot)}.hp-use.hot .hp-use-l span:last-child,.hp-use.over .hp-use-l span:last-child{color:var(--bad);font-weight:700}
.hp-use.over .hp-fill{background:var(--bad)}.hp-use-n{color:var(--muted);font-size:11.5px}
/* 인라인 SVG 막대 */
.hp-bars{width:100%;height:110px;display:block}.hp-bar{fill:var(--web)}.hp-bar-l{fill:var(--muted);font-size:5px}
/* 고정 머리띠 + 표의 열 제목 */
.hp-sticky{position:sticky;top:0;z-index:20;background:var(--bg);padding:8px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--line)}
.hp-sticky>*{min-width:0}.hp-sticky input,.hp-sticky select{width:auto;flex:1 1 160px}
.hp-table{table-layout:fixed}.hp-table thead th{position:sticky;top:var(--hp-sticky-h,52px);z-index:10;background:var(--bg)}
.hp-table td,.hp-table th{overflow-wrap:anywhere}
/* 단추 줄 */
.hp-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px}.hp-actions .hp-btn,.hp-actions button{margin-top:0}
.hp-btns{display:flex;flex-wrap:wrap;gap:6px}.hp-btns .hp-btn,.hp-btns button{margin-top:0;padding:5px 10px;font-size:13px}
/* 서랍(오른쪽) */
html.hp-open{overflow:hidden}
.hp-scrim{position:fixed;inset:0;z-index:80;background:rgba(15,20,30,.35)}
.hp-drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(760px,64vw);background:var(--card);border-left:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.hp-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.hp-drawer-head h2{margin:0}.hp-drawer-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 16px}
.hp-close{color:var(--accent);text-decoration:none;white-space:nowrap}
/* 모달 */
.hp-modal-wrap{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:16px}
.hp-modal-wrap .hp-scrim{z-index:0}
.hp-modal{position:relative;z-index:1;width:min(620px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.hp-modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}.hp-modal-head h2{margin:0}
.hp-modal-body{overflow-y:auto;overflow-x:hidden;padding:12px 14px}.hp-modal-foot{padding:10px 14px;border-top:1px solid var(--line)}
/* 입력 칸 */
.hp-field{margin:0 0 12px;border:0;padding:0;min-width:0}.hp-label{display:block;margin:0 0 4px;color:var(--muted);font-size:13px}
.hp-inp{display:flex;align-items:center;gap:6px}.hp-unit{color:var(--muted);white-space:nowrap}
.hp-help{color:var(--muted);font-size:12.5px;margin-top:3px}.hp-intro{margin:0 0 12px}
.hp-check{font-size:12.5px;margin-top:3px}.hp-check.ok,.hp-strength.ok{color:var(--good)}.hp-check.bad,.hp-strength.bad{color:var(--bad)}
.hp-strength{font-size:12.5px;margin-top:3px}
.hp-pw{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.hp-pw input{flex:1 1 200px;width:auto}.hp-pw button{margin-top:0}
.hp-radios{display:flex;flex-direction:column;gap:6px}
.hp-radio{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px;border:1px solid var(--line);border-radius:6px;color:var(--fg);font-size:14px;cursor:pointer}
.hp-radio input{width:auto;margin-top:3px}.hp-radio small{display:block;color:var(--muted)}.hp-radio.off{opacity:.55;cursor:not-allowed}
.hp-check-line{display:flex;gap:8px;align-items:center;color:var(--fg)}.hp-check-line input{width:auto}
.hp-info{padding:6px 0}
.hp-warn{border:1px solid var(--bad);background:var(--bad-bg);border-radius:8px;padding:10px 12px}.hp-warn p{margin:6px 0 0}
/* 진행 표시 */
.hp-steps{list-style:none;margin:0;padding:0;columns:2 240px;column-gap:16px;font-size:13.5px}
.hp-step{display:block;padding:2px 0;break-inside:avoid}.hp-step .hp-tip{display:inline}
.hp-mark{display:inline-block;width:1.3em;text-align:center}.hp-no{display:inline-block;min-width:1.6em;color:var(--muted)}
.hp-step.done .hp-mark{color:var(--good)}.hp-step.run{font-weight:700}.hp-step.run .hp-mark{color:var(--accent)}.hp-step.wait{color:var(--muted)}
.hp-step.fail{color:var(--bad);font-weight:700}.hp-step.later .hp-mark{color:var(--warn)}
/* 결과 */
.hp-dl{display:grid;grid-template-columns:minmax(90px,max-content) 1fr;gap:4px 12px;margin:0}.hp-dl dt{color:var(--muted)}.hp-dl dd{margin:0;min-width:0}
/* 로그 원문 — 넘침 기준의 유일한 예외(날것 줄은 줄바꿈하면 뜻이 깨짐) */
.hp-raw{overflow-x:auto;white-space:pre;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;background:var(--soft);padding:8px;border-radius:6px;max-width:100%}

@media (max-width:760px){
  .hp-drawer{width:100%;border-left:0}
  .hp-modal-wrap{padding:0}.hp-modal{width:100%;height:100%;max-height:none;border-radius:0}
}
@media (max-width:560px){main{padding:12px}.card{padding:12px}.hp-dl{grid-template-columns:1fr}.hp-dl dt{margin-top:6px}}

/* ---------- 계정 화면(01 · 02 · 03) ---------- */
.ok-t{color:var(--good)}
.hp-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}.hp-top .hp-btn,.hp-top button{margin-top:0}
/* 조치 필요 묶음 */
.hp-attn-box h2{margin-bottom:8px}
.hp-attn-line{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,2.4fr) minmax(130px,1.3fr);gap:6px 12px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.hp-attn-line:first-child{border-top:0}.hp-attn-do{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}.hp-attn-do .hp-btn{margin-top:0;padding:5px 10px;font-size:13px}
.hp-attn-do .hp-help{flex-basis:100%;text-align:right}
.hp-more summary{cursor:pointer;color:var(--accent);font-size:13px;list-style:none}.hp-more summary::-webkit-details-marker{display:none}
.hp-attn-sub{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 0 0 10px;font-size:13.5px}.hp-attn-sub .hp-btn{margin-top:0;padding:4px 9px;font-size:12.5px}
/* 전체 계정 표 — 1024 는 두 줄 칸, 휴대폰은 카드(접음) */
.hp-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 420px}.hp-filter button{margin-top:0}
.hp-rows{display:block;font-size:14px}
.hp-row{display:grid;grid-template-columns:var(--hp-cols,repeat(auto-fit,minmax(0,1fr)));gap:4px 10px;padding:8px 4px;border-bottom:1px solid var(--line);align-items:start}
.hp-row>div{min-width:0}.hp-row .st,.hp-attn-line .st{white-space:normal}.hp-row.hot .c-st{box-shadow:inset 3px 0 0 var(--bad);padding-left:6px}
.hp-head{position:sticky;top:var(--hp-sticky-h,52px);z-index:10;background:var(--bg);color:var(--muted);font-weight:600;font-size:13px}
.hp-fold,.c-fold{display:none}
/* 접힘 칸(900 아래에서만 씀): 숨기지 않고 화면 밖으로 치워 키보드(Tab · Space)로 닿게 — 초점이 오면 "자세히 ▾"에 테두리 */
.hp-fold:focus-visible~.c-fold{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.m-act .hp-btn{margin-top:4px;padding:4px 9px;font-size:12.5px}
.hp-sec{display:flex;flex-wrap:wrap;gap:4px}.hp-chip{display:inline-flex;flex-direction:column;align-items:center;min-width:38px;padding:2px 4px;border-radius:6px;background:var(--soft);color:var(--muted);font-size:11px;line-height:1.2}
.hp-chip b{font-size:13px}.hp-chip.alarm{background:var(--bad-bg);color:var(--bad)}.hp-sec a{text-decoration:none}
.hp-pager{text-align:center}
/* 서랍 안 묶음 */
.hp-dhead{margin-bottom:10px}.hp-sec-box{border-top:1px solid var(--line);padding:12px 0}
.hp-sec-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;margin-bottom:6px}.hp-sec-head h3{margin:0}
.hp-sub{margin:8px 0}.hp-mini{table-layout:fixed;font-size:13px;margin:6px 0}.hp-mini td,.hp-mini th{overflow-wrap:anywhere;padding:4px 6px}
.hp-card2{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 10px}.hp-card2 h3{margin:0 0 6px}
.hp-list{list-style:none;padding:0;margin:6px 0}.hp-list li{padding:4px 0;border-bottom:1px solid var(--line)}.hp-list .hp-btn{margin-top:0;padding:3px 8px;font-size:12.5px}
#hp-attn-acct .hp-attn-box{border-color:var(--bad)}

@media (max-width:900px){
  .hp-row{grid-template-columns:var(--hp-cols-m,minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.5fr))}
  .hp-head .more{display:none}
  .hp-row>.more{display:none;grid-column:1/-1}
  .c-fold{display:block;grid-column:1/-1;color:var(--accent);cursor:pointer;margin:0;font-size:13px}
  .hp-row:not(.hp-head)>.hp-fold{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0}
  .hp-row:not(.hp-head){position:relative}   /* 머리 줄(.hp-head)은 sticky 그대로 — 대조 3차 R6 */
  .hp-fold:checked~.more{display:block}
  .hp-attn-line{grid-template-columns:1fr}.hp-attn-do{justify-content:flex-start}.hp-attn-do .hp-help{text-align:left}
}
@media (max-width:560px){
  .hp-row{grid-template-columns:1fr;gap:2px}.hp-head{display:none}
  .hp-mini thead{display:none}.hp-mini,.hp-mini tbody,.hp-mini tr,.hp-mini td{display:block;width:100%}.hp-mini tr{border-bottom:1px solid var(--line);padding:4px 0}.hp-mini td{border:0;padding:1px 0}
}
/* 카드 꼴 칸 이름(cardTable cardLabels) — 열 머리가 숨는 560 아래에서만 */
.hp-rows .c-l{display:none}
@media (max-width:560px){.hp-rows.labeled .c-l{display:block;color:var(--muted);font-size:12px;margin-bottom:1px}}