/* ============================================================
   되받쓰 — 디자인 규격 적응 층 (2026-10-13 v3 시범 → 2026-10-14 v4 「햇살 든 유자」)
   파일 이름은 링크가 걸려 있어 v3.css 그대로 둔다. 맨 끝 'v4 층'이 앞의 규칙을 덮는다.

   정본: YUJA-DESIGN.md (프로젝트 루트 왕관유자_디자인시스템_v4.md)
   공용 CSS: https://crownyuja.co.kr/ds/v3/yuja.css + themes/dictation.css

   원칙: 가산 전용. 기존 class·id·스크립트는 건드리지 않고, 각 페이지
         <head> 맨 끝에서 이 파일이 기존 규칙을 덮는다(같은 특이도면 나중 규칙이 이긴다).
         스크립트가 style 속성으로 박는 색만 !important 로 덮는다.
   값:   색·모서리·움직임은 ds/v2 토큰만. 여기에 HEX 를 새로 적지 않는다.
   색의 일: 누를 것은 레몬(화면당 하나), 고른 것은 먹, 이룬 것은 잎.
   ============================================================ */

/* ── 바탕 ─────────────────────────────────────────────── */
body {
    font-family: var(--yj-font-ui);
    background-color: var(--yj-paper);
    color: var(--yj-ink);
}

/* ── 메뉴바 (PC 상단 · 휴대폰 하단) — 종이 · 1px 선 · 그림자 없음 ── */
.header-fixed {
    background-color: var(--yj-paper);
    border-bottom: 1px solid var(--yj-line);
    box-shadow: none;
    height: 56px;
}
.nav-link {
    position: relative;
    min-height: 44px;
    color: var(--yj-sub);
    font-weight: 600;
    border-radius: var(--yj-r-sm);
    transition: color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease);
}
.nav-link:hover { background-color: transparent; color: var(--yj-ink-deep); }
.nav-link.active,
.nav-link.active:hover { color: var(--yj-ink-deep); font-weight: 800; }
/* 고른 곳 = 먹 글자 + 아래(휴대폰은 위) 2px 레몬 표식 하나 */
.nav-link.active::before {
    content: "";
    position: absolute;
    left: 50%; bottom: 2px;
    width: 24px; height: 2px;
    margin-left: -12px;
    background: var(--yj-amber);
}
.nav-link svg { color: currentColor; stroke: currentColor; }
.nav-link svg path { stroke-width: 1.6; }
.header-fixed nav > div { background-color: var(--yj-line-strong) !important; }
.tooltip-container::after {
    background-color: var(--yj-forest);
    color: var(--yj-on-forest);
    border-radius: var(--yj-r-xs);
}

@media screen and (max-width: 768px) {
    /* 도크는 화면 맨 아래에 붙인다. 안전영역 보정을 더하지 않는다
       (2026-10-13 작가 확인: 앱·일부 기기에서 도크 아래 빈 여백이 생겼다) */
    .header-fixed {
        border-bottom: 0;
        border-top: 1px solid var(--yj-line);
        box-shadow: none;
        height: 56px;
        padding-bottom: 0;
    }
    .nav-link.active::before { top: -6px; bottom: auto; }
    .tooltip-container::after { display: none; }
    body:has(.header-fixed) { padding-bottom: 64px; }
    body[data-nav="dual"] { padding-bottom: 112px; }
    body[data-nav="dual"] .sub-header-fixed { bottom: 56px; }
    body[data-nav="dual"] .rule-filter-bar { bottom: 104px; }
}

/* ── 공통 부품 ───────────────────────────────────────── */
.modal-overlay {
    background: var(--yj-overlay);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.modal-box,
.modal-content {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    box-shadow: var(--yj-sh-modal);
}
input[type="checkbox"] { accent-color: var(--yj-ink-deep); }

/* ============================================================
   급수 (test.html)
   ============================================================ */
.pill-group {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line-strong);
}
.grade-btn-active,
.sem-btn-active {
    background: var(--yj-ink-deep);
    color: var(--yj-on-ink);
}
.level-btn-active {
    background: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    box-shadow: none;
}
.level-btn-inactive {
    background: var(--yj-paper);
    color: var(--yj-sub);
    border: 1px solid var(--yj-line-strong);
}
.level-btn-inactive:hover { border-color: var(--yj-ink-deep); color: var(--yj-ink-deep); }
#content-container {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    box-shadow: none;
}
/* 인쇄·공유 — 떠 있지 않은 평면 아이콘 버튼 */
#btn-share,
#btn-print {
    background: var(--yj-paper);
    color: var(--yj-sub);
    border: 1px solid var(--yj-line-strong);
    transition: color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease);
}
#btn-share:hover,
#btn-print:hover { filter: none; color: var(--yj-ink-deep); border-color: var(--yj-ink-deep); }
#btn-share i, #btn-share svg,
#btn-print i, #btn-print svg { stroke: currentColor; stroke-width: 1.6; }
.question-item {
    background: var(--yj-paper);
    border: 0;
    border-bottom: 1px solid var(--yj-line);
    border-radius: 0;
}
.num-badge {
    background: var(--yj-paper-sub);
    color: var(--yj-ink-deep);
    font-variant-numeric: tabular-nums;
}
.audio-btn {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line-strong);
    color: var(--yj-sub);
    transition: color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease);
}
.audio-btn:hover { background: var(--yj-paper); color: var(--yj-ink-deep); border-color: var(--yj-ink-deep); }
.audio-btn svg { stroke-width: 1.6; }
.phonetic-text { color: var(--yj-sub); }
/* 화면에서 단 하나 — 학습 시작 */
.study-item-btn {
    background: var(--yj-amber);
    color: var(--yj-on-action);
    border: 0;
    box-shadow: none;
    height: 52px;
    padding: 0 28px;
    font-weight: 700;
    transition: background-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
.study-item-btn:hover { background: var(--yj-amber-press); box-shadow: none; transform: none; }
.study-item-btn:active { transform: scale(.97); }
.vocab-highlight {
    background-image: linear-gradient(transparent 60%, var(--yj-amber-tint) 60%);
}
.vocab-highlight:hover { background-image: linear-gradient(transparent 60%, var(--yj-amber-tint-press) 60%); }
/* 학년 고르기(휴대폰 드롭다운) · 학기 스위치 — 스크립트가 style 로 칠하는 색을 덮는다 */
#mobile-grade-low,
#mobile-grade-high {
    border-color: var(--yj-line-strong) !important;
    box-shadow: none !important;
}
/* 스크립트가 '고른 상태'에 붙이는 Tailwind 임의값 클래스(숲 바탕 + 레몬 글자)를 먹 반전으로 */
.bg-\[\#142814\] { background-color: var(--yj-ink-deep) !important; }
.border-\[\#142814\] { border-color: var(--yj-ink-deep) !important; }
.bg-\[\#142814\].text-\[\#FFE135\],
.bg-\[\#142814\] .text-\[\#FFE135\] { color: var(--yj-on-ink) !important; }
#mobile-arrow-low[stroke="#FFE135"],
#mobile-arrow-high[stroke="#FFE135"] { stroke: var(--yj-on-ink); }
.sem-switch-container { background-color: var(--yj-ink-deep) !important; }

/* ============================================================
   목차 (list.html)
   ============================================================ */
.sub-header-fixed {
    background-color: var(--yj-paper);
    border-bottom: 1px solid var(--yj-line);
}
@media screen and (max-width: 768px) {
    body[data-nav="dual"] .sub-header-fixed { border-top: 1px solid var(--yj-line); border-bottom: 0; }
    body[data-nav="dual"] .rule-filter-bar { border-top: 1px solid var(--yj-line); }
}
.tab-btn {
    color: var(--yj-sub);
    border: 1px solid transparent;
    transition: color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease);
}
.tab-btn:hover { background-color: transparent; color: var(--yj-ink-deep); }
.tab-btn.active {
    background-color: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    box-shadow: none;
}
.action-group,
.sem-toggle-wrapper {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line-strong);
}
.sem-toggle-btn { color: var(--yj-sub); }
.sem-toggle-btn.active {
    background: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    box-shadow: none;
}
/* Go(퀴즈로) = 레몬 하나, 목록 아이콘 = 평면 */
.sub-icon-btn { width: 32px; height: 32px; transition: transform var(--yj-m-mid) var(--yj-ease); }
.sub-icon-btn:hover { transform: none; }
.sub-icon-btn:active { transform: scale(.97); }
.sub-icon-btn.btn-quiz { background-color: var(--yj-amber); color: var(--yj-on-action); box-shadow: none; }
.sub-icon-btn.btn-list { background-color: var(--yj-paper-sub); color: var(--yj-ink-deep); box-shadow: none; }
.rule-filter-bar {
    background: var(--yj-paper);
    border-bottom: 1px solid var(--yj-line);
}
.rule-filter-row + .rule-filter-row {
    border-top: 1px solid var(--yj-line);
    background: var(--yj-paper-sub);
}
.rule-chip {
    height: 32px;
    border: 1px solid var(--yj-line-strong);
    background: var(--yj-paper);
    color: var(--yj-sub);
    font-weight: 600;
    transition: color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease);
}
.rule-chip:hover { background: var(--yj-paper); color: var(--yj-ink-deep); border-color: var(--yj-ink-deep); }
.rule-chip.selected,
.rule-chip.all-chip.selected {
    background: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    border-color: var(--yj-ink-deep);
    box-shadow: none;
}
.rule-result-info {
    background: var(--yj-leaf-tint);
    border: 0;
    border-radius: var(--yj-r-sm);
    color: var(--yj-leaf-ink);
}
.rule-empty-state { color: var(--yj-sub); }
.rule-tag {
    background: transparent;
    color: var(--yj-sub);
    border: 1px solid var(--yj-line-strong);
    font-weight: 600;
}
/* 학년 묶음 — 진초록 띠 대신 종이 + 1px 선, 제목은 먹 */
details.grade-section {
    margin-bottom: 8px;
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    background-color: var(--yj-paper);
    box-shadow: none;
}
details.grade-section > summary {
    min-height: 52px;
    background-color: var(--yj-paper);
    color: var(--yj-ink-deep);
    font-size: 1rem;
    transition: background-color var(--yj-m-fast) var(--yj-ease);
}
details.grade-section > summary:hover { background-color: var(--yj-paper-sub); }
details.grade-section[open] > summary { border-bottom: 1px solid var(--yj-line); }
details.grade-section > summary svg { color: var(--yj-sub); stroke: currentColor; }
details.chapter-section {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--yj-line);
    border-radius: 0;
}
details.chapter-section > summary {
    min-height: 44px;
    color: var(--yj-ink-deep);
    background-color: var(--yj-paper);
    border-radius: 0;
}
details.chapter-section > summary:hover { background-color: var(--yj-paper-sub); }
.content-table th {
    background-color: var(--yj-paper-sub);
    border-bottom: 1px solid var(--yj-line);
    color: var(--yj-sub);
}
.content-table td { border-bottom: 1px solid var(--yj-line); }
.content-table tbody tr:hover { background-color: var(--yj-paper-sub); }
.text-part { color: var(--yj-ink); }
.text-part:hover { color: var(--yj-ink-deep); text-decoration: underline; text-underline-offset: 3px; }
.play-btn {
    width: 28px; height: 28px;
    background: var(--yj-paper);
    border: 1px solid var(--yj-line-strong);
    color: var(--yj-sub);
    transition: color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease);
}
.play-btn:hover { background: var(--yj-paper); color: var(--yj-ink-deep); border-color: var(--yj-ink-deep); transform: none; }
.empty-cell { color: var(--yj-sub); }
.modal-textarea {
    border: 1px solid var(--yj-line-strong);
    border-radius: var(--yj-r-xs);
    color: var(--yj-ink-deep);
    font-size: 17px;
}
.modal-textarea:focus { border: 1px solid var(--yj-ink-deep); box-shadow: 0 0 0 1px var(--yj-ink-deep); }
.action-btn { height: 44px; padding: 0 20px; border-radius: var(--yj-r-sm); }
.action-btn:active { transform: scale(.97); }
.btn-home { background-color: transparent; color: var(--yj-sub); }
.btn-home:hover { background-color: transparent; color: var(--yj-ink-deep); }

