/* ============================================================
   생기부 통합 플랫폼 — 공용 디자인 시스템 (순수 CSS, Tailwind 미사용)
   기존 템플릿 규칙(.btn / .btn.ghost / .btn.gray / table / .card / .badge ...)
   을 그대로 지원하면서, 워크스페이스/랜딩 컴포넌트를 추가한다.
   ============================================================ */

:root{
  --blue:#2563eb; --blue-dk:#1d4ed8; --blue-soft:#eff6ff; --blue-line:#bfdbfe;
  --ink:#1f2937; --sub:#6b7280; --muted:#6b7280; --line:#e5e7eb; --bg:#f9fafb; --card:#fff;
  --emerald:#059669; --emerald-soft:#ecfdf5;
  --amber:#b45309; --amber-soft:#fffbeb;
  --red:#b91c1c; --red-soft:#fef2f2;
  --indigo:#4338ca; --indigo-soft:#eef2ff;
  --ink-navy:#1b2a52;          /* 브랜드 잉크 네이비 (랜딩과 공유) */
  --stamp:#cf3e3e;             /* 인주 — 브랜드 낙관 마크 */
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.04); --shadow-lg:0 12px 32px -12px rgba(30,58,138,.25);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:'Pretendard','Malgun Gothic',system-ui,-apple-system,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0; line-height:1.35;}

/* ---------- 상단바 (base.html + 워크스페이스 공용) ---------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  height:56px; display:flex; align-items:center; gap:20px; padding:0 22px;}
.topbar__brand{display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--ink-navy); font-size:1.02rem;}
.topbar__seal{width:26px; height:26px; flex-shrink:0; border-radius:6px; background:var(--stamp);
  color:#fff; font-size:.8rem; font-weight:800; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);}
.topbar a{color:#4b5563; font-size:.9rem;}
.topbar__links{display:flex; gap:18px;}
.topbar__links a{height:56px; display:flex; align-items:center; border-bottom:2px solid transparent;}
.topbar__links a:hover{color:var(--blue);}
.topbar__links a.active{color:var(--blue); font-weight:700; border-bottom-color:var(--blue);}
.topbar__sp{flex:1;}
.topbar__user{font-size:.88rem; color:var(--sub);}

/* base.html 본문 컨테이너 */
.main{max-width:1024px; margin:24px auto; padding:0 20px;}

/* ---------- 버튼 (기존 규칙 유지) ---------- */
.btn{display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:var(--radius-sm);
  border:1px solid transparent; background:var(--blue); color:#fff; cursor:pointer;
  text-decoration:none; font-size:.9rem; font-weight:600; font-family:inherit; line-height:1; transition:.15s;}
