/* onetooday 자동홍보기 콘솔 — 라이트(화이트) 실무 UI */
:root{
  /* 웜 오프화이트 바탕 + 화이트 카드 (골드 편향 중립, 순백/순회색 회피) */
  --bg:#f6f5f2; --panel:#ffffff; --panel-2:#f4f2ec; --raised:#efece4;
  --border:#e6e1d7; --border-soft:#efebe2;
  --text:#211f1a; --dim:#6d685f; --faint:#9c978c;
  --accent:#d8a33f; --accent-dim:#e7d3a6; --accent-ink:#2a2008; --accent-strong:#a9781c;
  --ok:#2f7d4f; --warn:#b0741d; --err:#c0453f; --unk:#6f52a6; --skip:#7a756c; --run:#2f76b0;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Consolas,"D2Coding",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --r:6px; --shadow:0 1px 2px rgba(40,32,15,.04), 0 1px 1px rgba(40,32,15,.03);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* .login-wrap 등 display 규칙이 hidden 을 덮지 않게 */
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--accent-strong);text-decoration:none}

/* ── 로그인 ── */
.login-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  width:340px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);
  border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column;gap:14px;
}
.login-brand{font-size:20px;font-weight:600;letter-spacing:-.01em}
.login-sub{color:var(--dim);font-size:13px;margin-top:-10px;margin-bottom:6px}
.login-err{color:var(--err);font-size:12.5px;min-height:16px}

/* ── 탑바 ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  height:52px;padding:0 20px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);z-index:5;
}
.brand{font-weight:600;letter-spacing:-.01em}
.brand-sub{color:var(--dim);font-weight:400;margin-left:8px;padding-left:8px;border-left:1px solid var(--border)}
.topbar-right{display:flex;align-items:center;gap:14px}
.ver{color:var(--faint);font-size:12px}
.badge{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border:1px solid var(--border);border-radius:4px;color:var(--dim);
}
.badge.env-server{color:var(--accent-strong);border-color:#e7d3a6;background:#faf4e6}
.badge.env-home{color:var(--run);border-color:#cfe0ef;background:#f0f6fb}

/* ── 레이아웃 ── */
.layout{
  display:grid;grid-template-columns:minmax(360px,440px) 1fr;gap:16px;
  padding:16px 20px;max-width:1240px;margin:0 auto;align-items:start;
}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(max-width:860px){.layout{grid-template-columns:1fr}}

/* ── 패널 ── */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--border-soft);
}
.panel-title{margin:0;font-size:13px;font-weight:600;letter-spacing:.01em}
.panel-note{color:var(--faint);font-size:11.5px}

