/*
 * 파일명: design-wood.css
 * 파일경로: /home/ociws1/web/wifiqr.co.kr/public_html/assets/css/
 * 기능: 유료 디자인 '우드(인그레이빙)' 본문 전용 — 분리형 3호.
 *       1~4번과 동일한 mm 카드 박스(.print-box) 안에서 동작 → 사이즈/방향/A4 예측 그대로.
 *       크기는 컨테이너 쿼리 단위(cqmin)로 박스 크기에 자동 비례(화면·인쇄 공통).
 * 작성일: 2026-06-14
 *
 * ★ 특이도 주의(필독): 표준 page-templates.css 의 `.print-box .tpl-xxx`(0-2-0)가 단일 클래스(0-1-0)를
 *   덮어쓴다. .tpl-* 클래스를 함께 단 요소(.wd-store/.wd-qr/.wd-pv/.wd-qrlogo)는 반드시
 *   `.print-box[data-design="wood"]` 프리픽스(0-3-0)로 잡아 표준 규칙을 이긴다. (vivid 인계문서 ★ 참고)
 *
 * 색상: 크림 배경 + 브라운 인그레이빙. 강조색은 --wd-accent 하나로 통일 → 색만 바꾸려면 이 변수만 수정.
 */

/* ── 치수/색 변수 (QR 크기·패딩·테두리를 바꾸면 알약 폭이 자동 동기화) ──
   프레임 폭 = QR + 2*(패딩 + 테두리) */
.print-box[data-design="wood"] {
  --wd-qr: 54cqmin; --wd-pad: 2.4cqmin; --wd-bd: 0.8cqmin;
  --wd-accent: #5b4636;   /* 인그레이빙 브라운 */
  --wd-bg: #f3e9d2;       /* 크림(우드) 배경 */
}
.print-box.is-landscape[data-design="wood"] { --wd-qr: 56cqmin; }

/* 본문 전환 — wood 일 때만 우드 본문 노출, 표준 자식 숨김. 박스를 block 으로(표준 레이아웃 무력화) */
.wd-body { display: none; }
.print-box[data-design="wood"] { container-type: size; display: block; padding: 0; background: var(--wd-bg); }
.print-box.is-landscape[data-design="wood"] { display: block; }
.print-box[data-design="wood"] > .wd-body { display: grid; width: 100%; height: 100%; }
.print-box[data-design="wood"] > :not(.wd-body) { display: none; }

/* ===== 세로형 — store/헤더/QR프레임/알약 1열 ===== */
.print-box[data-design="wood"] > .wd-body {
  box-sizing: border-box;
  grid-template-columns: 1fr;
  grid-template-areas: "store" "head" "qrcol" "pills";
  align-content: center; justify-items: center;
  gap: 3cqmin; padding: 6cqmin 6cqmin 7cqmin; text-align: center;
  background: var(--wd-bg); overflow: hidden; color: var(--wd-accent);
}
/* 세로형: 좌측 묶음·헤더그룹을 모두 풀어 그리드에 직접(store/head) 배치 */
.print-box[data-design="wood"] .wd-left { display: contents; }
.print-box[data-design="wood"] .wd-headgroup { display: contents; }
.print-box[data-design="wood"] .wd-store { grid-area: store; }
.print-box[data-design="wood"] .wd-head  { grid-area: head; }
.print-box[data-design="wood"] .wd-qrcol { grid-area: qrcol; }
.print-box[data-design="wood"] .wd-pills { grid-area: pills; }

/* 상호명(있을 때만) */
.print-box[data-design="wood"] .wd-store { font-weight: 800; color: var(--wd-accent); font-size: 5cqmin; word-break: keep-all; }
.wd-store:empty { display: none; }

/* 상단 헤더 — 아이콘(위) + Free WiFi(아래) 세로 배치(기본 디자인과 통일) */
.wd-head { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqmin; color: var(--wd-accent); }
.wd-icon { line-height: 0; }
.wd-icon svg { width: 16cqmin; height: 16cqmin; }
.wd-htext { font-weight: 800; font-size: 8cqmin; letter-spacing: .01em; word-break: keep-all; text-align: center; line-height: 1.05; }

/* QR 프레임(둥근 테두리) 안에 QR + SCAN ME.
   배경 흰색 → QR(항상 흰 배경, qr.js 하드코딩)과 이어져 이질감 제거.
   ※ QR 배경색을 바꾸는 기능이 생기면 이 배경을 그 색과 동기화하면 됨(현재는 흰색 고정). */