.btn:hover{background:var(--blue-dk);}
.btn.gray{background:#6b7280; border-color:transparent;}
.btn.gray:hover{background:#4b5563;}
.btn.ghost{background:#fff; color:var(--blue); border-color:var(--blue-line);}
.btn.ghost:hover{background:var(--blue-soft);}
.btn.danger{background:#fff; color:var(--sub); border-color:var(--line);}
.btn.danger:hover{background:var(--red-soft); color:var(--red); border-color:#fecaca;}
.btn.emerald{background:var(--emerald);}
.btn.emerald:hover{background:#047857;}
.btn.sm{padding:6px 11px; font-size:.82rem;}
.btn:disabled{opacity:.6; cursor:default;}

/* ---------- 카드 ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px; box-shadow:var(--shadow);}
.card h3{font-size:1rem; margin:0 0 8px;}

/* ---------- 배지 (기존: 인라인 색상 오버라이드 허용) ---------- */
.badge{display:inline-block; font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--indigo-soft); color:var(--indigo);}
.badge.ok{background:var(--emerald-soft); color:var(--emerald);}
.badge.info{background:var(--blue-soft); color:var(--blue);}
.badge.warn{background:var(--amber-soft); color:var(--amber);}
.badge.danger{background:var(--red-soft); color:var(--red);}
.badge.muted{background:#f1f5f9; color:#94a3b8;}

/* ---------- 폼 ---------- */
label{display:block; font-size:.82rem; color:#374151; margin:10px 0 4px;}
input,select,textarea{width:100%; padding:9px 10px; border:1px solid #d1d5db; border-radius:var(--radius-sm);
  font-family:inherit; font-size:.9rem; color:var(--ink); background:#fff;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12);}
textarea{min-height:110px; resize:vertical;}

/* ---------- 테이블 (bare element) ---------- */
table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:middle;}
th{background:#f9fafb; color:#6b7280; font-weight:600;}
tr:last-child td{border-bottom:none;}

/* ---------- 메시지 ---------- */
.msg{padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:10px; font-size:.88rem;}
.msg.success{background:var(--emerald-soft); color:var(--emerald);}
.msg.error{background:var(--red-soft); color:var(--red);}
.msg.info{background:var(--blue-soft); color:var(--blue);}

/* ---------- 유틸 ---------- */
.muted{color:var(--sub);}
.row{display:flex; gap:12px; flex-wrap:wrap;}
.row>div{flex:1; min-width:150px;}
.sp{flex:1;}

/* ---------- 대시보드 진행바 ---------- */
.progress{background:#e5e7eb; border-radius:999px; height:10px; overflow:hidden;}
.progress__bar{background:linear-gradient(90deg,var(--blue),#4f83f7); height:10px; border-radius:999px; transition:width .4s ease;}

/* ============================================================
   허브 대시보드
   ============================================================ */
.page-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:6px 0 22px;}
.page-head h1{font-size:1.5rem; font-weight:800; color:var(--ink-navy); margin:0 0 2px;}
.page-head p{margin:0; color:var(--sub); font-size:.92rem;}
.page-head .sp{flex:1;}

.hub-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:22px;}
.hub-stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.hub-stat .num{font-size:1.65rem; font-weight:800; color:var(--ink-navy); font-variant-numeric:tabular-nums; line-height:1.2;}
.hub-stat .num.blue{color:var(--blue);}
.hub-stat .num.ok{color:var(--emerald);}
.hub-stat .lab{color:var(--sub); font-size:.8rem; margin-top:2px;}

.hub-feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:28px;}
.hub-feat{position:relative; display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); transition:.16s; color:inherit;}
.hub-feat:hover{border-color:var(--blue-line); box-shadow:0 10px 26px -12px rgba(37,99,235,.35); transform:translateY(-2px);}
.hub-feat__ico{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-size:1.25rem; margin-bottom:10px;}
.hub-feat__ico.gen{background:var(--blue-soft);}
.hub-feat__ico.review{background:var(--amber-soft);}
.hub-feat__ico.export{background:var(--emerald-soft);}
.hub-feat__ico.gpt{background:var(--indigo-soft);}
.hub-feat h3{font-size:1.02rem; margin:0 0 4px; color:var(--ink);}
.hub-feat p{margin:0; color:var(--sub); font-size:.85rem; line-height:1.55;}
.hub-feat__go{position:absolute; top:16px; right:16px; color:#c2cbdb; font-weight:700; transition:.16s;}
.hub-feat:hover .hub-feat__go{color:var(--blue); transform:translateX(2px);}
.hub-feat--off{opacity:.55; pointer-events:none; background:#fafbfd;}
.hub-feat--off .hub-feat__go{display:none;}
.hub-feat__off-badge{position:absolute; top:16px; right:14px; font-size:.68rem; font-weight:700;
  background:#f1f5f9; color:#94a3b8; border-radius:999px; padding:3px 9px;}

.hub-sec{display:flex; align-items:center; gap:10px; margin:0 0 12px;}
.hub-sec h2{font-size:1.08rem; font-weight:800; color:var(--ink-navy); margin:0;}
.hub-empty{text-align:center; padding:36px 20px; color:var(--sub);}
.hub-empty a{color:var(--blue); font-weight:600;}

/* ============================================================
   생성 워크스페이스 (3-pane 마스터·디테일)
   ============================================================ */
.ws{display:flex; height:calc(100vh - 56px);}
.ws__pane{display:flex; flex-direction:column; background:#fff; flex-shrink:0;}
.ws__pane--students{width:256px; border-right:1px solid var(--line);}
.ws__pane--areas{width:300px; border-right:1px solid var(--line);}
.ws__pane--detail{flex:1; background:var(--bg); overflow-y:auto;}
.ws__head{padding:12px; border-bottom:1px solid #f1f5f9;}
.ws__caption{padding:8px 12px; font-size:.72rem; font-weight:600; color:#9ca3af; display:flex; justify-content:space-between;}
.ws__scroll{overflow-y:auto; flex:1; padding:0 8px 12px;}
.ws__empty,.ws__detail-empty{flex:1; display:grid; place-items:center; text-align:center; color:#9ca3af; font-size:.9rem; padding:24px;}
.ws__detail-empty{height:100%;}
.ws__search{margin-top:8px;}
.ws__scroll::-webkit-scrollbar,.ws__pane--detail::-webkit-scrollbar{width:8px;}
.ws__scroll::-webkit-scrollbar-thumb,.ws__pane--detail::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:4px;}

/* 학생 항목 */
.stu-item{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px;
  border-radius:var(--radius-sm); border:1px solid transparent; background:none; cursor:pointer;
  font-family:inherit; margin-bottom:2px; color:var(--ink);}
.stu-item:hover{background:#f9fafb;}
.stu-item.active{background:var(--blue-soft); border-color:var(--blue-line);}
/* 번호 배지: 학번(9자리)도 넘치지 않게 원형 대신 가변폭 박스 */
.stu-item__num{min-width:24px; height:22px; padding:0 7px; flex-shrink:0; border-radius:6px;
  background:#e5e7eb; color:#4b5563; font-size:.7rem; display:inline-flex; align-items:center;
  justify-content:center; white-space:nowrap; font-variant-numeric:tabular-nums;}
.stu-item.active .stu-item__num{background:var(--blue); color:#fff;}
.stu-item__name{flex:1; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.stu-item__cnt{font-size:.75rem; color:#9ca3af;}
.stu-item__cnt.done{color:var(--emerald); font-weight:700;}

/* 영역 항목 */
.area-head{display:flex; align-items:center; gap:8px; padding:12px; border-bottom:1px solid #f1f5f9;}
.area-head__num{min-width:28px; height:24px; padding:0 8px; flex-shrink:0; border-radius:6px;
  background:var(--blue); color:#fff; font-size:.72rem; display:inline-flex; align-items:center;
  justify-content:center; white-space:nowrap; font-variant-numeric:tabular-nums;}
.area-head__name{font-weight:700; font-size:.9rem;}
.area-head__meta{font-size:.72rem; color:#9ca3af;}
.area-item{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:10px 12px;
  border-radius:var(--radius-sm); border:1px solid transparent; background:none; cursor:pointer;
  font-family:inherit; margin-bottom:2px; color:var(--ink);}
.area-item:hover{background:#f9fafb;}
.area-item.active{background:var(--blue-soft); border-color:var(--blue-line);}
.area-item__main{flex:1; min-width:0;}
.area-item__name{font-size:.9rem; font-weight:500;}
.area-item.active .area-item__name{font-weight:700; color:var(--blue-dk);}
.area-item__meta{font-size:.72rem; color:#9ca3af;}
.area-group{margin:8px 0 2px; padding:4px 12px; font-size:.72rem; font-weight:700; color:#6b7280; display:flex; align-items:center; gap:6px;}
.area-sub{padding-left:24px;}
.area-add{display:flex; align-items:center; gap:6px; width:calc(100% - 24px); text-align:left; margin:2px 0 8px 24px;
  padding:7px 12px; border:1px dashed #cbd5e1; border-radius:var(--radius-sm); background:none;
  color:var(--blue); font-size:.82rem; font-family:inherit; cursor:pointer;}
.area-add:hover{background:var(--blue-soft); border-color:var(--blue-line);}

/* 상세 패널 */
.detail{max-width:760px; margin:0 auto; padding:24px;}
.detail__head{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.detail__eyebrow{font-size:.75rem; color:var(--blue); font-weight:700;}
.detail__title{font-size:1.3rem; font-weight:800;}
.detail__body{white-space:pre-wrap; font-size:.92rem; color:#374151; line-height:1.7;}
.detail__note{font-size:.75rem; color:#9ca3af; margin-top:8px;}
.detail__actions{display:flex; align-items:flex-end; gap:12px; margin-top:12px;}
.payload-box{margin-top:8px; background:#f3f4f6; border-radius:var(--radius-sm); padding:8px 12px;
  font-family:'D2Coding',Consolas,monospace; font-size:.78rem; color:#6b7280; white-space:pre-wrap;}

/* ============================================================
   관리 콘솔 (사이드바 레이아웃)
   ============================================================ */
.console{display:flex; min-height:calc(100vh - 56px);}
.console__side{width:210px; flex-shrink:0; background:#fff; border-right:1px solid var(--line); padding:14px 10px;}
.console__side .grp{font-size:.7rem; font-weight:700; color:#9ca3af; padding:14px 10px 4px;}
.console__side a{display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:var(--radius-sm); color:#374151; font-size:.9rem; margin-bottom:2px;}
.console__side a:hover{background:#f3f4f6;}
.console__side a.active{background:var(--blue-soft); color:var(--blue-dk); font-weight:700;}
.console__side .role{margin:0 4px 8px; padding:8px 10px; border-radius:var(--radius-sm); background:#f1f5f9; font-size:.78rem; color:var(--sub);}
.console__main{flex:1; padding:24px 28px; max-width:1100px;}
.console__main h1{font-size:1.4rem; margin:0 0 16px;}
.grid-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin-bottom:20px;}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-align:center; box-shadow:var(--shadow);}
.stat .num{font-size:1.7rem; font-weight:800; color:var(--blue);}
.stat .num.ok{color:var(--emerald);}
.stat .lab{color:var(--sub); font-size:.82rem;}
.tabs{display:flex; gap:6px; margin-bottom:14px;}
.tabs a{padding:7px 14px; border-radius:999px; font-size:.85rem; background:#f1f5f9; color:#4b5563;}
.tabs a.active{background:var(--blue); color:#fff; font-weight:600;}

/* 조직도 */
.org-school{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow);}
.org-school__head{display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.org-school__name{font-size:1.1rem; font-weight:800;}
.org-grade{margin-bottom:10px;}
.org-grade__label{font-size:.78rem; font-weight:700; color:#6b7280; margin-bottom:6px;}
.org-classes{display:flex; flex-wrap:wrap; gap:10px;}
.org-class{border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-width:150px; background:#f9fafb;}
.org-class__title{font-weight:700; font-size:.9rem;}
.org-class__meta{font-size:.75rem; color:var(--sub); margin:2px 0 6px;}
.org-chip{display:inline-block; background:var(--blue-soft); color:var(--blue-dk); font-size:.72rem; padding:2px 8px; border-radius:999px; margin:2px 2px 0 0;}

/* 필터 바 + 페이지네이션 */
.filters{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:12px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);}
.filters .fg{display:flex; flex-direction:column;}
.filters .fg label{margin:0 0 3px; font-size:.72rem; color:#9ca3af;}
.filters .fg input, .filters .fg select{padding:7px 9px; font-size:.85rem; min-width:120px;}
.filters .fg.grow{flex:1; min-width:160px;}
.filters .fg.grow input{width:100%;}
.pager{display:flex; align-items:center; gap:6px; margin-top:12px; font-size:.85rem;}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .ws{flex-direction:column; height:auto;}
  .ws__pane--students,.ws__pane--areas{width:100%; max-height:300px; border-right:none; border-bottom:1px solid var(--line);}
  .topbar__links{display:none;}
  .console{flex-direction:column;}
  .console__side{width:100%; border-right:none; border-bottom:1px solid var(--line);}
}