/* ============================================================
   퀴즈 설정 (quiz.html)
   ============================================================ */
.step-badge {
    background-color: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    font-variant-numeric: tabular-nums;
}
.radio-pill-display {
    min-height: 40px;
    border: 1px solid var(--yj-line-strong);
    background: var(--yj-paper);
    color: var(--yj-sub);
    transition: color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease);
}
.radio-pill-display:hover { border-color: var(--yj-ink-deep); color: var(--yj-ink-deep); }
.radio-pill input[type="radio"]:checked + .radio-pill-display {
    background: var(--yj-ink-deep);
    border-color: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    box-shadow: none;
}
#qCountType-custom:checked + #custom-input-wrapper {
    border-color: var(--yj-ink-deep) !important;
    box-shadow: none;
}
/* 화면에서 단 하나 — 퀴즈 시작 */
#start-btn {
    height: 52px;
    background: var(--yj-amber);
    color: var(--yj-on-action);
    box-shadow: none;
    font-weight: 700;
    transition: background-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
#start-btn:hover { background: var(--yj-amber-press); }
#start-btn:active { transform: scale(.97); }
#custom-count-input,
#custom-count-input::placeholder { color: var(--yj-sub) !important; }
#error-box {
    background: var(--yj-error-tint);
    border: 0;
    color: var(--yj-error-ink);
    border-radius: var(--yj-r-sm);
}
.custom-select {
    min-height: 48px;
    background-color: var(--yj-paper);
    border: 1px solid var(--yj-line-strong);
    border-radius: var(--yj-r-xs);
    color: var(--yj-ink-deep);
    font-weight: 600;
    box-shadow: none;
}
.custom-select:focus { border-color: var(--yj-ink-deep); box-shadow: 0 0 0 1px var(--yj-ink-deep); }

/* ============================================================
   규칙 사전 (rules.html)
   ============================================================ */
.page-hero h1 { color: var(--yj-ink-deep); font-family: var(--yj-font-disp); }
.page-hero p { color: var(--yj-sub); }
.teacher-guide-btn {
    min-height: 44px;
    background-color: var(--yj-amber-tint);
    color: var(--yj-amber-ink);
    font-weight: 700;
    border-radius: var(--yj-r-sm);
    box-shadow: none;
    transition: background-color var(--yj-m-fast) var(--yj-ease);
}
.teacher-guide-btn:hover { background-color: var(--yj-amber-tint-press); transform: none; box-shadow: none; }
.part-badge {
    background-color: transparent;
    color: var(--yj-amber-ink);
    border: 0;
    padding: 0 10px 0 0;
    font-size: 12px;
    letter-spacing: .04em;
}
.section-heading {
    color: var(--yj-ink-deep);
    border-bottom: 1px solid var(--yj-ink-deep);
}
.rule-card {
    background-color: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    box-shadow: none;
    transition: border-color var(--yj-m-fast) var(--yj-ease);
}
.rule-card:hover { transform: none; box-shadow: none; border-color: var(--yj-ink-deep); }
.rule-badge {
    background-color: transparent;
    color: var(--yj-amber-ink);
    padding: 0;
    font-size: 12px;
    letter-spacing: .04em;
}
.rule-card h3 { color: var(--yj-ink-deep); }
.rule-card:hover h3 { color: var(--yj-ink-deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rule-card p { color: var(--yj-sub); }

/* ============================================================
   받아쓰기 (play.html)
   ============================================================ */
#progress-indicator { color: var(--yj-ink-deep); font-family: var(--yj-font-disp); }
#problem-list-container {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    box-shadow: none;
}
.problem-list-item {
    background-color: var(--yj-paper-sub);
    border-color: var(--yj-line);
}
/* 맞음 = 잎, 틀림 = 오류색 (파랑·분홍 대신) */
.problem-list-item.ans-correct {
    background-color: var(--yj-leaf-tint) !important;
    border-color: var(--yj-leaf) !important;
}
.problem-list-item.ans-wrong {
    background-color: var(--yj-error-tint) !important;
    border-color: var(--yj-error) !important;
}
.problem-list-item.current {
    background-color: var(--yj-ink-deep);
    border-color: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    box-shadow: none;
}
#answer-input {
    border: 1px solid var(--yj-line-strong);
    border-radius: var(--yj-r-xs);
    background: var(--yj-paper);
    color: var(--yj-ink-deep);
}
#answer-input:focus {
    border: 1px solid var(--yj-orange);
    box-shadow: 0 0 0 1px var(--yj-orange);
}
/* 화면에서 단 하나 — 제출 */
#submit-btn {
    background-color: var(--yj-amber);
    color: var(--yj-on-action);
    border-radius: var(--yj-r-full);
    font-weight: 700;
}
#submit-btn:hover { background-color: var(--yj-amber-press); }
#submit-btn:active { transform: scale(.97); }
#feedback-area.correct { color: var(--yj-leaf-ink); }
#feedback-area.incorrect { color: var(--yj-error-ink); }
.diff-char-red { color: var(--yj-error-ink); }
.diff-char-black { color: var(--yj-ink-deep); }
.hint-display {
    background-color: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    box-shadow: none;
}
.hint-label-box {
    background-color: var(--yj-paper-sub);
    color: var(--yj-ink-deep);
    border-right: 1px solid var(--yj-line);
}
#hint-display-answer { background-color: var(--yj-paper); }
#hint-display-answer .hint-label-box {
    background-color: var(--yj-amber-tint);
    color: var(--yj-amber-ink);
    border-right: 1px solid var(--yj-line);
}
#hint-container button {
    background-color: var(--yj-paper);
    border: 1px solid var(--yj-line-strong);
    color: var(--yj-ink);
    border-radius: var(--yj-r-sm);
}
#hint-container button:hover:not(.hint-active) { background-color: var(--yj-paper-sub); }
#hint-container button.hint-active {
    border: 1px solid var(--yj-ink-deep);
    background-color: var(--yj-ink-deep);
    color: var(--yj-on-ink);
}
#hint-container button:not(.hint-active) {
    background-color: var(--yj-paper) !important;
    border-color: var(--yj-line-strong) !important;
}
#play-slow,
#prev-q-btn-bottom,
#next-q-btn-bottom {
    background-color: var(--yj-paper);
    border: 1px solid var(--yj-line-strong);
    color: var(--yj-ink);
    border-radius: var(--yj-r-sm);
}
#prev-q-btn-bottom:hover,
#next-q-btn-bottom:hover { background-color: var(--yj-paper-sub); }
#prev-q-btn-bottom:disabled,
#next-q-btn-bottom:disabled { background-color: var(--yj-paper); color: var(--yj-faint); opacity: .4; }
#play-slow.turtle-active {
    background-color: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    border-color: var(--yj-ink-deep);
}
.count-btn-inactive {
    background-color: var(--yj-paper) !important;
    border: 1px solid var(--yj-line-strong) !important;
    color: var(--yj-sub) !important;
}
.count-btn-active {
    background-color: var(--yj-ink-deep) !important;
    color: var(--yj-on-ink) !important;
    border-color: var(--yj-ink-deep) !important;
    transform: none !important;
}
#play-btn-submit-row {
    background-color: var(--yj-paper);
    color: var(--yj-ink-deep);
    border: 1px solid var(--yj-line-strong);
    border-radius: var(--yj-r-sm);
}
#play-btn-submit-row.playing {
    background-color: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    border-color: var(--yj-ink-deep);
}
#stop-btn-submit-row {
    background-color: var(--yj-error-tint);
    color: var(--yj-error-ink);
    border: 0;
    border-radius: var(--yj-r-sm);
}
#stop-btn-submit-row:hover { background-color: var(--yj-error-tint); border-color: transparent; }
#stop-btn-submit-row:active { background-color: var(--yj-error); color: var(--yj-on-danger); transform: scale(.97); }
#play-all {
    background-color: var(--yj-paper);
    color: var(--yj-ink-deep);
    border: 1px solid var(--yj-line-strong);
    border-radius: var(--yj-r-sm);
}
#play-all:hover { background-color: var(--yj-paper-sub); }
#play-all.play-all-active {
    background-color: var(--yj-error-tint);
    color: var(--yj-error-ink);
    border-color: transparent;
}
#back-link { color: var(--yj-sub); }
#back-link:hover { color: var(--yj-ink-deep); }
.modal-content { border: 1px solid var(--yj-line); }
/* 정답 모달 — 통통 튀는 애니메이션 대신 고요한 등장 (움직임 3종 밖) */
#modal-content .animate-bounce { animation: none; }
#modal-close-btn, #modal-next-btn { min-height: 48px; border-radius: var(--yj-r-full); }
#modal-close-btn { border-radius: var(--yj-r-sm); }
.rule-hint-btn.active {
    background-color: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    border-color: var(--yj-ink-deep);
}
.stage2-trigger-btn {
    background-color: var(--yj-paper);
    color: var(--yj-ink);
    border: 1px dashed var(--yj-line-strong);
    border-radius: var(--yj-r-sm);
}
.stage2-trigger-btn:hover { background-color: var(--yj-paper-sub); border-color: var(--yj-ink-deep); }
hr { border-color: var(--yj-line); }

