/* ============================================================
   morning.css — 교실 전체화면 "하루를 여는 아침 어휘" (2026-09-23 · P4-c/d/e)
   정본 계획서: docs/morning/아침어휘_소통창구_접속통계_작업계획서.md §6-3

   ⚠ 셸(.yj-shell / __body)을 씌우지 않는다.
     .yj-shell__body 는 데스크톱에서 max-width:720px 로 조인다 — 교실 TV 에
     720px 짜리 기둥이 서면 이 화면의 존재 이유가 사라진다. 스킬 §4 의
     "정보 밀도가 필요한 넓은 화면에는 셸 구조를 씌우지 않는다" 에 해당한다.
     셸의 **값만 빌린다** — 토큰 · --yj-safe-* · 100dvh.

   ⚠ 교실 TV 는 채도 높은 노랑이 번진다. 바탕은 크림, 글자는 잉크,
     앰버는 **점으로만** 쓴다(빈칸 테두리 · 지금 보는 어휘 표시).

   크기 체계
     비율   --mor-r-* (행) · --mor-c-* (열)  구분선을 끌면 바뀐다
     글자   --mor-s-* (영역별 자동 맞춤) × --mor-z (수동 보정 2~3단)
     영역마다 자기 안에서 이분 탐색한다 — home-scale.js 의 solve() 와 같은 기법.
   ============================================================ */

:root {
  /* 행 높이 — 메모 / 머리 (본문은 나머지 1fr)
     ⚠ fr 을 계산에 넣지 않는다. calc(1.15 * 1fr) 은 **유효하지 않은 CSS** 라
       grid-template 선언이 통째로 버려진다(2026-09-23 실측 — 2단 레이아웃이
       한 칸으로 무너졌다). 비율은 %, 남는 칸은 1fr 로 잡는다. */
  --mor-r-memo: 9%;
  --mor-r-head: 12%;
  /* 열 너비 — 이야기 (어휘는 나머지 1fr) */
  --mor-c-left: 55%;

  /* 영역별 자동 글자 배율 (morning.js 가 정한다) */
  --mor-s-memo: 1;
  --mor-s-head: 1;
  --mor-s-story: 1;
  --mor-s-vocab: 1;
  /* 이야기·어휘 손 보정 (2026-10-13) — 각 칸 우측 상단 ± 로 정한다.
     자동 맞춤(--mor-s-*)은 이 값을 1 로 두고 잰다. 그 위에 곱하므로
     1 보다 크면 칸을 넘쳐 스크롤이 생긴다 — 선생님이 고른 크기가 이긴다. */
  --mor-u-story: 1;
  --mor-u-vocab: 1;
  /* 알림장 글자 보정 (2026-09-24 — **알림장에만** 적용된다).
     전에는 화면 전체를 키웠는데, 그러면 자동 맞춤이 잡아 놓은 균형이 통째로 흔들렸다.
     교실에서 실제로 크기를 바꾸고 싶은 곳은 선생님이 직접 적는 알림장이다. */
  --mor-z: 1;

  --mor-split: 10px;
}

* { box-sizing: border-box }

html, body {
  margin: 0;
  height: 100%;
}

body.mor {
  /* 100vh 금지 — 절대 규칙 */
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--yj-cream);
  color: var(--yj-ink-deep);
  font-family: var(--yj-font-ui);
  padding: var(--yj-safe-t) var(--yj-safe-r) var(--yj-safe-b) var(--yj-safe-l);
  -webkit-font-smoothing: antialiased;
}

/* ── 툴바 — 헤더 높이는 56px 단일값 ───────────────────────── */

.mor__bar {
  height: 60px;   /* 트레이싱·퀴즈 활동지 상단바와 같은 높이(2026-10-13) */
  display: flex;
  align-items: center;
  gap: var(--yj-s2);
  padding: 0 var(--yj-s3);
  background: var(--yj-card);
  border-bottom: 1px solid var(--yj-hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.mor__bar::-webkit-scrollbar { display: none }
.mor__bar-spacer { flex: 1 1 auto; min-width: var(--yj-s2) }

/* 뒤로가기 · 제목 — 트레이싱·퀴즈 활동지 상단바와 쌍둥이(2026-10-13).
   크기·글자체(Pretendard = --yj-font-ui)는 quizsheet/style.css 의 .qs-nav__* 와 같은 값이다.
   뒤로가기는 툴바가 가로로 밀려도 항상 보이게 맨 앞에 붙여 둔다(닫기 버튼을 대신한다). */
.mor__back {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--yj-tap);
  height: var(--yj-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--yj-r-full);
  color: var(--yj-slate);
  text-decoration: none;
  background: var(--yj-card);
  transition: background-color var(--yj-m-fast) var(--yj-ease);
}
.mor__back:hover { background: var(--yj-surface) }
.mor__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--yj-s2);
  margin-right: var(--yj-s3);
}
.mor__logo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--yj-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yj-card);
  border: 1px solid var(--yj-hairline);
}
.mor__logo img { width: 20px; height: 20px; display: block }
.mor__title {
  font-family: var(--yj-font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--yj-ink-deep);
  white-space: nowrap;
}
@media (max-width: 900px) { .mor__title { display: none } }

