/* 관리자 콘솔.
 * 사내 표준 디자인 언어를 따른다 — 정본 기준서: ~/projects/phishing-sim/DESIGN.md
 *   프리미엄 라이트 리포트 + 덴티움 그린 사이드바 + 라임 단일 액센트.
 *   각진 크리스프(radius 8px) + 아주 옅은 2단 그림자. 글래스·큰 라운드 금지.
 */

:root {
  --paper:#EEF1F5; --panel:#fff;
  --ink:#1E293B; --muted:#5B6878; --faint:#94A1B2;
  --line:#E4E9EF; --line2:#EEF1F5;
  --green:#143a2c; --green2:#0c2820; --green3:#071b16;
  --lime:#ACC90E; --limeInk:#6F8410; --limeBg:#F7FAE8;
  --grn:#16A34A; --amber:#E08A2B; --danger:#DC2626;
  --slate:#7C8CA0; --slateL:#B4BECC;
  --radius:8px;
  --shadow:0 1px 2px rgba(16,24,40,.03), 0 4px 14px rgba(16,24,40,.04);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur-press:100ms; --dur-fast:160ms; --dur-panel:280ms;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
              "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  font-size:14px; line-height:1.6;
}
.num, td.n, th.n { font-variant-numeric:tabular-nums; }

