/* ============================================================
   StitchCraft Edu — sewing-print.css (A4 전용 고정밀 인쇄 스타일)
   흑백 레이저 프린터 및 표준 A4 규격 최적화 (일반 워크북 & 시험지 모드)
   ============================================================ */

/* ------------------------------------------------------------
   화면 및 인쇄 공통: 워크북 시트 구성 요소
   ------------------------------------------------------------ */
.wb-header {
  border-bottom: 2px solid #111827;
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.wb-title-area h2 {
  font-size: 17pt;
  font-weight: 800;
  margin: 0;
  color: #111827;
  line-height: 1.25;
}

.wb-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* 우측 정렬 학생 인적사항 박스 */
.wb-student-box {
  border: 1.5px solid #111827;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 9.5pt;
  line-height: 1.45;
  text-align: right;
  background-color: #FFFFFF;
  white-space: nowrap;
}

/* 우측 상단 단일 QR 코드 배지 */
.wb-qr-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 7.5pt;
  color: #4B5563;
  text-align: center;
}

.wb-qr-img {
  width: 56px;
  height: 56px;
  display: block;
}

/* 도안 1: 원리 및 가이드 도안 */
.print-stitch-diagram svg {
  width: 100%;
  height: auto;
  max-height: 120px;
}

/* 종이 바느질 펀칭 실습판 (Punch & Sew) */
.wb-punch-card {
  border: 1.5px dashed #111827;
  border-radius: 6px;
  padding: 10px 14px;
  text-align: center;
  background-color: #FFFFFF;
}

.wb-punch-card-free {
  border: 1.5px dashed #4B5563;
}

.wb-punch-card-title {
  font-size: 9pt;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E5E7EB;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

/* 시험지 모드 실습판 카드 */
.test-item-card {
  border: 1.5px dashed #000000;
  border-radius: 6px;
  background-color: #FFFFFF;
  page-break-inside: avoid;
  break-inside: avoid;
}

.test-item-card:last-child {
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   A4 인쇄 전용 규칙 (@media print)
   ------------------------------------------------------------ */
@media print {
  /* 불필요한 웹 UI 요소 전면 숨김 */
  nav,
  header,
  footer,
  .sewing-nav,
  .settings-panel,
  .no-print,
  .canvas-toolbar,
  .canvas-player-bar,
  .floating-basket-bar,
  .floating-basket-vertical,
  .stitch-hover-preview-popover,
  .btn,
  button,
  input[type="checkbox"],
  .sort-select {
    display: none !important;
  }

  body, html {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 표준 A4 세로 규격 및 여백 */
  @page {
    size: A4 portrait;
    margin: 10mm 12mm 12mm 12mm;
  }

  .workbook-container,
  .workbook-layout,
  .preview-stage {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 각 바느질 워크북 시트 = 1페이지 강제 분할 */
  .a4-sheet {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 265mm !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    break-after: page !important;
  }

  .a4-sheet:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  /* 흑백 대비 최적화 */
  .hole-in {
    fill: #000000 !important;
    stroke: #000000 !important;
  }

  .hole-out {
    fill: #FFFFFF !important;
    stroke: #000000 !important;
    stroke-width: 2px !important;
  }

  .thread-front-line {
    stroke: #000000 !important;
    stroke-width: 3px !important;
  }

  .thread-back-line {
    stroke: #666666 !important;
    stroke-width: 2px !important;
    stroke-dasharray: 4 3 !important;
  }
}