/* ==========================================================================
   picture-card.css — 그림카드 인쇄 (workbook 통합)
   A4 landscape 레이아웃 (2장/6장). 기존 print.css(폐기) 수치 그대로 차용.
   모든 선택자 .pc-* 접두어로 .wb-*와 격리.
   ========================================================================== */

/* ===== A4 landscape 페이지 공통 ===== */
.pc-page {
  width: 297mm;
  height: 210mm;
  margin: 0;
  padding: 10mm;
  background: white;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  page-break-after: always;
  page-break-inside: avoid;
}
.pc-page:last-child { page-break-after: auto; }

/* ===== 그리드 공통 ===== */
.pc-grid {
  width: 100%;
  height: 100%;
  display: grid;
  padding: 0;
  margin: 0;
}

/* ===== 카드 공통 (테두리 ON 고정, 글자는 렌더 안 함) ===== */
.pc-card {
  box-sizing: border-box;
  border: 1px solid #ccc;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.pc-card-img {
  object-fit: contain;
  max-width: 90%;
  max-height: 95%;
}

/* ===== 빈 슬롯 — 점선 네모 + 중앙 번호 (점진 채움 시그널) ===== */
.pc-card-empty {
  box-sizing: border-box;
  border: 3px dashed #D4CCBE;
  background: #fafafa;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-card-num {
  font-size: 180px;
  font-weight: 800;
  color: #C9BFAD;
  line-height: 1;
  letter-spacing: -4px;
}
/* 인쇄 시 빈 슬롯 투명 처리 (공간 유지 — 실 카드 위치 고정) */
@media print {
  .pc-card-empty { visibility: hidden !important; }
}

/* ===== 레이아웃 2×1 (A4 가로, 2장) — 기존 print.css layout-2x1 수치 ===== */
.pc-grid.layout-2x1 {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150mm;
  gap: 5mm;
}

/* ===== 레이아웃 3×2 (A4 가로, 6장) — 기존 print.css layout-3x2 수치 ===== */
.pc-grid.layout-3x2 {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 91mm;
  gap: 7mm;
}

/* ==========================================================================
   화면 미리보기 — 자체 wrap + scale (wb-page-wrap과 독립)
   JS(pcUpdateScale)가 --pc-scale + wrap height 동적 설정
   ========================================================================== */
@media screen {
  .wbk-workbook-panel .pc-page-wrap {
    width: 100%;
    overflow: hidden;
    margin-bottom: 32px;
    position: relative;
    background: #fff;
    border: 1px solid var(--warm-border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
  }
  .wbk-workbook-panel .pc-page-wrap:last-child { margin-bottom: 0; }

  .wbk-workbook-panel .pc-page-wrap .pc-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 297mm;
    height: 210mm;
    transform-origin: top left;
    transform: scale(var(--pc-scale, 0.5));
  }
}

/* ==========================================================================
   인쇄 — body.pc-active 조건부 landscape
   그림카드 상세 화면일 때만 발동 (워크북은 portrait 유지)
   ========================================================================== */
@media print {
  body.pc-active .app-header-new,
  body.pc-active .nav-bar,
  body.pc-active .wbk-word-panel,
  body.pc-active .wbk-wb-detail-bar,
  body.pc-active .wbk-wb-detail-info { display: none !important; }

  body.pc-active .wbk-layout,
  body.pc-active .wbk-workbook-panel,
  body.pc-active .wbk-mock-pages {
    display: block !important;
    overflow: visible !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  body.pc-active .pc-page-wrap {
    all: unset;
    display: block;
    page-break-after: always;
  }
  body.pc-active .pc-page-wrap:last-child { page-break-after: auto; }

  body.pc-active .pc-page {
    width: 297mm !important;
    height: 210mm !important;
    margin: 0 !important;
    padding: 10mm !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    position: static !important;
    overflow: hidden !important;
  }

  body.pc-active * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* @page landscape 는 picture-card.js가 그림카드 상세 진입 시
   <style id="pc-print-style"> 로 동적 주입/제거 (워크북 portrait 회귀 방지) */