/* ───────────────────────── 로그인 */
.loginpage { display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:20px; }
.loginbox { width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; }
.lb-head { padding:26px 28px 22px;
  background:linear-gradient(165deg,#143a2c,#0c2820 48%,#071b16);
  border-top:2px solid var(--lime); }
.lb-head .logo { color:#fff; font-size:17px; font-weight:800; letter-spacing:-.3px; }
.lb-head .logo i { color:var(--lime); font-style:normal; }
.lb-head p { margin:6px 0 0; color:rgba(255,255,255,.62); font-size:12.5px; }
.lb-body { padding:24px 28px 28px; }
.lb-err { margin-bottom:16px; padding:10px 12px; background:#FEF2F2;
  border:1px solid #FBD5D5; border-radius:6px; color:#9B1C1C; font-size:13px; }

/* ───────────────────────── 셸 */
.shell { display:flex; min-height:100vh; }

.side {
  width:220px; flex:none; position:sticky; top:0; height:100vh;
  background:linear-gradient(165deg,#143a2c,#0c2820 48%,#071b16);
  border-top:2px solid var(--lime);
  display:flex; flex-direction:column; overflow:hidden;
}
/* 라임 라디얼 글로우 + 미세 스캔라인 */
.side::before {
  content:""; position:absolute; top:-40px; left:-30px; width:240px; height:200px;
  background:radial-gradient(circle, rgba(172,201,14,.16), transparent 68%);
  pointer-events:none;
}
.side::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px,
             transparent 1px 3px);
}
.side-h { position:relative; z-index:1; padding:20px 20px 18px; }
.side-h .logo { color:#fff; font-size:16px; font-weight:800; letter-spacing:-.3px; }
.side-h .logo i { color:var(--lime); font-style:normal; }
.side-h p { margin:5px 0 0; color:rgba(255,255,255,.5); font-size:11.5px; }

.nav { position:relative; z-index:1; flex:1; padding:6px 0; }
.nav a {
  display:flex; align-items:center; gap:10px; padding:10px 20px;
  color:rgba(255,255,255,.72); text-decoration:none; font-size:13.5px;
  font-weight:600; border-left:3px solid transparent; cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.nav a svg { flex:none; opacity:.8; }
.nav a.on {
  color:#fff; background:rgba(172,201,14,.13);
  border-left-color:var(--lime);
}
.nav a.on svg { stroke:var(--lime); opacity:1; }
@media (hover:hover) and (pointer:fine) {
  .nav a:hover { color:#fff; background:rgba(255,255,255,.05); }
}
.side-f {
  position:relative; z-index:1; padding:14px 20px 18px;
  border-top:1px solid rgba(255,255,255,.09); font-size:12px;
  color:rgba(255,255,255,.5);
}
.side-f a { color:rgba(255,255,255,.72); text-decoration:none; }

.main { flex:1; min-width:0; padding:26px 28px 60px; }

/* 페이지 헤더 */
.ph { display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.ph .eyebrow { font-size:11.5px; font-weight:700; color:var(--faint);
  letter-spacing:.05em; text-transform:uppercase; }
.ph h1 { margin:3px 0 0; font-size:22px; font-weight:800; letter-spacing:-.5px; }
.ph .sub { margin:5px 0 0; color:var(--muted); font-size:13px; }
.ph-act { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* 카드 */
.card { background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; }
.card-h { padding:15px 18px 0; display:flex; justify-content:space-between;
  align-items:baseline; gap:12px; flex-wrap:wrap; }
.card-h h3 { margin:0; font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.card-h .s { font-size:12.5px; color:var(--faint); }
.card-b { padding:16px 18px 18px; }
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); }

/* 리드 히어로 */
.hero { border-top:2px solid var(--lime);
  background:linear-gradient(180deg,#f4f8e4,#fff 42%); }
.hero-in { display:flex; gap:26px; align-items:center; padding:22px 22px 24px;
  flex-wrap:wrap; }
.gauge { flex:none; position:relative; width:150px; height:150px; }
.gauge .val { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.gauge .val b { font-size:32px; font-weight:800; letter-spacing:-1.2px;
  font-variant-numeric:tabular-nums; line-height:1; }
.gauge .val span { font-size:11.5px; color:var(--muted); margin-top:4px; }
.hero-txt { flex:1; min-width:240px; }
.hero-txt h2 { margin:0 0 8px; font-size:19px; font-weight:800;
  letter-spacing:-.5px; line-height:1.4; }
.hero-txt p { margin:0; color:var(--muted); font-size:13.5px; }
.mini { display:flex; gap:22px; margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(20,58,44,.09); flex-wrap:wrap; }
.mini div span { display:block; font-size:11.5px; color:var(--muted); }
.mini div b { font-size:17px; font-weight:800; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; }

/* KPI 타일 */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); box-shadow:var(--shadow); overflow:hidden;
  margin-bottom:16px; }
.kpi { padding:15px 18px; border-right:1px solid var(--line2); }
.kpi:last-child { border-right:none; }
.kpi.accent { border-left:3px solid var(--lime); }
.kpi span { display:block; font-size:12px; color:var(--muted); }
.kpi b { display:block; margin-top:4px; font-size:25px; font-weight:800;
  letter-spacing:-1px; font-variant-numeric:tabular-nums; line-height:1.15; }
.kpi .u { font-size:12px; font-weight:600; color:var(--faint); margin-left:3px; }

/* 비율 막대 (도넛 금지) */
.drow { margin-bottom:11px; }
.drow:last-child { margin-bottom:0; }
.drow .dl { display:flex; justify-content:space-between; gap:10px;
  font-size:13px; margin-bottom:5px; }
.drow .dl b { font-variant-numeric:tabular-nums; font-weight:700; }
.drow .dl .pct { color:var(--muted); font-weight:600; }
.track { height:8px; background:#EDF0F4; border-radius:99px; overflow:hidden; }
.track > i { display:block; height:100%; background:var(--lime); border-radius:99px; }
.track > i.mut { background:var(--slateL); }
.track > i.warn { background:var(--amber); }
.track > i.bad { background:var(--danger); }
.track > i.good { background:var(--grn); }

/* 표 */
.dtable { width:100%; border-collapse:collapse; font-size:13px; }
.dtable th, .dtable td { padding:9px 10px; text-align:left;
  border-bottom:1px solid var(--line2); }
.dtable thead th { font-size:11.5px; font-weight:700; color:var(--muted);
  letter-spacing:.03em; text-transform:uppercase; background:#FAFBFC;
  position:sticky; top:0; z-index:1; }
.dtable td.n, .dtable th.n { text-align:right; font-variant-numeric:tabular-nums; }
.dtable tbody tr:last-child td { border-bottom:none; }
.tablewrap { overflow:auto; max-height:62vh; border:1px solid var(--line);
  border-radius:6px; }

/* 버튼·입력 */
.btn { display:inline-flex; align-items:center; gap:6px; min-height:34px;
  padding:0 14px; border:1px solid var(--green); border-radius:6px;
  background:var(--green); color:#fff; font:inherit; font-size:13px;
  font-weight:700; cursor:pointer;
  transition:transform var(--dur-press) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out); }
.btn:active { transform:scale(.97); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn-ghost { background:#fff; color:var(--ink); border-color:var(--line); }
.btn-lime { background:var(--lime); border-color:var(--lime); color:#2f3a1c; }
.btn-danger { background:var(--danger); border-color:var(--danger); }
@media (hover:hover) and (pointer:fine) {
  .btn:hover { background:#0f2f23; }
  .btn-ghost:hover { background:#F7F9FB; }
  .btn-lime:hover { background:#9cb70d; }
  .btn-danger:hover { background:#b91c1c; }
}
.input, .select, .textarea { width:100%; min-height:34px; padding:7px 10px;
  border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13.5px;
  background:#fff; color:var(--ink); }
.textarea { min-height:90px; resize:vertical; }
.input:focus, .select:focus, .textarea:focus { outline:none;
  border-color:var(--lime); }
label.field { display:block; margin-bottom:12px; }
label.field > span { display:block; margin-bottom:4px; font-size:12.5px;
  font-weight:600; color:var(--muted); }
.hint { font-size:12px; color:var(--faint); margin-top:4px; }

/* 상태 태그 — 색 + 라벨 병행(색각 대응) */
.st { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11.5px;
  font-weight:700; border:1px solid; }
.st.draft { color:#5B6878; border-color:#DDE3EA; background:#F4F6F8; }
.st.open  { color:#4d6410; border-color:#DCE8A8; background:var(--limeBg); }
.st.closed{ color:#8a5a12; border-color:#F2DDB8; background:#FDF7EC; }
.st.err   { color:#9B1C1C; border-color:#FBD5D5; background:#FEF2F2; }
.st.ok    { color:#15803D; border-color:#BBF7D0; background:#F0FDF4; }

.note { padding:12px 14px; border-radius:6px; font-size:13px; line-height:1.65; }
.note.warn { background:#FDF7EC; border:1px solid #F2DDB8; color:#7c4a09; }
.note.info { background:#F7FAE8; border:1px solid #E2EBBE; color:#3d4a25; }
.note.bad  { background:#FEF2F2; border:1px solid #FBD5D5; color:#9B1C1C; }
.note b { font-weight:700; }

.tab { display:none; }
.tab.on { display:block; animation:rise var(--dur-fast) var(--ease-out); }
@keyframes rise { from { opacity:0; transform:translateY(4px); } }

.empty { padding:38px 20px; text-align:center; color:var(--faint); font-size:13.5px; }

/* 문항 미리보기 */
.qprev { border:1px solid var(--line); border-radius:6px; padding:13px 15px;
  margin-bottom:9px; }
.qprev .h { display:flex; gap:9px; align-items:baseline; }
.qprev .seq { font-size:11.5px; font-weight:700; color:var(--limeInk);
  font-variant-numeric:tabular-nums; }
.qprev .t { font-size:14px; font-weight:700; }
.qprev .k { font-size:11px; color:var(--faint); border:1px solid var(--line);
  border-radius:4px; padding:1px 6px; font-weight:600; }
.qprev .br { font-size:11px; color:#7c4a09; background:#FDF7EC;
  border:1px solid #F2DDB8; border-radius:4px; padding:1px 6px; font-weight:600; }
.qprev ul { margin:8px 0 0; padding-left:18px; color:var(--muted);
  font-size:12.5px; line-height:1.7; }

.texts { max-height:340px; overflow:auto; }
.texts div { padding:10px 12px; border:1px solid var(--line2); border-radius:6px;
  margin-bottom:7px; font-size:13px; line-height:1.65; white-space:pre-wrap;
  background:#FAFBFC; }

@media (max-width:900px) {
  .shell { flex-direction:column; }
  .side { position:static; width:auto; height:auto; }
  .nav { display:flex; overflow-x:auto; padding:0; }
  .nav a { border-left:none; border-bottom:3px solid transparent;
    white-space:nowrap; }
  .nav a.on { border-left-color:transparent; border-bottom-color:var(--lime); }
  .side-f { display:none; }
  .main { padding:18px 16px 50px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration:0s !important; animation-duration:0s !important;
      transition-delay:0s !important; }
}
:focus-visible { outline:2px solid var(--limeInk); outline-offset:2px; }