/* ====================================================================
   pb-ai.css — Phase 0.5 mock — 가지 AI UI 스타일
   --------------------------------------------------------------------
   v139 step1~4: 진입/모달/비교/검사 (옛 흐름)
   v140-step1:  TEST MODE 배지 + 우회 토글  ← (지금)
   v140-step2:  후보 모달 (회차 탭)
   v140-step3:  편집 중 패널
   v140-step4:  AI 보기 토글 바

   v138 기존 디자인 (warm paper #fffaee, 코랄 #c66f4a) 따름.
   기존 viewer.css / pb-tone.css 클래스 안 건드림. 신규 클래스만 추가.
==================================================================== */

/* ════════════════════════════════════════════════════════════════
   v140-step1: TEST MODE 배지
   ──────────────────────────────────────────────────────────────
   화면 상단 우측 고정 — 그림/본문/행동버튼 영역 안 침범
   ⚠️ MOCK 전용 — 운영에서는 진입 자체 X
   ════════════════════════════════════════════════════════════════ */
.ai-testmode-badge {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10010;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #c92a2a;                  /* 빨강 — 운영과 구분되게 */
  color: #fffaee;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  font-family: 'Jua', sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  pointer-events: auto;
  user-select: none;
}

.ai-testmode-badge__label {
  font-weight: 700;
  background: rgba(255,255,255,0.18);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.ai-testmode-badge__hint {
  font-size: 11px;
  opacity: 0.92;
  max-width: 320px;
  white-space: normal;
  line-height: 1.3;
}

.ai-testmode-badge__bypass {
  margin-left: 4px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.15);
  color: #fffaee;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 5px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ai-testmode-badge__bypass:hover {
  background: rgba(255,255,255,0.28);
}

.ai-testmode-badge--bypass-on {
  background: #d97706;                  /* 우회 ON일 때 주황 — 더 강한 경고 */
}

.ai-testmode-badge--bypass-on .ai-testmode-badge__bypass {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.6);
}

/* 모바일/태블릿 좁은 화면 — hint 숨김 (배지·우회만 유지) */
@media (max-width: 768px) {
  .ai-testmode-badge__hint { display: none; }
  .ai-testmode-badge { max-width: 220px; }
}

/* ════════════════════════════════════════════════════════════
   1) 진입 버튼 — maker-return-bar 안 [🤖 AI 작품 다듬기]
   ════════════════════════════════════════════════════════════ */
