/* ============================================================
   Ops UI Framework — theme.css
   디자인 토큰(Color / Spacing / Typography / Icon) + base + layout
   읽기 전용 표시 계층. 엔진/DB 무관.
   ============================================================ */
:root {
  /* Color */
  --bg:#0d1117; --panel:#161b22; --card:#1a2029; --card-hi:#20262e;
  --line:#2a323d; --fg:#e6edf3; --mut:#8b949e; --mut2:#6e7681;
  --pos:#3fb950; --neg:#f85149; --warn:#d29922; --accent:#58a6ff; --blue:#388bfd;
  --pos-bg:rgba(63,185,80,.16); --neg-bg:rgba(248,81,73,.16);
  --warn-bg:rgba(210,153,34,.16); --blue-bg:rgba(56,139,253,.16); --mut-bg:rgba(139,148,158,.16);
  /* Spacing (4px scale) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:26px; --s8:32px;
  /* Radius */
  --r1:6px; --r2:8px; --r3:10px; --r-pill:11px;
  /* Typography */
  --font:-apple-system,Segoe UI,Roboto,'Malgun Gothic',sans-serif;
  --mono:'SF Mono',Menlo,Consolas,monospace;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px; --fs-lg:15px; --fs-xl:17px; --fs-2xl:19px; --fs-3xl:22px;
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700;
  /* Elevation / motion */
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --sidebar-w:186px; --header-h:52px;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:var(--fs-base); line-height:1.45;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0; font-weight:var(--fw-semi); }

/* ---------- App shell layout ---------- */
.app { display:flex; min-height:100vh; }
.app-side {
  width:var(--sidebar-w); flex-shrink:0; background:var(--panel);
  border-right:1px solid var(--line); position:sticky; top:0; height:100vh;
  overflow-y:auto; padding:var(--s3) 0;
}
.app-body { flex:1; display:flex; flex-direction:column; min-width:0; }
.app-header {
  height:var(--header-h); border-bottom:1px solid var(--line); background:var(--panel);
  display:flex; align-items:center; gap:var(--s4); padding:0 var(--s6);
  position:sticky; top:0; z-index:20;
}
.app-content { flex:1; padding:var(--s5) var(--s6); max-width:1200px; width:100%; }
.app-footer {
  border-top:1px solid var(--line); color:var(--mut); font-size:var(--fs-sm);
  padding:var(--s3) var(--s6);
}

/* ---------- Sidebar nav ---------- */
.nav-brand { font-weight:var(--fw-bold); font-size:var(--fs-lg); padding:0 var(--s4) var(--s2); }
.nav-ro { font-size:10px; color:var(--mut); border:1px solid var(--line); padding:1px 6px; border-radius:9px; margin:0 var(--s4); display:inline-block; }
.nav-grp { color:var(--mut); font-size:var(--fs-xs); text-transform:uppercase; padding:var(--s4) var(--s4) var(--s1); letter-spacing:.04em; }
.nav-link { display:block; padding:7px var(--s4); color:var(--fg); font-size:var(--fs-md); border-left:2px solid transparent; }
.nav-link:hover { background:var(--card-hi); text-decoration:none; }
.nav-link.active { background:var(--card-hi); border-left-color:var(--accent); color:var(--accent); }

/* ---------- Page header ---------- */
.pg-title { font-size:var(--fs-2xl); margin-bottom:2px; }
.pg-sub { color:var(--mut); font-size:var(--fs-sm); }

/* ---------- Section heading ---------- */
.h-sec { font-size:var(--fs-base); color:var(--mut); border-bottom:1px solid var(--line); padding-bottom:var(--s2); margin:var(--s6) 0 var(--s3); }

/* ---------- Utility ---------- */
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)} .mut{color:var(--mut)}
.row{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;margin-bottom:var(--s3)}
.row-between{justify-content:space-between}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3)}
.scroll{overflow-x:auto}
.empty{color:var(--mut);padding:var(--s3) 0}
.err{color:var(--neg);padding:var(--s3) 0}
.hint{color:var(--mut);font-size:var(--fs-xs)}
.spacer{flex:1}

/* ---------- Form controls (base) ---------- */
input,select,button,textarea {
  background:var(--card); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r1); padding:6px 10px; font-size:var(--fs-md); font-family:inherit;
}
button{cursor:pointer}
button:hover{border-color:var(--accent)}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:transparent}
:disabled{opacity:.85;cursor:not-allowed}

/* ============ N4: Light Theme ============ */
:root[data-theme="light"]{
  --bg:#f6f8fa; --panel:#ffffff; --card:#ffffff; --card-hi:#eef1f4;
  --line:#d0d7de; --fg:#1f2328; --mut:#656d76; --mut2:#8c959f;
  --pos:#1a7f37; --neg:#cf222e; --warn:#9a6700; --accent:#0969da; --blue:#0969da;
  --pos-bg:rgba(26,127,55,.12); --neg-bg:rgba(207,34,46,.12);
  --warn-bg:rgba(154,103,0,.12); --blue-bg:rgba(9,105,218,.10); --mut-bg:rgba(101,109,118,.12);
  --shadow:0 8px 28px rgba(31,35,40,.18);
}

/* ============ N4: Header controls ============ */
.hd-btn{background:transparent;border:1px solid var(--line);border-radius:var(--r1);padding:5px 9px;font-size:var(--fs-sm);color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.hd-btn:hover{border-color:var(--accent)}
.hd-kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line);border-radius:3px;padding:0 4px;color:var(--mut)}
.hd-bell{position:relative}
.hd-bell .dot{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;border-radius:8px;background:var(--neg);color:#fff;font-size:9px;line-height:15px;text-align:center;padding:0 3px}