/* ============================================================
   비법 상세 14장 (rules/rule00~13.html · rules/style.css 위에)
   슬라이드 수업 — 카드 종류 구분은 남기되 유자 색으로만 (파랑·보라·청록 제거)
   ============================================================ */
.rule-page-wrap .rule-hero {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
}
.rule-page-wrap .rule-hero::before { content: none; }
.rule-page-wrap .rule-hero h1 { color: var(--yj-ink-deep); font-family: var(--yj-font-disp); }
.rule-page-wrap .rule-hero .rule-sub { color: var(--yj-sub); }
.rule-page-wrap .rule-hero .rule-chip {
    height: auto;
    background: transparent;
    border: 0;
    color: var(--yj-amber-ink);
    padding: 0;
    font-size: 12px;
    font-weight: 700;
}
.rule-page-wrap .stage-chip {
    background: transparent;
    border: 1px solid var(--yj-line-strong);
    color: var(--yj-sub);
}
.rule-page-wrap .trap-icon { opacity: .9; }
.rule-page-wrap .fullscreen-btn {
    background: var(--yj-paper);
    color: var(--yj-sub);
    border: 1px solid var(--yj-line-strong);
    border-radius: var(--yj-r-full);
    min-height: 36px;
}
.rule-page-wrap .fullscreen-btn:hover { background: var(--yj-paper); color: var(--yj-ink-deep); border-color: var(--yj-ink-deep); }
.back-link { color: var(--yj-sub); min-height: 44px; }
.back-link:hover { color: var(--yj-ink-deep); }

.rule-page-wrap .slide-progress-bar { background: var(--yj-line); border-radius: var(--yj-r-full); }
.rule-page-wrap .slide-progress-fill { background: var(--yj-grad); border-radius: var(--yj-r-full); }
.rule-page-wrap .slide-counter-text { color: var(--yj-sub); font-variant-numeric: tabular-nums; }
.rule-page-wrap .slide-dot { background: var(--yj-line-strong); }
.rule-page-wrap .slide-dot.active { background: var(--yj-ink-deep); transform: none; }
.rule-page-wrap .slides-viewport { border-radius: var(--yj-r-lg); }

.rule-page-wrap .card {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    box-shadow: none;
}
/* 카드 종류 = 위쪽 2px 선의 색 + 제목 글자색 */
.rule-page-wrap .card--intro     { border-top: 2px solid var(--yj-ink-deep); }
.rule-page-wrap .card--rule      { border-top: 2px solid var(--yj-amber); }
.rule-page-wrap .card--examples  { border-top: 2px solid var(--yj-leaf); }
.rule-page-wrap .card--trap      { border-top: 2px solid var(--yj-error); }
.rule-page-wrap .card--practice1,
.rule-page-wrap .card--practice2 { border-top: 2px solid var(--yj-orange); }
.rule-page-wrap .card-title { color: var(--yj-ink-deep); }
.rule-page-wrap .card--intro .card-title     { color: var(--yj-ink-deep); }
.rule-page-wrap .card--rule .card-title      { color: var(--yj-amber-ink); }
.rule-page-wrap .card--examples .card-title  { color: var(--yj-leaf-ink); }
.rule-page-wrap .card--trap .card-title      { color: var(--yj-error-ink); }
.rule-page-wrap .card--practice1 .card-title,
.rule-page-wrap .card--practice2 .card-title { color: var(--yj-orange-ink); }
.rule-page-wrap .card-body { color: var(--yj-ink); }
/* 마지막 정리 카드 — 숲 위 흰 글자 + 레몬 제목 (v3 의 가장 화려한 장면, 화면에 하나) */
.rule-page-wrap .card--summary { background: var(--yj-forest); border: 0; color: var(--yj-on-forest); }
.rule-page-wrap .card--summary .card-title { color: var(--yj-amber); }
.rule-page-wrap .card--summary .card-body { color: var(--yj-on-forest); }
.rule-page-wrap .card--summary .key-point { background: rgba(255, 255, 255, .10); border: 0; color: var(--yj-on-forest); }
.rule-page-wrap .card--summary .key-point strong { color: var(--yj-amber); }

.rule-page-wrap .kw-sound,
.rule-page-wrap .kw-trap  { color: var(--yj-error-ink); }
.rule-page-wrap .kw-write { color: var(--yj-leaf-ink); }
.rule-page-wrap .kw-rule  { background: linear-gradient(to top, var(--yj-amber-tint-press) 50%, transparent 50%); }
.rule-page-wrap .key-point {
    background: var(--yj-amber-tint);
    border: 0;
    border-radius: var(--yj-r-lg);
}
.rule-page-wrap .key-point strong { color: var(--yj-amber-ink); }
.rule-page-wrap .example-item {
    background: var(--yj-leaf-tint);
    border: 0;
    border-radius: var(--yj-r-sm);
}
.rule-page-wrap .example-item .ex-from,
.rule-page-wrap .example-item .ex-tip { color: var(--yj-sub); }
.rule-page-wrap .example-item .ex-arrow { color: var(--yj-leaf-ink); }
.rule-page-wrap .example-item .ex-to { color: var(--yj-error-ink); }
.rule-page-wrap .practice-desc {
    color: var(--yj-sub);
    background: var(--yj-paper-sub);
    border: 0;
    border-radius: var(--yj-r-sm);
}
.rule-page-wrap .practice-item {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-sm);
}
.rule-page-wrap .practice-num,
.rule-page-wrap .card--practice2 .practice-num {
    background: var(--yj-ink-deep);
    color: var(--yj-on-ink);
    font-variant-numeric: tabular-nums;
}
.rule-page-wrap .answer-box {
    background: var(--yj-paper-sub);
    border: 1px dashed var(--yj-line-strong);
    border-radius: var(--yj-r-xs);
}
.rule-page-wrap .answer-box:hover { background: var(--yj-amber-tint); border-color: var(--yj-amber); }
.rule-page-wrap .answer-box.revealed {
    background: var(--yj-amber-tint);
    border-color: var(--yj-amber);
    color: var(--yj-amber-ink);
}
.rule-page-wrap .trap-box {
    background: var(--yj-error-tint);
    border: 0;
    border-radius: var(--yj-r-lg);
    color: var(--yj-ink);
}
.rule-page-wrap .trap-box strong { color: var(--yj-error-ink); }
.rule-page-wrap .trap-example {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-sm);
    color: var(--yj-error-ink);
}
.rule-page-wrap .slide-btn { min-height: 48px; transition: background-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease); }
.rule-page-wrap .slide-btn--prev {
    background: transparent;
    border: 0;
    color: var(--yj-sub);
}
.rule-page-wrap .slide-btn--prev:hover { background: transparent; color: var(--yj-ink-deep); }
/* 화면에서 단 하나 — 다음 */
.rule-page-wrap .slide-btn--next,
.rule-page-wrap .slide-btn--next.finish {
    background: var(--yj-amber);
    color: var(--yj-on-action);
    box-shadow: none;
}
.rule-page-wrap .slide-btn--next:hover { background: var(--yj-amber-press); transform: none; }
.rule-page-wrap .slide-btn--next:active { transform: scale(.97); }
@media (min-width: 800px) {
    .rule-page-wrap .card { border-radius: var(--yj-r-lg); box-shadow: none; }
    .rule-page-wrap .rule-hero { border-radius: var(--yj-r-lg); }
}
@media (max-width: 799px) {
    .rule-page-wrap .rule-hero-meta { padding-right: 0; }
    .rule-page-wrap .rule-hero { padding-right: 72px; }
}

/* ============================================================
   활용법 (howtosue/index.html · howtosue/letter.html · howtosue/style.css 위에)
   어른이 읽는 안내 글 — 읽기 지면 쪽에 가깝게: 종이 · 1px 선 · 넉넉한 줄 간격.
   본문 이모지는 그대로 둔다(2026-10-13 작가 결정: 되받쓰 한정 유지).
   A4 가정통신문 미리보기(#a4-preview 안)는 인쇄물이라 손대지 않는다.
   ============================================================ */
