/* ══ 교육 현황판 ═════════════════════════════════════════════
   테란반 · 프로토스반 · 저그반 세 교실이 이 화면의 중심입니다.
   단순 필터 버튼이 아니라 각각 하나의 '교실' 로 보이게 만듭니다.

   ⚠️ 종족 색은 엔치원2 전체와 같은 값을 씁니다.
        테란 파랑 #2f6ed6 · 프로토스 노랑 #d79a0d · 저그 보라 #8b45c9
      여기에 다른 색을 새로 적지 마세요. 두 곳이 어긋납니다.
   ══════════════════════════════════════════════════════════ */
.ed-app{ margin-top:6px; }

/* ── 안내 (로그인·가입·권한) ───────────────────────────── */
.ed-note{ text-align:center; padding:44px 20px; }
.ed-note-ic{ font-size:46px; line-height:1; }
.ed-note-t{ font-family:'Jua',sans-serif; font-weight:400; font-size:22px;
  margin:12px 0 6px; color:var(--ink); }
.ed-note-d{ font-size:14px; line-height:1.7; color:var(--ink-2); }
.ed-acts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px; }
.ed-btn{ display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
  padding:11px 20px; border-radius:999px;
  background:var(--surface); border:1.5px solid var(--line-2); color:var(--ink-2); }
.ed-btn:hover{ border-color:var(--pink); color:var(--pink-ink); }
.ed-btn.go{ background:var(--pink); border-color:var(--pink); color:#fff; }
.ed-btn.go:hover{ filter:brightness(1.05); color:#fff; }
.ed-btn.sm{ font-size:13.5px; padding:7px 14px; }
/* 삭제 — 되돌릴 수 있지만 한눈에 구분되게 (2026-09-08) */
.ed-btn.del{ color:#b3313f; border-color:#f0bcc8; background:#fff5f7; }
.ed-btn.del:hover{ background:#ffe9ef; border-color:#e88ba0; color:#8f2634; }

/* ══ ① 종족반 3개 — 낮고 조용하게 ════════════════════════
   화면의 주인공은 오른쪽 교육 내용입니다. 여기는 길잡이만 합니다. */
.ed-rooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:4px 0 16px; }

.room{ position:relative; overflow:hidden; cursor:pointer; text-align:left;
  font-family:inherit; padding:0; border-radius:15px;
  background:var(--surface); border:2px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition:transform .16s, border-color .16s, box-shadow .16s, opacity .16s; }
.room:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); }

.room.on{ border-color:var(--rc); box-shadow:0 6px 20px var(--rc-soft); }
.room.on::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--rc); }
.room:not(.on):not(.empty){ opacity:.68; }
.room:not(.on):hover{ opacity:1; }

.room.empty{ cursor:default; opacity:.66; border-style:dashed; }
.room.empty:hover{ transform:none; box-shadow:0 1px 3px rgba(0,0,0,.04); }

.room-top{ display:flex; align-items:center; gap:9px; padding:10px 14px; color:#fff;
  background:linear-gradient(135deg, var(--rc) 0%, var(--rc-dark) 100%); }
.room-nm{ flex:1; min-width:0; font-family:'Jua',sans-serif; font-weight:400;
  font-size:18px; line-height:1.15; }
.room-en{ display:block; font-size:11px; font-weight:800; letter-spacing:.16em;
  opacity:.72; margin-top:1px; }
.room-go{ flex:none; width:22px; height:22px; border-radius:50%; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.22); }

.room-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); }
.room-n{ background:var(--surface); padding:9px 4px; text-align:center; }
.room-n b{ display:block; font-family:'Jua',sans-serif; font-weight:400;
  font-size:15px; color:var(--rc-ink); }
.room-n span{ display:block; font-size:11px; font-weight:800;
  color:var(--ink-3); margin-top:1px; }

.room-empty{ padding:12px 14px 14px; }
.room-empty b{ display:block; font-size:13.5px; font-weight:800; color:var(--ink-2); }
.room-empty span{ display:block; font-size:13px; color:var(--ink-3); margin-top:3px; }

