/* ══════════════════════════════════════════════════════════════════════════
   XPLAIN 관리 플랫폼 — 공용 스타일
   ★ 이 파일의 컴포넌트 규칙은 **승인된 개편 목업의 CSS 그대로**다.
     (artifact 73bd1662 · 2026-08-02 대표 재지시로 원본을 직접 받아 이식)
     눈대중으로 옮겨 적지 않는다 — 그게 지금까지 화면이 목업과 어긋난 이유다.

   목업에 없던 것만 아래 "우리 것" 절에 따로 둔다. 우리 화면의 클래스 이름은
   각 규칙의 선택자에 **얹어서** 쓴다(규칙을 복사하지 않으므로 값이 갈라질 수 없다).

   admin 4개 앱과 :8090 대시보드가 전부 이 파일 하나를 <link> 로 읽는다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   XPLAIN 관리 플랫폼 · 개편 목업 (클로드 톤)
   크림 바탕 위에 그보다 밝은 카드, 코랄은 상태와 주요 동작에만.
   ══════════════════════════════════════════════════════════════ */
:root{/* 클로드 팔레트 — 카드가 바탕보다 '밝다'는 것이 이 톤의 핵심 */
  --bg:#F0EEE6;
  --surface:#FAF9F5;
  --surface-2:#F2F0E8;
  --sunken:#E8E5DB;
  --line:#E3E0D5;
  --line-2:#D3CFC1;
  --ink:#1A1915;
  --text:#2B2A25;
  --text-2:#57544A;
  --muted:#84806F;

  --coral:#C96442;
  --coral-hover:#B4573A;
  --coral-bg:#F6E9E2;
  --coral-line:#E5C8B9;

  --ok:#5E7F63;      --ok-bg:#E7EDE4;
  --warn:#9A7B32;    --warn-bg:#F3EBD9;
  --crit:#A8503C;    --crit-bg:#F4E3DD;

  --rail:236px;
  --r:12px;  --r-sm:8px;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --serif:"Source Serif 4",ui-serif,Georgia,"Apple SD Gothic Neo",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;}

/* 옛 토큰 이름 → 목업 토큰. 우리 코드(대시보드 CSS·패널 CSS)가 이 이름들을 쓰고 있어
   한 번에 갈아엎지 않고 여기서 잇는다. **값은 목업 것 하나뿐이다.** */
:root{
  --accent:var(--coral); --accent-ink:var(--coral-hover); --accent-bg:var(--coral-bg);
  --ink-soft:var(--text-2); --ink-faint:var(--muted);
  --line-strong:var(--line-2); --line-soft:var(--line);
  --raise:var(--surface);
  --success:var(--ok); --success-bg:var(--ok-bg);
  --warning:var(--warn); --warning-bg:var(--warn-bg); --warn-ink:var(--warn);
  --danger:var(--crit); --danger-bg:var(--crit-bg);
  --good:var(--ok); --good-bg:var(--ok-bg); --bad:var(--crit); --bad-bg:var(--crit-bg);
  --disabled:var(--muted); --disabled-bg:var(--surface-2);
  --info:#2F5478; --info-bg:#EAEFF6;
  --overlay:rgba(26,25,21,.45);
  --shadow:none;
  --r-pill:99px;
  --coral-ink:var(--coral-hover);
}

:root[data-theme="dark"]{--bg:#211F1D; --surface:#2B2926; --surface-2:#333029; --sunken:#1A1917;
  --line:#3A3730; --line-2:#4A463D;
  --ink:#F5F3EC; --text:#EDEAE1; --text-2:#C3BFB2; --muted:#918C7D;
  --coral:#D97757; --coral-hover:#E28A6D; --coral-bg:#3A2620; --coral-line:#5A3A2C;
  --ok:#87A98B;   --ok-bg:#232D24;
  --warn:#C4A055; --warn-bg:#332C1C;
  --crit:#CE7A64; --crit-bg:#38241F;}
:root[data-theme="light"]{--bg:#F0EEE6; --surface:#FAF9F5; --surface-2:#F2F0E8; --sunken:#E8E5DB;
  --line:#E3E0D5; --line-2:#D3CFC1;
  --ink:#1A1915; --text:#2B2A25; --text-2:#57544A; --muted:#84806F;
  --coral:#C96442; --coral-hover:#B4573A; --coral-bg:#F6E9E2; --coral-line:#E5C8B9;
  --ok:#5E7F63;   --ok-bg:#E7EDE4;
  --warn:#9A7B32; --warn-bg:#F3EBD9;
  --crit:#A8503C; --crit-bg:#F4E3DD;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--ink);font-weight:600}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
.num,.mk-num,.mono,.cid{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lab,.mk-lab,.lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sub,.mk-sub,.desc,.loginhint{color:var(--muted);font-size:12.5px}
.stack,.mk-stack{display:flex;flex-direction:column;gap:16px}
.row,.mk-row,.actbar,.consentrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spacer{margin-left:auto}
/* ══ 셸 ══════════════════════════════════════════════════════ */
.ctx,.mk-ctx{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:12px;padding:0 26px;height:58px}
.crumb,.mk-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}
.crumb b,.mk-crumb b{color:var(--ink);font-weight:550}
.crumb i,.mk-crumb i{font-style:normal;opacity:.4}
.canvas,.mk-canvas{padding:26px}
.page,.mk-page{max-width:1200px}
.phead,.mk-phead,.page-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.phead h1,.mk-phead h1,.page-head h1{font-family:var(--serif);font-size:30px;letter-spacing:-.01em;line-height:1.25}
.phead p,.mk-phead p,.page-head p{color:var(--text-2);font-size:14px;margin-top:6px;max-width:62ch;line-height:1.65}
.phead .acts,.mk-phead .acts,.page-head .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* ── 상태 ─────────────────────────────────────────────────── */
.dot,.mk-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;background:var(--line-2)}
.dot.live,.mk-dot.live,.dot.s-accent,.dot.s-live{background:var(--coral);animation:pulse 2.4s infinite}
.dot.ok,.mk-dot.ok,.dot.s-ok{background:var(--ok)}
.dot.warn,.mk-dot.warn,.dot.s-warn{background:var(--warn)}
.dot.crit,.mk-dot.crit,.dot.s-crit,.dot.s-bad{background:var(--crit)}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 45%,transparent)}
  70%{box-shadow:0 0 0 6px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.pill,.mk-pill,.badge,.mockflag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:500;border:1px solid var(--line-2);color:var(--text-2);white-space:nowrap}
.pill.live,.mk-pill.live,.badge.live,.mockflag.live,.pill.s-accent,.pill.s-live{background:var(--coral-bg);color:var(--coral);border-color:var(--coral-line)}
.pill.ok,.mk-pill.ok,.badge.ok,.mockflag.ok,.pill.s-ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.pill.warn,.mk-pill.warn,.badge.warn,.mockflag.warn,.pill.s-warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.pill.crit,.mk-pill.crit,.badge.crit,.mockflag.crit,.pill.s-crit,.pill.s-bad{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.btn,.mk-btn,.linkbtn,.btn-primary,.loginbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;
  border:1px solid var(--line-2);border-radius:99px;font-size:13px;font-weight:500;
  background:var(--surface);color:var(--text);transition:border-color .14s,background .14s}
