/* NS Control Tower — 토큰·테마·카드 스타일은 아티팩트 control_tower.html 에서 이식 (라이트/다크 유지) */
:root{
  --bg:#F1F2ED; --surface:#FBFBF8; --surface2:#EBEDE4; --line:#D8DACE;
  --ink:#20241F; --muted:#5D6459; --faint:#82897C;
  --accent:#2E6B4F; --amber:#8A5E0D;
  --ok:#276A44; --ok-bg:#DFEDE4; --warn:#8A5E0D; --warn-bg:#F3E7CC; --crit:#A33A28; --crit-bg:#F5DFD9;
  --chip:#E5E7DC;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141A16; --surface:#1C2420; --surface2:#242E28; --line:#33413B;
    --ink:#E8E6DD; --muted:#A7B0A2; --faint:#78857A;
    --accent:#8BCBA6; --amber:#DCAD55;
    --ok:#8BCBA6; --ok-bg:#1E3328; --warn:#DCAD55; --warn-bg:#342B17; --crit:#E5816A; --crit-bg:#3B221C;
    --chip:#2B352F;
  }
}
:root[data-theme="dark"]{
  --bg:#141A16; --surface:#1C2420; --surface2:#242E28; --line:#33413B;
  --ink:#E8E6DD; --muted:#A7B0A2; --faint:#78857A;
  --accent:#8BCBA6; --amber:#DCAD55;
  --ok:#8BCBA6; --ok-bg:#1E3328; --warn:#DCAD55; --warn-bg:#342B17; --crit:#E5816A; --crit-bg:#3B221C;
  --chip:#2B352F;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15.5px/1.6 "IBM Plex Sans KR",system-ui,sans-serif;padding-bottom:56px}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}
[hidden]{display:none !important}
a{color:var(--accent)}
code{font-family:"IBM Plex Mono",monospace;font-size:12.5px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 로그인 */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px 28px;max-width:380px;width:100%;text-align:center}
.loginbox img{border-radius:14px}
.loginbox h1{font:700 24px/1.2 "Gowun Batang",serif;margin:14px 0 6px}
.loginbox p{font-size:14px;margin:0 0 18px}
.gsi{display:flex;justify-content:center;min-height:44px}
.loginmsg{min-height:1.4em;font-size:13px;color:var(--crit);margin:14px 0 0}

/* 헤더 */
header{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--line)}
.mast{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 0 8px}
h1{font:700 22px/1.2 "Gowun Batang",serif;margin:0}
.pills{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--surface2);font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.pill.live .dot{background:var(--ok)} .pill.err .dot{background:var(--crit)} .pill.warn .dot{background:var(--warn)}
.iconbtn{font:500 12px "IBM Plex Sans KR",sans-serif;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer}
.iconbtn:hover{color:var(--accent);border-color:var(--accent)}
nav{display:flex;gap:2px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:4px 12px;border-radius:999px;white-space:nowrap}
nav a:hover{background:var(--surface2);color:var(--accent)}