body[data-page="index"],
body[data-page="letter"] {
    --page-bg: var(--yj-paper);
    --card-bg: var(--yj-paper);
    --hairline: var(--yj-line);
    --hairline-strong: var(--yj-line-strong);
    --surface: var(--yj-paper-sub);
    --slate: var(--yj-sub);
    --charcoal: var(--yj-ink);
    --ink: var(--yj-ink-deep);
    --r: 12px;
}
body[data-page] .sub-header-fixed { background-color: var(--yj-paper); border-bottom: 1px solid var(--yj-line); }
body[data-page] .subnav-link {
    min-height: 36px;
    color: var(--yj-sub);
    transition: color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease);
}
body[data-page] .subnav-link:hover { background: transparent; color: var(--yj-ink-deep); }
body[data-page] .subnav-link.active { background: var(--yj-ink-deep); color: var(--yj-on-ink); box-shadow: none; }
body[data-page] .nav-sep { background: var(--yj-line-strong); }
body[data-page] .teacher-subnav {
    background: var(--yj-paper);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
}
body[data-page] .t-nav-btn {
    min-height: 40px;
    color: var(--yj-ink);
    background: var(--yj-paper);
    border: 1px solid var(--yj-line-strong);
    transition: color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease);
}
body[data-page] .t-nav-btn:hover { background: var(--yj-paper); color: var(--yj-ink-deep); border-color: var(--yj-ink-deep); }
body[data-page] .hero h1,
body[data-page] .gate-title { font-family: var(--yj-font-disp); color: var(--yj-ink-deep); }
body[data-page] .section-title { color: var(--yj-ink-deep); padding-bottom: 10px; border-bottom: 1px solid var(--yj-ink-deep); }
body[data-page] .intro-card { line-height: 1.9; color: var(--yj-ink); }
body[data-page] .intro-card.card-cream { background: var(--yj-paper-sub); }
body[data-page] .intro-card.card-mint  { background: var(--yj-amber-tint); }
body[data-page] .intro-card .quote-strong { border-left: 2px solid var(--yj-ink-deep); }
body[data-page] .trap-mark { color: var(--yj-error-ink); }
body[data-page] .data-table thead th {
    background: var(--yj-paper-sub);
    color: var(--yj-ink-deep);
    border-bottom: 1px solid var(--yj-ink-deep);
}
body[data-page] .data-table tbody tr:hover { background: var(--yj-paper-sub); }
body[data-page] .stage-num { background: var(--yj-ink-deep); color: var(--yj-on-ink); }
body[data-page] .stage-func { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); border-radius: var(--yj-r-xs); }
/* 체험 카드 — 숲 바탕은 이 화면의 유일한 짙은 띠로 남긴다 */
body[data-page] .demo-card { background: var(--yj-forest); border-radius: var(--yj-r-lg); }
body[data-page] .demo-audio-btn,
body[data-page] .demo-action-btn { min-height: 44px; transition: background-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease); }
body[data-page] .demo-audio-btn:active,
body[data-page] .demo-action-btn:active:not(:disabled) { transform: scale(.97); }
body[data-page] .demo-audio-btn.play { background: var(--yj-amber); color: var(--yj-on-action); }
body[data-page] .demo-audio-btn.play:hover { background: var(--yj-amber-press); }
body[data-page] .demo-audio-btn.slow.active { background: var(--yj-on-forest); border-color: var(--yj-on-forest); color: var(--yj-forest); }
body[data-page] .demo-result a { color: var(--yj-amber); }
body[data-page] .role-btn {
    border: 1px solid var(--yj-line-strong);
    box-shadow: none;
    transition: border-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
body[data-page] .role-btn:hover { transform: none; border-color: var(--yj-ink-deep); box-shadow: none; }
body[data-page] .role-btn:active { transform: scale(.97); }
body[data-page] .role-picked-bar button { color: var(--yj-ink-deep); border-color: var(--yj-line-strong); min-height: 32px; }
body[data-page] .role-picked-bar button:hover { background: var(--yj-paper-sub); }
body[data-page] .content-card { border: 1px solid var(--yj-line); }
body[data-page] .content-card p { line-height: 1.85; }
/* 바로가기 링크 — 이어서 할 것(대등한 선택)이라 틴트 버튼 */
body[data-page] .cta-link,
body[data-page] .next-cta-row .cta-link,
body[data-page] .diag-goto-btn {
    min-height: 36px;
    background: var(--yj-amber-tint);
    color: var(--yj-amber-ink);
    border-radius: var(--yj-r-sm);
}
body[data-page] .cta-link:hover,
body[data-page] .next-cta-row .cta-link:hover,
body[data-page] .diag-goto-btn:hover { background: var(--yj-amber-tint-press); }
body[data-page] .checklist-item { transition: border-color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease); }
body[data-page] .checklist-item:hover { border-color: var(--yj-ink-deep); }
body[data-page] .checklist-item.done { background: var(--yj-leaf-tint); border-color: var(--yj-leaf); }
body[data-page] .checklist-item .check-box { border: 1px solid var(--yj-line-strong); }
body[data-page] .checklist-item.done .check-box { background: var(--yj-leaf-solid); border-color: var(--yj-leaf-solid); color: var(--yj-on-ink); transform: none; }
body[data-page] .checklist-progress-wrap { background: var(--yj-line); height: 8px; }
body[data-page] .checklist-progress-fill { background: var(--yj-leaf); }
body[data-page] .checklist-complete-banner { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); }
body[data-page] .checklist-complete-banner .cta-link { background: var(--yj-amber); color: var(--yj-on-action); }
body[data-page] .warn-card { background: var(--yj-error-tint); border: 0; }
body[data-page] .warn-card h4 { color: var(--yj-error-ink); }
body[data-page] .accordion-item summary { min-height: 52px; }
body[data-page] .accordion-item summary::before { color: var(--yj-sub); }
body[data-page] .accordion-item .accordion-body { line-height: 1.9; }
/* 가정통신문 만들기 — 입력 폼과 버튼 (A4 미리보기 안은 그대로) */
body[data-page] .form-field label { color: var(--yj-ink-deep); font-weight: 600; }
body[data-page] .form-field input[type="text"],
body[data-page] .form-field input[type="number"],
body[data-page] .form-field input[type="date"],
body[data-page] .form-field select {
    min-height: 44px;
    border: 1px solid var(--yj-line-strong);
    border-radius: var(--yj-r-xs);
    font-size: 17px;
    color: var(--yj-ink-deep);
}
body[data-page] .form-field input:focus,
body[data-page] .form-field select:focus { border-color: var(--yj-ink-deep); box-shadow: 0 0 0 1px var(--yj-ink-deep); }
body[data-page] .form-checkbox-row input { accent-color: var(--yj-ink-deep); }
body[data-page] .btn-action { min-height: 48px; transition: background-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease); }
body[data-page] .btn-action:active { transform: scale(.97); }
body[data-page] .btn-action.primary { background: var(--yj-amber); color: var(--yj-on-action); }
body[data-page] .btn-action.primary:hover { background: var(--yj-amber-press); }
body[data-page] .btn-action.secondary { background: var(--yj-paper); border: 1px solid var(--yj-line-strong); color: var(--yj-ink-deep); }
body[data-page] .btn-action.secondary:hover { background: var(--yj-paper); border-color: var(--yj-ink-deep); }
body[data-page] #a4-preview { box-shadow: none; border: 1px solid var(--yj-line-strong); }
body[data-page] #a4-preview:hover { box-shadow: var(--yj-sh-float); }
body[data-page] #letter-preview-modal { background: var(--yj-overlay); }
/* 푸터 — 종이 + 1px 선, 얇게 */
body[data-page] .site-footer {
    background: var(--yj-paper);
    border-top: 1px solid var(--yj-line);
    padding: 12px 20px;
    margin-top: 32px;
}
body[data-page] .site-footer p { color: var(--yj-sub); font-size: 12px; margin: 0; }

/* ============================================================
   도크(메뉴바) 단일 규격 — 모든 페이지가 같은 크기·같은 모습 (2026-10-13 작가 지시)
   마크업이 세 벌이다(메인 화면은 HTML 직접 · 활용법 howtosue/helper.js · 비법 상세 rules/helper.js).
   마크업은 건드리지 않고 여기서 하나로 맞춘다. 페이지마다 다른 값이 이기지 못하게 !important.
   높이 56 · 칸 5개(홈·급수·목차·퀴즈·비법) 균등 · 글자 15/600 · 홈 아이콘 22 선 1.6 · 구분선 없음
   ============================================================ */
