/* QR 유입 장소 상단(배너·매장명·매장별 문구) — 예약 폼(d2d/booking.html)과 QR 랜딩(d2d/qrLanding.html)이 같이 쓴다.
   #547(GL-2452)에서 booking.css 에서 옮겨 왔다(랜딩은 booking.css 를 로드하지 않는다). 마크업은 d2d/qrPlaceHeader.html 한 벌. */
/* ==================== QR 유입 장소 상단 (#433 GL-2351) ==================== */
/* 배너: 업로드 사진의 비율을 따르되 위아래로 가드레일(#507). 풀블리드·직각(여백/라운드 없음).
   원래는 3:1 고정이었다(8/24 결정 — 세로 낮게). 매장이 보내온 사진이 항상 가로 띠로 잘려
   공간이 전달되지 않는다는 제휴매장 요청으로 되돌린다. 고정 비율을 걷어내고 이미지 자연
   비율을 쓰되, min/max 로 범위를 묶어 레이아웃이 깨지지 않게 한다:
     - 자연 높이가 범위 안이면  → 사진 비율 그대로 (크롭 없음)
     - 범위를 벗어나면         → object-fit:cover 가 크롭해 범위 안으로 (레이아웃 안전)
   390px 폭 기준 3:1(130px)~1.5:1(260px), 480px 폭 기준 3.7:1~1.85:1 가 통과 구간이다.
   ⚠️ max 를 더 키우면 아래 예약 폼(progress→step1)이 첫 화면 밖으로 밀린다 — 폴드 확인 없이 올리지 말 것.

   `aspect-ratio: auto 2/1` 은 로딩 전 공간 예약용이다(codex P2, #507). 고정 비율을 걷어내면서
   이미지가 도착하기 전 높이가 min-height 로 잡혔다가 자연비율로 점프해, 아래 예약 폼이 통째로
   밀리는 시프트가 실측됐다. `auto` 가 붙으면 자연비율이 있을 때 그걸 쓰고 없을 때만 2/1 로 예약한다.

   ⚠️ 이건 <b>권장 비율에서만</b> 시프트를 없앤다. 다른 비율은 여전히 밀린다 — 실측(로딩전→로딩후):
       폭 320: 1:1 160→260(+100) · 3:1 160→130(−30) · <b>2:1 160→160(0)</b>
       폭 390: 1:1 195→260( +65) · 3:1 195→130(−65) · <b>2:1 195→195(0)</b>
       폭 480: 1:1 240→260( +20) · 3:1 240→160(−80) · <b>2:1 240→240(0)</b>
   즉 "2:1 이면 어느 폭에서도 0" 만 불변이고 상한을 숫자로 못 박을 수는 없다.
   ⚠️ 2/1 은 어드민 권장 비율과 한 쌍이다 — 권장을 바꾸면 이 값도 같이 바꿔야 시프트가 0 으로 남는다.
   (완전 해결은 업로드 시 원본 크기를 저장해 img 에 width/height 를 내리는 것 — DB 변경이라 별건.) */
.d2d-qrp-banner { position: relative; overflow: hidden; margin: 0 0 12px; }
/* 배너 사진(직계 img)에만 — 덮개 위 로고(.d2d-qrp-hero > .d2d-qrp-logo)는 이 규칙을 받으면 안 된다(#620 codex P2: 로고가 100% 폭·cover 로 늘어난다) */
.d2d-qrp-banner > img { width: 100%; height: auto; aspect-ratio: auto 2 / 1;
  min-height: 130px; max-height: 260px;
  object-fit: cover; object-position: center; display: block; }
/* 매장명 오버레이 — 배너 정중앙(8/24 결정). 전면 스크림으로 어떤 이미지에서도 가독성 확보 */
.d2d-qrp-banner::after { content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.3); pointer-events: none; }
/* 배너가 스스로 브랜딩을 담은 경우(#507, D2D_QR_PLACE.IS_SELF_BRANDED_BANNER) 두 레이어를 끈다.
   스크림은 매장명(z-index:1)보다 아래라 텍스트는 순백으로 남지만, 배너에 <b>구워진</b> 로고는
   스크림 아래라 255 → 178(#B2B2B2)로 죽는다 — 실측. 매장명도 로고 위에 겹친다.
   ⚠️ 이 분기를 켠 매장의 배너는 어둡게 처리까지 포함한 완성본이어야 한다(어드민 안내와 쌍).
   어드민 미리보기(qrPlaces.html .qp-self-branded)가 같은 규칙을 복제한다 — 한쪽만 고치지 말 것. */
.d2d-qrp-banner--self-branded::after { display: none; }
/* 덮개 위 요소(#620): 로고(설정 LOGO_IMG_URL)가 있으면 로고만, 없으면 장소명 — 둘을 같이 얹지 않는다(10/19). 로고는 사진 위에 따로 얹어
   호텔마다 합성 작업이 필요 없다 — 흰 로고/어두운 로고 모두 읽히게 스크림 위에 그린다. */
.d2d-qrp-hero { position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; }
/* 크기: 담당자 10/21 — 폭 79%·높이 배너의 50% 상한, 비율 유지로 먼저 닿는 쪽에서 멈춘다.
   가로형 문구 로고(나인트리 두 줄, 폰 약 280×54)는 폭에, 세로로 쌓인 정사각형형 로고(호텔 로고 약 40%가 가로÷세로 1.5 이하)는
   높이에 걸려 배너를 덮지 않는다(폰 배너 192px → 96px, PC 240px → 120px). */
.d2d-qrp-logo { max-width: 79%; max-height: 50%; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
.d2d-qrp-hero-name { text-align: center;
  color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
/* 배너 미등록 시 매장명 타이틀 폴백 */
.d2d-qrp-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 16px 20px 10px; }
.d2d-qrp-headline { font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0 20px 12px; white-space: pre-line; }
/* 접수 시간 밖 마감 화면(#547, 9/22 A안) — 배너 아래 가운데 정렬 한 덩어리. 보라는 예약 버튼과 같은 #512772,
   연보라 바탕(#F1ECF6)은 아이콘 원·다음 접수 알약에만. 한국어 줄바꿈은 어절 단위(keep-all). */
.d2d-qrp-closed { padding: 40px 24px 56px; text-align: center; word-break: keep-all; }
.d2d-qrp-closed-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #F1ECF6;
  display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; }
.d2d-qrp-closed-title { margin: 0 0 12px; font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: #121212; }
.d2d-qrp-closed-hours { margin: 0; font-size: 15px; line-height: 1.6; color: #555; }
.d2d-qrp-closed-next { display: inline-block; margin-top: 20px; padding: 9px 18px; border-radius: 999px;
  background: #F1ECF6; color: #512772; font-size: 14px; font-weight: 600; line-height: 1.4; }