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

/* ── QR/박스 치수 변수 (QR 크기·패딩·테두리를 바꾸면 알약 폭·SCAN 폭이 자동 동기화) ──
   wrap(QR 바깥 흰 박스) 폭 = QR + 2*(패딩 + 테두리). 패딩을 작게 둬야 파란 테두리에 QR이 가깝게 붙는다. */
.print-box[data-design="vivid"] { --vv-qr: 54cqmin; --vv-pad: 2.4cqmin; --vv-bd: 0.8cqmin; } /* 세로형 QR — wood 기준 동일 */
.print-box.is-landscape[data-design="vivid"] { --vv-qr: 56cqmin; }                            /* 가로형 QR — wood 기준 동일 */

/* 본문 전환 — 박스 디자인이 vivid일 때만 비비드 본문 노출, 표준 자식은 숨김.
   박스를 block 으로(표준 flex/landscape grid 무력화) → 본문이 박스를 가득 채움(배경색·미리보기 일치) */
.vv-body { display: none; }
.print-box[data-design="vivid"] { container-type: size; display: block; padding: 0; background: #f8f8f8; }
.print-box.is-landscape[data-design="vivid"] { display: block; }
.print-box[data-design="vivid"] > .vv-body { display: grid; width: 100%; height: 100%; }
.print-box[data-design="vivid"] > :not(.vv-body) { display: none; }

/* ===== 세로형 — store/label/QR/pills 1열 수직 ===== */
.print-box[data-design="vivid"] > .vv-body {
  box-sizing: border-box;
  grid-template-columns: 1fr;
  grid-template-areas: "store" "label" "qrcol" "pills";
  align-content: center; justify-items: center;
  gap: 3cqmin; padding: 5cqmin; text-align: center;
  background: #f8f8f8; overflow: hidden;
}
/* 세로형에서는 정보 그룹을 풀어 그리드에 직접 배치(상호명·라벨·QR·알약 순서 유지) */
.print-box[data-design="vivid"] .vv-info { display: contents; }
.print-box[data-design="vivid"] .vv-headgroup { display: contents; } /* 세로형: 래퍼도 풀어 store/label 이 그리드에 직접 */
.print-box[data-design="vivid"] .vv-store { grid-area: store; }
.print-box[data-design="vivid"] .vv-label { grid-area: label; }
.print-box[data-design="vivid"] .vv-qrcol { grid-area: qrcol; }
.print-box[data-design="vivid"] .vv-pills { grid-area: pills; }

.print-box[data-design="vivid"] .vv-store { font-weight: 800; color: #222; font-size: 5cqmin; word-break: keep-all; } /* wood 기준 동일 */
.vv-store:empty { display: none; }
/* 아이콘(위) + FREE WiFi(아래) 세로 배치 · 크기는 우드(.wd-head/.wd-htext/.wd-icon)와 통일 */
.vv-label { display: inline-flex; flex-direction: column; align-items: center; gap: 1.4cqmin; color: #00a8e8; font-weight: 800; font-size: 8cqmin; }
.vv-label svg { width: 16cqmin; height: 16cqmin; }

/* QR 박스 + 중앙 로고 오버레이 + SCAN(= QR 박스 폭, 스트레치) */
.vv-qrcol { display: flex; flex-direction: column; align-items: stretch; gap: 2.4cqmin; width: max-content; }
.vv-qrwrap { position: relative; background: #fff; border: var(--vv-bd) solid #00a8e8; border-radius: 3.5cqmin; padding: var(--vv-pad); line-height: 0; }
.print-box[data-design="vivid"] .vv-qr { display: block; width: var(--vv-qr); height: var(--vv-qr); image-rendering: pixelated; }
/* 중앙 로고 — transform 없이 inset+margin 으로 중앙 정렬(서브픽셀 흐림 방지), 표준 로고 규칙보다 특이도 우위 */
.print-box[data-design="vivid"] .vv-qrlogo {
  position: absolute; inset: 0; margin: auto;
  width: 12cqmin; height: 12cqmin; max-width: none; object-fit: contain; image-rendering: auto;
  background: #fff; padding: 1.2cqmin; border-radius: 2cqmin; box-sizing: border-box;
}
.vv-scan { background: #00a8e8; color: #fff; font-weight: 900; letter-spacing: .05em; text-align: center; border-radius: 2.6cqmin; font-size: 4.6cqmin; padding: 1.4cqmin 0; }

/* 정보 알약 — 가로폭을 QR 박스 폭과 동일하게(QR + 8.8cqmin) */
.print-box[data-design="vivid"] .vv-pills { display: flex; flex-direction: column; gap: 1.4cqmin; width: calc(var(--vv-qr) + 2 * (var(--vv-pad) + var(--vv-bd))); }
.vv-pill {
  display: inline-flex; align-items: center; gap: 1.8cqmin; width: 100%; box-sizing: border-box;
  background: #fff; border: 0.3cqmin solid #e3e3e3; border-radius: 99cqmin; padding: 1cqmin 2.4cqmin;
}
.vv-pl { flex: none; min-width: 11cqmin; text-align: center; background: #00a8e8; color: #fff; font-weight: 700; border-radius: 99cqmin; padding: 0.7cqmin 2cqmin; font-size: 3cqmin; letter-spacing: .02em; }
/* 값(SSID/PASS) — 둘 다 .vv-pv 로 폰트/굵기/크기 완전 통일. tabular-nums 로 숫자폭 균일.
   (.print-box .tpl-ssid 0-2-0 을 이기려 .print-box[data-design="vivid"] 프리픽스 0-3-0 사용) */
.print-box[data-design="vivid"] .vv-pv {
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  color: #444; font-weight: 500; font-variant-numeric: tabular-nums;
  letter-spacing: 0; word-break: break-all; font-size: 3.6cqmin;
}
/* 세로형: 입력값을 알약 박스 가운데 정렬(라벨 뒤 남은 폭에서 중앙) */
.print-box[data-design="vivid"]:not(.is-landscape) .vv-pv { flex: 1; text-align: center; }

/* ===== 가로형 — 좌(정보 그룹: 상하 분산)/우(QR) 2열, 좌측 하단 알약 = 우측 SCAN 하단 정렬 ===== */
.print-box.is-landscape[data-design="vivid"] > .vv-body {
  grid-template-columns: 1fr auto;
  grid-template-areas: "info qrcol";
  align-items: stretch; justify-items: center; align-content: center;
  column-gap: 6cqmin; row-gap: 0; padding: 6cqmin; text-align: center;
}
/* 가로형: 좌측 묶음을 QR 컬럼 높이만큼 늘리고, 헤더(묶음)는 가운데·알약은 하단(우드와 동일 분배).
   margin-top:auto 를 항상 존재하는 .vv-headgroup 에 걸어, 상호명이 비어도 헤더가 세로 가운데로 온다. */
.print-box.is-landscape[data-design="vivid"] .vv-info {
  display: flex; flex-direction: column; align-items: center;
  grid-area: info; height: 100%; gap: 2cqmin;
}
.print-box.is-landscape[data-design="vivid"] .vv-headgroup {
  display: flex; flex-direction: column; align-items: center; gap: 1.4cqmin; margin-top: auto;
}
.print-box.is-landscape[data-design="vivid"] .vv-qrcol { grid-area: qrcol; align-self: center; }
.print-box.is-landscape[data-design="vivid"] .vv-label { font-size: 8cqmin; }           /* 우드 .wd-htext 와 통일 */
.print-box.is-landscape[data-design="vivid"] .vv-label svg { width: 14cqmin; height: 14cqmin; } /* 우드 .wd-icon 과 통일 */
.print-box.is-landscape[data-design="vivid"] .vv-pills { margin-top: auto; width: 100%; max-width: 62cqmin; }
.print-box.is-landscape[data-design="vivid"] .vv-qrlogo { width: 13cqmin; height: 13cqmin; }
.print-box.is-landscape[data-design="vivid"] .vv-scan  { font-size: 5.5cqmin; }
.print-box.is-landscape[data-design="vivid"] .vv-pl    { font-size: 3.6cqmin; min-width: 13cqmin; }
.print-box.is-landscape[data-design="vivid"] .vv-pv    { font-size: 4cqmin; }

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