/*
 * card-frame.css — 525×315px 고정 프레임 + 화면 축소 규칙
 * NOULE AI Brand OS
 *
 * ★ 계승 핵심 (card-v2 검증):
 *   - 카드는 항상 고정 525×315px (= 90×50mm @150dpi 기준)
 *   - 화면 축소: transform:scale() + transform-origin:top left 만 사용
 *   - clamp() / vw / % 단위 절대 금지 (규격 흐트러짐 방지)
 *   - 저장: html2canvas scale:2 → 1050×630px 출력
 *   - html2canvas 주의: mask-image·::after 미지원 → 실제 DOM 요소 사용
 */

/* ─── 카드 래퍼 ─── */
.card-wrap {
  position: relative;
  /* 높이는 JS updateCardScale()이 315 * scale 로 동적 세팅 */
  overflow: visible;
}

/* ─── 카드 본체 — 불변 고정 크기 ─── */
.card {
  position: relative;
  width: 525px;
  height: 315px;
  overflow: hidden;
  /* transform-origin은 JS에서 top left 로 강제 설정 */
  transform-origin: top left;
  /* border-radius: 18px 는 각 스타일 CSS에서 정의 */
}

/* ─── 카드 레이어 구조 ─── */
/* 배경 레이어 (AI 이미지 또는 그라데이션 폴백) */
.card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--scandi-bg); /* 스타일 CSS에서 덮어씀 */
}

/* 배경 AI 이미지 */
.card__bg-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 오버레이 (배경 위 색조 보정) */
.card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* 콘텐츠 레이어 — 텍스트·QR 배치 (AI 불가침 영역) */
.card__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* 인쇄 안전여백: 5mm = 약 28px @150dpi, 여기선 26px 적용 */
  padding: 26px;
  word-break: keep-all;  /* 계승: 한글 줄바꿈 안전 */
}

/* ─── QR 배치 — 우하단 고정 ─── */
/* §7.3: 우하단·은은·주인공 아님·브랜드보다 튀지 않게 */
.card__qr {
  position: absolute;
  right: 26px;
  bottom: 26px;
  z-index: 4;
}

.card__qr canvas {
  display: block;
  /* 크기는 스타일 CSS에서 정의 */
}

/* ─── 그라데이션 폴백 프리셋 6종 (계승) ─── */
/* 배경 이미지 로드 실패 시 CSS 그라데이션으로 빈 카드 방지 */
.card[data-fallback="sunset"] .card__bg {
  background: linear-gradient(135deg, #F5C6A0 0%, #D4A07A 40%, #9B8FAE 100%);
}
.card[data-fallback="dusk"] .card__bg {
  background: linear-gradient(135deg, #6E6481 0%, #9B8FAE 50%, #C4897A 100%);
}
.card[data-fallback="dawn"] .card__bg {
  background: linear-gradient(135deg, #EDE2D6 0%, #C8A682 60%, #D4A07A 100%);
}
.card[data-fallback="ocean"] .card__bg {
  background: linear-gradient(135deg, #5B6E8C 0%, #9B8FAE 60%, #EDE2D6 100%);
}
.card[data-fallback="sand"] .card__bg {
  background: linear-gradient(135deg, #F5EDE3 0%, #E9E0D4 50%, #C8A682 100%);
}
.card[data-fallback="ember"] .card__bg {
  background: linear-gradient(135deg, #D4A07A 0%, #C4897A 50%, #6E6481 100%);
}

/* ─── 카드 쉐도우 (뷰어 전용, 캡처 시 제거) ─── */
.card-wrap .card-shadow {
  box-shadow: var(--shadow-lg);
  border-radius: 18px;
}