.wd-qrcol { display: flex; justify-content: center; width: max-content; }
.wd-frame {
  display: flex; flex-direction: column; align-items: center; gap: 2cqmin;
  background: #fff;
  border: var(--wd-bd) solid var(--wd-accent); border-radius: 4cqmin; padding: var(--wd-pad);
}
.wd-qrwrap { position: relative; line-height: 0; }
.print-box[data-design="wood"] .wd-qr { display: block; width: var(--wd-qr); height: var(--wd-qr); image-rendering: pixelated; }
/* 중앙 로고 — transform 없이 inset+margin 중앙(서브픽셀 흐림 방지), 표준 로고 규칙보다 특이도 우위 */
.print-box[data-design="wood"] .wd-qrlogo {
  position: absolute; inset: 0; margin: auto;
  width: 11cqmin; height: 11cqmin; max-width: none; object-fit: contain; image-rendering: auto;
  background: #fff; padding: 1cqmin; border-radius: 1.5cqmin; box-sizing: border-box;
}
.wd-scan { color: var(--wd-accent); font-weight: 900; letter-spacing: .12em; font-size: 5cqmin; }

/* 하단 WIFI/PASS 알약 — 폭 = 프레임 폭, 값 가운데 정렬 */
.print-box[data-design="wood"] .wd-pills { display: flex; flex-direction: column; gap: 1.6cqmin; width: calc(var(--wd-qr) + 2 * (var(--wd-pad) + var(--wd-bd))); }
.wd-pill {
  display: flex; align-items: center; gap: 1.8cqmin; width: 100%; box-sizing: border-box;
  border: 0.4cqmin solid var(--wd-accent); border-radius: 99cqmin; padding: 1cqmin 2.2cqmin;
}
.wd-pl {
  flex: none; min-width: 12cqmin; text-align: center; background: var(--wd-accent); color: var(--wd-bg);
  font-weight: 800; border-radius: 99cqmin; padding: 0.7cqmin 1.8cqmin; font-size: 3cqmin; letter-spacing: .02em;
}
/* 값(SSID/PW) — 폰트 통일 + tabular-nums + 가운데. .print-box .tpl-ssid(0-2-0) 를 이기려 프리픽스(0-3-0) */
.print-box[data-design="wood"] .wd-pv {
  flex: 1; text-align: center;
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  color: var(--wd-accent); font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: 0; word-break: break-all; font-size: 3.6cqmin;
}

/* ===== 가로형 — 좌(헤더·알약 묶음)/우(QR 프레임) 2열 ===== */
.print-box.is-landscape[data-design="wood"] > .wd-body {
  grid-template-columns: 1fr auto;
  grid-template-areas: "left qrcol";
  align-items: stretch; justify-items: center; align-content: center;
  column-gap: 6cqmin; padding: 6cqmin; text-align: center;
}
/* 가로형: 좌측 묶음을 한 컬럼으로(헤더 위쪽, 알약 아래쪽 분산) */
.print-box.is-landscape[data-design="wood"] .wd-left {
  display: flex; flex-direction: column; align-items: center;
  grid-area: left; height: 100%; gap: 2cqmin;
}
/* 가로형: 상호명+Free WiFi 를 한 묶음(세로 정렬)으로, 위·아래 margin:auto 로 가운데 / 알약은 하단 */
.print-box.is-landscape[data-design="wood"] .wd-headgroup {
  display: flex; flex-direction: column; align-items: center; gap: 1.4cqmin; margin-top: auto;
}
.print-box.is-landscape[data-design="wood"] .wd-icon svg { width: 14cqmin; height: 14cqmin; }
.print-box.is-landscape[data-design="wood"] .wd-htext { font-size: 8cqmin; }
.print-box.is-landscape[data-design="wood"] .wd-pills { margin-top: auto; width: 100%; max-width: 62cqmin; }
.print-box.is-landscape[data-design="wood"] .wd-qrcol { grid-area: qrcol; align-self: center; }
.print-box.is-landscape[data-design="wood"] .wd-qrlogo { width: 12cqmin; height: 12cqmin; }
.print-box.is-landscape[data-design="wood"] .wd-scan { font-size: 5.5cqmin; }
.print-box.is-landscape[data-design="wood"] .wd-pl { font-size: 3.4cqmin; min-width: 13cqmin; }
.print-box.is-landscape[data-design="wood"] .wd-pv { font-size: 4cqmin; }

/* 인쇄 — 표준 카드 인쇄 경로(--u=1mm)를 그대로 사용. 색 출력만 보장 */
@media print {
  .print-box[data-design="wood"] > .wd-body {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}