/* ============================================================
   어사문 — 디자인 규격 v4 「햇살 든 유자」 적응 층 (2026-10-14~)
   정본: YUJA-DESIGN.md (프로젝트 루트 왕관유자_디자인시스템_v4.md)

   공용 CSS ds/v3(규격 v4) 위에서, 옛 페이지의 인라인 <style> 을
   v4 로 덮는다. 각 페이지 <head> 맨 끝에 링크한다(인라인보다 뒤).
   되받쓰 dictation/v3.css 와 같은 방식이다.

   규칙
   - 색·간격·모서리·움직임·그림자는 토큰 이름만 쓴다. HEX 를 새로 적지 않는다.
   - 기존 id·class·data-* 는 고치지 않는다. 선택자로 덮기만 한다.
   - 화면 유형마다 구역을 나눈다. 한 구역 = 한 커밋 = 되돌리기 단위.
   - 인쇄물은 화면 틀만 바꾼다. A4 종이 안쪽은 그대로 둔다(작가 결정 2026-10-14).
   - 배움 지면은 다크 모드를 켜지 않는다(규격 §3-5).
   ============================================================ */

/* ============================================================
   0. 공통 틀 — 모든 페이지
   ============================================================ */

/* 도크·상단바(미색 card + 1px 선)와 PC 상단 메뉴의 '지금 칸' 알약(유자 100 · 높이 36)은
   공용 CSS ds/v3 shell.css 가 맡는다(2026-10-14 고침, tlfltmtm-afk.github.io 79828c2).
   여기서 메우던 임시 덧칠은 그 배포를 확인하고 걷었다. */

/* 스크립트가 끼워 넣는 스타일 — onboard.js · print-viewer.js 가 --yj-canvas 를 '흰 종이' 뜻으로 쓴다.
   v4 에서는 그 이름이 캔버스(바탕)라 시트가 베이지로 가라앉는다. 스크립트는 고치지 않고 여기서 덮는다.
   'body ' 를 붙여 한 단계만 올린다 — 스크립트의 고른 상태 규칙([aria-checked] 등)은 그대로 이긴다. */
body .yj-ob-sheet,
body .yj-ob-tip,
body .yj-ob-arrow { background: var(--yj-card-hi); }
body .yj-ob-opt { background: var(--yj-card); }
body .yjpv { background: var(--yj-card); }

/* ============================================================
   1. 대문 — index.html · appindex.html (body.home-page)
   home-scale 체계라 셸·크기는 건드리지 않는다. 색·깊이만 바꾼다.
   매일학습 숲색 카드는 그대로 둔다(작가 결정 2026-10-14) — 숲은 페이지당 1회.
   ============================================================ */

/* 두 겹 바탕: 캔버스 + 미색 카드 */
html body.home-page { background: var(--yj-canvas); }
html:has(> body.home-page) { background-color: var(--yj-canvas) !important; }