.header-fixed {
    height: 56px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--yj-paper) !important;
    box-shadow: none !important;
}
.header-fixed > nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
}
.header-fixed > nav > div,
.header-fixed .nav-sep { display: none !important; }
.header-fixed .nav-link {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    color: var(--yj-sub) !important;
    background: transparent !important;
    border-radius: var(--yj-r-sm) !important;
}
.header-fixed .nav-link:hover { color: var(--yj-ink-deep) !important; }
.header-fixed .nav-link.active { color: var(--yj-ink-deep) !important; font-weight: 800 !important; }
.header-fixed .nav-link svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    color: currentColor !important;
}
.header-fixed .nav-link svg path { stroke-width: 1.6 !important; }
@media screen and (min-width: 769px) {
    .header-fixed { border-bottom: 1px solid var(--yj-line) !important; border-top: 0 !important; }
}
@media screen and (max-width: 768px) {
    .header-fixed {
        top: auto !important;
        bottom: 0 !important;
        border-top: 1px solid var(--yj-line) !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    /* 가정통신문은 nav-mobile.css 를 싣지 않아 위쪽 메뉴 자리 여백이 남는다 */
    body[data-page="letter"] { padding-top: 0 !important; padding-bottom: 64px !important; }
}

/* ============================================================
   비법 상세 — 교실 TV 슬라이드 규격 (2026-10-13 작가 지시)
   PC·TV(800px 이상)와 전체화면에서 PPT 처럼 쓴다. 교실 뒤에서 읽혀야 한다.
   · 화면 높이에 딱 맞춘다: 아무것도 잘리지 않게 카드 안에서만 넘치면 스크롤
   · 글자는 화면 높이(vh)에 비례 — 1080p TV 에서 본문 약 38px, 제목 약 58px
   · 머리는 얇은 띠로 줄이고 슬라이드에 화면을 내준다
   · rules/style.css 의 데스크톱·전체화면 값보다 우선하도록 html body 를 붙인다
   ============================================================ */
@media (min-width: 800px) {
    html body:has(.rule-page-wrap) {
        padding-top: 56px !important;
        height: 100dvh;
        overflow: hidden;
    }
    html body .rule-page-wrap {
        width: 100%;
        max-width: 1600px;
        height: calc(100dvh - 56px);
        padding: 1.2vh 2.5vw 1.6vh;
        display: flex;
        flex-direction: column;
        gap: 1.2vh;
        overflow: hidden;
    }
    html body .rule-page-wrap .back-link { min-height: 0; padding: 0; font-size: max(14px, 1.7vh); flex: none; }

    /* 머리 — 한 줄짜리 얇은 띠 */
    html body .rule-page-wrap .rule-hero {
        flex: none;
        margin: 0;
        padding: 1.2vh 2vw;
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "meta title icon btn" "meta sub icon btn";
        column-gap: 2vw;
        row-gap: .3vh;
        align-items: center;
    }
    html body .rule-page-wrap .rule-hero-meta { grid-area: meta; margin: 0; padding: 0; flex-direction: column; align-items: flex-start; gap: .6vh; }
    html body .rule-page-wrap .rule-hero h1 { grid-area: title; margin: 0; font-size: clamp(26px, 4.2vh, 56px); line-height: 1.15; align-self: end; }
    html body .rule-page-wrap .rule-hero .rule-sub { grid-area: sub; font-size: clamp(16px, 2.2vh, 28px); line-height: 1.4; align-self: start; }
    html body .rule-page-wrap .rule-hero .rule-chip { font-size: clamp(13px, 1.7vh, 20px); }
    html body .rule-page-wrap .stage-chip { font-size: clamp(12px, 1.6vh, 18px); padding: .3vh .8vw; }
    html body .rule-page-wrap .trap-icon { grid-area: icon; position: static; font-size: clamp(32px, 5vh, 64px); line-height: 1; opacity: 1; }
    html body .rule-page-wrap .fullscreen-btn { grid-area: btn; position: static; align-self: center; }

    /* 진도 · 쪽수 */
    html body .rule-page-wrap .slider-root { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: 1vh; }
    html body .rule-page-wrap .slide-progress-bar { flex: none; height: .7vh; min-height: 5px; margin: 0; }
    html body .rule-page-wrap .slide-counter { flex: none; margin: 0; }
    html body .rule-page-wrap .slide-counter-text { font-size: clamp(14px, 2vh, 24px); }
    html body .rule-page-wrap .slide-dot { width: 1.3vh; height: 1.3vh; min-width: 10px; min-height: 10px; }

    /* 슬라이드 — 남은 높이를 전부 쓰고, 넘치면 카드 안에서만 스크롤 */
    html body .rule-page-wrap .slides-viewport { flex: 1; min-height: 0; display: flex; }
    html body .rule-page-wrap .slides-track { flex: 1; height: 100%; }
    html body .rule-page-wrap .slide { height: 100%; }
    html body .rule-page-wrap .card {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        padding: 4vh 4.5vw;
        gap: 3vh;
        justify-content: flex-start;
        border-radius: var(--yj-r-lg);
    }
    html body .rule-page-wrap .card-header { flex: none; justify-content: flex-start; gap: 1.6vw; }
    html body .rule-page-wrap .card-icon { font-size: clamp(36px, 6vh, 80px); }
    html body .rule-page-wrap .card-title {
        flex: none;
        font-family: var(--yj-font-disp);
        font-size: clamp(30px, 5.4vh, 72px);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }
    /* 본문 — 가운데 몰아 크게, 한 줄 길이 제한 */
    html body .rule-page-wrap .card-body {
        flex: 1;
        justify-content: center;
        font-size: clamp(22px, 3.6vh, 48px);
        line-height: 1.55;
        font-weight: 500;
        max-width: 28em;
    }
    html body .rule-page-wrap .card-body p { margin: 0 0 1.6vh; }
    html body .rule-page-wrap .card-body p[style*="font-size"] { font-size: 1.3em !important; }
    html body .rule-page-wrap .card-body p[style*="0.88rem"] { font-size: .8em !important; color: var(--yj-sub) !important; }
    html body .rule-page-wrap .card-body strong[style*="font-size"] { font-size: 1.1em !important; }
    html body .rule-page-wrap .key-point {
        flex: none;
        font-size: clamp(18px, 3vh, 40px);
        line-height: 1.5;
        padding: 2.2vh 2.4vw;
    }
    html body .rule-page-wrap .key-point strong { font-size: .8em; margin-bottom: .8vh; }
    html body .rule-page-wrap .example-list { gap: 1.6vh; }
    html body .rule-page-wrap .example-item { font-size: clamp(22px, 3.8vh, 52px); padding: 1.6vh 2vw; gap: 1.4vw; }
    html body .rule-page-wrap .example-item .ex-tip { font-size: .6em; }
    html body .rule-page-wrap .practice-desc { font-size: clamp(16px, 2.6vh, 34px); padding: 1.4vh 1.6vw; margin-bottom: 1.6vh; }
    html body .rule-page-wrap .practice-list { gap: 1.4vh; }
    html body .rule-page-wrap .practice-item { font-size: clamp(22px, 3.6vh, 48px); padding: 1.4vh 2vw; gap: 1.4vw; }
    html body .rule-page-wrap .practice-num { width: 1.6em; height: 1.6em; font-size: .7em; }
    html body .rule-page-wrap .answer-box { font-size: 1em; min-width: 3.6em; padding: .1em .6em; }
    html body .rule-page-wrap .trap-box { font-size: clamp(20px, 3.2vh, 44px); line-height: 1.5; padding: 2.4vh 2.4vw; }
    html body .rule-page-wrap .trap-box strong { font-size: .8em; }
    html body .rule-page-wrap .trap-example { font-size: 1.15em; padding: 1.4vh 1.6vw; margin-top: 1.4vh; }
    html body .rule-page-wrap .trap-example small { display: block; font-size: .6em; color: var(--yj-sub); font-weight: 600; }

    /* 넘기기 버튼 — 크게, 둘 다 잘 보이게 */
    html body .rule-page-wrap .slide-nav { flex: none; margin: 0; gap: 2vw; }
    html body .rule-page-wrap .slide-btn {
        flex: 0 1 auto;
        max-width: none;
        min-width: 16vw;
        height: clamp(52px, 7vh, 84px);
        padding: 0 3vw;
        font-size: clamp(17px, 2.6vh, 32px);
        font-weight: 700;
        border-radius: var(--yj-r-full);
    }
}

/* 이전 — 어디서나 보이는 외곽선 버튼 (흰 바탕 · 먹 글자 · 1px 선) */
html body .rule-page-wrap .slide-btn--prev,
html body.is-fullscreen .rule-page-wrap .slide-btn--prev {
    background: var(--yj-paper) !important;
    border: 1px solid var(--yj-line-strong) !important;
    color: var(--yj-ink-deep) !important;
}
html body .rule-page-wrap .slide-btn--prev:hover:not(:disabled) { border-color: var(--yj-ink-deep) !important; }
html body .rule-page-wrap .slide-btn:disabled { opacity: .4 !important; }

/* 전체화면 — 밝은 교실에서 읽기 좋게 연회색 바탕 위 흰 카드 (거의 검정 바탕 제거) */
html body.is-fullscreen {
    background: var(--yj-paper-sub) !important;
    padding-top: 0 !important;
}
html body.is-fullscreen .rule-page-wrap {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 2vh 3vw 2.4vh !important;
}
html body.is-fullscreen .rule-page-wrap .card { background: var(--yj-paper); padding: 5vh 5vw; }
html body.is-fullscreen .rule-page-wrap .card--summary { background: var(--yj-forest); }
html body.is-fullscreen .rule-page-wrap .card-title { font-size: clamp(34px, 6.2vh, 88px); }
html body.is-fullscreen .rule-page-wrap .card-body { font-size: clamp(24px, 4.2vh, 60px); }
html body.is-fullscreen .rule-page-wrap .example-item,
html body.is-fullscreen .rule-page-wrap .practice-item { font-size: clamp(24px, 4.4vh, 62px); }
html body.is-fullscreen .rule-page-wrap .key-point,
html body.is-fullscreen .rule-page-wrap .trap-box { font-size: clamp(20px, 3.5vh, 50px); }
html body.is-fullscreen .fullscreen-btn {
    background: var(--yj-ink-deep) !important;
    color: var(--yj-on-ink) !important;
    box-shadow: var(--yj-sh-float) !important;
}
html body.is-fullscreen .fullscreen-btn svg { color: var(--yj-on-ink) !important; stroke-width: 2 !important; }
html body.is-fullscreen .fullscreen-btn:hover { background: var(--yj-ink) !important; transform: none !important; }

/* 슬라이드 배치 — 넓은 화면은 PPT 처럼 2단: 왼쪽 설명 · 오른쪽 핵심 상자, 예시·연습은 2×2 */
@media (min-width: 800px) {
    html body .rule-page-wrap .card {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 4vw;
        row-gap: 3vh;
        align-content: stretch;
    }
    html body .rule-page-wrap .card-header { grid-column: 1 / -1; }
    html body .rule-page-wrap .card-body { grid-column: 1; max-width: none; justify-content: center; }
    html body .rule-page-wrap .card > .key-point { grid-column: 2; grid-row: 2; align-self: center; }
    html body .rule-page-wrap .card:not(:has(> .key-point)) .card-body { grid-column: 1 / -1; }
    html body .rule-page-wrap .example-list,
    html body .rule-page-wrap .practice-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.8vh 2vw;
    }
    html body .rule-page-wrap .example-item { flex-wrap: wrap; row-gap: .4vh; }
    html body .rule-page-wrap .example-item .ex-tip { flex-basis: 100%; }
    html body .rule-page-wrap .slide-btn { height: clamp(48px, 6vh, 76px); }
    html body .rule-page-wrap .rule-hero { padding: 1vh 2vw; }
}

/* 여백 다듬기 — 긴 문단 슬라이드도 카드 안에 들어오게 (글자는 줄이지 않는다) */
@media (min-width: 800px) {
    html body .rule-page-wrap .card { padding: 3.4vh 4vw; row-gap: 2.4vh; }
    html body .rule-page-wrap .card-body p { margin-bottom: 1.2vh; }
    html body .rule-page-wrap .card-body [style*="4CAA48"] { color: var(--yj-leaf-ink) !important; }
    html body .rule-page-wrap .card-body strong[style*="D97706"] { color: var(--yj-amber-ink) !important; }
}
html body.is-fullscreen .rule-page-wrap .card { padding: 3.6vh 4.4vw; }
@media (min-width: 800px) {
    /* 문단이 많은 슬라이드(문단 3개 이상 + 핵심 상자)만 한 단계 작게 */
    html body .rule-page-wrap .card:has(> .key-point) .card-body:has(> p:nth-of-type(3)) { font-size: clamp(20px, 3.2vh, 44px); }
    html body.is-fullscreen .rule-page-wrap .card:has(> .key-point) .card-body:has(> p:nth-of-type(3)) { font-size: clamp(22px, 3.7vh, 52px); }
}

/* ============================================================
   규격 v4 「햇살 든 유자」 층 (2026-10-14) — 위의 v3 규칙을 덮는다
   공용 CSS 는 ds/v3. 두 겹 바탕(캔버스 + 미색 카드 그림자 1) ·
   누를 것 = 유자 300 · 고른 것 = 유자 200 + 600 테두리 · 지금 메뉴 = 유자 100 알약.
   토큰만 쓴다. 되받쓰 예외(이모지 유지·다크 끔)는 그대로.
   ============================================================ */

