/*
 * 파일명: page-templates.css
 * 파일경로: /home/ociws1/web/wifiqr.co.kr/public_html/assets/css/
 * 기능: 인쇄 템플릿 전용 — 화면 미리보기 + A4 인쇄 (카드/테이블텐트/포스터)
 * 작성일: 2026-06-12
 */

/* ===== 화면 미리보기 ===== */
.tpl-preview-area {
  margin-top: var(--space-5);
  display: flex;
  justify-content: center;
}

.tpl-sheet {
  display: none;
  background: #fff;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  width: 420px;            /* A4 화면 축소 미리보기 (210mm 비율 1:1.414) */
  min-height: 594px;
  padding: 32px;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tpl-sheet.is-current { display: flex; }
.tpl-sheet.tpl-landscape { width: 594px; min-height: 420px; }

/* 공통 구성 요소 */
.tpl-block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tpl-wifi-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800;
  color: #1a1a1a;
}
.tpl-wifi-label svg { width: 1.2em; height: 1.2em; }
.tpl-qr { background: #fff; image-rendering: pixelated; }
.tpl-ssid {
  font-weight: 600;
  color: #444;
  word-break: break-all;
}
.tpl-guide { color: #888; }
.tpl-watermark {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
  color: #b0b6c0;
}

/* 카드형 (테이블/리셉션 거치) */
.tpl-sheet[data-template="card"] .tpl-card-box {
  border: 1px dashed #ccd2da;      /* 재단선 */
  border-radius: 12px;
  padding: 36px 44px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tpl-sheet[data-template="card"] .tpl-wifi-label { font-size: 22px; }
.tpl-sheet[data-template="card"] .tpl-qr { width: 180px; height: 180px; }
.tpl-sheet[data-template="card"] .tpl-ssid { font-size: 14px; }
.tpl-sheet[data-template="card"] .tpl-guide { font-size: 11px; }

/* 테이블 텐트 (반 접기 — 위쪽 면은 180° 회전) */
.tpl-sheet[data-template="tent"] { padding: 0; justify-content: stretch; }
.tpl-tent-half {
  flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 24px;
}
.tpl-tent-half.is-flipped { transform: rotate(180deg); }
.tpl-tent-fold {
  width: 100%; border-top: 1px dashed #ccd2da;
  position: relative; height: 0;
}
.tpl-sheet[data-template="tent"] .tpl-wifi-label { font-size: 20px; }
.tpl-sheet[data-template="tent"] .tpl-qr { width: 150px; height: 150px; }
.tpl-sheet[data-template="tent"] .tpl-ssid { font-size: 13px; }
.tpl-sheet[data-template="tent"] .tpl-guide { font-size: 10px; }
.tpl-sheet[data-template="tent"] .tpl-watermark { position: static; margin-top: 6px; }

/* 포스터 (A4 벽면) */
.tpl-sheet[data-template="poster"] .tpl-wifi-label { font-size: 34px; }
.tpl-sheet[data-template="poster"] .tpl-qr { width: 280px; height: 280px; }
.tpl-sheet[data-template="poster"] .tpl-ssid { font-size: 18px; }
.tpl-sheet[data-template="poster"] .tpl-guide { font-size: 14px; }

/* ===== 인쇄 ===== */
/* breakpoint 아님 — 인쇄 매체: 선택된 시트만 A4 실제 크기로 출력 */
@media print {
  @page { size: A4 portrait; margin: 0; }

  body { background: #fff; }
  .site-header, .site-footer, .no-print { display: none !important; }
  /* ↑ 인쇄 시 화면 요소 강제 숨김 — 인쇄 매체 한정 예외적 !important 허용 */

  .page-main { padding: 0; }
  .tpl-preview-area { margin: 0; }

  .tpl-sheet { display: none; }
  .tpl-sheet.is-current {
    display: flex;
    width: 210mm;
    min-height: 297mm;
    border: none;
    box-shadow: none;
    padding: 20mm;
  }
  .tpl-sheet.tpl-landscape.is-current { width: 210mm; min-height: 297mm; }

  .tpl-sheet[data-template="card"] .tpl-qr { width: 70mm; height: 70mm; }
  .tpl-sheet[data-template="card"] .tpl-wifi-label { font-size: 11mm; }
  .tpl-sheet[data-template="card"] .tpl-ssid { font-size: 6mm; }
  .tpl-sheet[data-template="card"] .tpl-guide { font-size: 4mm; }

  .tpl-sheet[data-template="tent"].is-current { padding: 0; }
  .tpl-sheet[data-template="tent"] .tpl-qr { width: 60mm; height: 60mm; }
  .tpl-sheet[data-template="tent"] .tpl-wifi-label { font-size: 10mm; }
  .tpl-sheet[data-template="tent"] .tpl-ssid { font-size: 5.5mm; }
  .tpl-sheet[data-template="tent"] .tpl-guide { font-size: 3.5mm; }

  .tpl-sheet[data-template="poster"] .tpl-qr { width: 120mm; height: 120mm; }
  .tpl-sheet[data-template="poster"] .tpl-wifi-label { font-size: 16mm; }
  .tpl-sheet[data-template="poster"] .tpl-ssid { font-size: 8mm; }
  .tpl-sheet[data-template="poster"] .tpl-guide { font-size: 5mm; }

  .tpl-watermark { font-size: 3.2mm; bottom: 8mm; }
}