/* 툴바 단추 — 새 버튼 종류를 만들지 않는다. ghost/icon 을 이 화면 크기로 입힌다 */
.mor__btn {
  flex: none;
  min-height: var(--yj-tap);
  display: inline-flex;
  align-items: center;
  gap: var(--yj-s2);
  padding: 0 var(--yj-s3);
  border: none;
  border-radius: var(--yj-r-sm);
  background: transparent;
  color: var(--yj-ink);
  font: inherit;
  font-size: var(--yj-t-cap);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--yj-m-fast) var(--yj-ease),
              transform var(--yj-m-mid) var(--yj-ease);
}
.mor__btn:hover { background: var(--yj-surface) }
.mor__btn:active { transform: scale(.97) }
.mor__btn:disabled { opacity: .4; cursor: not-allowed }
.mor__btn[hidden] { display: none }
.mor__btn--icon { width: var(--yj-tap); padding: 0; justify-content: center }

/* 켜짐은 색이 아니라 **틴트 면**으로 말한다 — 원색은 점으로 */
.mor__btn[aria-pressed="true"] {
  background: var(--yj-amber-tint);
  color: var(--yj-amber-ink);
}
/* 진도 확인 버튼 — taught.js 와 통일 */
.mor__taught-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mor__taught-svg {
  display: block;
}
#mor-taught {
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
#mor-taught[data-on="1"] {
  border-color: rgba(34, 197, 94, 0.45);
  border-radius: var(--yj-r-sm);
}

.mor__nowrap { flex: none; display: inline-flex; align-items: center; gap: var(--yj-s1) }
.mor__serial {
  min-width: 4.5em;
  text-align: center;
  font-size: var(--yj-t-cap);
  font-weight: 800;
  color: var(--yj-slate);
}

/* ── 무대 — 메모 / 본문 (2단 칼럼) ─────────────────────────────── */

