/*
 * 파일명: design-allinone.css
 * 파일경로: /home/ociws1/web/wifiqr.co.kr/public_html/assets/css/
 * 기능: 유료 디자인 '올인원' 본문 전용 — 분리형 4호.
 *       와이파이 QR + ID/PW + 화장실 비밀번호(여자/남자)를 한 장에.
 *       1~4번과 동일한 mm 카드 박스(.print-box) 안에서 동작 → 사이즈/방향/A4 예측 그대로.
 *       크기는 컨테이너 쿼리 단위(cqmin)로 박스 크기에 자동 비례(화면·인쇄 공통).
 * 작성일: 2026-06-15
 *
 * ★ 특이도 주의: 표준 page-templates.css 의 `.print-box .tpl-xxx`(0-2-0)가 단일 클래스(0-1-0)를
 *   덮어쓴다. .tpl-* 클래스를 함께 단 요소(.ai-store/.ai-qr/.ai-rv/.ai-qrlogo)는 반드시
 *   `.print-box[data-design="allinone"]` 프리픽스(0-3-0)로 잡아 표준 규칙을 이긴다. (vivid 인계문서 ★ 참고)
 *
 * 화장실 행 제어: qr.js 가 .ai-rest 에 is-both/is-shared/is-none 토글 →
 *   둘 다 입력=여자·남자 2줄 / 한쪽만=공용 1줄(남녀 아이콘 유지) / 없음=블록 숨김.
 *
 * 색상: 모노크롬. 강조색은 --ai-accent 하나로 통일 → 색만 바꾸려면 이 변수만 수정.
 */

