/* 본코스트 웹 — 평소용 화면(exe)과 같은 색: 짙은 초록 #185C37, 선택 #217346 + 주황 줄, 신규 주황, 저장 초록, 삭제 회색 */
:root {
  --bg: #f3f5f8; --card: #fff; --line: #c9d0d9; --line2: #8b96a6; --text: #1d2430; --sub: #4a5565;
  --accent: #185c37; --sel: #217346; --orange: #f0a020; --new: #e8890c; --save: #2b8a3e; --del: #6b7685;
  --err: #c0392b; --warn: #b7791f; --ok: #2b8a3e; --row: #f2f8f4; --head: #e6f2ea;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; }
a { color: var(--sel); }
header#top { position: sticky; top: 0; z-index: 5; display: flex; align-items: stretch; justify-content: space-between;
  background: var(--accent); color: #fff; padding: 0 16px; min-height: 52px; }
#nav { display: flex; flex-wrap: wrap; }
#nav a { color: #dbe3ef; text-decoration: none; padding: 14px 18px 11px; border-bottom: 3px solid transparent; font-weight: 600; }
#nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
#nav a.on { background: var(--sel); color: #fff; border-bottom-color: var(--orange); }
#nav .brand { font-weight: 800; letter-spacing: .5px; color: #fff; padding-right: 26px; }
#who { display: flex; align-items: center; gap: 14px; font-size: 14px; }
#who .soon { color: #ffd27a; font-weight: 700; }
#who button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
main { max-width: 1240px; margin: 20px auto; padding: 0 16px; }
footer { text-align: center; color: var(--sub); font-size: 12px; padding: 24px 0 30px; }
h1 { font-size: 20px; margin: 0 0 14px; color: var(--accent); }
h2 { font-size: 16px; margin: 0 0 10px; color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-rates { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
@media (max-width: 860px) {
  .grid2, .grid-rates { grid-template-columns: 1fr; }
  header#top { flex-wrap: wrap; }
  #nav a { padding: 12px 10px 9px; }
  #who { width: 100%; padding: 6px 0 8px; font-size: 13px; flex-wrap: wrap; gap: 8px; }
  #who button { margin-left: auto; }
  .card { overflow-x: auto; }
  th, td { white-space: nowrap; }
}
.muted { color: var(--sub); font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row + .row { margin-top: 10px; }
.spacer { flex: 1; }
label.f { display: block; font-size: 13px; color: var(--sub); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=date], input[type=number], select {
  font: inherit; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 4px; background: #fff; min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--sel); outline-offset: -1px; }
input.w100, select.w100 { width: 100%; }
button { font: inherit; font-weight: 600; padding: 7px 16px; border-radius: 4px; border: 1px solid transparent; cursor: pointer;
  background: var(--sel); color: #fff; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; filter: none; }
button.new { background: var(--new); } button.save { background: var(--save); } button.del { background: var(--del); }
button.run { background: var(--accent); padding: 10px 28px; font-size: 16px; }
button.ghost { background: #fff; color: var(--text); border-color: var(--line2); }
button.small { padding: 4px 10px; font-size: 13px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
th { background: var(--head); font-weight: 600; white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--row); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; } tr.click:hover { background: #dff0e5; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #fff; background: var(--del); white-space: nowrap; }
.badge.done { background: var(--ok); } .badge.failed { background: var(--err); } .badge.waiting { background: var(--new); }
.badge.running, .badge.checking { background: var(--sel); } .badge.cancelled { background: #9aa3ae; }
.lvE { color: var(--err); font-weight: 700; white-space: nowrap; } .lvW { color: var(--warn); font-weight: 700; white-space: nowrap; }
.drop { border: 2px dashed var(--line2); border-radius: 6px; padding: 18px; text-align: center; background: #fafbfc; cursor: pointer; }
.drop.over { border-color: var(--sel); background: #e8f4ec; }
.drop.has { border-style: solid; border-color: var(--sel); background: #f2f8f4; }
.drop .t { font-weight: 700; color: var(--accent); }
.drop .fn { margin-top: 6px; word-break: break-all; }
.log { background: #1f2630; color: #dfe6ee; font: 13px/1.55 Consolas, "D2Coding", monospace; padding: 12px 14px; border-radius: 4px;
  max-height: 340px; overflow: auto; white-space: pre-wrap; margin: 0; }
.msg { padding: 10px 14px; border-radius: 4px; margin: 10px 0; }
.msg.err { background: #fdecea; color: #8e2a1f; border: 1px solid #f3c2bb; }
.msg.warn { background: #fff6e0; color: #7a4f00; border: 1px solid #f1d58f; }
.msg.ok { background: #e8f4ec; color: #1d5c34; border: 1px solid #b9dcc5; }
.note { background: #eef6f1; border-left: 4px solid var(--sel); border-radius: 4px; padding: 10px 14px; margin-top: 12px;
  font-size: 14px; line-height: 1.7; color: var(--text); word-break: keep-all; }
.msg { word-break: keep-all; }
.note strong { color: var(--accent); }
.note.notice { background: #f6f7f9; border-left-color: var(--del); font-size: 13px; }
label.agree { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-weight: 600; cursor: pointer; }
label.agree input { width: 18px; height: 18px; }
.list { border: 1px solid var(--line); border-radius: 4px; max-height: 520px; overflow: auto; background: #fff; }
.list div { padding: 7px 10px; border-bottom: 1px solid #edf0f3; cursor: pointer; word-break: break-all; }
.list div:hover { background: #eef6f1; } .list div.on { background: var(--sel); color: #fff; }
.ratetbl td input { width: 100%; text-align: right; padding: 5px 8px; }
.ratetbl td.k { white-space: nowrap; }
#toast { position: fixed; right: 20px; bottom: 20px; background: #263140; color: #fff; padding: 12px 18px; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 20; max-width: 420px; }
#toast.err { background: var(--err); }
.login { max-width: 460px; margin: 70px auto; }
.login .brand { text-align: center; font-size: 30px; font-weight: 800; letter-spacing: 3px; color: var(--accent); }
.login .sub { text-align: center; color: var(--sub); margin: 4px 0 18px; }
.login input { width: 100%; padding: 11px 12px; }
.login button { width: 100%; margin-top: 16px; padding: 11px; font-size: 16px; }
.dlg-back { position: fixed; inset: 0; background: rgba(20,28,38,.45); z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg { background: #fff; border-radius: 8px; max-width: 900px; width: 100%; max-height: 88vh; overflow: auto; padding: 20px 22px; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #b9dcc5; border-top-color: var(--sel); border-radius: 50%;
  animation: sp 0.8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes sp { to { transform: rotate(360deg); } }
summary.fold { cursor: pointer; font-weight: 700; font-size: 16px; color: var(--accent); }
summary.fold:hover { color: var(--sel); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; }
.kv div:nth-child(odd) { color: var(--sub); }