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

/* ── 치수/색 변수 (QR 크기·패딩·테두리를 바꾸면 ID/PW 박스 폭이 자동 동기화) ──
   QR 흰 박스 폭 = QR + 2*(패딩 + 테두리) */
.print-box[data-design="line"] { --ln-qr: 52cqmin; --ln-pad: 1.6cqmin; --ln-bd: 0.7cqmin; --ln-accent: #e63946; }
.print-box.is-landscape[data-design="line"] { --ln-qr: 58cqmin; }

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

/* ===== 세로형 — store/아이콘/Wi-Fi/QR/안내문/ID·PW 1열 ===== */
.print-box[data-design="line"] > .ln-body {
  box-sizing: border-box;
  grid-template-columns: 1fr;
  grid-template-areas: "store" "icon" "label" "qrcol" "rows";
  align-content: center; justify-items: center;
  gap: 2.2cqmin; padding: 6cqmin 6cqmin 8cqmin; text-align: center;
  background: #fff; overflow: hidden;
}
/* 세로형: 좌측 묶음을 풀어 그리드에 직접 배치 */
.print-box[data-design="line"] .ln-left { display: contents; }
.print-box[data-design="line"] .ln-store { grid-area: store; }
.print-box[data-design="line"] .ln-icon  { grid-area: icon; }
.print-box[data-design="line"] .ln-label { grid-area: label; }
.print-box[data-design="line"] .ln-qrcol { grid-area: qrcol; }
.print-box[data-design="line"] .ln-rows  { grid-area: rows; }

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

/* 큰 와이파이 아이콘 (currentColor → 강조색) */
.ln-icon { color: var(--ln-accent); line-height: 0; }
.ln-icon svg { width: 18cqmin; height: 18cqmin; }

/* "Wi-Fi" 알약(아웃라인) — 강조색 */
.ln-label {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.7cqmin solid var(--ln-accent); color: var(--ln-accent);
  font-weight: 800; border-radius: 99cqmin; padding: 1cqmin 5.5cqmin;
  font-size: 6cqmin; letter-spacing: .04em;
}

/* QR 박스(테두리) + 중앙 로고 오버레이 + 안내문 */
.ln-qrcol { display: flex; flex-direction: column; align-items: center; gap: 2.2cqmin; width: max-content; }
.ln-qrwrap { position: relative; background: #fff; border: var(--ln-bd) solid #222; padding: var(--ln-pad); line-height: 0; }
.print-box[data-design="line"] .ln-qr { display: block; width: var(--ln-qr); height: var(--ln-qr); image-rendering: pixelated; }
/* 중앙 로고 — transform 없이 inset+margin 중앙(서브픽셀 흐림 방지), 표준 로고 규칙보다 특이도 우위 */
.print-box[data-design="line"] .ln-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;
}
.ln-caption { color: #555; font-size: 3.2cqmin; word-break: keep-all; }

/* ID / PW 박스 — 가로폭 = QR 박스 폭, 값은 가운데 정렬 */
.print-box[data-design="line"] .ln-rows { display: flex; flex-direction: column; gap: 2cqmin; width: calc(var(--ln-qr) + 2 * (var(--ln-pad) + var(--ln-bd))); }
.ln-row { display: flex; align-items: stretch; border: 0.5cqmin solid #222; border-radius: 1.6cqmin; overflow: hidden; }
.ln-rl {
  flex: none; min-width: 13cqmin; display: flex; align-items: center; justify-content: center;
  background: #f4f4f4; border-right: 0.5cqmin solid #222; color: #222; font-weight: 800;
  padding: 1.1cqmin 0; font-size: 3.6cqmin;
}
/* 값(SSID/PW) — 폰트 통일 + tabular-nums + 가운데. .print-box .tpl-ssid(0-2-0) 를 이기려 프리픽스(0-3-0) */
.print-box[data-design="line"] .ln-rv {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  color: #222; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: 0; word-break: break-all; padding: 1.1cqmin 2cqmin; font-size: 3.6cqmin;
}

/* ===== 가로형 — 좌(아이콘·Wi-Fi·ID/PW 묶음)/우(QR·안내문) 2열 ===== */
.print-box.is-landscape[data-design="line"] > .ln-body {
  grid-template-columns: 1fr auto;
  grid-template-areas: "left qrcol";
  align-items: stretch; justify-items: center; align-content: stretch;
  column-gap: 6cqmin; padding: 6cqmin; text-align: center;
}
/* 가로형: 좌측 묶음을 한 컬럼으로 — 가운데로 모아 콘텐츠를 컴팩트하게(자동 마진 분산 제거로 간격 축소) */
.print-box.is-landscape[data-design="line"] .ln-left {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  grid-area: left; height: 100%; gap: 2cqmin;
}
.print-box.is-landscape[data-design="line"] .ln-icon svg { width: 20cqmin; height: 20cqmin; }
.print-box.is-landscape[data-design="line"] .ln-label { font-size: 7cqmin; }
.print-box.is-landscape[data-design="line"] .ln-rows { width: 100%; max-width: 62cqmin; }
.print-box.is-landscape[data-design="line"] .ln-qrcol { grid-area: qrcol; align-self: center; }
.print-box.is-landscape[data-design="line"] .ln-qrlogo { width: 12cqmin; height: 12cqmin; }
.print-box.is-landscape[data-design="line"] .ln-rl { min-width: 14cqmin; font-size: 3.8cqmin; }
.print-box.is-landscape[data-design="line"] .ln-rv { font-size: 4cqmin; }
.print-box.is-landscape[data-design="line"] .ln-caption { font-size: 3.4cqmin; }

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