.mor__stage {
  display: grid;
  /* 상단 알림장 / 가로구분선 / 본문 전체(좌우 2단) */
  grid-template-rows:
    minmax(var(--mor-r-memo), auto)
    var(--mor-split)
    minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.mor__pane {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: var(--yj-s3) var(--yj-s5);
}

/* ── 구분선 — 끌어서 비율을 바꾼다 ────────────────────────── */

.mor__split {
  position: relative;
  background: var(--yj-hairline);
  transition: background-color var(--yj-m-fast) var(--yj-ease);
}
.mor__split::after {
  /* 보이는 선은 가늘게, 잡는 자리는 넉넉하게 */
  content: "";
  position: absolute;
  inset: -6px 0;
}
.mor__split--v::after { inset: 0 -6px }
.mor__split:hover, .mor__split.is-drag { background: var(--yj-amber) }
.mor__split--h { cursor: row-resize }
.mor__split--v { cursor: col-resize }

/* ── 메모 ─────────────────────────────────────────────────── */

/* 이 칸만 내용만큼 커진다 — .mor__pane 의 overflow:hidden 을 푼다 */
.mor__memo { display: flex; align-items: flex-start; gap: var(--yj-s3); overflow: visible }

/* 알림장 전용 도구 — 오른쪽 끝에 옅게. 글씨를 적는 칸이 주인공이고
   이것들은 가끔 누르는 것이라, 평소에는 눈에 걸리지 않을 만큼만 보인다. */
.mor__mtools {
  flex: none;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--yj-s1);
  opacity: .38;
  transition: opacity var(--yj-m-fast) var(--yj-ease);
}
.mor__mtools:hover, .mor__mtools:focus-within { opacity: 1 }
.mor__mtool {
  width: var(--yj-tap);
  height: var(--yj-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--yj-r-full);
  background: transparent;
  color: var(--yj-ink);
  cursor: pointer;
  transition: background-color var(--yj-m-fast) var(--yj-ease),
              transform var(--yj-m-mid) var(--yj-ease);
}
.mor__mtool:hover { background: var(--yj-surface-2) }
.mor__mtool:active { transform: scale(.97) }
.mor__mtool:disabled { opacity: .4; cursor: not-allowed }
.mor__memo-box {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* display: contents 로 감싸는 div를 해제하여 줄바꿈 시에도 input이 마지막 배지 바로 우측에 연결됨 (2026-09-24) */
.mor__memo-badges {
  display: contents;
}
.mor__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  border-radius: var(--yj-r-full, 9999px);
  font-size: calc(18px * var(--mor-z));
  font-weight: 700;
  color: var(--yj-ink-deep, #142814);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  user-select: none;
}
.mor__badge[data-color="0"] { background: #E8F5E9; border: 1px solid #C8E6C9; }
.mor__badge[data-color="1"] { background: #E3F2FD; border: 1px solid #BBDEFB; }
.mor__badge[data-color="2"] { background: #F3E5F5; border: 1px solid #E1BEE7; }
.mor__badge[data-color="3"] { background: #FCE4EC; border: 1px solid #F8BBD0; }
.mor__badge[data-color="4"] { background: #FFF3E0; border: 1px solid #FFE0B2; }
.mor__badge[data-color="5"] { background: #E0F7FA; border: 1px solid #B2EBF2; }

.mor__badge-chk {
  display: inline-flex;
  align-items: center;
  color: #2E7D32;
  flex: none;
}
.mor__badge-text {
  line-height: 1.3;
}
.mor__badge-del {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #6F6E69;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
  border-radius: 50%;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.mor__badge-del:hover { opacity: 1; color: #E53935; }

.mor__memo-input,
.mor__memo textarea {
  flex: 1 1 60px;
  min-width: 40px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--yj-ink);
  font: inherit;
  font-size: calc(18px * var(--mor-z));
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 0;
}
.mor__memo textarea { overflow: hidden; }
.mor__memo-input::placeholder,
.mor__memo textarea::placeholder {
  color: var(--yj-steel);
  font-weight: 500;
  font-size: calc(15px * var(--mor-z));
  transition: opacity 0.15s ease;
}
.mor__memo-input:focus::placeholder,
.mor__memo textarea:focus::placeholder {
  opacity: 0;
}
.mor__memo-y { align-self: flex-start; flex: none }
.mor__memo-y[hidden] { display: none }

/* ── 본문 — 이야기 칼럼(좌) · 어휘 칼럼(우) ────────────────── */

.mor__body {
  display: grid;
  grid-template-columns:
    minmax(0, var(--mor-c-left))
    var(--mor-split)
    minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

/* 좌측 칼럼: 날짜/표제한자(위) + 가로구분선 + 이야기(아래) */
.mor__col-left {
  display: grid;
  grid-template-rows:
    minmax(0, var(--mor-r-head))
    var(--mor-split)
    minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

/* ── 머리 — 날짜 · 훈음 · 뜻 ───────────────────────────────── */

.mor__head {
  display: flex;
  align-items: baseline;
  gap: var(--yj-s3);
  flex-wrap: nowrap;
}
.mor__huneum {
  flex: none;
  font-family: var(--yj-font-disp);
  font-size: calc(var(--yj-t-disp) * var(--mor-s-head));
  font-weight: 800;
  color: var(--yj-ink-deep);
  letter-spacing: -.01em;
}
.mor__means {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--yj-s3);
  flex-wrap: wrap;
  font-size: calc(var(--yj-t-h2) * var(--mor-s-head));
  font-weight: 700;
  color: var(--yj-ink);
}
/* 날짜와 요일 — 해당 영역 우측 끝에 배치, 더 큰 크기, 주황계열 색상 (2026-09-24) */
.mor__date {
  flex: none;
  margin-left: auto;
  padding-left: var(--yj-s2);
  font-size: calc(var(--yj-t-h2) * var(--mor-s-head) * 1.15);
  font-weight: 800;
  color: var(--yj-orange-ink, #E65100);
  white-space: nowrap;
}

.mor__story {
  /* 자동 맞춤이 바닥(MIN)을 쳐도 안 들어가는 좁은 화면에서는 **스크롤로 흘린다.**
     잘라서 숨기면 마지막 어휘가 조용히 사라진다(414px 실측). 교실 TV 에서는
     이분 탐색이 먼저 맞추므로 이 스크롤은 나타나지 않는다. */
  overflow-y: auto;
  font-size: calc(var(--yj-t-body) * var(--mor-s-story) * var(--mor-u-story));
  line-height: 1.75;
  color: var(--yj-ink);
}
/* ── 이야기·어휘 글자 크기 ± (2026-10-13) ──
   이야기는 머리띠가 없어서 칸 위에 겹쳐 띄운다 — 이야기와 **같은 격자 칸**
   (3행)에 둘 다 명시해 겹친다. 스크롤 상자 안에 넣으면 글과 함께 흘러가 버린다.
   알림장 도구(.mor__mtools)처럼 평소엔 옅게, 가리키면 또렷하게. */
.mor__fs { display: inline-flex; align-items: center; gap: 2px }
.mor__col-left > .mor__story { grid-row: 3; grid-column: 1 }
.mor__fs--story {
  grid-row: 3;
  grid-column: 1;
  justify-self: end;
  align-self: start;
  z-index: 2;
  margin: 6px 16px 0 0;           /* 오른쪽 16px — 스크롤 막대를 가리지 않는다 */
  border-radius: var(--yj-r-full);
  background: var(--yj-card);
  opacity: .38;
  transition: opacity var(--yj-m-fast) var(--yj-ease);
}
.mor__fs--story:hover, .mor__fs--story:focus-within { opacity: 1 }
/* 글이 ± 밑으로 들어가지 않게 — 첫 줄 오른쪽에 그만큼 자리를 비운다(띄움 받침) */
.mor__fs-gap { float: right; width: 96px; height: 40px }
.mor__vocab-head .mor__mtool { width: 30px; height: 30px }

.mor__story-t {
  margin: 0 0 var(--yj-s3);
  font-family: var(--yj-font-disp);
  font-size: 1.15em;
  font-weight: 800;
  color: var(--yj-ink-deep);
}
.mor__story-p { margin: 0 }

/* 빈칸 — 앰버는 여기서 **테두리로만** 쓴다 */
.mor__blank {
  display: inline-block;
  min-width: 3.2em;
  padding: 0 .3em;
  border: none;
  border-bottom: 2px solid var(--yj-amber);
  background: var(--yj-amber-tint);
  border-radius: var(--yj-r-xs);
  color: transparent;
  font: inherit;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  transition: color var(--yj-m-fast) var(--yj-ease),
              background-color var(--yj-m-fast) var(--yj-ease);
}
.mor__blank.is-open {
  color: var(--yj-amber-ink);
  background: transparent;
}

/* ── 우측 어휘 래퍼 (알림장 바로 아래부터 시작하여 위로 확장됨) ── */

.mor__vocab-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--yj-cream);
}

.mor__vocab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--yj-s2) var(--yj-s4);
  background: var(--yj-card);
  border-bottom: 1px solid var(--yj-hairline);
  flex: none;
}
.mor__vocab-head-title {
  font-size: var(--yj-t-cap);
  font-weight: 800;
  color: var(--yj-slate);
}
.mor__vocab-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mor__btn--notes {
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--yj-r-full, 9999px);
  font-size: 13px;
  font-weight: 700;
  background: var(--yj-surface-2, #E2E8F0);
  color: var(--yj-ink-deep, #142814);
  border: 1px solid var(--yj-hairline, #CBD5E1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.mor__btn--notes:hover {
  background: var(--yj-amber-tint, #FEF3C7);
  border-color: var(--yj-amber, #F59E0B);
  color: var(--yj-amber-ink, #92400E);
  transform: translateY(-1px);
}
.mor__btn--notes:active {
  transform: scale(0.97);
}
/* ── 어휘만 보기 스위치 토글 (2026-09-24) ── */
.mor__vocab-switch,
.mor__vocab-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  border-radius: 9999px;
  -webkit-tap-highlight-color: transparent;
}
.mor__vocab-switch:focus-visible,
.mor__vocab-toggle:focus-visible {
  outline: 2px solid var(--yj-amber, #F59E0B);
  outline-offset: 2px;
}
.mor__vocab-switch-track {
  display: flex;
  align-items: center;
  position: relative;
  width: 44px;
  height: 24px;
  padding: 2px;
  box-sizing: border-box;
  background: var(--yj-surface-2, #E2E8F0);
  border: 1px solid var(--yj-hairline, #CBD5E1);
  border-radius: 9999px;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.2s ease;
}
.mor__vocab-switch:hover .mor__vocab-switch-track,
.mor__vocab-toggle:hover .mor__vocab-switch-track {
  border-color: var(--yj-steel, #94A3B8);
}
.mor__vocab-switch-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border-radius: 50%;
  color: var(--yj-steel, #64748B);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}
.mor__vocab-switch-thumb svg {
  display: block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 활성 상태 (어휘만 보기 ON) */
.mor__vocab-switch[aria-checked="true"] .mor__vocab-switch-track,
.mor__vocab-switch[aria-pressed="true"] .mor__vocab-switch-track,
.mor__vocab-toggle[aria-checked="true"] .mor__vocab-switch-track,
.mor__vocab-toggle[aria-pressed="true"] .mor__vocab-switch-track {
  background: #F59E0B;
  border-color: #D97706;
}
.mor__vocab-switch[aria-checked="true"] .mor__vocab-switch-thumb,
.mor__vocab-switch[aria-pressed="true"] .mor__vocab-switch-thumb,
.mor__vocab-toggle[aria-checked="true"] .mor__vocab-switch-thumb,
.mor__vocab-toggle[aria-pressed="true"] .mor__vocab-switch-thumb {
  transform: translateX(20px);
  color: #D97706;
}
.mor__vocab-switch[aria-checked="true"] .mor__vocab-switch-thumb svg,
.mor__vocab-switch[aria-pressed="true"] .mor__vocab-switch-thumb svg,
.mor__vocab-toggle[aria-checked="true"] .mor__vocab-switch-thumb svg,
.mor__vocab-toggle[aria-pressed="true"] .mor__vocab-switch-thumb svg {
  transform: rotate(180deg);
}

.mor__vocab {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--yj-s2);
  overflow-y: auto;
}
.mor__v {
  padding: var(--yj-s2) var(--yj-s3);
  border-radius: var(--yj-r-sm);
  background: var(--yj-card);
  border: 1px solid var(--yj-hairline);
}
.mor__v-top { display: flex; align-items: baseline; gap: var(--yj-s3) }
.mor__v-w {
  flex: none;
  font-size: calc(var(--yj-t-vocab) * var(--mor-s-vocab) * var(--mor-u-vocab));
  font-weight: 700;
  color: var(--yj-ink-deep);
}
.mor__v-c {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(var(--yj-t-cap) * var(--mor-s-vocab) * var(--mor-u-vocab));
  font-weight: 600;
  color: var(--yj-slate);
}
/* ⚠ <p> 다. margin 을 0 으로 못박지 않으면 **아래에 1em(약 22px)이 남는다** —
   카드 113px 중 22px 이 그 여백이었다(2026-09-24 실측). 그 자리를 글자에 준다.
   1.12 는 토큰 밖의 값이 아니라 17px 과 20px(--yj-t-vocab) 사이를 메우는 비율이다 —
   뜻이 단어(20px)만큼 커지면 위계가 뒤집힌다. */
.mor__v-d {
  margin: 1px 0 0;
  font-size: calc(var(--yj-t-body) * 1.12 * var(--mor-s-vocab) * var(--mor-u-vocab));
  color: var(--yj-ink);
  line-height: 1.45;
}

/* 한자는 주인공이 아니다 — 작고 흐리게, 명조로 */
.mor__ch {
  font-family: var(--yj-font-hanja);
  font-weight: 500;
  font-size: .72em;
  color: var(--yj-steel);
}

/* ── 알림 · 빈 상태 ───────────────────────────────────────── */

.mor__toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--yj-s5) + var(--yj-safe-b));
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(92vw, 560px);
  padding: var(--yj-s3) var(--yj-s4);
  border-radius: var(--yj-r-full);
  background: var(--yj-forest);
  color: var(--yj-on-dark);
  font-size: var(--yj-t-cap);
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.mor__toast[hidden] { display: none }

.mor__empty {
  color: var(--yj-steel);
  font-size: var(--yj-t-body);
  font-weight: 600;
}

/* 어휘만 보기 활성화 시: 오로지 단어만 보이게 (한자 구성·뜻·한자병기 숨김) */
.mor--vocab-only #mor-vocab .mor__v {
  flex: 1 1 auto;
  padding: var(--yj-s3) var(--yj-s4);
  display: flex;
  align-items: center;
}
.mor--vocab-only #mor-vocab .mor__v-top {
  width: 100%;
}
.mor--vocab-only #mor-vocab .mor__v-c,
.mor--vocab-only #mor-vocab .mor__v-d,
.mor--vocab-only #mor-vocab .mor__ch {
  display: none !important;
}
.mor--vocab-only #mor-vocab .mor__v-w {
  font-size: calc(var(--yj-t-vocab) * var(--mor-s-vocab) * var(--mor-u-vocab) * 1.6);
  font-weight: 800;
}

/* ── 교실 진도 현황 모달 팝업 (mypage.html 디자인 동일 적용) ── */
.mor__modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--yj-s3);
}
.mor__modal[hidden] { display: none; }
.mor__modal-card {
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  background: var(--yj-canvas, #fff);
  border-radius: var(--yj-r-lg, 16px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: morPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes morPop {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.mor__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--yj-s3) var(--yj-s4);
  border-bottom: 1px solid var(--yj-hairline, #E8E7E4);
  background: var(--yj-surface, #F5F4F0);
  flex: none;
}
.mor__modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--yj-ink-deep, #142814);
}
.mor__modal-x {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--yj-slate, #6F6E69);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.mor__modal-x:hover { color: var(--yj-ink-deep); }
.mor__modal-body {
  padding: var(--yj-s3) var(--yj-s4);
  overflow-y: auto;
  flex: 1 1 auto;
}

/* mypage.html 에서 가져온 진도 바 & 권별 박스 & 칩 스타일 */
.mor__modal-body .vrow {
  display: flex;
  align-items: center;
  gap: var(--yj-s3);
  padding: var(--yj-s2) 0;
  text-decoration: none;
  color: inherit;
  min-height: var(--yj-tap);
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.mor__modal-body .vrow:focus-visible { outline: 2px solid var(--yj-amber); outline-offset: 2px; }
.mor__modal-body .vrow__name { flex: 0 0 44px; font-size: var(--yj-t-cap); font-weight: 800; color: var(--yj-ink); }
.mor__modal-body .vrow__mid { flex: 1; min-width: 0; display: block; }
.mor__modal-body .vrow__bar { display: block; height: 10px; border-radius: var(--yj-r-full); background: var(--yj-surface-2); overflow: hidden; }
.mor__modal-body .vrow__fill { display: block; height: 100%; border-radius: var(--yj-r-full); background: var(--yj-grad); }
.mor__modal-body .vrow__fill.is-full { background: var(--yj-leaf); }
.mor__modal-body .vrow__n { flex: 0 0 68px; text-align: right; font-size: var(--yj-t-cap); font-weight: 700; color: var(--yj-slate); font-variant-numeric: tabular-nums; }
.mor__modal-body .vrow__arrow { flex: 0 0 16px; display: flex; align-items: center; justify-content: center; color: var(--yj-steel); transition: transform var(--yj-m-fast) var(--yj-ease); }
.mor__modal-body button.vrow[aria-expanded="true"] .vrow__arrow { transform: rotate(90deg); color: var(--yj-ink); }

.mor__modal-body .taught-box {
  background: var(--yj-surface);
  border: 1px solid var(--yj-hairline);
  border-radius: var(--yj-r-md);
  padding: var(--yj-s3);
  margin: 0 0 var(--yj-s3);
}
.mor__modal-body .taught-box[hidden] { display: none; }
.mor__modal-body .taught-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yj-s2);
  margin-bottom: var(--yj-s2);
}
.mor__modal-body .taught-box__title { font-size: var(--yj-t-label); font-weight: 800; color: var(--yj-slate); }
.mor__modal-body .taught-box__add-btn { gap: 4px; padding: 3px 8px; font-size: var(--yj-t-label); height: auto; min-height: 28px; }
.mor__modal-body .taught-box__select-wrap { margin-bottom: var(--yj-s2); }
.mor__modal-body .taught-box__select {
  height: 38px;
  font-size: var(--yj-t-cap);
  width: 100%;
  border: 1px solid var(--yj-hairline);
  border-radius: var(--yj-r-sm);
  padding: 0 8px;
  background: var(--yj-card);
  color: var(--yj-ink);
}
.mor__modal-body .taught-box__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mor__modal-body .taught-box__empty { font-size: var(--yj-t-label); color: var(--yj-steel); padding: var(--yj-s2) 0; margin: 0; }
.mor__modal-body .taught-chip {
  display: inline-flex;
  align-items: center;
  background: var(--yj-card);
  border: 1px solid var(--yj-hairline);
  border-radius: var(--yj-r-full);
  padding: 3px 6px 3px 10px;
  font-size: var(--yj-t-label);
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.mor__modal-body .taught-chip__link { text-decoration: none; color: var(--yj-ink); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.mor__modal-body .taught-chip__link:hover { color: var(--yj-leaf-ink); text-decoration: underline; }
.mor__modal-body .taught-chip__n { color: var(--yj-slate); font-weight: 800; font-size: 11px; }
.mor__modal-body .taught-chip__hanja { font-family: var(--yj-font-hanja); font-weight: 700; }
.mor__modal-body .taught-chip__del {
  background: none;
  border: none;
  padding: 0 3px;
  font-size: 15px;
  color: var(--yj-steel);
  cursor: pointer;
  line-height: 1;
  border-radius: var(--yj-r-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mor__modal-body .taught-chip__del:hover { color: var(--yj-error); background: var(--yj-surface-2); }

/* 좁은 화면 — 교실 TV 가 아니라 노트북·태블릿으로 열었을 때 ─
   좌우 2단은 폭이 있어야 읽힌다. 768px 아래에서는 위아래로 눕힌다. */
@media (max-width: 767px) {
  .mor__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, var(--mor-c-left)) var(--mor-split) minmax(0, 1fr);
  }
  .mor__col-left {
    grid-template-rows: minmax(0, auto) var(--mor-split) minmax(0, 1fr);
  }
  .mor__split--v { cursor: row-resize }
  .mor__split--v::after { inset: -6px 0 }
  .mor__pane { padding: var(--yj-s2) var(--yj-s3) }
  .mor__head { flex-wrap: wrap; gap: var(--yj-s3) }
}

/* 인쇄로 새지 않게 — 이 화면은 띄워 두는 화면이다 */
@media print { body.mor { display: none } }

/* ============================================================
   판서 팝업 모달 & 판서 편집 팝업 (hanja-detail.html / slide.html 과 100% 동일 디자인)
   ============================================================ */

/* 공통 숨김 */
.notes-popup-overlay.hidden,
.notes-edit-picker-overlay.hidden {
  display: none !important;
}

/* 1. 판서 팝업 오버레이 */
.notes-popup-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

/* 판서 팝업 컨테이너 (다크 기본) */
.notes-popup-content {
  width: 100%;
  height: 100%;
  background-color: #1e1e1e;
  color: #d4d4d4;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 8px 16px 16px;
  gap: 8px;
  box-sizing: border-box;
}

/* 판서 팝업 상단 툴바 */
.notes-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  gap: 16px;
}
.notes-popup-header-left {
  display: flex;
  align-items: center;
}
.notes-popup-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 진도 버튼 in 판서 팝업 */
.notes-btn-taught {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #facc15;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.notes-btn-taught:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.notes-icon-taught {
  width: 16px;
  height: 16px;
}

/* 판서 편집 버튼 */
.notes-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  margin-right: 16px;
  padding: 6px 12px;
  border-radius: 8px;
  background-color: #facc15;
  color: #1e1e1e;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.notes-btn-edit:hover {
  background-color: #fde047;
}

/* 토글 스위치 (날짜, 한자병기, 화이트모드) */
.notes-toggle-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 16px;
  user-select: none;
}
.notes-toggle-label span:first-child {
  margin-right: 8px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.notes-switch-box {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.notes-switch-box input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.notes-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #4b5563;
  transition: 0.25s ease;
  border-radius: 9999px;
}
.notes-switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.25s ease;
}
.notes-switch-box input:checked + .notes-switch-slider {
  background-color: #3b82f6;
}
.notes-switch-box input:checked + .notes-switch-slider:before {
  transform: translateX(20px);
}

/* 아이콘 버튼 (공유/복사, 전체화면, 닫기) */
.notes-header-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #facc15;
  transition: color 0.2s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.notes-header-icon-btn:hover {
  color: #fde047;
}
.notes-header-icon-btn svg {
  width: 28px;
  height: 28px;
}

/* 글자 크기 슬라이더 */
.notes-font-size-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
  border-left: 1px solid #4b5563;
  padding-left: 16px;
}
.notes-font-label {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.notes-slider {
  width: 120px;
}
@media (min-width: 640px) {
  .notes-slider {
    width: 192px;
  }
}

.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  background: #4a4a4a;
  outline: none;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #FFD700;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #1e1e1e;
}
.custom-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #FFD700;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #1e1e1e;
}
.custom-slider::-moz-range-track {
  background: #4a4a4a;
  height: 12px;
  border-radius: 6px;
}

/* 본문 텍스트 영역 */
.notes-popup-text-container {
  flex-grow: 1;
  height: 100%;
  overflow-y: auto;
  padding-right: 8px;
}
#notes-popup-text {
  font-family: "Paperlogy", sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  transition: font-size 0.1s ease, line-height 0.1s ease;
}

/* 화이트모드 (notes-popup-overlay[data-theme="light"]) */
#notes-popup-overlay[data-theme="light"] .notes-popup-content {
  background-color: #fffdf5;
  color: #2a2a2a;
}
#notes-popup-overlay[data-theme="light"] .notes-popup-header span,
#notes-popup-overlay[data-theme="light"] .notes-toggle-label span {
  color: #2a2a2a;
}
#notes-popup-overlay[data-theme="light"] .notes-header-icon-btn {
  color: #F08C1E;
}
#notes-popup-overlay[data-theme="light"] .notes-header-icon-btn:hover {
  color: #d97316;
}
#notes-popup-overlay[data-theme="light"] .custom-slider {
  background: #e5e7eb;
}
#notes-popup-overlay[data-theme="light"] .notes-font-size-container {
  border-color: #e5e7eb;
}