/* 섹션 */
main section{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 18px;margin-top:16px;scroll-margin-top:104px}
h2{font:700 18px "Gowun Batang",serif;margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
h2 .sub,h3 .sub{font:400 12.5px "IBM Plex Sans KR",sans-serif;color:var(--muted)}
h2 a.open,h3 a.open{margin-left:auto;font:500 12px "IBM Plex Sans KR",sans-serif;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:2px 11px;background:var(--surface2);color:var(--muted)}
h2 a.open:hover,h3 a.open:hover{color:var(--accent);border-color:var(--accent)}
h3{font:700 14.5px "IBM Plex Sans KR",sans-serif;margin:20px 0 2px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.chip{display:inline-block;border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:500;background:var(--chip);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.crit{background:var(--crit-bg);color:var(--crit)}
.chip.src{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.04em}
.chip.big{font-size:13.5px;padding:3px 12px;font-weight:700}
.note{font-size:12.5px;color:var(--muted);margin-top:10px}
.note b{color:var(--ink)}
.msg{font-size:12.5px;padding:8px 12px;border-radius:8px;background:var(--warn-bg);color:var(--warn);margin-top:8px;display:none}
.msg.crit{background:var(--crit-bg);color:var(--crit)}
.msg.show{display:block}
.empty{font-size:12.5px;color:var(--muted);margin-top:4px}

/* 오늘 */
.statusline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 6px;font-size:14.5px}
.statusline .when{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}
.statusline .sep{color:var(--faint)}
.todaygrid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:10px}
@media(max-width:820px){.todaygrid{grid-template-columns:1fr}}
ul.todo{list-style:none;margin:0;padding:0}
ul.todo li{display:flex;align-items:baseline;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:14px}
ul.todo li:last-child{border-bottom:none}
ul.todo .chip{flex:none}
.nextcard{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.nextcard .sub{font-size:12px;color:var(--muted)}
.nextcard .dday{font:600 34px/1.1 "IBM Plex Mono",monospace;color:var(--accent)}
.nextcard .who{font-weight:700;font-size:16px;margin-top:4px;overflow-wrap:anywhere}
.nextcard .det{font-size:13px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.nextcard .rbline{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:13.5px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.nextcard .rbline .v{font-family:"IBM Plex Mono",monospace;color:var(--amber);font-weight:600}

/* 표 */
.tblwrap{overflow-x:auto;margin-top:8px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{font-size:11.5px;letter-spacing:.05em;color:var(--muted);text-align:left;font-weight:500;padding:5px 12px 7px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
td .bk{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);display:block;white-space:nowrap}
td .sub2{font-size:12px;color:var(--muted);display:block;margin-top:1px}
tr.soon td{background:color-mix(in srgb, var(--ok-bg) 45%, transparent)}
tr.stalled td{background:color-mix(in srgb, var(--warn-bg) 40%, transparent)}
tr.dim td{color:var(--muted)}
a.rec{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--faint)}
a.rec:hover{color:var(--accent);border-bottom-color:var(--accent)}
a.mailbtn{display:inline-block;font-size:12px;text-decoration:none;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:1px 10px;background:var(--surface);white-space:nowrap;margin:1px 0}
a.mailbtn:hover{border-color:var(--accent)}
.collapsed tbody tr:nth-child(n+9){display:none}
button.more{margin-top:10px;font:500 12.5px "IBM Plex Sans KR",sans-serif;color:var(--accent);background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:4px 14px;cursor:pointer}
button.more:hover{border-color:var(--accent)}
.sched td.d{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--accent);white-space:nowrap;font-weight:600}
.todo-list{margin:0;padding-left:16px;font-size:12.5px}
.todo-list li{margin:2px 0}

/* 사다리 */
.ladder{display:inline-flex;gap:2px;vertical-align:middle;margin-right:6px}
.ladder i{width:7px;height:7px;border-radius:2px;background:var(--line);display:inline-block}
.ladder i.on{background:var(--accent)}
.step{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* KPI */
.kpis{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}
.kpi{background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:9px 15px;min-width:104px;flex:1 1 140px}
.kpi .v{font:600 21px/1.2 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.kpi .k{font-size:12px;color:var(--muted)}
.kpi .s{font-size:11px;color:var(--faint);font-family:"IBM Plex Mono",monospace;margin-top:2px}
.kpi.money .v{color:var(--amber)}
.moneyrow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.moneyrow:last-child{border-bottom:none}
.moneyrow .v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.moneyrow .v.amber{color:var(--amber)}

/* 목록·도메인 */
ul.tight{margin:8px 0 0;padding-left:4px;list-style:none;font-size:13.5px}
ul.tight li{margin:7px 0;padding-left:14px;position:relative}
ul.tight li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--faint)}
ul.tight li.blocker::before{background:var(--crit)}
ul.tight .who{font-size:11px;color:var(--faint);font-family:"IBM Plex Mono",monospace;margin-right:5px;white-space:nowrap}
.domains{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.dcard{position:relative;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:11px 13px 11px 17px;overflow:hidden}
.dcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--faint)}
.dcard.ok::before{background:var(--ok)} .dcard.warn::before{background:var(--warn)} .dcard.crit::before{background:var(--crit)}
.dcard .nm{font-weight:700;font-size:13.5px} .dcard .role{color:var(--faint);font-size:11px;margin-left:6px}
.dcard .now{font-size:12.5px;color:var(--muted);margin-top:4px}
.dcard .next{font-size:12.5px;margin-top:4px}

/* 연동 건강 카드 */
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:820px){.hgrid{grid-template-columns:1fr}}
.hcard{position:relative;min-width:0;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:11px 13px 11px 17px;overflow:hidden}
.hcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--faint)}
.hcard.ok::before{background:var(--ok)} .hcard.warn::before{background:var(--warn)} .hcard.crit::before{background:var(--crit)}
.hcard .hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.hcard .nm{font-weight:700;font-size:13.5px} .hcard .role{color:var(--faint);font-size:11px}
.hcard .hd .chip.res{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600}
.hcard .when{font-size:12.5px;color:var(--muted);margin-top:4px}
.hcard .when .ago{font-family:"IBM Plex Mono",monospace;color:var(--ink)}
.hcard .cnt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:6px;font-size:12.5px;color:var(--muted)}
.hcard .cnt b{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--ink)}
.hcard .cnt b.bad{color:var(--crit)}
.hcard .mono{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.hcard ul.lines{margin:8px 0 0;padding:0;list-style:none;font:12px/1.5 "IBM Plex Mono",monospace}
.hcard ul.lines li{padding:3px 0;border-top:1px dashed var(--line);overflow-wrap:anywhere}
.hcard ul.lines.fail{color:var(--crit)} .hcard ul.lines.fixed{color:var(--ok)} .hcard ul.lines.stall{color:var(--warn)}
.hcard .none{font-size:12.5px;color:var(--ok);margin-top:8px}

/* 자동화 지도 */
.amap td:first-child{font-weight:500}
.amap .does{display:block;font-size:12px;color:var(--muted);font-weight:400}
.amap .mono{font-family:"IBM Plex Mono",monospace;font-size:12px}

footer{margin-top:24px;font-size:12px;color:var(--faint);text-align:center;line-height:1.8}
@media (prefers-reduced-motion: no-preference){ .pill.live .dot{animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{50%{opacity:.35}} }
/* 좁은 화면: 열 많은 표는 글자를 꺾지 말고 가로로 밀어 본다 */
@media(max-width:760px){
  td{overflow-wrap:normal}
  .tblwrap table.wide{min-width:720px}
  .tblwrap table.mid{min-width:520px}
}
@media(max-width:520px){
  body{font-size:15px}
  main section{padding:14px 12px;border-radius:10px}
  h1{font-size:19px}
  .kpi{min-width:0;flex:1 1 44%}
  .kpi .v{font-size:19px}
  .nextcard .dday{font-size:30px}
  table{font-size:13px}
  td{padding:8px 10px 8px 0}
}