*{box-sizing:border-box} body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
:root{--line:#d9e1ee;--txt:#1f2937;--muted:#667085;--acc:#2563eb;--danger:#dc2626;--warn:#d97706}
.topbar{position:sticky;top:0;z-index:20;padding:12px;border-bottom:1px solid var(--line)}
.topbar h1{margin:0 0 8px;font-size:18px}.actions{display:flex;gap:8px}.actions input,#searchInput{flex:1;padding:10px;border:1px solid var(--line);border-radius:10px}
button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px}.stats{margin-top:8px;color:var(--muted);font-size:13px}

/* A안 */
body[data-variant='a']{background:#f5f7fb;color:var(--txt)} body[data-variant='a'] .topbar{background:#fff}
.main-a{padding:10px}
.table-a{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.table-a th,.table-a td{padding:10px;border-bottom:1px solid #eef2f7;text-align:left;font-size:14px}
.table-a thead th{position:sticky;top:0;background:#f8fafc}
.table-a tr:last-child td{border-bottom:0}

/* B안 */
body[data-variant='b']{background:#0f172a;color:#e5e7eb;padding-bottom:70px}
body[data-variant='b'] .topbar{background:#111827;border-color:#334155}
body[data-variant='b'] #searchInput, body[data-variant='b'] button{background:#0b1220;color:#e5e7eb;border-color:#334155}
.chip-row{display:flex;gap:6px;overflow:auto;margin-top:8px}.chip{padding:6px 10px;border-radius:999px;font-size:12px}.chip.active{border-color:#22c55e;color:#22c55e}
.main-b{padding:10px}.card-list{display:grid;gap:10px}
.card{background:#111827;border:1px solid #334155;border-radius:14px;padding:12px}
.card .name{font-weight:700}.code{font-size:12px;color:#94a3b8}.row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.bottom-bar{position:fixed;left:0;right:0;bottom:0;background:#0b1220;border-top:1px solid #334155;padding:10px;display:flex;gap:8px}
.bottom-bar button{flex:1}

.badge{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:#334155;background:#eef2ff}
.badge.warn{color:var(--warn);background:#fff7ed;border-color:#fed7aa}.badge.danger{color:var(--danger);background:#fee2e2;border-color:#fecaca}
.modal{width:min(960px,96vw);border:0;border-radius:14px;padding:0}.modal::backdrop{background:rgba(0,0,0,.5)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--line);background:#fff}
.modal-body{padding:12px;background:#fff;color:#111827}.naver-frame{width:100%;height:58vh;border:1px solid var(--line);border-radius:10px}
.hint{font-size:12px;color:#667085}