/* 2. 판서 편집 팝업 모달 */
.notes-edit-picker-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.notes-edit-picker-content {
  width: 100%;
  max-width: 672px;
  max-height: 85vh;
  background-color: #1e1e1e;
  color: #d4d4d4;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  box-sizing: border-box;
}
.notes-edit-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.notes-edit-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fdba74;
}
.notes-edit-picker-body {
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.notes-edit-sec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.notes-edit-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #d4d4d4;
}
.notes-edit-round-btn {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid #6b7280;
  color: #e5e7eb;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s;
}
.notes-edit-round-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.notes-edit-count {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-left: auto;
}
.notes-edit-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.notes-edit-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid #4a4a4a;
  background: #2a2a2a;
  color: #d4d4d4;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s, border-color 0.12s;
}
.notes-edit-chip:hover {
  border-color: #f97316;
}
.notes-edit-chip.is-checked {
  background: rgba(249, 115, 22, 0.18);
  border-color: #f97316;
  color: #fed7aa;
}
.notes-edit-chip input {
  accent-color: #f97316;
}
.notes-edit-hr {
  border: none;
  border-top: 1px solid #374151;
  margin: 0;
}
.notes-edit-picker-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 8px;
  border-top: 1px solid #374151;
}
.notes-edit-cancel-btn {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid #6b7280;
  color: #e5e7eb;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s;
}
.notes-edit-cancel-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.notes-edit-confirm-btn {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 9999px;
  border: none;
  background-color: #f97316;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s;
}
.notes-edit-confirm-btn:hover {
  background-color: #fb923c;
}

