/* ==========================================================================
   LOCATION 페이지 전용 스타일 — 기준: 00_확정디자인/오시는길_01.png
   (시안 본문 폭 786px = 공통 본문 폭 1240px 기준으로 환산)
   ========================================================================== */

/* 섹션 간격: 메인과 시설·안내 페이지의 중간 밀도 */
.loc-section {
  padding-top: clamp(48px, 4.45vw, 64px);
}
/* 섹션 제목 묶음(.sec-head)은 common.css 공통 — 주소·부제 첫 줄 간격만 지정 */
.loc-head .loc-address,
.loc-head .loc-sub-ko { margin-top: 12px; }
/* 주소: 국문(강조) → 영문 2줄 한 묶음 */
.loc-address-en {
  margin-top: var(--pair-gap);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--c-text-sub);
}
/* 택시: 기사님께 보여 줄 국문 주소 */
.loc-taxi-address {
  margin-top: 14px;
  font-family: var(--f-ko);
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.4;
}
/* 주차: 주소·요금 (한글 본문) */
.loc-detail-ko {
  margin-top: var(--pair-gap);
  font-family: var(--f-ko);
  font-size: var(--fs-body-ko);
  font-weight: 400;
  line-height: 1.45;
}
.loc-detail-ko + .loc-sub-en { margin-top: 10px; }

.loc-sub-ko {
  font-family: var(--f-ko);
  font-size: var(--fs-body-ko);
  font-weight: 600;
  line-height: 1.3;
}
.loc-sub-en {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--c-text-sub);
}

/* 사진이 아직 없는 자리 (시안과 같은 짙은 회색 상자) */
.placeholder-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius);
  background: var(--c-placeholder);
  text-align: center;
}
.placeholder-title {
  font-family: var(--f-display);
  font-size: var(--fs-placeholder);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--c-placeholder-text);
}
.placeholder-note {
  font-family: var(--f-ko);
  font-size: var(--fs-note);
  color: var(--c-placeholder-text);
}

/* ---------- Hero ---------- */
.loc-hero {
  padding-top: calc(clamp(32px, 7.2vw, 104px) * 0.793);   /* 메인: 메뉴바→본문 간격과 동일 */
}
.loc-hero-inner {
  display: grid;
  grid-template-columns: 370fr 830fr;
  gap: 40px;
  align-items: center;
}
/* 히어로 글: 메인 히어로와 같은 크기 체계 */
.loc-hero .sub-ko {
  margin-top: 20px;
  font-size: var(--fs-hero-ko);
  line-height: 1.2;
}
.loc-hero .sub-en { margin-top: 10px; font-size: var(--fs-body); line-height: 1.45; }   /* 한글과 한 묶음 */
.loc-hero .photo-frame { aspect-ratio: 526 / 213; }
/* 건물_02: 노란 출입문 + 매장(1층) 중심 크롭.
   비율 유지(cover) 후 아래쪽 기준으로 맞추고, 주변 건물이 덜 보이도록 1.2배만 확대(왜곡 없음) */
.loc-hero .photo-frame img {
  object-position: 50% 90%;
  transform: scale(1.2);
  transform-origin: 68% 94%;
}

