/* 봄날온 라이선스 관리센터 — 로고에서 뽑은 파랑·보라 */
:root{
  --blue:#0050F8; --violet:#7800F8;
  --ink:#121A2B; --ink2:#49556B; --ink3:#7A869C;
  --line:#E3E7EF; --bg:#F5F7FB; --card:#fff;
  --ok:#059669; --warn:#B54708; --bad:#B42318;
}
*{box-sizing:border-box;margin:0;padding:0}
/* .gate 의 display:flex 가 기본 [hidden] 을 이겨 버리므로 못을 박아 둔다 */
[hidden]{display:none !important}
body{background:var(--bg);color:var(--ink);font:15px/1.6 "맑은 고딕","Malgun Gothic",system-ui,sans-serif}
button,input,select{font:inherit}
.muted{color:var(--ink3)}
.center{text-align:center}
.msg{margin-top:10px;font-size:14px;min-height:20px}
.msg.bad{color:var(--bad)} .msg.ok{color:var(--ok)}

/* 로그인·설치 */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.gate .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;width:380px;
  box-shadow:0 20px 50px -30px rgba(18,26,43,.4)}
.gate h1{font-size:21px;margin-bottom:6px}
.gate input{width:100%;height:44px;margin-top:14px;padding:0 12px;border:1px solid var(--line);border-radius:10px}
.gate button{width:100%;height:46px;margin-top:16px}

button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 16px;height:40px;cursor:pointer;color:var(--ink)}
button:hover{background:#F2F5FA}
button.primary{background:linear-gradient(90deg,var(--violet),var(--blue));border:0;color:#fff;font-weight:700}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:transparent}
button.danger{color:var(--bad);border-color:#F3C3BE}

/* 본 화면 */
header{display:flex;align-items:center;gap:8px;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px;position:sticky;top:0;z-index:5}
.brand{font-weight:800;font-size:17px;background:linear-gradient(90deg,var(--violet),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand span{font-weight:600;color:var(--ink3);background:none;-webkit-text-fill-color:var(--ink3)}
.spacer{flex:1}
.tab{height:36px}
.tab.on{background:#EEF3FF;border-color:#C9DBFF;color:var(--blue);font-weight:700}

#viewList,#viewLog{padding:20px;max-width:1280px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat b{display:block;font-size:26px;letter-spacing:-.02em}
.stat span{color:var(--ink3);font-size:13px}

.bar{display:flex;gap:10px;margin-bottom:14px}
.bar input{flex:1;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff}

.split{display:grid;grid-template-columns:1fr 420px;gap:14px;align-items:start}
.list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.list.wide{max-width:none}
.row{display:grid;grid-template-columns:96px 1fr 120px 92px 86px;gap:10px;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.row:last-child{border-bottom:0}
.row:hover{background:#F7F9FD}
.row.on{background:#EEF3FF}
.row .id{font-family:Consolas,monospace;font-size:12.5px;color:var(--ink3)}
.row .who b{display:block}
.row .who small{color:var(--ink3)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
.pill.active{background:#E7F7F0;color:var(--ok)}
.pill.suspended{background:#FDF3E6;color:var(--warn)}
.pill.revoked{background:#FDECEA;color:var(--bad)}

.detail{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;position:sticky;top:76px}
.detail h2{font-size:18px;margin-bottom:2px}
.detail .sub{color:var(--ink3);font-size:13px;margin-bottom:14px}
.detail label{display:block;margin-top:10px;font-size:13px;color:var(--ink2)}
.detail label input,.detail label select{width:100%;height:38px;margin-top:4px;padding:0 10px;border:1px solid var(--line);border-radius:9px}
.detail .acts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.dev{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-top:8px}
.dev code{font-size:12px;color:var(--ink2);flex:1;word-break:break-all}
.dev small{color:var(--ink3);white-space:nowrap}

.logrow{display:grid;grid-template-columns:160px 90px 120px 1fr;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.logrow:last-child{border-bottom:0}
.logrow span{color:var(--ink3)}

dialog{border:0;border-radius:16px;padding:0;box-shadow:0 30px 70px -30px rgba(18,26,43,.5)}
dialog::backdrop{background:rgba(18,26,43,.35)}
dialog form{padding:24px;width:380px}
dialog h2{font-size:18px;margin-bottom:12px}
dialog label{display:block;margin-top:10px;font-size:13px;color:var(--ink2)}
dialog label input,dialog label select{width:100%;height:40px;margin-top:4px;padding:0 10px;border:1px solid var(--line);border-radius:9px}
dialog menu{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

@media (max-width:980px){.split{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.detail{position:static}}