.maker-return-btn--ai {
  background: linear-gradient(135deg, #fdf6e7 0%, #fbeede 100%);
  border-color: rgba(198, 111, 74, 0.35);
  color: #b85a3a;
}
.maker-return-btn--ai:hover {
  background: linear-gradient(135deg, #fbeede 0%, #f7dec4 100%);
  border-color: rgba(198, 111, 74, 0.55);
  color: #a04a30;
}
.maker-return-btn--ai:active { background: #f7dec4; }

/* ════════════════════════════════════════════════════════════
   2) 모달 overlay + 박스 (공통)
   ════════════════════════════════════════════════════════════ */
.ai-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: ai-overlay-fade-in 0.18s ease-out;
}
.ai-modal-overlay--lock { z-index: 600; }   /* 호출 중 lock — 다른 모달 위 */
.ai-modal-overlay--large { padding: 14px; }

@keyframes ai-overlay-fade-in {
  from { background: rgba(0, 0, 0, 0); }
  to   { background: rgba(0, 0, 0, 0.55); }
}

.ai-modal {
  background: #fffaee;
  border-radius: 20px;
  width: 100%;
  max-width: 640px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-family: 'Nanum Gothic', sans-serif;
  color: #2b1f10;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  animation: ai-modal-pop 0.22s ease-out;
}
.ai-modal--large { max-width: 1280px; width: 95vw; }    /* v140 fix 2026-05-21 — 후보·편집 모달 넓힘 */
@keyframes ai-modal-pop {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.ai-modal__header {
  background: linear-gradient(135deg, #fdf6e7 0%, #fbeede 100%);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(198, 111, 74, 0.2);
}
.ai-modal__title {
  font-family: 'Jua', sans-serif;
  font-size: 18px;
  color: #2b1f10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-modal__close {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(80, 50, 20, 0.2);
  color: #6b5638;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
.ai-modal__close:hover { background: #fff; }

.ai-modal__body {
  padding: 22px 24px 18px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.ai-modal__footer {
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(80, 50, 20, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fef8eb;
}

/* ════════════════════════════════════════════════════════════
   3) 버튼 공통
   ════════════════════════════════════════════════════════════ */
.ai-btn {
  appearance: none;
  background: #fff;
  border: 1.5px solid rgba(80, 50, 20, 0.25);
  color: #2b1f10;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-btn:hover { background: #fdf6e7; }

.ai-btn--primary {
  background: #c66f4a;
  border-color: #c66f4a;
  color: #fff;
}
.ai-btn--primary:hover {
  background: #b85a3a;
  border-color: #b85a3a;
}

.ai-btn--ghost {
  background: transparent;
  border-color: rgba(80, 50, 20, 0.2);
  color: #6b5638;
}

/* ════════════════════════════════════════════════════════════
   4) MOCK 배지
   ════════════════════════════════════════════════════════════ */
.ai-mock-badge {
  display: inline-block;
  background: rgba(198, 111, 74, 0.15);
  border: 1px solid rgba(198, 111, 74, 0.35);
  color: #b85a3a;
  font-family: 'Jua', sans-serif;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 6px;
}
.ai-mock-badge--header { background: rgba(198, 111, 74, 0.18); }

/* ════════════════════════════════════════════════════════════
   5) 첫 안내 모달 (onboarding)
   ════════════════════════════════════════════════════════════ */
.ai-onboarding-text {
  font-size: 15px;
  line-height: 1.9;
  color: #2b1f10;
  margin: 0 0 16px;
  text-align: center;
}
.ai-onboarding-hint {
  background: rgba(198, 111, 74, 0.08);
  border: 1px solid rgba(198, 111, 74, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #6b5638;
  text-align: center;
  font-family: 'Nanum Pen Script', cursive;
}
.ai-onboarding-skip {
  font-size: 12.5px;
  color: #6b5638;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.ai-onboarding-skip input[type="checkbox"] {
  accent-color: #c66f4a;
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════
   6) 모드 선택 모달
   ════════════════════════════════════════════════════════════ */
.ai-mode-intro {
  font-size: 13px;
  color: #6b5638;
  line-height: 1.7;
  margin: 0 0 16px;
  text-align: center;
}

.ai-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 540px) {
  .ai-mode-grid { grid-template-columns: 1fr; }
}

.ai-mode-card {
  appearance: none;
  background: #fff;
  border: 1.5px solid rgba(80, 50, 20, 0.15);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: left;
  font-family: 'Nanum Gothic', sans-serif;
  color: #2b1f10;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
}
.ai-mode-card:hover:not(.ai-mode-card--disabled) {
  background: #fdf6e7;
  border-color: rgba(198, 111, 74, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(198, 111, 74, 0.12);
}
.ai-mode-card--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f7f1e0;
}
.ai-mode-card__icon { font-size: 22px; line-height: 1; }
.ai-mode-card__title {
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  color: #2b1f10;
}
.ai-mode-card__desc {
  font-size: 12px;
  line-height: 1.55;
  color: #6b5638;
}
.ai-mode-card__remaining {
  margin-top: auto;
  font-size: 11.5px;
  color: #8a7556;
  font-family: 'Nanum Pen Script', cursive;
}
.ai-mode-card__reason {
  margin-top: auto;
  font-size: 11px;
  color: #b85a3a;
  background: rgba(198, 111, 74, 0.08);
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1.4;
}
.ai-mode-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: #8a7556;
  font-family: 'Nanum Pen Script', cursive;
}

/* ════════════════════════════════════════════════════════════
   7) 호출 중 lock 모달 — 점 3개 + 시간 + 취소
   ════════════════════════════════════════════════════════════ */
.ai-calling-body {
  padding: 36px 28px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ai-calling-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.ai-calling-dots span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c66f4a;
  animation: ai-dot-bounce 1.2s infinite ease-in-out both;
}
.ai-calling-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-calling-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes ai-dot-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%           { transform: scale(1);   opacity: 1;   }
}

.ai-calling-title {
  font-family: 'Jua', sans-serif;
  font-size: 17px;
  color: #2b1f10;
}
.ai-calling-detail {
  font-size: 13px;
  color: #6b5638;
  line-height: 1.7;
}
.ai-calling-detail b { color: #c66f4a; }
.ai-calling-time {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Nanum Pen Script', cursive;
  font-size: 14px;
  color: #8a7556;
}
.ai-calling-hint {
  background: rgba(198, 111, 74, 0.08);
  border: 1px solid rgba(198, 111, 74, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: #6b5638;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   8) 비교 모달 — 작품 단위 (장면 목록 + skip + 좌우 split)
   ════════════════════════════════════════════════════════════ */
.ai-result-summary {
  font-size: 13.5px;
  color: #2b1f10;
  background: rgba(198, 111, 74, 0.08);
  border-left: 3px solid #c66f4a;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.ai-result-hint {
  font-size: 11.5px;
  color: #8a7556;
  margin-bottom: 12px;
  font-family: 'Nanum Pen Script', cursive;
}
.ai-result-actions-top {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.ai-result-actions-top .ai-btn {
  padding: 5px 12px;
  font-size: 11.5px;
}

.ai-result-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-scene-row {
  border: 1.5px solid rgba(80, 50, 20, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fffefa;
}
.ai-scene-row--skip {
  background: #f7f1e0;
  border-style: dashed;
  opacity: 0.7;
  padding: 8px 14px;
}

.ai-scene-row__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ai-scene-row--skip .ai-scene-row__head { margin-bottom: 0; }

.ai-scene-row__check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
}
.ai-scene-row__check input[type="checkbox"] {
  accent-color: #c66f4a;
  cursor: pointer;
  transform: scale(1.15);
}

.ai-scene-row__num {
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  color: #2b1f10;
}
.ai-row-title {
  font-size: 12px;
  color: #6b5638;
  font-weight: 400;
}
.ai-scene-row__summary {
  margin-left: auto;
  font-size: 11.5px;
  color: #8a7556;
  font-family: 'Nanum Pen Script', cursive;
}
.ai-scene-row__skip-label {
  margin-left: auto;
  font-size: 11.5px;
  color: #8a7556;
  font-family: 'Nanum Pen Script', cursive;
  font-style: italic;
}

.ai-scene-row__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px) {
  .ai-scene-row__split { grid-template-columns: 1fr; }
}

.ai-scene-row__col {
  background: #fffaee;
  border: 1px solid rgba(80, 50, 20, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
}
.ai-col-label {
  font-family: 'Jua', sans-serif;
  font-size: 11px;
  color: #8a7556;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.ai-col-body {
  font-family: 'Gowun Batang', serif;
  font-size: 13px;
  line-height: 1.75;
  color: #2b1f10;
  white-space: pre-wrap;
}
.ai-col-body--suggested {
  background: #fef6e9;
  border-radius: 4px;
  padding: 6px 8px;
  margin: -6px -8px;
}

/* ════════════════════════════════════════════════════════════
   9) 작품 검사 결과 모달 (수정 X — 진단만)
   ════════════════════════════════════════════════════════════ */
.ai-check-intro {
  font-size: 13px;
  color: #2b1f10;
  background: rgba(74, 144, 217, 0.08);
  border-left: 3px solid #4a90d9;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.ai-check-intro b { color: #2a6db5; }

.ai-check-category {
  margin-bottom: 18px;
}
.ai-check-category__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jua', sans-serif;
  font-size: 14px;
  color: #2b1f10;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(80, 50, 20, 0.12);
}
.ai-check-category__count {
  background: #c66f4a;
  color: #fff;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: 'Jua', sans-serif;
}
.ai-check-category__count--zero {
  background: #aaa;
}

.ai-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: #fffefa;
  border: 1px solid rgba(80, 50, 20, 0.1);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.6;
}
.ai-check-item__text { flex: 1; color: #2b1f10; }
.ai-check-item__text b { color: #c66f4a; }
.ai-check-item__jump {
  appearance: none;
  background: #fef6e9;
  border: 1px solid rgba(198, 111, 74, 0.4);
  color: #b85a3a;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.ai-check-item__jump:hover {
  background: #fbeede;
}

.ai-check-empty {
  text-align: center;
  color: #8a7556;
  font-style: italic;
  font-size: 12px;
  padding: 12px;
  background: #f7f1e0;
  border-radius: 6px;
}


/* ════════════════════════════════════════════════════════════════
   v140-step2: 후보 모달 (회차 탭 — 사용자 결정 #E)
   ──────────────────────────────────────────────────────────────
   모달 표시 위치는 기존 .ai-modal-overlay를 재사용.
   장면 많으면 내부 스크롤 생김.
   ════════════════════════════════════════════════════════════════ */
.ai-cand-modal {
  background: #fffaee;
  border-radius: 12px;
  /* v140 fix 2026-05-21: width 95vw / max-height 90vh — 수정본 텍스트가 끝까지 보이도록 확대 (사용자 명령) */
  width: 95vw;
  max-width: 1280px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.ai-cand-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e8dcc4;
}

.ai-cand-modal__head h3 {
  margin: 0;
  font-family: 'Jua', sans-serif;
  color: #6b5638;
  font-size: 18px;
}

.ai-modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: #8a7a5e;
  cursor: pointer;
  padding: 0 6px;
}
.ai-modal-close:hover { color: #c66f4a; }

.ai-cand-drafting-note {
  margin: 10px 18px 0;
  padding: 10px 12px;
  background: #fff3e0;
  border: 1px solid #ffcc80;
  border-radius: 8px;
  color: #8a4a00;
  font-size: 13px;
}

.ai-cand-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 18px 0;
  border-bottom: 1px solid #e8dcc4;
}

.ai-cand-tab {
  padding: 8px 16px;
  background: #f3e7cc;
  border: 1px solid #e8dcc4;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: #6b5638;
  font-family: 'Jua', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ai-cand-tab:hover { background: #e8d9b6; }

.ai-cand-tab.is-active {
  background: #fffaee;
  color: #c66f4a;
  font-weight: 700;
  position: relative;
  top: 1px;
}

.ai-cand-tab-body {
  flex: 1;
  min-height: 0; /* flex item 기본 min-height:auto 제거 — 내부 세로 스크롤 동작 보장 */
  overflow-y: auto;
  padding: 16px 18px;
  background: #fffaee;
}

.ai-cand-row {
  padding: 12px;
  margin-bottom: 10px;
  background: #fdf6e5;
  border: 1px solid #ecdfc4;
  border-radius: 8px;
}

.ai-cand-row--skip { opacity: 0.6; }

.ai-cand-row--none {
  background: #f7f1e0;
  opacity: 0.5;
}

.ai-cand-scene-id {
  font-size: 12px;
  color: #8a7a5e;
  margin-bottom: 6px;
  font-family: 'Jua', sans-serif;
}

.ai-cand-skip {
  font-size: 13px;
  color: #8a7a5e;
  font-style: italic;
}

.ai-cand-split {
  display: grid;
  /* v140 fix 2026-05-21: 세로 배치로 변경 (사용자 명령) — 좌우 2단이면 수정본 칸이 좁아져서 */
  grid-template-columns: 1fr;
  gap: 10px;
}

.ai-cand-col {
  background: #fffaee;
  border: 1px solid #ecdfc4;
  border-radius: 6px;
  padding: 8px 10px;
  min-height: 60px;
}

.ai-cand-col-label {
  font-size: 11px;
  color: #8a7a5e;
  margin-bottom: 4px;
  font-family: 'Jua', sans-serif;
}

.ai-cand-col-text {
  font-size: 14px;
  line-height: 1.5;
  color: #4a3c25;
  white-space: pre-wrap;
}

.ai-cand-col-text--ai {
  color: #2a5a3a;
  background: #f0f8f0;
  padding: 6px 8px;
  border-radius: 4px;
  margin-top: -2px;
}

.ai-cand-summary {
  font-size: 12px;
  color: #8a7a5e;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #ecdfc4;
}

.ai-cand-empty {
  text-align: center;
  color: #8a7a5e;
  padding: 30px;
  font-size: 14px;
}

.ai-cand-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid #e8dcc4;
  background: #fdf6e5;
}

.ai-cand-quota-empty {
  font-size: 13px;
  color: #8a7a5e;
}

/* v140 fix 2026-05-21: 모바일 — 같음 (이미 세로 배치) */
@media (max-width: 600px) {
  .ai-cand-modal { width: 98vw; max-height: 92vh; }
}

/* ════════════════════════════════════════════════════════════════
   v140 fix 2026-05-21: 모드 모달 TEST MODE reset 패널 + quota empty 모달
   ════════════════════════════════════════════════════════════════ */
.ai-mode-testmode-panel {
  margin-top: 16px;
  padding: 12px 14px;
  background: #fff3e0;
  border: 1px dashed #d97706;
  border-radius: 10px;
}
.ai-mode-testmode-panel__head {
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  color: #8a4a00;
  margin-bottom: 8px;
}
.ai-mode-testmode-panel__head code {
  background: rgba(255,255,255,0.6);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.ai-mode-testmode-panel__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-mode-testmode-panel__buttons .ai-btn {
  font-size: 12px;
  padding: 6px 10px;
}
.ai-mode-testmode-panel__hint {
  margin-top: 8px;
  font-size: 11px;
  color: #8a4a00;
  font-style: italic;
}
.ai-btn--danger {
  border-color: #c92a2a;
  color: #c92a2a;
}
.ai-btn--danger:hover {
  background: #fff0f0;
}

/* quota 0 안내 모달 */
.ai-quota-empty-modal {
  background: #fffaee;
  border-radius: 12px;
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.ai-quota-empty-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e8dcc4;
}
.ai-quota-empty-modal__head h3 {
  margin: 0;
  font-family: 'Jua', sans-serif;
  color: #6b5638;
  font-size: 17px;
}
.ai-quota-empty-modal__body {
  padding: 16px 18px;
  color: #4a3c25;
  font-size: 14px;
  line-height: 1.6;
}
.ai-quota-empty-modal__body p { margin: 0 0 10px; }
.ai-quota-empty-team code {
  background: #f3e7cc;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.ai-quota-empty-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #e8dcc4;
  background: #fdf6e5;
}

/* ════════════════════════════════════════════════════════════════
   v140-step3: 편집 중 패널 (drafting)
   ──────────────────────────────────────────────────────────────
   장면별 textarea 표시. 미세 수정만 — 새 사건/인물 추가는 안내로.
   ════════════════════════════════════════════════════════════════ */
.ai-draft-modal {
  background: #fffaee;
  border-radius: 12px;
  /* v140 fix 2026-05-21: 95vw / 90vh (사용자 명령) */
  width: 95vw;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.ai-draft-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e8dcc4;
}

.ai-draft-modal__head h3 {
  margin: 0;
  font-family: 'Jua', sans-serif;
  color: #6b5638;
  font-size: 18px;
}

.ai-draft-note {
  margin: 10px 18px 0;
  padding: 10px 12px;
  background: #fef8eb;
  border: 1px solid #ecdfc4;
  border-radius: 8px;
  color: #6b5638;
  font-size: 13px;
  line-height: 1.5;
}

.ai-draft-body {
  flex: 1;
  min-height: 0; /* flex item 기본 min-height:auto 제거 — 내부 세로 스크롤 동작 보장 */
  overflow-y: auto;
  padding: 12px 18px;
}

.ai-draft-row {
  padding: 12px;
  margin-bottom: 12px;
  background: #fdf6e5;
  border: 1px solid #ecdfc4;
  border-radius: 8px;
}

.ai-draft-row--skip { opacity: 0.6; }
.ai-draft-row--none { opacity: 0.5; background: #f7f1e0; }

.ai-draft-scene-id {
  font-size: 12px;
  color: #8a7a5e;
  margin-bottom: 8px;
  font-family: 'Jua', sans-serif;
}

.ai-draft-label {
  font-size: 11px;
  color: #8a7a5e;
  margin-bottom: 4px;
  font-family: 'Jua', sans-serif;
}

.ai-draft-original {
  background: #fffaee;
  border: 1px solid #ecdfc4;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.ai-draft-original-text {
  font-size: 14px;
  line-height: 1.5;
  color: #4a3c25;
  white-space: pre-wrap;
}

.ai-draft-edit {
  background: #f0f8f0;
  border: 1px solid #c8e0c8;
  border-radius: 6px;
  padding: 8px 10px;
}

.ai-draft-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #2a5a3a;
  background: #fff;
  border: 1px solid #c8e0c8;
  border-radius: 4px;
  padding: 6px 8px;
  resize: vertical;
  min-height: 60px;
}

.ai-draft-textarea:focus {
  outline: none;
  border-color: #5a9a5a;
  box-shadow: 0 0 0 2px rgba(90,154,90,0.18);
}

.ai-draft-skip {
  font-size: 13px;
  color: #8a7a5e;
  font-style: italic;
}

.ai-draft-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid #e8dcc4;
  background: #fdf6e5;
}

/* ════════════════════════════════════════════════════════════════
   v140-step4: AI 보기 토글 바 (사용자 결정 #D)
   ──────────────────────────────────────────────────────────────
   별도 토글 바 신설. maker-return-bar는 건드리지 않음.
   그림/본문/행동버튼 영역 침범 X — fixed top center.
   ════════════════════════════════════════════════════════════════ */
.ai-view-toggle-bar {
  position: fixed;
  /* VIEWER-AI-MODE-BAR-1A: 상단 세로 공간 축소 — pill을 위로 당기고(8→4) 패딩 축소.
     VIEWER-PLAY-TOP-CHROME-1: 그림자 약화(조용하게)·top 4→3 소폭. */
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10005;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fffaee;
  border: 1px solid #ecdfc4;
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  font-family: 'Jua', sans-serif;
  font-size: 12px;
  pointer-events: auto;
}

.ai-view-toggle-bar__label {
  color: #8a7a5e;
  margin-right: 4px;
  font-size: 11px;
}

.ai-view-toggle-btn {
  appearance: none;
  background: #f3e7cc;
  border: 1px solid #e8dcc4;
  color: #6b5638;
  font-family: 'Jua', sans-serif;
  font-size: 12px;
  /* VIEWER-AI-MODE-BAR-1A: 버튼 높이 살짝 축소(터치 영역 유지). */
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ai-view-toggle-btn:hover { background: #e8d9b6; }

.ai-view-toggle-btn.is-active {
  background: #c66f4a;
  border-color: #b85a3a;
  color: #fffaee;
}
/* AI-TOGGLE-ALWAYS-1: AI 결과가 아직 없을 때 AI 버튼 비활성(항상 배치·원본만 활성). */
.ai-view-toggle-btn:disabled,
.ai-view-toggle-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  background: #efe6d2;
  border-color: #e2d6bd;
  color: #a89a80;
}
.ai-view-toggle-btn:disabled:hover,
.ai-view-toggle-btn[aria-disabled="true"]:hover { background: #efe6d2; }

/* TEST MODE 배지와 함께 표시될 때 — 배지는 좌상단 fixed, 토글 바는 상단 중앙이라 겹치지 않음 */
.ai-testmode-badge ~ .ai-view-toggle-bar { /* 시각 충돌 없음 — 별도 조정 불필요 (빈 규칙 유지) */ }

@media (max-width: 600px) {
  .ai-view-toggle-bar { font-size: 11px; padding: 4px 8px; }
  .ai-view-toggle-btn { padding: 4px 9px; font-size: 11px; }
}

/* AI-TOGGLE-FLOW-1: 부유(position:fixed top center) → 문서 흐름 슬롯.
   기존 부유는 해상도에 따라 maker-return-bar 버튼/✕ 위로 겹쳤다(사용자 지적).
   슬롯 안의 토글 바만 static으로 재배치 → 오버랩 원천 차단 + 글/그림 토글 한 줄 병합.
   슬롯 밖 바(--image-entry 등)는 기존 fixed 유지. :empty면 공간 0(변형 없는 작품엔 안 뜸). */
.ai-view-toggle-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
  flex-wrap: wrap;
  padding: 2px 8px;
  flex-shrink: 0;
}
.ai-view-toggle-slot:empty { display: none; }
/* TOGGLE-SEG-1(2026-07-21 사용자 지적 "너무 넓고 어색함"): 슬롯 안 토글을
   조용한 세그먼트로 재설계 — 바깥 pill 상자(배경·테두리·패딩) 제거, 라벨 축소,
   버튼 두 개를 한 덩어리(붙은 세그먼트)로. 감상 화면의 부유(fixed) 바는 기존 그대로. */
.ai-view-toggle-slot .ai-view-toggle-bar {
  position: static;
  transform: none;
  top: auto;
  left: auto;
  z-index: auto;
  box-shadow: none;
  background: transparent;
  border: none;
  padding: 0;
  gap: 0;
}
.ai-view-toggle-slot .ai-view-toggle-bar__label {
  font-size: 11px;
  margin-right: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ai-view-toggle-slot .ai-view-toggle-btn {
  margin: 0;
  /* 단일 줄 고정 — 긴 라벨('AI 그림책 마감')이 줄바꿈되며 두 버튼 높이가 어긋나던 것 차단 */
  white-space: nowrap;
  line-height: 1.4;
  padding: 3px 11px;
  font-size: 11.5px;
  border-radius: 0;
  background: #f8f1de;
  border: 1px solid #e4d6b8;
}
.ai-view-toggle-slot .ai-view-toggle-btn + .ai-view-toggle-btn { border-left: none; }
.ai-view-toggle-slot .ai-view-toggle-btn:first-of-type { border-radius: 999px 0 0 999px; padding-left: 13px; }
.ai-view-toggle-slot .ai-view-toggle-btn:last-of-type { border-radius: 0 999px 999px 0; padding-right: 13px; }
/* TOGGLE-ACTIVE-FIX(2026-07-23): 활성=브랜드 테라코타 채움+크림 글자, 비선택=연한 크림+진한 글자.
   슬롯 기본(위 1164)이 활성 배경을 동일 특이도·후순위로 덮던 버그를 슬롯 스코프 is-active(0,3,0)로 확정.
   (검정/흰색 시안은 너무 강해 사용자 피드백으로 철회 — 따뜻한 그림책 톤 유지) */
.ai-view-toggle-slot .ai-view-toggle-btn.is-active { background: #c66f4a; border-color: #b85a3a; color: #fffaee; }
/* 글 보기(기본 order 0) → 그림 보기(order 2): 삽입 순서와 무관하게 항상 왼쪽=글, 오른쪽=그림. */
.ai-view-toggle-slot .ai-view-toggle-bar--image { order: 2; }

/* GPT 피드백 #3: 강한 경고가 붙은 후보 행 */
.ai-cand-row--warn {
  background: #fef3c7;
  border: 2px solid #f59e0b;
}
.ai-cand-strong-warn {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fde68a;
  color: #92400e;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   AI 안내 카드 (showAiNotice) — 브라우저 기본 alert 대체
   기존 .ai-modal 톤(warm paper #fffaee, 코랄 #c66f4a) 따름.
   ════════════════════════════════════════════════════════════════ */
.ai-notice-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 31, 16, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 700;            /* 호출 lock 모달(600)보다 위 — 안내는 항상 보이게 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ai-overlay-fade-in 0.16s ease-out;
}
.ai-notice-card {
  background: #fffaee;
  border-radius: 18px;
  width: 100%;
  max-width: 400px;
  padding: 24px 24px 20px;
  box-shadow: 0 18px 50px rgba(43, 31, 16, 0.28);
  font-family: 'Nanum Gothic', sans-serif;
  color: #2b1f10;
  text-align: center;
  animation: ai-modal-pop 0.2s ease-out;
}
.ai-notice-title {
  font-size: 18px;
  font-weight: 800;
  color: #c66f4a;
  margin-bottom: 12px;
  line-height: 1.35;
  word-break: keep-all;
}
.ai-notice-message {
  font-size: 14.5px;
  line-height: 1.65;
  color: #4a3a26;
  word-break: keep-all;
  white-space: normal;
}
.ai-notice-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.ai-notice-ok {
  min-width: 120px;
  padding: 11px 22px;
  border: none;
  border-radius: 12px;
  background: #c66f4a;
  color: #fffaee;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ai-notice-ok:hover { background: #b25f3c; }
.ai-notice-ok:focus-visible { outline: 3px solid rgba(198, 111, 74, 0.4); outline-offset: 2px; }

@media (max-width: 480px) {
  .ai-notice-card { max-width: 340px; padding: 20px 18px 16px; border-radius: 16px; }
  .ai-notice-title { font-size: 17px; }
  .ai-notice-message { font-size: 14px; }
  .ai-notice-ok { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   AI 완료 toast (showAiToast) — 단순 성공 알림.
   확인 버튼 없이 화면 하단에 잠깐 떴다가 자동으로 사라짐.
   ════════════════════════════════════════════════════════════════ */
.ai-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 760;            /* 안내 카드(700)보다 위 — 잠깐 뜨는 알림 */
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: 14px;
  background: #eef7ec;      /* 부드러운 초록빛 크림 */
  border: 1px solid #cfe6c7;
  box-shadow: 0 10px 30px rgba(43, 31, 16, 0.18);
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2f5132;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  cursor: default;
}
.ai-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
  cursor: pointer;         /* 탭하면 바로 닫힘 */
}
.ai-toast-icon { flex: 0 0 auto; font-size: 15px; }
.ai-toast-text { line-height: 1.45; word-break: keep-all; }
@media (max-width: 480px) {
  .ai-toast { bottom: 20px; padding: 11px 16px; font-size: 13.5px; }
}

/* ════════════════════════════════════════════════════════════════
   viewer 커스텀 확인 모달 (showViewerConfirm) — 브라우저 기본 confirm 대체.
   .ai-notice 톤(warm paper #fffaee) 따름. 위험 작업은 .is-danger 강조.
   ════════════════════════════════════════════════════════════════ */
.viewer-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 31, 16, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 100060;         /* DRAW-CONFIRM-Z-FIX(2026-07-14): 선택을 요구하는 confirm은 항상 최상위.
                              기존 720은 그리기 모달(9999)·기타 maker 모달(10006/10010)·나침반(100000/1)
                              뒤에 숨어, 그림 그린 뒤 X/저장 시 '저장 안 하고 닫을까요?' confirm이 안 보여
                              X가 안 먹는 것처럼 보이던 버그(사용자 보고). 모든 모달 위로 올려 항상 클릭 가능. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ai-overlay-fade-in 0.16s ease-out;
}
.viewer-confirm-card {
  background: #fffaee;
  border-radius: 18px;
  width: 100%;
  max-width: 400px;
  padding: 24px 24px 20px;
  box-shadow: 0 18px 50px rgba(43, 31, 16, 0.28);
  font-family: 'Nanum Gothic', sans-serif;
  color: #2b1f10;
  text-align: center;
  animation: ai-modal-pop 0.2s ease-out;
}
.viewer-confirm-title {
  font-size: 18px;
  font-weight: 800;
  color: #c66f4a;
  margin-bottom: 12px;
  line-height: 1.35;
  word-break: keep-all;
}
.viewer-confirm-message {
  font-size: 14.5px;
  line-height: 1.65;
  color: #4a3a26;
  word-break: keep-all;
}
.viewer-confirm-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.viewer-confirm-cancel,
.viewer-confirm-ok {
  min-width: 110px;
  padding: 11px 20px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.viewer-confirm-cancel {
  background: #efe6d4;
  color: #6b5638;
}
.viewer-confirm-cancel:hover { background: #e5d9c2; }
.viewer-confirm-ok {
  background: #c66f4a;
  color: #fffaee;
}
.viewer-confirm-ok:hover { background: #b25f3c; }
.viewer-confirm-ok.is-danger { background: #d2503c; }
.viewer-confirm-ok.is-danger:hover { background: #bd4231; }
.viewer-confirm-cancel:focus-visible,
.viewer-confirm-ok:focus-visible {
  outline: 3px solid rgba(198, 111, 74, 0.4);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .viewer-confirm-card { max-width: 340px; padding: 20px 18px 16px; border-radius: 16px; }
  .viewer-confirm-title { font-size: 17px; }
  .viewer-confirm-message { font-size: 14px; }
  .viewer-confirm-actions { flex-direction: column-reverse; gap: 8px; }
  .viewer-confirm-cancel,
  .viewer-confirm-ok { width: 100%; }
}

/* ══ FIELD-REGRESSION-FIX-2: 인쇄 게이트 공통 — 문서 클리핑 해제 ══
   viewer.css의 화면용 html,body{height:100%;overflow:hidden}이 인쇄 fragmentation을
   뷰포트 1페이지로 잘라(그림책 인쇄가 표지+지도+장면 한 장·1/1) 다중 페이지 인쇄를 막았다.
   각 인쇄 open()이 <html>에 print-doc-unclip을 부여/제거(afterprint 포함) — 게이트 인쇄에만 적용.
   tc-print(1장짜리)는 기존 동작 유지라 무변경. */
/* PRINT-HELPER(2026-07-20): screen 추가 — 인쇄 도우미 미리보기 동안 페이지 스크롤 허용.
   클래스(print-doc-unclip)가 게이트라 평상시 화면 영향 0. */
@media print, screen {
  html.print-doc-unclip, html.print-doc-unclip body {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ══ WRITE-AFTER-PRINT-1: 고쳐쓰기 자료 인쇄 (gate: body.print-write-after) ══
   root는 화면에서 항상 숨김 — 버튼 경유 인쇄 동안에만 print 매체에서 표시.
   기존 tc-print-*(나침반) gate와 독립. 흑백 가독 우선(색 의존 없음). */
.write-after-print-root { display: none; }
@media print {
  body.print-write-after > *:not(.write-after-print-root) { display: none !important; }
  body.print-write-after .write-after-print-root {
    display: block; width: 690px; margin: 0 auto; color: #111;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; /* CROSS-A: 윈도우도 동일 웹폰트로 인쇄(맥 검수=실인쇄 일치) */ font-size: 11pt; line-height: 1.5;
  }
  body.print-write-after .wa-print-title { font-size: 18pt; margin: 0 0 4px; }
  body.print-write-after .wa-print-meta { font-size: 10pt; color: #333; }
  body.print-write-after .wa-print-guide { font-size: 10.5pt; margin: 6px 0 2px; padding: 6px 10px; border: 1.5px solid #999; border-radius: 6px; }
  body.print-write-after .wa-print-head { border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 10px; }
  body.print-write-after .wa-print-section { margin-top: 12px; }
  /* WA-PRINT-PAGEBREAK: 작품 검사 섹션은 새 페이지에서 시작(생각 점검 질문과 안 겹침·사용자 요청). */
  body.print-write-after .wa-print-section--newpage { break-before: page; page-break-before: always; margin-top: 0; }
  body.print-write-after .wa-print-section-title { font-size: 13pt; margin: 0 0 6px; border-left: 4px solid #111; padding-left: 8px; }
  body.print-write-after .wa-print-item { border: 1px solid #aaa; border-radius: 6px; padding: 7px 10px; margin-bottom: 7px; break-inside: avoid; }
  body.print-write-after .wa-print-item-row { display: flex; justify-content: space-between; gap: 8px; font-size: 10pt; margin-bottom: 3px; }
  body.print-write-after .wa-print-check { font-weight: 700; }
  body.print-write-after .wa-print-scene { color: #333; font-weight: 700; }
  body.print-write-after .wa-print-text { font-size: 11pt; }
  body.print-write-after .wa-print-sub { font-size: 9.5pt; color: #444; margin-top: 2px; }
  body.print-write-after .wa-print-memoline { height: 20px; border-bottom: 1px dashed #888; margin-top: 6px; }
}

/* ══ PICTUREBOOK-PRINT-1: 그림책 분기 인쇄 (gate: body.print-picturebook) ══
   root 화면 상시 숨김 — 버튼 경유 인쇄에만 print 매체 표시. 교사 PC A4 기준·흑백 가독. */
.pb-print-root { display: none; }
/* PRINT-MAXFIT(2026-07-09): 그림책 인쇄 사방 흰여백 최소화 — 브라우저 기본 페이지 여백(~1cm) 대신 6mm.
   named @page라 그림책 페이지(.pbp-page)에만 적용 → 고쳐쓰기/나침반 등 다른 인쇄물 여백엔 영향 없음.
   vh는 페이지 박스 기준이라 여백 축소 시 콘텐츠(96vh)가 자동으로 커짐. ⚠️너무 줄이면 프린터 하드웨어
   여백에서 가장자리 잘림 → 6mm는 안전선(실프린터 1회 확인). */
/* PRINT-LANDSCAPE(2026-07-20 사용자 결정): 그림책 인쇄=가로 고정 — 무대가 3:2 가로라
   가로 용지가 기본. size 지정으로 인쇄 다이얼로그 방향 선택과 무관하게 잠금(named page라
   나침반/고쳐쓰기 등 다른 인쇄물엔 무영향). 콘텐츠 박스=297−12×210−12mm=285×198mm.
   페이지 높이도 vh→mm 고정으로 전환(아래) — 화면 미리보기와 인쇄가 같은 mm 기하를 계산
   = 도우미 실측·줄바꿈·세로 넘침 판정까지 전부 인쇄와 동일해짐. */
@page pbprint { size: A4 landscape; margin: 6mm; }
/* PRINT-HELPER(2026-07-20): @media print → print, screen — 블록 전체가 body.print-picturebook
   클래스로 게이트돼 있어(전 셀렉터 검증) 평상시 화면 영향 0. 클래스는 인쇄 직전/도우미
   미리보기 동안만 부여 → 같은 레이아웃을 화면에서도 계산·표시(도우미 실측·WYSIWYG 기반).
   @page/break-after는 screen에서 자연 무시. */
/* 감사 M15(2026-07-20): 아래 게이트가 긴급 공지(📢)·확인창(maker-confirm)까지 통째로
   숨겨 도우미 미리보기 중 교사 주의·선택 요구가 안 보이던 것 — 화면에서만 예외 복원.
   인쇄 매체(print)는 기존대로 전부 숨김(인쇄물 오염 0). id 셀렉터라 게이트보다 우선. */
@media screen {
  body.print-picturebook > #branch-notice-banner,
  body.print-picturebook > #maker-confirm-root { display: flex !important; }
}
@media print, screen {
  body.print-picturebook > *:not(.pb-print-root) { display: none !important; }
  body.print-picturebook .pb-print-root {
    display: block; width: auto; max-width: 100%; margin: 0; color: #111;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; /* CROSS-A: 윈도우도 동일 웹폰트로 인쇄(맥 검수=실인쇄 일치) */ line-height: 1.5;
  }
  body.print-picturebook .pbp-page { break-after: page; page: pbprint; }
  body.print-picturebook .pbp-page:last-child { break-after: auto; }
  /* 표지 — DESIGN-3: 전면 프레임 카드(이중 테두리)·제목 묶음·큰 표지 그림·하단 모둠/날짜 */
  /* FOLLOWUP-2: vh 예산 폐기 → 고정 950px — 브라우저 여백/vh 해석 변동에도 A4 콘텐츠(~1027px)
     안에 항상 수납(표지 92vh 실측 1033px가 페이지를 넘겨 이후 장면이 경계에 걸리던 트리거 제거). */
  /* FOLLOWUP-3: 950px 고정은 A4 '세로' 가정 — 사용자가 가로 모드로 인쇄하면(콘텐츠 ~700px)
     페이지마다 넘쳐 분할되던 문제. 96vh = 인쇄 페이지 박스 기준 → 용지 방향 자동 대응.
     (이전 vh 문제는 min-height+avoid 부재 조합이 원인 — 지금은 height 고정+hidden+avoid라 초과 불가) */
  /* PRINT-LANDSCAPE: 96vh→196mm — 가로 A4 콘텐츠 높이(198mm)−2mm 안전(브라우저 반올림로
     빈 페이지 끼는 고전 함정 방지). mm는 매체 무관이라 화면 미리보기=인쇄 동일. */
  body.print-picturebook .pbp-cover { height: 196mm; min-height: 0; display: flex; box-sizing: border-box; overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
  /* PAPER-PRINT-THEME(2026-07-09): 표지·글페이지도 장면과 같은 누런 종이+좌측 스프링 제본으로 통일(책 일관성·사용자 승인). */
  body.print-picturebook .pbp-cover,
  body.print-picturebook .pbp-publish {
    position: relative; padding-left: 46px;
    background:
      linear-gradient(90deg, rgba(120,98,52,.12) 0, rgba(120,98,52,.03) 16px, transparent 32px),
      repeating-linear-gradient(115deg, rgba(120,100,60,.02) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(22deg, rgba(150,135,95,.016) 0 1px, transparent 1px 9px),
      linear-gradient(#f7eece, #ece0bf);
    border: 1px solid rgba(150,135,100,.55); border-radius: 5px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.print-picturebook .pbp-cover::before,
  body.print-picturebook .pbp-publish::before {
    content: ""; position: absolute; left: 7px; top: 5%; width: 24px; height: 90%; z-index: 4; pointer-events: none;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 27'><ellipse cx='15' cy='13.5' rx='3.3' ry='4.2' fill='%23e7dcc0'/><ellipse cx='15' cy='13.5' rx='3.3' ry='4.2' fill='none' stroke='%23ad9d78' stroke-width='1'/><path d='M2 5 Q22 7 19 13.5 Q22 20 2 22' fill='none' stroke='%23aaa28d' stroke-width='2.8' stroke-linecap='round'/><path d='M4 6.5 Q18.5 9 16.5 13' fill='none' stroke='%23ded6c2' stroke-width='1' stroke-linecap='round'/></svg>") repeat-y left top/24px 27px;
    filter: drop-shadow(0 1px 1px rgba(90,70,40,.22));
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.print-picturebook .pbp-cover-frame {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center;
    border: 1.5px solid rgba(120,90,50,0.4); border-radius: 12px; outline: 1px solid rgba(150,135,100,.4); outline-offset: 5px;
    padding: 30px 28px 24px; margin: 6px;
  }
  body.print-picturebook .pbp-cover-brand { font-size: 10.5pt; color: #555; letter-spacing: .22em; }
  /* COVER-BALANCE(2026-07-09): margin-top:auto — 브랜드=상단·제목+그림=세로중앙·모둠/날짜(foot margin-top:auto)=하단
     3분할 균형(요소가 상단에 몰리던 문제 해소). foot도 auto라 두 auto가 여백을 균등 분배. */
  body.print-picturebook .pbp-cover-titlewrap { margin-top: auto; }
  body.print-picturebook .pbp-cover-title { font-size: 30pt; line-height: 1.25; margin: 0 0 8px; word-break: keep-all; }
  body.print-picturebook .pbp-cover-sub { font-size: 13pt; color: #333; word-break: keep-all; }
  body.print-picturebook .pbp-cover-img {
    margin-top: 24px; width: 92%; height: auto; max-height: 480px; object-fit: contain;
    border: 1px solid #999; border-radius: 10px; box-sizing: border-box;
  }
  body.print-picturebook .pbp-cover-noimg-deco { font-size: 40pt; color: #c9c2b4; margin: auto 0; }
  body.print-picturebook .pbp-cover-foot {
    margin-top: auto; padding-top: 16px; border-top: 1px solid #ccc; width: 72%;
  }
  body.print-picturebook .pbp-cover-team { font-size: 11.5pt; font-weight: 700; }
  /* 이야기 길 지도 */
  body.print-picturebook .pbp-map-title { font-size: 15pt; margin: 0 0 4px; }
  body.print-picturebook .pbp-map-guide { font-size: 10pt; color: #333; border: 1.5px solid #999; border-radius: 6px; padding: 5px 9px; margin-bottom: 8px; }
  body.print-picturebook .pbp-map-line { display: flex; gap: 8px; font-size: 10.5pt; padding: 2.5px 0; border-bottom: 1px dotted #bbb; }
  body.print-picturebook .pbp-map-num { flex: 0 0 40px; font-weight: 700; }
  body.print-picturebook .pbp-map-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.print-picturebook .pbp-map-goto { flex: 0 0 auto; color: #333; }
  body.print-picturebook .pbp-map-line--extra { color: #666; }
  body.print-picturebook .pbp-map-extra-note { font-size: 9.5pt; color: #444; margin-top: 6px; }
  /* 장면(2개/페이지) */
  body.print-picturebook .pbp-scene { border: 1.5px solid #888; border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; break-inside: avoid; min-height: 44%; }
  body.print-picturebook .pbp-scene-head { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid #ccc; padding-bottom: 4px; margin-bottom: 6px; }
  body.print-picturebook .pbp-scene-num { font-size: 12pt; font-weight: 800; border: 2px solid #111; border-radius: 6px; padding: 1px 8px; }
  body.print-picturebook .pbp-scene-flag { font-size: 9pt; color: #333; border: 1px solid #999; border-radius: 50px; padding: 1px 8px; }
  body.print-picturebook .pbp-scene-title { font-size: 11pt; font-weight: 700; }
  body.print-picturebook .pbp-scene-img { display: block; max-width: 100%; max-height: 230px; object-fit: contain; margin: 0 auto 6px; }
  body.print-picturebook .pbp-scene-body { font-size: 11pt; white-space: pre-wrap; }
  body.print-picturebook .pbp-scene-body--empty { color: #777; font-style: italic; }
  body.print-picturebook .pbp-choices { margin-top: 7px; border-top: 1px dashed #aaa; padding-top: 5px; }
  body.print-picturebook .pbp-choice { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5pt; padding: 1.5px 0; }
  body.print-picturebook .pbp-choice-goto { font-weight: 700; text-decoration: underline; white-space: nowrap; }
  body.print-picturebook .pbp-end-mark { margin-top: 8px; text-align: center; font-size: 11pt; font-weight: 700; letter-spacing: .2em; }

  /* ── PICTUREBOOK-PUBLISH-PRINT-1: 출판형 — 장면당 1페이지·큰 그림·큰 글 ──
     구 점검형(2장면/페이지 축소 카드) 규칙을 .pbp-publish 페이지에서 덮어씀.
     A4 세로·교사 PC Chrome 기준. 흑백 출력도 읽히도록 무채색 유지. */
  /* FOLLOWUP-2: 고정 950px 예산 — 한 장면=한 페이지 구조 보장(vh 폐기) */
  body.print-picturebook .pbp-publish {
    height: 196mm; min-height: 0; display: flex; flex-direction: column;   /* PRINT-LANDSCAPE: vh→mm */
    break-inside: avoid; page-break-inside: avoid; overflow: hidden; box-sizing: border-box;
  }
  body.print-picturebook .pbp-publish .pbp-scene--full {
    border: 1.5px solid rgba(120,90,50,0.4); border-radius: 14px; padding: 10px 16px 14px; margin: 2px; min-height: 0;
    display: flex; flex-direction: column; flex: 1 1 auto; break-inside: avoid;
    position: relative;   /* LAYOUT-4: 장면번호 오버레이 기준 */
  }
  body.print-picturebook .pbp-publish .pbp-num-overlay,
  body.print-picturebook .pbp-scenepub .pbp-num-overlay {
    /* LAYOUT-4: N번 배지 = 그림 좌상단 오버레이 — 별도 행 제거(세로 공간 0) */
    position: absolute; top: 18px; left: 24px; z-index: 2;
    background: rgba(255,252,244,0.94); border: 1.5px solid #7a6a4a; border-radius: 8px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    padding: 2px 10px; font-size: 11pt; font-weight: 800; color: #4a3a22;
  }
  body.print-picturebook .pbp-publish .pbp-scene-caption {
    text-align: center; font-size: 12pt; font-weight: 700; margin: 2px 0 4px;
  }
  body.print-picturebook .pbp-publish .pbp-scene-img {
    /* DESIGN-3: 그림이 페이지의 주인공 — width:100%로 저해상도 원본도 페이지 폭까지 확대
       (max-height 상한만으론 intrinsic이 작은 그림이 그대로 작게 나옴). contain=크롭 0. */
    width: 100%; height: auto; max-height: 500px; object-fit: contain;
    margin: 0 auto 12px; border: 1px solid #bbb; border-radius: 10px; box-sizing: border-box;
  }
  body.print-picturebook .pbp-publish .pbp-img-missing,
  body.print-picturebook .pbp-scenepub .pbp-img-missing {
    margin: 0 auto 14px; padding: 64px 20px; width: 82%; box-sizing: border-box;
    border: 1.5px dashed #999; border-radius: 10px; text-align: center; color: #666; font-size: 11pt;
  }
  body.print-picturebook .pbp-publish .pbp-scene-body {
    font-size: 13.5pt; line-height: 1.7; word-break: keep-all; padding: 0 8px;
  }
  /* 그림 없는 장면 — 본문을 세로 중앙에 더 크게(독서형 페이지).
     POLISH-2: 선택지/엔딩을 하단 고정(margin-top:auto) 대신 본문 바로 아래 고정 간격으로 —
     본문 위쪽·선택지 맨 아래로 갈라져 가운데가 텅 비어 보이던 문제 수정(본문+선택지 묶음이 중앙). */
  body.print-picturebook .pbp-publish .pbp-scene--noimg .pbp-scene-body {
    margin: auto auto 0; font-size: 15pt; line-height: 1.9; text-align: center;
    padding: 26px 32px; border: 1px solid #999; border-radius: 12px; width: 84%; box-sizing: border-box;
    font-family: var(--pb-font-family, 'Gowun Batang', 'Nanum Gothic', serif);   /* PRINT-FONT */
  }
  body.print-picturebook .pbp-publish .pbp-scene--noimg .pbp-choices {
    margin-top: 22px; margin-bottom: auto; border-top: none; padding: 0 30px;
  }
  body.print-picturebook .pbp-publish .pbp-scene--noimg .pbp-end-mark {
    margin-top: 22px; margin-bottom: auto; padding: 0;
  }
  body.print-picturebook .pbp-publish .pbp-scene--noimg .pbp-num-overlay { top: 14px; left: 18px; }
  /* LAYOUT-4: 선택지 = 본문 아래 흐름 배치(하단 고정 폐기) — 다음 페이지로 선택지만 넘어가는
     현상 제거. 구분선으로 본문과 구분. 긴 선택지는 어절 줄바꿈. */
  body.print-picturebook .pbp-publish .pbp-choices,
  body.print-picturebook .pbp-scenepub .pbp-choices {
    margin-top: 12px; border-top: 1.5px solid #999; padding-top: 8px; break-inside: avoid;
  }
  body.print-picturebook .pbp-publish .pbp-choice,
  body.print-picturebook .pbp-scenepub .pbp-choice {
    font-size: 12pt; padding: 2.5px 0; display: flex; justify-content: space-between; gap: 10px;
  }
  body.print-picturebook .pbp-publish .pbp-choice-label,
  body.print-picturebook .pbp-scenepub .pbp-choice-label { word-break: keep-all; }
  body.print-picturebook .pbp-publish .pbp-choice-goto,
  body.print-picturebook .pbp-scenepub .pbp-choice-goto { white-space: nowrap; flex: none; }
  body.print-picturebook .pbp-publish .pbp-end-mark,
  body.print-picturebook .pbp-scenepub .pbp-end-mark {
    margin-top: 14px; font-size: 14pt; padding: 8px 0 4px;
  }
  body.print-picturebook .pbp-cover-date { margin-top: 6px; font-size: 10.5pt; color: #444; }

  /* ── SCENE-PUBLISH-PRINT-1: '장면 그대로' 무대 재현 ──
     인쇄 페이지 폭은 A4에서 일정 → 3:2 무대 + % 좌표 + px 고정 폰트 = 태블릿/PC 해상도와
     무관하게 항상 같은 출력(화면의 cqw/cqh 가변 폰트 문제 제거). 캡처 아님 — DOM 재현. */
  /* FOLLOWUP-2: 장면 페이지 = 고정 950px grid [무대 1fr | 선택지 auto] + 분할 금지 —
     stage와 선택지 사이에 page break가 구조적으로 불가능(overflow:hidden = 초과 시에도 분할 대신
     내부 수납·선택지 공간 우선 보장). 무대는 남은 높이 안에서 3:2 유지 fit. */
  body.print-picturebook .pbp-scenepub {
    height: 196mm; min-height: 0; box-sizing: border-box;   /* PRINT-LANDSCAPE: vh→mm */
    display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto;   /* 무대 | (split 본문) | 선택지 | 번호 */
    break-inside: avoid; page-break-inside: avoid; overflow: hidden;
    /* PAPER-PRINT-THEME(2026-07-09): 인쇄 = paper-storybook 테마 고정 반영(작품별 추종 X·사용자 결정).
       v03-modes.css paper-storybook .pb-page 값 그대로 이식. 내용은 안쪽으로(좌측=제본 공간). */
    position: relative;
    padding: 20px 28px 18px 48px;
    background:
      linear-gradient(90deg, rgba(120,98,52,.12) 0, rgba(120,98,52,.03) 16px, transparent 32px),
      repeating-linear-gradient(115deg, rgba(120,100,60,.02) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(22deg, rgba(150,135,95,.016) 0 1px, transparent 1px 9px),
      linear-gradient(#f7eece, #ece0bf);
    border: 1px solid rgba(150,135,100,.55);
    border-radius: 5px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* 좌측 스프링 제본(타공+금속링 코일) — v03-modes.css paper .pb-page::before SVG 그대로 */
  body.print-picturebook .pbp-scenepub::before {
    content: ""; position: absolute; left: 7px; top: 5%; width: 24px; height: 90%; z-index: 4; pointer-events: none;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 27'><ellipse cx='15' cy='13.5' rx='3.3' ry='4.2' fill='%23e7dcc0'/><ellipse cx='15' cy='13.5' rx='3.3' ry='4.2' fill='none' stroke='%23ad9d78' stroke-width='1'/><path d='M2 5 Q22 7 19 13.5 Q22 20 2 22' fill='none' stroke='%23aaa28d' stroke-width='2.8' stroke-linecap='round'/><path d='M4 6.5 Q18.5 9 16.5 13' fill='none' stroke='%23ded6c2' stroke-width='1' stroke-linecap='round'/></svg>") repeat-y left top/24px 27px;
    filter: drop-shadow(0 1px 1px rgba(90,70,40,.22));
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.print-picturebook .pbp-stagewrap {
    min-height: 0; display: flex; align-items: center; justify-content: center;
  }
  body.print-picturebook .pbp-stage2 {
    /* PRINT-LANDSCAPE: width:100%+max-height → height:100%+max-width — 가로 용지에선 세로가
       빠듯해 width 기준이면 max-height 캡으로 3:2가 깨짐(말풍선 % 좌표 왜곡). 세로 기준이면
       row 높이×1.5 폭으로 항상 참 3:2, stagewrap flex-center가 가로 중앙 정렬. */
    position: relative; height: 100%; aspect-ratio: 3 / 2; max-width: 100%;
    border: 1.5px solid rgba(120,90,50,0.45); border-radius: 12px; overflow: hidden;
    /* PRINT-STAGE-NOWHITE(2026-07-09): 흰 배경 제거 — 3:2 아닌 그림의 contain 레터박스 여백에 흰색이 드러나던 문제.
       투명으로 두어 종이 배경(paper 그라디언트)이 비치게 = 흰 박스 사라짐. 무대는 3:2 유지(말풍선 % 좌표 정합).
       ⚠️3:2 AI 그림 자체에 흰 여백이 구워진 경우는 CSS로 불가(이미지 트리밍=별도). */
    background: transparent; box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(110,95,55,0.16);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.print-picturebook .pbp-stage2-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;   /* 감상과 동일·크롭 0 */
  }
  body.print-picturebook .pbp-stage2-title {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    max-width: 88%; padding: 4px 14px; border-radius: 9px;
    background: rgba(255,255,255,0.88); font-size: 20px; font-weight: 800; color: #222;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    text-align: center; word-break: keep-all; z-index: 2;
  }
  body.print-picturebook .pbp-stage2-bubble {
    position: absolute; box-sizing: border-box; padding: 10px 14px;
    border-radius: 9px 9px 11px 3px; z-index: 1; overflow: visible;   /* paper 메모지 비대칭 radius */
    /* PAPER-BUBBLE(2026-07-09): 화면 paper-storybook 말풍선(v03-modes.css) 베이지 톤 이식.
       흰색 인라인 대신 print.js가 넘긴 --pb-box-opacity(진하기)로 베이지 배경 적용. */
    background: rgba(245,238,222, var(--pb-box-opacity, .88));
    border: 1px solid rgba(194,171,130,.5);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;   /* '배경 그래픽' OFF여도 말풍선 배경 인쇄 */
  }
  /* paper 메모지 우상단 접힌 모서리(dog-ear) */
  body.print-picturebook .pbp-stage2-bubble::after {
    content: ""; position: absolute; top: 0; right: 0; width: 17px; height: 17px; pointer-events: none;
    background: linear-gradient(225deg, #e3d4ae 0 50%, transparent 50%);
    box-shadow: -1px 1px 2px rgba(120,95,50,.22); border-bottom-left-radius: 3px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.print-picturebook .pbp-stage2-bubble-p {
    /* PRINT-STYLE(#63): 크기·굵기·색도 학생 설정 반영(print.js가 --pb-* 심음). 미설정=인쇄 기본값. */
    margin: 0; font-size: var(--pb-fs-body, 19px); font-weight: var(--pb-fw-body, 400); line-height: 1.55;
    white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; color: var(--pb-color-override, #222);
    /* PRINT-FONT(2026-07-09): 화면과 동일 본문 글씨체(--pb-font-family, print.js가 심음). 미설정=화면 기본 Gowun Batang. */
    font-family: var(--pb-font-family, 'Gowun Batang', 'Nanum Gothic', serif);
  }
  body.print-picturebook .pbp-scenepub .pbp-num-overlay {
    top: 10px; left: 12px;
    background: rgba(255,252,244,0.94); border-color: #7a6a4a; color: #4a3a22;
  }
  body.print-picturebook .pbp-scenepub-body {
    /* PRINT-STYLE(#63): 크기·굵기·색 학생 설정 반영(미설정=인쇄 기본). */
    margin-top: 10px; padding: 8px 12px; font-size: var(--pb-fs-body, 15px); font-weight: var(--pb-fw-body, 400); line-height: 1.65;
    border: 1px solid #bbb; border-radius: 10px; color: var(--pb-color-override, inherit);
    white-space: pre-wrap; word-break: keep-all;
    font-family: var(--pb-font-family, 'Gowun Batang', 'Nanum Gothic', serif);   /* PRINT-FONT */
  }

  /* ── SCENEPUB-CHOICE-ROW-1: 인쇄용 행동버튼 = 뷰어처럼 한 줄 compact chip ──
     선택지는 거의 2개·짧음 → 세로 3행 카드(옛 146px 예약) 대신 가로 flex 한 줄.
     남는 세로 공간은 무대(3:2)가 자동으로 차지 = 그림 최대화. 3개↑/긴 라벨은 wrap. */
  body.print-picturebook .pbp-scenepub .pbp-choices {
    margin-top: 10px; border-top: none; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px;
    min-height: 0; break-inside: avoid;
  }
  /* paper 노트 인덱스 탭 버튼 — v03-modes.css paper .choice-v03--picturebook 값 그대로 */
  body.print-picturebook .pbp-scenepub .pbp-choice {
    position: relative;
    background: linear-gradient(#f1e7cc, #e7d8b4);
    border: 1.2px solid #b6a479; border-radius: 3px 3px 5px 5px; padding: 7px 18px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; flex: 0 1 auto;
    box-shadow: 0 1px 1px rgba(110,95,55,.12);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.print-picturebook .pbp-scenepub .pbp-choice::before {
    content: ""; position: absolute; top: -4px; left: 14px; width: 18px; height: 5px; border-radius: 2px 2px 0 0;
    background: #ecdcb6; border: 1px solid #b6a479; border-bottom: none; pointer-events: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.print-picturebook .pbp-scenepub .pbp-choice-label { flex: none; word-break: keep-all; font-weight: 700; color: #4a3a22; }
  body.print-picturebook .pbp-scenepub .pbp-choice-goto { flex: none; white-space: nowrap; font-weight: 600; color: #7a6a4a; }
  body.print-picturebook .pbp-scenepub .pbp-end-mark {
    margin-top: 10px; min-height: 0; padding: 8px 0; display: flex; align-items: center; justify-content: center;
    font-size: 17px; letter-spacing: .25em;
  }
  /* PB-NUM-FOOT(2026-07-09): 장면 번호를 그림 좌상단 배지 대신 선택지 아래 중앙에(직관성·사용자 요청).
     그림/무그림 페이지 공통. scenepub는 grid 4번째 auto 행, publish는 flex 흐름 마지막. */
  body.print-picturebook .pbp-num-foot {
    text-align: center; margin-top: 9px; font-size: 12pt; font-weight: 800;
    color: #4a3a22; letter-spacing: .06em;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ══ PRINT-HELPER(2026-07-20): 인쇄 도우미 — 화면 미리보기 + 장면별 조절 UI ══
   위 print,screen 블록이 인쇄 레이아웃을 화면에도 그대로 계산해 주고, 여기는
   화면 전용 표시 품질(용지 폭 고정=인쇄와 동일 줄바꿈·책상 배경·페이지 그림자)과
   도우미 컨트롤(바/칩/뱃지)만 담당. 인쇄물에는 컨트롤 전부 미출력(@media print 숨김). */
@media screen {
  /* 용지 폭 재현: 가로 A4 297mm − @page 여백 6mm×2 = 285mm(PRINT-LANDSCAPE) — 페이지 높이도
     mm 고정이라 화면 실측·줄바꿈·세로 넘침 판정이 인쇄와 완전 동일. 좁은 기기는 96vw 양보(근사). */
  body.print-picturebook .pb-print-root {
    width: 285mm; max-width: 96vw; margin: 0 auto; background: transparent;
  }
  body.print-picturebook { background: #675f53; }
  body.print-picturebook .pbp-page { margin: 16px 0; box-shadow: 0 5px 20px rgba(0,0,0,.38); }
  /* 도우미 모드(root.pbp-helper-on)에서만: 상단 바 공간 + 말풍선 드래그 어포던스 */
  body.print-picturebook .pbp-helper-on { padding-top: 62px; padding-bottom: 46px; }
  body.print-picturebook .pbp-helper-on .pbp-stage2-bubble { cursor: grab; touch-action: none; }
  body.print-picturebook .pbp-helper-on .pbp-stage2-bubble.pbp-dragging { cursor: grabbing; outline: 2px dashed rgba(74,144,217,.85); }

  body.print-picturebook .pbp-helper-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 14px; background: rgba(43,37,30,.96); color: #f3ecdc;
    font-family: 'Jua', sans-serif; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.4);
  }
  body.print-picturebook .pbp-helper-bar__txt b { color: #ffd98a; }
  body.print-picturebook .pbp-helper-bar__btns { display: flex; gap: 8px; flex-shrink: 0; }
  body.print-picturebook .pbp-helper-btn {
    font-family: 'Jua', sans-serif; font-size: 14px; padding: 7px 14px; border-radius: 10px;
    border: 1.5px solid #c66f4a; background: #c66f4a; color: #fff; cursor: pointer;
  }
  body.print-picturebook .pbp-helper-btn--ghost { background: transparent; color: #e8ddc6; border-color: #8a7c66; }

  body.print-picturebook .pbp-helper-chip {
    position: absolute; top: 6px; right: 6px; z-index: 6;
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,253,246,.95); border: 1px solid #c9b98f; border-radius: 999px;
    padding: 3px 7px; font-family: 'Jua', sans-serif; font-size: 12.5px; color: #5b4a2e;
    box-shadow: 0 1px 5px rgba(0,0,0,.18);
  }
  body.print-picturebook .pbp-helper-chip button {
    font-family: inherit; font-size: 13px; line-height: 1; padding: 4px 8px;
    border: 1px solid #c9b98f; border-radius: 999px; background: #fff; color: #5b4a2e; cursor: pointer;
  }
  body.print-picturebook .pbp-helper-chip .pbp-helper-chip__val { min-width: 40px; text-align: center; }
  /* PRINT-HELPER-OPACITY(2026-07-22): 진하기 칩 — 글자 칩(top:6) 아래로 겹치지 않게. */
  body.print-picturebook .pbp-helper-chip--op { top: 44px; }
  body.print-picturebook .pbp-helper-chip .pbp-helper-chip__lab { font-size: 11.5px; color: #8a7c5e; padding: 0 2px 0 1px; }
  /* PRINT-HELPER-FONT(2026-07-23): 글씨체·색 칩 — 크기(6)·진하기(44) 아래(82)로 겹치지 않게. */
  body.print-picturebook .pbp-helper-chip--font { top: 82px; }
  body.print-picturebook .pbp-helper-chip .pbp-helper-font-sel {
    font-family: inherit; font-size: 12px; padding: 3px 5px; max-width: 104px;
    border: 1px solid #c9b98f; border-radius: 8px; background: #fff; color: #5b4a2e; cursor: pointer;
  }
  body.print-picturebook .pbp-helper-chip .pbp-helper-color {
    width: 26px; height: 24px; padding: 0; border: 1px solid #c9b98f; border-radius: 6px; background: #fff; cursor: pointer;
  }
  body.print-picturebook .pbp-helper-resize {
    position: absolute; right: -8px; bottom: -8px; width: 18px; height: 18px; z-index: 7;
    background: #fff; border: 2px solid #4a90d9; border-radius: 50%;
    cursor: nwse-resize; touch-action: none; box-shadow: 0 1px 4px rgba(0,0,0,.28);
  }
  body.print-picturebook .pbp-helper-badge {
    position: absolute; top: 6px; left: 6px; z-index: 6;
    background: rgba(192,57,43,.94); color: #fff; border-radius: 8px;
    padding: 4px 9px; font-family: 'Jua', sans-serif; font-size: 12.5px;
    box-shadow: 0 1px 5px rgba(0,0,0,.25);
  }
}
@media print {
  .pbp-helper-ui, .pbp-helper-chip, .pbp-helper-badge { display: none !important; }
}

/* ── ROTATE-BADGE-PRINT-LEAK(2026-07-20 사용자 보고): D7-3 "📱 가로로 보면…" 배지가
   body::before(가상요소)라 인쇄의 'body 자식 숨김' 규칙을 뚫고, position:fixed라 인쇄
   전 페이지에 반복 인쇄되던 leak. body 직접 가상요소 오버레이는 이 배지뿐(전수 확인)이라
   인쇄 매체 전체 + 그림책 미리보기(screen 클래스 게이트)에서 일괄 차단. ── */
@media print {
  body::before { content: none !important; }
}
body.print-picturebook::before { content: none !important; }