/* ---------- Address & map ---------- */
.loc-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: var(--space-head);
}
.loc-address {
  font-family: var(--f-body);
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.4;
}
.loc-buttons {
  display: flex;
  gap: 16px;
  flex: none;
  margin-top: 30px;
}
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  height: 38px;                     /* 헤더 BOOK NOW와 같은 높이 */
  padding: 0 20px;
  border: 1.5px solid var(--c-text);
  border-radius: 4px;
  font-family: var(--f-display);
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-line svg { width: 11px; height: 11px; }
button.btn-line:hover,
a.btn-line[href]:hover { background: var(--c-text); color: #000; }
@media (hover: none) {
  button.btn-line:hover,
  a.btn-line[href]:hover { background: transparent; color: inherit; }
}
/* 주소 복사 결과 안내 (짧게 표시) */
.loc-buttons { position: relative; }
.copy-status {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  font-size: var(--fs-note);
  line-height: 1.45;
  color: var(--c-text-sub);
  white-space: nowrap;
}
.copy-status:empty { display: none; }
.copy-status.is-error { color: var(--c-yellow); white-space: normal; }

.loc-map {
  height: clamp(220px, 20.8vw, 300px);
}

/* ---------- Getting here ---------- */
/* 교통 안내(.loc-two.g-cols): 칸 여백·구분선은 정보 표 공통값 */
.loc-two .g-label { font-weight: 700; }

/* ---------- Find the entrance ---------- */
.loc-entrance {
  display: grid;
  grid-template-columns: 668fr 513fr;
  gap: 59px;
  align-items: start;
}
/* 출입구 콜라주: 기존 영역 크기·비율 그대로, 두 사진 같은 너비로 붙여 배치.
   바깥 모서리만 둥글게(부모에서 overflow 처리), 가운데 간격 없음.
   각 사진: 비율 유지 확대(--z = 사진 너비 ÷ 칸 너비) + 초점(--fx, --fy = 원본 기준 0~1)
   --r = 칸 하나의 가로÷세로 비율 (top 계산용) */
.entrance-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 423 / 168;
  border-radius: var(--radius);
  overflow: hidden;
  --r: 1.259;                       /* (423 ÷ 2) ÷ 168 */
}
.collage-cell {
  position: relative;
  overflow: hidden;
}
.collage-cell img {
  position: absolute;
  max-width: none;
  width: calc(var(--z) * 100%);
  height: auto;                     /* 원본 비율 유지 (늘이지 않음) */
  left: calc(50% - var(--fx) * var(--z) * 100%);
  top: calc(50% - var(--fy) * 0.75 * var(--z) * var(--r) * 100%);
}
.collage-cell--gate { --z: 2.857; --fx: 0.275; --fy: 0.785; }  /* 노란 아치 + 대문 */
.collage-cell--hall { --z: 1.25;  --fx: 0.47;  --fy: 0.55; }   /* 신발장(현관) + 유리 중문 */
.loc-entrance-text { padding-top: clamp(12px, 1.7vw, 24px); }
.loc-entrance-title {
  font-family: var(--f-ko);
  font-size: var(--fs-sub-ko);
  font-weight: 600;
  line-height: 1.3;
}
.loc-entrance-text .loc-sub-en { margin-top: var(--pair-gap); }
.loc-entrance-text .pending-note { margin-top: 20px; }

/* ---------- Contact ---------- */
/* 연락처(.loc-contact.g-cols): GUEST GUIDE 연락처와 같은 정보 표 양식 */
.loc-contact dt { font-size: var(--fs-label); font-weight: 400; text-transform: none; }
.loc-contact dd { margin: var(--label-gap) 0 0; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1180px) {
  .loc-buttons { gap: 12px; }
  .btn-line { min-width: 0; padding: 0 16px; }
}

@media (max-width: 900px) {
  .loc-hero { padding-top: calc(12px * 0.395); }
  .loc-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  /* 모바일 대표사진: 4:3, 1층 노란 대문·매장이 크게 보이도록 */
  .loc-hero .photo-frame { aspect-ratio: 4 / 3; }
  .loc-hero .photo-frame img { transform: scale(1.35); transform-origin: 60% 100%; }
  .btn-line { height: 44px; }
  .loc-head-row { flex-direction: column; }
  .loc-buttons { margin-top: 4px; flex-wrap: wrap; }
  .loc-entrance { grid-template-columns: 1fr; gap: 20px; }
  .loc-entrance-text { padding-top: 0; }
  .loc-entrance-text .pending-note { margin-top: 16px; }
}

@media (max-width: 640px) {
  /* 모바일: 두 사진을 위아래로 쌓아 각각 크게 (칸 비율 3:2) */
  .entrance-collage { grid-template-columns: 1fr; grid-template-rows: auto auto; aspect-ratio: auto; --r: 1.5; }
  .collage-cell { aspect-ratio: 3 / 2; }
  .collage-cell--gate { --z: 2.857; --fx: 0.275; --fy: 0.785; }
  .collage-cell--hall { --z: 1.2;   --fx: 0.47;  --fy: 0.55; }
  .loc-buttons { display: grid; grid-template-columns: 1fr; width: 100%; gap: 10px; }
  .btn-line { height: 44px; }   /* 모바일: 누르기 편한 높이 */
  .copy-status { position: static; white-space: normal; }
}