/* ── 바탕: 캔버스 ── */
body { background-color: var(--yj-canvas); }
body[data-page="index"], body[data-page="letter"] { --page-bg: var(--yj-canvas); }

/* ── 도크: 지금 칸은 유자 100 알약 (먹 글자) ── */
.header-fixed .nav-link.active {
    background: var(--yj-yuja-100) !important;
    color: var(--yj-ink-deep) !important;
    border-radius: var(--yj-r-full) !important;
}
.header-fixed .nav-link.active::before { content: none !important; }
.header-fixed .nav-link:hover:not(.active) { background: var(--yj-yuja-50) !important; border-radius: var(--yj-r-full) !important; }

/* ── 누를 것: 부드러운 유자 300, 누르면 원색 ── */
.study-item-btn,
#start-btn,
#submit-btn,
.rule-page-wrap .slide-btn--next,
.rule-page-wrap .slide-btn--next.finish,
body[data-page] .btn-action.primary,
body[data-page] .demo-audio-btn.play,
body[data-page] .checklist-complete-banner .cta-link,
.sub-icon-btn.btn-quiz { background: var(--yj-yuja-300); background-color: var(--yj-yuja-300); color: var(--yj-on-action); }
.study-item-btn:hover, #start-btn:hover, #submit-btn:hover,
.rule-page-wrap .slide-btn--next:hover,
body[data-page] .btn-action.primary:hover,
body[data-page] .demo-audio-btn.play:hover { background: var(--yj-yuja-500); background-color: var(--yj-yuja-500); }

/* ── 고른 것: 유자 200 면 + 유자 600 테두리 + 먹 글자 ── */
.grade-btn-active,
.sem-btn-active,
.level-btn-active,
.sem-toggle-btn.active,
.count-btn-active,
#hint-container button.hint-active,
#play-slow.turtle-active,
.rule-hint-btn.active,
.radio-pill input[type="radio"]:checked + .radio-pill-display {
    background: var(--yj-yuja-200) !important;
    background-color: var(--yj-yuja-200) !important;
    color: var(--yj-ink-deep) !important;
    border-color: var(--yj-yuja-600) !important;
    box-shadow: inset 0 0 0 1px var(--yj-yuja-600) !important;
}
#qCountType-custom:checked + #custom-input-wrapper { border-color: var(--yj-yuja-600) !important; }
/* 2차 메뉴(교과서·비법 / 학생·학부모·교사)는 지금 메뉴 — 유자 100 알약 */
.tab-btn.active,
body[data-page] .subnav-link.active { background: var(--yj-yuja-100); background-color: var(--yj-yuja-100); color: var(--yj-ink-deep); }
/* 필터 칩(비법 규칙 고르기) — 고른 칩은 유자 300 */
.rule-chip.selected,
.rule-chip.all-chip.selected { background: var(--yj-yuja-300); border-color: var(--yj-yuja-300); color: var(--yj-on-action); }
/* 학년 고르기(휴대폰 드롭다운): 스크립트가 붙이는 숲 바탕 클래스를 유자 200 으로 */
.bg-\[\#142814\] { background-color: var(--yj-yuja-200) !important; }
.border-\[\#142814\] { border-color: var(--yj-yuja-600) !important; }
.bg-\[\#142814\].text-\[\#FFE135\],
.bg-\[\#142814\] .text-\[\#FFE135\] { color: var(--yj-ink-deep) !important; }
#mobile-arrow-low[stroke="#FFE135"],
#mobile-arrow-high[stroke="#FFE135"] { stroke: var(--yj-ink-deep); }
/* 학기 스위치 — 유자 300 바탕 + 먹 글자 */
.sem-switch-container { background-color: var(--yj-yuja-300) !important; }
.sem-switch-container > span { color: var(--yj-ink-deep) !important; }
/* 지금 문제 · 번호 표식 */
.problem-list-item.current { background-color: var(--yj-yuja-300); border-color: var(--yj-yuja-600); color: var(--yj-on-action); }
.step-badge,
.rule-page-wrap .practice-num,
.rule-page-wrap .card--practice2 .practice-num,
body[data-page] .stage-num { background-color: var(--yj-yuja-300); background: var(--yj-yuja-300); color: var(--yj-on-action); }
.rule-page-wrap .slide-dot.active { background: var(--yj-yuja-500); }
.num-badge { background: var(--yj-yuja-100); color: var(--yj-ink-deep); }

/* ── 카드: 미색 + 1px 선 + 그림자 1 ── */
#content-container,
#problem-list-container,
.rule-card,
details.grade-section,
.hint-display,
.modal-box,
.modal-content,
.rule-page-wrap .card,
.rule-page-wrap .rule-hero,
body[data-page] .content-card,
body[data-page] .data-table-wrap,
body[data-page] .letter-form,
body[data-page] .checklist-item,
body[data-page] .accordion-item,
body[data-page] .role-btn,
body[data-page] .teacher-subnav {
    background-color: var(--yj-card);
    box-shadow: var(--yj-sh-1);
}
.modal-box, .modal-content { background-color: var(--yj-card-hi); box-shadow: var(--yj-sh-3); }
.rule-page-wrap .card--summary { background: var(--yj-forest); }
.rule-card { transition: box-shadow var(--yj-m-mid) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease); }
.rule-card:hover { box-shadow: var(--yj-sh-2); transform: translateY(-2px); border-color: var(--yj-line); }
.rule-card:hover h3 { text-decoration: none; }
details.grade-section > summary,
details.chapter-section > summary { background-color: var(--yj-card); }
details.grade-section > summary:hover,
details.chapter-section > summary:hover,
.content-table tbody tr:hover,
body[data-page] .data-table tbody tr:hover { background-color: var(--yj-yuja-50); }
body[data-page] .role-btn:hover { box-shadow: var(--yj-sh-2); transform: translateY(-2px); border-color: var(--yj-line-strong); }
/* 퀴즈 설정의 흰 상자(Tailwind bg-white)도 카드로 */
.bg-white.rounded-2xl,
.bg-white.rounded-xl,
.bg-white.rounded-3xl { background-color: var(--yj-card) !important; box-shadow: var(--yj-sh-1) !important; border-color: var(--yj-line) !important; }

/* ── 입력: 미색 + 포커스 유자 600 ── */
.custom-select,
#answer-input,
.modal-textarea,
#mobile-grade-low:not(.bg-\[\#142814\]),
#mobile-grade-high:not(.bg-\[\#142814\]) { background-color: var(--yj-card); }
.custom-select:focus,
.modal-textarea:focus,
body[data-page] .form-field input:focus,
body[data-page] .form-field select:focus { border-color: var(--yj-yuja-600); box-shadow: 0 0 0 1px var(--yj-yuja-600); }
#answer-input:focus { border-color: var(--yj-yuja-600); box-shadow: 0 0 0 1px var(--yj-yuja-600); }

/* ── 아이콘·보조 버튼 바탕도 미색 ── */
#btn-share, #btn-print, .audio-btn, .play-btn,
#play-slow, #prev-q-btn-bottom, #next-q-btn-bottom, #play-btn-submit-row, #play-all,
.rule-chip, .radio-pill-display, .level-btn-inactive, .pill-group,
.action-group, .sem-toggle-wrapper,
.rule-page-wrap .slide-btn--prev { background-color: var(--yj-card); }
.rule-page-wrap .slide-btn--prev { background: var(--yj-card) !important; }
#play-btn-submit-row.playing { background-color: var(--yj-yuja-300); color: var(--yj-on-action); border-color: var(--yj-yuja-300); }

/* ── 안내 상자 ── */
.rule-result-info { background: var(--yj-yuja-50); color: var(--yj-ink); border-left: 2px solid var(--yj-yuja-500); border-radius: var(--yj-r-sm); }
.rule-page-wrap .key-point,
body[data-page] .wbox { background: var(--yj-yuja-100); }

/* ── 슬라이드 전체화면: 캔버스 위 미색 카드 ── */
html body.is-fullscreen { background: var(--yj-canvas) !important; }
html body.is-fullscreen .rule-page-wrap .card { background: var(--yj-card); box-shadow: var(--yj-sh-2); }
html body.is-fullscreen .rule-page-wrap .card--summary { background: var(--yj-forest); }

/* ── 대문(index) ── */
.circle-button { background: var(--yj-card); border-color: var(--yj-line); box-shadow: var(--yj-sh-1); }
.circle-button:hover { border-color: var(--yj-line); box-shadow: var(--yj-sh-2); transform: translateY(-2px); }
.circle-button:active { transform: scale(.98); }
.circle-button.btn-geup { background: var(--yj-yuja-300); border-color: var(--yj-yuja-300); }
.circle-button.btn-geup:hover { background: var(--yj-yuja-500); border-color: var(--yj-yuja-500); }
.badge-top { background: var(--yj-card); }
footer { background: var(--yj-canvas); }
#toast { box-shadow: var(--yj-sh-2); }

/* ============================================================
   v4 다듬기 (2026-10-14 2차) — 화면을 돌며 찾은 어긋남을 메운다
   토큰만 쓴다. 스크립트가 만드는 Tailwind 클래스·style 속성은 여기서 덮는다.
   ============================================================ */

/* ── 공통: 글자 고르기 색 ── */
::selection { background: var(--yj-yuja-200); color: var(--yj-ink-deep); }

/* ── 2차 메뉴 띠: 머리(56) 바로 밑에 붙인다 (예전 60 기준이라 4px 틈이 보였다) ── */
@media screen and (min-width: 769px) {
    .sub-header-fixed { top: 56px; }
    .rule-filter-bar { top: 104px; }
}

/* ── 목차(list) ── */
/* 비법별 결과 목록 — 캔버스에 맨몸으로 놓이던 표를 카드 한 장 안에 */
div.grade-section {
    background-color: var(--yj-card);
    border: 1px solid var(--yj-line);
    box-shadow: var(--yj-sh-1);
}
.content-table td .p-2.bg-white,
div.p-2.bg-white { background-color: var(--yj-card) !important; }
.rule-tag { font-size: 12px; border-radius: var(--yj-r-full); }
.sem-toggle-btn { font-size: 12px; }
.rule-result-info strong { color: var(--yj-ink-deep); }

/* ── 받아쓰기(play) ── */
/* '범위 선택으로' 화살표가 흰색(stroke="white")이라 캔버스 위에서 사라졌다 */
#back-link { gap: 6px; min-height: 44px; font-weight: 600; transition: color var(--yj-m-fast) var(--yj-ease); }
#back-link svg { stroke: currentColor; width: 20px; height: 20px; }
#back-link svg path { stroke-width: 1.6; }
/* 정답 칸 — 노랑 테두리 + 고리 대신 유자 600 선 하나 */
#hint-display-answer {
    background-color: var(--yj-card);
    border-color: var(--yj-yuja-600);
    --tw-ring-color: var(--yj-yuja-100);
}
#hint-display-answer .hint-label-box {
    background-color: var(--yj-yuja-100);
    color: var(--yj-yuja-ink);
    border-right-color: var(--yj-line);
}
/* 소리 칸 — 파랑 대신 캔버스 + 보조 글자 */
#hint-display-sound { background-color: var(--yj-card); border-color: var(--yj-line) !important; }
#hint-display-sound .hint-label-box {
    background-color: var(--yj-canvas) !important;
    color: var(--yj-sub) !important;
    border-right-color: var(--yj-line) !important;
}
/* 적용 규칙 칸 — 회청색 바탕·파랑 글자를 카드 + 먹으로 */
#hint-display-rule { background-color: var(--yj-card) !important; border-color: var(--yj-line); }
#hint-display-rule .border-b { border-color: var(--yj-line) !important; }
#hint-display-rule strong.text-amber-800 { color: var(--yj-yuja-ink) !important; }
#hint-display-rule label { color: var(--yj-sub) !important; }
#hint-display-rule input[type="checkbox"] { accent-color: var(--yj-yuja-600); }
#rule-hint-text-area > div {
    background-color: var(--yj-canvas) !important;
    border-color: var(--yj-line) !important;
    border-radius: var(--yj-r-sm) !important;
    box-shadow: none !important;
}
#rule-hint-text-area .text-blue-800 { color: var(--yj-ink-deep) !important; }
#rule-hint-text-area .text-red-600 { color: var(--yj-error-ink) !important; }
#rule-hint-text-area .border-gray-200 { border-color: var(--yj-line-strong) !important; }
#rule-hint-text-area a {
    min-width: 44px; min-height: 44px; justify-content: center;
    color: var(--yj-sub) !important;
    border-radius: var(--yj-r-sm);
    transition: color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease);
}
#rule-hint-text-area a:hover { color: var(--yj-ink-deep) !important; background-color: var(--yj-yuja-50); }
#rule-hint-text-area .text-gray-400 { color: var(--yj-sub) !important; }
/* 정답 모달 — 통통 원 대신 잎 틴트 원, 다음 문제 = 유자 300 */
#modal-content .rounded-full.border-8 {
    width: 96px; height: 96px;
    border: 0;
    background: var(--yj-leaf-tint);
}
#modal-next-btn {
    background: var(--yj-yuja-300) !important;
    color: var(--yj-on-action) !important;
    box-shadow: none !important;
    border-radius: var(--yj-r-full) !important;
    transition: background-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
