:root { --ink:#16181d; --sub:#4b5260; --muted:#7a8191; --line:#e6e8ec; --bg:#f5f6f8; --card:#fff; --red:#d7282f; --red-soft:#fdecec;
          --ok:#13804a; --ok-soft:#e7f6ee; --warn:#b25e00; --warn-soft:#fff4e5; --bad:#c42027; --bad-soft:#fdecec; --blue:#2457d6; --blue-soft:#eaf0fd; }
  * { box-sizing:border-box; }
  body { margin:0; font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; color:var(--ink); background:var(--bg); font-size:15px; line-height:1.6; }
  a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
  header.top { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
  .bar { max-width:1180px; margin:0 auto; padding:10px 16px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
  .logo { font-weight:800; color:var(--ink); letter-spacing:-0.3px; display:flex; align-items:center; gap:8px; }
  .logo i { width:10px; height:22px; background:var(--red); display:inline-block; border-radius:2px; }
  nav.menu { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
  nav.menu a { color:var(--sub); padding:6px 10px; border-radius:8px; font-weight:600; font-size:14px; }
  nav.menu a.on, nav.menu a:hover { background:var(--bg); color:var(--ink); text-decoration:none; }
  details.more { position:relative; }
  details.more summary { list-style:none; cursor:pointer; color:var(--sub); padding:6px 10px; border-radius:8px; font-weight:600; font-size:14px; }
  details.more summary::-webkit-details-marker { display:none; }
  details.more[open] summary, details.more summary:hover { background:var(--bg); }
  details.more .pop { position:absolute; top:36px; left:0; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px; min-width:180px; box-shadow:0 8px 24px rgba(0,0,0,.08); display:flex; flex-direction:column; }
  details.more .pop a { padding:7px 10px; }
  .me { margin-left:auto; display:flex; gap:10px; align-items:center; font-size:13px; color:var(--muted); }
  .seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px; background:var(--bg); }
  .seg button { border:0; background:transparent; color:var(--sub); padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; }
  .seg button.on { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
  main { max-width:1180px; margin:0 auto; padding:22px 16px 80px; }
  h1 { font-size:22px; margin:2px 0 14px; letter-spacing:-0.4px; } h2 { font-size:16px; margin:0 0 10px; letter-spacing:-0.2px; } h3 { font-size:14px; margin:12px 0 6px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
  .grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
  .grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px; }
  .grid2 label { display:flex; flex-direction:column; gap:4px; }
  table { width:100%; border-collapse:collapse; font-size:13.5px; }
  th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
  th { color:var(--muted); font-weight:600; font-size:12.5px; }
  td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
  .muted { color:var(--muted); } .sub { color:var(--sub); } .small { font-size:12.5px; }
  .badge { display:inline-block; padding:1px 9px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--line); background:#fff; white-space:nowrap; }
  .b-good, .b-적정, .b-완료, .b-ok, .b-approved, .b-accepted { color:var(--ok); background:var(--ok-soft); border-color:transparent; }
  .b-warn, .b-미소진, .b-neutral, .b-new, .b-open { color:var(--warn); background:var(--warn-soft); border-color:transparent; }
  .b-bad, .b-초과, .b-실패, .b-blocked, .b-error, .b-rejected, .b-urgent { color:var(--bad); background:var(--bad-soft); border-color:transparent; }
  .b-unknown, .b-none, .b-off { color:var(--muted); background:var(--bg); border-color:transparent; }
  form.inline { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
  label { display:flex; flex-direction:column; font-size:12.5px; color:var(--sub); gap:4px; font-weight:600; }
  input, select, textarea { font:inherit; font-size:14px; padding:8px 10px; border:1px solid #d5d8de; border-radius:9px; min-width:0; background:#fff; color:var(--ink); }
  textarea { resize:vertical; }
  input:focus, select:focus, textarea:focus { outline:2px solid var(--blue-soft); border-color:var(--blue); }
  button, .btn { font:inherit; font-size:14px; font-weight:700; padding:9px 16px; border-radius:10px; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
  .btn:hover { text-decoration:none; }
  button.ghost, .btn.ghost { background:#fff; color:var(--ink); border-color:#d5d8de; }
  button.primary, .btn.primary { background:var(--red); border-color:var(--red); }
  button.big, .btn.big { padding:13px 22px; font-size:16px; border-radius:12px; }
  button.small, .btn.small { padding:5px 10px; font-size:12.5px; border-radius:8px; }
  pre { white-space:pre-wrap; background:#fafbfc; border:1px solid var(--line); padding:12px; border-radius:10px; font-size:12.5px; overflow:auto; }
  .scroll { overflow-x:auto; }
  .flash { padding:12px 14px; border-radius:10px; margin-bottom:14px; font-weight:600; }
  .flash.err { background:var(--bad-soft); color:var(--bad); } .flash.ok { background:var(--ok-soft); color:var(--ok); } .flash.info { background:var(--blue-soft); color:var(--blue); }
  abbr.term { text-decoration:none; border-bottom:1px dotted var(--muted); cursor:help; font-weight:inherit; }
  .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .between { justify-content:space-between; }
  .kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
  .kpi .k { font-size:12.5px; color:var(--muted); font-weight:600; } .kpi .v { font-size:22px; font-weight:800; letter-spacing:-0.5px; font-variant-numeric:tabular-nums; } .kpi .d { font-size:12px; color:var(--sub); }
  .signal { border-radius:14px; padding:14px 16px; border:1px solid var(--line); background:#fff; }
  .signal .dot { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }
  .dot.good { background:var(--ok); } .dot.warn { background:#f0a020; } .dot.bad { background:var(--bad); } .dot.none { background:#c3c7cf; }
  .signal .lab { font-size:18px; font-weight:800; } .signal .nm { font-size:12.5px; color:var(--muted); font-weight:700; }
  .todo { display:flex; flex-direction:column; gap:8px; } .todo a { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:10px; background:var(--bg); color:var(--ink); }
  .todo a:hover { background:#eceef2; text-decoration:none; }
  .chip { display:inline-block; padding:6px 12px; border:1px solid #d5d8de; border-radius:999px; background:#fff; cursor:pointer; font-size:13.5px; margin:3px 4px 3px 0; user-select:none; }
  .chip input { display:none; } .chip:has(input:checked) { background:var(--ink); color:#fff; border-color:var(--ink); }
  .chip.rec { border-color:var(--blue); } .chip.rec::after { content:" 추천"; font-size:11px; color:var(--blue); font-weight:700; } .chip.rec:has(input:checked)::after { color:#cfe0ff; }
  .chip.stuck { border-style:dashed; color:var(--sub); }
  .bar-alloc { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--bg); }
  .bar-alloc span { display:block; height:100%; }
  footer { text-align:center; color:var(--muted); font-size:12px; padding:20px; }
  @media (max-width:640px) { .me .nm { display:none; } h1 { font-size:19px; } }

  .warn-box { background:var(--warn-soft); color:var(--warn); padding:10px 12px; border-radius:10px; font-size:13px; font-weight:600; }
  .internal { display:inline-block; padding:1px 8px; border-radius:6px; background:#222; color:#fff; font-size:11.5px; font-weight:700; }
  .pos { color:var(--ok); } .neg { color:var(--bad); }
  .codes { font-family:ui-monospace,Menlo,monospace; font-size:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; }
  .drop { border:2px dashed #c3c7cf; border-radius:14px; padding:26px; text-align:center; color:var(--sub); background:#fafbfc; }
  .drop.over { border-color:var(--blue); background:var(--blue-soft); }
  .qr { width:220px; height:220px; background:#fff; border:1px solid var(--line); border-radius:10px; }
  .auth { max-width:440px; margin:40px auto; }
  .stack { display:flex; flex-direction:column; gap:10px; }
  .mt { margin-top:12px; } .w100 { width:100%; }