/* 판서 편집 팝업 화이트모드 */
#notes-edit-picker-overlay[data-theme="light"] .notes-edit-picker-content {
  background-color: #ffffff;
  color: #2a2a2a;
}
#notes-edit-picker-overlay[data-theme="light"] .notes-edit-section-title {
  color: #2a2a2a;
}
#notes-edit-picker-overlay[data-theme="light"] .notes-edit-hr,
#notes-edit-picker-overlay[data-theme="light"] .notes-edit-picker-footer {
  border-color: #e5e7eb;
}
#notes-edit-picker-overlay[data-theme="light"] .notes-edit-chip {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}
#notes-edit-picker-overlay[data-theme="light"] .notes-edit-chip.is-checked {
  background: rgba(240, 140, 30, 0.14);
  border-color: #F08C1E;
  color: #9a3412;
}
#notes-edit-picker-overlay[data-theme="light"] #notes-edit-close-x {
  color: #F08C1E;
}
#notes-edit-picker-overlay[data-theme="light"] .notes-edit-round-btn,
#notes-edit-picker-overlay[data-theme="light"] .notes-edit-cancel-btn {
  border-color: #d1d5db;
  color: #374151;
}
#notes-edit-picker-overlay[data-theme="light"] .notes-edit-count {
  color: #6b7280;
}