/* ── 치수/색 변수 (QR 크기·패딩·테두리만 바꾸면 됨) ── */
.print-box[data-design="allinone"] { --ai-qr: 46cqmin; --ai-pad: 1.6cqmin; --ai-bd: 0.7cqmin; --ai-accent: #1f2937; }
.print-box.is-landscape[data-design="allinone"] { --ai-qr: 52cqmin; }

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

/* ===== 세로형 — store / QR / info(WiFi블록+화장실블록 세로 스택) ===== */
.print-box[data-design="allinone"] > .ai-body {
  box-sizing: border-box;
  grid-template-columns: 1fr;
  grid-template-areas: "store" "qrcol" "info";
  align-content: center; justify-items: center;
  gap: 3cqmin; padding: 6cqmin; text-align: center;
  background: #fff; overflow: hidden; color: var(--ai-accent);
}
.print-box[data-design="allinone"] .ai-store { grid-area: store; font-weight: 800; color: var(--ai-accent); font-size: 5cqmin; word-break: keep-all; }
.ai-store:empty { display: none; }
.print-box[data-design="allinone"] .ai-qrcol { grid-area: qrcol; }
.print-box[data-design="allinone"] .ai-info  { grid-area: info; }

/* QR 프레임(테두리) + 중앙 로고 오버레이 */
.ai-qrcol { display: flex; justify-content: center; width: max-content; }
.ai-qrwrap { position: relative; background: #fff; border: var(--ai-bd) solid var(--ai-accent); border-radius: 2cqmin; padding: var(--ai-pad); line-height: 0; }
.print-box[data-design="allinone"] .ai-qr { display: block; width: var(--ai-qr); height: var(--ai-qr); image-rendering: pixelated; }
.print-box[data-design="allinone"] .ai-qrlogo {
  position: absolute; inset: 0; margin: auto;
  width: 10cqmin; height: 10cqmin; max-width: none; object-fit: contain; image-rendering: auto;
  background: #fff; padding: 1cqmin; border-radius: 1.5cqmin; box-sizing: border-box;
}

/* 우측 묶음 — 세로형은 래퍼 해제(그리드에 직접 배치), 가로형은 한 컬럼으로 묶음(아래 가로형 규칙) */
.ai-right { display: contents; }

/* info: 두 정보 블록(WiFi / 화장실) — 묶음을 가운데 정렬(샘플 기준), 두 블록 폭 동일해 텍스트 열 정렬 */
.ai-info { display: flex; flex-direction: column; gap: 4.5cqmin; width: max-content; max-width: 100%; align-items: stretch; }
/* 세로형: QR 박스 하단 여백 추가 + 와이파이↔화장실 섹션 간격(위 gap)으로 상하 공백 분배 */
.print-box[data-design="allinone"]:not(.is-landscape) .ai-info { margin-top: 4cqmin; }

/* 세로형 블록 = 아이콘(좌) + 행(우) 가로 배치 */
.print-box[data-design="allinone"] .ai-block {
  display: grid; grid-template-columns: 26cqmin 1fr; align-items: center;
  gap: 3cqmin; padding: 0 2cqmin; justify-items: start;
}
.ai-ico { display: flex; flex-direction: column; align-items: center; gap: 1cqmin; color: var(--ai-accent); }
/* 세로형: 아이콘+라벨 그룹을 좌측 칼럼(26cqmin) 안에서 가운데 정렬 → 두 그룹 같은 중심축 (오른쪽 정보 영역은 변경 없음) */
.print-box[data-design="allinone"]:not(.is-landscape) .ai-ico { justify-self: center; }
.ai-ico-img { line-height: 0; }
.ai-ico-img svg { width: 13cqmin; height: 13cqmin; }
.ai-ico-cap { font-weight: 800; font-size: 3.2cqmin; letter-spacing: .02em; word-break: keep-all; }
/* 아이콘 bold 처리 — WiFi(아웃라인) 선 두껍게, 화장실(채움)에 굵기 추가 */
.print-box[data-design="allinone"] .ai-block .ai-ico-img svg { stroke-width: 3; }
.print-box[data-design="allinone"] .ai-rest .ai-ico-img svg { stroke: currentColor; stroke-width: 0.5; stroke-linejoin: round; }

.ai-rows { display: flex; flex-direction: column; gap: 1.2cqmin; }
.ai-row { display: flex; align-items: center; gap: 2cqmin; }
.ai-rl { flex: none; min-width: 9cqmin; text-align: left; color: var(--ai-accent); font-size: 3.6cqmin; }
/* 라벨(ID/PW/여자/남자)만 굵게 — 값(.ai-rv)은 기존 유지. Pretendard 통일로 확실히 bold 렌더(세로/가로 공통) */
.print-box[data-design="allinone"] .ai-rl { font-family: 'Pretendard', system-ui, -apple-system, sans-serif; font-weight: 800; }
.print-box[data-design="allinone"] .ai-rv {
  flex: 1; text-align: left;
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  color: var(--ai-accent); font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: 0; word-break: break-all; font-size: 3.6cqmin;
}

/* 화장실 행 표시 제어 — qr.js 가 .ai-rest 클래스 토글 */
.ai-rest .ai-row-f, .ai-rest .ai-row-m, .ai-rest .ai-row-s { display: none; }
.ai-rest.is-both .ai-row-f, .ai-rest.is-both .ai-row-m { display: flex; }
.ai-rest.is-shared .ai-row-s { display: flex; }
.ai-rest.is-none { display: none !important; } /* 둘 다 미입력 시 블록 숨김(허용된 숨김 예외) */

/* ===== 가로형 — 좌(QR) / 우(info 위 + 업체명 아래). 우측을 QR 높이에 맞춰 업체명 하단=QR 하단 정렬 ===== */
.print-box.is-landscape[data-design="allinone"] > .ai-body {
  grid-template-columns: auto 1fr;
  grid-template-areas: "qrcol right";
  align-content: center; align-items: stretch; justify-items: center;
  column-gap: 6cqmin; padding: 6cqmin; text-align: center;
}
.print-box.is-landscape[data-design="allinone"] .ai-qrcol { grid-area: qrcol; align-self: center; }
/* 우측 묶음 = QR 높이로 stretch. info 위 / 업체명은 margin-top:auto 로 하단(=QR 하단) */
.print-box.is-landscape[data-design="allinone"] .ai-right {
  grid-area: right; display: flex; flex-direction: column; align-items: center;
  height: 100%; gap: 3cqmin;
}
.print-box.is-landscape[data-design="allinone"] .ai-info {
  flex-direction: row; align-items: flex-start; justify-content: center; gap: 5cqmin; width: auto;
}
.print-box.is-landscape[data-design="allinone"] .ai-store { margin-top: auto; }
/* 가로형 블록 = 아이콘(위) + 행(아래) 세로 배치 */
.print-box.is-landscape[data-design="allinone"] .ai-block {
  display: flex; flex-direction: column; align-items: center; gap: 1.6cqmin; padding: 0;
}
.print-box.is-landscape[data-design="allinone"] .ai-ico-img svg { width: 14cqmin; height: 14cqmin; }
.print-box.is-landscape[data-design="allinone"] .ai-ico-cap { font-size: 3.4cqmin; }
.print-box.is-landscape[data-design="allinone"] .ai-rl { min-width: 8cqmin; font-size: 3.6cqmin; }
.print-box.is-landscape[data-design="allinone"] .ai-rv { font-size: 3.6cqmin; }
.print-box.is-landscape[data-design="allinone"] .ai-qrlogo { width: 11cqmin; height: 11cqmin; }

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