/* ── 흰 배경 학생용 UI · 단일 라이트 테마 (자람AI) ── */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FBFDFE;
  --ink:#16202B; --muted:#5E7185; --faint:#8FA0B1;
  --border:#E3EBF3; --border-strong:#CFDCEA;
  --accent:#0E6BA8; --accent-2:#16A6BD; --accent-weak:#EAF3FA;
  --good:#1E9E6A; --good-weak:#E7F5EE; --warn:#E0A339; --bad:#D2544B;
  --radius:16px; --radius-sm:10px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(16,40,68,.05), 0 8px 24px rgba(16,40,68,.06);
  --shadow-sm:0 1px 2px rgba(16,40,68,.06);
  --font:"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; font-size:15px;
}
h1,h2,h3{ margin:0; line-height:1.25; letter-spacing:-.02em; text-wrap:balance; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
.num{ font-variant-numeric:tabular-nums; }

/* ── 앱 셸 ── */
.app{ max-width:1120px; margin:0 auto; padding:0 20px 64px; }

/* ── 상단바 ── */
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(245,248,251,.86);
  backdrop-filter:saturate(1.1) blur(8px);
  display:flex; align-items:center; gap:16px;
  padding:14px 4px; border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand .badge{ width:38px; height:38px; border-radius:26%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.brand .badge svg{ width:62%; height:62%; }
.brand .wm{ font-weight:800; font-size:19px; letter-spacing:-.03em; }
.brand .wm .ai{ color:var(--accent); }
.brand .tag{ font-size:10px; font-weight:700; letter-spacing:.16em; color:var(--faint); }
.topbar .spacer{ flex:1; }
.keychip{ font-size:11.5px; color:var(--muted); font-weight:700; background:var(--surface-2);
  border:1px solid var(--border); padding:6px 11px; border-radius:var(--radius-pill); white-space:nowrap; }
.changekey{ border:1px solid var(--border-strong); background:var(--surface); color:var(--muted);
  font-weight:700; font-size:12.5px; padding:7px 13px; border-radius:var(--radius-pill); white-space:nowrap; }
.changekey:hover{ color:var(--accent); border-color:var(--accent); }

/* ── 인트로 ── */
.intro{ margin:22px 2px 18px; }
.intro h1{ font-size:26px; font-weight:800; }
.intro p{ margin:8px 0 0; color:var(--muted); max-width:60ch; }

/* ── 탭 ── */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--border); margin:20px 0 22px; flex-wrap:wrap; }
.tabs button{
  border:0; background:transparent; color:var(--muted); font-weight:700; font-size:15px;
  padding:11px 6px; margin:0 10px -1px 0; border-bottom:2.5px solid transparent; transition:.15s;
  display:inline-flex; align-items:center; gap:7px;
}
.tabs button[aria-selected="true"]{ color:var(--accent); border-bottom-color:var(--accent); }
.tabs button .n{ font-size:11px; color:var(--faint); font-weight:800; }
/* ── 좌측 LNB 레이아웃 ── */
.wsplit{ display:flex; align-items:flex-start; gap:24px; }
.lnb{ flex:0 0 190px; width:190px; }
.lnb .tabs{ flex-direction:column; gap:3px; border-bottom:0; margin:6px 0 0; }
.lnb .tabs button{ width:100%; text-align:left; justify-content:flex-start; margin:0; padding:11px 14px; border-radius:10px; border-bottom:0; font-size:14.5px; }
.lnb .tabs button:hover{ background:var(--surface-2); }
.lnb .tabs button[aria-selected="true"]{ background:var(--accent-weak); color:var(--accent); border-bottom-color:transparent; }
.wmain{ flex:1 1 auto; min-width:0; }
@media(max-width:820px){ .wsplit{ flex-direction:column; gap:10px; } .lnb{ width:100%; } .lnb .tabs{ flex-direction:row; flex-wrap:wrap; } .lnb .tabs button{ width:auto; } }