.btn:hover,.mk-btn:hover,.linkbtn:hover,.btn-primary:hover,.loginbtn:hover{border-color:var(--muted)}
.btn.pri,.mk-btn.pri,.linkbtn.pri,.btn-primary.pri,.loginbtn.pri,.btn.btn-primary,.btn.linkbtn-accent{background:var(--coral);border-color:var(--coral);color:#fff}
.btn.pri:hover,.mk-btn.pri:hover,.linkbtn.pri:hover,.btn-primary.pri:hover,.loginbtn.pri:hover,.btn.btn-primary:hover,.btn.linkbtn-accent:hover{background:var(--coral-hover);border-color:var(--coral-hover)}
.btn.dang,.mk-btn.dang,.linkbtn.dang,.btn-primary.dang,.loginbtn.dang{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 30%,var(--line-2))}
.btn.sm,.mk-btn.sm,.linkbtn.sm,.btn-primary.sm,.loginbtn.sm{padding:4px 11px;font-size:12px}
.btn[disabled],.mk-btn[disabled],.linkbtn[disabled],.btn-primary[disabled],.loginbtn[disabled]{opacity:.4;cursor:not-allowed}
/* ── 카드 ─────────────────────────────────────────────────── */
.panel,.mk-panel,.section,.modal-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.panel>header,.mk-panel>header,.section>header,.modal-panel>header{display:flex;align-items:center;gap:11px;padding:15px 20px 13px}
.panel>header h3,.mk-panel>header h3,.section>header h3,.modal-panel>header h3{font-size:14.5px;letter-spacing:-.005em}
.panel>header .sp,.mk-panel>header .sp,.section>header .sp,.modal-panel>header .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.panel>header+.pbody,.mk-panel>header+.pbody,.section>header+.pbody,.modal-panel>header+.pbody,.panel>header+.mk-body,.panel>header+.tw,.mk-panel>header+.tw,.section>header+.tw,.modal-panel>header+.tw,.panel>header+.mk-tw,.panel>header+.tbl-wrap,.panel>header+div,.mk-panel>header+div,.section>header+div,.modal-panel>header+div{border-top:1px solid var(--line)}
.pbody,.mk-body{padding:18px 20px}
.grid,.mk-grid,.field-grid,.checklist,.summary-grid{display:grid;gap:16px}
.grid>*,.mk-grid>*,.field-grid>*,.checklist>*,.summary-grid>*{min-width:0}
.tw,.mk-tw,.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  text-align:left;font-weight:500;padding:11px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
/* ── 지표 ─────────────────────────────────────────────────── */
.strip,.mk-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.strip>div,.mk-strip>div{padding:16px 18px;border-right:1px solid var(--line);min-width:0}
.strip>div:last-child,.mk-strip>div:last-child{border-right:none}
.strip .v,.mk-strip .v{font-family:var(--mono);font-size:25px;font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;line-height:1.1;color:var(--ink);display:flex;align-items:baseline;gap:4px}
.strip .v small,.mk-strip .v small{font-size:13px;color:var(--muted);letter-spacing:0;font-family:var(--sans)}
.strip .k,.mk-strip .k{margin-top:5px;font-size:12px;color:var(--muted)}
/* ── 파이프라인 레일 ──────────────────────────────────────── */
.pipe,.mk-pipe{display:flex;overflow-x:auto}
.agent,.mk-agent{flex:1 1 0;min-width:112px;padding:16px 14px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.agent:last-child,.mk-agent:last-child{border-right:none}
.agent .seq,.mk-agent .seq{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.08em}
.mono-mark,.mk-mono{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;
  font-weight:600;color:var(--text-2);background:var(--surface)}
.agent.on,.mk-agent.on{background:var(--coral-bg)}
.agent.on .mono-mark,.mk-agent.on .mono-mark,.agent.on .mk-mono{background:var(--coral);border-color:var(--coral);color:#fff}
.agent.done .mono-mark,.mk-agent.done .mono-mark,.agent.done .mk-mono{border-color:color-mix(in srgb,var(--ok) 45%,var(--line-2));color:var(--ok)}
.agent.stale .mono-mark,.mk-agent.stale .mono-mark,.agent.stale .mk-mono{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.agent .an,.mk-agent .an{font-size:13px;font-weight:550;color:var(--ink)}
.agent .at,.mk-agent .at{font-size:11.5px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ── 목록 행 ──────────────────────────────────────────────── */
.prow,.mk-prow{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:14px;
  align-items:center;padding:13px 20px;border-bottom:1px solid var(--line)}
.prow>*,.mk-prow>*{min-width:0}
.prow:last-child,.mk-prow:last-child{border-bottom:none}
.prow:hover,.mk-prow:hover{background:var(--surface-2)}
.prow .rk,.mk-prow .rk{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}
.prow .ti,.mk-prow .ti{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .mt,.mk-prow .mt{font-size:11.5px;color:var(--muted);margin-top:2px}
.score,.mk-score{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:var(--r-sm);border:1px solid var(--line-2);color:var(--text-2)}
.score.hi,.mk-score.hi{color:var(--ok);border-color:transparent;background:var(--ok-bg)}
.score.lo,.mk-score.lo{color:var(--crit);border-color:transparent;background:var(--crit-bg)}
.bar,.mk-bar{height:6px;background:var(--sunken);border-radius:99px;overflow:hidden}
.bar>i,.mk-bar>i{display:block;height:100%;background:var(--text-2);border-radius:99px}
.bar>i.ok,.mk-bar>i.ok,.bar>i.s-ok{background:var(--ok)}
.bar>i.warn,.mk-bar>i.warn,.bar>i.s-warn{background:var(--warn)}
.bar>i.live,.mk-bar>i.live,.bar>i.s-accent,.bar>i.s-live{background:var(--coral)}
.rub,.mk-rub{display:flex;flex-direction:column;gap:11px}
.rubr,.mk-rubr{display:grid;grid-template-columns:96px minmax(0,1fr) 56px;gap:12px;align-items:center}
.rubr>*,.mk-rubr>*{min-width:0}
.rubr .rn,.mk-rubr .rn{font-size:12.5px;color:var(--text-2)}
.rubr .rv,.mk-rubr .rv{font-family:var(--mono);font-size:12px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--text-2)}
/* ── 폼 ───────────────────────────────────────────────────── */
.field,.mk-field,.modal-label,.loginfield{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label,.mk-field label,.modal-label label,.loginfield label{font-size:12.5px;font-weight:550;color:var(--ink)}
.field .hint,.mk-field .hint,.modal-label .hint,.loginfield .hint{font-size:12px;color:var(--muted)}
.input,.mk-input{padding:9px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;width:100%}
.input:focus,.mk-input:focus{outline:2px solid var(--coral);outline-offset:-1px;border-color:transparent}
.seg,.mk-seg{display:flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.seg button,.mk-seg button{flex:1;padding:9px 12px;font-size:13px;border-right:1px solid var(--line);
  background:var(--surface);color:var(--muted)}
.seg button:last-child,.mk-seg button:last-child{border-right:none}
.seg button[aria-pressed="true"],.mk-seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);font-weight:550}
.tabs,.mk-tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;padding:0 20px}
.tabs button,.mk-tabs button{padding:11px 14px;font-size:13px;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"],.mk-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--coral);font-weight:550}
.console,.mk-console{font-family:var(--mono);font-size:11.5px;line-height:1.8;
  background:var(--sunken);color:var(--text-2);border-radius:var(--r-sm);
  padding:14px 16px;overflow-x:auto;white-space:pre}
.console .t,.mk-console .t{color:var(--muted)}
.console .a,.mk-console .a{color:var(--ok)}
.console .w,.mk-console .w{color:var(--warn)}
.console .e,.mk-console .e{color:var(--crit)}
.note,.mk-note,.notice,.cdnote,.wizard-note{border-left:2px solid var(--coral-line);padding:3px 0 3px 14px;
  font-size:13px;color:var(--text-2);max-width:70ch;line-height:1.65}
.note b,.mk-note b,.notice b,.cdnote b,.wizard-note b{color:var(--ink);font-weight:550}
.notes,.mk-notes{display:flex;flex-direction:column;gap:14px}
.chips,.mk-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 10px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--line);font-size:12px;color:var(--text-2)}
.kv,.mk-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px;align-items:baseline}
.kv dt,.mk-kv dt{color:var(--muted);font-size:12.5px;white-space:nowrap}
.kv dd,.mk-kv dd{margin:0;color:var(--text)}
/* ── 스파크라인 ───────────────────────────────────────────── */
.spark,.mk-spark{display:flex;align-items:flex-end;gap:5px;height:52px}
.spark>span,.mk-spark>span{flex:1;background:var(--sunken);border-radius:3px 3px 0 0;position:relative}
.spark>span:last-child,.mk-spark>span:last-child{background:var(--coral)}
.spark-x{display:flex;gap:5px;margin-top:6px}
.spark-x>span{flex:1;text-align:center;font-family:var(--mono);font-size:9.5px;color:var(--muted)}
/* ── 카드 그리드 ──────────────────────────────────────────── */
.cards,.mk-cards,.settings-summary,.metrics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.cards>*,.mk-cards>*,.settings-summary>*,.metrics-grid>*{min-width:0}
.card,.mk-icard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;gap:15px;text-align:left;width:100%;
  transition:border-color .14s}
