/* =====================================================================
   lab.css — 취약점 학습 대시보드
   ===================================================================== */
.lab-intro { background:#2a0d0d; color:#ffd9d4; border-radius: var(--radius-m); padding: var(--sp-20) var(--sp-24); margin-bottom: var(--sp-24); font-size: var(--fs-body-s); line-height:1.7; }
.lab-intro b { color:#fff; }

.mode-bar { display:flex; gap: var(--sp-8); align-items:center; margin-bottom: var(--sp-20); flex-wrap:wrap; }
.mode-bar .spacer { flex:1; }
.mode-bar form { display:inline; }
.global-safe { background:#e3f5e9; color:#1f7a36; border:1px solid #b6e2c4; border-radius: var(--radius-s); padding: var(--sp-8) var(--sp-12); font-size: var(--fs-body-s); font-weight:700; }

.vuln-card { border:1px solid var(--c-gray-10); border-left: 4px solid var(--c-accent); border-radius: var(--radius-m); padding: var(--sp-20) var(--sp-24); margin-bottom: var(--sp-16); background:#fff; }
.vuln-card.planned { border-left-color: var(--c-gray-30); opacity:.7; }
.vuln-head { display:flex; align-items:center; gap: var(--sp-12); flex-wrap:wrap; }
.vuln-title { font-size: var(--fs-heading-xs); font-weight:800; color: var(--c-gray-90); }
.vuln-head .spacer { flex:1; }
.tagrow { display:flex; gap: var(--sp-6); flex-wrap:wrap; margin-top: var(--sp-8); }
.chip { font-size: var(--fs-body-xs); font-weight:700; border-radius: var(--radius-max); padding: 2px var(--sp-10); border:1px solid var(--c-gray-20); color: var(--c-gray-60); }
.chip.cat { background: var(--c-primary-5); color: var(--c-primary-70); border-color: var(--c-primary-20); }
.chip.cve { background:#f3eaff; color:#6b2fb3; border-color:#d9c6f5; }
.diff { font-size: var(--fs-body-xs); font-weight:800; border-radius: var(--radius-xs); padding: 2px var(--sp-10); }
.diff.하 { background:#e3f5e9; color:#1f7a36; }
.diff.중 { background:#fff4e0; color:#9e6a00; }
.diff.상 { background:#fde7e4; color:#bd2c0f; }
.status-active { color:#1f7a36; font-weight:700; font-size: var(--fs-body-xs); }
.status-planned { color: var(--c-gray-50); font-weight:700; font-size: var(--fs-body-xs); }

.vuln-desc { font-size: var(--fs-body-s); color: var(--c-gray-70); margin: var(--sp-12) 0; line-height:1.7; }
.level-form { display:flex; gap: var(--sp-8); align-items:center; }
.level-form select { height: 3.6rem; border:1px solid var(--c-gray-30); border-radius: var(--radius-s); padding: 0 var(--sp-10); font-size: var(--fs-body-s); }
.cur-level { font-size: var(--fs-body-xs); font-weight:800; padding:2px var(--sp-8); border-radius: var(--radius-xs); }
.cur-level.LOW, .cur-level.MEDIUM, .cur-level.HIGH { background:#fde7e4; color:#bd2c0f; }
.cur-level.SECURE { background:#e3f5e9; color:#1f7a36; }

details.vuln-detail { margin-top: var(--sp-12); border-top:1px solid var(--c-gray-10); padding-top: var(--sp-12); }
details.vuln-detail summary { cursor:pointer; font-size: var(--fs-body-s); font-weight:700; color: var(--c-accent-strong); }
.kv { margin-top: var(--sp-10); font-size: var(--fs-body-s); color: var(--c-gray-70); }
.kv b { color: var(--c-gray-90); }
.code { display:block; background: var(--c-gray-95); color:#e6e8ea; border-radius: var(--radius-s); padding: var(--sp-12) var(--sp-16); font-family: ui-monospace,Menlo,Consolas,monospace; font-size: var(--fs-body-xs); white-space:pre-wrap; word-break:break-all; margin-top: var(--sp-6); }

.term { background: var(--c-gray-95); color:#9fe89f; border-radius: var(--radius-s); padding: var(--sp-16); font-family: ui-monospace,Menlo,Consolas,monospace; font-size: var(--fs-body-xs); white-space:pre-wrap; word-break:break-all; max-height:40rem; overflow:auto; margin-top: var(--sp-12); }
.uploaded-list li { display:flex; justify-content:space-between; padding: var(--sp-8) 0; border-bottom:1px solid var(--c-gray-10); font-size: var(--fs-body-s); }
.uploaded-list a { color: var(--c-accent); }