:root { --ink:#1e293b; --mut:#64748b; --line:#e2e8f0; --accent:#4f46e5; --accent-bg:#eef2ff; --ok:#15803d; --err:#b91c1c; --bg:#f8fafc; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Pretendard","Segoe UI",-apple-system,sans-serif; color:var(--ink); background:var(--bg); }
header { background:#fff; border-bottom:1px solid var(--line); padding:18px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
header h1 { font-size:20px; margin:0; }
header h1 .sub { font-size:13px; color:var(--mut); font-weight:400; margin-left:10px; }
.status { font-size:13px; color:var(--mut); display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.status .dot { white-space:nowrap; color:#cbd5e1; }
.status .dot.on { color:var(--accent); font-weight:600; }
main { max-width:1080px; margin:0 auto; padding:24px; }
.guide { background:var(--accent-bg); border:1px solid #c7d2fe; border-radius:10px; padding:12px 16px; font-size:13px; color:#3730a3; }
.selbar { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin:18px 0 0; padding:12px 16px; background:#fff; border:1px solid var(--line); border-radius:10px; font-size:14px; }
.selbar label { color:var(--mut); font-weight:500; }
.selbar select { margin-left:6px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; font-size:14px; }
.selbar .curnote { color:var(--accent); margin-left:auto; font-size:13px; }
.lockban { background:#fef3c7; border:1px solid #fcd34d; color:#92400e; border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:13px; font-weight:500; }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.tabs button { padding:9px 18px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; font-size:14px; color:var(--ink); transition:all .12s; }
.tabs button:hover { border-color:var(--accent); }
.tabs button.on { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.empty { color:var(--mut); padding:40px; text-align:center; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.card h2 { margin:0 0 18px; font-size:18px; }
.cols { display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; }
@media (max-width:820px){ .cols{ grid-template-columns:1fr; } }
.pnlgrid { display:flex; flex-direction:column; gap:10px; }
.pnlgrid.rateonly { flex-direction:row; gap:16px; margin-top:14px; }
.frow { display:flex; flex-direction:column; gap:4px; }
.frow label { font-size:13px; color:var(--mut); font-weight:500; }
.frow .note { color:#94a3b8; font-size:11px; margin-left:6px; font-weight:400; }
.frow input { padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.frow input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.kpibox h3 { font-size:14px; margin:0 0 10px; }
.kpibox .note { color:#94a3b8; font-size:11px; font-weight:400; }
.kpit { width:100%; border-collapse:collapse; font-size:12.5px; }
.kpit th { background:#f1f5f9; color:var(--mut); font-weight:600; padding:6px 8px; text-align:center; border:1px solid var(--line); white-space:nowrap; }
.kpit td { border:1px solid var(--line); padding:3px 5px; text-align:center; }
.kpit td.kn { text-align:left; color:var(--ink); font-weight:500; white-space:nowrap; }
.kpit td input { width:64px; padding:5px 6px; border:1px solid var(--line); border-radius:6px; font-size:12.5px; text-align:right; }
.kpit td.auto { background:var(--accent-bg); color:var(--accent); font-weight:600; min-width:48px; }
.subgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:820px){ .subgrid{ grid-template-columns:1fr 1fr; } }
.subcard { border:1px solid var(--line); border-radius:10px; padding:12px; background:#fcfcfd; }
.subcard h4 { margin:0 0 8px; font-size:14px; color:var(--accent); }
.subcard .frow label { font-size:12px; }
.subcard .frow input { padding:6px 8px; font-size:13px; }
.sutotal { margin:14px 0; padding:10px 14px; background:#f1f5f9; border-radius:8px; font-size:13px; }
.sutotal .note { color:#94a3b8; font-size:11px; }
.submit { margin-top:20px; padding:12px 32px; background:var(--accent); color:#fff; border:none; border-radius:9px; font-size:15px; font-weight:600; cursor:pointer; }
.submit:hover { background:#4338ca; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; padding:12px 24px; border-radius:10px; color:#fff; font-size:14px; font-weight:500; transition:all .2s; z-index:50; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.ok { background:var(--ok); }
.toast.err { background:var(--err); }