#modal-next-btn:hover { background: var(--yj-yuja-500) !important; }
#modal-next-btn:active, #quiz-complete-home-btn:active { transform: scale(.97); }
#modal-close-btn:hover { color: var(--yj-ink-deep) !important; }
/* 퀴즈 완료 모달 — 잎 채움 + 흰 글자(대비 2.9)를 유자 300 + 먹으로 */
#quiz-complete-close-btn {
    min-height: 48px;
    background: transparent !important;
    color: var(--yj-sub) !important;
    border-radius: var(--yj-r-sm) !important;
}
#quiz-complete-close-btn:hover { color: var(--yj-ink-deep) !important; }
#quiz-complete-home-btn {
    min-height: 48px;
    background: var(--yj-yuja-300) !important;
    color: var(--yj-on-action) !important;
    box-shadow: none !important;
    border-radius: var(--yj-r-full) !important;
    transition: background-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
#quiz-complete-home-btn:hover { background: var(--yj-yuja-500) !important; }
#quiz-complete-modal-content p { color: var(--yj-sub) !important; }
#modal-text, #quiz-complete-modal-text { color: var(--yj-ink-deep) !important; }

/* ── 비법 상세 — 연습 2의 청록 안내 띠(style 속성)를 캔버스로 ── */
.rule-page-wrap .practice-desc,
.rule-page-wrap .practice-desc[style] {
    background: var(--yj-canvas) !important;
    border: 0 !important;
    color: var(--yj-ink) !important;
}

/* ── 활용법 — 본문 속 기본 파랑 링크를 먹 밑줄로 ── */
body[data-page] .content-card a:not([class]),
body[data-page] .accordion-body a:not([class]),
body[data-page] .intro-card a:not([class]),
body[data-page] .data-table a:not([class]) {
    color: var(--yj-ink-deep);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--yj-yuja-600);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
body[data-page] .content-card a:not([class]):hover,
body[data-page] .accordion-body a:not([class]):hover,
body[data-page] .intro-card a:not([class]):hover,
body[data-page] .data-table a:not([class]):hover { background: var(--yj-yuja-50); }

/* ============================================================
   급수표 인쇄 (print.html · body.yj-print) — 화면 틀만 v4 로
   A4 급수표(#a4-preview) 안은 인쇄물이라 손대지 않는다.
   공용 CSS 의 body 글자 값(17px · 1.6 · keep-all)이 급수표로 번지지 않게 막는다.
   ============================================================ */
body.yj-print #a4-preview,
body.yj-print #preview-modal-content {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    word-break: normal;
    overflow-wrap: normal;
}
/* 고르는 줄: 캔버스 알약 묶음 · 고른 학년 = 유자 200 + 600 테두리 */
body.yj-print .btn-group,
body.yj-print .sem-switch {
    background: var(--yj-canvas);
    border: 1px solid var(--yj-line-strong);
}
body.yj-print .btn-group-item {
    min-height: 36px;
    color: var(--yj-sub);
    font-weight: 600;
    border: 1px solid transparent;
    transition: color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease);
}
body.yj-print .btn-group-item:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
body.yj-print .btn-group-item.active,
body.yj-print .btn-group-item.active-green {
    background: var(--yj-yuja-200);
    border-color: var(--yj-yuja-600);
    color: var(--yj-ink-deep);
    font-weight: 700;
    box-shadow: none;
}
/* 학기 스위치 — 초록·주황 대신 유자 300 + 먹 글자 (급수 화면과 같은 모습) */
body.yj-print .sem-switch-track,
body.yj-print .sem-switch-track.s2 { background: var(--yj-yuja-300); }
body.yj-print .sem-switch-label { color: var(--yj-ink-deep); }
body.yj-print .sem-switch-knob { background: var(--yj-card-hi); box-shadow: var(--yj-sh-1); }
body.yj-print #mobile-grade,
body.yj-print #btn-sound-trap-mobile { min-height: 36px; }
body.yj-print #mobile-grade:not(.bg-\[\#142814\]),
body.yj-print #btn-sound-trap-mobile:not(.bg-\[\#142814\]) {
    background-color: var(--yj-card);
    border-color: var(--yj-line-strong);
    color: var(--yj-ink-deep);
}
/* 내려받기 3종(이미지·PDF·doc) = 미색 + 선 아이콘 버튼, 인쇄 = 유자 300 (화면에 하나) */
body.yj-print .btn-action {
    height: 44px;
    transition: background-color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease), color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
body.yj-print .btn-action:active { transform: scale(.97); }
body.yj-print .btn-green,
body.yj-print .btn-blue,
body.yj-print .btn-purple {
    background-color: var(--yj-card);
    color: var(--yj-ink-deep);
    border: 1px solid var(--yj-line-strong);
}
body.yj-print .btn-green:hover,
body.yj-print .btn-blue:hover,
body.yj-print .btn-purple:hover { background-color: var(--yj-yuja-50); border-color: var(--yj-yuja-600); transform: none; }
body.yj-print .btn-amber { background-color: var(--yj-yuja-300); color: var(--yj-on-action); }
body.yj-print .btn-amber:hover { background-color: var(--yj-yuja-500); transform: none; }
body.yj-print .btn-action i, body.yj-print .btn-action svg { stroke-width: 1.6; }
body.yj-print .btn-doc .btn-label { font-size: 12px; letter-spacing: .02em; }
/* A4 미리보기 — 캔버스 위 종이 한 장 */
body.yj-print #a4-preview { border-color: var(--yj-line); box-shadow: var(--yj-sh-2); }
body.yj-print #a4-preview:hover { box-shadow: var(--yj-sh-3); }
body.yj-print .preview-click-hint { background: var(--yj-yuja-100); color: var(--yj-ink-deep); font-size: 13px; }
/* 손가락 안내 — 빛나는 레몬 그림자를 끈다 */
body.yj-print .pulse-finger-circle {
    background: var(--yj-overlay);
    border: 2px solid var(--yj-yuja-500);
    box-shadow: none !important;
}
body.yj-print .pulse-finger-icon { color: var(--yj-yuja-500); }
/* 크게 보기 — 닫기는 떠 있는 아이콘 버튼, 안내는 토스트 */
body.yj-print #modal-close-btn {
    width: 44px; height: 44px; min-height: 44px;
    border-radius: var(--yj-r-full);
    background: var(--yj-card-hi);
    color: var(--yj-ink-deep);
    font-size: 20px;
    box-shadow: var(--yj-sh-2);
}
body.yj-print #modal-zoom-hint { background: var(--yj-forest); color: var(--yj-on-forest); font-size: 13px; box-shadow: var(--yj-sh-2); }
/* 인쇄 안내 모달 — 블러 없이 막 + 흰 카드 */
body.yj-print #print-guide-modal { background: var(--yj-overlay); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.yj-print #print-guide-box { background: var(--yj-card-hi); border-radius: var(--yj-r-lg); box-shadow: var(--yj-sh-3); }
body.yj-print #print-guide-box > div:last-child > button:last-child:hover { background: var(--yj-yuja-500) !important; }
body.yj-print #print-guide-box button:hover { color: var(--yj-ink-deep) !important; }
body.yj-print #mobile-arrow[stroke="#FFE135"] { stroke: var(--yj-ink-deep); }

