*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif;background:#f4f5f7;color:#1a1a1a;font-size:14px;}

.layout{display:flex;height:100vh;overflow:hidden;}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar{width:180px;min-width:180px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.sidebar::-webkit-scrollbar{width:3px;}
.sidebar::-webkit-scrollbar-thumb{background:#eee;}
.logo{display:flex;align-items:center;gap:8px;padding:16px 14px 14px;font-size:14px;font-weight:700;color:#1a1a2e;border-bottom:1px solid #f0f0f0;}
.logo svg{color:#185FA5;flex-shrink:0;}
.nav-item{display:flex;align-items:center;gap:8px;padding:9px 14px;color:#555;text-decoration:none;font-size:12px;transition:background .12s;}
.nav-item:hover,.nav-item.active{background:#f0f5ff;color:#185FA5;}
.sidebar-section{padding:12px 14px;border-top:1px solid #f0f0f0;}
.sidebar-label{font-size:10px;font-weight:600;color:#bbb;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.src-row,.sys-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:12px;}
.src-name{color:#555;display:flex;align-items:center;gap:5px;font-size:11px;}
.src-count{font-weight:600;font-size:12px;}
.src-count.danger{color:#E24B4A;}
.src-count.warning{color:#BA7517;}
.bar-wrap{flex:1;margin:0 6px;height:3px;background:#eee;border-radius:2px;overflow:hidden;}
.bar{height:3px;border-radius:2px;}
.sys-num{font-size:11px;color:#aaa;min-width:14px;text-align:right;}
.notify-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:11px;color:#555;}
.toggle{position:relative;display:inline-block;width:30px;height:17px;}
.toggle input{opacity:0;width:0;height:0;}
.knob{position:absolute;inset:0;background:#ddd;border-radius:20px;cursor:pointer;transition:background .15s;}
.knob:before{content:'';position:absolute;height:11px;width:11px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .15s;}
input:checked+.knob{background:#185FA5;}
input:checked+.knob:before{transform:translateX(13px);}
.sidebar-bottom{margin-top:auto;padding:12px 14px;border-top:1px solid #f0f0f0;display:flex;flex-direction:column;gap:7px;}
.btn-collect{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;background:#1a1a2e;color:#fff;border:none;border-radius:7px;cursor:pointer;font-size:11px;transition:background .12s;}
.btn-collect:hover{background:#2d2d4e;}
.btn-test{width:100%;padding:6px;background:transparent;color:#999;border:1px solid #e8e8e8;border-radius:7px;cursor:pointer;font-size:11px;transition:all .12s;}
.btn-test:hover{background:#f5f5f5;color:#555;}

/* ── Main ────────────────────────────────────────────────── */
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:18px 16px 0;}
.topbar{margin-bottom:12px;flex-shrink:0;}
h1{font-size:17px;font-weight:600;}
.sub{font-size:11px;color:#bbb;margin-top:2px;}

/* ── Metrics ─────────────────────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;flex-shrink:0;}
.metric{background:#fff;border-radius:8px;padding:11px 14px;border:1px solid #eee;}
.metric-label{font-size:10px;color:#bbb;margin-bottom:4px;}
.metric-value{font-size:20px;font-weight:600;}
.metric-value.danger{color:#E24B4A;}
.metric-value.warning{color:#BA7517;}
.metric-value.info{color:#185FA5;}
.metric-value.success{color:#0F6E56;}

/* ── 2-Panel ─────────────────────────────────────────────── */
.panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;flex:1;min-height:0;overflow:hidden;padding-bottom:16px;}

.panel{background:#fff;border-radius:10px;border:1px solid #eee;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.panel-header{padding:11px 14px;border-bottom:1px solid #f0f0f0;flex-shrink:0;}
.panel-header h2{font-size:13px;font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.src-icon{font-size:14px;}
.filters{display:flex;flex-wrap:wrap;gap:5px;}
.chip{font-size:11px;padding:3px 8px;border-radius:20px;border:1px solid #ddd;background:transparent;color:#777;cursor:pointer;transition:all .12s;}
.chip.active{background:#1a1a2e;color:#fff;border-color:#1a1a2e;}
.chip:hover:not(.active){background:#f5f5f5;}

/* ── Scroll list ─────────────────────────────────────────── */
.item-list{flex:1;min-height:0;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px;}
.item-list::-webkit-scrollbar{width:4px;}
.item-list::-webkit-scrollbar-track{background:transparent;}
.item-list::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:2px;}
.item-list::-webkit-scrollbar-thumb:hover{background:#bbb;}
.loading{text-align:center;color:#ccc;padding:40px;font-size:12px;}

/* ── Vuln item ───────────────────────────────────────────── */
.vuln-item{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1px solid #eee;border-radius:7px;flex-shrink:0;transition:background .1s;}
.vuln-item:hover{background:#fafafa;}
.vuln-item.unread-critical{border-left:3px solid #E24B4A;border-radius:0 7px 7px 0;}
.vuln-item.unread-high{border-left:3px solid #BA7517;border-radius:0 7px 7px 0;}
.unread-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.unread-dot.critical{background:#E24B4A;}
.unread-dot.high{background:#BA7517;}
.unread-dot.medium{background:#378ADD;}
.unread-dot.done{background:#ddd;}
.sev-badge{font-size:10px;font-weight:600;padding:2px 6px;border-radius:3px;white-space:nowrap;flex-shrink:0;}
.sev-badge.critical{background:#fde8e8;color:#A32D2D;}
.sev-badge.high{background:#fef3e2;color:#854F0B;}
.sev-badge.medium{background:#e6f1fb;color:#0C447C;}
.item-body{flex:1;min-width:0;}
.item-id{font-size:10px;font-weight:600;font-family:monospace;color:#bbb;}
.item-tags{display:inline-flex;gap:3px;margin-left:5px;}
.tag{font-size:10px;padding:1px 5px;border-radius:3px;border:1px solid #eee;color:#aaa;}
.item-title{font-size:12px;color:#1a1a1a;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item-meta{font-size:10px;color:#ccc;margin-top:2px;}
.item-actions{display:flex;gap:4px;flex-shrink:0;}
.icon-btn{background:none;border:1px solid #eee;cursor:pointer;color:#ccc;padding:4px 6px;border-radius:5px;display:flex;align-items:center;transition:all .1s;}
.icon-btn:hover{background:#f5f5f5;color:#555;border-color:#ddd;}

/* ── News item ───────────────────────────────────────────── */
.news-item{padding:10px 11px;border:1px solid #eee;border-radius:7px;flex-shrink:0;transition:background .1s;}
.news-item:hover{background:#fafafa;}
.news-title{font-size:12px;color:#1a1a1a;font-weight:500;margin-bottom:4px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-summary{font-size:11px;color:#999;line-height:1.5;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-meta{display:flex;align-items:center;justify-content:space-between;}
.news-date{font-size:10px;color:#ccc;}
.news-link{font-size:11px;color:#185FA5;text-decoration:none;display:flex;align-items:center;gap:2px;}
.news-link:hover{text-decoration:underline;}

/* ── Toast ───────────────────────────────────────────────── */
.toast{position:fixed;bottom:18px;right:18px;background:#1a1a2e;color:#fff;padding:9px 16px;border-radius:7px;font-size:12px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:999;}
.toast.show{opacity:1;}

@media(max-width:900px){
  html,body{overflow:auto;}
  .layout{height:auto;}
  .main{overflow:visible;padding:12px;}
  .panels{grid-template-columns:1fr;overflow:visible;min-height:auto;}
  .panel{overflow:visible;min-height:400px;}
  .item-list{overflow:visible;min-height:300px;}
  .sidebar{display:none;}
  .metrics{grid-template-columns:repeat(2,1fr);}
}