/* =========================================================
 * ProblemBank — 디자인 시스템 (레거시/design 참고)
 * ERP 업무화면 톤: 저채도, Pretendard, 카드 기반
 * ========================================================= */

:root{
  /* 표면/배경 */
  --surface:#F4F6F8;
  --card:#ffffff;
  --header-bg:#2C4626;   /* CI 초록 계열 다크 그린 상단바 */
  --header-line:#456A3D;

  /* 경계선 */
  --bd:#E1E5EB;
  --bd-input:#D7DCE3;
  --bd-input-hover:#B9C1CC;
  --bd-soft:#ECEEF2;

  /* 텍스트 */
  --text:#2B333F;
  --heading:#222A35;
  --muted:#6A7480;
  --muted-2:#7E8898;
  --muted-3:#9AA3AF;

  /* 강조색 (accent) — CI(설대학원 SMP) 초록 계열 */
  --accent:#4C9A31;
  --accent-hover:#42862A;
  --accent-soft:#EDF6E4;
  --accent-soft-hover:#DFF0CF;

  /* 상태색 (저채도) */
  --success:#4E8A6B;
  --success-bg:#EFF3EF;
  --success-fg:#43795C;
  --warning:#B5853C;
  --warning-bg:#F4EEE3;
  --warning-fg:#94702F;
  --danger:#B0564E;
  --danger-bg:#F4EAE8;
  --danger-fg:#A1483F;
  --danger-soft-bg:#F7EBE9;
  --danger-soft-bd:#EAD3CF;

  --radius:12px;
  --radius-sm:8px;
  --radius-xs:7px;
  --shadow-card:0 1px 3px rgba(20,30,50,.05);
  --shadow-accent:0 1px 2px rgba(76,154,49,.28);

  --sidebar-w:212px;
  --topbar-h:52px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:13px; line-height:1.6;
  background:var(--surface); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#CDD3DC; border-radius:6px; border:2px solid var(--surface); }
::-webkit-scrollbar-track{ background:transparent; }
input,select,button,textarea{ font-family:inherit; }

/* =========================================================
 * 앱 셸: 상단바 + 사이드바 + 메인
 * ========================================================= */
.app{ height:100vh; display:flex; flex-direction:column; }

.topbar{
  height:var(--topbar-h); flex-shrink:0; background:var(--header-bg);
  display:flex; align-items:center; padding:0 18px; gap:16px;
}
.topbar .brand{ display:flex; align-items:center; gap:9px; }
.topbar .brand-badge{
  width:26px; height:26px; border-radius:6px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.topbar .brand-name{ color:#EAEDF1; font-weight:700; font-size:14.5px; letter-spacing:-.2px; }
.topbar .brand-name .accent{ color:#8FA8C7; }
.topbar .sep{ width:1px; height:22px; background:var(--header-line); }
.topbar nav{ display:flex; gap:2px; }
.topbar nav a{
  padding:7px 13px; color:#AEC0A6; font-weight:500; border-radius:6px; font-size:12.5px;
}
.topbar nav a:hover{ color:#EAEDF1; }
.topbar nav a.active{ color:#fff; font-weight:600; background:#3C5B35; }
.topbar .spacer{ flex:1; }
.topbar .user{
  display:flex; align-items:center; gap:10px; padding:4px 6px 4px 4px;
}
.topbar .user .avatar{
  width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px;
}
.topbar .user .u-name{ color:#E6E9EE; font-weight:600; font-size:12.5px; line-height:1.3; }
.topbar .user .u-sub{ color:#7E8898; font-size:11px; line-height:1.3; }
.topbar .logout{
  height:32px; padding:0 12px; border-radius:var(--radius-xs);
  border:1px solid var(--header-line); background:#24401E; color:#B7C9AF;
  font-size:12px; font-weight:600; cursor:pointer;
}
.topbar .logout:hover{ color:#fff; border-color:#5C7E52; }

.shell{ flex:1; display:flex; min-height:0; }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:#fff;
  border-right:1px solid var(--bd); display:flex; flex-direction:column; padding:14px 12px; overflow-y:auto;
}
.sidebar .sb-group{ font-size:10.5px; font-weight:700; color:var(--muted-3); letter-spacing:.6px; padding:6px 10px 8px; }
.sidebar .sb-group:not(:first-child){ padding-top:18px; }
.sidebar a.sb-link{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--radius-sm);
  color:#5A6573; font-weight:500; margin-bottom:2px;
}
.sidebar a.sb-link:hover{ background:#F1F4F8; }
.sidebar a.sb-link.active{
  color:#fff; background:var(--accent); font-weight:600; box-shadow:0 1px 2px rgba(62,108,166,.3);
}
.sidebar a.sb-link svg{ flex-shrink:0; }
/* 서브메뉴 항목 */
.sidebar a.sb-sub{
  display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:var(--radius-sm);
  color:#5A6573; font-weight:500; margin-bottom:2px; font-size:12.5px;
}
.sidebar a.sb-sub:hover{ background:#F1F4F8; }
.sidebar a.sb-sub.active{ color:#fff; background:var(--accent); font-weight:600; box-shadow:0 1px 2px rgba(62,108,166,.3); }
.sidebar a.sb-sub .sb-cnt{ margin-left:auto; font-size:11px; color:var(--muted-3); }
.sidebar a.sb-sub.active .sb-cnt{ color:#dbe7ff; }
.sidebar a.sb-new{ color:var(--accent); font-weight:700; border:1px dashed var(--accent-soft-hover); background:var(--accent-soft); margin-bottom:8px; justify-content:center; }
.sidebar a.sb-new:hover{ background:var(--accent-soft-hover); }
.sidebar a.sb-new span{ font-size:15px; line-height:1; }
.sidebar a.sb-draft .sb-draft-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar .sb-empty{ font-size:11.5px; color:var(--muted-3); padding:10px; }
.sidebar .sb-group:first-child{ padding-top:2px; }
.sidebar .sb-fill{ flex:1; }
.sidebar .sb-stat{ background:#F1F4F8; border-radius:10px; padding:12px 13px; }
.sidebar .sb-stat .k{ font-size:11px; color:var(--muted-2); font-weight:600; margin-bottom:3px; }
.sidebar .sb-stat .v{ font-size:18px; font-weight:800; color:var(--heading); letter-spacing:-.4px; }
.sidebar .sb-stat .d{ font-size:11px; color:var(--success); font-weight:600; margin-top:3px; }

.main{ flex:1; min-width:0; overflow-y:auto; padding:20px 24px 48px; }

/* 페이지 헤더 */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.page-head .crumb{ font-size:11.5px; color:var(--muted-3); margin-bottom:5px; }
.page-head .crumb .div{ margin:0 6px; color:#C7CDD6; }
.page-head h1{ margin:0; font-size:21px; font-weight:800; letter-spacing:-.5px; color:var(--heading); }
.page-head h1 .sub{ font-size:13px; font-weight:600; color:var(--muted-3); margin-left:6px; }
.page-head .actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* =========================================================
 * 카드 / 섹션
 * ========================================================= */
.card{ background:var(--card); border:1px solid var(--bd); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px; }
.card.flush{ padding:0; overflow:hidden; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 20px; border-bottom:1px solid var(--bd-soft); }
.card-head h2{ margin:0; font-size:15px; font-weight:700; color:var(--heading); display:flex; align-items:center; gap:9px; }
.card-title-bar{ display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.card-title-bar .tick{ width:4px; height:18px; border-radius:2px; background:var(--accent); }
.card-title-bar h2{ margin:0; font-size:16px; font-weight:800; color:var(--heading); letter-spacing:-.3px; }
.card-body{ padding:16px 20px; }
.count-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px;
  border-radius:11px; background:#EEF1F5; color:var(--muted); font-weight:700; font-size:12px;
}

/* =========================================================
 * 버튼
 * ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; padding:0 16px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent; background:transparent;
  color:var(--text); white-space:nowrap; transition:filter .1s,background .1s,border-color .1s;
}
.btn svg{ flex-shrink:0; }
.btn.sm{ height:34px; padding:0 13px; font-size:12.5px; border-radius:var(--radius-sm); }
.btn.xs{ height:30px; padding:0 11px; font-size:12px; border-radius:var(--radius-xs); }
.btn.lg{ height:46px; padding:0 24px; font-size:14px; border-radius:9px; }
.btn.block{ width:100%; }

.btn-primary{ border-color:var(--accent); background:var(--accent); color:#fff; font-weight:700; box-shadow:var(--shadow-accent); }
.btn-primary:hover{ filter:brightness(.94); }
.btn-soft{ border-color:var(--accent-soft); background:var(--accent-soft); color:var(--accent); font-weight:700; }
.btn-soft:hover{ background:var(--accent-soft-hover); }
.btn-outline{ border-color:var(--bd-input); background:#fff; color:#3A4654; }
.btn-outline:hover{ background:var(--surface); border-color:var(--bd-input-hover); }
.btn-ghost{ color:var(--muted); }
.btn-ghost:hover{ background:#EAEEF3; }
.btn-success{ border-color:#4A8264; background:var(--success); color:#fff; font-weight:700; }
.btn-success:hover{ filter:brightness(.95); }
.btn-danger{ border-color:#A85248; background:var(--danger); color:#fff; font-weight:700; }
.btn-danger:hover{ filter:brightness(.95); }
.btn-danger-soft{ border-color:var(--danger-soft-bd); background:var(--danger-soft-bg); color:var(--danger-fg); font-weight:700; }
.btn-danger-soft:hover{ background:#F2DEDA; }
.btn:disabled,.btn[disabled]{ opacity:.55; cursor:not-allowed; filter:none; pointer-events:none; }

.btn-icon{ width:38px; height:38px; padding:0; border:1px solid var(--bd-input); background:#fff; color:#5A6573; border-radius:var(--radius-sm); }
.btn-icon:hover{ background:var(--surface); }
.btn-icon.sm{ width:30px; height:30px; }
.btn-icon.danger{ border-color:var(--danger-soft-bd); background:var(--danger-soft-bg); color:var(--danger-fg); }
.btn-icon.danger:hover{ background:#F2DEDA; }

/* =========================================================
 * 폼 요소
 * ========================================================= */
.field{ display:block; }
.field > label,.label{ display:block; font-size:11.5px; font-weight:600; color:var(--muted-2); margin-bottom:6px; }
.input,.select,textarea.input{
  width:100%; height:38px; border:1px solid var(--bd-input); border-radius:var(--radius-sm);
  padding:0 12px; background:#fff; color:var(--text); font-weight:500; font-size:13px; outline:none;
}
textarea.input{ height:auto; min-height:96px; padding:11px 13px; resize:vertical; line-height:1.6; }
.input:focus,.select:focus,textarea.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input:hover,.select:hover{ border-color:var(--bd-input-hover); }
.select{
  appearance:none; cursor:pointer; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA3AF' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:12px 8px;
}
.field-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 18px; }
@media (max-width:1024px){ .field-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .field-grid{ grid-template-columns:1fr; } }

.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.filter-bar .field{ min-width:130px; }
.filter-bar .select,.filter-bar .input{ min-width:130px; width:auto; }

/* =========================================================
 * 뱃지 / 칩
 * ========================================================= */
.badge{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:var(--radius-xs);
  font-weight:600; font-size:12px; background:#F1F4F8; color:#5A6573;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.success{ background:var(--success-bg); color:var(--success-fg); }
.badge.warning{ background:var(--warning-bg); color:var(--warning-fg); }
.badge.danger{ background:var(--danger-bg); color:var(--danger-fg); }
.badge.accent{ background:var(--accent-soft); color:var(--accent); }

.chip{ display:inline-flex; align-items:center; font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid var(--bd); background:#F5F6F8; color:#5A6573; white-space:nowrap; }
.chip.unit{ background:var(--accent-soft); border-color:#D6ECC5; color:var(--accent); }
.chip.topic{ font-weight:700; background:#EDF6E4; border-color:#D6ECC5; color:#3B7A26; }
.chip.type{ background:#F7F8FA; }
.chip.subtype{ background:#FBFCFE; }
/* 난이도 */
.chip.diff-100{ background:#EFF3EF; color:#43795C; border-color:#D9E6DE; }
.chip.diff-200{ background:#EAF0EC; color:#4E7C68; border-color:#D9E6DE; }
.chip.diff-300{ background:#EAF0F7; color:#3E6CA6; border-color:#D5E2F0; }
.chip.diff-400{ background:#F1EEF6; color:#5A5E86; border-color:#E1DEEE; }
.chip.diff-500{ background:#F4EEE3; color:#94702F; border-color:#E9DCC6; }
.chip.diff-600{ background:#F4EAE8; color:#A1483F; border-color:#EAD3CF; }

/* =========================================================
 * 테이블
 * ========================================================= */
.tbl-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.tbl thead th{
  background:#F7F9FB; color:var(--muted-2); font-size:12px; font-weight:600; text-align:left;
  padding:10px 16px; border-bottom:1px solid var(--bd-soft); white-space:nowrap;
}
table.tbl tbody td{ padding:12px 16px; border-bottom:1px solid #F1F3F6; color:#3A4654; vertical-align:middle; }
table.tbl tbody tr:hover{ background:#FAFBFC; }
table.tbl tbody tr:last-child td{ border-bottom:none; }
table.tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }
table.tbl .center{ text-align:center; }
table.tbl .strong{ font-weight:700; color:var(--heading); }

.empty{ padding:40px 16px; text-align:center; color:var(--muted); }
.empty .icon{ color:var(--muted-3); margin-bottom:10px; }

/* =========================================================
 * 페이지네이션 (function.php paging() 출력과 호환)
 * ========================================================= */
nav.pagination{ margin:18px 0 4px; }
nav.pagination ul{ list-style:none; display:flex; flex-wrap:wrap; gap:4px; padding:0; margin:0; justify-content:center; }
nav.pagination li a,nav.pagination li span{
  display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px;
  border:1px solid var(--bd-input); border-radius:var(--radius-xs); background:#fff; color:#3A4654; font-size:12.5px; font-weight:600;
}
nav.pagination li a:hover{ background:var(--surface); border-color:var(--bd-input-hover); }
nav.pagination li.active span{ background:var(--accent); border-color:var(--accent); color:#fff; }
nav.pagination li.disabled span{ opacity:.4; }

/* =========================================================
 * 문항 카드 (문제 미리보기 — 3분할/리스트 공통)
 * ========================================================= */
.q-card,.make3-card{ border:1px solid var(--bd); border-radius:10px; margin:10px 0; background:#fff; overflow:hidden; }
.make3-card:first-child{ margin-top:0; }
.q-head{ background:linear-gradient(180deg,#F5FBEF 0%,#F9FCF4 100%); border-bottom:1px solid #E6F1D9; padding:8px 12px; }
.q-head-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.q-head-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.q-num{
  display:inline-flex; align-items:center; justify-content:center; height:22px; min-width:22px; padding:0 6px;
  border-radius:999px; font-weight:700; font-size:12px; background:#EDF6E4; border:1px solid #D6ECC5; color:#3B7A26;
}
.q-meta{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.q-body{ padding:12px; }
.q-problem{ margin:2px 0 6px; line-height:1.7; }
.q-controls{ display:flex; gap:6px; margin:6px 0; }
.q-answwrap{ display:none; margin-top:6px; }
.q-answwrap.open{ display:block; }
.q-ansblock{ padding:8px 10px; background:#FAFAFA; border:1px dashed #E5E5E5; border-radius:8px; margin-top:6px; line-height:1.7; }
.q-ansblock b{ color:var(--accent); }

/* 3분할 패널 (problem/answer/explain) */
.panels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
@media (max-width:1024px){ .panels{ grid-template-columns:1fr; } }
.panel{ border:1px solid var(--bd); border-radius:10px; overflow:hidden; background:#fff; }
.panel > h3{ margin:0; padding:10px 12px; font-size:13px; font-weight:700; border-bottom:1px solid var(--bd); }
.panel.problem > h3{ color:var(--accent); }
.panel.answer > h3{ color:var(--warning); }
.panel.explain > h3{ color:#2A6DB0; }
.panel .content{ padding:14px; line-height:1.7; }

/* 만들기 탭바 */
.mk-tabbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.mk-tabs{ display:inline-flex; gap:4px; background:#fff; border:1px solid var(--bd); border-radius:10px; padding:4px; }
.mk-tab{ padding:8px 18px; border-radius:7px; font-size:13px; font-weight:600; color:var(--muted); }
.mk-tab:hover{ background:var(--surface); color:var(--text); }
.mk-tab.active{ background:var(--accent); color:#fff; box-shadow:var(--shadow-accent); }

/* =========================================================
 * 유틸
 * ========================================================= */
.muted{ color:var(--muted); }
.mono{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.tnum{ font-variant-numeric:tabular-nums; }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row.between{ justify-content:space-between; }
.grow{ flex:1; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.hidden{ display:none !important; }
.divider{ height:1px; background:var(--bd-soft); margin:14px 0; }

/* 모달 (확인창) */
.modal-back{ position:fixed; inset:0; z-index:9000; background:rgba(30,38,52,.42); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card{ background:#fff; border-radius:var(--radius); box-shadow:0 20px 60px rgba(20,30,50,.28); width:100%; max-width:420px; padding:22px 22px 18px; animation:modal-in .12s ease; }
@keyframes modal-in{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }
.modal-title{ font-size:16px; font-weight:800; color:var(--heading); margin-bottom:8px; letter-spacing:-.2px; }
.modal-text{ font-size:13px; color:var(--muted); line-height:1.7; white-space:pre-line; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }

/* 처리중 오버레이 (자동 출제 등) — 화면을 어둡게 + 무한 진행바 */
.busy-overlay{ position:fixed; inset:0; z-index:9500; background:rgba(18,24,34,.58); display:flex; align-items:center; justify-content:center; animation:busy-fade .15s ease; }
@keyframes busy-fade{ from{ opacity:0 } to{ opacity:1 } }
.busy-card{ background:#fff; border-radius:14px; padding:26px 30px 24px; min-width:300px; max-width:min(92vw,380px); box-shadow:0 24px 70px rgba(8,14,26,.45); text-align:center; }
.busy-spin{ width:34px; height:34px; margin:0 auto 14px; border:3px solid var(--accent-soft); border-top-color:var(--accent); border-radius:50%; animation:busy-spin .8s linear infinite; }
@keyframes busy-spin{ to{ transform:rotate(360deg) } }
.busy-title{ font-size:14px; font-weight:700; color:var(--heading); margin-bottom:14px; letter-spacing:-.2px; }
.busy-bar{ height:8px; border-radius:999px; background:var(--accent-soft); overflow:hidden; position:relative; }
.busy-bar::before{ content:''; position:absolute; top:0; bottom:0; left:-45%; width:45%; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:busy-slide 1.15s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes busy-slide{ 0%{ left:-45% } 100%{ left:100% } }
.busy-sub{ margin-top:11px; font-size:11.5px; color:var(--muted); }

/* 토스트 / 알림 */
.toast-wrap{ position:fixed; right:20px; bottom:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast{
  min-width:220px; max-width:360px; padding:12px 14px; border-radius:var(--radius-sm); background:#2C4626; color:#EAEDF1;
  font-size:12.5px; box-shadow:0 6px 20px rgba(20,30,50,.2); border:1px solid #456A3D;
}
.toast.success{ background:var(--success); border-color:#4A8264; color:#fff; }
.toast.danger{ background:var(--danger); border-color:#A85248; color:#fff; }