/* ============================================================
   지도서 (guide.html · guideprint.html · body.yj-guide) — 화면 틀만 v4 로
   어두운 숲 바탕의 책 읽기 틀을 캔버스 + 미색 띠로 바꾼다.
   책 쪽(.page-portrait) 안은 인쇄본과 같은 원고라 손대지 않고,
   공용 CSS 의 body 글자 값이 책 쪽으로 번지지 않게 예전 기본값으로 되돌린다.
   ============================================================ */
body.yj-guide { background: var(--yj-canvas); color: var(--ink); }
body.yj-guide .page-portrait {
    font-size: 16px;
    line-height: normal;
    letter-spacing: normal;
    word-break: normal;
    overflow-wrap: normal;
}
/* 머리: 휴대폰에서도 위에 둔다 — 아래는 쪽 넘김 막대가 쓴다 */
body.yj-guide .header-fixed {
    top: 0 !important;
    bottom: auto !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--yj-line) !important;
    z-index: 300;
}
body.yj-guide .header-fixed > nav { max-width: 400px !important; }
/* 북마크 줄 — 미색 띠 + 1px 선, 지금 쪽은 유자 300 칩 */
body.yj-guide #bookmark-bar {
    top: 56px;
    background: var(--yj-card);
    border-bottom: 1px solid var(--yj-line);
    box-shadow: none;
}
body.yj-guide .bm-chip {
    min-height: 34px;
    color: var(--yj-sub);
    background: var(--yj-card);
    border: 1px solid var(--yj-line-strong);
    font-weight: 600;
    transition: color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease);
}
body.yj-guide .bm-chip:hover { background: var(--yj-yuja-50); color: var(--yj-ink-deep); transform: none; }
body.yj-guide .bm-chip.active {
    background: var(--yj-yuja-300);
    border-color: var(--yj-yuja-300);
    color: var(--yj-on-action);
    box-shadow: none;
    font-weight: 700;
}
body.yj-guide .bm-select,
body.yj-guide .ec-select,
body.yj-guide .ec-zoom-select {
    min-height: 34px;
    background-color: var(--yj-card);
    border: 1px solid var(--yj-line-strong);
    color: var(--yj-ink-deep);
}
body.yj-guide .bm-select { border-radius: var(--yj-r-full); }
body.yj-guide .ec-select,
body.yj-guide .ec-zoom-select { border-radius: var(--yj-r-sm); }
body.yj-guide .bm-select option,
body.yj-guide .ec-select option,
body.yj-guide .ec-zoom-select option { background: var(--yj-card-hi); color: var(--yj-ink-deep); }
body.yj-guide .bm-select:focus,
body.yj-guide .ec-select:focus,
body.yj-guide .ec-zoom-select:focus { border-color: var(--yj-yuja-600); }
/* 인쇄본 열기 — 대등한 다른 선택이라 유자 100 버튼 */
body.yj-guide .btn-print-jump {
    min-height: 36px;
    background: var(--yj-yuja-100);
    color: var(--yj-yuja-ink);
    border-radius: var(--yj-r-sm);
    box-shadow: none;
    font-weight: 700;
}
body.yj-guide .btn-print-jump:hover { background: var(--yj-yuja-200); transform: none; }
/* 책 무대 — 캔버스 위 종이 한 장(그림자 2) */
body.yj-guide #ebook-frame {
    filter: none;
    box-shadow: var(--yj-sh-2);
    border-radius: var(--yj-r-xs);
}
body.yj-guide .toc-row:hover { color: var(--yj-ink-deep); text-decoration: underline; text-decoration-color: var(--yj-yuja-600); }
/* 좌우 넘김 — 블러 없는 떠 있는 아이콘 버튼 */
body.yj-guide .side-nav-btn {
    background: var(--yj-card);
    color: var(--yj-sub);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    box-shadow: var(--yj-sh-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: color var(--yj-m-fast) var(--yj-ease), background-color 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);
    color: var(--yj-ink-deep);
    transform: translateY(-50%);
}
body.yj-guide .side-nav-btn:disabled { opacity: .3; }
/* 아래 쪽 넘김 막대 — 미색 띠 + 위 1px 선, 다음 쪽 = 유자 300 (화면에 하나) */
body.yj-guide #ebook-controls {
    background: var(--yj-card);
    border-top: 1px solid var(--yj-line);
    box-shadow: none;
}
body.yj-guide .ec-btn {
    min-height: 40px;
    background: var(--yj-card);
    color: var(--yj-ink-deep);
    border: 1px solid var(--yj-line-strong);
    transition: background-color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease);
}
body.yj-guide .ec-btn:hover:not(:disabled) { background: var(--yj-yuja-50); border-color: var(--yj-line-strong); color: var(--yj-ink-deep); transform: none; }
body.yj-guide #btn-next-bottom { background: var(--yj-yuja-300); border-color: var(--yj-yuja-300); color: var(--yj-on-action); }
body.yj-guide #btn-next-bottom:hover:not(:disabled) { background: var(--yj-yuja-500); border-color: var(--yj-yuja-500); }
body.yj-guide .ec-btn:active:not(:disabled) { transform: scale(.97); }
body.yj-guide .ec-btn:disabled { opacity: .4; }
body.yj-guide #page-slider { accent-color: var(--yj-yuja-500); }
/* 쪽 크게 보기 — 막은 짙게 두고(사진 보기), 닫기만 떠 있는 아이콘 버튼 */
body.yj-guide .lightbox-close {
    background: var(--yj-card-hi);
    color: var(--yj-ink-deep);
    border: 0;
    box-shadow: var(--yj-sh-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.yj-guide .lightbox-close:hover { background: var(--yj-yuja-50); border-color: transparent; }
body.yj-guide .tap-zoom-hint { background: var(--yj-forest); color: var(--yj-on-forest); box-shadow: var(--yj-sh-2); }

/* ── 지도서 인쇄본 (guideprint) ── */
body.yj-guideprint #control-panel {
    top: 56px;
    background: var(--yj-card);
    border-bottom: 1px solid var(--yj-line);
    box-shadow: none;
}
body.yj-guideprint .cp-divider { background: var(--yj-line); }
body.yj-guideprint .btn-group {
    background: var(--yj-canvas);
    border: 1px solid var(--yj-line-strong);
}
body.yj-guideprint .btn-group-item { color: var(--yj-sub); font-weight: 600; border: 1px solid transparent; min-height: 34px; }
body.yj-guideprint .btn-group-item:hover { color: var(--yj-ink-deep); }
body.yj-guideprint .btn-group-item.active {
    background: var(--yj-yuja-200);
    border-color: var(--yj-yuja-600);
    color: var(--yj-ink-deep);
    font-weight: 700;
    box-shadow: none;
}
body.yj-guideprint .cp-select {
    min-height: 36px;
    background: var(--yj-card);
    border: 1px solid var(--yj-line-strong);
    color: var(--yj-ink-deep);
}
body.yj-guideprint .btn-action {
    min-height: 40px;
    transition: background-color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
body.yj-guideprint .btn-action:active:not(:disabled) { transform: scale(.97); }
body.yj-guideprint .btn-green,
body.yj-guideprint .btn-blue {
    background-color: var(--yj-card);
    color: var(--yj-ink-deep);
    border: 1px solid var(--yj-line-strong);
}
body.yj-guideprint .btn-green:hover,
body.yj-guideprint .btn-blue:hover { background-color: var(--yj-yuja-50); border-color: var(--yj-yuja-600); transform: none; }
body.yj-guideprint .btn-amber { background-color: var(--yj-yuja-300); color: var(--yj-on-action); }
body.yj-guideprint .btn-amber:hover { background-color: var(--yj-yuja-500); transform: none; }
body.yj-guideprint .btn-ebook {
    background-color: var(--yj-yuja-100);
    color: var(--yj-yuja-ink);
    border: 0;
    border-radius: var(--yj-r-sm);
}
body.yj-guideprint .btn-ebook:hover { background-color: var(--yj-yuja-200); transform: none; }
body.yj-guideprint #progress-label { color: var(--yj-sub); }
body.yj-guideprint .page-portrait { box-shadow: var(--yj-sh-2); }
@media print {
    body.yj-guide, body.yj-guideprint { background: var(--yj-card-hi); }
    body.yj-guideprint .page-portrait { box-shadow: none; }
}
/* 인쇄할 때 메뉴바를 숨긴다 — 위 도크 규칙(display:flex !important)이 페이지의 인쇄 규칙을 이기지 않게 */
@media print {
    body.yj-print .header-fixed,
    body.yj-guide .header-fixed { display: none !important; }
}
/* 인쇄 안내 모달의 닫기(✕) — 마크업은 그대로 두고 44px 아이콘 버튼으로 */
body.yj-print #print-guide-box > div:first-child > button {
    width: 44px; height: 44px;
    padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--yj-r-full);
    color: var(--yj-sub) !important;
    font-size: 20px !important;
    transition: color var(--yj-m-fast) var(--yj-ease), background-color var(--yj-m-fast) var(--yj-ease);
}
body.yj-print #print-guide-box > div:first-child > button:hover { background: var(--yj-yuja-50) !important; color: var(--yj-ink-deep) !important; }

/* ============================================================
   2026-10-14 3차 — 급수표 어사문 어휘 형광펜 · 대문 도크
   ============================================================ */
/* 어사문 연결 어휘 — 연한 레몬(거의 안 보임) 대신 잎 형광펜. 누를 수 있다는 표시 */
.vocab-highlight {
    background-image: linear-gradient(transparent 45%, color-mix(in srgb, var(--yj-leaf) 62%, transparent) 45%) !important;
    border-radius: 2px;
    transition: background-image var(--yj-m-fast) var(--yj-ease);
}
.vocab-highlight:hover {
    background-image: linear-gradient(transparent 20%, color-mix(in srgb, var(--yj-leaf) 80%, transparent) 20%) !important;
}

/* 대문 도크 — 다른 페이지는 각자 <style> 에 고정 위치를 두지만 대문엔 없어 여기서 준다 */
body.yj-index .header-fixed {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
}
body.yj-index .header-fixed .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
@media screen and (min-width: 769px) {
    body.yj-index { padding-top: 56px; }
}
@media screen and (max-width: 768px) {
    body.yj-index { padding-top: 0; padding-bottom: 64px; }
}