/* ═══════════════════════════════════════════════════════════
   INTERIOR — interior.css  (매장 선정·인테리어 지원)
   · #cost 다음, 흰 배경(연노랑↔흰 교차).
   · 상단 2단(좌 제목 / 우 설명) + 하단 가로 긴 풀폭 이미지 배너(src="#" 폴백).
   · 흰/연노랑/골드(레퍼런스 보라 → 다폰 골드). 검정·이모지 없음.
   · 등장: scroll-reveal(data-reveal, 반복/unobserve 금지).
═══════════════════════════════════════════════════════════ */

.interior {
  background: var(--white, #ffffff);
  scroll-margin-top: 80px;
}

/* ── 상단 2단 ── */
.interior__top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  max-width: 1160px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
.interior__title {
  font-size: clamp(1.55rem, 3.2vw, 2.5rem);
  font-weight: 900;
  line-height: 1.32;
  color: var(--color-text, #1a1a1a);
  margin: 0;
  word-break: keep-all;
}
.interior__title em {
  font-style: normal;
  color: var(--gold, #f0c000);
}
.interior__desc {
  font-size: clamp(0.96rem, 1.4vw, 1.08rem);
  line-height: 1.85;
  color: var(--color-text-sub, #555);
  margin: 0;
  word-break: keep-all;
  /* 우측 문단 — 제목 기준선과 자연스럽게 */
  padding-top: 4px;
}

/* ── 하단 가로 긴 풀폭 이미지 배너 ── */
.interior__banner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: color-mix(in srgb, var(--gold, #f0c000) 8%, #ffffff);
  border: 1px dashed color-mix(in srgb, var(--gold, #f0c000) 28%, #ffffff);
}
/* 빈 상태(src="#") 플레이스홀더 라벨 — 이미지 로드되면 가려짐 */
.interior__banner::before {
  content: '매장 인테리어 이미지';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--gold, #f0c000) 55%, #777777);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  pointer-events: none;
}
.interior__img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6; /* 가로 긴 배너 비율 */
  object-fit: cover;
  color: transparent; /* 빈/깨진 상태 alt·아이콘 노출 최소화 */
  font-size: 0;
}

/* ═══════════════════════════════════════════════════════════
   반응형 — 모바일(2단 → 세로, 이미지 비율 유지)
═══════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .interior__top {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
@media (max-width: 560px) {
  .interior__img {
    aspect-ratio: 16 / 9; /* 좁은 화면에선 살짝 높게(가독·존재감) */
  }
}