.card:hover,.mk-icard:hover{border-color:var(--line-2)}
.card .ch,.mk-icard .ch{display:flex;align-items:flex-start;gap:10px}
.card .ch h3,.mk-icard .ch h3{font-size:16px;letter-spacing:-.01em}
.card .ch .slug,.mk-icard .ch .slug{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px}
.card .st2,.mk-icard .st2{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding-top:14px;border-top:1px solid var(--line)}
.card .st2 .v,.mk-icard .st2 .v{font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--ink);display:flex;align-items:baseline;gap:3px}
.card .st2 .v small,.mk-icard .st2 .v small{font-size:11.5px;color:var(--muted);font-family:var(--sans)}
.card .st2 .k,.mk-icard .st2 .k{font-size:11.5px;color:var(--muted);margin-top:2px}
.card.ghost,.mk-icard.ghost{border-style:dashed;align-items:center;justify-content:center;
  color:var(--muted);min-height:190px;gap:7px}
/* ── 로그인 ───────────────────────────────────────────────── */
.auth,.mk-auth{display:grid;grid-template-columns:1.05fr .95fr;min-height:470px}
.auth>*,.mk-auth>*{min-width:0}
.authL,.mk-authL{background:var(--ink);color:#F0EEE6;padding:44px;display:flex;flex-direction:column;gap:28px}
.authL h2,.mk-authL h2{font-family:var(--serif);font-size:29px;line-height:1.32;max-width:17ch;color:#F5F3EC}
.authL p,.mk-authL p{font-size:14px;color:#A8A395;max-width:44ch;line-height:1.65}
.authL .st,.mk-authL .st{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.authL .st .v,.mk-authL .st .v{font-family:var(--mono);font-size:19px;letter-spacing:-.03em;color:#F5F3EC}
.authL .st .k,.mk-authL .st .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#84806F;margin-top:4px}
.authR,.mk-authR{background:var(--surface);display:grid;place-items:center;padding:40px 30px}
.authbox,.mk-authbox{width:100%;max-width:352px}
.authbox h3,.mk-authbox h3{font-size:20px;margin-bottom:6px}
.authbox>p,.mk-authbox>p{font-size:13px;color:var(--muted);margin-bottom:24px}
.msg,.mk-msg,.loginerr,.loginstatus{display:flex;gap:10px;padding:11px 13px;border-radius:var(--r-sm);font-size:13px;
  line-height:1.55;margin-bottom:16px}
.msg.crit,.mk-msg.crit,.loginerr.crit,.loginstatus.crit,.msg.s-crit,.msg.s-bad{background:var(--crit-bg);color:var(--crit)}
.msg.warn,.mk-msg.warn,.loginerr.warn,.loginstatus.warn,.msg.s-warn{background:var(--warn-bg);color:var(--warn)}
.msg b,.mk-msg b,.loginerr b,.loginstatus b{display:block;font-weight:600}
.msg .mi,.mk-msg .mi,.loginerr .mi,.loginstatus .mi{font-size:12px;flex:none;padding-top:1px}
/* ── 설정 콘솔 ────────────────────────────────────────────── */
.ops,.mk-ops,.ops-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:18px;align-items:start}
.ops>*,.mk-ops>*,.ops-layout>*{min-width:0}
.opsnav,.mk-opsnav{display:flex;flex-direction:column;gap:2px}
.opsnav button,.mk-opsnav button{text-align:left;padding:8px 12px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2)}
.opsnav button:hover,.mk-opsnav button:hover{background:var(--surface-2)}
.opsnav button[aria-current="true"],.mk-opsnav button[aria-current="true"]{background:var(--surface);color:var(--ink);font-weight:550}
.opsnav .lab,.mk-opsnav .lab,.opsnav .mk-lab,.opsnav .lbl{padding:14px 12px 6px}
.assets,.mk-assets{display:flex;flex-direction:column}
.asset{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.asset>*{min-width:0}
.asset:last-child{border-bottom:none}
.asset .th{width:46px;height:46px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--mono);font-size:9px;color:var(--muted)}
.asset .nm{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset .mt{font-size:11.5px;color:var(--muted);margin-top:2px}
.split,.mk-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.split>*,.mk-split>*{min-width:0}
.prev,.mk-prev{font-family:var(--serif);font-size:15px;line-height:1.78;color:var(--text-2)}
.prev h4,.mk-prev h4{font-family:var(--serif);font-size:17px;color:var(--ink);margin-bottom:10px;line-height:1.4}
.prev p,.mk-prev p{margin-bottom:13px}
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px}
.frames>*{min-width:0}
.fr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;display:flex;flex-direction:column;gap:11px}
.fr .fh{display:flex;align-items:baseline;gap:8px}
.fr .fh b{font-family:var(--mono);font-size:13px;color:var(--ink)}
.mini{border:1px solid var(--line);border-radius:var(--r-sm);height:98px;display:flex;overflow:hidden}
.mini .mr{background:var(--surface-2);border-right:1px solid var(--line);flex:none}
.mini .mc{flex:1;padding:6px;display:flex;flex-direction:column;gap:5px}
.mini .mb{background:var(--surface-2);border-radius:3px;height:10px}
.mini .mg{display:flex;gap:5px;flex:1}
.mini .mg>span{flex:1;background:var(--surface-2);border-radius:3px}
.fr ul{margin:0;padding-left:16px;font-size:12px;color:var(--muted);line-height:1.7}
.sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:10px}
.sw>*{min-width:0}
.swc{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.swc .swatch{height:52px}
.swc .m{padding:9px 11px;font-size:11px;line-height:1.55}
.swc .m b{display:block;font-size:12px;color:var(--ink);font-family:var(--mono)}
.swc .m span{color:var(--muted)}
/* ── 반응형 ──────────────────────────────────────────────── */

@media (max-width:1100px){
  .split,.mk-split{grid-template-columns:minmax(0,1fr)}
  .ops,.mk-ops,.ops-layout{grid-template-columns:minmax(0,1fr)}
  .opsnav,.mk-opsnav{flex-direction:row;overflow-x:auto;gap:5px;padding-bottom:5px}
  .opsnav .lab,.mk-opsnav .lab,.opsnav .mk-lab,.opsnav .lbl{display:none}
  .opsnav button,.mk-opsnav button{white-space:nowrap}
}

@media (max-width:880px){
  :root{--rail:64px}
  .auth,.mk-auth{grid-template-columns:minmax(0,1fr)}
  .authL,.mk-authL{display:none}
  .prow,.mk-prow{grid-template-columns:minmax(0,1fr) auto;row-gap:5px}
  .prow .rk,.mk-prow .rk{display:none}
}

@media (max-width:620px){
  .canvas,.mk-canvas{padding:16px}
  .ctx,.mk-ctx{padding:0 16px;height:auto;min-height:58px;flex-wrap:wrap;gap:8px;padding-block:11px}
  .crumb .hd,.mk-crumb .hd,.crumb i,.mk-crumb i{display:none}
  .phead h1,.mk-phead h1,.page-head h1{font-size:23px}
  .strip>div,.mk-strip>div{border-right:none;border-bottom:1px solid var(--line)}
  .strip>div:last-child,.mk-strip>div:last-child{border-bottom:none}
  th,td,.pbody,.mk-body,.panel>header,.mk-panel>header,.section>header,.modal-panel>header,.prow,.mk-prow{padding-left:16px;padding-right:16px}
}

@keyframes fade{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   우리 것 — 목업에 없지만 실제 화면에 필요한 것만.
   ══════════════════════════════════════════════════════════════════════════ */

/* CSS 캐스케이드상 UA 의 [hidden] 은 author 규칙에 항상 진다. 실측으로 두 번
   당했다(Clerk 필드·조직 폼) — 여기서 한 번만 못박는다. */
[hidden]{display:none!important}

/* 테마별 보조 토큰 — 두 블록이 **같은 집합**을 정의해야 한 쪽만 고쳐 어긋나지 않는다. */
:root[data-theme="dark"]{--info:#9DB6D4;--info-bg:#232B33;--overlay:rgba(0,0,0,.55)}
:root[data-theme="light"]{--info:#2F5478;--info-bg:#EAEFF6;--overlay:rgba(26,25,21,.45)}

a{color:inherit;text-decoration:none}
a:hover{color:var(--ink)}

/* ★ 목업은 컴포넌트를 **데모 페이지 안의 카드**로 보여준다. 그 컴포넌트가 우리 쪽에서
   **화면 그 자체**인 경우에는 그 차이만큼 조정한다. 지금 그런 것은 로그인·가입뿐이다.
   (목업 .auth 는 .panel 안에 든 카드라 min-height:470px 이지만, 우리 /login/ 은
    페이지 전체다 — 470px 로 두면 아래가 크림색으로 텅 빈다. 실제로 그렇게 보였다.) */
.mk-auth{min-height:100vh}
/* 로그인·가입의 제출 버튼은 폼 폭을 채운다(누를 곳이 분명해야 한다).
   그동안 로그인 화면의 인라인 <style> 에만 있던 규칙이라, 가입 화면은 작은 알약으로
   나왔다 — 같은 규칙을 두 곳에 두지 않고 여기 한 곳에 둔다. */
.loginbtn{width:100%;justify-content:center;padding:11px}
.loginbtn:disabled{opacity:.45;cursor:not-allowed}
a.loginbtn{text-decoration:none}

/* 셸 — mkShell/mkAdoptShell 이 그리는 골격(목업의 .ctx/.canvas/.page 를 그대로 쓴다). */
#shellRoot{display:block}
.mk-ctx .mk-brandmark{display:flex;align-items:center;gap:9px;color:var(--ink)}
.mk-spacer{margin-left:auto}
.mk-who{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2)}
.mk-avatar{width:28px;height:28px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;flex:none;color:var(--text-2)}
/* 실렌더에서 "박민석OWNER" 로 붙어 보였다 — 이름과 역할을 세로로 쌓는다(목업 railfoot 과 동일). */
.mk-who .who{display:flex;flex-direction:column;line-height:1.25}
.mk-who .who small{font-size:10.5px;color:var(--muted);letter-spacing:.06em}

/* 표 안의 행 동작 묶음 — 목업 .btn.sm 규격(맨 텍스트로 보이던 것). */
.userrow-actions,.instancerow-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* 패널 머리 — 우리 section() 헬퍼는 <header><h3> 대신 <h2> 를 쓴다(오래된 골격).
   마크업을 다 고치는 대신 목업 패널 머리와 **같은 규격**을 그 h2 에 준다:
   14.5px 라벨 + 같은 여백 + 내용과의 경계선. 페이지 제목(.phead h1)과 헷갈리지 않게. */
.section>h2{padding:15px 20px 13px;font-size:14.5px;letter-spacing:-.005em;font-weight:600}
.section>h2:has(+.desc){padding-bottom:5px}
.section>.desc{margin:0;padding:0 20px 13px;font-size:12.5px;color:var(--text-2);line-height:1.55}
.section>h2{border-bottom:1px solid var(--line)}
.section>h2:has(+.desc){border-bottom:0}
.section>.desc{border-bottom:1px solid var(--line)}
/* 머리 바로 뒤가 표가 아니라 폼·설명이면 카드 안쪽 여백을 준다(내용이 벽에 붙지 않게). */
.section>h2+*:not(.tw):not(.mk-tw):not(.tbl-wrap):not(.desc),
.section>.desc+*:not(.tw):not(.mk-tw):not(.tbl-wrap){padding:15px 20px}
.userrow-actions button,.instancerow-actions button,.userrow-actions a,.instancerow-actions a{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;font-size:12px;font-weight:500;
  border:1px solid var(--line-2);border-radius:99px;background:var(--surface);
  color:var(--text);font-family:var(--sans);cursor:pointer}
.userrow-actions button:hover,.instancerow-actions button:hover{border-color:var(--muted)}

/* 모달 — 목업에는 오버레이가 없다(패널만 있다). 패널 자체는 목업 .panel 규격. */
.modal-overlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:200;
  align-items:center;justify-content:center;padding:24px;overflow:auto}
.modal-overlay.open{display:flex}
.modal-panel{width:100%;max-width:520px;padding:22px 24px}
.modal-panel h2{margin:0 0 6px;font-family:var(--serif);font-size:21px;letter-spacing:-.01em}
.modal-form{display:block}

/* 폼 라벨 안에 입력이 들어가는 우리 마크업(<label>텍스트<input></label>) 대응. */
.field input,.field select,.field textarea,
.modal-label input,.modal-label select,.modal-label textarea,
.loginfield input,.loginfield select{padding:9px 13px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);
  font:inherit;font-size:13.5px;width:100%;margin-top:6px}
.field input:focus,.modal-label input:focus,.modal-label select:focus,
.loginfield input:focus{outline:2px solid var(--coral);outline-offset:-1px;border-color:transparent}

/* 우리 표는 <table class="tbl"> 이라 목업의 알몸 table 규칙에 얹는다. */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}

/* 목업의 상태 색 체계에 없는 우리 상태 두 가지. */
.pill.s-info,.badge.s-info{background:var(--info-bg);color:var(--info);border-color:transparent}
.pill.s-muted,.badge.s-muted{background:var(--surface-2);color:var(--muted);border-color:transparent}
.mockflag{background:var(--warn-bg);color:var(--warn);border-color:transparent}

/* 그 밖의 잔여 클래스 — 목업 어휘 안에서 최소한으로. */
.nm{font-size:13px;color:var(--ink)}
.mt{font-size:11.5px;color:var(--muted);margin-top:2px}
.val{color:var(--text)}
.sm{font-size:12.5px}
.orgmsg,.wizard-error{margin-top:14px;font-size:13px;color:var(--text-2)}
.wizard-error{color:var(--crit)}
.temppwbox,.code-block{margin-top:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--sunken);font-family:var(--mono);
  font-size:12.5px;color:var(--text);overflow-x:auto}