/* 종족별 색 — 한 곳에서만 정합니다 */
.room.t{ --rc:#2f6ed6; --rc-dark:#1d4ea8; --rc-ink:#2f6ed6; --rc-soft:rgba(47,110,214,.22); }
.room.p{ --rc:#d79a0d; --rc-dark:#a87105; --rc-ink:#b07c05; --rc-soft:rgba(215,154,13,.24); }
.room.z{ --rc:#8b45c9; --rc-dark:#68309b; --rc-ink:#8b45c9; --rc-soft:rgba(139,69,201,.22); }

/* ══ 큰 틀 — 왼쪽 24% 고르는 곳 · 오른쪽 76% 읽는 곳 ═══════ */
.ed-main{ display:grid; grid-template-columns:minmax(240px,24%) 1fr; gap:14px;
  align-items:start; margin-bottom:26px; }
.ed-side{ display:flex; flex-direction:column; gap:12px;
  position:sticky; top:14px; }
.ed-body{ min-width:0; }

/* ══ ② 왼쪽 위 — 작은 월간 달력 ═══════════════════════════ */
.cal{ padding:12px 13px 11px; border-radius:16px;
  background:var(--surface); border:1.5px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.04); }
.cal-h{ display:flex; align-items:center; justify-content:space-between; gap:6px;
  margin-bottom:9px; }
.cal-h b{ font-family:'Jua',sans-serif; font-weight:400; font-size:15.5px;
  color:var(--ink); }
.cal-mv{ width:26px; height:26px; border-radius:50%; cursor:pointer;
  font-family:inherit; font-size:15px; color:var(--ink-3);
  background:var(--surface-2); border:1px solid var(--line); }
.cal-mv:hover{ color:var(--pink-ink); border-color:var(--pink); }

.cal-w, .cal-g{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-wd{ text-align:center; font-size:12px; font-weight:800; color:var(--ink-3);
  padding-bottom:4px; }
.cal-wd.sun{ color:#d4577a; }

.cal-d{ position:relative; aspect-ratio:1; display:flex; align-items:center;
  justify-content:center; font-family:inherit; font-size:13px; color:var(--ink-2);
  background:none; border:1.5px solid transparent; border-radius:50%; padding:0; }
.cal-d.out{ color:var(--line-2); }
.cal-d[disabled]{ cursor:default; }
.cal-d[data-day]{ cursor:pointer; }
.cal-d[data-day]:hover{ background:var(--surface-2); }

/* 교육 있는 날 = 작은 핑크 점 */
.cal-d.has::after{ content:""; position:absolute; bottom:3px; left:50%;
  width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--pink); }
/* 고른 날 = 파란 원 */
.cal-d.on{ background:#2f6ed6; color:#fff; font-weight:800; }
.cal-d.on::after{ background:#fff; }
/* 오늘 = 얇은 테두리만 */
.cal-d.today{ border-color:#2f6ed6; }
.cal-d.today.on{ border-color:#2f6ed6; }

.cal-lg{ display:flex; flex-wrap:wrap; gap:9px; margin-top:10px; padding-top:9px;
  border-top:1px solid var(--line); font-size:12px; color:var(--ink-3); }
.cal-lg span{ display:inline-flex; align-items:center; gap:4px; }
.lg{ width:8px; height:8px; border-radius:50%; }
.lg.has{ background:var(--pink); }
.lg.on{ background:#2f6ed6; }
.lg.today{ background:none; border:1.5px solid #2f6ed6; }

/* ══ ③ 왼쪽 아래 — 학생 목록 (고르는 도구) ════════════════ */
.side-h{ display:flex; align-items:baseline; gap:7px; padding:0 2px;
  font-family:'Jua',sans-serif; font-weight:400; font-size:16px; color:var(--ink); }
.side-h em{ font-style:normal; font-family:inherit; font-size:13px; font-weight:800;
  color:var(--ink-3); }

.ed-studs{ display:flex; flex-direction:column; gap:8px; }
.sc{ display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  font-family:inherit; cursor:pointer; padding:11px 12px; border-radius:14px;
  background:var(--surface); border:2px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition:border-color .16s, box-shadow .16s, background .16s; }
.sc:hover{ border-color:var(--rc); }
.sc.t{ --rc:#2f6ed6; --rc-pale:#eef4fd; }
.sc.p{ --rc:#d79a0d; --rc-pale:#fdf6e6; }
.sc.z{ --rc:#8b45c9; --rc-pale:#f5eefc; }
.sc.on{ border-color:#2f6ed6; background:#f2f7ff;
  box-shadow:0 4px 14px rgba(47,110,214,.16); }

.sc-ph{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--surface-2); border:2px solid var(--line-2); }
.sc.on .sc-ph{ border-color:#2f6ed6; }
.sc-ph.none{ display:flex; align-items:center; justify-content:center; font-size:19px; }
.sc-in{ flex:1; min-width:0; display:block; }
.sc-nm{ display:block; font-family:'Jua',sans-serif; font-weight:400; font-size:15px;
  color:var(--ink); }
.sc-t{ display:block; font-size:13px; color:var(--ink-3); margin-top:2px; }
.sc-t b{ color:var(--ink-2); font-weight:800; }
.sc-t i{ font-style:normal; }
.sc-at{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; }

/* ══ LIVE — 진짜 방송 중일 때만 그려집니다 ═══════════════════
   판정은 lessons-view.js 의 isLive() 한 곳에서만 합니다.
   마우스를 올리면 작은 미리보기(썸네일·제목)가 뜹니다.
   폰에는 hover 가 없으니 누르면 방송으로 갑니다. */
.lv{ position:relative; display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:800; color:#fff; background:#e0335f;
  padding:3px 8px; border-radius:999px; margin-left:5px; vertical-align:2px;
  text-decoration:none; }
.lv i{ width:5px; height:5px; border-radius:50%; background:#fff;
  animation:scLive 2.4s ease-in-out infinite; }
.lv.big{ font-size:12.5px; padding:4px 10px; vertical-align:4px; }
.lv:hover{ filter:brightness(1.08); }
@keyframes scLive{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.lv-pop{ position:absolute; left:50%; bottom:calc(100% + 9px); z-index:40;
  width:230px; margin-left:-115px; padding:0 0 9px; border-radius:12px;
  background:#1d2130; color:#fff; text-align:left; overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .14s, transform .14s, visibility .14s; }
.lv:hover .lv-pop, .lv:focus-visible .lv-pop{
  opacity:1; visibility:visible; transform:translateY(0); }
.lv-pop img{ display:block; width:100%; height:129px; object-fit:cover;
  background:#2a2f42; }
.lv-pop b{ display:block; font-size:13.5px; font-weight:800; padding:8px 11px 0; }
.lv-pop b em{ font-style:normal; font-size:11px; color:#ff8fae; margin-left:4px; }
.lv-pop span{ display:block; font-size:13px; line-height:1.5; color:#c6cbdb;
  padding:3px 11px 0; }
/* 폰에는 hover 가 없습니다 — 미리보기를 아예 만들지 않습니다 */
@media (hover:none){ .lv-pop{ display:none; } }

/* ══ ④ 오른쪽 위 — 고른 학생 요약 ═════════════════════════ */
.hd{ padding:16px 18px 15px; border-radius:18px;
  background:var(--surface); border:1.5px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.04); }
.hd.t{ --rc:#2f6ed6; --rc-pale:#eef4fd; }
.hd.p{ --rc:#d79a0d; --rc-pale:#fdf6e6; }
.hd.z{ --rc:#8b45c9; --rc-pale:#f5eefc; }

.hd-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hd-ph{ width:66px; height:66px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--surface-2); border:3px solid var(--rc); }
.hd-ph.none{ display:flex; align-items:center; justify-content:center; font-size:28px; }
.hd-who{ flex:1; min-width:150px; }
.hd-nm{ font-family:'Jua',sans-serif; font-weight:400; font-size:24px; color:var(--ink); }
.hd-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; }
.hd-race{ font-size:13px; font-weight:800; padding:4px 11px; border-radius:999px;
  color:#fff; background:var(--rc); }
.hd-tea{ font-size:13px; font-weight:800; padding:4px 11px; border-radius:999px;
  color:var(--ink-3); background:var(--surface-2); border:1.5px solid var(--line); }
.hd-tea b{ color:var(--ink); }
/* 최근 교육 선생님 — 담당과 다를 때만 나옵니다.
   담당(.hd-tea)보다 한 톤 옅게 해서 '참고' 로 읽히게 합니다. */
.hd-last{ font-size:13px; font-weight:700; padding:4px 11px; border-radius:999px;
  color:var(--ink-3); background:none; border:1.5px dashed var(--line); }
.hd-last b{ color:var(--ink-2); font-weight:800; }

.hd-nums{ display:flex; gap:1px; flex:none; border-radius:12px; overflow:hidden;
  border:1.5px solid var(--line); }
.hd-nums > div{ padding:9px 18px; text-align:center; background:var(--surface-2); }
.hd-nums b{ display:block; font-family:'Jua',sans-serif; font-weight:400; font-size:19px;
  color:var(--ink); }
.hd-nums span{ display:block; font-size:12px; font-weight:800; color:var(--ink-3);
  margin-top:2px; }

/* 세 가지 요약 — 연한 파랑 · 연한 초록 · 연한 핑크 */
.hd-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.sm{ display:flex; gap:10px; padding:11px 13px; border-radius:14px;
  background:var(--bg2); border:1.5px solid var(--bd); }
.sm-ic{ flex:none; width:32px; height:32px; border-radius:50%; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid var(--bd); }
.sm b{ display:block; font-size:13px; font-weight:800; color:var(--bc); }
.sm p{ margin:3px 0 0; font-size:13px; line-height:1.5; color:var(--ink-2); }
.sm.aim { --bc:#2f6ed6; --bg2:#f1f6fe; --bd:#cfe0f8; }
.sm.good{ --bc:#1f7a55; --bg2:#eff9f3; --bd:#c8e8d7; }
.sm.bad { --bc:#c0526d; --bg2:#fdf1f4; --bd:#f4d2dc; }

/* ══ ⑤ 탭 ═════════════════════════════════════════════════ */
.tabs{ display:flex; gap:4px; margin:16px 0 0; padding:0 2px;
  border-bottom:2px solid var(--line); }
.tab{ font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer;
  padding:11px 17px; color:var(--ink-3);
  background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-2px; }
.tab:hover{ color:var(--ink-2); }
.tab.on{ color:#2f6ed6; border-bottom-color:#2f6ed6; }

.pane{ margin-top:15px; }

/* ══ 보기 방식 — 일지 / 목록 (2026-09-11) ═══════════════════
   탭(.tabs) 아래 한 단 더 얕은 층입니다. 탭과 같은 모양이면
   어느 쪽이 상위인지 헷갈려서, 알약 모양으로 구분했습니다. */
.lg-view{ display:flex; gap:5px; margin:14px 0 2px; }
.lgv{ font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
  padding:7px 14px; border-radius:999px;
  color:var(--ink-3); background:var(--surface-2);
  border:1.5px solid var(--line); }
.lgv:hover{ color:var(--ink-2); }
.lgv.on{ color:#2f6ed6; background:#eef4fd; border-color:#cfe0f8; }

/* ── 목록으로 보기 ──────────────────────────────────────────
   고른 학생 한 명의 '그 달' 기록만. 날짜 · 제목 · 본문 두 줄.
   ⚠️ 다시보기·과제·자료·피드백은 여기 넣지 않습니다 — 훑어보는 게
      목적이라 한 건이 길어지면 그 목적이 사라집니다. */
/* ⚠️ 넓은 화면에서 폭을 안 잡으면 한 줄이 1500px 를 넘어갑니다.
      훑어보는 화면이라 눈이 줄 끝까지 갔다 돌아오면 오히려 느려집니다. */
.ll{ margin-top:12px; max-width:860px; margin-left:auto; margin-right:auto; }
.ll-h{ display:flex; align-items:center; justify-content:center; gap:14px;
  padding:4px 0 14px; }
.ll-h b{ font-family:'Jua',sans-serif; font-weight:400; font-size:20px;
  color:var(--ink); min-width:9em; text-align:center; }
.ll-h button{ font-family:inherit; font-size:17px; line-height:1; cursor:pointer;
  width:34px; height:34px; border-radius:50%;
  color:var(--ink-2); background:var(--surface); border:1.5px solid var(--line); }
.ll-h button:hover{ color:#2f6ed6; border-color:#cfe0f8; background:#eef4fd; }

.ll-d{ margin-bottom:14px; }
/* 날짜는 '묶음 머리' 입니다 — 카드 제목과 같은 무게면 어디서 날이
   바뀌는지 한눈에 안 들어옵니다. 그래서 글꼴을 Jua 로 바꿔
   제목(Pretendard 800)과 층을 나눕니다. */
.ll-dh{ font-family:'Jua',sans-serif; font-weight:400; font-size:17px;
  color:var(--ink); padding-bottom:6px; margin-bottom:8px;
  border-bottom:1.5px dashed var(--line); }
.ll-dh span{ font-family:Pretendard,sans-serif; font-weight:700;
  font-size:13px; color:var(--ink-3); }

/* 한 건 — 통째로 누르는 단추입니다 */
.ll-i{ display:block; width:100%; text-align:left; cursor:pointer;
  font-family:inherit; margin-bottom:6px;
  padding:11px 14px; border-radius:13px;
  background:var(--surface); border:1.5px solid var(--line); }
.ll-i:hover{ border-color:#cfe0f8; background:#f7fafe; }
.ll-t{ font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.35;
  overflow-wrap:anywhere; }
/* 본문은 두 줄까지 — 넘치면 말줄임 */
.ll-p{ font-size:13px; font-weight:500; color:var(--ink-3); line-height:1.5;
  margin-top:5px; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }

.ll-none{ padding:30px 10px 34px; text-align:center;
  font-size:14px; font-weight:700; color:var(--ink-2); }
.ll-none span{ display:inline-block; margin-top:6px;
  font-size:13px; font-weight:500; color:var(--ink-3); }

@media (max-width:700px){
  .ll-h b{ font-size:18px; }
  .ll-dh{ font-size:16px; }
  .ll-i{ padding:11px 12px; }
}

/* ══ ⑥ 교육일지 머리 ══════════════════════════════════════ */
.lg-h{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.lg-at{ font-family:'Jua',sans-serif; font-weight:400; font-size:22px; color:var(--ink); }
.lg-tp{ font-size:14px; font-weight:800; padding:6px 14px; border-radius:999px;
  color:#2f6ed6; background:#eef4fd; border:1.5px solid #cfe0f8; }
.lg-h .sp{ flex:1; }
.lg-mv{ display:flex; align-items:center; gap:4px; }
.lg-mv button{ width:28px; height:28px; border-radius:50%; cursor:pointer;
  font-family:inherit; font-size:15px; color:var(--ink-3);
  background:var(--surface); border:1.5px solid var(--line); }
.lg-mv button:hover:not([disabled]){ color:var(--pink-ink); border-color:var(--pink); }
.lg-mv button[disabled]{ opacity:.35; cursor:default; }
.lg-i{ font-size:13px; font-weight:800; color:var(--ink-3); min-width:44px;
  text-align:center; }
/* 교육시간 — 날짜 줄 안에 들어가는 작은 칩 (2026-09-08).
   예전에는 이 줄 아래에서 한 줄을 통째로 썼습니다. */
.lg-min{ font-size:13px; font-weight:800; color:#6a6152;
  padding:5px 12px; border-radius:999px;
  background:var(--surface-2); border:1.5px solid var(--line); }

/* 교육일지 쓰기·수정 — 날짜 줄 오른쪽 끝의 보통 크기 액션 버튼.
   ⚠️ 눈에는 띄되 일지 본문보다 크면 안 됩니다. .ed-btn 보다 한 단계 작게. */
.lg-w{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  text-decoration:none; white-space:nowrap;
  font-family:inherit; font-size:13px; font-weight:800;
  padding:8px 15px; border-radius:999px;
  background:var(--pink); border:1.5px solid var(--pink); color:#fff; }
.lg-w:hover{ filter:brightness(1.05); color:#fff; }
.lg-w:focus-visible{ outline:2px solid var(--pink-ink); outline-offset:2px; }
/* 기록이 하나도 없을 때 — 안내문 아래 가운데 */
.ed-empty-a{ margin-top:14px; }

/* ══ 프로필 탭 ════════════════════════════════════════════
   맨 위 학생 요약 카드(.hd) 아래로 묶음이 이어집니다. */
.pf-s{ margin-top:16px; }
.pf-s-h{ display:flex; align-items:center; gap:6px; margin-bottom:8px; padding-left:2px;
  font-size:13.5px; font-weight:800; color:var(--ink-2); }
.pf-one{ position:relative; padding:16px 18px; border-radius:16px;
  font-family:'Gaegu',sans-serif; font-size:19px; line-height:1.6; color:#5b4a92;
  background:#f7f4ff; border:1.5px solid #e2dbf7; }
.pf-one em{ display:block; margin-top:6px; font-family:inherit; font-style:normal;
  font-size:13px; color:var(--ink-3); }
.pf{ border-radius:16px; overflow:hidden;
  background:var(--surface); border:1.5px solid var(--line); }
.pf-r{ display:flex; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line);
  font-size:13.5px; }
.pf-r:last-child{ border-bottom:0; }
.pf-r b{ flex:none; width:110px; font-size:13px; font-weight:800; color:var(--ink-3); }
.pf-r span{ color:var(--ink-2); }
.pf-r a{ color:var(--pink-ink); font-weight:800; }

/* ══ 과제 탭 — 날짜별로 묶어서 ════════════════════════════ */
.hw-day{ margin-bottom:14px; }
.hw-day-h{ font-size:13.5px; font-weight:800; color:var(--ink-2); padding-left:2px; }
.hw-day-h span{ font-weight:400; color:var(--ink-3); }

/* ══ 교육 상세 (노트 · 과제) ══════════════════════════════ */
.log-d{ border-radius:18px; padding:18px 20px;
  background:var(--surface); border:1.5px solid var(--line); }
.log-h{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-bottom:13px; border-bottom:1.5px solid var(--line); }
.log-at{ font-family:'Jua',sans-serif; font-weight:400; font-size:19px; color:var(--ink); }
.log-tag{ font-size:13px; font-weight:800; padding:3px 9px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2); }
.log-tag.t{ color:#2f6ed6; background:rgba(47,110,214,.12); border-color:rgba(47,110,214,.26); }
.log-tag.p{ color:#b07c05; background:rgba(215,154,13,.14); border-color:rgba(215,154,13,.3); }
.log-tag.z{ color:#8b45c9; background:rgba(139,69,201,.12); border-color:rgba(139,69,201,.26); }
.log-h .sp{ flex:1; }

/* 🟥 선생님 노트 · 🟦 학생 노트 — 나란히 */
/* ══ 교육일지 — 학습 노트 종이 ════════════════════════════════
   '펼쳐 놓은 교육 다이어리' 로 보이게 합니다.
   ⚠️ 여기서 중요한 건 장식이 아니라 '한눈에 읽히는 것' 입니다.
      제목은 크게, 본문은 넉넉하게, 칸마다 색을 달리해 구분합니다.
   ⚠️ 장식은 종이·줄·여백선·테이프까지만. 더 늘리면 글이 안 읽힙니다. */
.bd{ margin-top:14px; }

.bd-paper{ position:relative; padding:28px 30px 30px; border-radius:18px;
  background:#fffdf7;
  /* 아주 옅은 줄노트 — 본문 줄 간격(30px)과 맞춰 눈에 거슬리지 않게 */
  background-image:repeating-linear-gradient(to bottom,
      transparent 0, transparent 29px, rgba(120,110,90,.055) 29px, rgba(120,110,90,.055) 30px);
  background-position:0 96px;
  border:1.5px solid #efe6d2;
  box-shadow:0 2px 12px rgba(120,100,60,.08); }
.bd-paper::before{ content:""; position:absolute; top:0; bottom:0; left:16px; width:1.5px;
  background:rgba(224,120,150,.2); }
.bd-paper::after{ content:""; position:absolute; top:-8px; left:50%; width:86px; height:18px;
  margin-left:-43px; border-radius:2px; transform:rotate(-1.2deg);
  background:rgba(255,183,205,.42); border:1px solid rgba(255,160,190,.35); }

/* ── 머리 — 제목을 확실히 크게, 날짜도 잘 보이게 ── */
.bd-top{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:6px 14px;
  padding-bottom:16px; border-bottom:2.5px solid rgba(224,120,150,.28); }
.bd-top .sp{ flex:1; }
.bd-ttl{ order:1; width:100%; font-family:'Jua',sans-serif; font-size:38px;
  line-height:1.12; color:var(--pink-ink); }
.bd-date{ order:2; font-size:19px; font-weight:800; color:#6f6553; }
.bd-acts{ order:3; display:flex; gap:6px; margin-left:auto; }
.bd-acts .ed-btn{ font-size:13px; padding:6px 13px; background:rgba(255,255,255,.75); }

.bd-by{ display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  margin-top:12px; font-size:13px; color:var(--ink-3); }
.bd-ph{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--surface-2); border:1.5px solid #e7dcc4; }
.bd-ph.none{ display:flex; align-items:center; justify-content:center; font-size:13px; }
.bd-nm{ font-size:13px; font-weight:800; color:var(--ink-2); }

/* ── 한 꼭지 — 작은 강조 라벨 + 큰 본문 ── */
.bd-f{ margin-top:22px; }
.bd-f b{ display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:800; letter-spacing:.01em;
  padding:7px 15px; border-radius:999px;
  color:var(--bc,#8a7f66); background:var(--bg,#f1efe8); }
.bd-f b i{ font-style:normal; font-size:17px; }
.bd-f p{ margin:12px 0 0; font-size:18px; line-height:34px; color:#3f3a2e;
  white-space:pre-wrap; }

/* 오늘의 주제 — 라벨 + 값을 한 줄로 크게 */
.bd-f.aim{ --bc:#9a6b05; --bg:#fdf4e0; display:flex; align-items:center;
  flex-wrap:wrap; gap:12px; }
.bd-f.aim p{ margin:0; font-family:'Jua',sans-serif; font-size:26px; line-height:1.35;
  color:#4a4335; }

/* 오늘 배운 내용 — 가장 크고 넓게. 연한 파란 상자 */
.bd-f.lrn{ --bc:#2f6ed6; --bg:#e7f0fd; }
.bd-f.lrn p{ margin-top:14px; padding:24px 26px; border-radius:16px;
  font-size:19px; line-height:36px;
  background:#f2f7ff; border:1.5px solid #d8e6fa; }

/* 잘한 점 / 보완할 점 — PC 좌우 2칸 */
.bd-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.bd-two .bd-f{ margin-top:0; padding:18px 20px; border-radius:14px; }
.bd-two .bd-f p{ margin-top:12px; font-size:17px; line-height:31px; }
.bd-f.good{ --bc:#15704a; --bg:#ffffff; background:#eefaf3; border:1.5px solid #c9e9d8; }
.bd-f.bad { --bc:#b3313f; --bg:#ffffff; background:#fdeff2; border:1.5px solid #f6d3da; }

/* 오늘의 한줄 — 마지막에 가로로 눈에 띄게 */
.bd-one{ margin-top:24px; padding:20px 24px; border-radius:16px;
  background:#fff8e3; border:2px solid #f0dda6; }
.bd-one b{ display:inline-block; font-size:14px; font-weight:800; color:#9a7420;
  padding:6px 14px; border-radius:999px; background:#fdefc8; }
.bd-one span{ display:block; margin-top:12px; font-family:'Gaegu',sans-serif;
  font-size:30px; line-height:1.45; color:#6b5420; }

/* 자료 — 클립으로 끼워 둔 것처럼 */
.bd-clip{ margin-top:22px; padding:16px 18px; border-radius:14px;
  background:rgba(255,255,255,.75); border:1.5px solid #efe6d2; }
.bd-clip b{ display:block; font-size:13.5px; font-weight:800; color:var(--ink-3);
  margin-bottom:7px; }
.bd-clip b{ font-size:14px; }
.bd-clip a{ display:inline-block; font-size:16px; margin:0 16px 5px 0;
  color:var(--pink-ink); }

/* 학생노트로 나누기 전에 nch_lessons 에 남은 글임을 알려줍니다 */
.bd-old-tag{ display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  padding:6px 13px; border-radius:999px; font-size:13px; font-weight:800;
  color:#6b5aa8; background:#f2eefc; border:1.5px solid #ded6f6; }
.bd-old-tag em{ font-style:normal; font-weight:700; color:var(--ink-3); }

.bd-empty{ margin-top:20px; font-size:16px; color:var(--ink-3);
  font-family:'Gaegu',sans-serif; }

/* 학생 메모 — 종이에 붙여 둔 쪽지 */
.bd-stu{ margin-top:24px; padding:18px 20px 16px; border-radius:16px;
  background:rgba(240,247,255,.85); border:1.5px solid #d3e3f9; }
.bd-stu-t{ font-size:13px; font-weight:800; color:#33507d; margin-bottom:4px; }
.bd-stu-t em{ font-style:normal; font-weight:700; color:var(--ink-3); }
.bd-stu .bd-f:first-of-type{ margin-top:14px; }

/* 역할 배지 — 학생 파랑 · 선생님 핑크 · 관리자 회색
   ⚠️ 일지·댓글 양쪽에서 같이 씁니다. 지우지 마세요. */
.rl{ display:inline-block; font-size:12px; font-weight:800; padding:2px 8px;
  border-radius:999px; margin-left:6px; vertical-align:1px; }
.rl.stu{ background:#e9f1fe; color:#2f6ed6; }
.rl.tea{ background:#ffeef3; color:#c0426b; }
.rl.adm{ background:#eef0f4; color:#5b6275; }

/* ══ 댓글 — 교육 코멘트 느낌. 들여쓰기는 1단계까지만 ══════════ */
/* ── 피드백 (2026-09-08) ────────────────────────────────────
   교육일지 카드 '안' 에 들어갑니다. 그래서 별도 카드처럼 보이지
   않게 배경·테두리를 빼고, 위에 가는 구분선만 둡니다.
   교육과 따로 노는 글이 아니라 그 교육에 대한 대화이기 때문입니다. */
.cms{ margin-top:18px; padding:15px 0 0; border-top:2px dashed var(--line); }
.cms-h{ font-size:13.5px; font-weight:800; color:var(--ink-2); margin-bottom:11px; }
.cms-h em{ font-style:normal; color:var(--ink-3); font-size:13px; margin-left:3px; }
.cms-none{ font-size:13.5px; color:var(--ink-3); padding:4px 0 8px; }

.cm{ display:flex; gap:10px; padding:11px 0; border-top:1px solid var(--line); }
.cm:first-of-type{ border-top:0; }
/* 답글은 한 단계만 들여씁니다 — 더 깊게 겹치지 않습니다 */
.cm.reply{ margin-left:34px; padding-left:13px; border-left:2px solid var(--line-2);
  border-top:0; }
.cm-ph{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--surface); border:1.5px solid var(--line-2); }
.cm-ph.none{ display:flex; align-items:center; justify-content:center; font-size:15px; }
.cm-b{ flex:1; min-width:0; }
.cm-h{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.cm-h b{ font-size:13px; color:var(--ink); }
.cm-h .sp{ flex:1; }
.cm-at{ font-size:12.5px; color:var(--ink-3); margin-left:6px; }
.cm-a{ font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
  padding:3px 8px; border-radius:7px; color:var(--ink-3);
  background:none; border:1px solid var(--line-2); }
.cm-a:hover{ color:var(--pink-ink); border-color:var(--pink); }
.cm-t{ margin:5px 0 0; font-size:13.5px; line-height:1.7; color:var(--ink-2);
  white-space:pre-wrap; }

/* 댓글 입력 — 처음부터 3~4줄 보이게 (얇은 한 줄 칸을 쓰지 않습니다) */
.cm-new{ margin-top:13px; padding-top:13px; border-top:1.5px dashed var(--line); }
.cm-new textarea{ width:100%; font-family:inherit; font-size:13.5px; line-height:1.7;
  color:var(--ink); padding:11px 13px; border-radius:12px; resize:vertical;
  background:var(--surface); border:1.5px solid var(--line-2); }
.cm-new textarea:focus{ outline:none; border-color:var(--pink); }
.cm-new-a{ display:flex; gap:7px; justify-content:flex-end; margin-top:8px; }

/* 고치는 중 · 답글 쓰는 중 */
.cm-edit{ margin-top:7px; }
.cm-edit textarea{ width:100%; font-family:inherit; font-size:13.5px; line-height:1.7;
  color:var(--ink); padding:10px 12px; border-radius:11px; resize:vertical;
  background:var(--surface); border:1.5px solid var(--pink); }
.cm-edit textarea:focus{ outline:none; }
.cm.new{ border-top:0; }

/* 옮겨 담은 옛 기록 — 누가 썼는지 못 찾은 댓글.
   ⚠️ 아무 이름이나 붙이지 않고, 출처가 과거 기록임을 그대로 보여줍니다. */
.cm.old .cm-ph.none.old{ background:#f3f0ff; border-color:#ded6f6; }
.cm-old{ font-size:13px; color:#6b5aa8; }
.rl.old{ background:#f0ecfd; color:#6b5aa8; }
.cm.old .cm-t{ color:var(--ink-3); }

.cm-a.del:hover{ color:#c34; border-color:#f0bcc8; }


/* ══ 과제 ═══════════════════════════════════════════════════
   상태 색: 미제출 회색 · 제출 파랑 · 확인완료 초록.
   ⚠️ 종족 색(파랑·노랑·보라)과 섞이지 않게 일부러 다른 계열입니다. */
.hw{ margin-top:16px; padding:14px 16px; border-radius:14px;
  background:var(--surface-2); border:1.5px solid var(--line); }
.hw-h{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800;
  color:var(--ink-2); }
.hw-h em{ font-style:normal; font-weight:800; color:var(--ink-3); font-size:13px; }
.hw-h .sp{ flex:1; }

.hw-h-sub{ font-size:13px; font-weight:700; color:var(--ink-3);
  padding:2px 8px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); }

.hw-err{ margin-top:9px; padding:9px 12px; border-radius:10px; font-size:13.5px;
  background:#fff1f1; border:1.5px solid #f0bcbc; color:#a33; }

/* ── 완료한 과제 = 교육 이력 (2026-09-08) ──────────────────
   지우지 않고 접어 둡니다. 진행 중인 과제가 먼저 보이도록. */
.hw-hist-t{
  display:flex; align-items:center; gap:7px; width:100%;
  margin-top:11px; padding:9px 12px; border-radius:11px;
  font-family:inherit; font-size:13.5px; font-weight:800; text-align:left;
  color:var(--ink-2); background:var(--surface);
  border:1.5px dashed var(--line); cursor:pointer;
}
.hw-hist-t:hover{ border-color:var(--pink); color:var(--pink-ink); }
.hw-hist-t.on{ border-style:solid; }
.hw-hist-t em{ font-style:normal; color:var(--ink-3); font-size:13px; }
.hw-hist-ar{ font-size:12.5px; color:var(--ink-3); }
.hw-hist-n{ margin-left:auto; font-size:13px; font-weight:700; color:var(--ink-3); }
.hw-hist{ padding-left:9px; border-left:2px solid var(--line); margin-top:4px; }
/* 완료한 과제 카드는 한 톤 가라앉혀 '지난 기록' 임을 보여줍니다 */
.hw-hist .hw-c{ background:var(--surface-2); }
.hw-hist .hw-t{ color:var(--ink-2); }

.hw-c{ margin-top:10px; padding:12px 14px; border-radius:12px;
  background:var(--surface); border:1.5px solid var(--line); }
.hw-c-h{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.hw-t{ font-size:14px; color:var(--ink); }
.hw-st{ font-size:12.5px; font-weight:800; padding:3px 9px; border-radius:999px;
  background:#eceff3; color:#6b7280; white-space:nowrap; }
.hw-st.do{ background:#e6f0ff; color:#2f6ed6; }
.hw-st.dn{ background:#e4f6ea; color:#237a45; }
.hw-due{ font-size:13px; color:var(--ink-3); }

.hw-d{ font-size:13.5px; line-height:1.65; color:var(--ink-2); margin-top:7px;
  white-space:pre-wrap; }

.hw-prog{ display:flex; align-items:center; gap:9px; margin-top:9px; }
.hw-bar{ flex:1; height:8px; border-radius:999px; background:#e9ecf1; overflow:hidden; }
.hw-bar i{ display:block; height:100%; border-radius:999px; background:#2f6ed6;
  transition:width .25s ease; }
.hw-num{ font-size:13px; font-weight:800; color:var(--ink-3); white-space:nowrap; }

.hw-subs{ margin-top:9px; display:flex; flex-direction:column; gap:6px; }
.hw-sub{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:9px;
  background:var(--surface-2); font-size:13.5px; }
.hw-sub-k{ font-weight:800; color:var(--ink-3); white-space:nowrap; }
.hw-sub a{ color:var(--pink-ink); word-break:break-all; }
.hw-sub-tx{ color:var(--ink-2); white-space:pre-wrap; }
.hw-sub-note{ font-size:13px; color:var(--ink-3); }
.hw-x{ margin-left:auto; cursor:pointer; background:none; border:0; padding:2px 4px;
  color:var(--ink-3); font-size:13px; font-family:inherit; }
.hw-x:hover{ color:#c34; }
.hw-nosub{ font-size:13.5px; color:var(--ink-3); margin-top:8px; }
.hw-memo{ margin-top:9px; padding:8px 11px; border-radius:9px; font-size:13.5px;
  background:#f6f4ff; border:1.5px solid #ded6f6; color:#5b4a92; white-space:pre-wrap; }

.hw-acts{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }

/* ── 입력칸 ─────────────────────────────────────────────── */
.hwf{ margin-top:11px; padding:12px 14px; border-radius:12px;
  background:#fff; border:1.5px dashed var(--line-2); }
.hwf-h{ font-size:13.5px; font-weight:800; color:var(--ink-2); margin-bottom:9px; }
.hwf-r{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.hwf-r > span{ width:78px; flex:none; font-size:13px; font-weight:800;
  color:var(--ink-3); }
.hwf-i{ flex:1; min-width:0; font-family:inherit; font-size:13px; color:var(--ink);
  padding:8px 11px; border-radius:9px; background:var(--surface-2);
  border:1.5px solid var(--line-2); }
.hwf-i:focus{ outline:none; border-color:var(--pink); background:#fff; }
textarea.hwf-i{ resize:vertical; line-height:1.6; }
.hwf-a{ display:flex; gap:7px; justify-content:flex-end; margin-top:11px; }

/* 되돌아가기 */
.ed-back{ display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:800; margin-bottom:10px;
  background:none; border:0; color:var(--ink-3); padding:0; }
.ed-back:hover{ color:var(--pink-ink); }

.ed-empty{ padding:34px 16px; text-align:center; font-size:13.5px; color:var(--ink-3);
  background:var(--surface); border:1.5px solid var(--line); border-radius:16px; }

/* ══ 좁은 화면 ═══════════════════════════════════════════════
   순서: 종족반 → 달력 → 학생목록 → 학생요약 → 교육일지
         → 선생님 노트 → 학생 노트 → 과제
   ⚠️ 가로 스크롤이 절대 생기면 안 됩니다.
      그래서 min-width 를 쓰지 않고 minmax(0,1fr) 로 풉니다. */
@media (max-width:980px){
  .ed-main{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .ed-side{ position:static; }
  .cal{ max-width:420px; margin:0 auto; width:100%; }
  .ed-studs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:9px; }
}
@media (max-width:860px){
  .cm.reply{ margin-left:14px; padding-left:10px; }
  .cm-new textarea, .cm-edit textarea{ font-size:14px; padding:12px 13px; }
  .cm-new-a .ed-btn{ flex:1; justify-content:center; }
  .hd-3{ grid-template-columns:minmax(0,1fr); }
  .hd-nums{ width:100%; }
  .hd-nums > div{ flex:1; padding:9px 8px; }
}
@media (max-width:700px){
  /* 반 3개는 폰에서도 가로로 나란히 — 세로로 쌓으면 나머지가 화면 밖으로 밀립니다 */
  .ed-rooms{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .room{ border-radius:12px; }
  .room-top{ padding:8px 9px; }
  .room-nm{ font-size:13px; }
  .room-en{ display:none; }
  .room-go{ display:none; }
  .room-nums{ grid-template-columns:minmax(0,1fr); }
  .room-nums .room-n:nth-child(3){ display:none; }
  .room-n{ padding:6px 3px; }
  .room-n b{ font-size:13px; }
  .room-n span{ font-size:11px; }
  .room-empty{ padding:8px 9px 10px; }
  .room-empty b{ font-size:12.5px; }
  .room-empty span{ font-size:12px; }

  .ed-studs{ grid-template-columns:minmax(0,1fr); }

  .hd{ padding:14px 13px 13px; }
  .hd-top{ gap:11px; }
  .hd-ph{ width:56px; height:56px; }
  .hd-nm{ font-size:20px; }

  .tabs{ gap:0; overflow-x:auto; }
  .tab{ padding:10px 13px; font-size:13.5px; white-space:nowrap; }

  .lg-at{ font-size:17px; }
  .lg-mv{ margin-left:auto; }

  .pf-r{ display:block; }
  .pf-r b{ width:auto; display:block; margin-bottom:3px; }

  /* 종이 장식 때문에 본문 폭이 좁아지지 않게 — 여백을 줄입니다 */
  .bd-paper{ padding:20px 16px 22px; border-radius:15px; }
  .bd-paper::before{ left:8px; }
  .bd-paper::after{ width:64px; margin-left:-32px; }
  .bd-ttl{ font-size:24px; }
  .bd-date{ font-size:14.5px; }
  .bd-top{ gap:5px 10px; padding-bottom:13px; }
  .bd-acts{ margin-left:auto; }
  .bd-f p{ font-size:15.5px; line-height:29px; }
  .bd-f.aim p{ font-size:19px; }
  .bd-f.lrn p{ padding:16px 15px; font-size:16px; line-height:30px; }
  /* 잘한 점 / 보완할 점은 위아래로 */
  .bd-two{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .bd-two .bd-f{ padding:15px 16px; }
  .bd-one{ padding:16px 17px; }
  .bd-one span{ font-size:22px; }
  .pf-one{ font-size:17px; padding:14px 15px; }
  /* 아래 세 카드도 여백만 줄이고 제목 크기는 유지 */
  .vds, .cms, .pane > .hw{ padding:16px 15px 18px; border-radius:15px; }
  .vds-h, .cms-h, .pane > .hw > .hw-h{ font-size:17px; }
  .log-d{ padding:15px 14px; }
  .hw{ padding:12px 12px; }
  .hw-c{ padding:11px 12px; }
  .hwf-r{ display:block; }
  .hwf-r > span{ display:block; width:auto; margin-bottom:5px; }
  .hwf-i{ width:100%; }
  /* 버튼 5개가 한 줄에 끼면 글자가 세로로 쪼개집니다 — 두 개씩 */
  .hw-acts{ gap:6px; }
  .hw-acts .ed-btn{ flex:1 1 calc(50% - 3px); justify-content:center;
    white-space:nowrap; padding:9px 8px; }
  .hw-sub{ flex-wrap:wrap; }
  /* 폰에서는 "진행 중 N · 완료 N" 칩이 제목을 밀어내서 줄을 바꿉니다 */
  .hw-h{ flex-wrap:wrap; }
  .hw-h .sp{ flex-basis:100%; height:0; }
  .hw-hist-t{ padding:10px 11px; }
  .hw-hist-n{ display:none; }
  .hw-hist{ padding-left:6px; }
}

/* 긴 주소 한 줄이 화면을 넓히지 못하게 — 가로 스크롤 방지 */
.ed-app, .ed-main, .ed-body, .pane, .hw, .hw-c{ min-width:0; }
.hw-sub a, .nt-links a, .pf-r span{ overflow-wrap:anywhere; }

/* ══ 왼쪽 — 고른 학생의 과제 (2026-09-08) ═══════════════════
   예전에는 오른쪽 교육일지 아래에 큰 상자로 늘 붙어 있었습니다.
   과제는 교육일지와 별도 기능이라 학생 바로 아래로 옮겼습니다.
   ⚠️ 여기는 '무엇이 남았나' 만 봅니다. 제출·진행률·이력 같은
      실제 작업은 '📎 과제' 탭에서 합니다 (칸이 좁아서). */
.hw-side{ margin-top:18px; padding-top:15px; border-top:2px dashed var(--line); }
.hw-side .side-h{ margin-bottom:9px; }

.hs-row{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  cursor:pointer; font-family:inherit; margin-bottom:6px;
  padding:9px 11px; border-radius:12px;
  background:var(--surface); border:1.5px solid var(--line); }
.hs-row:hover{ border-color:var(--pink); }
.hs-st{ flex:0 0 auto; font-size:12px; font-weight:800; padding:2px 7px;
  border-radius:999px; background:#eceff3; color:#6b7280; }
.hs-st.do{ background:#e6f0ff; color:#2f6ed6; }
.hs-st.dn{ background:#e4f6ea; color:#237a45; }
.hs-t{ flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:700;
  color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-n{ flex:0 0 auto; font-size:12.5px; font-weight:800; color:var(--ink-3); }

.hs-none{ font-size:13.5px; color:var(--ink-3); padding:5px 2px 8px; }
.hs-none.sm{ font-size:13px; }

.hs-more{ display:block; width:100%; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:800; color:var(--ink-2); text-align:left;
  padding:8px 11px; border-radius:11px; margin-bottom:6px;
  background:var(--surface-2); border:1.5px solid var(--line); }
.hs-more:hover{ border-color:var(--pink); color:var(--pink-ink); }

.hs-new{ display:block; width:100%; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:800; text-align:center;
  padding:9px 11px; border-radius:11px;
  background:var(--pink); border:1.5px solid var(--pink); color:#fff; }
.hs-new:hover{ filter:brightness(1.05); }

/* ══ SOOP 다시보기 (2026-09-08) ═══════════════════════════
   교육일지 카드 안, 피드백 바로 위에 붙습니다.
   ⚠️ 사이트에서 영상을 틀지 않습니다 — 썸네일만 보여주고
      누르면 SOOP 다시보기로 넘어갑니다. */
.vds{ margin-top:18px; padding-top:15px; border-top:2px dashed var(--line); }
.vds-h{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800;
  color:var(--ink-2); margin-bottom:11px; }
.vds-h em{ font-style:normal; color:var(--ink-3); font-size:13px; }
.vds-none{ font-size:13.5px; color:var(--ink-3); padding:2px 0 4px; }

/* ── 붙여 둔 다시보기 ── */
.vd-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.vd{ display:flex; flex-direction:column; border-radius:13px; overflow:hidden;
  background:var(--surface); border:1.5px solid var(--line); }
.vd-th{ display:block; position:relative; aspect-ratio:16/9; background:#111a26;
  display:flex; align-items:center; justify-content:center; }
.vd-th img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 영상이 지워져 썸네일이 깨지면 이 글자가 보입니다 */
.vd-gone{ display:none; font-size:13px; color:#8ea3bb; }
.vd-th.none img{ display:none; }
.vd-th.none .vd-gone{ display:block; }
.vd-b{ padding:9px 11px 10px; }
.vd-h{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.vd-h b{ font-size:13px; font-weight:800; color:var(--ink-2); }
.vd-pov{ font-size:12px; font-weight:800; padding:2px 7px; border-radius:999px;
  background:#eceff3; color:#6b7280; }
.vd-pov.student{ background:#e9f1fe; color:#2f6ed6; }
.vd-pov.teacher{ background:#ffeef3; color:#c0426b; }
.vd-clip{ font-size:12px; font-weight:800; padding:2px 6px; border-radius:999px;
  background:#f3edff; color:#6b4fa8; }
.vd-x{ cursor:pointer; font-family:inherit; font-size:13px; line-height:1;
  padding:3px 6px; border-radius:7px; color:var(--ink-3);
  background:none; border:1px solid var(--line); }
.vd-x:hover{ color:#b3313f; border-color:#f0bcc8; background:#fff5f7; }
.vd-t{ display:block; font-size:13.5px; font-weight:700; line-height:1.45;
  color:var(--ink); text-decoration:none;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; }
.vd-t:hover{ color:var(--pink-ink); }
.vd-at{ font-size:12.5px; color:var(--ink-3); margin-top:4px; }

/* ── 후보 찾기 ── */
.vf{ margin-top:11px; padding:12px 13px 13px; border-radius:14px;
  background:var(--surface-2); border:1.5px solid var(--line); }
.vf-h{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800;
  color:var(--ink-2); margin-bottom:10px; }
.vf-g{ font-size:13px; font-weight:800; color:var(--ink-2); margin:9px 0 6px; }
.vf-g:first-of-type{ margin-top:0; }
.vf-g em{ font-style:normal; font-weight:700; color:var(--ink-3); }
.vf-none{ font-size:13px; color:var(--ink-3); padding:4px 0 6px; }
.vf-none span{ color:var(--line-2); }

/* ── 방송 후보 카드 ────────────────────────────────────────
   ⚠️ 이 카드는 PC 에서도 오른쪽 패널(약 373px) 안에 들어갑니다.
      예전처럼 [썸네일 | 제목 | 보기 | 연결] 을 한 줄에 넣으면
      제목에 150px 밖에 안 남아 '[BGM:엔치…' 로 잘렸습니다.
      그래서 폭에 상관없이 항상 두 줄로 놓습니다 —
        1줄 : 썸네일 + 제목·정보   (제목이 남는 폭을 전부 씁니다)
        2줄 : 보기 · 연결          (제목 폭을 빼앗지 않습니다) */
.vc{ display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:8px 10px; align-items:start; margin-bottom:7px;
  padding:9px 10px 10px; border-radius:12px;
  background:var(--surface); border:1.5px solid var(--line); }
/* 교육 시각이 들어 있는 방송 — 눈에 띄게 (자동 확정은 안 합니다) */
.vc.hit{ border-color:#2f6ed6; background:#f2f7ff; }
.vc-th{ grid-column:1; grid-row:1;
  width:78px; aspect-ratio:16/9; border-radius:8px;
  overflow:hidden; background:#111a26; display:flex; align-items:center;
  justify-content:center; font-size:16px; text-decoration:none; }
.vc-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.vc-b{ grid-column:2; grid-row:1; min-width:0; }
/* 제목 — 이 카드에서 가장 중요한 값입니다.
   두 줄까지 보여주고, 넘칠 때만 말줄임합니다. */
.vc-t{ font-size:14px; font-weight:800; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere; }
/* 날짜·시각·길이는 보조 정보라 제목보다 작고 흐리게 */
.vc-at{ font-size:12px; font-weight:500; color:var(--ink-3);
  margin-top:4px; line-height:1.4; }
.vc-hit{ display:block; margin-top:2px; color:#2f6ed6; font-weight:800; }
.vc-a{ grid-column:1 / -1; grid-row:2; display:flex; gap:6px; }
.vc-a .ed-btn{ flex:1 1 0; justify-content:center; }

@media (max-width:700px){
  .vd-list{ grid-template-columns:minmax(0,1fr); }
}

/* (2026-09-08) 화면 맨 위의 '교육일지 쓰기' 점선 상자는 없앴습니다.
   버튼은 교육일지 줄 오른쪽 끝(.lg-w)으로 옮겼습니다. */

/* ══ 일지 아래 세 영역 — 각각 '독립된 흰 카드' 로 (맨 끝에 둡니다) ══
   다시보기 · 선생님과의 대화 · 이번 교육의 과제.
   ⚠️ 아래쪽 .cms / .vds / .hw 규칙보다 뒤에 와야 제목 크기가 먹습니다.
      앞에 두면 그쪽 값(13.5px)에 덮여서 작게 나옵니다 — 실제로 그랬습니다. */
.vds, .cms, .pane > .hw{
  margin-top:18px; padding:20px 22px 22px; border-radius:18px;
  background:var(--surface); border:1.5px solid var(--line);
  border-top:1.5px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.04); }
.vds-h, .cms-h, .pane > .hw > .hw-h{
  font-family:'Jua',sans-serif; font-weight:400; font-size:19px; color:var(--ink);
  padding-bottom:12px; margin-bottom:8px; border-bottom:1.5px solid var(--line); }
.vds-h em, .cms-h em, .pane > .hw > .hw-h em{
  font-style:normal; font-family:inherit; font-size:14px; color:var(--ink-3);
  margin-left:5px; }
.cms-none, .vds-none{ font-size:14px; }

@media (max-width:700px){
  .vds, .cms, .pane > .hw{ padding:16px 15px 18px; border-radius:15px; }
  .vds-h, .cms-h, .pane > .hw > .hw-h{ font-size:17px; }
}

/* ══ 교육일지 두 단 (2026-09-08 시안) ════════════════════════
   왼쪽 70% 일지 · 오른쪽 30% 부가 기능.
   ⚠️ 아래 세 카드 규칙보다 뒤에 와야 합니다 — 앞에 두면 덮입니다. */
/* 왼쪽은 남는 만큼, 오른쪽은 340~420px.
   ⚠️ 비율(30%)로 잡으면 화면이 좁을 때 240px 까지 줄어 글이 쪼개집니다.
      실제로 그랬습니다 — 그래서 최소 폭을 못 박습니다. */
.lg-two{ display:grid;
  grid-template-columns:minmax(0,1fr) clamp(340px, 28vw, 420px);
  gap:18px; align-items:start; margin-top:14px; }
.lg-main{ min-width:0; }
.lg-side{ min-width:0; display:flex; flex-direction:column; gap:10px;
  position:sticky; top:14px; }
.lg-main .bd{ margin-top:0; }

/* ── 접기·펼치기 ────────────────────────────────────────────
   제목 단추는 오른쪽 30% 칸에, 펼친 내용은 아래 전체 폭에 놓습니다.
   ⚠️ 30% 칸(약 240px) 안에서 내용까지 펼치면 버튼과 주소가 한 글자씩
      세로로 쪼개집니다. 실제로 그렇게 나와서 자리를 나눴습니다. */
.ac{ border-radius:14px; overflow:hidden;
  background:var(--surface); border:1.5px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.04); }
.ac.on{ border-color:var(--pink); }
.ac-h{ display:flex; align-items:center; gap:8px; width:100%; cursor:pointer;
  font-family:inherit; text-align:left; padding:14px 15px;
  background:none; border:0; }
.ac-h:hover{ background:var(--surface-2); }
.ac.on .ac-h{ background:#fff7fa; }
.ac-h b{ font-family:'Jua',sans-serif; font-weight:400; font-size:17px; color:var(--ink); }
.ac-h .sp{ flex:1; }
.ac-ic{ font-size:17px; }
.ac-n{ font-size:13.5px; font-weight:800; color:var(--pink-ink);
  padding:2px 9px; border-radius:999px; background:#fff0f6; }
.ac-n.zero{ color:var(--ink-3); background:var(--surface-2); }
.ac-dot{ width:7px; height:7px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 0 3px rgba(255,111,168,.18); }
.ac-ar{ font-size:12.5px; color:var(--ink-3); }

/* 펼친 내용 — '그 카드 안' 에서 아래로 (2026-09-08 주인님 확정) */
.ac-b{ padding:0 14px 14px; border-top:1px solid var(--line); }
/* 안에 들어가는 기존 카드는 테두리를 벗깁니다 (두 겹으로 보이지 않게) */
.ac-b > .vds, .ac-b > .cms, .ac-b > .hw{
  margin-top:12px; padding:0; border:0; border-radius:0;
  background:none; box-shadow:none; }
.ac-b .vds-h, .ac-b .cms-h, .ac-b .hw > .hw-h{ display:none; }

/* 제목줄 밖으로 뺀 실행 버튼 — 다시보기 연결 · 과제 만들기.
   ⚠️ 바로 위 규칙이 제목줄을 통째로 숨깁니다. 버튼을 제목줄 안에 두면
      같이 사라집니다 (v535~v560 동안 실제로 그랬습니다).
   ⚠️ .ac-b 를 앞에 붙이지 않습니다 — 과제 탭(.hw-day)에서도 같은 모양이어야 합니다. */
.ac-act{ display:flex; justify-content:flex-end; margin:0 0 10px; }
.ac-b .ac-act{ margin-top:2px; }

/* ── 피드백 두 칸 ────────────────────────────────────────────
   ⚠️ 오른쪽 단은 30% 라 그 안에서 또 반으로 자르면 한 칸이 100px 밖에
      안 됩니다. 글이 세로로 쪼개져서 못 읽습니다.
      그래서 '칸이 충분히 넓을 때만' 두 칸으로 나눕니다.
        오른쪽 단이 넓은 큰 화면(대략 1700px 이상) → 두 칸
        좁으면(보통 PC·모바일)                    → 위아래
      브라우저가 container 를 모르면 한 칸으로 남습니다 — 안전한 쪽입니다. */
/* 오른쪽 패널(340~420px)에서는 두 칸으로 자르면 한 칸이 160px 밖에 안 됩니다.
   위아래로 놓는 편이 훨씬 잘 읽힙니다 (2026-09-08 주인님 확정). */
.fb-two{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
  margin-top:4px; }
.fb{ padding:12px 13px 10px; border-radius:14px; }
.fb-h{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800;
  padding-bottom:9px; margin-bottom:4px; border-bottom:1.5px solid rgba(0,0,0,.06); }
.fb-h em{ font-style:normal; font-size:13px; font-weight:800; margin-left:auto;
  padding:1px 8px; border-radius:999px; background:rgba(255,255,255,.75); }
.fb.tea{ background:#fff5f8; border:1.5px solid #f3d3de; }
.fb.tea .fb-h{ color:#c0426b; }
.fb.stu{ background:#f2f7ff; border:1.5px solid #d3e3f9; }
.fb.stu .fb-h{ color:#2f6ed6; }
.fb .cm{ border-top-color:rgba(0,0,0,.06); }
.fb .cm:first-of-type{ border-top:0; }
.fb .cms-none{ padding:8px 0 4px; }
.cms-in .cm-new{ margin-top:12px; }

/* ── 좁은 화면 — 억지로 나누지 않고 위에서 아래로 ── */
/* 왼쪽이 너무 좁아지기 전에 한 줄로 풉니다.
   1000px 밑에서는 (오른쪽 340 + 여백) 을 빼면 일지가 500px 도 안 됩니다. */
@media (max-width:1000px){
  .lg-two{ grid-template-columns:minmax(0,1fr); }
  .lg-side{ position:static; }
}
@media (max-width:700px){
  .bd-ttl{ font-size:27px; }
  .bd-date{ font-size:16px; }
  .bd-f b{ font-size:13.5px; padding:6px 13px; }
  .bd-f p{ font-size:17px; line-height:32px; }
  .bd-f.aim p{ font-size:22px; }
  .bd-f.lrn p{ padding:17px 16px; font-size:17.5px; line-height:33px; }
  .bd-one span{ font-size:25px; }
  .lg-at{ font-size:19px; }
  .ac-h{ padding:13px 13px; }
  .ac-h b{ font-size:16px; }
  .ac-b{ padding:0 13px 13px; }
}

/* ══ 이 화면만 넓게 (2026-09-08) ══════════════════════════════
   .gu-wrap 은 GAME 전 페이지가 함께 쓰는 공용 폭(1080px)입니다.
   ⚠️ 공용 파일(게임/game-ui.css)을 고치면 다른 GAME 페이지도 다 넓어집니다.
      그래서 '교육공간 화면이 열려 있을 때만' 여기서 넓힙니다.
      :has 를 모르는 브라우저에서는 지금까지처럼 1080px 로 남습니다 — 안전한 쪽. */
body:has(#app.ed-app) .gu-wrap{ max-width:min(1560px, 94vw); }

/* 오른쪽 패널 안에서는 다시보기·과제를 한 줄에 하나씩 (폭이 340~420px) */
.lg-side .vd-list{ grid-template-columns:minmax(0,1fr); }
.lg-side .hw-acts .ed-btn{ flex:1 1 calc(50% - 4px); justify-content:center;
  white-space:nowrap; }
.lg-side .hw-sub{ flex-wrap:wrap; }
.lg-side .hw-sub a{ overflow-wrap:anywhere; }

/* 다시보기 카드 아래줄 — 날짜·시간과 '보기' 버튼 */
.vd-f{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.vd-f .vd-at{ flex:1; min-width:0; }
.vd-go{ flex:none; font-size:13px; font-weight:800; text-decoration:none;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
  color:var(--pink-ink); background:#fff0f6; border:1.5px solid var(--pink); }
.vd-go:hover{ background:var(--pink); color:#fff; }

/* 큰 화면에서는 왼쪽 길잡이(달력·학생)를 더 늘리지 않고, 남는 폭을 일지에 줍니다.
   24% 로 두면 1536px 에서 왼쪽만 370px 가까이 먹습니다. */
@media (min-width:1300px){
  .ed-main{ grid-template-columns:320px minmax(0,1fr); }
}

/* ── 좁은 화면: 날짜/주제/교육시간 아래로 버튼 한 줄 (2026-09-08) ──
   ⚠️ 한 줄에 억지로 밀어 넣으면 글자가 쪼개집니다. 접어서 폭을 다 씁니다. */
@media (max-width:700px){
  .lg-h{ gap:8px; }
  .lg-h .sp{ display:none; }
  .lg-w{ flex:1 1 100%; justify-content:center; padding:11px 15px; font-size:14px; }
}

/* ══ 넘어가는 중 덮개 (2026-09-08) ═══════════════════════════
   관리자 편집화면(/admin/star/lessons/)과 같은 모양으로 맞춰 둡니다 —
   두 화면을 오갈 때 다른 프로그램처럼 보이지 않게. */
@keyframes nch-spin{ to{ transform:rotate(360deg); } }
.nch-sp{ display:inline-block; width:15px; height:15px; flex:0 0 auto;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:nch-spin .7s linear infinite; }
.nch-sp[hidden]{ display:none !important; }
.nch-ov .nch-sp{ width:26px; height:26px; border-width:3px;
  border-color:rgba(0,0,0,.12); border-top-color:var(--pink); }
.nch-ov{ position:fixed; inset:0; z-index:9999; display:flex;
  align-items:center; justify-content:center;
  background:rgba(30,24,28,.34); backdrop-filter:blur(2px); }
.nch-ov-b{ display:flex; flex-direction:column; align-items:center; gap:13px;
  min-width:230px; max-width:min(420px,88vw); padding:26px 30px;
  border-radius:20px; text-align:center;
  background:var(--surface); border:1.5px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.18); }
.nch-ov-t{ font-size:14.5px; font-weight:800; line-height:1.55; color:var(--ink); }
.nch-ov.no .nch-ov-t{ color:#c0392b; }
.nch-ov-a{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.nch-ov-a:empty{ display:none; }
/* 누른 뒤에는 눌러도 반응하지 않습니다 (눈으로도 알 수 있게) */
.lg-w[aria-busy]{ opacity:.72; cursor:default; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .nch-sp{ animation-duration:2s; } }

/* ══ 자료첨부 (2026-09-08) ═══════════════════════════════════
   오른쪽 패널(340~420px) 안에 들어가므로 한 줄에 하나씩 놓습니다. */
.fl-list{ display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.fl{ display:flex; align-items:center; gap:9px;
  padding:9px 11px; border-radius:12px;
  background:var(--surface-2); border:1.5px solid var(--line); }
.fl:hover{ border-color:var(--pink); }
.fl-ic{ font-size:17px; flex:0 0 auto; }
.fl-b{ min-width:0; flex:1; }
.fl-nm{ font-size:13px; font-weight:800; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl-sub{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.fl-go{ flex:0 0 auto; font-family:inherit; font-size:12px; font-weight:800;
  cursor:pointer; padding:6px 12px; border-radius:999px;
  color:var(--pink-ink); background:#fff; border:1.5px solid var(--pink); }
.fl-go:hover{ background:#fff0f6; }
.fl-x{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; cursor:pointer;
  font-family:inherit; font-size:12px; color:#b3313f;
  background:#fff5f7; border:1.5px solid #f0bcc8; }
.fl-x:hover{ background:#ffe9ef; border-color:#e88ba0; }

.fl-add{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:12px; }
.fl-hint{ font-size:11.5px; color:var(--ink-3); }
.fl-busy{ display:flex; align-items:center; gap:8px; margin-top:10px;
  font-size:12.5px; font-weight:800; color:var(--ink-3); }
.fl-busy .nch-sp{ border-color:rgba(0,0,0,.12); border-top-color:var(--pink); }
@media (max-width:700px){
  .fl-add .ed-btn{ flex:1; justify-content:center; }
  .fl-hint{ flex:1 1 100%; }
}