/* 타일 — 미색 카드 + 그림자 1, 올리면 그림자 2 + 2px 올림 */
body.home-page .htile {
  background: var(--yj-card);
  border-color: var(--yj-line);
  box-shadow: var(--yj-sh-1);
  transition: box-shadow var(--yj-m-mid) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
body.home-page .htile:hover { background: var(--yj-card); box-shadow: var(--yj-sh-2); transform: translateY(-2px); }
body.home-page .htile:active { transform: scale(.98); }

/* 소식 게시판 — 카드 한 장, 행 hover 는 유자 50 */
body.home-page .news-board { background: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }
body.home-page .news-row:hover,
body.home-page .hli:hover { background: var(--yj-yuja-50); }

/* 검색창 — 배움 지면은 유자 50 면("여기서 시작"), 포커스는 2px 유자 600 */
body.home-page .hsearch { background: var(--yj-yuja-50); border-color: var(--yj-line-strong); }
body.home-page .hsearch:focus-within { border-color: var(--yj-yuja-600); box-shadow: 0 0 0 1px var(--yj-yuja-600); }
body.home-page .hsearch__ico { color: var(--yj-sub); }
/* 검색 단추 — 주 버튼은 '학습 시작하기' 하나. 검색은 대등한 다른 선택 = secondary(유자 100 + 유자 글자) */
body.home-page .hsearch__btn { background: var(--yj-yuja-100); color: var(--yj-yuja-ink);
  transition: background-color var(--yj-m-fast) var(--yj-ease); }
body.home-page .hsearch__btn:hover { background: var(--yj-yuja-200); }

/* 머리줄 ⓘ — 아이콘 버튼: 바탕 없음 + 보조 글자 */
body.home-page .hbar__info { background: transparent; border-color: var(--yj-line-strong); color: var(--yj-sub); }
body.home-page .hbar__info:hover { background: var(--yj-yuja-50); }

/* 사용자 전환 펼침 메뉴 — card-hi + 그림자 3, 고른 사람은 유자 200 */
body.home-page .hero-user-popover { background: var(--yj-card-hi); box-shadow: var(--yj-sh-3); border-radius: var(--yj-r-lg); }
body.home-page .hero-user-opt:hover { background: var(--yj-yuja-50); }
body.home-page .hero-user-opt.is-active { background: var(--yj-yuja-200); color: var(--yj-ink-deep); }

/* ============================================================
   2. 한자 상세 — hanja-detail.html (배포에서는 hanja-pages/{id}.html 로 구워진다)
   Tailwind 유틸리티와 JS 가 만드는 카드(.kpi-card)는 클래스를 그대로 두고 색·깊이만 덮는다.
   권별 색 꼬리표(1권 빨강·2권 파랑…)는 권을 가르는 기능 색이라 그대로 둔다.
   판서 편집 창의 검은 칠판 바탕도 칠판이라는 뜻이 있어 그대로 둔다.
   ============================================================ */

/* 두 겹 바탕 */
html:has(> body #overview-hanja-box) { background-color: var(--yj-canvas) !important; }
body:has(#overview-hanja-box) { background-color: var(--yj-canvas); }

/* 큰 흰 판 안에 카드가 또 든 이중 상자 → 바깥 판을 풀어 카드가 캔버스 위에 바로 놓이게 */
#meaning > .max-w-5xl > .bg-white,
#vocabulary > .max-w-5xl > .bg-white,
#advanced-vocab > .max-w-5xl > .bg-white {
  background: transparent;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  padding-left: 0; padding-right: 0;
}

/* 카드 — 미색 + 1px 선(바깥 고리) + 그림자 1. 옛 2px 투명 테두리는 자리만 지킨다 */
body:has(#overview-hanja-box) .kpi-card {
  background-color: var(--yj-card);
  box-shadow: 0 0 0 1px var(--yj-line), var(--yj-sh-1);
  border-radius: var(--yj-r-lg);
  transition: transform var(--yj-m-mid) var(--yj-ease), box-shadow var(--yj-m-mid) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease);
}
body:has(#overview-hanja-box):not(.using-keyboard) .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--yj-line), var(--yj-sh-2);
  border-color: transparent;
}
/* 마지막으로 누른 카드 — 지금 위치 표시는 유자 600 테두리 */
body:has(#overview-hanja-box) .kpi-card.last-clicked,
body:has(#overview-hanja-box):not(.using-keyboard) .kpi-card.last-clicked:hover { border-color: var(--yj-yuja-600); }
/* JS 가 그리는 카드의 Tailwind 회색 외곽선(outline-gray-200)은 위 1px 선과 겹치므로 선 색에 맞춘다 */
body:has(#overview-hanja-box) .kpi-card.outline { outline-color: var(--yj-line); }

/* 해설 상자 — 유자 50 면(안내 상자) */
body:has(#overview-hanja-box) .kpi-card#meaning-explanation-box { background-color: var(--yj-yuja-50); outline-color: var(--yj-yuja-200); }

/* 뜻 카드 제목 — 잎 #4CAF50 글자는 흰 카드 위 2.9:1 로 미달 → 잎 글자색 */
#meanings-list .text-\[\#4CAF50\] { color: var(--yj-leaf-ink); }

/* 도구줄 단추 — 미색 카드 + 1px 선, 올리면 유자 50 */
.yj-detail-tools .yj-detail-tool {
  background-color: var(--yj-card);
  box-shadow: 0 0 0 1px var(--yj-line), var(--yj-sh-1);
}
.yj-detail-tools .yj-detail-tool:hover { background-color: var(--yj-yuja-50); }
.yj-detail-tools .yj-detail-tool:focus-visible { outline-color: var(--yj-yuja-600); }
.yj-detail-tools .yj-detail-tool__t { color: var(--yj-sub); }

/* 이전·다음 연번 카드 — 주황 50 면 → 미색 카드 */
#page-navigation .nav-link.kpi-card { background-color: var(--yj-card); }
#page-navigation .nav-link.kpi-card:hover { background-color: var(--yj-yuja-50); }
body:has(#overview-hanja-box) main hr.border-amber-200 { border-color: var(--yj-line); }

/* 포커스 — 주황 빛 번짐(색 그림자 금지) → 2px 유자 600 테두리 */
body:has(#overview-hanja-box).using-keyboard .interactive-box:focus,
body:has(#overview-hanja-box).using-keyboard button:focus,
body:has(#overview-hanja-box).using-keyboard a:focus,
body:has(#overview-hanja-box) .interactive-box:focus-visible,
body:has(#overview-hanja-box) button:focus-visible,
body:has(#overview-hanja-box) a:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--yj-yuja-600);
  outline-offset: 2px;
}

/* 주황 제목(#FF8C00, 2.3:1 미달) → 유자 글자색(유자 50 위 5.25:1) — 작가 결정 2026-10-14 안 C.
   떠 있는 음성 재생기 · 교사용 큰 화면 창 · 음절 상자 작은 한자의 주황은 이번엔 그대로(TV 확인 뒤 따로) */
body:has(#overview-hanja-box) #explanation-title.text-\[\#FF8C00\],
body:has(#overview-hanja-box) #overview-info-box h2.text-\[\#FF8C00\] { color: var(--yj-yuja-ink); }

/* ============================================================
   3. 한자 퀴즈 — hanja-quiz.html  (선택자 body.yj-dock-compat:has(#tab-homophone1) = body.yj-dock-compat:has(#tab-homophone1))
   매일학습 퀴즈(daily-run)는 같은 부품을 쓰지만 body 클래스가 없어 여기 걸리지 않는다 — 매일학습 차례에.
   정답·오답 클래스(selected · matched · wrong · stamp-*)는 JS 가 붙인다. 이름은 그대로, 색만 덮는다.
   ============================================================ */

/* 문제유형 막대 — 반투명 + 흐림(금지) → 불투명 미색 + 1px 선 */
body.yj-dock-compat:has(#tab-homophone1) .quiz-type-bar-fixed { background: var(--yj-card); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--yj-line); }
/* 밑줄 탭 — 지금 유형은 먹 700 + 2px 유자 500 밑줄 */
body.yj-dock-compat:has(#tab-homophone1) .tab-btn { color: var(--yj-sub); }
body.yj-dock-compat:has(#tab-homophone1) .tab-btn.active { color: var(--yj-ink-deep); border-bottom: 2px solid var(--yj-yuja-500); }
body.yj-dock-compat:has(#tab-homophone1) .tab-btn:hover { color: var(--yj-ink-deep); background: var(--yj-yuja-50); }

/* 고르는 카드 — 올리면 유자 50, 고른 것은 유자 200 면 + 유자 600 테두리 + 먹 글자 */
body.yj-dock-compat:has(#tab-homophone1) .vocab-chip:hover,
body.yj-dock-compat:has(#tab-homophone1) .def-card:hover,
body.yj-dock-compat:has(#tab-homophone1) .story-word-opt:hover,
body.yj-dock-compat:has(#tab-homophone1) .story-chip-opt:hover:not(.filled),
body.yj-dock-compat:has(#tab-homophone1) .chat-opt-btn:hover:not(.disabled),
body.yj-dock-compat:has(#tab-homophone1) .story-blank:hover { background: var(--yj-yuja-50); border-color: var(--yj-yuja-600); color: inherit; }
body.yj-dock-compat:has(#tab-homophone1) .vocab-chip.selected,
body.yj-dock-compat:has(#tab-homophone1) .def-card.selected { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); }
/* 이야기 빈칸 — 지금 고르는 칸: 빛 번짐(색 그림자 금지) 없이 유자 200 + 600 */
body.yj-dock-compat:has(#tab-homophone1) .story-blank.active { background: var(--yj-yuja-200) !important; color: var(--yj-ink-deep) !important;
  border-bottom-color: var(--yj-yuja-600) !important; outline: 2px solid var(--yj-yuja-600) !important; box-shadow: none !important; }

/* 세트 점 · 화살표 · 도약 스위치 · 진도 막대 — 주황 → 유자 */
body.yj-dock-compat:has(#tab-homophone1) .set-dot.active { background: var(--yj-yuja-500); box-shadow: 0 0 0 3px var(--yj-yuja-100); }
body.yj-dock-compat:has(#tab-homophone1) .set-dot.done { background: var(--yj-leaf); }
body.yj-dock-compat:has(#tab-homophone1) .set-arrow:hover,
body.yj-dock-compat:has(#tab-homophone1) .chips-arrow-btn:hover:not(.disabled) { border-color: var(--yj-yuja-600); color: var(--yj-yuja-ink); background: var(--yj-yuja-50); }
body.yj-dock-compat:has(#tab-homophone1) .chips-thumb { background: var(--yj-yuja-500); }
body.yj-dock-compat:has(#tab-homophone1) .toggle-track.on { background: var(--yj-yuja-500); }
body.yj-dock-compat:has(#tab-homophone1) .toggle-track.on .toggle-thumb { color: var(--yj-yuja-ink); }
body.yj-dock-compat:has(#tab-homophone1) .chat-progress-fill { background: var(--yj-yuja-500); }
body.yj-dock-compat:has(#tab-homophone1) .chat-score-badge { background: var(--yj-yuja-100); border-color: var(--yj-yuja-200); color: var(--yj-ink-deep); }

/* 단추 — 주 버튼은 유자 300 + 먹 글자(흰 글자 대비 미달·주황 빛 그림자 금지), 보조는 올리면 유자 테두리 */
body.yj-dock-compat:has(#tab-homophone1) .btn-primary { background: var(--yj-yuja-300); color: var(--yj-on-action); box-shadow: none; border-radius: var(--yj-r-full); }
body.yj-dock-compat:has(#tab-homophone1) .btn-primary:hover { background: var(--yj-yuja-500); box-shadow: none; transform: none; }
body.yj-dock-compat:has(#tab-homophone1) .btn-secondary { background: var(--yj-card); border-color: var(--yj-line-strong); color: var(--yj-ink); border-radius: var(--yj-r-sm); }
body.yj-dock-compat:has(#tab-homophone1) .btn-secondary:hover { border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); background: var(--yj-yuja-50); }

/* 안내 상자 — 남보라(쓰지 않는 색) → 유자 50 + 왼쪽 2px 유자 500 */
body.yj-dock-compat:has(#tab-homophone1) .hint-box { background: var(--yj-yuja-50); border: 0; border-left: 2px solid var(--yj-yuja-500); border-radius: var(--yj-r-sm); color: var(--yj-ink); }

/* 채팅 — 글쓴이(오른쪽) 말풍선 유자 100 */
body.yj-dock-compat:has(#tab-homophone1) .chat-right { background: var(--yj-yuja-100); }
body.yj-dock-compat:has(#tab-homophone1) .chat-blank-cta { background: var(--yj-yuja-50); border-color: var(--yj-yuja-200); color: var(--yj-yuja-ink); }
body.yj-dock-compat:has(#tab-homophone1) .chat-blank-cta:hover { background: var(--yj-yuja-100); border-color: var(--yj-yuja-600); }
body.yj-dock-compat:has(#tab-homophone1) .chat-blank-click:hover { color: var(--yj-yuja-ink); border-color: var(--yj-yuja-ink); }

/* 이야기 — 보기 막대 유자 50, 보기 표식 유자 100 */
body.yj-dock-compat:has(#tab-homophone1) .story-options-bar { background: var(--yj-yuja-50); border-color: var(--yj-yuja-200); }
body.yj-dock-compat:has(#tab-homophone1) .story-opt-badge { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); }
body.yj-dock-compat:has(#tab-homophone1) .story-inline-panel { background: var(--yj-card-hi); border-color: var(--yj-yuja-200); box-shadow: var(--yj-sh-3); }
body.yj-dock-compat:has(#tab-homophone1) .story-inline-head { color: var(--yj-ink-deep); }

/* 결과 카드 · 보기 고르기 창 */
body.yj-dock-compat:has(#tab-homophone1) .result-card { background: var(--yj-card); box-shadow: var(--yj-sh-1); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); }
body.yj-dock-compat:has(#tab-homophone1) #story-word-modal > div { background: var(--yj-card-hi); border-color: var(--yj-line); box-shadow: var(--yj-sh-3); border-radius: var(--yj-r-lg); }
body.yj-dock-compat:has(#tab-homophone1) #story-word-modal > div > div > span { color: var(--yj-ink-deep); }

/* '연결해보세요' 구분선 */
body.yj-dock-compat:has(#tab-homophone1) #quiz-area .bg-amber-200 { background-color: var(--yj-line); }
body.yj-dock-compat:has(#tab-homophone1) #quiz-area .text-amber-500\/80 { color: var(--yj-yuja-ink); }

/* ── 3-B. 한자 퀴즈 모양 — 평평한 v4 (작가 결정 2026-10-14 안 B)
   점 격자 바탕·점선으로 오린 카드·명조를 걷고 캔버스 위 미색 카드 + 고딕으로.
   채점 도장: 정답 빨간 동그라미는 그대로, 오답 X 표 이모지만 같은 빨강 X 선 그림(작가 결정). ── */
html:has(> body.yj-dock-compat #tab-homophone1) { --bg: var(--yj-canvas); background-color: var(--yj-canvas) !important; background-image: none !important; }
body.yj-dock-compat:has(#tab-homophone1) { background-color: var(--yj-canvas) !important; background-image: none !important; }

body.yj-dock-compat:has(#tab-homophone1) .vocab-chip,
body.yj-dock-compat:has(#tab-homophone1) .story-word-opt,
body.yj-dock-compat:has(#tab-homophone1) .story-chip-opt {
  font-family: var(--yj-font-ui); background: var(--yj-card);
  border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-sm);
}
body.yj-dock-compat:has(#tab-homophone1) .def-card,
body.yj-dock-compat:has(#tab-homophone1) .chat-opt-btn {
  font-family: var(--yj-font-ui); background: var(--yj-card);
  border: 1px solid var(--yj-line); border-radius: var(--yj-r-sm); box-shadow: var(--yj-sh-1);
}
body.yj-dock-compat:has(#tab-homophone1) .vocab-chip.selected,
body.yj-dock-compat:has(#tab-homophone1) .def-card.selected { border-color: var(--yj-yuja-600); box-shadow: inset 0 0 0 1px var(--yj-yuja-600); }
body.yj-dock-compat:has(#tab-homophone1) .vocab-chip.wrong,
body.yj-dock-compat:has(#tab-homophone1) .def-card.wrong,
body.yj-dock-compat:has(#tab-homophone1) .story-word-opt.wrong,
body.yj-dock-compat:has(#tab-homophone1) .story-chip-opt.wrong { border-color: var(--red); }
body.yj-dock-compat:has(#tab-homophone1) .def-card.matched,
body.yj-dock-compat:has(#tab-homophone1) .vocab-chip.matched { box-shadow: none; }
body.yj-dock-compat:has(#tab-homophone1) .def-num { border-width: 1.5px; }

/* 문제 안내 — 점선 상자 → 안내 상자(유자 50 + 왼쪽 2px 유자 500) */
body.yj-dock-compat:has(#tab-homophone1) #quiz-guide-banner {
  font-family: var(--yj-font-ui); background: var(--yj-yuja-50);
  border: 0; border-left: 2px solid var(--yj-yuja-500); border-radius: var(--yj-r-sm);
}

/* 채팅 */
body.yj-dock-compat:has(#tab-homophone1) .chat-window { background: var(--yj-card); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1); }
body.yj-dock-compat:has(#tab-homophone1) .chat-window::before { background: var(--yj-card); color: var(--yj-sub); font-family: var(--yj-font-ui); }
body.yj-dock-compat:has(#tab-homophone1) .chat-header { border-bottom: 1px solid var(--yj-line); font-family: var(--yj-font-ui); }
body.yj-dock-compat:has(#tab-homophone1) .chat-body { background: transparent; }
body.yj-dock-compat:has(#tab-homophone1) .chat-bubble { font-family: var(--yj-font-ui); border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-sm); }
body.yj-dock-compat:has(#tab-homophone1) .chat-left { background: var(--yj-card-hi); }
body.yj-dock-compat:has(#tab-homophone1) .chat-inline-panel { background: var(--yj-card-hi); border: 1px solid var(--yj-line); border-radius: var(--yj-r-sm); box-shadow: var(--yj-sh-3); }
body.yj-dock-compat:has(#tab-homophone1) .chat-blank-cta { font-family: var(--yj-font-ui); border-style: solid; border-width: 1px; }

/* 이야기 */
body.yj-dock-compat:has(#tab-homophone1) .story-body { background: var(--yj-card) !important; border-color: var(--yj-line) !important; border-width: 1px !important; box-shadow: var(--yj-sh-1); }
body.yj-dock-compat:has(#tab-homophone1) .story-blank,
body.yj-dock-compat:has(#tab-homophone1) .story-inline-head { font-family: var(--yj-font-ui); }
body.yj-dock-compat:has(#tab-homophone1) .story-options-bar { border-style: solid; border-width: 1px; }
body.yj-dock-compat:has(#tab-homophone1) .blank-marker { font-family: var(--yj-font-ui); }

/* 오답 도장 — X 표 이모지 대신 같은 빨강의 X 두 줄(선 그림). 위치·크기·튀어나오는 움직임은 그대로 */
body.yj-dock-compat:has(#tab-homophone1) .stamp-wrong::after {
  content: ""; width: 34px; height: 34px; font-size: 0;
  background-color: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 퀴즈 엔진(quiz-core.js)이 그리는 안내 글자의 명조(font-serif)·점선 구분선 — 한자에는 쓰이지 않는다(확인) */
body.yj-dock-compat:has(#tab-homophone1) main .font-serif { font-family: var(--yj-font-ui); }
body.yj-dock-compat:has(#tab-homophone1) main .border-dashed.border-gray-300 { border-top-style: solid; border-top-width: 1px; border-color: var(--yj-line); }

/* ── 3-C. 한자 퀴즈 — 채팅 정리 · 전체화면(교실 TV) 배치 (2026-10-14 작가 요청) ── */

/* 채팅: '문제 인용문' 꼬리표 지우기, 머리의 말풍선 이모지(스크립트가 그린다) 숨기기 */
body.yj-dock-compat:has(#tab-homophone1) .chat-window::before { content: none; display: none; }
body.yj-dock-compat:has(#tab-homophone1) .chat-header .text-lg { display: none; }

/* PC 일반 화면: 도크 호환 규칙이 body 에 이미 112px(도크 56 + 탭 막대 자리)을 비워 두는데
   본문에 인라인 margin-top:108px 이 또 붙어 220px 아래에서 시작했다 → 공간이 남는데도 스크롤.
   본문 쪽 여백만 걷는다(인라인보다 !important 가 이긴다. 전체화면에서는 스크립트가 인라인 important 로 다시 잡는다) */
@media (min-width: 769px) {
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) > main { margin-top: 0 !important; }
}

/* 전체화면 ① 숨은 이야기 상자가 공간을 먹던 결함 — `:fullscreen #story-quiz-wrap {display:flex !important}` 가
   .hidden 까지 이겨, 뜻·문장·채팅에서도 빈 상자가 화면 절반을 차지했다(내용이 위로 몰리고 채팅창이 짓눌림) */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #story-quiz-wrap.hidden { display: none !important; }

/* ── 전체화면 = PPT 한 장 (2026-10-14 작가 요청: "한 장의 PPT, 교실 뒷자리에서도 보이게") ──
   틀: 도크 숨김 → 문제유형 탭(맨 위, 흐름 안) → 남은 공간 전부를 미색 슬라이드 한 장으로.
   글자는 교실 뒷자리 기준으로 크게 잡고, 넘치면 맞춤 스크립트(fitQuizFullscreen)가 --qz-scale 을
   줄여 한 장 안에 맞춘다(최소 0.6). 스크립트는 고치지 않는다 — 스크립트가 main 에 넣는 인라인
   margin-top·height 는 !important 로 덮고, body 를 세로 flex 로 세워 main 이 남은 높이를 정확히 갖게 한다.
   (탭과 본문 사이에 스크립트가 비워 두던 약 77px 빈 띠도 함께 사라진다) */

/* 틀 */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) { display: flex !important; flex-direction: column !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .yj-shell__dock { display: none !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #quiz-type-bar.quiz-type-bar-fixed {
  position: relative !important; top: auto !important; flex: none;
  background: transparent; border: 0; padding: calc(10px * var(--qz-scale)) 0 calc(6px * var(--qz-scale)) !important;
}
:fullscreen body.yj-dock-compat:has(#tab-homophone1) > main {
  flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; width: auto !important;
  margin: 0 clamp(12px, 2vw, 40px) clamp(12px, 2vw, 40px) !important;
  padding: calc(20px * var(--qz-scale)) calc(36px * var(--qz-scale)) !important;
  background: var(--yj-card); border: 1px solid var(--yj-line);
  border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-2);
}

/* 슬라이드 안의 덩어리는 줄어들지 않는다 — 넘침이 main 에 잡혀야 스크립트가 배율을 줄인다.
   (줄어드는 칸이면 내용이 칸 밖으로 흘러 다음 줄을 덮었다: 채팅 말풍선이 '빈칸 보기 열기'·진행 막대 위로) */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #standard-quiz-wrap,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-content-area,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #result-screen { flex: 0 0 auto !important; min-height: auto !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-window { flex-shrink: 0; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #standard-quiz-wrap,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #result-screen { width: 100%; max-width: 1640px; margin-left: auto !important; margin-right: auto !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap { width: 100%; max-width: 1400px; margin-left: auto !important; margin-right: auto !important; }

/* 슬라이드 안 상자는 한 단 낮춘다(슬라이드가 이미 카드) */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-window { background: var(--yj-card-hi); box-shadow: none; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .story-body { background: var(--yj-card-hi) !important; box-shadow: none; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .def-card,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-opt-btn { background: var(--yj-card-hi); box-shadow: 0 0 0 0 transparent; border-color: var(--yj-line-strong); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .def-card.selected { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .vocab-chip { background: var(--yj-card-hi); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .vocab-chip.selected { background: var(--yj-yuja-200); }

/* 뒷자리 글자 — 1920 TV 기준 어휘 약 70px · 뜻 약 60px · 말풍선 약 48px (배율 1.2 일 때) */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #quiz-guide-banner { padding: calc(12px * var(--qz-scale)) calc(20px * var(--qz-scale)) !important; margin-bottom: calc(10px * var(--qz-scale)) !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #quiz-guide-banner span { font-size: calc(clamp(16px, 1.75vw, 38px) * var(--qz-scale)) !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #vocab-chips { justify-content: center !important; flex-wrap: wrap !important; overflow: visible !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .vocab-chip { font-size: calc(clamp(22px, 3.1vw, 60px) * var(--qz-scale)) !important; padding: calc(12px * var(--qz-scale)) calc(28px * var(--qz-scale)) !important; border-width: 2px; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .def-card { font-size: calc(clamp(20px, 2.6vw, 50px) * var(--qz-scale)) !important; min-height: 0; line-height: 1.35; border-width: 2px; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .def-num { width: calc(clamp(30px, 2.6vw, 54px) * var(--qz-scale)) !important; height: calc(clamp(30px, 2.6vw, 54px) * var(--qz-scale)) !important;
               font-size: calc(clamp(15px, 1.4vw, 28px) * var(--qz-scale)) !important; border-width: 2px; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .homo1-word-card { font-size: calc(clamp(20px, 2.5vw, 50px) * var(--qz-scale)) !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .homo1-cat-chip { font-size: calc(clamp(18px, 2vw, 40px) * var(--qz-scale)) !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #hint-area { font-size: calc(clamp(16px, 1.7vw, 34px) * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #quiz-area .text-xs { font-size: calc(clamp(13px, 1.15vw, 24px) * var(--qz-scale)); }

:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-header { padding: calc(8px * var(--qz-scale)) calc(16px * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-header .text-sm { font-size: calc(clamp(14px, 1.2vw, 24px) * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-body { padding: calc(14px * var(--qz-scale)) calc(18px * var(--qz-scale)); gap: calc(8px * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-body .text-\[11px\] { font-size: calc(clamp(13px, 1.15vw, 24px) * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-bubble { font-size: calc(clamp(18px, 2.15vw, 46px) * var(--qz-scale)) !important; max-width: 82%; padding: calc(8px * var(--qz-scale)) calc(16px * var(--qz-scale)); line-height: 1.4; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-content-area { gap: calc(10px * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-blank-cta { font-size: calc(clamp(15px, 1.5vw, 32px) * var(--qz-scale)); padding: calc(10px * var(--qz-scale)) calc(16px * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-opt-btn { font-size: calc(clamp(18px, 2.2vw, 46px) * var(--qz-scale)) !important; }

/* 진행 줄(도약·세트 점·쪽수·점수) */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #std-pagination-row,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-bottom-bar { gap: calc(12px * var(--qz-scale)) !important; margin-top: calc(10px * var(--qz-scale)) !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #set-label,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-progress-label,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-score-badge { font-size: calc(clamp(13px, 1.15vw, 24px) * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .chat-progress-track { width: calc(200px * var(--qz-scale)); height: calc(10px * var(--qz-scale)); border-radius: var(--yj-r-full); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .set-dot { width: calc(14px * var(--qz-scale)); height: calc(14px * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .set-arrow { width: calc(36px * var(--qz-scale)); height: calc(36px * var(--qz-scale)); }
/* 이야기 본문 — 글자는 스크립트가 최대 38px 까지 키운다. 남는 아래 공간은 세로 가운데로 나눈다
   (align-content 를 모르는 옛 브라우저는 지금처럼 위쪽 정렬) */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #story-quiz-wrap .story-body { align-content: center; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .story-title { font-size: calc(clamp(20px, 2.1vw, 40px) * var(--qz-scale)) !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .story-grade,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .story-counter,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .story-opt-badge { font-size: calc(clamp(14px, 1.3vw, 24px) * var(--qz-scale)) !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) .story-chip-opt { font-size: calc(clamp(18px, 1.9vw, 34px) * var(--qz-scale)) !important; }

/* 휴대폰 채팅 — 작은 화면(360x640)에서 64px 넘쳐 스크롤이 생겼다. 위아래 여백만 줄인다(글자 크기는 그대로) */
@media (max-width: 768px) {
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap { padding-bottom: 0; }
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) .chat-window { margin-bottom: 6px; }
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) .chat-header { padding-top: 4px; padding-bottom: 4px; }
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) .chat-body { padding: 6px 10px; gap: 4px; }
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) .chat-body .mb-1 { margin-bottom: 2px; }
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area { padding: 4px; }
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) .chat-blank-cta { padding-top: 7px; padding-bottom: 7px; }
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) #chat-bottom-bar { margin-top: 6px; margin-bottom: 2px; }
}
/* 휴대폰 아래 여백 — 고정된 탭 막대(52) + 도크(56) + 안전영역만큼만. 22px 이 더 비어 작은 화면에서 스크롤이 남았다 */
@media (max-width: 768px) {
  html:not(:fullscreen) body.yj-dock-compat:has(#tab-homophone1) { padding-bottom: calc(112px + var(--yj-safe-b, 0px)) !important; }
}

/* 전체화면 채팅 — 대화(왼쪽) | 빈칸 보기·보기 단추(오른쪽) 두 단. 보기를 열어도 대화 아래로 쌓이지 않아
   슬라이드가 작아지지 않는다(아래로 쌓으면 1366 화면에서 배율 0.66 까지 줄었다) */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap { max-width: 1680px; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-content-area { flex-direction: row !important; align-items: stretch !important; gap: calc(20px * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-content-area > .chat-window { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area {
  flex: 0 0 30%; display: flex; flex-direction: column; justify-content: center;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area .chat-blank-cta { min-height: calc(120px * var(--qz-scale)); border-radius: var(--yj-r-lg); line-height: 1.5; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area .chat-inline-panel { box-shadow: none; border-color: var(--yj-line-strong); padding: calc(12px * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area .story-inline-head { font-size: calc(clamp(14px, 1.3vw, 26px) * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area .story-inline-head button { font-size: calc(clamp(22px, 2vw, 36px) * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area #chat-options-grid { grid-template-columns: 1fr; gap: calc(10px * var(--qz-scale)); }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area .chat-opt-btn { padding: calc(12px * var(--qz-scale)) !important; }

/* 채팅 정답 해설 상자(quiz-core.js showChatFeedbackInline) — 이룬 것은 잎(규격 §3-3) */
body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area > .bg-emerald-50 { background: var(--yj-leaf-tint); border-color: transparent; border-radius: var(--yj-r-lg); }
body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area > .bg-emerald-50 .text-emerald-800 { color: var(--yj-leaf-ink); }
body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area > .bg-emerald-50 .text-gray-700 { color: var(--yj-ink); }

/* 전체화면 — 오른쪽 칸을 채우는 크기로. 글자 12px 고정(text-xs) → 슬라이드 배율을 따르는 뒷자리 크기
   (작가 요청 2026-10-14: "우측 영역에 비해 박스도 텍스트도 너무 작다") */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area > .bg-emerald-50 {
  gap: calc(16px * var(--qz-scale)) !important; padding: calc(22px * var(--qz-scale)) calc(24px * var(--qz-scale)) !important;
}
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area > .bg-emerald-50 > div:first-child {
  font-size: calc(clamp(16px, 1.55vw, 32px) * var(--qz-scale)) !important; gap: calc(8px * var(--qz-scale));
}
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area > .bg-emerald-50 > p {
  font-size: calc(clamp(16px, 1.55vw, 32px) * var(--qz-scale)) !important; line-height: 1.6 !important; word-break: keep-all;
}
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area > .bg-emerald-50 > .btn-primary {
  font-size: calc(clamp(18px, 1.8vw, 36px) * var(--qz-scale)) !important;
  padding: calc(18px * var(--qz-scale)) calc(20px * var(--qz-scale)) !important;
  margin-top: calc(6px * var(--qz-scale)) !important;
}
/* text-xs · text-sm 이 줄 높이를 16·20px 로 묶어, 글자를 키우면 단추가 납작해지고 제목이 겹친다 */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area > .bg-emerald-50 > div:first-child,
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-interaction-area > .bg-emerald-50 > .btn-primary { line-height: 1.3 !important; }

/* 채팅 완료 화면(quiz-core.js showChatResult) — 주황 면 → 유자 50, 점수(이룬 것)는 잎 글자, 장식 이모지 숨김 */
body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap > .bg-orange-50\/50 { background: var(--yj-yuja-50); border-color: var(--yj-yuja-200); border-radius: var(--yj-r-lg); }
body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap > .bg-orange-50\/50 .text-3xl { display: none; }
body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap > .bg-orange-50\/50 .text-amber-900 { color: var(--yj-ink-deep); }
body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap > .bg-orange-50\/50 .text-orange-600 { color: var(--yj-leaf-ink); }
/* 전체화면 — 슬라이드 가운데 큰 결과 카드 */
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap > .bg-orange-50\/50 {
  max-width: 1000px !important; margin-top: 0 !important; padding: calc(48px * var(--qz-scale)) calc(40px * var(--qz-scale)) !important; gap: calc(28px * var(--qz-scale)) !important;
}
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap > .bg-orange-50\/50 .text-xl { font-size: calc(clamp(24px, 2.8vw, 56px) * var(--qz-scale)) !important; line-height: 1.3 !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap > .bg-orange-50\/50 .text-sm { font-size: calc(clamp(20px, 2.2vw, 44px) * var(--qz-scale)) !important; line-height: 1.3 !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap > .bg-orange-50\/50 .max-w-\[200px\] { max-width: calc(360px * var(--qz-scale)) !important; }
:fullscreen body.yj-dock-compat:has(#tab-homophone1) #chat-quiz-wrap > .bg-orange-50\/50 .btn-primary {
  font-size: calc(clamp(18px, 1.8vw, 36px) * var(--qz-scale)) !important; line-height: 1.3 !important; padding: calc(18px * var(--qz-scale)) calc(24px * var(--qz-scale)) !important;
}


/* ============================================================
   4. 목록·검색 — 목차 3종(vocabulary · serial-order · hanja-sound) · 관용어(idiom) · 맞춤법(spelling)
      · 검색(search) · 웹툰 목록(webtoon)
   목록 카드는 스크립트가 Tailwind 클래스로 그린다. 클래스는 그대로, 색·깊이만 덮는다.
   ============================================================ */

/* 두 겹 바탕 */
html:has(> body #filter-container),
html:has(> body #search-input),
html:has(> body.webtoon-page) { background-color: var(--yj-canvas) !important; }
body:has(#filter-container), body:has(#search-form), body.webtoon-page { background-color: var(--yj-canvas) !important; }

/* 필터 막대 — 반투명 + 흐림(금지) → 불투명 미색 + 1px 선 */
body:has(#filter-container) #filter-container.filter-container-fixed {
  background-color: var(--yj-card) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-color: var(--yj-line) !important;
}
/* 필터 칩 — 기본 미색 + 1px 강한 선, 고른 칩은 유자 300 + 먹 글자(규격 §7-2) */
body:has(#filter-container) .filter-button,
body:has(#filter-container) .primary-btn,
body:has(#filter-container) .secondary-btn { background-color: var(--yj-card); border-color: var(--yj-line-strong); color: var(--yj-ink); box-shadow: none; }
body:has(#filter-container) .filter-button:hover,
body:has(#filter-container) .primary-btn:hover,
body:has(#filter-container) .secondary-btn:hover { background-color: var(--yj-yuja-50); border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); }
body:has(#filter-container) .filter-button.active,
body:has(#filter-container) .primary-btn.active { background-color: var(--yj-yuja-300) !important; border-color: var(--yj-yuja-300) !important; color: var(--yj-on-action) !important; }
body:has(#filter-container) .filter-count,
body:has(#filter-container) .subcat-count { color: var(--yj-sub); }
body:has(#filter-container) .filter-button.active .filter-count,
body:has(#filter-container) .subcat-button.active .subcat-count { color: var(--yj-ink-deep); }
body:has(#filter-container) .scroll-arrow { background-color: var(--yj-yuja-100) !important; }

/* 목차 3종 — 큰 흰 판(카드 안의 카드)을 풀고 줄마다 미색 카드 */
body:has(#filter-container) #main-content div.bg-white.rounded-xl.shadow-sm.border { background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
body:has(#filter-container) #list-container a.bg-white,
body:has(#filter-container) #list-container > a,
body:has(#filter-container) #list-container a[href].block,
body:has(#filter-container) a.hanja-item-box {
  background-color: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1);
  transition: box-shadow var(--yj-m-mid) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
body:has(#filter-container) #list-container a.bg-white:hover,
body:has(#filter-container) #list-container > a:hover,
body:has(#filter-container) a.hanja-item-box:hover { box-shadow: var(--yj-sh-2); transform: translateY(-2px); }
/* 초성 표식 — 파랑(쓰지 않는 색) → 유자 100 면 + 먹 글자 */
body:has(#filter-container) #list-container .bg-blue-500,
body:has(#filter-container) .sound-box { background-color: var(--yj-yuja-100) !important; color: var(--yj-ink-deep) !important; }
/* 권_연번 위치 표시 — 빨강·주황(오류색·대비 미달) → 유자 글자색 */
body:has(#filter-container) #list-container .text-red-600,
body:has(#filter-container) a.hanja-item-box .text-red-600,
body:has(#filter-container) .serial-number { color: var(--yj-yuja-ink) !important; }

/* 관용어 · 맞춤법 — 초록 필터 → 유자, 카드 미색 + 그림자 1 */
body:has(#filter-container) .idiom-card { background: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }
body:has(#filter-container) .idiom-card:hover { border-color: var(--yj-line); box-shadow: var(--yj-sh-2); }
/* 분류 배지 — 초록 틴트 → 외곽선 배지(분류) */
body:has(#filter-container) .badge-green { background-color: transparent; color: var(--yj-sub); border-color: var(--yj-line-strong); }
/* 맞춤법 유형 배지 — 빨강·파랑 → 유자 배지(정답 찾기) · 외곽선 배지(구별하기) */
body:has(#filter-container) .badge-type.correction { background-color: var(--yj-yuja-100); color: var(--yj-ink-deep); }
body:has(#filter-container) .badge-type.distinction { background-color: transparent; color: var(--yj-sub); box-shadow: inset 0 0 0 1px var(--yj-line-strong); }
/* 퀴즈 도전 — 이 화면의 주 버튼(유자 300) */
body:has(#filter-container) a.bg-yellow-400 { background-color: var(--yj-yuja-300); color: var(--yj-on-action); }
body:has(#filter-container) a.bg-yellow-400:hover { background-color: var(--yj-yuja-500); }

/* 검색창(관용어 · 맞춤법 · 검색) — 배움 지면 검색창은 유자 50, 포커스 2px 유자 600 */
body:has(#filter-container) #search-input,
body:has(#search-form) #search-input { background-color: var(--yj-yuja-50); border-color: var(--yj-line-strong); }
body:has(#filter-container) #search-input:focus,
body:has(#search-form) #search-input:focus { border-color: var(--yj-yuja-600); box-shadow: 0 0 0 1px var(--yj-yuja-600); outline: none; }

/* 검색 — 사전 바로가기 카드 미색 + 그림자 1, 확대 창 흐림 걷기 */
body:has(#search-form) a.flex-col.bg-white { background-color: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }
body:has(#search-form) a.flex-col.bg-white:hover { box-shadow: var(--yj-sh-2); transform: translateY(-2px); }
body:has(#search-form) #magnify-modal { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--yj-overlay); }

/* 웹툰 목록 — 바탕이 카드보다 밝던 것(옛 토큰 이름) 바로잡기: 바탕 캔버스, 카드 미색 */
body.webtoon-page .ep-card { background: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }
body.webtoon-page .ep-card:hover { box-shadow: var(--yj-sh-2); }
body.webtoon-page .vol-tab,
body.webtoon-page .top-bar__back,
body.webtoon-page #ep-search-in { background-color: var(--yj-card); }
body.webtoon-page .vol-tab:hover,
body.webtoon-page .top-bar__back:hover { background-color: var(--yj-yuja-50); }
body.webtoon-page .vol-tab.is-active { background-color: var(--yj-yuja-300); color: var(--yj-on-action); }
/* 화 번호 — 주황 글자(미색 위 2.3:1) → 유자 글자색 */
body.webtoon-page .ep-card__ep-num { color: var(--yj-yuja-ink); }


/* ============================================================
   5. 매일학습 — 지도(daily) · 진행(daily-run) · 유자나무(tree)
   ============================================================ */

/* 진행 화면 — 바탕 캔버스, 위 띠 미색 + 1px 선, 아래 띠 그라데이션도 캔버스로 */
html:has(> body #run-close) { background-color: var(--yj-canvas) !important; }
body:has(#run-close) { background: var(--yj-canvas); }
body:has(#run-close) .run-top { background: var(--yj-card); border-bottom: 1px solid var(--yj-line); }
body:has(#run-close) .run-bot { background: linear-gradient(to top, var(--yj-canvas) 72%, transparent); }
/* 한자 · 한자 정보 · 해설 상자 — 순백 → 미색 카드 + 그림자 1 */
body:has(#run-close) .step .bg-white.border,
body:has(#run-close) .step .bg-white.rounded-\[12px\] { background-color: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }
body:has(#run-close) .vcard { box-shadow: var(--yj-sh-1); }
/* 음성 해설 듣기 — 주황 → 미색 단추 + 유자 글자 */
body:has(#run-close) .dr-audio-cta { background: var(--yj-card); border-color: var(--yj-line-strong); color: var(--yj-ink-deep); }
body:has(#run-close) .dr-audio-cta:hover { background: var(--yj-yuja-50); border-color: var(--yj-yuja-600); }
body:has(#run-close) .dr-audio-cta svg,
body:has(#run-close) .dr-audio-cta [class*="text-orange"] { color: var(--yj-yuja-ink); }
/* 마침 별 — 꺼진 별은 선 색 */
body:has(#run-close) .fin__star { fill: var(--yj-line-strong); }

/* 진행 화면의 퀴즈 — 한자 퀴즈(3 · 3-B)와 같은 모양(평평한 v4). 그 규칙을 이 화면에 그대로 옮긴 것 */

/* 문제유형 막대 — 반투명 + 흐림(금지) → 불투명 미색 + 1px 선 */
body:has(#run-close) .quiz-type-bar-fixed { background: var(--yj-card); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--yj-line); }
/* 밑줄 탭 — 지금 유형은 먹 700 + 2px 유자 500 밑줄 */
body:has(#run-close) .tab-btn { color: var(--yj-sub); }
body:has(#run-close) .tab-btn.active { color: var(--yj-ink-deep); border-bottom: 2px solid var(--yj-yuja-500); }
body:has(#run-close) .tab-btn:hover { color: var(--yj-ink-deep); background: var(--yj-yuja-50); }

/* 고르는 카드 — 올리면 유자 50, 고른 것은 유자 200 면 + 유자 600 테두리 + 먹 글자 */
body:has(#run-close) .vocab-chip:hover,
body:has(#run-close) .def-card:hover,
body:has(#run-close) .story-word-opt:hover,
body:has(#run-close) .story-chip-opt:hover:not(.filled),
body:has(#run-close) .chat-opt-btn:hover:not(.disabled),
body:has(#run-close) .story-blank:hover { background: var(--yj-yuja-50); border-color: var(--yj-yuja-600); color: inherit; }
body:has(#run-close) .vocab-chip.selected,
body:has(#run-close) .def-card.selected { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); }
/* 이야기 빈칸 — 지금 고르는 칸: 빛 번짐(색 그림자 금지) 없이 유자 200 + 600 */
body:has(#run-close) .story-blank.active { background: var(--yj-yuja-200) !important; color: var(--yj-ink-deep) !important;
  border-bottom-color: var(--yj-yuja-600) !important; outline: 2px solid var(--yj-yuja-600) !important; box-shadow: none !important; }

/* 세트 점 · 화살표 · 도약 스위치 · 진도 막대 — 주황 → 유자 */
body:has(#run-close) .set-dot.active { background: var(--yj-yuja-500); box-shadow: 0 0 0 3px var(--yj-yuja-100); }
body:has(#run-close) .set-dot.done { background: var(--yj-leaf); }
body:has(#run-close) .set-arrow:hover,
body:has(#run-close) .chips-arrow-btn:hover:not(.disabled) { border-color: var(--yj-yuja-600); color: var(--yj-yuja-ink); background: var(--yj-yuja-50); }
body:has(#run-close) .chips-thumb { background: var(--yj-yuja-500); }
body:has(#run-close) .toggle-track.on { background: var(--yj-yuja-500); }
body:has(#run-close) .toggle-track.on .toggle-thumb { color: var(--yj-yuja-ink); }
body:has(#run-close) .chat-progress-fill { background: var(--yj-yuja-500); }
body:has(#run-close) .chat-score-badge { background: var(--yj-yuja-100); border-color: var(--yj-yuja-200); color: var(--yj-ink-deep); }

/* 단추 — 주 버튼은 유자 300 + 먹 글자(흰 글자 대비 미달·주황 빛 그림자 금지), 보조는 올리면 유자 테두리 */
body:has(#run-close) .btn-primary { background: var(--yj-yuja-300); color: var(--yj-on-action); box-shadow: none; border-radius: var(--yj-r-full); }
body:has(#run-close) .btn-primary:hover { background: var(--yj-yuja-500); box-shadow: none; transform: none; }
body:has(#run-close) .btn-secondary { background: var(--yj-card); border-color: var(--yj-line-strong); color: var(--yj-ink); border-radius: var(--yj-r-sm); }
body:has(#run-close) .btn-secondary:hover { border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); background: var(--yj-yuja-50); }

/* 안내 상자 — 남보라(쓰지 않는 색) → 유자 50 + 왼쪽 2px 유자 500 */
body:has(#run-close) .hint-box { background: var(--yj-yuja-50); border: 0; border-left: 2px solid var(--yj-yuja-500); border-radius: var(--yj-r-sm); color: var(--yj-ink); }

/* 채팅 — 글쓴이(오른쪽) 말풍선 유자 100 */
body:has(#run-close) .chat-right { background: var(--yj-yuja-100); }
body:has(#run-close) .chat-blank-cta { background: var(--yj-yuja-50); border-color: var(--yj-yuja-200); color: var(--yj-yuja-ink); }
body:has(#run-close) .chat-blank-cta:hover { background: var(--yj-yuja-100); border-color: var(--yj-yuja-600); }
body:has(#run-close) .chat-blank-click:hover { color: var(--yj-yuja-ink); border-color: var(--yj-yuja-ink); }

/* 이야기 — 보기 막대 유자 50, 보기 표식 유자 100 */
body:has(#run-close) .story-options-bar { background: var(--yj-yuja-50); border-color: var(--yj-yuja-200); }
body:has(#run-close) .story-opt-badge { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); }
body:has(#run-close) .story-inline-panel { background: var(--yj-card-hi); border-color: var(--yj-yuja-200); box-shadow: var(--yj-sh-3); }
body:has(#run-close) .story-inline-head { color: var(--yj-ink-deep); }

/* 결과 카드 · 보기 고르기 창 */
body:has(#run-close) .result-card { background: var(--yj-card); box-shadow: var(--yj-sh-1); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); }
body:has(#run-close) #story-word-modal > div { background: var(--yj-card-hi); border-color: var(--yj-line); box-shadow: var(--yj-sh-3); border-radius: var(--yj-r-lg); }
body:has(#run-close) #story-word-modal > div > div > span { color: var(--yj-ink-deep); }

/* '연결해보세요' 구분선 */
body:has(#run-close) #quiz-area .bg-amber-200 { background-color: var(--yj-line); }
body:has(#run-close) #quiz-area .text-amber-500\/80 { color: var(--yj-yuja-ink); }

/* ── 3-B. 한자 퀴즈 모양 — 평평한 v4 (작가 결정 2026-10-14 안 B)
   점 격자 바탕·점선으로 오린 카드·명조를 걷고 캔버스 위 미색 카드 + 고딕으로.
   채점 도장: 정답 빨간 동그라미는 그대로, 오답 X 표 이모지만 같은 빨강 X 선 그림(작가 결정). ── */
html:has(> body #run-close) { --bg: var(--yj-canvas); background-color: var(--yj-canvas) !important; background-image: none !important; }
body:has(#run-close) { background-color: var(--yj-canvas) !important; background-image: none !important; }

body:has(#run-close) .vocab-chip,
body:has(#run-close) .story-word-opt,
body:has(#run-close) .story-chip-opt {
  font-family: var(--yj-font-ui); background: var(--yj-card);
  border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-sm);
}
body:has(#run-close) .def-card,
body:has(#run-close) .chat-opt-btn {
  font-family: var(--yj-font-ui); background: var(--yj-card);
  border: 1px solid var(--yj-line); border-radius: var(--yj-r-sm); box-shadow: var(--yj-sh-1);
}
body:has(#run-close) .vocab-chip.selected,
body:has(#run-close) .def-card.selected { border-color: var(--yj-yuja-600); box-shadow: inset 0 0 0 1px var(--yj-yuja-600); }
body:has(#run-close) .vocab-chip.wrong,
body:has(#run-close) .def-card.wrong,
body:has(#run-close) .story-word-opt.wrong,
body:has(#run-close) .story-chip-opt.wrong { border-color: var(--red); }
body:has(#run-close) .def-card.matched,
body:has(#run-close) .vocab-chip.matched { box-shadow: none; }
body:has(#run-close) .def-num { border-width: 1.5px; }

/* 문제 안내 — 점선 상자 → 안내 상자(유자 50 + 왼쪽 2px 유자 500) */
body:has(#run-close) #quiz-guide-banner {
  font-family: var(--yj-font-ui); background: var(--yj-yuja-50);
  border: 0; border-left: 2px solid var(--yj-yuja-500); border-radius: var(--yj-r-sm);
}

/* 채팅 */
body:has(#run-close) .chat-window { background: var(--yj-card); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1); }
body:has(#run-close) .chat-window::before { background: var(--yj-card); color: var(--yj-sub); font-family: var(--yj-font-ui); }
body:has(#run-close) .chat-header { border-bottom: 1px solid var(--yj-line); font-family: var(--yj-font-ui); }
body:has(#run-close) .chat-body { background: transparent; }
body:has(#run-close) .chat-bubble { font-family: var(--yj-font-ui); border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-sm); }
body:has(#run-close) .chat-left { background: var(--yj-card-hi); }
body:has(#run-close) .chat-inline-panel { background: var(--yj-card-hi); border: 1px solid var(--yj-line); border-radius: var(--yj-r-sm); box-shadow: var(--yj-sh-3); }
body:has(#run-close) .chat-blank-cta { font-family: var(--yj-font-ui); border-style: solid; border-width: 1px; }

/* 이야기 */
body:has(#run-close) .story-body { background: var(--yj-card) !important; border-color: var(--yj-line) !important; border-width: 1px !important; box-shadow: var(--yj-sh-1); }
body:has(#run-close) .story-blank,
body:has(#run-close) .story-inline-head { font-family: var(--yj-font-ui); }
body:has(#run-close) .story-options-bar { border-style: solid; border-width: 1px; }
body:has(#run-close) .blank-marker { font-family: var(--yj-font-ui); }

/* 오답 도장 — X 표 이모지 대신 같은 빨강의 X 두 줄(선 그림). 위치·크기·튀어나오는 움직임은 그대로 */
body:has(#run-close) .stamp-wrong::after {
  content: ""; width: 34px; height: 34px; font-size: 0;
  background-color: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 퀴즈 엔진(quiz-core.js)이 그리는 안내 글자의 명조(font-serif)·점선 구분선 — 한자에는 쓰이지 않는다(확인) */
body:has(#run-close) main .font-serif { font-family: var(--yj-font-ui); }
body:has(#run-close) main .border-dashed.border-gray-300 { border-top-style: solid; border-top-width: 1px; border-color: var(--yj-line); }

/* 지도(daily) — 권 줄의 개수 글자: 장식색(faint) → 보조 글자(정보 글자는 sub 보다 옅게 쓰지 않는다) */
body:has(#view-orchard) .orch__count { color: var(--yj-sub); }
/* 권 줄 — 셸 바탕이 캔버스가 되며 줄이 투명하게 드러났다(권 이름 꼬리표만 미색으로 떠 보임) → 줄도 미색 카드. 지금 권(is-here)은 그대로 유자 틴트 */
body:has(#view-orchard) .orch__row:not(.is-here) { background: var(--yj-card); }
/* 유자나무(tree) — 작은 숫자 글자도 보조 글자로, 숫자 칸에 그림자 1 */
body:has(#hero-tree) .tally__n small { color: var(--yj-sub); }
body:has(#hero-tree) .tally__cell { box-shadow: var(--yj-sh-1); }

/* ============================================================
   6. 설정·소식 — 설정(mypage) · Pro(pro) · 불러오기(restore) · 어휘뉴스(news · news-detail) · 도서 안내(book-info)
   공용 CSS ds/v3 의 카드(yj-card)를 이미 쓰는 화면이라 남은 어긋남만 메운다.
   ============================================================ */

/* 카드 깊이 — 미색 카드 + 그림자 1 */
body:has(#me-face) section.yj-card,
body:has(#pro-grid) section.yj-card,
body:has(#panel-pick) .yj-card,
body:has(#news-list) #news-list,
body:has(#detail-view) .detail-card { box-shadow: var(--yj-sh-1); }

/* 정보 글자가 장식색(faint)으로 쓰인 곳 → 보조 글자(규격 §3-1: 정보 글자는 sub 보다 옅게 쓰지 않는다) */
body:has(#me-face) .talkrow__note,
body:has(#me-face) .app-split__coming,
/* 파일 놓는 칸 — 캔버스에 점선만 남아 있던 것을 미색 카드 면으로 */
body:has(#panel-pick) .rs-drop { background: var(--yj-card); }
body:has(#panel-pick) .rs-drop:hover { background: var(--yj-yuja-50); }
body:has(#panel-pick) .rs-help__body,
body:has(#panel-pick) .rs-help__body b,
body:has(#panel-pick) .yj-shell__body b,
body:has(#news-list) .news-item__date,
body:has(#detail-view) .detail-date-source { color: var(--yj-sub); }
body:has(#panel-pick) code { color: var(--yj-ink); }

/* 설정 — 기본 파랑 링크 → 보조 글자 + 밑줄(링크는 밑줄로 표시), 본문 속 링크는 유자 글자 */
body:has(#me-face) .yj-cap a,
body:has(#pro-grid) .yj-cap a { color: var(--yj-sub); text-decoration: underline; text-underline-offset: 3px; }
body:has(#me-face) .reset-warn a { color: var(--yj-yuja-ink); text-decoration: underline; text-underline-offset: 3px; }
body:has(#me-face) .app-split__btn-isolated,
body:has(#pro-grid) .app-split__btn-isolated { background: var(--yj-card); color: var(--yj-ink-deep); }

/* 어휘뉴스 — 고른 필터: 숲 + 레몬 글자(v3 의 먹 반전) → 유자 300 + 먹 글자 */
body:has(#news-list) .news-filter__btn.is-active { background: var(--yj-yuja-300); color: var(--yj-on-action); border-color: var(--yj-yuja-300); }
body:has(#news-list) .news-filter__btn:hover:not(.is-active) { background: var(--yj-yuja-50); }
body:has(#news-list) .news-item:hover { background: var(--yj-yuja-50); }

/* 뉴스 상세 — 핵심 요약은 안내 상자(유자 50 + 왼쪽 유자 선), 인사이트는 잎(이룬 것·배움), 주 버튼 유자 300 */
body:has(#detail-view) .detail-summary-box { background: var(--yj-yuja-50); border-color: transparent; border-left: 2px solid var(--yj-yuja-500); }
body:has(#detail-view) .detail-summary-label { color: var(--yj-yuja-ink); }
body:has(#detail-view) .detail-summary-text { color: var(--yj-ink); }
body:has(#detail-view) .detail-insight-box { background: var(--yj-leaf-tint); border-color: transparent; }
body:has(#detail-view) .detail-insight-label { color: var(--yj-leaf-ink); }
body:has(#detail-view) .detail-insight-text { color: var(--yj-ink); }
body:has(#detail-view) .detail-btn-primary { background: var(--yj-yuja-300); color: var(--yj-on-action); }
body:has(#detail-view) .detail-btn-primary:hover { background: var(--yj-yuja-500); filter: none; }

/* 도서 안내 — 지금 칸 메뉴 유자 100 알약 + 먹 글자, 절 표식 유자 배지, 순백 카드 → 미색 + 그림자 1.
   도서 고유색(--yj-book 적갈색)의 번호 표식은 그대로 둔다 */
body:has(#bi-subnav) .bi-subnav__item { background: var(--yj-card); border-color: var(--yj-line); }
body:has(#bi-subnav) .bi-subnav__item:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
body:has(#bi-subnav) .bi-subnav__item.is-active { background: var(--yj-yuja-100); color: var(--yj-ink-deep); border-color: transparent; }
body:has(#bi-subnav) .bi-section-badge { background: var(--yj-yuja-100); color: var(--yj-ink-deep); border-color: transparent; }
body:has(#bi-subnav) .bi-feature-card,
body:has(#bi-subnav) .bi-table-card { background: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }

/* ============================================================
   7. 안내 — 활용법 7장(howtouse/*, body.howtouse-page · common.css) · 설명서(home.html)
   두 곳 모두 자체 색 이름을 쓴다. 이름은 그대로 두고 값을 v4 토큰에 다시 잇는다.
   ============================================================ */

html:has(> body.howtouse-page) { background-color: var(--yj-canvas) !important; }
body.howtouse-page {
  --canvas: var(--yj-card);              /* 카드 · 패널 */
  --canvas-cream: var(--yj-canvas);      /* 한 단 어두운 면 */
  --surface: var(--yj-canvas);
  --hairline: var(--yj-line);
  --hairline-strong: var(--yj-line-strong);
  --slate: var(--yj-sub);
  --steel: var(--yj-sub);                /* 정보 글자를 장식색으로 쓰던 곳 → 보조 글자 */
  --yuja-lemon-tint: var(--yj-yuja-50);
  --leaf-green-tint: var(--yj-leaf-tint);
  background-color: var(--yj-canvas);
}
body.howtouse-page .howtouse-topbar { background: var(--yj-card); border-bottom: 1px solid var(--yj-line); }
body.howtouse-page .howtouse-page-hero { background: transparent; }
body.howtouse-page .htc-card,
body.howtouse-page .checklist-item,
body.howtouse-page .accordion-item { background-color: var(--yj-card); box-shadow: var(--yj-sh-1); }
body.howtouse-page .htc-card-lemon { border-color: var(--yj-yuja-200); }
/* 단추 — 원색 유자·잎 위 흰 글자(대비 1.6 · 2.9 미달)·숲색 여러 개 → v4 단추 */
body.howtouse-page .htc-btn-primary { background-color: var(--yj-yuja-300); color: var(--yj-on-action); }
body.howtouse-page .htc-btn-primary:hover { background-color: var(--yj-yuja-500); }
body.howtouse-page .htc-btn-secondary { background-color: var(--yj-card); color: var(--yj-ink-deep); border: 1px solid var(--yj-line-strong); }
body.howtouse-page .htc-btn-secondary:hover { background-color: var(--yj-yuja-50); }
body.howtouse-page .cta-link { background: var(--yj-yuja-100); color: var(--yj-ink-deep); }
body.howtouse-page .cta-link:hover { background: var(--yj-yuja-200); }
/* 고르는 칩(학년 3·4·5·6) — 잎 + 흰 글자 → 유자 300 + 먹 */
body.howtouse-page .htc-tab-btn:hover { border-color: var(--yj-yuja-600); }
body.howtouse-page .htc-tab-btn.active { background-color: var(--yj-yuja-300); border-color: var(--yj-yuja-300); color: var(--yj-on-action); }
/* 서류 받기 · 보기 — 잎 + 흰 글자 → 보조 버튼(유자 100) · 외곽선 */
body.howtouse-page .htc-doc-link.download { background: var(--yj-yuja-100); color: var(--yj-ink-deep); }
body.howtouse-page .htc-doc-link.view { background: var(--yj-card); }
/* QR 첫 화면 — 웹으로 보기: 원색 넓은 면 + 흰 글자 → 주 버튼 유자 300 + 먹 글자 */
body.qr-landing-page .qr-choice-btn.web { background: var(--yj-yuja-300); }
body.qr-landing-page .qr-choice-btn.web .qr-choice-icon,
body.qr-landing-page .qr-choice-btn.web .qr-choice-title,
body.qr-landing-page .qr-choice-btn.web .qr-choice-desc { color: var(--yj-ink-deep); }
body.qr-landing-page .qr-choice-btn.app { background: var(--yj-card); box-shadow: var(--yj-sh-1); }

/* 설명서(home.html) */
body:has(#blogPanel) {
  --color-canvas: var(--yj-card);
  --color-canvas-cream: var(--yj-canvas);
  --color-surface: var(--yj-canvas);
  --color-surface-soft: var(--yj-canvas);
  --color-hairline: var(--yj-line);
  --color-hairline-strong: var(--yj-line-strong);
  --color-slate: var(--yj-sub);
  --color-steel: var(--yj-sub);
  --color-yuja-lemon-tint: var(--yj-yuja-50);
  --color-leaf-green-tint: var(--yj-leaf-tint);
}
body:has(#blogPanel) .feature-card,
body:has(#blogPanel) .stat-card { background: var(--yj-card); box-shadow: var(--yj-sh-1); }
/* 고른 분류 탭 — 숲 + 레몬 글자 → 유자 300 + 먹 */
body:has(#blogPanel) .filter-tab.active { background: var(--yj-yuja-300); border-color: var(--yj-yuja-300); color: var(--yj-on-action); }
/* 글 분류 꼬리표 — 청록·주황·초록·숲 무지개(스크립트가 색을 박는다) → 외곽선 배지 */
body:has(#blogPanel) .card-category { background: transparent !important; color: var(--yj-sub) !important; box-shadow: inset 0 0 0 1px var(--yj-line-strong); }
body:has(#blogPanel) .btn-hero-primary { background: var(--yj-yuja-300); }
body:has(#blogPanel) .btn-hero-primary:hover { background: var(--yj-yuja-500); }
body:has(#blogPanel) .stat-icon .yj-ic,
body:has(#blogPanel) .feature-emoji .yj-ic { color: var(--yj-yuja-ink); }

/* ============================================================
   8. 학급관리 — 본 화면(class/index) · 학생 제출(class/submit) · 사용법(class/guide)
   인쇄(class/print)·시험지(class/exam)는 '인쇄' 차례에 — 여기 걸리지 않게 화면마다 고유 요소로 가른다.
   ============================================================ */
html:has(> body .cm-bar) { background-color: var(--yj-canvas) !important; }
body:has(.cm-bar) { background-color: var(--yj-canvas); }
body:has(.cm-bar) .cm-bar { background: var(--yj-card); }
body:has(.cm-bar) .cm-stat,
body:has(.cm-bar) .cm-tablewrap,
body:has(.cm-bar) .cm-panels details { box-shadow: var(--yj-sh-1); }
body:has(.cm-bar) .cm-dlg { box-shadow: var(--yj-sh-3); }
/* 기본 파랑 링크 → 유자 글자 + 밑줄 */
/* 도크 링크도 class 가 없어 함께 걸렸다(도크 글자가 유자색 + 밑줄) — 도크는 빼고 본문 링크만 */
body:has(.cm-bar) a:not([class]):not(.yj-shell__dock a),
body:has(.cm-bar) a#setup-open,
body:has(.gd-hero) a:not([class]):not(.yj-shell__dock a) { color: var(--yj-yuja-ink); text-decoration: underline; text-underline-offset: 3px; }
/* 본 화면(class/index · yj-dock-compat) — 도크가 PC 에서도 아래에 붙어 있었다.
   다른 화면(놀이·검색 등)과 같이 PC(768~)는 위, 휴대폰은 아래. 머리줄(.cm-bar, sticky)은 도크 아래로 내려 붙인다 */
@media (min-width: 768px) {
  body.yj-dock-compat:has(> header.cm-bar) { padding-bottom: var(--yj-s6); }
  body.yj-dock-compat:has(> header.cm-bar) .yj-shell__dock {
    position: fixed; top: 0; bottom: auto; height: var(--yj-dock-h); padding-bottom: 0;
    border-top: 0; border-bottom: 1px solid var(--yj-line); justify-content: center; gap: var(--yj-s5);
  }
  body.yj-dock-compat:has(> header.cm-bar) .yj-shell__dock a { flex: none; flex-direction: row; gap: var(--yj-s2); padding: 0 var(--yj-s3); }
  body.yj-dock-compat:has(> header.cm-bar) .yj-shell__dock a > span { font-size: 14px; letter-spacing: normal; transform: none; }
  body.yj-dock-compat:has(> header.cm-bar) .yj-shell__dock a.is-on::before { top: 10px; bottom: 9px; left: 0; right: 0; border-radius: var(--yj-r-full); }
  body.yj-dock-compat > header.cm-bar { top: var(--yj-dock-h); margin-top: var(--yj-dock-h); }
}

body:has(#form-card) .yj-card,
body:has(.gd-hero) .gd-card:not(.gd-hero) { box-shadow: var(--yj-sh-1); }
/* 제출 — 정보 글자가 장식색(faint) → 보조 글자 */
body:has(#form-card) .sb-help__body,
body:has(#form-card) .sb-help__body b,
body:has(#form-card) .yj-shell__body b { color: var(--yj-sub); }
/* 사용법 — 단계 번호: 잎 + 흰 글자(2.9:1 미달) → 진한 잎 + 흰 글자(규격 §3-3) */
body:has(.gd-hero) .gd-num { background: var(--yj-leaf-solid); }

/* ============================================================
   9. 인쇄 — 화면 틀만 v4, A4 종이 안쪽과 인쇄 결과는 그대로 (작가 결정 2026-10-14)
   종이(.pg · .page-container · .page-portrait · .wb-page · 서류 카드)는 건드리지 않는다.
   각 구역 끝에서 print 미디어 화소 비교 + 실제 PDF 쪽별 비교로 '차이 0' 을 확인한다.
   9절의 규칙은 모두 @media screen 안에 둔다 — 인쇄에는 한 줄도 닿지 않게.
   ============================================================ */

/* 9-0. 인쇄에도 걸어야 하는 것 — 종이를 지키는 되돌림만 둔다 */
/* 공용 CSS 를 새로 실으면서 body 가 17px · 단어 단위 줄바꿈(keep-all)을 받아 종이 안 글자까지 물려 내려갔다 —
   이 페이지는 원래 값(브라우저 기본 16px · 일반 줄바꿈)으로 되돌려 종이를 지킨다 */
body:has(.nav-print) { font-size: 100%; word-break: normal; overflow-wrap: normal; -webkit-font-smoothing: auto; }

/* 지도서 인쇄본(guideprint) — 공용 CSS 를 새로 실어 생긴 기본값(17px · 줄간격 1.6 · 자간 · keep-all)이
   책 쪽 글자로 물려 내려가지 않게 원래 값(브라우저 기본)으로 되돌린다 */
body[data-page="guide"]:has(#book-container) { font-size: 100%; line-height: normal; letter-spacing: normal; word-break: normal; overflow-wrap: normal; -webkit-font-smoothing: auto; }

/* 자율시간 워크북(howtouse/jayul-docs/grade3~6/workbook.html) — 같은 이유로 원래 값으로 되돌린다 */
body:has(.wb-toolbar) { font-size: 100%; line-height: normal; letter-spacing: normal; word-break: normal; overflow-wrap: normal; -webkit-font-smoothing: auto; }
body:has(.wb-toolbar) .wb-page img { max-width: none; }   /* 공용 CSS 의 img max-width:100% 가 워크북 그림 폭을 묶지 않게 */

/* 자율시간 서류 보기(howtouse/jayul-docs/viewer.html) — 같은 이유로 원래 값으로 되돌린다 */
body:has(.viewer-topbar) { letter-spacing: normal; word-break: normal; overflow-wrap: normal; -webkit-font-smoothing: auto; }
/* 글자 크기는 화면에서만 — 이 페이지는 인쇄 때 본문을 10.5pt 로 스스로 정한다(그 규칙을 이기면 안 된다) */
@media screen { body:has(.viewer-topbar) { font-size: 100%; } }
body:has(.viewer-topbar) .doc-paper img { max-width: none; }
/* 공용 CSS 의 *{box-sizing:border-box} 가 서류 종이(원래 content-box)의 안쪽 폭을 줄여 쪽 수가 늘었다 → 서류 안은 원래대로 */
body:has(.viewer-topbar) .doc-paper,
body:has(.viewer-topbar) .doc-paper *,
body:has(.viewer-topbar) .doc-paper *::before,
body:has(.viewer-topbar) .doc-paper *::after { box-sizing: content-box; }
body:has(.viewer-topbar) .doc-paper table { box-sizing: border-box; }   /* 표는 브라우저 기본값이 border-box */

@media screen {

/* 9-1. 퀴즈 활동지(quizsheet · body.qs) */
body.qs { background: var(--yj-canvas); }
body.qs .qs-view { background: var(--yj-canvas); }                                   /* 종이 둘레는 캔버스 */
body.qs .qs-nav__back:hover,
body.qs .qs-pick__arrow:hover { background: var(--yj-yuja-50); }
body.qs .qs-tab.is-on { background: var(--yj-yuja-200); color: var(--yj-ink-deep); box-shadow: inset 0 0 0 1px var(--yj-yuja-600); }  /* 고른 것 */
body.qs .qs-input:focus { outline-color: var(--yj-yuja-600); }
body.qs .qs-card { border-color: var(--yj-yuja-600); }
body.qs .qs-type:hover { background: var(--yj-yuja-50); }

/* 9-2. 바른글씨 따라쓰기(tracing · 자체 색 이름 --color-* 는 종이도 쓰므로 다시 잇지 않고 틀 요소만 덮는다) */
body:has(.nav-print) { background-color: var(--yj-canvas); }
body:has(.nav-print) .top-nav,
body:has(.nav-print) .settings-panel { background-color: var(--yj-card); border-color: var(--yj-line); }
body:has(.nav-print) .preview-region { background-color: var(--yj-canvas); }       /* 종이 둘레 */
body:has(.nav-print) .nav-print { background: var(--yj-yuja-300); box-shadow: none; }  /* 주 버튼: 그라데이션 + 빛 그림자 → 유자 300 */
body:has(.nav-print) .nav-print:hover { background: var(--yj-yuja-500); filter: none; }
body:has(.nav-print) .nav-back:hover,
body:has(.nav-print) .search-result-item:hover,
body:has(.nav-print) .hanja-selector .vol-nav-btn:hover { background: var(--yj-yuja-50); }
body:has(.nav-print) .section-btn.active,
body:has(.nav-print) .btn-group .btn.active { background-color: var(--yj-yuja-200); color: var(--yj-ink-deep); box-shadow: inset 0 0 0 1px var(--yj-yuja-600); }
body:has(.nav-print) .form-input:focus,
body:has(.nav-print) .form-select:focus,
body:has(.nav-print) .form-textarea:focus { border-color: var(--yj-yuja-600); box-shadow: 0 0 0 1px var(--yj-yuja-600); }
body:has(.nav-print) .hanja-preview-card { background: var(--yj-yuja-100); border-color: var(--yj-yuja-600); }
body:has(.nav-print) input:checked + .slider { background-color: var(--yj-yuja-500); }   /* 켜짐 스위치: 잎 → 유자(고른 것) */
body:has(.nav-print) .btn-primary { background: var(--yj-yuja-300); color: var(--yj-on-action); }  /* 원색 + 흰 글자(1.6:1) → 유자 300 + 먹 */
body:has(.nav-print) .btn-primary:hover { background: var(--yj-yuja-500); }


/* 9-3. 학급 인쇄(class/print · .pv-bar) — 고른 탭: 페이지 규칙이 바탕을 투명으로 눌러 흰 칸 + 테두리만 남았다 → 유자 200 + 600 */
body:has(.pv-bar) .pv-kinds .yj-seg > button.is-on,
body:has(.pv-bar) .pv-kinds .yj-seg > button[aria-selected="true"] { background: var(--yj-yuja-200); color: var(--yj-ink-deep); box-shadow: inset 0 0 0 1px var(--yj-yuja-600); }

/* 9-4. 우리반 평가 시험지(class/exam · .ex__dock) */
body:has(.ex__dock) .ex__dock .yj-seg > button.is-on,
body:has(.ex__dock) .ex__dock .yj-seg > button[aria-selected="true"] { background: var(--yj-yuja-200); color: var(--yj-ink-deep); box-shadow: inset 0 0 0 1px var(--yj-yuja-600); }
body:has(.ex__dock) .vt button[aria-pressed="true"] { background: var(--yj-yuja-300); border-color: var(--yj-yuja-300); }   /* 권 = 고른 필터 칩 */
body:has(.ex__dock) .gr__c[aria-pressed="true"] { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); }       /* 고른 한자 칸 */
body:has(.ex__dock) .ex__note { background: var(--yj-yuja-50); border-left: 2px solid var(--yj-yuja-500); }                   /* 안내 상자 */
/* 휴대폰 — 머리줄 한 줄에 돌아가기·제목·탭 4칸·인쇄가 다 들어가 글자가 겹쳤다(이전부터) → 탭을 둘째 줄로 */
@media (max-width: 720px) {
  body:has(.ex__dock) .ex__dock { height: auto; min-height: var(--yj-dock-h); flex-wrap: wrap; row-gap: var(--yj-s2); padding-top: var(--yj-s2); padding-bottom: var(--yj-s2); }
  body:has(.ex__dock) .ex__dock .yj-seg { order: 10; flex: 1 1 100%; overflow-x: auto; }
  body:has(.ex__dock) .ex__back > span { display: none; }   /* 돌아가기는 화살표만(aria-label 은 그대로) — 인쇄 단추가 첫 줄에 남게 */
}

/* 9-5. 지도서 인쇄본(guideprint) — 화면 틀만. 책 쪽(.page-portrait)은 그대로 */
body[data-page="guide"]:has(#book-container) { background: var(--yj-canvas); }                    /* 종이 둘레 회색 → 캔버스 */
body[data-page="guide"]:has(#book-container) .header-fixed { background-color: var(--yj-card); box-shadow: none; border-bottom: 1px solid var(--yj-line); }
body[data-page="guide"]:has(#book-container) .header-fixed .nav-link { color: var(--yj-sub); }
body[data-page="guide"]:has(#book-container) .header-fixed .nav-link svg { stroke: currentColor; }   /* 홈 아이콘 선이 흰색으로 박혀 있어 미색 띠에서 사라졌다 */
body[data-page="guide"]:has(#book-container) .header-fixed .nav-link:hover { background-color: var(--yj-yuja-50); color: var(--yj-ink-deep); }
body[data-page="guide"]:has(#book-container) .header-fixed .nav-link.active { background-color: var(--yj-yuja-100); color: var(--yj-ink-deep); }
/* 둘째 줄 메뉴 — 이 페이지에 스타일이 없어 기본 파랑 밑줄이던 것 → 글자 메뉴, 지금 칸 유자 100 알약 */
body[data-page="guide"]:has(#book-container) .nav-sub-link { padding: 4px 12px; border-radius: var(--yj-r-full); color: var(--yj-sub); text-decoration: none; font-size: var(--yj-t-cap); font-weight: 600; }
body[data-page="guide"]:has(#book-container) .nav-sub-link:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
body[data-page="guide"]:has(#book-container) .nav-sub-link.active { background: var(--yj-yuja-100); color: var(--yj-ink-deep); font-weight: 700; }
body[data-page="guide"]:has(#book-container) #control-panel { background: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }
body[data-page="guide"]:has(#book-container) .btn-group { background: var(--yj-canvas); }
body[data-page="guide"]:has(#book-container) .btn-group-item { color: var(--yj-sub); }
body[data-page="guide"]:has(#book-container) .btn-group-item.active { background: var(--yj-yuja-200); color: var(--yj-ink-deep); box-shadow: inset 0 0 0 1px var(--yj-yuja-600); }   /* 숲 + 레몬 → 고른 것 */
/* 단추 — 초록·파랑·숲·원색 제각각 → 인쇄 = 주 버튼(유자 300), 이미지·PDF = 보조(유자 100), 이북 보기 = 외곽선 */
body[data-page="guide"]:has(#book-container) .btn-amber { background: var(--yj-yuja-300); color: var(--yj-on-action); }
body[data-page="guide"]:has(#book-container) .btn-amber:hover { background: var(--yj-yuja-500); }
body[data-page="guide"]:has(#book-container) .btn-green,
body[data-page="guide"]:has(#book-container) .btn-blue { background: var(--yj-yuja-100); color: var(--yj-ink-deep); }
body[data-page="guide"]:has(#book-container) .btn-green:hover,
body[data-page="guide"]:has(#book-container) .btn-blue:hover { background: var(--yj-yuja-200); }
body[data-page="guide"]:has(#book-container) .btn-ebook { background: var(--yj-card); color: var(--yj-ink-deep); border-color: var(--yj-line-strong); }
body[data-page="guide"]:has(#book-container) .btn-ebook:hover { background: var(--yj-yuja-50); }
body[data-page="guide"]:has(#book-container) .cp-divider { background: var(--yj-line); }

/* 9-6. 자율시간 워크북 — 화면 틀만(도구 막대 · 종이 둘레). 워크북 쪽(.wb-page)은 그대로 */
html:has(> body .wb-toolbar), body:has(.wb-toolbar) { background: var(--yj-canvas); }
body:has(.wb-toolbar) .wb-toolbar { background: var(--yj-card); color: var(--yj-ink-deep); box-shadow: none; border-bottom: 1px solid var(--yj-line); }
body:has(.wb-toolbar) .wb-toolbar a.wb-back { color: var(--yj-sub); }
body:has(.wb-toolbar) .wb-toolbar a.wb-back:hover { color: var(--yj-ink-deep); }
body:has(.wb-toolbar) .wb-toolbar .wb-title { color: var(--yj-ink-deep); }
body:has(.wb-toolbar) .wb-toolbar button { background: var(--yj-yuja-300); color: var(--yj-on-action); padding: 8px 18px; border-radius: var(--yj-r-full); }   /* 원색 + 흰 글자(1.6:1) → 주 버튼 */
body:has(.wb-toolbar) .wb-toolbar button:hover { background: var(--yj-yuja-500); }

/* 9-7. 자율시간 서류 보기 — 화면 틀만. 서류 종이(.doc-paper)는 그대로 */
html:has(> body .viewer-topbar), body:has(.viewer-topbar) { background-color: var(--yj-canvas); }
body:has(.viewer-topbar) .viewer-topbar { background-color: var(--yj-card); border-color: var(--yj-line); }
body:has(.viewer-topbar) .viewer-back { color: var(--yj-sub); }
body:has(.viewer-topbar) .viewer-back:hover { color: var(--yj-ink-deep); }
body:has(.viewer-topbar) .viewer-btn { background: var(--yj-card); border-color: var(--yj-line-strong); }
body:has(.viewer-topbar) .viewer-btn.primary { background-color: var(--yj-yuja-300); color: var(--yj-on-action); border-color: transparent; border-radius: var(--yj-r-full); }   /* 원색 + 흰 글자 → 주 버튼 */
body:has(.viewer-topbar) .viewer-btn.primary:hover { background-color: var(--yj-yuja-500); }
} /* @media screen — 9절 끝: 인쇄 미디어에는 v4.css 가 닿지 않는다 */

/* ============================================================
   10. 공용 CSS 를 쓰지 않던 페이지 (2026-10-15)
   ============================================================ */

/* 10-1. 개인정보처리방침(privacy) — 읽기 지면: 캔버스 위 미색 카드 한 장(규격 §8 읽기 지면) */
html:has(> body.yj-privacy) { background: var(--yj-canvas); }
body.yj-privacy {
  background: var(--yj-card); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1);
  margin: var(--yj-s5) auto; padding: var(--yj-s6) var(--yj-s5); color: var(--yj-ink);
}
@media (max-width: 640px) { body.yj-privacy { margin: var(--yj-s3); padding: var(--yj-s5) var(--yj-s4); } }
body.yj-privacy h1 { font-family: var(--yj-font-serif); color: var(--yj-ink-deep); border-bottom-color: var(--yj-yuja-500); }
body.yj-privacy h2 { background: var(--yj-yuja-50); border-left: 2px solid var(--yj-yuja-500); border-radius: var(--yj-r-sm); color: var(--yj-ink-deep); }   /* 안내 상자 */
body.yj-privacy th, body.yj-privacy td { border-color: var(--yj-line); }
body.yj-privacy th { background: var(--yj-canvas); }
body.yj-privacy .date { color: var(--yj-sub); }
@media print { html:has(> body.yj-privacy), body.yj-privacy { background: none; } body.yj-privacy { border: 0; box-shadow: none; margin: 0; padding: 0; } }

/* 10-2. 인앱 브라우저(browser · body.yj-browser) — 위 주소 막대·아래 메뉴만. 안쪽 iframe 은 남의 사이트라 그대로 */
html:has(> body.yj-browser), body.yj-browser { background: var(--yj-canvas); font-family: var(--yj-font-ui); }
body.yj-browser #status-bar-spacer { background: var(--yj-card); }
body.yj-browser #top-bar { background: var(--yj-card); border-bottom: 1px solid var(--yj-line); box-shadow: var(--yj-sh-1); min-height: 56px; }
body.yj-browser #top-bar button { width: 40px; height: 44px; border-radius: var(--yj-r-sm); background: transparent; color: var(--yj-ink-deep); transition: background var(--yj-m-fast) var(--yj-ease); }
body.yj-browser #top-bar button:hover { background: var(--yj-yuja-50); }
body.yj-browser #top-bar button:active { background: var(--yj-yuja-100); }
body.yj-browser #top-bar button.external-btn { width: auto; padding: 0 var(--yj-s3); background: var(--yj-yuja-300); color: var(--yj-on-action); border-radius: var(--yj-r-sm); font-size: var(--yj-t-cap); font-weight: 700; }
body.yj-browser #top-bar button.external-btn:hover { background: var(--yj-yuja-500); }
@media (max-width: 480px) { body.yj-browser #top-bar { gap: var(--yj-s1); padding: var(--yj-s1) var(--yj-s2); } body.yj-browser #top-bar button.external-btn { padding: 0 var(--yj-s2); } }
body.yj-browser #url-display { background: var(--yj-canvas); border: 1px solid var(--yj-line); border-radius: var(--yj-r-full); color: var(--yj-sub); font-size: var(--yj-t-cap); }
body.yj-browser #iframe-wrapper { background: var(--yj-card-hi); }
body.yj-browser #bottom-nav { background: var(--yj-canvas); border-top: 1px solid var(--yj-line); box-shadow: none; }
body.yj-browser .nav-btn { color: var(--yj-ink); font-size: var(--yj-t-micro); min-height: 52px; transition: background var(--yj-m-fast) var(--yj-ease); }
body.yj-browser .nav-btn:hover, body.yj-browser .nav-btn:active { background: var(--yj-yuja-50); }
body.yj-browser #toc-dropdown-menu { background: var(--yj-card-hi); border-color: var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-3); }
body.yj-browser #toc-dropdown-menu a { color: var(--yj-ink); }
body.yj-browser #toc-dropdown-menu a:hover { background: var(--yj-yuja-50); }
body.yj-browser #loading-overlay, body.yj-browser #blocked-message { background: var(--yj-canvas); }
body.yj-browser .spinner { border-color: var(--yj-line); border-top-color: var(--yj-yuja-500); }
body.yj-browser #loading-overlay p { color: var(--yj-sub); font-size: var(--yj-t-small); }
body.yj-browser #blocked-message .emoji { color: var(--yj-yuja-ink); }
body.yj-browser #blocked-message h2 { color: var(--yj-ink-deep); font-size: var(--yj-t-h2); }
body.yj-browser #blocked-message p { color: var(--yj-sub) !important; font-size: var(--yj-t-small) !important; }
body.yj-browser #blocked-message .url-box { background: var(--yj-card); border-color: var(--yj-line); border-radius: var(--yj-r-sm); color: var(--yj-ink); font-size: var(--yj-t-cap); }
body.yj-browser .action-btn { min-height: 44px; background: var(--yj-yuja-300); color: var(--yj-on-action); border-radius: var(--yj-r-sm); font-size: var(--yj-t-small); }
body.yj-browser .action-btn:hover { background: var(--yj-yuja-500); }
body.yj-browser .action-btn.secondary { background: var(--yj-card); color: var(--yj-ink-deep); border: 1px solid var(--yj-line-strong); }
body.yj-browser .action-btn.secondary:hover { background: var(--yj-yuja-50); }

/* 10-3. 판서 노트(notes · body.yj-notes) — 도구 막대·편집 창만. 흑판(#notes-text · 바탕)은 그대로 — 교실 화면용 */
body.yj-notes { height: 100dvh; }
body.yj-notes #notes-header { min-height: 56px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--yj-card); border-bottom: 1px solid var(--yj-line); }  /* 흑판 때는 html[data-theme=dark] 라 공용 다크 토큰이 선다 */
body.yj-notes #notes-title-text, body.yj-notes .notes-action-btn { color: var(--yj-yuja-300); }
body.yj-notes .notes-action-btn { min-width: 44px; min-height: 44px; justify-content: center; border-radius: var(--yj-r-sm); }
body.yj-notes #notes-taught-btn { color: var(--yj-yuja-300); border-radius: var(--yj-r-sm); min-height: 32px; }
body.yj-notes #notes-edit-btn { background: var(--yj-yuja-300); color: var(--yj-on-action); border-radius: var(--yj-r-sm); min-height: 40px; box-shadow: none; transition: background var(--yj-m-fast) var(--yj-ease); }
body.yj-notes #notes-edit-btn:hover { background: var(--yj-yuja-500); }
body.yj-notes .yj-ico { display: inline-block; vertical-align: -3px; }
body.yj-notes .peer:checked ~ div { background: var(--yj-yuja-500); }
body.yj-notes .custom-slider::-webkit-slider-thumb { background: var(--yj-yuja-500); }
body.yj-notes #notes-edit-picker-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.yj-notes #notes-edit-picker-content { border-radius: var(--yj-r-lg); }
body.yj-notes #notes-edit-picker-content h3 { color: var(--yj-yuja-300); }
body.yj-notes .notes-edit-chip { min-height: 36px; }
body.yj-notes .notes-edit-chip:hover { border-color: var(--yj-yuja-500); }
body.yj-notes .notes-edit-chip.is-checked { background: var(--yj-yuja-200); border-color: var(--yj-yuja-500); color: var(--yj-ink-deep); }
body.yj-notes button.border { border-style: solid; }  /* 공용 button{border:0} 이 Tailwind 테두리 모양을 지운다 */
body.yj-notes .notes-edit-chip input { accent-color: var(--yj-yuja-500); }
body.yj-notes #notes-edit-confirm-btn { background: var(--yj-yuja-300); color: var(--yj-on-action); box-shadow: none; }
body.yj-notes #notes-edit-confirm-btn:hover { background: var(--yj-yuja-500); }
/* 화이트보드 모드 — 막대는 미색 카드, 글자는 유자 글자색 */
body.yj-notes[data-theme="light"] #notes-header { background: var(--yj-card); border-bottom: 1px solid var(--yj-line); box-shadow: var(--yj-sh-1); }
body.yj-notes[data-theme="light"] #notes-title-text { color: var(--yj-ink-deep); }
body.yj-notes[data-theme="light"] .notes-action-btn { color: var(--yj-yuja-ink); }
body.yj-notes[data-theme="light"] .notes-action-btn:hover { color: var(--yj-yuja-ink); background: var(--yj-yuja-50); }
body.yj-notes[data-theme="light"] #notes-taught-btn { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); }
body.yj-notes[data-theme="light"] #notes-header .text-gray-300, body.yj-notes[data-theme="light"] #notes-header .text-gray-400 { color: var(--yj-sub); }
body.yj-notes[data-theme="light"] #notes-header .border-gray-600\/60 { border-color: var(--yj-line); }
body.yj-notes[data-theme="light"] .custom-slider { background: var(--yj-line-strong); }
body.yj-notes[data-theme="light"] #notes-edit-picker-content { background: var(--yj-card-hi); color: var(--yj-ink); }
body.yj-notes[data-theme="light"] #notes-edit-picker-content h3 { color: var(--yj-ink-deep); }
body.yj-notes[data-theme="light"] .notes-edit-chip { background: var(--yj-card); border-color: var(--yj-line-strong); color: var(--yj-ink); }
body.yj-notes[data-theme="light"] .notes-edit-chip.is-checked { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); }

/* 10-4. 지도서 이북(guide · body.yj-guide) — 옆 막대·무대·넘김 단추만. 책 쪽(.page-portrait)은 그대로 */
/* 공용 CSS 기본값(17px · 줄간격 · 자간 · keep-all)이 책 쪽 글자로 물려 내려가지 않게 원래 값으로 되돌린다(9-0 인쇄본과 같은 처리) */
body.yj-guide { font-size: 100%; line-height: normal; letter-spacing: normal; word-break: normal; overflow-wrap: normal; -webkit-font-smoothing: auto; }
/* 공용 fonts.css 가 'Pretendard Variable' 을 새로 실어 책 글자 모양이 미세하게 바뀌었다 — 책 쪽은 원래 쓰던 정적 Pretendard 로 고정 */
body.yj-guide #ebook-frame { font-family: Pretendard, "Paperlogy", sans-serif; }
@media screen {
html:has(> body.yj-guide), body.yj-guide { background: var(--yj-canvas); }
body.yj-guide #sidebar { background: var(--yj-card); border-right: 1px solid var(--yj-line); color: var(--yj-ink); font-family: var(--yj-font-ui); }
body.yj-guide .sidebar-header { border-bottom-color: var(--yj-line); }
body.yj-guide .sidebar-logo { color: var(--yj-ink-deep); }
body.yj-guide .sidebar-subtitle { color: var(--yj-sub); letter-spacing: normal; }
body.yj-guide .sb-home-btn-icon { width: 36px; height: 36px; border-radius: var(--yj-r-sm); background: transparent; color: var(--yj-yuja-ink); transition: background var(--yj-m-fast) var(--yj-ease); }
body.yj-guide .sb-home-btn-icon:hover { background: var(--yj-yuja-50); }
body.yj-guide .sidebar-scroll-area::-webkit-scrollbar-thumb { background: var(--yj-line-strong); }
body.yj-guide .sb-section-title { color: var(--yj-sub); }
body.yj-guide .layout-group { background: var(--yj-canvas); border-color: var(--yj-line); }
body.yj-guide .layout-btn { color: var(--yj-sub); min-height: 36px; }
body.yj-guide .layout-btn:hover { color: var(--yj-ink-deep); }
body.yj-guide .layout-btn.active { background: var(--yj-yuja-200); color: var(--yj-ink-deep); box-shadow: inset 0 0 0 1px var(--yj-yuja-600); }
body.yj-guide .bm-chip-vertical { color: var(--yj-ink); background: transparent; border-color: transparent; min-height: 40px; transition: background var(--yj-m-fast) var(--yj-ease); }
body.yj-guide .bm-chip-vertical:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); transform: none; }
body.yj-guide .bm-chip-vertical.active { background: var(--yj-yuja-100); color: var(--yj-ink-deep); border-color: transparent; box-shadow: none; }   /* 지금 있는 곳 = 유자 100 */
body.yj-guide .bm-select-vertical, body.yj-guide .sb-select-full { background: var(--yj-card-hi); border-color: var(--yj-line-strong); color: var(--yj-ink); min-height: 40px; }
body.yj-guide .bm-select-vertical option, body.yj-guide .sb-select-full option { background: var(--yj-card-hi); color: var(--yj-ink); }
body.yj-guide .bm-select-vertical:focus, body.yj-guide .sb-select-full:focus { border-color: var(--yj-yuja-600); }
body.yj-guide .zoom-btn, body.yj-guide .sb-btn-half { background: var(--yj-card); color: var(--yj-ink-deep); border-color: var(--yj-line-strong); min-height: 40px; transition: background var(--yj-m-fast) var(--yj-ease); }
body.yj-guide .zoom-btn { width: 40px; height: 40px; }
body.yj-guide .zoom-btn:hover, body.yj-guide .sb-btn-half:hover:not(:disabled) { background: var(--yj-yuja-50); border-color: var(--yj-line-strong); }
body.yj-guide .sb-btn-half:disabled { opacity: .4; }
body.yj-guide .sb-slider-row input[type="range"] { accent-color: var(--yj-yuja-500); }
body.yj-guide .btn-print-jump-vertical { background: var(--yj-yuja-300); color: var(--yj-on-action); border-radius: var(--yj-r-sm); box-shadow: none; min-height: 44px; transition: background var(--yj-m-fast) var(--yj-ease); }
body.yj-guide .btn-print-jump-vertical:hover { background: var(--yj-yuja-500); transform: none; }
body.yj-guide .side-nav-btn { background: var(--yj-card); color: var(--yj-ink-deep); border: 1px solid var(--yj-line); box-shadow: var(--yj-sh-1); backdrop-filter: none; -webkit-backdrop-filter: none; transition: background var(--yj-m-fast) var(--yj-ease); }
body.yj-guide .side-nav-btn:hover:not(:disabled) { background: var(--yj-yuja-50); border-color: var(--yj-line-strong); color: var(--yj-ink-deep); transform: translateY(-50%); }
/* 책 쪽 그림자 — 어두운 무대용 진한 검정을 캔버스 위 그림자 2단 빛깔(먹 갈색 · 옅게)로. filter 방식은 그대로 둔다
   (box-shadow 로 바꾸면 책 글자가 다른 층에서 그려져 화소가 달라진다) */
body.yj-guide #ebook-frame { filter: drop-shadow(0 16px 32px rgba(31, 28, 18, .22)); }
@media screen and (max-width: 900px) { body.yj-guide #sidebar { border-right: none; border-bottom: 1px solid var(--yj-line); } }
}

/* 10-5. 한자 지도(wordearth/graph · body.yj-wordearth) — 밤하늘 지도(캔버스·3D·범례·불러오기 화면)는 그대로,
   그 위에 뜬 도구 막대·검색·설명 창만 미색 카드로 */
body.yj-wordearth { font-size: 16px; line-height: normal; }   /* 공용 17px 이 rem 아닌 상속 글자로 번지지 않게 */
body.yj-wordearth .bar { background: none; }
body.yj-wordearth .btn { min-height: 44px; background: var(--yj-card); color: var(--yj-ink-deep); border: 1px solid var(--yj-line); border-radius: var(--yj-r-sm); box-shadow: var(--yj-sh-1); font-weight: 600; transition: background var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease); }
body.yj-wordearth .btn:hover { background: var(--yj-yuja-50); }
body.yj-wordearth .btn:focus-visible { outline: 2px solid var(--yj-yuja-600); }
body.yj-wordearth .btn[aria-pressed="true"] { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); }
body.yj-wordearth .bar > a.btn { gap: 2px; padding-left: .6rem; }
body.yj-wordearth .search { min-height: 44px; background: var(--yj-card-hi); color: var(--yj-ink); border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-sm); box-shadow: var(--yj-sh-1); }
body.yj-wordearth .search::placeholder { color: var(--yj-sub); }
body.yj-wordearth .search:focus { border-color: var(--yj-yuja-600); background: var(--yj-card-hi); }
body.yj-wordearth .search-count { color: var(--yj-sub); }
body.yj-wordearth .search-results { background: var(--yj-card-hi); border-color: var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-3); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.yj-wordearth .search-result-item { color: var(--yj-ink); border-radius: var(--yj-r-sm); }
body.yj-wordearth .search-result-item:hover, body.yj-wordearth .search-result-item:focus-visible { background: var(--yj-yuja-50); }
body.yj-wordearth .search-result-type, body.yj-wordearth .search-empty { color: var(--yj-sub); }
body.yj-wordearth .panel { background: var(--yj-card); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-2); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--yj-ink); }
body.yj-wordearth .panel { --yuja-lemon: var(--yj-yuja-ink); }   /* 손잡이 제목의 음(스크립트가 이 변수로 칠한다)이 미색 위에서 흐려지지 않게 — 창 안에서만 */
body.yj-wordearth .panel-handle { border-color: var(--yj-line) !important; }
body.yj-wordearth .panel-handle-title { color: var(--yj-ink-deep) !important; }
body.yj-wordearth .panel-hand-icon { color: var(--yj-faint); display: flex; }
body.yj-wordearth .panel-close, body.yj-wordearth .panel-nav button { border-radius: var(--yj-r-sm); background: var(--yj-card); border: 1px solid var(--yj-line-strong); color: var(--yj-ink-deep); }
body.yj-wordearth .panel-close { width: 2.25rem; height: 2.25rem; }
body.yj-wordearth .panel-nav button { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }
body.yj-wordearth .panel-close:hover, body.yj-wordearth .panel-nav button:hover:not(:disabled) { background: var(--yj-yuja-50); }
body.yj-wordearth .panel-glyph { color: var(--yj-yuja-ink); }
body.yj-wordearth .panel-glyph.ref, body.yj-wordearth .panel-note { color: var(--yj-sub); }
body.yj-wordearth .panel-name { color: var(--yj-ink-deep); }
body.yj-wordearth .panel-def { color: var(--yj-ink); }
body.yj-wordearth .panel-ex { color: var(--yj-sub); }
body.yj-wordearth .chip { background: var(--yj-canvas); border-color: var(--yj-line-strong); color: var(--yj-ink); padding: .3rem .7rem; font-size: .85rem; }
body.yj-wordearth .chip:hover { background: var(--yj-yuja-50); }
body.yj-wordearth .chip-h { background: var(--yj-yuja-100); border-color: var(--yj-yuja-200); color: var(--yj-yuja-ink); }
body.yj-wordearth .chip-h:hover { background: var(--yj-yuja-200); }
body.yj-wordearth .chip-more { background: var(--yj-card); border-color: var(--yj-line); color: var(--yj-sub); }
body.yj-wordearth .panel-cta { min-height: 44px; background: var(--yj-yuja-300); color: var(--yj-on-action); border-radius: var(--yj-r-sm); }
body.yj-wordearth .panel-cta:hover { background: var(--yj-yuja-500); }
body.yj-wordearth .zoom .btn { width: 44px; height: 44px; }

/* 10-6. PPT 모드(slide · body.slide-page) — 교실 TV 한 장. 배치·가독성까지(작가 결정 3-나, 2026-10-15) */
/* 공용 CSS 기본값(17px 고정 · 자간 · keep-all)이 번지지 않게 — 이 화면은 html 글자 크기(줌 단추가 바꾸는 rem)를 그대로 물려받아야 한다 */
body.slide-page { font-size: inherit; letter-spacing: normal; word-break: normal; overflow-wrap: normal; }
/* 아래 여백 — 하단에 고정된 것이 없는데 5rem 을 비워 두었다(작가: "아래 여백 조금 줄여") → 2.5rem, 내용 칸 80vh → 88vh */
body.slide-page #slide-container { padding-bottom: 2.5rem; }
body.slide-page .slide-content-vocab-item-layout,
body.slide-page .slide-content-meaning,
body.slide-page .slide-content-advanced-grid { max-height: 88vh; }
body.slide-page .slide-content-meaning { max-height: 90vh; }   /* 해설은 기존 자동 맞춤의 하한(0.8)에 걸려 1280×720 에서 넘쳤다 — 칸을 조금 더 */
/* 학습어휘 카드 자동 맞춤 — 스크립트(fitVocabCard)가 --vscale 을 1 → 0.5 로 내려 글자·간격을 함께 줄인다 */
body.slide-page .vocab-card-left-col .kpi-card { padding: calc(2rem * var(--vscale, 1)); }
body.slide-page .vocab-card-left-col .vocab-card-main-title { font-size: calc(2.95rem * var(--vscale, 1)); }
body.slide-page .vocab-card-left-col .vocab-details { font-size: calc(2.4rem * var(--vscale, 1)); margin-top: calc(1rem * var(--vscale, 1)); padding-top: calc(1rem * var(--vscale, 1)); }
body.slide-page .vocab-card-left-col .vocab-details p { margin-bottom: calc(.65rem * var(--vscale, 1)); }
body.slide-page .vocab-card-left-col .vocab-details p + p { margin-top: calc(.5rem * var(--vscale, 1)); }
/* 큰 화면(교실 TV) 기본 배율 — 슬라이드는 rem(=html 글자 크기) 하나로 그려지므로, 화면이 크면 그 바탕을 키운다.
   줌 단추(--slide-font-scale-rem)는 그 위에 곱해져 그대로 동작한다. 폭·높이 둘 다 넉넉할 때만 올린다 */
html:has(> body.slide-page) { font-size: calc(var(--slide-font-scale-rem) * var(--yj-slide-k, 1)); }
@media (min-width: 1500px) and (min-height: 860px) { html:has(> body.slide-page) { --yj-slide-k: 1.12; } }
@media (min-width: 1800px) and (min-height: 1000px) { html:has(> body.slide-page) { --yj-slide-k: 1.25; } }
@media (min-width: 2400px) and (min-height: 1300px) { html:has(> body.slide-page) { --yj-slide-k: 1.6; } }
@media (min-width: 3600px) and (min-height: 2000px) { html:has(> body.slide-page) { --yj-slide-k: 2.4; } }
/* ── 바탕·조작 막대 ── */
html:has(> body.slide-page), body.slide-page { background-color: var(--yj-canvas); }
body.slide-page #ppt-controls { background: var(--yj-card); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-2); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 10px; gap: 4px; }
body.slide-page #ppt-controls button { width: 44px; height: 44px; border-radius: var(--yj-r-sm); color: var(--yj-ink-deep); transition: background-color var(--yj-m-fast) var(--yj-ease); }
body.slide-page #ppt-controls button:hover { background-color: var(--yj-yuja-50); }
body.slide-page #page-count { color: var(--yj-yuja-ink); }
body.slide-page #exit-ppt-btn { color: var(--yj-ink-deep); }
/* ── 제목 — 왼쪽 유자 표식 · 아래 간격은 조금 좁혀 내용 칸을 넓힌다 ── */
body.slide-page .slide-title { color: var(--yj-ink-deep); border-left-color: var(--yj-yuja-500); margin-bottom: .8rem; padding-bottom: .5rem; }
body.slide-page .quiz-header-row { border-bottom: 1px solid var(--yj-line); }
/* ── 1. 표지 ── */
body.slide-page .main-cover-badge { background: var(--yj-card); border: 1px solid var(--yj-line); box-shadow: var(--yj-sh-1); color: var(--yj-ink-deep); }
body.slide-page .main-cover-badge .badge-series { color: var(--yj-yuja-ink); }
body.slide-page .main-cover-badge .badge-sep { color: var(--yj-line-strong); }
body.slide-page .main-cover-badge .badge-vol { color: var(--yj-ink-deep); }
body.slide-page .main-cover-badge .badge-serial { color: var(--yj-sub); }
body.slide-page .slide-cover-right { border-left-color: var(--yj-yuja-500); }
body.slide-page .slide-content-main .huneum { color: var(--yj-ink-deep); }
body.slide-page .slide-content-main .hanja { color: var(--yj-ink); }
body.slide-page .slide-content-main .info { color: var(--yj-sub); }
body.slide-page #start-slideshow-btn { background-color: var(--yj-yuja-300); color: var(--yj-on-action); border-radius: var(--yj-r-lg); box-shadow: none; transition: background-color var(--yj-m-fast) var(--yj-ease); }
body.slide-page #start-slideshow-btn:hover { background-color: var(--yj-yuja-500); transform: none; box-shadow: none; }
@media (max-width: 768px) { body.slide-page .slide-cover-right { border-top-color: var(--yj-yuja-500); } }
/* ── 2. 해설+뜻 ── */
body.slide-page .meaning-origin-card, body.slide-page .meaning-cardlet { background: var(--yj-card); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1); }
body.slide-page .meaning-cardlet:hover { border-color: var(--yj-line-strong); box-shadow: var(--yj-sh-2); transform: none; }
body.slide-page .origin-card-header { border-bottom-color: var(--yj-line); }
body.slide-page .origin-badge { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); border-color: var(--yj-yuja-200); }
body.slide-page .origin-subtitle { color: var(--yj-sub); }
body.slide-page .origin-card-body p { color: var(--yj-ink); }
body.slide-page .origin-card-body strong { color: var(--yj-ink-deep); background: linear-gradient(transparent 62%, var(--yj-yuja-200) 62%); }
@media (min-width: 1024px) { body.slide-page .meaning-list-col { border-left-color: var(--yj-line-strong); } }
body.slide-page .meaning-num-badge { background: var(--yj-yuja-300); color: var(--yj-on-action); }
body.slide-page .meaning-cardlet-title { color: var(--yj-ink-deep); }
body.slide-page .meaning-cardlet-def { color: var(--yj-ink); }
body.slide-page .meaning-cardlet-example { background: var(--yj-canvas); border-color: var(--yj-line); color: var(--yj-ink); }
body.slide-page .meaning-cardlet-example .example-label { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); }
/* ── 3. 학습어휘 ── */
body.slide-page .vocab-button-bar a { background-color: var(--yj-card); color: var(--yj-ink); border: 1px solid var(--yj-line-strong); box-shadow: none; transition: background-color var(--yj-m-fast) var(--yj-ease); }
body.slide-page .vocab-button-bar a:hover { background-color: var(--yj-yuja-50); border-color: var(--yj-line-strong); transform: none; }
body.slide-page .vocab-button-bar a.active { background-color: var(--yj-yuja-200); color: var(--yj-ink-deep); border-color: var(--yj-yuja-600); box-shadow: none; }   /* 지금 보는 어휘 = 고른 것 */
body.slide-page .kpi-card { background-color: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }
body.slide-page .vocab-card-left-col .kpi-card { border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); }
body.slide-page .kpi-card.last-clicked { border-color: var(--yj-yuja-600); box-shadow: 0 0 0 2px var(--yj-yuja-200); }
body.slide-page .vocab-card-main-title, body.slide-page .advanced-vocab-title { color: var(--yj-ink-deep); }
body.slide-page .vocab-card-main-title strong, body.slide-page .advanced-vocab-title strong { color: var(--yj-yuja-ink) !important; }
body.slide-page .vocab-details { border-top-color: var(--yj-line) !important; }
body.slide-page .vocab-details strong { color: var(--yj-ink-deep); }
body.slide-page .vocab-details .italic { color: var(--yj-ink); }
body.slide-page .vocab-webtoon-preview-card { background: var(--yj-card); border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-2); }
body.slide-page .vocab-webtoon-preview-card:hover { border-color: var(--yj-yuja-600); box-shadow: var(--yj-sh-2); transform: none; }
body.slide-page .vocab-webtoon-thumb-img { border-radius: calc(var(--yj-r-lg) - 1px); }
/* ── 4. 도약어휘 ── */
body.slide-page .advanced-vocab-link { background: var(--yj-canvas); border: 1px solid var(--yj-line-strong); color: var(--yj-yuja-ink); }
body.slide-page .advanced-vocab-link:hover { background: var(--yj-yuja-300); border-color: var(--yj-yuja-300); color: var(--yj-on-action); }
body.slide-page .advanced-grid-container .kpi-card:hover { border-color: var(--yj-line-strong); }
/* ── 5. 퀴즈 — 맞힌 것(잎)은 그대로, 진도 막대는 원색 유자 ── */
body.slide-page .quiz-progress-pill { background: var(--yj-card); border: 1px solid var(--yj-line); box-shadow: var(--yj-sh-1); }
body.slide-page .quiz-progress-label { color: var(--yj-sub); }
body.slide-page .quiz-progress-count { color: var(--yj-ink-deep); }
body.slide-page .quiz-progress-count strong { color: var(--yj-ink-deep); }
body.slide-page .quiz-progress-track { background: var(--yj-line); }
body.slide-page .quiz-progress-bar { background: var(--yj-yuja-500); }
body.slide-page .quiz-set-arrow:hover { border-color: var(--yj-line-strong); color: var(--yj-ink-deep); background: var(--yj-yuja-50); }
body.slide-page .quiz-set-dot { background: var(--yj-line-strong); }
body.slide-page .quiz-set-dot.active { background: var(--yj-yuja-500); box-shadow: 0 0 0 4px var(--yj-yuja-100); }
body.slide-page .quiz-set-dot.done { background: var(--yj-leaf); }
body.slide-page .quiz-set-label { color: var(--yj-sub); }
body.slide-page .quiz-set-next-btn { background: var(--yj-yuja-300); color: var(--yj-on-action); border-radius: var(--yj-r-sm); box-shadow: none; }
body.slide-page .quiz-set-next-btn:hover { background: var(--yj-yuja-500); transform: none; }
body.slide-page .quiz-result-overlay { background: var(--yj-canvas); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* ── 6. 마무리 ── */
body.slide-page .recap-content-card { background: var(--yj-card); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-2); }
body.slide-page .recap-celebration-badge { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); border-color: transparent; }   /* 다 배운 것 = 잎 */
body.slide-page .recap-main-title, body.slide-page .recap-huneum { color: var(--yj-ink-deep); }
body.slide-page .recap-hanja { color: var(--yj-yuja-ink); }
body.slide-page .recap-section { background: var(--yj-canvas); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); }
body.slide-page .recap-section-title { color: var(--yj-ink); }
body.slide-page .recap-vocab-chip { background: var(--yj-card); border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-sm); color: var(--yj-ink-deep); box-shadow: none; }
body.slide-page .recap-vocab-chip:hover { background: var(--yj-yuja-50); border-color: var(--yj-line-strong); color: var(--yj-ink-deep); transform: none; box-shadow: none; }
body.slide-page .recap-btn { border-radius: var(--yj-r-sm); box-shadow: none; }
body.slide-page .recap-btn:hover { transform: none; box-shadow: none; }
body.slide-page .recap-btn-finish { background: var(--yj-yuja-300); color: var(--yj-on-action); }
body.slide-page .recap-btn-finish:hover { background: var(--yj-yuja-500); }
body.slide-page .recap-btn-notes { background: var(--yj-yuja-100); color: var(--yj-ink-deep); }
body.slide-page .recap-btn-notes:hover { background: var(--yj-yuja-200); }
body.slide-page .recap-btn-replay { background: var(--yj-card); color: var(--yj-ink-deep); border: 1px solid var(--yj-line-strong); }
body.slide-page .recap-btn-replay:hover { background: var(--yj-yuja-50); border-color: var(--yj-line-strong); }
/* ── 웹툰 크게 보기 · 판서 창 — 블러 걷음 ── */
body.slide-page #slide-webtoon-modal { background: var(--yj-overlay); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.slide-page .slide-webtoon-modal-content { background: var(--yj-canvas); border-radius: var(--yj-r-lg); border: 1px solid var(--yj-line); box-shadow: var(--yj-sh-3); }
body.slide-page .slide-webtoon-floating-close { border-radius: var(--yj-r-sm); background: var(--yj-card); border: 1px solid var(--yj-line-strong); color: var(--yj-ink-deep); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--yj-sh-1); }
body.slide-page .slide-webtoon-floating-close:hover { background: var(--yj-yuja-50); border-color: var(--yj-line-strong); transform: none; box-shadow: var(--yj-sh-1); }
body.slide-page #notes-popup-overlay, body.slide-page #notes-edit-picker-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.slide-page #notes-edit-confirm-btn { background: var(--yj-yuja-300); color: var(--yj-on-action); }
body.slide-page #notes-edit-confirm-btn:hover { background: var(--yj-yuja-500); }

/* 소식 분류 아이콘 — 이모지를 걷어 비었으므로 자리를 차지하지 않게(news · 2026-10-15) */
.news-item__cat-icon:empty { display: none; }

/* ============================================================
   11. 놀이 — 허브(play) · 가로세로 · 글자엮기 · 토룡 · 유자런 · 유자볼 · 유자스핀 (2026-10-15)
   작가 결정: 게임판(캔버스·그림)은 그대로, 틀(머리줄·단추·안내창·결과창)만 v4 /
   로비는 유자로 통일(유자스핀 보라·토룡 주황 → 유자, 게임판 속 그림은 그대로) /
   이모지는 소리 단추·문구만 걷고 캔버스 아이템 그림은 게임 그림으로 남긴다.
   ============================================================ */

/* 11-1. 놀이 허브(play · .yj-rec · .yj-game-card) */
/* 나의 기록 모음 — 서류철 탭(위만 둥근 칸 + 고른 칸이 판과 이어짐, 규격 §0-3 금지) →
   카드 한 장 위쪽의 밑줄 탭(§7-2: 지금 칸은 먹 700 + 2px 유자 500 밑줄) */
.yj-rec__tabs {
  gap: 0; margin-top: var(--yj-s3);
  background: var(--yj-card); border: 1px solid var(--yj-line); border-bottom-color: var(--yj-line);
  border-radius: var(--yj-r-lg) var(--yj-r-lg) 0 0; padding: 0 var(--yj-s2);
}
.yj-rec__tab {
  border: 0; border-radius: 0; background: transparent; color: var(--yj-sub); font-weight: 600;
  padding: var(--yj-s2) var(--yj-s1); box-shadow: inset 0 -2px 0 transparent;
}
.yj-rec__tab:hover { color: var(--yj-ink-deep); }
.yj-rec__tab[aria-selected="true"] {
  background: transparent; color: var(--yj-ink-deep); font-weight: 700; transform: none;
  box-shadow: inset 0 -2px 0 var(--yj-yuja-500);
}
.yj-rec__tab:focus-visible { outline-color: var(--yj-yuja-600); outline-offset: -2px; }
.yj-rec__panel { border: 1px solid var(--yj-line); border-top: 0; box-shadow: var(--yj-sh-1); }
/* 요약 숫자 — 카드 안의 한 단 어두운 면(캔버스) */
.yj-rec__stat { background: var(--yj-canvas); }
.yj-rec__stat span { color: var(--yj-sub); }
/* 목록 — 카드 한 장 안에서 1px 선으로 나눈다, 행 hover 는 유자 50(§7-3) */
.yj-rec__row { background: transparent; border-radius: var(--yj-r-sm); }
.yj-rec__row + .yj-rec__row { margin-top: 0; border-top: 1px solid var(--yj-line); border-radius: 0; }
.yj-rec__row:hover { background: var(--yj-yuja-50); }
.yj-rec__rank, .yj-rec__meta, .yj-rec__grouptitle { color: var(--yj-sub); }
/* 게임 카드 — 미색 카드 + 그림자 1, 올리면 그림자 2 + 2px 올림 */
.yj-game-card { border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }
@media (hover: hover) {
  .yj-game-card:hover { box-shadow: var(--yj-sh-2); transform: translateY(-2px); }
}
.yj-game-card:active { transform: scale(.98); }
.yj-game-card__shot { border-bottom: 1px solid var(--yj-line); }
.yj-game-card .yj-cap { color: var(--yj-sub); }

/* 11-2. 가로세로(crossword · html.yj-cw) — 캔버스가 없는 화면이라 통째로 v4.
   스크립트가 body·머리줄·안내 상자의 class 를 통째로 갈아 끼우므로(도약 모드) html 의 yj-cw 로 범위를 잡는다.
   도약 모드의 초록 테마는 걷는다 — 초록(잎)은 이룬 것 전용이라 완료 표시와 섞였다. 모드는 스위치와 머리줄 배지가 알린다. */
html.yj-cw { background-color: var(--yj-canvas) !important; }   /* app-safe-area.css 의 터치 화면 html #fefce8 !important 를 덮는다 */
.yj-cw body { background: var(--yj-canvas); }
/* 머리줄 — 원색 유자 넓은 면 + 흰 글자 + 흐림 → 미색 상단바 + 1px 선 + 먹 글자.
   휴대폰에서는 app-safe-area.css 가 sticky 머리줄을 도크 자리(아래)로 옮기고 #FFD700 을 !important 로 칠한다(도크 이전 규칙).
   그 규칙(0,2,1)을 한 단 넘어 바탕을 덮고, 머리줄은 위로 되돌린다 — 대문(index)이 이미 쓰는 되돌림과 같다.
   챕터 화면은 이 되돌림이 없어 머리줄이 도크를 덮고 있었다. */
@media (pointer: coarse) and (max-width: 1024px), (max-width: 767px) {
  html.yj-cw header[class*="sticky"] { background: var(--yj-card) !important; box-shadow: none !important; }
  html.yj-cw #main-header { position: sticky !important; top: 0 !important; bottom: auto !important; height: auto !important; }
  html.yj-cw #main-header::after { content: none !important; }
}
.yj-cw header {
  background: var(--yj-card); color: var(--yj-ink-deep);
  border-bottom: 1px solid var(--yj-line); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.yj-cw header .text-white, .yj-cw header h1 { color: var(--yj-ink-deep); }
.yj-cw header .text-white\/80 { color: var(--yj-sub); }
.yj-cw header a, .yj-cw #cw-mobile-primary-nav a {   /* 뒤로 — 스크립트가 href 를 챕터로 바꿔 끼우므로 href 로 고르지 않는다 */
  background: transparent; color: var(--yj-sub); border-radius: var(--yj-r-full);
  min-width: var(--yj-tap); min-height: var(--yj-tap);
}
.yj-cw header a:hover, .yj-cw #cw-mobile-primary-nav a:active { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
/* 진도 배지 = 유자 배지, 출제 범위 = 외곽선 배지 */
.yj-cw #overall-progress-badge, .yj-cw #chapter-progress-badge {
  background: var(--yj-yuja-100); color: var(--yj-ink-deep); border: 0; box-shadow: none;
}
.yj-cw header .shrink-0:has(> .scope-range-txt), .yj-cw #cw-mobile-primary-nav .shrink-0:has(> .scope-range-txt) {
  background: transparent; color: var(--yj-sub); border: 1px solid var(--yj-line-strong);
  border-radius: var(--yj-r-full); box-shadow: none;
}
/* 안내 상자(권·퍼즐 고르기 머리) — 노랑·주황 그라데이션 판 → 미색 카드 + 그림자 1 */
.yj-cw #info-banner {
  background: var(--yj-card); border: 1px solid var(--yj-line);
  border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1);
}
.yj-cw #banner-title { color: var(--yj-ink-deep); }
.yj-cw #banner-sub, .yj-cw #leap-desc { color: var(--yj-sub); }
.yj-cw #mode-text-highlight { color: var(--yj-ink-deep); }
/* 완료/미완료 범례 · 챕터 완료 수 — 외곽선 배지. 6/6 완주는 잎 배지(이룬 것) */
.yj-cw #banner-status-box, .yj-cw #chapter-status-box {
  background: var(--yj-card); color: var(--yj-sub); border: 1px solid var(--yj-line-strong);
  border-radius: var(--yj-r-full); box-shadow: none;
}
.yj-cw #chapter-status-box.is-full { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); border-color: transparent; }
.yj-cw #cleared-dot-icon { background: var(--yj-leaf); }
.yj-cw #uncleared-dot-icon { background: var(--yj-card); border-color: var(--yj-line-strong); }
/* 도약어휘 스위치 — 켜면 원색 유자 막대(작은 표식), 끄면 강한 선 색 */
.yj-cw #leap-toggle-wrap {
  background: var(--yj-card); border: 1px solid var(--yj-line-strong);
  border-radius: var(--yj-r-full); box-shadow: none; min-height: var(--yj-tap);
}
.yj-cw #leap-toggle-wrap:hover { background: var(--yj-yuja-50); }
.yj-cw #leap-toggle-label { color: var(--yj-ink-deep); font-weight: 700; }
.yj-cw #leap-toggle-btn { background: var(--yj-line-strong); box-shadow: none; }
.yj-cw #leap-toggle-btn:has(> .translate-x-5) { background: var(--yj-yuja-500); }
.yj-cw #leap-toggle-thumb { background: var(--yj-card-hi); box-shadow: var(--yj-sh-1); }

/* 권 × 챕터 줄 */
.yj-cw #matrix-container > div {
  background: var(--yj-card); border: 1px solid var(--yj-line);
  border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1);
}
.yj-cw #matrix-container > div > div:first-child {   /* 권 표식 — 원색 면 + 흰 글자 → 유자 배지 면 + 먹 글자 */
  background: var(--yj-yuja-100); color: var(--yj-ink-deep); border: 0; box-shadow: none; border-radius: var(--yj-r-sm);
}
.yj-cw #matrix-container a {
  background: var(--yj-card); color: var(--yj-ink-deep); border: 1px solid var(--yj-line-strong);
  border-radius: var(--yj-r-sm); box-shadow: none;
}
.yj-cw #matrix-container a:hover { background: var(--yj-yuja-50); border-color: var(--yj-yuja-600); }
.yj-cw #matrix-container a.bg-emerald-100, .yj-cw #matrix-container a.bg-teal-200 {
  background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); border-color: var(--yj-leaf);
}
.yj-cw #matrix-container a > span { background: var(--yj-leaf-solid); color: var(--yj-on-ink); box-shadow: none; }
.yj-cw #matrix-container > .text-center { color: var(--yj-sub); }
.yj-cw .custom-scrollbar::-webkit-scrollbar-track { background: var(--yj-canvas); }
.yj-cw .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--yj-line-strong); }
.yj-cw #reset-btn { color: var(--yj-sub); }
.yj-cw #reset-btn:hover { color: var(--yj-ink-deep); }

/* 챕터 — 퍼즐 카드 */
.yj-cw #puzzle-list > a {
  background: var(--yj-card); border: 1px solid var(--yj-line);
  border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1);
  transition: box-shadow var(--yj-m-mid) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
@media (hover: hover) { .yj-cw #puzzle-list > a:hover { box-shadow: var(--yj-sh-2); transform: translateY(-2px); border-color: var(--yj-line); } }
.yj-cw #puzzle-list > a .font-black.text-sm { color: var(--yj-ink-deep); }
.yj-cw #puzzle-list .rounded-full.border { background: transparent; color: var(--yj-sub); border-color: var(--yj-line-strong); }   /* 크기 · 미완료 = 외곽선 배지 */
.yj-cw #puzzle-list .bg-emerald-500 { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); box-shadow: none; }   /* 완료 = 잎 배지 */
.yj-cw #puzzle-list p .font-bold { color: var(--yj-yuja-ink); }
.yj-cw #puzzle-list p .text-gray-700 { color: var(--yj-ink); }
.yj-cw #puzzle-list > a > div:last-child { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); border-radius: var(--yj-r-full); }
.yj-cw #puzzle-list > a.bg-emerald-50\/90 > div:last-child { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); }

/* 게임 — 관통어 · 안내는 안내 상자(유자 50 + 왼쪽 2px 유자 500) */
.yj-cw #seed-banner, .yj-cw .bg-blue-50\/80 {
  background: var(--yj-yuja-50); border: 0; border-left: 2px solid var(--yj-yuja-500);
  border-radius: var(--yj-r-lg); box-shadow: none; color: var(--yj-ink-deep);
}
.yj-cw #seed-banner .bg-amber-500 { background: var(--yj-yuja-200); color: var(--yj-ink-deep); border-radius: var(--yj-r-xs); }
.yj-cw #seed-banner .text-amber-800 { color: var(--yj-ink-deep); text-decoration-color: var(--yj-yuja-600); }
.yj-cw #seed-banner .text-gray-700 { color: var(--yj-ink); }
/* 판 · 열쇠 카드 */
.yj-cw #cw-grid-container, .yj-cw #cw-right-col {
  background: var(--yj-card); border: 1px solid var(--yj-line);
  border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1);
}
/* 칸 — 막힌 칸은 강한 선 색 면, 빈칸은 흰 면 + 강한 선, 지금 칸은 유자 200 + 유자 600, 맞힌 칸은 잎, 틀림·공개는 오류색 */
.yj-cw .cw-grid-cell { border-radius: var(--yj-r-sm); box-shadow: none; }
.yj-cw .cw-grid-cell.bg-slate-300 { background: var(--yj-line-strong); border-color: var(--yj-line-strong); }
.yj-cw .cw-grid-cell.bg-white { background: var(--yj-card-hi); border-color: var(--yj-line-strong); color: var(--yj-ink-deep); }
.yj-cw .cw-grid-cell.bg-white:hover { background: var(--yj-yuja-50); border-color: var(--yj-yuja-600); }
.yj-cw .cw-grid-cell.bg-amber-100 { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); box-shadow: none; }
.yj-cw .cw-grid-cell.bg-emerald-100 { background: var(--yj-leaf-tint); border-color: var(--yj-leaf); color: var(--yj-leaf-ink); }
.yj-cw .cw-grid-cell.bg-rose-50, .yj-cw .cw-grid-cell.bg-rose-100 { background: var(--yj-error-tint); border-color: var(--yj-error); color: var(--yj-error); }
.yj-cw .cw-cell-no { color: var(--yj-ink); }
/* 가로·세로 열쇠 — 붙은 칸 탭 → 밑줄 탭(지금 = 먹 700 + 2px 유자 500). 넘겨 볼 힌트가 있는 탭은 유자 100 면으로 깜빡인다 */
.yj-cw #cw-right-col > div:first-child { background: var(--yj-card); border-bottom: 1px solid var(--yj-line); }
.yj-cw #cw-right-col > div:first-child > * + * { border-left: 0; }
.yj-cw #cw-pc-tab-across, .yj-cw #cw-pc-tab-down {
  background: transparent; color: var(--yj-sub); font-weight: 600; box-shadow: inset 0 -2px 0 transparent; min-height: var(--yj-tap);
}
.yj-cw #cw-pc-tab-across:hover, .yj-cw #cw-pc-tab-down:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
.yj-cw #cw-pc-tab-across.bg-amber-300, .yj-cw #cw-pc-tab-down.bg-amber-300 {
  color: var(--yj-ink-deep); font-weight: 700; box-shadow: inset 0 -2px 0 var(--yj-yuja-500);
}
.yj-cw #cw-pc-tab-across.animate-pulse, .yj-cw #cw-pc-tab-down.animate-pulse {
  background: var(--yj-yuja-100) !important; border: 0 !important; color: var(--yj-ink-deep) !important; box-shadow: none;
}
.yj-cw .cw-clue {
  background: var(--yj-card); border-color: var(--yj-line); border-radius: var(--yj-r-sm); box-shadow: none;
}
.yj-cw .cw-clue:hover { background: var(--yj-yuja-50); border-color: var(--yj-line-strong); }
.yj-cw .cw-clue.bg-amber-100\/70 { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); }
.yj-cw .cw-clue.bg-gray-100 { background: var(--yj-canvas); }
.yj-cw .cw-clue-no { color: var(--yj-yuja-ink); }
.yj-cw .cw-clue-text > span {
  background: var(--yj-yuja-100); border-color: transparent; color: var(--yj-ink-deep); border-radius: var(--yj-r-xs); box-shadow: none;
}
.yj-cw .cw-clue-switch, .yj-cw #cw-mobile-chip-hints button {
  background: var(--yj-card); color: var(--yj-ink); border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-sm); box-shadow: none;
}
.yj-cw .cw-clue-switch:hover, .yj-cw #cw-mobile-chip-hints button:hover { background: var(--yj-yuja-50); }
.yj-cw .cw-clue .text-emerald-600, .yj-cw #cw-mobile-chip-hints .text-emerald-600 { color: var(--yj-leaf-ink); }
/* 글자 칩 팔레트(PC) · 글자 고르기 창(휴대폰) */
.yj-cw #cw-chip-palette {
  background: var(--yj-card); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-2);
}
.yj-cw #cw-chip-palette .text-gray-400 { color: var(--yj-sub); }
.yj-cw #cw-chip-palette button, .yj-cw #cw-mobile-chip-options button {
  background: var(--yj-card-hi); color: var(--yj-ink-deep); border: 1px solid var(--yj-line-strong);
  border-radius: var(--yj-r-sm); box-shadow: none;
}
.yj-cw #cw-chip-palette button:hover, .yj-cw #cw-mobile-chip-options button:hover { background: var(--yj-yuja-100); border-color: var(--yj-yuja-600); }
.yj-cw #cw-mobile-chip-popup {
  background: var(--yj-card-hi); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg);
  box-shadow: var(--yj-sh-3); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.yj-cw #cw-mobile-chip-popup .border-b, .yj-cw #cw-mobile-chip-hints { border-color: var(--yj-line); }
.yj-cw #cw-mobile-chip-title { color: var(--yj-ink-deep); }
.yj-cw #cw-mobile-chip-popup > div:first-child > button { background: transparent; color: var(--yj-sub); min-height: 32px; padding-inline: var(--yj-s3); border-radius: var(--yj-r-sm); }
.yj-cw #cw-mobile-chip-hints > div { background: var(--yj-card); border-color: var(--yj-line); border-radius: var(--yj-r-sm); box-shadow: none; }
.yj-cw #cw-mobile-chip-hints .bg-amber-200\/70 { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); }
/* 휴대폰 아래 — 위만 둥근 갈색 책갈피 탭 줄(§0-3) → 모서리 8 단추(지금 연 쪽 = 유자 200 + 600, 정답공개 = 주 버튼) */
.yj-cw #cw-mobile-action-bar { padding-bottom: var(--yj-s2); }
.yj-cw #cw-mobile-tab-across, .yj-cw #cw-mobile-tab-down, .yj-cw #cw-mobile-collapse-btn {
  background: var(--yj-card); color: var(--yj-ink-deep); border: 1px solid var(--yj-line-strong);
  border-radius: var(--yj-r-sm); box-shadow: var(--yj-sh-1); min-height: var(--yj-tap); font-weight: 700;
}
.yj-cw #cw-mobile-tab-across.bg-white, .yj-cw #cw-mobile-tab-down.bg-white {
  background: var(--yj-yuja-200); border-color: var(--yj-yuja-600);
}
.yj-cw #cw-mobile-reveal-btn {
  background: var(--yj-yuja-300); color: var(--yj-on-action); border: 0; border-radius: var(--yj-r-full);
  box-shadow: var(--yj-sh-1); min-height: var(--yj-tap);
}
.yj-cw #cw-mobile-reveal-btn:active { background: var(--yj-yuja-500); }
.yj-cw #cw-mobile-accordion { background: var(--yj-card); border-top: 1px solid var(--yj-line); }
.yj-cw #cw-mobile-accordion[style*="max-height: 0px"] { border-top: 0; }
.yj-cw #cw-mobile-primary-nav {
  background: var(--yj-card); color: var(--yj-ink-deep); border-top: 1px solid var(--yj-line); box-shadow: none;
}
/* 완료 창 — 막 흐림 걷고 card-hi + 그림자 3, 닫기 = 주 버튼 */
.yj-cw #cw-score-popup-modal { background: var(--yj-overlay); backdrop-filter: none; -webkit-backdrop-filter: none; }
.yj-cw #cw-score-popup-modal > div {
  background: var(--yj-card-hi); border: 0; border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-3);
}
.yj-cw #cw-score-popup-modal .text-5xl:empty { display: none; }
.yj-cw #cw-score-popup-modal h3 { color: var(--yj-ink-deep); }
.yj-cw #cw-score-popup-modal p { color: var(--yj-sub); }
.yj-cw #cw-score-popup-modal .bg-amber-50 { background: var(--yj-canvas); border: 0; border-radius: var(--yj-r-sm); }
.yj-cw #cw-score-popup-modal .text-gray-500 { color: var(--yj-sub); }
.yj-cw #cw-score-self { color: var(--yj-leaf-ink); }
.yj-cw #cw-score-hint { color: var(--yj-error); }
.yj-cw #cw-score-popup-modal button.bg-amber-500 {
  background: var(--yj-yuja-300); color: var(--yj-on-action); border-radius: var(--yj-r-full); box-shadow: none;
}
.yj-cw #cw-score-popup-modal button.bg-amber-500:hover { background: var(--yj-yuja-500); }

/* 11-3. 글자엮기(scrabble · body.scrabble-body) — 로비·옆 패널·안내창은 v4, 보드(보너스 칸·플레이어 4색·배치 보라)는 게임판이라 그대로.
   scrabble.css 가 자기 색 이름(--canvas-white · --surface · --yuja-lemon-amber …)을 쓰므로 그 이름을 v4 토큰으로 다시 잇는다.
   장면 전환(차례 넘김 막·첫 낱말 고르기·끝 화면)의 숲 바탕은 게임 장면이라 그대로 둔다. */
body.scrabble-body {
  --canvas-white: var(--yj-card);
  --canvas-cream: var(--yj-canvas);
  --surface: var(--yj-canvas);
  --hairline: var(--yj-line);
  --hairline-strong: var(--yj-line-strong);
  --ink-deep: var(--yj-ink-deep);
  --ink: var(--yj-ink);
  --charcoal: var(--yj-ink);
  --slate: var(--yj-sub);
  --steel: var(--yj-sub);
  --yuja-lemon-amber: var(--yj-yuja-300);
  --yuja-lemon-tint: var(--yj-yuja-50);
}
/* app-safe-area.css 가 터치 화면에서 html 바탕을 #fefce8 로 !important 칠한다 — 내용이 짧으면 아래가 레몬빛으로 남는다 */
html:has(> body.scrabble-body) { background: var(--yj-canvas) !important; }
/* 보드 안은 게임판 — 빈칸은 원래의 흰 면 그대로(card-hi = #FFFFFF) */
body.scrabble-body .board-viewport { --canvas-white: var(--yj-card-hi); }
/* 로비 머리 — 원색 유자로 채운 띠 → 미색 상단바 56 + 1px 선, 유자 얼굴 그림 */
body.scrabble-body .lobby-hero {
  background: var(--yj-card); border-bottom: 1px solid var(--yj-line);
  min-height: calc(var(--yj-dock-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--yj-s4) 0;
}
body.scrabble-body .lobby-hero__emoji img { width: 28px; height: 28px; display: block; margin: 0; }
body.scrabble-body .lobby-hero .yj-info-btn {
  width: 36px; height: 36px; min-width: 36px; background: transparent; color: var(--yj-sub);
  border: 1px solid var(--yj-line-strong);
}
body.scrabble-body .lobby-hero .yj-info-btn:hover, body.scrabble-body .lobby-hero .yj-info-btn:active { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
/* 고르는 줄(모드·난이도·인원) — 세그먼트: 1px 선 알약 묶음, 고른 칸은 유자 200 + 1px 유자 600 + 먹 */
body.scrabble-body .count-picker { background: var(--yj-card); border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-full); }
body.scrabble-body .count-picker button { border-radius: var(--yj-r-full); border: 1px solid transparent; color: var(--yj-sub); min-height: 40px; }
body.scrabble-body .count-picker button.active { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); }
body.scrabble-body .player-row { border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1); }
body.scrabble-body .player-row input[type="text"] { background: var(--yj-card-hi); border: 1px solid var(--yj-line-strong); }
body.scrabble-body .player-row input[type="text"]:focus,
body.scrabble-body .word-type-input:focus { border-color: var(--yj-yuja-600); box-shadow: 0 0 0 1px var(--yj-yuja-600); }
body.scrabble-body .option-row select { background: var(--yj-card); border: 1px solid var(--yj-line-strong); color: var(--yj-ink); min-height: 36px; }
/* 주 버튼 — 유자 300 + 먹, 빛 번짐(색 그림자) 걷음. 이어하기는 대등한 다른 선택 = 보조(유자 100) */
body.scrabble-body .cta-primary { box-shadow: none; min-height: 48px; }
body.scrabble-body .cta-primary:hover { filter: none; background: var(--yj-yuja-500); }
body.scrabble-body .cta-primary.cta-resume { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); }
body.scrabble-body .cta-primary.cta-resume:hover { background: var(--yj-yuja-200); }
body.scrabble-body .lobby-owner-note { background: var(--yj-yuja-50); }
/* 설명 창 — 원색 띠 머리 → card-hi + 1px 선, 절 제목 유자 글자, 용어 = 유자 배지, 첫 문단 = 안내 상자 */
body.scrabble-body #infoOverlay { background: var(--yj-overlay); }
body.scrabble-body #infoDialog { background: var(--yj-card-hi); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-3); }
body.scrabble-body #infoDialog header { background: var(--yj-card-hi); border-bottom: 1px solid var(--yj-line); }
body.scrabble-body #infoClose { background: transparent; color: var(--yj-sub); }
body.scrabble-body #infoClose:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
body.scrabble-body #infoBody h3 { color: var(--yj-yuja-ink); }
body.scrabble-body #infoBody dt { background: var(--yj-yuja-100); }
body.scrabble-body .info-lead { border-left: 2px solid var(--yj-yuja-500); border-radius: var(--yj-r-lg); }

/* 게임 틀 — 초록 머리띠(PC 옆 패널 위 · 휴대폰 미니바) → 미색 + 1px 선 + 먹 글자, 아이콘 단추는 바탕 없이 보조 글자 */
body.scrabble-body .side-panel-topbar { background: var(--yj-card); border-bottom: 1px solid var(--yj-line); }
body.scrabble-body .topbar-title { color: var(--yj-ink-deep); }
body.scrabble-body .topbar-icon-btn, body.scrabble-body .mobile-topbar .mt-home, body.scrabble-body .mobile-topbar .mt-sound {
  background: transparent; color: var(--yj-sub); border: 1px solid var(--yj-line-strong);
}
@media (max-width: 767px) {
  body.scrabble-body .mobile-topbar { background: var(--yj-card); color: var(--yj-ink-deep); border-bottom: 1px solid var(--yj-line); }
}
body.scrabble-body .score-row.current { background: var(--yj-yuja-100); box-shadow: inset 0 0 0 1px var(--yj-yuja-600); }
body.scrabble-body .word-input-panel, body.scrabble-body .hint-panel { border-radius: var(--yj-r-lg); }
body.scrabble-body .selected-anchor-chip { background: var(--yj-yuja-100); }
/* 힌트 찬스 — 잎 외곽선 → 보조 버튼(유자 100 + 유자 글자) */
body.scrabble-body .hint-btn-row button { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); border: 0; border-radius: var(--yj-r-sm); min-height: var(--yj-tap); }
body.scrabble-body .hint-btn-row button:hover:not(:disabled) { background: var(--yj-yuja-200); }
body.scrabble-body .bottom-actions button { border-radius: var(--yj-r-sm); border-width: 1px; min-height: var(--yj-tap); }
body.scrabble-body #btnEndGame { border-color: var(--yj-line-strong); color: var(--yj-ink); }
/* 확인 창 — 초록 막 → overlay, 모서리 12 + 그림자 3 */
body.scrabble-body .modal-overlay { background: var(--yj-overlay); }
body.scrabble-body .modal-card { background: var(--yj-card-hi); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-3); }
body.scrabble-body .modal-cta.secondary, body.scrabble-body .homograph-none-btn { border-width: 1px; }
body.scrabble-body .homograph-candidate { border-width: 1px; }
body.scrabble-body .homograph-candidate:hover, body.scrabble-body .homograph-candidate:active { border-color: var(--yj-yuja-600); }
body.scrabble-body .toast { background: var(--yj-forest); }
body.scrabble-body .rewind-save-btn { background: var(--yj-yuja-300); color: var(--yj-on-action); }
/* 찬스 퀴즈 — 빨강·주황 그라데이션 배지 → 유자 배지, 보기 단추는 미색 + 강한 선, 정답 잎·오답 오류색 */
body.scrabble-body .chance-quiz-card { background: var(--yj-card-hi); }
body.scrabble-body .chance-quiz-badge { background: var(--yj-yuja-100); color: var(--yj-ink-deep); box-shadow: none; }
body.scrabble-body .chance-quiz-word-box { background: var(--yj-yuja-50); }
body.scrabble-body .chance-option-btn { background: var(--yj-card); border-color: var(--yj-line-strong); color: var(--yj-ink-deep); }
body.scrabble-body .chance-option-btn:hover { background: var(--yj-yuja-50); }
body.scrabble-body .chance-option-btn.correct-choice { background: var(--yj-leaf-tint) !important; border-color: var(--yj-leaf) !important; color: var(--yj-leaf-ink) !important; }
body.scrabble-body .chance-option-btn.wrong-choice { background: var(--yj-error-tint) !important; border-color: var(--yj-error) !important; color: var(--yj-error) !important; }
body.scrabble-body .share-btn-row .share-btn-img { color: var(--yj-on-action); }
body.scrabble-body .share-btn-row .share-btn-txt { background: var(--yj-yuja-100); color: var(--yj-yuja-ink); }

/* 이모지를 걷은 자리 — 선 그림 아이콘 크기·색, 비게 된 장식 칸 */
body.scrabble-body .topbar-icon-btn svg, body.scrabble-body .mt-home svg, body.scrabble-body .mt-sound svg { width: 18px; height: 18px; }
body.scrabble-body .crown-ic { color: var(--yj-yuja-ink); }
body.scrabble-body .end-screen-crown:empty { display: none; }
body.scrabble-body .tier2-mark {
  display: inline-block; padding: 0 6px; border: 1px solid var(--yj-line-strong); border-radius: var(--yj-r-full);
  font-size: var(--yj-t-micro); font-weight: 600; color: var(--yj-sub); vertical-align: 1px;
}
body.scrabble-body .sheet-handle-arrow svg { display: block; }

/* 사용법(scrabble/howtouse) — 유자 50 머리 + 캔버스 위 미색 카드(그림자 1), 돌아가기 = 주 버튼 */
body.scrabble-body .howto-hero { border-bottom: 1px solid var(--yj-line); }
body.scrabble-body .rule-card { border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-1); }
body.scrabble-body .rule-card h3 { font-size: var(--yj-t-body); }
body.scrabble-body .howto-body a:has(> .cta-primary) { text-decoration: none; }

/* 11-4. 유자볼 · 유자스핀 로비(yujaball/index · yuzaball2/index · body[data-mode]) — 두 화면이 같은 틀이다.
   옛 테마는 유형이 색상(노랑·초록 / 보라·붉은 보라)을, 난이도가 진하기를 정해 화면 전체 색이 움직였다(요청 4번).
   작가 결정(2026-10-15): 로비는 유자로 통일 — 지금 고른 유형·난이도·방향은 색 대신 v4 의 '고른 것'(유자 200 + 600)과
   밑줄 탭이 알린다. 게임 화면은 각 game.html 안 스타일의 v4 층이 맡는다. */
body[data-mode] {
  --accent: var(--yj-yuja-300); --accent-soft: var(--yj-yuja-50); --accent-line: var(--yj-line-strong);
  --on: var(--yj-on-action);
  --canvas-cream: var(--yj-canvas); --ink: var(--yj-ink); --charcoal: var(--yj-ink);
  background: var(--yj-canvas);
}
html:has(> body[data-mode]) { background-color: var(--yj-canvas) !important; }   /* app-safe-area 터치 화면 #fefce8 */
/* 머리 — 유형 색 띠 → 미색 상단바 + 1px 선, 유자 얼굴 그림 + 제목, ⓘ 는 바탕 없는 아이콘 단추 */
body[data-mode] > header {
  background: var(--yj-card); color: var(--yj-ink-deep); border-bottom: 1px solid var(--yj-line);
  min-height: var(--yj-dock-h);
}
body[data-mode] > header h1 { display: flex; align-items: center; gap: var(--yj-s2); color: var(--yj-ink-deep); }
body[data-mode] > header h1 img { width: 28px; height: 28px; display: block; }
body[data-mode] #infoBtn { background: transparent; color: var(--yj-sub); border: 1px solid var(--yj-line-strong); width: 36px; height: 36px; }
body[data-mode] #infoBtn:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
/* 설명 창 */
body[data-mode] #infoOverlay { background: var(--yj-overlay); }
body[data-mode] #infoDialog { background: var(--yj-card-hi); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-3); }
body[data-mode] #infoDialog header { background: var(--yj-card-hi); color: var(--yj-ink-deep); border-bottom: 1px solid var(--yj-line); }
body[data-mode] #infoClose { background: transparent; color: var(--yj-sub); }
body[data-mode] #infoClose:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
body[data-mode] #infoBody h3 { color: var(--yj-yuja-ink); border-bottom-color: var(--yj-line); }
body[data-mode] #infoBody p, body[data-mode] #infoBody dd { color: var(--yj-sub); }
body[data-mode] #infoBody dt { background: var(--yj-yuja-100); color: var(--yj-ink-deep); }
body[data-mode] .info-lead { background: var(--yj-yuja-50); border-left: 2px solid var(--yj-yuja-500); border-radius: var(--yj-r-lg); color: var(--yj-ink); }
/* 게임 유형 — 서류철 탭(위만 둥근 칸 + 고른 칸이 판과 이어짐, §0-3 금지) → 카드 위쪽의 밑줄 탭 */
body[data-mode] .index-tabs {
  gap: 0; margin-top: var(--yj-s4); padding: 0 var(--yj-s2);
  background: var(--yj-card); border: 1px solid var(--yj-line); border-bottom: 1px solid var(--yj-line);
  border-radius: var(--yj-r-lg) var(--yj-r-lg) 0 0;
}
body[data-mode] .index-tab {
  border: 0; border-radius: 0; background: transparent; color: var(--yj-sub); box-shadow: inset 0 -2px 0 transparent;
}
body[data-mode] .index-tab:hover { color: var(--yj-ink-deep); }
body[data-mode] .index-tab[aria-selected="true"] {
  background: transparent; color: var(--yj-ink-deep); font-weight: 700; transform: none;
  box-shadow: inset 0 -2px 0 var(--yj-yuja-500);
}
body[data-mode] .index-tab .sub, body[data-mode] .index-tab .desc { opacity: 1; color: var(--yj-sub); }
body[data-mode] .panel {
  background: var(--yj-card); border: 1px solid var(--yj-line); border-top: 0;
  border-radius: 0 0 var(--yj-r-lg) var(--yj-r-lg); box-shadow: var(--yj-sh-1);
}
/* 난이도 · 방향 — 세그먼트(1px 선 알약 묶음, 고른 칸 유자 200 + 1px 유자 600 + 먹) */
body[data-mode] .seg-label { color: var(--yj-sub); }
body[data-mode] .seg { background: var(--yj-card-hi); border-color: var(--yj-line-strong); border-radius: var(--yj-r-full); }
body[data-mode] .seg button { border: 1px solid transparent; border-radius: var(--yj-r-full); color: var(--yj-sub); }
body[data-mode] .seg button[aria-pressed="true"] { background: var(--yj-yuja-200); border-color: var(--yj-yuja-600); color: var(--yj-ink-deep); }
/* 권별 줄 — 카드 안이라 흰 면 + 1px 선(그림자 없이), 권 표식 유자 100, 판 단추 흰 면 + 강한 선 */
body[data-mode] .vol-row { background: var(--yj-card-hi); border-color: var(--yj-line); border-radius: var(--yj-r-lg); }
body[data-mode] .vol-tag { background: var(--yj-yuja-100); color: var(--yj-ink-deep); border-radius: var(--yj-r-sm); }
body[data-mode] .vol-tag .cnt { opacity: 1; color: var(--yj-sub); }
body[data-mode] .lv { background: var(--yj-card-hi); border-color: var(--yj-line-strong); border-radius: var(--yj-r-sm); color: var(--yj-ink-deep); }
body[data-mode] .lv:hover { border-color: var(--yj-yuja-600); background: var(--yj-yuja-50); }
body[data-mode] .lv.cleared { background: var(--yj-leaf-tint); border-color: var(--yj-leaf); }   /* 깬 판 = 이룬 것(잎) */
body[data-mode] .lv .st { color: var(--yj-yuja-ink); display: flex; gap: 1px; align-items: center; }
body[data-mode] .lv .st svg { width: 8px; height: 8px; display: block; }
body[data-mode] .scroll-cue { background: linear-gradient(90deg, transparent, var(--yj-card-hi) 55%); color: var(--yj-yuja-ink); }
body[data-mode] .vol-row.locked .levels { color: var(--yj-sub); }
body[data-mode] #status { color: var(--yj-sub); }

/* 11-5. 놀이 로비 한 가족 (2026-10-15 작가 요청: "놀이 6종이 한 사람이 만든 것처럼")
   여섯 로비가 같은 값을 쓴다. 공용 CSS 를 싣지 않는 토룡·유자런은 자기 CSS 끝에 같은 값을 사본으로 둔다.
     상단바   56 · 미색 card · 아래 1px 선 · 가운데 [유자 얼굴 28 + 이름 20/800 + 설명 단추 40(선 그림 22)]
     본문     폭 720 · 좌우 16 · 상단바 아래 16
     카드     미색 card · 1px 선 · 모서리 12 · 그림자 1 · 안쪽 16 · 카드 사이 16
     글자     카드 제목 17/700 먹 · 카드 안 작은 이름표 13/700 보조
     설명 창  card-hi · 모서리 12 · 그림자 3 · 머리 1px 선 · 첫 문단 안내 상자 · 절 제목 유자 글자 · 용어 유자 100 배지 */

/* ── 글자엮기 ── */
body.scrabble-body .lobby-hero__brand { gap: var(--yj-s2); }
body.scrabble-body .lobby-hero h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
body.scrabble-body .lobby-hero .yj-info-btn { width: 40px; height: 40px; min-width: 40px; border: 0; background: transparent; color: var(--yj-sub); }
body.scrabble-body .yj-info-btn svg { width: 22px; height: 22px; display: block; }
body.scrabble-body .lobby-body { max-width: 720px; padding: var(--yj-s4) var(--yj-s4) calc(var(--yj-s4) + env(safe-area-inset-bottom, 0px)); }
body.scrabble-body .lobby-cta-row { margin-bottom: var(--yj-s4); }
body.scrabble-body .lobby-section {
  background: var(--yj-card); border: 1px solid var(--yj-line); border-radius: var(--yj-r-lg);
  box-shadow: var(--yj-sh-1); padding: var(--yj-s4); margin-bottom: var(--yj-s4);
}
body.scrabble-body .lobby-section > label.lobby-label { font-size: 17px; font-weight: 700; color: var(--yj-ink-deep); margin-bottom: var(--yj-s3); }
body.scrabble-body .lobby-hint { font-size: 13px; color: var(--yj-sub); }
body.scrabble-body .player-row { box-shadow: none; background: var(--yj-card-hi); }

/* ── 유자볼 · 유자스핀 ── */
body[data-mode] > header { padding: env(safe-area-inset-top, 0px) var(--yj-s4) 0; min-height: calc(var(--yj-dock-h) + env(safe-area-inset-top, 0px)); }
body[data-mode] > header h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
body[data-mode] #infoBtn { width: 40px; height: 40px; min-width: 40px; border: 0; background: transparent; color: var(--yj-sub); }
body[data-mode] #infoBtn svg { width: 22px; height: 22px; display: block; }
body[data-mode] main { max-width: 720px; padding: 0 var(--yj-s4) 60px; }
body[data-mode] .panel { padding: var(--yj-s4); }
body[data-mode] .seg-label { font-size: 13px; font-weight: 700; }

/* ── 가로세로 — 대문(index)과 챕터(chapter) ──
   대문 머리줄은 이제 다른 놀이와 같다: 가운데 [얼굴 + 가로세로 + 설명], 진도 배지는 오른쪽.
   휴대폰에서는 오른쪽 배지가 가운데 이름과 부딪히므로 바로 아래 '챕터 선택' 카드의 제목 줄 오른쪽에 놓는다
   (머리줄을 sticky 에서 풀어 위치가 늘 같다 — 상단바 56 + 본문 위 16 + 카드 안쪽 16). */
html.yj-cw #page-body #main-header { position: relative !important; top: 0 !important; }
html.yj-cw #page-body #main-header > div { position: relative; max-width: 720px; min-height: var(--yj-dock-h); padding-block: 0; justify-content: flex-end; }
html.yj-cw #page-body #main-header > div > div:first-child {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); gap: var(--yj-s2);
}
.yj-cw #main-header h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; gap: var(--yj-s2); white-space: nowrap; }
.yj-cw #main-header h1 img { width: 28px; height: 28px; display: block; }
.yj-cw .yj-cw-info-btn {
  width: 40px; height: 40px; border: 0; border-radius: var(--yj-r-full); background: transparent; color: var(--yj-sub);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.yj-cw .yj-cw-info-btn:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
.yj-cw .yj-cw-info-btn svg { width: 22px; height: 22px; display: block; }
@media (max-width: 767px) {
  html.yj-cw #page-body #main-header > div > div:last-child {
    position: absolute; right: calc(var(--yj-s4) + 1px + var(--yj-s4)); top: calc(100% + var(--yj-s4) + var(--yj-s4)); z-index: 1;
  }
  html.yj-cw #page-body #overall-progress-badge { font-size: 12px; padding: 3px 10px; }
}
html.yj-cw #page-body main { max-width: 720px; padding-top: var(--yj-s4); }
html.yj-cw body:has(#puzzle-list) main, html.yj-cw body:has(#puzzle-list) #main-header > div { max-width: 720px; }
html.yj-cw body:has(#puzzle-list) main { padding-top: var(--yj-s4); }
.yj-cw #info-banner { padding: var(--yj-s4); margin-bottom: var(--yj-s4); }
.yj-cw #banner-title { font-size: 17px; font-weight: 700; }
.yj-cw #banner-sub { display: none; }   /* 설명은 상단바 설명 창으로 옮겼다(다른 놀이와 같은 자리). #mode-text-highlight 는 그대로 살아 있다 */
.yj-cw #matrix-container { gap: var(--yj-s3); }
.yj-cw #puzzle-list { gap: var(--yj-s3); }
/* 설명 창(popover — 스크립트 없이 연다) */
.yj-cw .yj-cw-info {
  width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0;
  border-radius: var(--yj-r-lg); background: var(--yj-card-hi); color: var(--yj-ink); box-shadow: var(--yj-sh-3); overflow: hidden;
}
.yj-cw .yj-cw-info:popover-open { display: flex; flex-direction: column; }
.yj-cw .yj-cw-info::backdrop { background: var(--yj-overlay); }
.yj-cw .yj-cw-info__head { display: flex; align-items: center; gap: var(--yj-s2); padding: var(--yj-s3) var(--yj-s3) var(--yj-s3) var(--yj-s4); border-bottom: 1px solid var(--yj-line); }
.yj-cw .yj-cw-info__head h2 { font-size: 17px; font-weight: 800; margin: 0 auto 0 0; color: var(--yj-ink-deep); }
.yj-cw .yj-cw-info__close {
  width: 40px; height: 40px; border: 0; border-radius: var(--yj-r-full); background: transparent; color: var(--yj-sub);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.yj-cw .yj-cw-info__close:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
.yj-cw .yj-cw-info__body { padding: var(--yj-s4); overflow-y: auto; }
.yj-cw .yj-cw-info .info-lead {
  background: var(--yj-yuja-50); border-left: 2px solid var(--yj-yuja-500); border-radius: var(--yj-r-lg);
  padding: var(--yj-s3); font-size: 13px; line-height: 1.7; color: var(--yj-ink); margin: 0;
}
.yj-cw .yj-cw-info h3 { font-size: 13px; font-weight: 800; color: var(--yj-yuja-ink); margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--yj-line); }
.yj-cw .yj-cw-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; }
.yj-cw .yj-cw-info dt {
  font-size: 12px; font-weight: 800; color: var(--yj-ink-deep); background: var(--yj-yuja-100);
  border-radius: var(--yj-r-full); padding: 3px 10px; white-space: nowrap; align-self: start; text-align: center;
}
.yj-cw .yj-cw-info dd { font-size: 13px; line-height: 1.6; color: var(--yj-sub); margin: 0; }
.yj-cw .yj-cw-info b { color: var(--yj-ink-deep); }