.settings-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.cselect-menu{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px}
.cselect-item{display:block;padding:8px 11px;border-radius:var(--r-sm);font-size:13px;color:var(--text-2)}
.cselect-item:hover{background:var(--surface-2);color:var(--ink)}

/* ── 미적용 클래스 채우기 ─────────────────────────────────────────────────
   페이지별 클래스 전수 조사에서 "규칙이 하나도 없던" 것들. 목업 어휘 안에서만 준다.
   ※ topbar/topbar-in/tb-brand/tb-spacer/wrap/sep 은 mkAdoptShell 이 화면에서
     제거하므로 규칙을 주지 않는다(안 쓰는 것에 스타일을 주면 죽은 규칙이 는다). */

/* 로그인·가입 폼 */
.pwrow{position:relative}
.pwtoggle{position:absolute;right:10px;top:31px;background:none;border:0;color:var(--muted);
  font-size:12px;cursor:pointer;padding:4px}
.loginpanel,.signupsuccess{display:block}
.hpfield{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.backtologin{display:inline-block;margin-top:14px;font-size:13px;color:var(--coral)}

/* 좌측 설정 목록 — 화면에 따라 항목이 <button>(목업 원본)이거나 <a>(설정 콘솔)다.
   목업 규칙은 button 만 잡으므로, a 로 만든 목록도 같은 규격을 받게 여기서 얹는다.
   (그러지 않으면 설정 콘솔 좌측 메뉴만 아무 스타일 없는 맨 링크로 나온다 — 실렌더 확인) */
.opsnav-top,.opsnav-sub,.opsnav>a,.mk-opsnav>a{display:block;text-align:left;padding:8px 12px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2)}
.opsnav-sub{padding-left:22px;font-size:12.5px}
.opsnav-top:hover,.opsnav-sub:hover,.opsnav>a:hover,.mk-opsnav>a:hover{background:var(--surface-2);color:var(--ink)}
.opsnav-top.active,.opsnav-top[aria-current="page"],.opsnav-sub.active,
.opsnav>a[aria-current="page"],.mk-opsnav>a[aria-current="page"]{
  background:var(--surface);color:var(--ink);font-weight:550}