/* ── 카드 ── */
.grid{ display:grid; gap:18px; }
@media(min-width:780px){ .grid.two{ grid-template-columns:1fr 1fr; align-items:start; } }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.card > .head{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.card > .head h3{ font-size:16px; font-weight:800; }
.sub{ color:var(--muted); font-size:13.5px; margin:-6px 0 14px; }

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.row.mt{ margin-top:14px; }

/* ── 버튼 ── */
.btn{ border:0; border-radius:var(--radius-sm); font-weight:800; font-size:14.5px; padding:12px 20px;
  background:var(--accent); color:#fff; display:inline-flex; align-items:center; gap:8px; transition:.15s; }
.btn:hover{ background:#0b5c90; }
.btn.ghost{ background:var(--surface); color:var(--accent); border:1px solid var(--border-strong); }
.btn.ghost:hover{ background:var(--accent-weak); }
.btn.block{ width:100%; justify-content:center; }
.btn.sm{ padding:8px 14px; font-size:13px; }

/* ── 영상 플레이어 ── */
.player{ aspect-ratio:16/9; border-radius:var(--radius-sm); background:
  radial-gradient(120% 120% at 30% 20%, #1c6fa6, #0d3f66); position:relative; overflow:hidden; }
.player .play{ position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; }
.player .play::after{ content:""; border-left:16px solid var(--accent); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }
/* 로딩(영상 받아오는 중) 회전 스피너 */
.player .vspin{ position:absolute; inset:0; margin:auto; width:48px; height:48px; border-radius:50%; border:5px solid rgba(255,255,255,.28); border-top-color:#fff; animation:vspin 0.9s linear infinite; }
@keyframes vspin{ to{ transform:rotate(360deg); } }

/* ── 자막 뷰어 ── */
.transcript{ flex:1 1 0; min-height:240px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); scroll-behavior:smooth; }
.tline{ display:flex; gap:12px; padding:9px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; }
.tline:hover{ background:var(--accent-weak); }
.tline:last-child{ border-bottom:0; }
.tline .ts{ color:var(--accent); font-weight:800; font-size:12.5px; flex:0 0 auto; padding-top:1px; }
.tline.active{ background:var(--accent-weak); }
.glossary{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:12.5px; font-weight:700;
  color:var(--accent); background:var(--accent-weak); padding:7px 12px; border-radius:var(--radius-pill); }
.summary-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; }
.summary-card .l{ font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--accent); }
.summary-card p{ margin:6px 0 0; font-size:14px; }

/* ── AI 조교 채팅 ── */
.chat-wrap{ max-width:760px; margin:0 auto; }
.subjects{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.subjects button{ border:1px solid var(--border-strong); background:var(--surface); color:var(--muted);
  font-weight:700; font-size:13.5px; padding:8px 15px; border-radius:var(--radius-pill); }
.subjects button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; min-height:340px; display:flex; flex-direction:column; gap:14px; }
.msg{ display:flex; gap:10px; max-width:88%; }
.msg .av{ width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:15px; }
.msg.ai .av{ background:var(--accent); }
.msg.ai .av svg{ width:60%; height:60%; }
.bubble{ padding:12px 15px; border-radius:14px; font-size:14.5px; }
.msg.ai .bubble{ background:var(--accent-weak); border-top-left-radius:5px; }
/* 실시간 "답변중" 타이핑 애니메이션 */
.bubble.typing{ display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:700; }
.bubble.typing .tdots{ display:inline-flex; gap:3px; }
.bubble.typing .tdots i{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; animation:tdot 1.2s infinite ease-in-out; }
.bubble.typing .tdots i:nth-child(2){ animation-delay:.2s; }
.bubble.typing .tdots i:nth-child(3){ animation-delay:.4s; }
@keyframes tdot{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
.msg.me{ align-self:flex-end; flex-direction:row-reverse; }
.msg.me .bubble{ background:var(--accent); color:#fff; border-top-right-radius:5px; }
.msg.me .av{ background:var(--surface-2); border:1px solid var(--border); font-size:12px; font-weight:800; color:var(--muted); }
.ev-toggle{ margin-top:9px; border:1px solid var(--border-strong); background:var(--surface); color:var(--muted);
  font-family:inherit; font-size:12px; font-weight:700; padding:4px 11px; border-radius:var(--radius-pill); cursor:pointer; }
.ev-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.evidence{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.ev{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--accent);
  background:var(--surface); border:1px solid var(--border-strong); padding:5px 11px; border-radius:var(--radius-pill); }
.ev.doc{ color:var(--accent-2); }
.ev-ts{ cursor:pointer; font:inherit; font-weight:800; color:#fff; background:var(--accent); border:0;
  padding:2px 8px; border-radius:var(--radius-pill); white-space:nowrap; }
.ev-ts:hover{ filter:brightness(1.08); }
.ev-tsx{ font-variant-numeric:tabular-nums; color:var(--muted); }
.more{ margin-top:10px; }
.suggest{ display:flex; gap:8px; flex-wrap:wrap; }
.suggest button{ border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink);
  font-size:13px; font-weight:600; padding:8px 13px; border-radius:var(--radius-pill); text-align:left; }
.suggest button:hover{ border-color:var(--accent); color:var(--accent); }
.composer{ display:flex; gap:10px; margin-top:14px; }
.composer textarea{ flex:1; resize:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:12px 14px; font-family:inherit; font-size:14.5px; height:48px; }
.composer textarea:focus{ outline:2px solid var(--accent-weak); border-color:var(--accent); }

/* 강의 챗봇: 질문 내역 사이드 리스트 + 대화 본문 */
#lecChat.chat-wrap{ max-width:none; display:flex; gap:16px; align-items:stretch; }
#lecChat .chat-main{ flex:1; min-width:0; }
/* 사이드바 높이 = 채팅(입력창 포함) 열 높이. 내역이 많으면 사이드바 안에서만 스크롤 */
.chat-hist{ flex:0 0 236px; width:236px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:0; align-self:stretch; position:relative; overflow:hidden; }
.chat-hist-scroll{ position:absolute; inset:0; overflow-y:auto; padding:13px; }
/* 질문내역 헤더 = 햄버거 토글(사이드바 안) */
.chat-hist-h{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:13px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--border);
  margin-bottom:11px; padding:2px 2px 10px; }
.chat-hist-h .ham{ font-size:16px; line-height:1; color:var(--muted); }
.chat-hist-h:hover{ color:var(--accent); }
.chat-hist-h:hover .ham{ color:var(--accent); }
.chat-hist-list{ display:flex; flex-direction:column; gap:7px; }
.chat-hist-item{ text-align:left; width:100%; border:1px solid var(--border); background:var(--surface-2);
  border-radius:10px; padding:9px 11px; cursor:pointer; font-family:inherit; }
.chat-hist-item:hover{ border-color:var(--accent); }
.chat-hist-item .q{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chat-hist-item .m{ display:flex; gap:6px; align-items:center; margin-top:6px; font-size:11px; color:var(--muted); }
.chat-hist-item .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.chat-hist-item .dot.ok{ background:#16a34a; }
.chat-hist-item .dot.no{ background:#cbd5e1; }
.chat-hist-empty{ font-size:12px; color:var(--muted); padding:16px 4px; text-align:center; line-height:1.5; }
/* 접힘 상태: 사이드바를 얇은 레일로 축소(헤더 ☰만 보임), 다시 누르면 펼침 */
#lecChat.hist-collapsed .chat-hist{ flex-basis:46px; width:46px; }
#lecChat.hist-collapsed .chat-hist-scroll{ padding:13px 0; }
#lecChat.hist-collapsed .chat-hist-h{ justify-content:center; gap:0; padding:2px 0 10px; border-bottom:0; }
#lecChat.hist-collapsed .chat-hist-h .ht-label{ display:none; }
#lecChat.hist-collapsed .chat-hist-list{ display:none; }
@media (max-width: 880px){
  #lecChat.chat-wrap{ flex-direction:column; }
  .chat-hist{ flex-basis:auto; width:auto; height:210px; }
}

/* ── 강의 스테이지: 영상 | 자막 | 요약 ── */
.vidmeta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:13.5px; color:var(--muted); }
.vidmeta b{ color:var(--ink); }
/* 자막(근거)·강의 자료 한 번에 접기 */
.aux-bar{ display:flex; justify-content:flex-end; margin-bottom:12px; }
.aux-toggle{ border:1px solid var(--border-strong); background:var(--surface); color:var(--muted);
  font-family:inherit; font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:var(--radius-pill); cursor:pointer; }
.aux-toggle:hover{ border-color:var(--accent); color:var(--accent); }
#lecVideo.aux-hidden #subtitleCol{ display:none; }
.lec-stage{ display:flex; gap:16px; align-items:stretch; }
.lec-main{ flex:1 1 auto; min-width:0; }
.lec-sub{ width:326px; flex:0 0 auto; display:flex; flex-direction:column; }
@media(max-width:880px){ .lec-stage{ flex-direction:column; } .lec-sub{ width:100%; } }
.vctrl{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.vc-row{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.vc-right{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.vcbtn{ border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font-weight:700; font-size:12.5px; padding:7px 12px; border-radius:9px; }
.vcbtn:hover{ border-color:var(--accent); color:var(--accent); }
.vc-play{ min-width:92px; }
.vc-speed-l{ font-size:11.5px; color:var(--muted); font-weight:700; min-width:34px; text-align:right; }
.vc-speed{ display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-pill); padding:3px; gap:2px; }
.vc-speed button{ border:0; background:transparent; color:var(--muted); font-weight:700; font-size:12px; padding:5px 11px; border-radius:var(--radius-pill); }
.vc-speed button.on{ background:var(--accent); color:#fff; }
@keyframes flashk{ 0%{ box-shadow:0 0 0 3px var(--accent); } 100%{ box-shadow:var(--shadow); } }
.flash{ animation:flashk 1.3s ease-out; }
@media (prefers-reduced-motion:reduce){ .flash{ animation:none; } }

/* ── 강의 상세 헤더 · 하위탭 ── */
.lecdetail-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.ld-title{ font-weight:800; font-size:17px; color:var(--ink); }
.ld-meta{ font-size:13px; color:var(--muted); margin-top:2px; }
.ld-meta b{ color:var(--ink); }
.inner-seg{ display:inline-flex; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:4px; gap:2px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.inner-seg button{ border:0; background:transparent; color:var(--muted); font-weight:800; font-size:14px; padding:9px 20px; border-radius:var(--radius-pill); }
.inner-seg button[aria-selected="true"]{ background:var(--accent); color:#fff; }

/* ── 문제은행(쪽지시험) ── */
.quiz-topbar{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.qt-title{ font-weight:800; font-size:24px; color:var(--ink); }
.qt-score{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--border); padding:5px 11px; border-radius:var(--radius-pill); font-variant-numeric:tabular-nums; }
.qcard{ margin-bottom:14px; }
#lecQList .qcard{ padding-top:14px; border-top:1px solid var(--border); }
#lecQList .qcard:first-child{ padding-top:0; border-top:0; }
.qhh{ font-size:15px; line-height:1.6; margin-bottom:12px; }
.qhh b{ margin:0 6px 0 2px; color:var(--accent); }
.qbadge{ display:inline-block; font-size:11px; font-weight:800; padding:2px 9px; border-radius:var(--radius-pill); margin-right:8px; vertical-align:middle; }
.qbadge.mc{ background:#e3eefa; color:#2563a8; }
.qbadge.ox{ background:#fbf0d8; color:#a9791c; }
.qopts{ display:flex; flex-direction:column; gap:8px; }
.qopts.ox{ flex-direction:row; }
.qopt{ text-align:left; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
  font-size:14px; padding:11px 14px; border-radius:10px; display:flex; align-items:center; gap:10px; }
.qopts.ox .qopt{ flex:1; justify-content:center; font-weight:800; font-size:16px; }
.qopt .qnn{ width:22px; height:22px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--muted); flex:0 0 auto; }
.qopt:not(:disabled):hover{ border-color:var(--accent); }
.qopt.sel{ border-color:var(--accent); background:var(--accent-weak); font-weight:700; }
.qopt.right{ border-color:var(--good); background:var(--good-weak); color:#12694a; font-weight:700; }
.qopt.right .qnn{ background:var(--good); color:#fff; border-color:var(--good); }
.qopt.wrong{ border-color:var(--bad); background:#fbeeed; color:#a23a32; }
.qopt.wrong .qnn{ background:var(--bad); color:#fff; border-color:var(--bad); }
.qopt:disabled{ cursor:default; }
.qexp{ margin-top:12px; padding:12px 14px; border-radius:10px; font-size:13.5px; }
.qexp.ok{ background:var(--good-weak); color:#155e43; }
.qexp.no{ background:#fbeeed; color:#8f342c; }
.qexp .qexp-t{ margin:7px 0 11px; color:var(--ink); line-height:1.6; }
.src-jump{ display:inline-block; border:1px solid #bcd8ee; background:var(--accent-weak); color:var(--accent);
  border-radius:8px; padding:6px 11px; font-size:12.5px; font-weight:700; cursor:pointer; }
.src-jump:hover{ background:#dcecf8; }

/* ── 강의목록 테이블 ── */
.lec-table{ width:100%; table-layout:fixed; border-collapse:collapse; font-size:14px; }
.lec-table td, .lec-table th{ overflow:hidden; text-overflow:ellipsis; }
.lec-table th{ text-align:center; background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:800; padding:11px 14px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.lec-table td{ padding:12px 14px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); vertical-align:middle; text-align:center; }
.lec-table th:last-child, .lec-table td:last-child{ border-right:0; }
.lec-table tr:last-child td{ border-bottom:0; }
/* 회차 목록: 제목(가변 열)이 넓은 화면에서 과하게 커지지 않게 카드 폭 제한 */
/* 회차목록 카드도 과목목록과 동일 폭(전체)으로 — max-width 제거 */
#roundListView > .card{ max-width:none; }
.lt-round{ font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.lt-title{ font-weight:700; }
.lt-wst{ text-align:center; }
.wst{ display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:var(--radius-pill); white-space:nowrap; vertical-align:middle; }
.wst.none{ color:var(--muted); background:var(--surface-2); border:1px solid var(--border); }
.wst.ing{ color:var(--accent); background:var(--accent-weak); }
.wst.done{ color:#fff; background:var(--accent); }
/* 강의 자료 목록 + 첨부 다운로드 */
.mat-row{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--border); font-size:13.5px; }
.mat-row:last-child{ border-bottom:0; }
.mat-ic{ font-size:16px; }
.mat-name{ flex:1; font-weight:700; color:var(--ink); }
.mat-type,.mat-size{ font-size:12px; color:var(--muted); white-space:nowrap; }
.mat-dl{ font-size:12px; font-weight:800; color:#fff; background:var(--accent); padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; }
.mat-dl:hover{ filter:brightness(1.08); }
.dl-link{ color:var(--accent); font-weight:700; }
.reply-att{ margin-top:8px; font-size:13px; }
.lt-by{ color:var(--muted); font-size:13px; }
.lt-date{ color:var(--faint); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* 단과반: 수강 과목 테이블(강의구분·제목·수강하기 → 회차 목록) */
.subj-table td{ text-align:center; }
.subj-table td.subj-td-title{ text-align:left; }
.subj-tag{ display:inline-block; font-size:12.5px; font-weight:800; color:var(--accent); background:var(--accent-weak); padding:4px 12px; border-radius:var(--radius-pill); }
.subj-td-title .subj-name{ display:block; font-weight:700; font-size:14.5px; color:var(--ink); }
.subj-td-title .subj-meta{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.subj-go{ white-space:nowrap; }
.lt-actions{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; justify-content:center; white-space:nowrap; }
.lt-q{ font-size:11.5px; color:var(--muted); font-weight:700; margin-right:2px; }
.lt-qbtn{ border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font-weight:700; font-size:12px; padding:6px 11px; border-radius:8px; }
.lt-qbtn:hover{ border-color:var(--accent); color:var(--accent); }

/* ── 게시판 ── */
.board-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.board-top .qt-title{ font-weight:800; font-size:24px; }
.board-top .btn{ margin-left:auto; }
.binp{ width:100%; border:1px solid var(--border-strong); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:14px; }
.binp:focus{ outline:2px solid var(--accent-weak); border-color:var(--accent); }
#panel-board .chat-wrap{ max-width:none; }
.board-table{ width:100%; border-collapse:collapse; font-size:14px; }
.board-table th{ text-align:center; background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:800; padding:11px 14px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.board-table td{ padding:12px 14px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); vertical-align:middle; text-align:center; }
.board-table th:last-child, .board-table td:last-child{ border-right:0; }
.board-table tr:last-child td{ border-bottom:0; }
.bt-title{ font-weight:700; color:var(--ink); cursor:pointer; background:none; border:0; font-size:14px; text-align:left; padding:0; font-family:inherit; }
.bt-title:hover{ color:var(--accent); text-decoration:underline; }
.board-table .bt-th-title, .board-table .bt-titlecell{ text-align:left; }
.bt-ans{ font-size:10.5px; font-weight:800; color:var(--accent-2); background:var(--accent-weak); padding:2px 8px; border-radius:var(--radius-pill); white-space:nowrap; }
.bt-ans.wait{ color:#a9791c; background:#fbf0d8; }
.bt-author,.bt-date{ color:var(--faint); font-size:12.5px; white-space:nowrap; }
.bd-title{ font-size:18px; font-weight:800; }
.bd-meta{ font-size:12.5px; color:var(--faint); margin:6px 0 14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.bd-meta b{ color:var(--muted); }
.bd-body{ font-size:14.5px; line-height:1.75; color:var(--ink); margin-bottom:16px; white-space:pre-wrap; }
.bd-nav{ display:flex; flex-direction:column; margin-top:14px; border-top:1px solid var(--border); }
.bd-navrow{ display:flex; gap:12px; align-items:center; text-align:left; background:none; border:0; border-bottom:1px solid var(--border); padding:12px 6px; font-family:inherit; font-size:13.5px; color:var(--ink); cursor:pointer; }
.bd-navrow:hover .nav-tt{ color:var(--accent); text-decoration:underline; }
.bd-navrow .nav-l{ font-weight:800; color:var(--muted); min-width:52px; flex:0 0 auto; }
.bd-navrow .nav-tt{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-navrow[disabled]{ cursor:default; }
.bd-navrow[disabled] .nav-tt{ color:var(--faint); }
.bd-foot{ display:flex; justify-content:flex-end; margin-top:16px; }
.replies{ display:flex; flex-direction:column; gap:8px; }
.reply{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px 14px; }
.reply-h{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.reply-h b{ font-size:13px; }
.reply-t{ font-size:11.5px; color:var(--faint); }
.reply-b{ font-size:14px; line-height:1.6; }
.ans-tag{ font-size:11px; font-weight:800; color:var(--accent-2); background:var(--accent-weak); padding:2px 9px; border-radius:var(--radius-pill); }
.reply.pending .reply-b{ color:var(--faint); font-style:italic; }

/* 질문 작성 폼 */
.wf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wf-label{ display:block; font-size:12px; font-weight:800; color:var(--muted); margin:0 0 5px 2px; }
select.binp{ width:100%; }
.pf-sec{ font-weight:800; font-size:13.5px; color:var(--ink); margin:22px 0 12px; padding-top:16px; border-top:1px solid var(--border); }
.pf-sec span{ font-weight:600; font-size:12px; color:var(--muted); }
.filedrop{ display:flex; align-items:center; gap:12px; padding:13px 15px; border:1.5px dashed var(--border-strong); border-radius:10px; background:var(--surface-2); cursor:pointer; }
.filedrop:hover{ border-color:var(--accent); background:var(--accent-weak); }
.fd-ic{ width:32px; height:32px; border-radius:8px; background:var(--accent-weak); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; flex:0 0 auto; }
.fd-txt{ font-size:13px; color:var(--muted); } .fd-txt b{ color:var(--accent); }
.fd-name{ margin-top:8px; font-size:12.5px; color:var(--ink); font-weight:600; display:flex; align-items:center; gap:8px; }
.fd-name:empty{ display:none; }
.fd-name .rm{ color:#c0392b; cursor:pointer; font-weight:800; font-size:11.5px; border:1px solid #c0392b; background:#fdecea; border-radius:999px; padding:1px 9px; }
.fd-name .fd-size{ color:var(--faint); font-weight:600; }
.fd-name .fd-status{ font-weight:800; font-size:11.5px; padding:1px 9px; border-radius:999px; }
.fd-name .fd-status.ok{ color:#12805c; background:var(--good-weak); border:1px solid #bfe6d2; }
.fd-name .fd-status.bad{ color:#c0392b; background:#fdecea; border:1px solid #f2b8b2; }
.fd-name.file-bad{ color:#c0392b; }
.ai-qmeta{ font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.ai-qmeta b{ color:var(--ink); }
.ai-qtitle{ font-weight:800; font-size:15px; margin-bottom:6px; }
.ai-qbody{ font-size:14px; color:var(--ink); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:14px; white-space:pre-wrap; }
.ai-answer{ background:var(--accent-weak); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.ai-answer-h{ font-size:12px; font-weight:800; color:var(--accent); margin-bottom:8px; }
.ai-answer-b{ font-size:14px; line-height:1.7; color:var(--ink); white-space:pre-wrap; }
.ai-badge{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; vertical-align:middle; }
.ai-badge:empty{ display:none; }
.ai-evidence{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); }
.ai-evidence:empty{ display:none; }
.ai-ev-h{ font-size:11px; font-weight:800; color:var(--muted); margin-bottom:6px; letter-spacing:.02em; }
.ai-ev-item{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.55; color:var(--muted); padding:3px 0; }
.ai-ev-ts{ flex:none; font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent); }
.ai-ev-tx{ flex:1; }
.sat-row{ display:flex; align-items:center; gap:9px; margin-top:16px; flex-wrap:wrap; }
.sat-q{ font-weight:700; font-size:13.5px; margin-right:4px; }
.sat-msg{ margin-top:4px; padding:12px 14px; border-radius:10px; font-size:13.5px; font-weight:700; }
.sat-msg.ok{ background:var(--good-weak); color:#12805c; border:1px solid #bfe6d2; }
.sat-msg.post{ background:var(--accent-weak); color:var(--accent); border:1px solid #bcdcf0; }

/* ── 로그인 게이트 ── */
.gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.gate-card{ width:100%; max-width:430px; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; box-shadow:var(--shadow); padding:36px 32px; text-align:center; }
.badge-lg{ width:62px; height:62px; border-radius:26%; background:var(--accent); margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; }
.badge-lg svg{ width:60%; height:60%; }
.gate-card h1{ font-size:24px; font-weight:800; }
.gate-card p{ color:var(--muted); font-size:14px; margin:9px 0 24px; }
.field{ display:block; text-align:left; margin-bottom:12px; }
.field span{ display:block; font-size:12px; font-weight:800; color:var(--muted); margin-bottom:6px; }
.field input{ width:100%; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:13px 14px; font-family:inherit; font-size:15px; letter-spacing:.02em; }
.field input:focus{ outline:2px solid var(--accent-weak); border-color:var(--accent); }
.err{ text-align:left; color:var(--bad); font-size:12.5px; font-weight:600; margin:-2px 0 12px; }
.hint{ margin-top:14px; font-size:12px; color:var(--faint); }
.hint b{ color:var(--muted); }

/* ── 유틸 ── */
.hide{ display:none !important; }
.foot{ margin-top:38px; text-align:center; color:var(--faint); font-size:12px; }
.foot b{ color:var(--muted); }
button:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ── 관리자와 동일한 헤더바/사이드바 ── */
.app{ max-width:none; margin:0; padding:0 0 40px; }
.topbar{ background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; padding:0; backdrop-filter:none; display:block; }
.topbar-in{ max-width:1280px; margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:18px; height:60px; }
.nav-title{ font-weight:800; font-size:15px; color:var(--ink); padding-left:16px; margin-left:2px; border-left:1px solid var(--border); }
@media(max-width:640px){ .nav-title{ display:none; } }
.topbar-in .brand .badge{ width:34px; height:34px; border-radius:9px; }
.topbar-in .brand .wm{ font-size:17px; letter-spacing:-.2px; }
.topbar-in .brand .tag{ letter-spacing:1.5px; margin-top:1px; }
.topbar-in .spacer{ flex:1; }
.admin-chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--muted); padding:7px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--surface); }
.admin-chip .ic{ width:16px; height:16px; border-radius:50%; background:var(--accent-weak); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
.btn.neutral{ background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); }
.btn.neutral:hover{ background:var(--surface); border-color:var(--accent); color:var(--accent); }
.layout{ max-width:1280px; margin:0 auto; padding:0 32px; display:flex; align-items:flex-start; }
.sidebar{ flex:0 0 216px; width:216px; padding:18px 12px; border-right:1px solid var(--border); background:var(--surface); align-self:stretch; min-height:calc(100vh - 61px); }
.side-group{ margin-bottom:16px; }
.sg-title{ font-size:11px; font-weight:800; letter-spacing:.4px; color:var(--faint); padding:6px 12px 4px; }
.side-item{ display:block; width:100%; text-align:left; border:0; background:none; padding:9px 12px 9px 22px; font-size:13.5px; font-weight:600; color:var(--muted); border-radius:8px; }
.side-item:hover{ background:var(--surface-2); color:var(--ink); }
.side-item[aria-selected="true"]{ background:var(--accent-weak); color:var(--accent); font-weight:800; }
.layout main{ flex:1; min-width:0; padding:22px; }
@media (max-width:820px){ .layout{ flex-direction:column; } .sidebar{ width:auto; flex:none; border-right:0; border-bottom:1px solid var(--border); min-height:0; display:flex; flex-wrap:wrap; gap:4px 10px; padding:10px 14px; } .sg-title{ width:100%; padding:2px 4px; } }

/* 공지사항 메인 — 관리자처럼 본문 전체 폭 사용 */
#panel-notice .chat-wrap{ max-width:none; margin:0; }
#panel-consult .chat-wrap{ max-width:none; margin:0; }
#panel-profile .chat-wrap{ max-width:none; margin:0; }
#panel-wrong .chat-wrap{ max-width:none; margin:0; }
/* 오답노트 분류 필터 */
.wrong-filter{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 16px; margin-bottom:14px; }
.wrong-filter .binp{ width:auto; min-width:150px; }
.wrong-filter #wfReset{ margin-left:auto; }
/* 오답노트 카드 */
.wrong-card{ margin-bottom:14px; padding:18px; }
.wrong-card:last-child{ margin-bottom:0; }
.wrong-src{ font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:10px; }
.wrong-src .ws-subj{ display:inline-block; font-size:11.5px; font-weight:800; color:var(--accent); background:var(--accent-weak); padding:2px 9px; border-radius:var(--radius-pill); margin-right:8px; }
.wrong-ans{ font-size:13.5px; margin-top:2px; }
.wrong-ans .wa-no{ font-weight:800; color:var(--bad); margin-right:5px; }
.wrong-ans .wa-ok{ font-weight:800; color:var(--good); margin:0 5px 0 16px; }
/* 오답노트 페이징 */
.wpager{ display:flex; gap:6px; justify-content:center; align-items:center; margin-top:18px; flex-wrap:wrap; }
.wpager button{ border:1px solid var(--border-strong); background:var(--surface); color:var(--muted); font-weight:700; font-size:13px; min-width:34px; height:34px; border-radius:8px; cursor:pointer; padding:0 10px; font-family:inherit; }
.wpager button:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.wpager button.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.wpager button:disabled{ opacity:.45; cursor:default; }