/* ── 폼 ── */
.run-form{padding:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.field-label .hint{text-transform:none;letter-spacing:0;color:var(--faint);margin-left:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{
  background:var(--panel);border:1px solid var(--border);border-radius:5px;
  padding:8px 10px;width:100%;outline:none;transition:border-color .12s,box-shadow .12s;
}
textarea{resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(216,163,63,.14)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236d685f' stroke-width='1.4'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.run-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:2px}
.cap-field{margin-bottom:0;width:140px}
.cap-field input{width:100%}
.run-msg{margin-top:12px;font-size:12.5px;min-height:16px;color:var(--dim)}
.run-msg.ok{color:var(--ok)} .run-msg.err{color:var(--err)}

/* ── 버튼 ── */
.btn-primary{
  background:var(--accent);color:var(--accent-ink);border:1px solid #cf982f;border-radius:5px;
  padding:9px 18px;font-weight:600;cursor:pointer;transition:filter .12s;
}
.btn-primary:hover{filter:brightness(1.04)}
.btn-primary:disabled{opacity:.55;cursor:default;filter:none}
.btn-ghost{
  background:var(--panel);border:1px solid var(--border);border-radius:5px;
  padding:6px 12px;color:var(--dim);cursor:pointer;transition:.12s;
}
.btn-ghost:hover{color:var(--text);border-color:var(--faint)}
.btn-ghost.sm{padding:4px 10px;font-size:12.5px}

/* ── 사이트 목록 ── */
.sites-list{display:flex;flex-direction:column}
.site-row{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  padding:10px 16px;border-bottom:1px solid var(--border-soft);
}
.site-row:last-child{border-bottom:none}
.site-name{font-weight:500}
.site-meta{color:var(--faint);font-size:11.5px;font-family:var(--mono);margin-top:2px}
.site-tags{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.tag{
  font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:3px;
  border:1px solid var(--border);color:var(--dim);white-space:nowrap;background:var(--panel-2);
}
.tag.grp-http{color:#2f6c96;border-color:#cfe0ef;background:#f0f6fb}
.tag.grp-browser{color:#6b4fa0;border-color:#e2d8f1;background:#f6f1fc}
.tag.off{color:var(--faint);background:transparent}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.dot.on{background:var(--ok)} .dot.wait{background:var(--skip)}

/* ── 실행 이력 ── */
.panel-fill{min-height:60vh}
.runs-list{display:flex;flex-direction:column}
.run-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:11px 16px;border-bottom:1px solid var(--border-soft);cursor:pointer;transition:background .1s;
}
.run-row:hover{background:var(--panel-2)}
.run-row:last-child{border-bottom:none}
.run-main{min-width:0}
.run-id{font-family:var(--mono);font-size:12px;color:var(--dim)}
.run-sub{font-size:11.5px;color:var(--faint);margin-top:2px}
.run-sites{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:280px}
.chip{font-family:var(--mono);font-size:10px;padding:2px 5px;border-radius:3px;background:var(--panel-2);border:1px solid var(--border);color:var(--dim)}
.empty{padding:28px 16px;text-align:center;color:var(--faint);font-size:13px}

/* ── 상태 pill (라이트 틴트) ── */
.pill{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  padding:3px 8px;border-radius:4px;border:1px solid transparent;white-space:nowrap;
}
.st-success{color:#2f7d4f;border-color:#cfe6d6;background:#eef7f1}
.st-partial{color:#a8701c;border-color:#eeddbe;background:#faf3e2}
.st-failed{color:#bf443e;border-color:#f0d2cf;background:#fbedeb}
.st-unknown{color:#6b4fa0;border-color:#e2d8f1;background:#f4eefb}
.st-skipped{color:#6d685f;border-color:#e6e1d7;background:#f2f0e9}
.st-running{color:#2f76b0;border-color:#cfe0ef;background:#eef5fb}
.st-error{color:#bf443e;border-color:#f0d2cf;background:#fbedeb}

/* ── 상세 서랍 ── */
.drawer{position:fixed;inset:0;z-index:20}
.drawer-backdrop{position:absolute;inset:0;background:rgba(35,29,18,.28)}
.drawer-panel{
  position:absolute;top:0;right:0;height:100%;width:min(560px,94vw);
  background:var(--panel);border-left:1px solid var(--border);
  display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(40,32,15,.14);
}
.drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border-soft);
}
.drawer-title{font-family:var(--mono);font-size:13px;color:var(--text)}
.drawer-meta{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.drawer-body{padding:16px 20px;overflow:auto}
.target{border:1px solid var(--border-soft);border-radius:5px;padding:12px 14px;margin-bottom:10px;background:var(--panel-2)}
.target-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.target-name{font-weight:600}
.kv{display:grid;grid-template-columns:88px 1fr;gap:5px 10px;font-size:12px;margin:0}
.kv dt{color:var(--faint);font-family:var(--mono)}
.kv dd{margin:0;color:var(--dim);font-family:var(--mono);word-break:break-all}

/* ── 실시간 진행 ── */
.live-site{border:1px solid var(--border-soft);border-radius:5px;margin-bottom:10px;overflow:hidden}
.live-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;background:var(--panel-2);border-bottom:1px solid var(--border-soft)}
.live-name{font-weight:600}
.live-stage{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--accent-strong)}
.live-log{padding:8px 12px;display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:11.5px}
.live-ev{display:grid;grid-template-columns:52px 78px 1fr;gap:8px;align-items:baseline}
.live-ev .t{color:var(--faint)}
.live-ev .stg{color:var(--dim)}
.live-ev .msg{color:var(--text);word-break:break-all}
.live-ev.l-run .msg{color:var(--accent-strong)}
.live-ev.l-ok  .msg{color:var(--ok)}
.live-ev.l-warn .msg{color:var(--warn)}
.live-ev.l-err .msg{color:var(--err);font-weight:500}
.spin{display:inline-block;width:9px;height:9px;border:2px solid var(--accent);border-right-color:transparent;
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none;border-right-color:var(--accent)}}
.done-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.done-dot.ok{background:var(--ok)} .done-dot.err{background:var(--err)} .done-dot.warn{background:var(--warn)}