.opsnav-group summary{list-style:none;cursor:pointer;padding:8px 12px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2);display:flex;align-items:center;justify-content:space-between}
.opsnav-group summary::-webkit-details-marker{display:none}
.opsnav-group summary::after{content:"ƒA";color:var(--muted);transition:transform .12s}
.opsnav-group[open] summary::after{transform:rotate(90deg)}
.opsnav-group summary:hover{background:var(--surface-2);color:var(--ink)}

/* 대시보드·인스턴스 화면의 잔여 요소 */
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{border-left:2px solid var(--coral-line);padding:3px 0 3px 14px;font-size:13px;color:var(--text-2)}
.alert.warn{border-left-color:var(--warn)} .alert.crit{border-left-color:var(--crit)}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:300;
  background:var(--ink);color:var(--surface);padding:11px 18px;border-radius:99px;font-size:13px}
.notfound{padding:40px 0;text-align:center;color:var(--muted)}
.readiness-grid,.metric{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
.foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.zero{padding:26px 0;text-align:center;color:var(--muted);font-size:13px}
.bullets{margin:0;padding-left:17px;font-size:13px;color:var(--text-2);line-height:1.75}
.kv-k{color:var(--muted);font-size:12.5px} .kv-v{color:var(--text)}
.tabstrip,.tab{display:inline-flex}
.tabstrip{gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{padding:11px 14px;font-size:13px;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;background:none;cursor:pointer}
.tab.active,.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--coral);font-weight:550}

/* 마법사(인스턴스 만들기) */
.wizard-body{padding:18px 20px} .wizard-actbar{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}

/* 워크플로우·핸드오프(관제 대시보드) */
.wf{display:flex;gap:2px;overflow-x:auto} .wf-step{flex:1;min-width:96px}
.hoff{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.hoff:last-child{border-bottom:none}
.hoff-ic{font-family:var(--mono);font-size:11px;color:var(--muted)}
.hoff-kind{font-weight:550;color:var(--ink)} .hoff-sum{color:var(--text-2)}
.hoff-body{min-width:0}
.hoff-route,.hoff-arr{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.sessionstrip{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2)}
.agent-role{font-size:11.5px;color:var(--muted)}
.agent-cfg-pane{display:block}
.ph-spacer{flex:1}
.cselect{position:relative;display:inline-block}

/* 카드 지표 칸의 **텍스트** 값 — 계기 활자를 쓰지 않는다(목업: 고정폭은 숫자·시각·식별자에만). */
.card .st2 .v.tx,.mk-icard .st2 .v.tx{font-family:var(--sans);font-size:14px;letter-spacing:0;line-height:1.45}

/* 표 안의 드롭다운(인스턴스 관리 "더보기") — 목업에는 이 컴포넌트가 없다.
   브라우저 기본 select 가 그대로 나오면 옆의 알약 버튼들과 결이 어긋나므로,
   같은 규격(.btn.sm)에 맞춰 준다. 값을 따로 정하지 않고 버튼 토큰을 그대로 쓴다. */
.tw select,.tbl select,.mk-tw select{
  font-family:var(--sans);font-size:12px;color:var(--text);
  background:var(--surface);border:1px solid var(--line-2);border-radius:99px;
  padding:5px 26px 5px 12px;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 10px) 52%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
.tw select:hover,.tbl select:hover,.mk-tw select:hover{border-color:var(--coral);color:var(--coral)}

/* 작업 열 — 버튼이 한 줄에 흐르다 모자라면 접힌다(세로로 길게 늘어지지 않게). */
.instancerow-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* 패널 머리 — 우리 section() 헬퍼는 <header><h3> 대신 <h2> 를 쓴다(오래된 골격).
   마크업을 다 고치는 대신 목업 패널 머리와 **같은 규격**을 그 h2 에 준다:
   14.5px 라벨 + 같은 여백 + 내용과의 경계선. 페이지 제목(.phead h1)과 헷갈리지 않게. */
.section>h2{padding:15px 20px 13px;font-size:14.5px;letter-spacing:-.005em;font-weight:600}
.section>h2:has(+.desc){padding-bottom:5px}
.section>.desc{margin:0;padding:0 20px 13px;font-size:12.5px;color:var(--text-2);line-height:1.55}
.section>h2{border-bottom:1px solid var(--line)}
.section>h2:has(+.desc){border-bottom:0}
.section>.desc{border-bottom:1px solid var(--line)}
/* 머리 바로 뒤가 표가 아니라 폼·설명이면 카드 안쪽 여백을 준다(내용이 벽에 붙지 않게). */
.section>h2+*:not(.tw):not(.mk-tw):not(.tbl-wrap):not(.desc),
.section>.desc+*:not(.tw):not(.mk-tw):not(.tbl-wrap){padding:15px 20px}

/* 마지막 잔여 — 화면에서 실제로 쓰는데 규칙이 없던 것들. */
.btn-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.muted{color:var(--muted)}
.sesswho{font-size:12.5px;color:var(--text-2)}
.sesslogout{padding:4px 11px;font-size:12px}
.simple-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ipp-mpane,.ipp-tabpane{display:block;min-width:0}

@media (max-width:880px){
  .settings-toolbar{flex-direction:column;align-items:stretch}
}


/* ==========================================================================
   우리 컴포넌트 복원 — 목업이 정의하지 않은 클래스의 규칙.

   2026-08-02 대표 신고: "나머지 3개 페이지는 안 되거나 엉망이 되었어."
   원인: 오늘 아침 목업 CSS 를 정본으로 이식하면서, 목업에 없는 우리 컴포넌트의
   규칙이 통째로 사라졌다. 그때 나는 "규칙이 있는가"만 검사하고(23/23 초록)
   실제로 렌더해보지 않아 못 봤다. 실제로 무너진 것들 —
     .grid/.summary-grid  열 정의 유실  -> 카드가 1열로 무너짐
     .modal-overlay       display:none 유실 -> 모달이 항상 열린 상태
     .toast               opacity:0 유실  -> 빈 토스트가 화면에 상주
     .cselect-menu        position/display 유실 -> 드롭다운이 항상 펼쳐짐
     .alert/.logs/.wf/.modal-form/.envopts/.tabs ...

   원칙(이번에 바로잡은 것):
     · 목업이 아는 클래스  -> 목업 규칙이 정본. 여기서 건드리지 않는다.
     · 목업이 모르는 클래스 -> 우리 것이므로 이전 규칙을 그대로 되살린다.
   그래서 목업 톤은 그대로이면서 우리 화면의 동작과 배치가 살아난다.
   아래 블록은 이전 base.css(2d4f604^)에서 기계로 뽑았다.
   ========================================================================== */
.cselect{position:relative;flex:none}
.cselect-btn{display:flex;align-items:center;gap:9px;background:var(--raise);border:1px solid var(--line);
  border-radius:11px;padding:6px 11px;cursor:pointer;min-width:236px;text-align:left;transition:border-color .12s}
.cselect-btn:hover{border-color:var(--accent)}
.cselect-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 대표 지시(2026-08-02): "현재 인스턴스" 글귀를 위가 아니라 **왼쪽에 스티커**로 —
   두 줄이던 버튼이 한 줄이 되어 높이가 준다. */
.cselect-btn .lbl{flex:0 0 auto;font-size:10.5px;font-weight:650;letter-spacing:.04em;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
.cselect-btn .val{flex:1 1 auto;min-width:0;font-weight:670;font-size:14px;display:flex;
  align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cselect-btn .cid{margin-left:auto;color:var(--ink-faint);font-size:16px;line-height:1}
.cselect-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--raise);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 8px 30px var(--overlay);padding:6px;z-index:50;min-width:300px;display:none}
.cselect-menu.open{display:block}
.cselect-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:11px 12px;
  cursor:pointer}
.cselect-item:hover,.cselect-item:focus-visible{background:var(--surface-2);outline:none}
.cselect-item.active{background:var(--accent-bg)}
/* 이름 한 줄, 그 아래 주제·상태 한 줄 — 이 두 규칙이 빠져 있어 붙어 나왔다. */
.cselect-item .nm{font-weight:670;font-size:14.5px;display:flex;align-items:center;gap:8px;margin-bottom:3px}
.cselect-item .mt{font-size:12px;color:var(--ink-soft);display:flex;gap:8px;flex-wrap:wrap}
.cselect-item .mt span::after{content:"·";margin-left:8px;color:var(--ink-faint)}
.cselect-item .mt span:last-child::after{content:""}
.page-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{margin:0;font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-0.01em;
  line-height:1.28;display:flex;align-items:center;gap:12px}
.ph-spacer{flex:1}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:660;letter-spacing:.03em;
  text-transform:uppercase;padding:3px 9px;border-radius:100px;white-space:nowrap;line-height:1.5}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.s-ok{color:var(--success);background:var(--success-bg)}
.badge.s-warn{color:var(--warning);background:var(--warning-bg)}
.badge.s-muted{color:var(--disabled);background:var(--disabled-bg)}
.badge.s-accent{color:var(--accent-ink);background:var(--accent-bg)}
.badge.s-info{color:var(--info);background:var(--info-bg)}
.badge.lg{font-size:12px;padding:5px 12px}
.summary-grid{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));margin-bottom:16px}
.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  box-shadow:var(--shadow);margin-top:16px}
.section > h2{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-0.01em}
.section > .desc{margin:0 0 15px;font-size:13px;color:var(--ink-soft)}
.desc{font-size:13px;color:var(--ink-soft)}
.agent-role{font-family:var(--sans);font-size:11px;color:var(--ink-faint);margin-top:1px}
.hoff{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.hoff:last-child{border-bottom:none}
.hoff-ic{font-size:15px;line-height:1.4}
.hoff-body{flex:1;min-width:0}
.hoff-route{font-family:var(--sans);font-size:13px;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hoff-arr{color:var(--accent);font-weight:700}
.hoff-kind{font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--accent-ink);background:var(--accent-bg);padding:1px 7px;border-radius:5px}
.hoff-sum{font-family:var(--sans);font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.45}
.hoff-at{font-family:var(--sans);font-size:11px;color:var(--ink-faint);white-space:nowrap}
.wf{display:flex;flex-wrap:wrap;gap:8px}
.wf-step{flex:1 1 130px;min-width:130px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px}
.wf-step .n{font-size:13px;font-weight:640;margin-bottom:8px}
.wf-step .s{font-size:10.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase}
.wf-step.s-ok{border-color:color-mix(in srgb,var(--success) 40%,var(--line))}
.wf-step.s-ok .s{color:var(--success)}
.wf-step.s-warn .s{color:var(--warning)}
.wf-step.s-muted .s{color:var(--disabled)}
.wf-step.s-accent .s{color:var(--accent-ink)}
.wf-step.s-info .s{color:var(--info)}
.alerts{display:flex;flex-direction:column;gap:9px}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:11px;font-size:13.5px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
table.tbl th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:640;padding:0 14px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.tbl td:first-child,table.tbl th:first-child{font-weight:620}
.linkbtn{background:none;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:5px 13px;font-size:12.5px;font-weight:620;
  cursor:pointer;color:var(--accent-ink);transition:border-color .12s}
.linkbtn:hover{border-color:var(--accent)}
.linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.linkbtn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.linkbtn-accent:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.sessionstrip{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.sessionstrip .sesswho{font-weight:620;color:var(--ink)}
.sessionstrip .sesslogout{background:none;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:4px 12px;
  font-size:12px;font-weight:620;cursor:pointer;color:var(--accent-ink);transition:border-color .12s}
.sessionstrip .sesslogout:hover{border-color:var(--accent)}
.tab{background:none;border:0;border-radius:8px 8px 0 0;padding:9px 14px;font-size:13.5px;font-weight:620;cursor:pointer;
  color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-3px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
ul.bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
ul.bullets li{padding-left:18px;position:relative;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
ul.bullets li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.7}
ul.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
ul.checklist li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft)}
ul.checklist input[type="checkbox"]{width:16px;height:16px;flex:none;accent-color:var(--ink-faint);cursor:not-allowed}
.actbar{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.btn-disabled{background:var(--disabled-bg);color:var(--disabled);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 14px;font-size:13px;font-weight:620;cursor:not-allowed}
.notice{margin-top:12px;background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;
  padding:11px 14px;font-size:12.5px;color:var(--ink-soft)}
.notice b{color:var(--ink)}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:18px;background:var(--ink);color:var(--surface);
  padding:10px 18px;border-radius:100px;font-size:13px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.25);
  z-index:100;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.mockflag{display:inline-block;font-size:10px;font-weight:660;letter-spacing:.06em;text-transform:uppercase;
  color:var(--info);background:var(--info-bg);border-radius:5px;padding:2px 7px;margin-left:8px;vertical-align:middle}
.logs{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}
.logs .lt{color:var(--ink-faint);margin-right:10px}
.notfound{text-align:center;padding:70px 20px;color:var(--ink-soft)}
.notfound h1{font-size:22px;color:var(--ink);margin:0 0 8px}
.notfound a{color:var(--accent-ink);border-bottom:1px solid var(--accent)}
footer.foot{max-width:1160px;margin:0 auto;padding:8px 22px 40px;color:var(--ink-faint);font-size:11.5px}
.envselect{display:flex;align-items:center;gap:8px;flex:none}
.envlabel{font-size:10px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.envopts{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.envopt{display:inline-block;padding:5px 10px;border-radius:7px;font-size:11.5px;font-weight:650;color:var(--ink-soft);
  letter-spacing:.02em}
.envopt:hover{color:var(--ink)}
.envopt.active{background:var(--raise);color:var(--accent-ink);box-shadow:var(--shadow)}
.ops-layout{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start;margin-top:16px}
.ops-layout > *{min-width:0}
.opsnav-top{display:block;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:640;color:var(--ink-soft)}
.opsnav-top:hover{background:var(--surface-2);color:var(--ink)}
.opsnav-top.active,.opsnav-top[aria-current="page"]{background:var(--accent-bg);color:var(--accent-ink)}
.opsnav-group{border-radius:9px}
.opsnav-group summary{list-style:none;cursor:pointer;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:640;
  color:var(--ink-soft);display:flex;align-items:center;justify-content:space-between}
.opsnav-group summary::-webkit-details-marker{display:none}
.opsnav-group summary::after{content:"\203A";color:var(--ink-faint);transition:transform .12s}
.opsnav-group[open] summary::after{transform:rotate(90deg)}
.opsnav-group summary:hover{background:var(--surface-2);color:var(--ink)}
.opsnav-group[open] summary{color:var(--ink)}
.opsnav-sub{display:block;padding:8px 11px 8px 22px;border-radius:8px;font-size:13px;color:var(--ink-soft)}
.opsnav-sub:hover{background:var(--surface-2);color:var(--ink)}
.opsnav-sub.active{background:var(--accent-bg);color:var(--accent-ink);font-weight:650}
.readiness-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.modal-overlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:200;align-items:center;
  justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-panel{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);max-width:460px;width:100%;max-height:90vh;overflow-y:auto}
.modal-panel h2{margin:0 0 14px;font-size:17px;font-weight:730}
.modal-panel h3{margin:14px 0 8px;font-size:13.5px;font-weight:680}
.modal-form{display:flex;flex-direction:column;gap:12px}
.modal-label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:640;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-faint)}
.modal-label input,.modal-label textarea{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;width:100%}
.modal-label input:disabled{color:var(--ink-soft);cursor:not-allowed}
.modal-label input:focus,.modal-label textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.modal-confirm{margin-top:6px}
.mk-ctx{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 26px;height:58px}
.mk-brandmark{display:flex;align-items:center;color:var(--ink);flex:none;text-decoration:none}
.mk-brandmark svg{width:20px;height:20px}
.mk-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-faint);min-width:0}
.mk-crumb b{color:var(--ink);font-weight:550}
.mk-crumb i{font-style:normal;opacity:.4}
.mk-crumb a{color:inherit;text-decoration:none}
.mk-crumb a:hover{color:var(--ink)}
.mk-spacer{margin-left:auto}
.mk-who{display:flex;align-items:center;gap:8px;min-width:0}
.mk-who #mkWho{font-size:12.5px;color:var(--ink);white-space:nowrap}
.mk-who small{font-size:10px;color:var(--ink-faint);letter-spacing:.06em;white-space:nowrap}
.mk-avatar{width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;flex:none;color:var(--ink-soft)}
.mk-instsw{display:flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);font-size:13px;background:var(--surface);cursor:pointer;color:var(--ink)}
.mk-instsw:hover{border-color:var(--ink-faint)}
.mk-canvas{padding:26px}
.mk-page{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.mk-phead{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.mk-phead h1{margin:0;font-family:var(--serif);font-size:30px;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.mk-phead p{margin:6px 0 0;color:var(--ink-soft);font-size:14px;max-width:62ch;line-height:1.65}
.mk-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;background:var(--line-strong)}
.mk-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:500;border:1px solid var(--line-strong);color:var(--ink-soft);white-space:nowrap}
.mk-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);font-size:13px;font-weight:500;background:var(--surface);color:var(--ink);
  cursor:pointer;text-decoration:none;transition:border-color .14s,background .14s}
.mk-btn:hover{border-color:var(--ink-faint)}
.mk-btn[disabled]{opacity:.4;cursor:not-allowed}
.mk-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.mk-panel>header{display:flex;align-items:center;gap:11px;padding:15px 20px 13px}
.mk-panel>header h3{margin:0;font-size:14.5px;letter-spacing:-.005em;color:var(--ink);font-weight:600}
.mk-panel>header+*{border-top:1px solid var(--line)}
.mk-body{padding:18px 20px}
.mk-grid{display:grid;gap:16px}
.mk-grid>*{min-width:0}
.mk-tw{overflow-x:auto}
.mk-tw table{width:100%;border-collapse:collapse;font-size:13.5px}
.mk-tw th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  text-align:left;font-weight:500;padding:11px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
.mk-tw td{padding:13px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.mk-tw tbody tr:last-child td{border-bottom:none}
.mk-tw tbody tr:hover{background:var(--surface-2)}
.mk-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mk-strip>div{padding:16px 18px;border-right:1px solid var(--line);min-width:0}
.mk-strip>div:last-child{border-right:none}
.mk-pipe{display:flex;overflow-x:auto}
.mk-agent{flex:1 1 0;min-width:112px;padding:16px 14px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.mk-agent:last-child{border-right:none}
.mk-mono{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--ink-soft);background:var(--surface)}
.mk-prow{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:14px;align-items:center;
  padding:13px 20px;border-bottom:1px solid var(--line);cursor:pointer}
.mk-prow>*{min-width:0}
.mk-prow:last-child{border-bottom:none}
.mk-prow:hover{background:var(--surface-2)}
.mk-score{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;padding:2px 8px;
  border-radius:var(--r-sm);border:1px solid var(--line-strong);color:var(--ink-soft)}
.mk-bar{height:6px;background:var(--sunken);border-radius:var(--r-pill);overflow:hidden}
.mk-bar>i{display:block;height:100%;background:var(--ink-soft);border-radius:var(--r-pill)}
.mk-rub{display:flex;flex-direction:column;gap:11px}
.mk-rubr{display:grid;grid-template-columns:96px minmax(0,1fr) 56px;gap:12px;align-items:center}
.mk-rubr>*{min-width:0}
.mk-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.mk-field label{font-size:12.5px;font-weight:550;color:var(--ink)}
.mk-input{padding:9px 13px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;width:100%}
.mk-input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.mk-seg{display:flex;border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden}
.mk-seg button{flex:1;padding:9px 12px;font-size:13px;border:0;border-right:1px solid var(--line);
  background:var(--surface);color:var(--ink-faint);cursor:pointer}
.mk-seg button:last-child{border-right:none}
.mk-seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);font-weight:550}
.mk-tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;padding:0 20px}
.mk-tabs button{padding:11px 14px;font-size:13px;color:var(--ink-faint);white-space:nowrap;border:0;
  background:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.mk-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:550}
.mk-console{font-family:var(--mono);font-size:11.5px;line-height:1.8;background:var(--sunken);
  color:var(--ink-soft);border-radius:var(--r-sm);padding:14px 16px;overflow-x:auto;white-space:pre}
.mk-note{border-left:2px solid var(--accent-bg);padding:3px 0 3px 14px;font-size:13px;
  color:var(--ink-soft);max-width:70ch;line-height:1.65}
.mk-note b{color:var(--ink);font-weight:550}
.mk-notes{display:flex;flex-direction:column;gap:14px}
.mk-chips{display:flex;flex-wrap:wrap;gap:6px}
.mk-chip{padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-2);
  border:1px solid var(--line);font-size:12px;color:var(--ink-soft)}
.mk-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px;align-items:baseline;margin:0}
.mk-kv dt{color:var(--ink-faint);font-size:12.5px;white-space:nowrap}
.mk-kv dd{margin:0;color:var(--ink)}
.mk-lab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.mk-num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mk-sub{color:var(--ink-faint);font-size:12.5px}
.mk-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.mk-cards>*{min-width:0}
.mk-icard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:15px;text-align:left;width:100%;cursor:pointer;
  text-decoration:none;color:inherit;transition:border-color .14s}
.mk-icard:hover{border-color:var(--line-strong)}
.mk-auth{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.mk-auth>*{min-width:0}
.mk-authL{background:var(--ink);color:#F0EEE6;padding:44px;display:flex;flex-direction:column;gap:28px}
.mk-authL h2{margin:0;font-family:var(--serif);font-size:29px;line-height:1.32;max-width:17ch;color:#F5F3EC}
.mk-authL p{margin:0;font-size:14px;color:#A8A395;max-width:44ch;line-height:1.65}
.mk-authR{background:var(--surface);display:grid;place-items:center;padding:40px 30px}
.mk-authbox{width:100%;max-width:352px}
.mk-authbox h3{margin:0 0 6px;font-size:20px;color:var(--ink);font-weight:600}
.mk-authbox>p{margin:0 0 24px;font-size:13px;color:var(--ink-faint)}
.mk-msg{display:flex;gap:10px;padding:11px 13px;border-radius:var(--r-sm);font-size:13px;
  line-height:1.55;margin-bottom:16px}
.mk-msg b{display:block;font-weight:600}
.mk-ops{display:grid;grid-template-columns:212px minmax(0,1fr);gap:18px;align-items:start}
.mk-ops>*{min-width:0}
.mk-opsnav{display:flex;flex-direction:column;gap:2px}
.mk-opsnav button,.mk-opsnav a{text-align:left;padding:8px 12px;border:0;background:none;
  border-radius:var(--r-sm);font-size:13px;color:var(--ink-soft);cursor:pointer;text-decoration:none;display:block}
.mk-opsnav button:hover,.mk-opsnav a:hover{background:var(--surface-2)}
.mk-opsnav button[aria-current="true"],.mk-opsnav a[aria-current="page"]{background:var(--surface);
  color:var(--ink);font-weight:550}
.mk-opsnav .mk-lab{padding:14px 12px 6px}
.mk-assets{display:flex;flex-direction:column}
.mk-asset{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line)}
.mk-asset>*{min-width:0}
.mk-asset:last-child{border-bottom:none}
.mk-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.mk-split>*{min-width:0}
.mk-prev{font-family:var(--serif);font-size:15px;line-height:1.78;color:var(--ink-soft)}
.mk-prev h4{margin:0 0 10px;font-family:var(--serif);font-size:17px;color:var(--ink);line-height:1.4}
.mk-prev p{margin:0 0 13px}
.mk-spark{display:flex;align-items:flex-end;gap:5px;height:52px}
.mk-spark>span{flex:1;background:var(--sunken);border-radius:3px 3px 0 0}
.mk-spark>span:last-child{background:var(--accent)}
.mk-sparkx{display:flex;gap:5px;margin-top:6px}
.mk-sparkx>span{flex:1;text-align:center;font-family:var(--mono);font-size:9.5px;color:var(--ink-faint)}
/* 표는 스크롤만 담당한다 — 카드(면·테두리)는 **패널이 만든다**.
   옛 규칙은 표 자체를 카드로 만들었는데, 목업 이후 표가 패널 안에 들어가면서
   상자가 두 겹으로 겹쳐 보였다(대표 지적 "파이프라인과 발행 카드가 겹쳐있다"). */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
table.tbl th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  text-align:left;font-weight:640;padding:13px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}
table.tbl td{padding:13px 20px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td:first-child,table.tbl th:first-child{font-weight:620}
.linkbtn,button.linkbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);
  color:var(--ink);font-size:13px;font-weight:640;font-family:var(--sans);cursor:pointer}
.linkbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-primary{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;
  border:1px solid var(--accent);border-radius:var(--r-pill);background:var(--accent);color:#fff;
  font-size:13px;font-weight:640;font-family:var(--sans);cursor:pointer}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.userrow-actions{display:flex;flex-wrap:wrap;gap:6px}
.userrow-actions button{padding:5px 11px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink-soft);font-size:12px;font-weight:620;
  font-family:var(--sans);cursor:pointer}
.userrow-actions button:hover{border-color:var(--accent);color:var(--accent-ink)}
.badge{padding:3px 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:640;letter-spacing:0}
.ops-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:18px;align-items:start}
.ops-layout>*{min-width:0}
.opsnav-top{padding:8px 11px;border-radius:var(--r-sm);font-size:13px;font-weight:620}
.modal-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:none}
.modal-panel h2{margin:0 0 6px;font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.01em}
.modal-label{display:block;font-size:12.5px;font-weight:640;color:var(--ink-soft);margin-bottom:12px}
.modal-label input,.modal-label select{width:100%;margin-top:6px;padding:9px 13px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink);font-size:13.5px;font-family:var(--sans)}
.modal-label input:focus,.modal-label select:focus{outline:none;border-color:var(--accent)}
.actbar{display:flex;gap:9px;align-items:center;margin-top:18px}
.desc,.settings-toolbar .desc{color:var(--ink-faint);font-size:13px;line-height:1.6}
.settings-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.orgmsg{margin-top:14px;font-size:13px;color:var(--ink-soft)}
.temppwbox{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.settings-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:none}
.notice,.cdnote,.wizard-note{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;font-size:13px;line-height:1.65;color:var(--ink-soft);
  /* 목업 .note 는 문단 인용이라 읽기 폭(70ch)을 두지만, 이것들은 화면 상단의 **상태 배너**다.
     폭이 갇히면 한 줄이면 될 문장이 두 줄로 접혀 찌부돼 보인다(대표 지적, 실측 573px). */
  max-width:none}
/* 상태 배너 — pill(LIVE/OFFLINE)과 문장이 한 줄에 서고, 좁아지면 자연스럽게 접힌다. */
.notice{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.notice>b:first-child{flex:0 0 auto}
.mockflag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:640;background:var(--warning-bg);color:var(--warning)}
.kv-k,.lbl{font-size:11px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.kv-v,.val{color:var(--ink)}
.cid{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint)}
.tab{padding:9px 14px;font-size:13px;font-weight:620;color:var(--ink-faint);
  border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0;
  cursor:pointer;white-space:nowrap;font-family:var(--sans)}
.tab:hover{color:var(--ink)}
.tab.active,.tab[aria-current="page"],.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.instancerow-actions{display:flex;flex-wrap:wrap;gap:6px}
.instancerow-actions button{padding:5px 11px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);background:var(--surface);color:var(--ink-soft);font-size:12px;
  font-weight:620;font-family:var(--sans);cursor:pointer}
.instancerow-actions button:hover{border-color:var(--accent);color:var(--accent-ink)}
.cselect-menu{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:none;padding:6px}



/* ── 목업 03 · 인스턴스 관리 표 ─────────────────────────────────────────── */
.instname{font-weight:550;color:var(--ink)}
.instslug{font-size:11px;color:var(--muted)}
.instmeta{font-size:11.5px;color:var(--muted);margin-top:3px}
.rowacts{justify-content:flex-end;gap:7px;flex-wrap:nowrap}
.tbl td:last-child,.mk-tw td:last-child{text-align:right}

/* ⋯ 더보기 — 목업의 "더보기 메뉴"를 그 자리에서 여는 작은 팝오버로.
   예전에는 <select> 라 "골라도 반영이 안 된다"는 지적이 있었다. 버튼 목록이면
   한 번의 클릭으로 끝나므로 그 문제가 구조적으로 사라진다. */
.rowmenu{position:relative;display:inline-block}
.rowmenu-pop{position:fixed;z-index:60;min-width:184px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px;
  display:flex;flex-direction:column;gap:2px;text-align:left;
  box-shadow:0 8px 30px color-mix(in srgb,var(--ink) 12%,transparent)}
.rowmenu-pop[hidden]{display:none}
.rowmenu-pop button{text-align:left;padding:8px 12px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2);white-space:nowrap}
.rowmenu-pop button:hover{background:var(--surface-2);color:var(--ink)}


/* 라이브 콘솔 — 목업 .console 은 pre 서식이지만 우리는 줄마다 <div>를 넣는다. */


/* ── 인스턴스 대시보드 배치(공용 렌더러 전용) ────────────────────────────
   대표 지시(2026-08-02): 목록과 뷰어는 좌우로, 단 **카드끼리 떨어져서**.
   좌우 배치는 목업 .split(gap 16) 이 담당하고, 세로 간격은 .stack 이 만든다. */
/* 인스턴스 전환기 — 버튼 규격은 **옛 컨테이너 선택기 규칙이 정본**이다(위 복원 블록의
   .cselect-btn). 여기서는 셸 안에 놓이며 달라지는 것만 둔다: 드롭다운을 오른쪽 기준으로
   띄우고(컨텍스트 바 우측이라), 항목 메타를 한 줄로 잇는다. */
.cselect-menu{left:auto;right:0;min-width:300px}
.cselect-item .mt{align-items:baseline}
@media (max-width:880px){
  .cselect-btn{min-width:0}
  .cselect-btn .lbl{display:none}
  .cselect-menu{min-width:220px}
}

/* 컨텍스트 바의 **내용**을 캔버스와 같은 폭에 세운다(대표 지시 2026-08-02).
   배경·아래 경계선은 화면 전폭을 그대로 두고(sticky 바가 잘려 보이면 안 된다),
   좌우 여백만 캔버스가 만드는 값과 같게 계산한다:
     캔버스 = padding 26 + .page(max-width 1200, margin auto)
     → 콘텐츠 왼쪽 = max(26px, (100% - 1200px)/2)
   같은 수치를 두 곳에 적지 않도록 폭/여백은 변수로 둔다. */
:root{--shell-max:1200px;--shell-pad:26px}
.mk-page,.page{max-width:var(--shell-max)}
.mk-canvas,.canvas{padding:var(--shell-pad)}
.mk-ctx,.ctx{padding-inline:max(var(--shell-pad),calc((100% - var(--shell-max))/2))}
@media (max-width:880px){:root{--shell-pad:16px}}

/* 두 패널을 나란히(목업 ⑥⑦ — 품질 카이젠|실측 반응, 수집원|알림) */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.pair>*{min-width:0;margin:0}