/* =========================================================
   서브 페이지 (대관 안내 · 오시는 길) — home.css 위에 얹어 사용
   ========================================================= */

/* ---------- 페이지 히어로 ---------- */
.page-hero {
  padding: 112px var(--gutter) clamp(48px, 6vw, 80px);
}
.page-logo {
  /* "RENTAL." 폭 ≈ 4.4em 기준으로 화면 폭에 맞춤 */
  font-size: calc((100vw - 2 * var(--gutter) - 20px) / 4.4);
  margin: clamp(20px, 3vw, 40px) 0 clamp(28px, 4vw, 48px);
}
.page-logo .line:nth-child(2) { color: inherit; }

/* ---------- 페이지 내 바로가기 (헤더 아래 고정) ---------- */
:root {
  --hd-h: 64px;      /* home.css .hd 높이와 동일 */
  --jump-h: 60px;    /* 바로가기 바 높이 */
}
.jump-bar {
  position: sticky;
  top: var(--hd-h);
  z-index: 40;
  height: var(--jump-h);
  margin-bottom: clamp(48px, 6vw, 80px);
  background: rgba(250, 250, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 2px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
}
.jump {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 var(--gutter);
  overflow-x: auto;              /* 버튼이 넘치면 가로 스크롤 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.jump::-webkit-scrollbar { display: none; }
.jump a {
  flex: none;
  white-space: nowrap;
  padding: 7px 16px;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.jump a:hover { background: var(--ink); color: var(--bg); }
.jump a.active {
  background: var(--point);
  border-color: var(--point);
  color: var(--on-point);
}

/* 헤더 + 바로가기 바에 가려지지 않도록 이동 위치 보정 */
main [id] { scroll-margin-top: calc(var(--hd-h) + var(--jump-h) + 20px); }

/* ---------- 섹션 공통 ---------- */
.sub-sec {
  padding: 0 var(--gutter) clamp(80px, 11vw, 150px);
}
.sub-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.sub-title {
  font-weight: 900;
  font-size: clamp(36px, 5.2vw, 84px);
  letter-spacing: -0.05em;
  line-height: 1.02;
}
.sub-desc { color: var(--mute); font-size: 16px; font-weight: 500; max-width: 480px; justify-self: end; }

/* 주석 안 강조 문구 (예: 회차 추가 요금 없음) — 회색 주석 사이에서 눈에 띄도록 검정 굵게 */
.note b { color: var(--ink); font-weight: 700; }

/* 섹션 도입 문단 (시설·좌석 설명을 문장으로) */
.sub-lead {
  max-width: 820px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: -0.01em;
  word-break: keep-all;   /* 한글 단어 중간에서 줄이 끊기지 않도록 */
}
.sub-lead p + p { margin-top: 12px; }

.note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--mute);
  line-height: 1.8;
}

/* ---------- 이용 절차 ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.step { border-top: 2px solid var(--line); padding-top: 20px; }
.step-no {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 5.6vw, 88px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--point);
  margin-bottom: 20px;
}
.step h3 { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--mute); }

/* ---------- 요금표 ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptable {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 16px;
}
.ptable th {
  text-align: left;
  padding: 14px 0;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--mute);
}
.ptable td {
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.ptable td:first-child { font-weight: 700; white-space: nowrap; }
.ptable td:nth-child(2) { color: var(--mute); }
.ptable th:last-child,
.ptable td:last-child {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}
.ptable td:last-child {
  font-family: var(--display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.ptable tr { transition: background 0.3s; }
.ptable tbody tr:hover { background: rgba(232, 134, 58, 0.08); }
.ptable .pt-row td:last-child { color: var(--point-ink); }

/* 표 제목: PC에서는 화면에 숨기고(스크린리더용), 모바일 카드형에서만 표시 */
.ptable-cap {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 모바일: 표 → 카드형 (가로 스크롤 없이 항목명 · 내용 · 금액을 위아래로) ---------- */
@media (max-width: 760px) {
  .table-wrap { overflow: visible; }
  .ptable { min-width: 0; }
  .ptable,
  .ptable tbody,
  .ptable tr,
  .ptable td { display: block; width: 100%; }
  .ptable thead { display: none; }

  .ptable-cap {
    position: static;
    width: auto; height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
    display: block;
    padding: 12px 0;
    border-top: 2px solid var(--line);
    border-bottom: 2px solid var(--line);
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--mute);
  }

  .ptable tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .ptable tbody tr:hover { background: none; }
  .ptable td {
    padding: 0;
    border: 0;
    white-space: normal;        /* 긴 글자는 줄바꿈 */
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .ptable td:first-child { font-size: 16px; }
  .ptable td:nth-child(2) { margin-top: 4px; font-size: 14px; line-height: 1.6; }
  .ptable td.is-empty { display: none; }   /* 내용이 '-'인 칸은 카드에서 생략 */
  .ptable td:last-child {
    margin-top: 8px;
    text-align: left;
    white-space: normal;
    font-size: 20px;
  }
}

/* ---------- 점 리스트 ---------- */
.dot-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(24px, 4vw, 64px);
  border-top: 2px solid var(--line);
}
.dot-list li {
  position: relative;
  padding: 18px 0 18px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  font-weight: 500;
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 28px;
  width: 8px; height: 8px;
  background: var(--point);
}
.dot-list.one { grid-template-columns: 1fr; }

/* ---------- 좌석 배치도 ---------- */
.seat-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.seat-split > * { min-width: 0; }
.seat-fig { margin: 0; }
.seat-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
}
.seat-img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--line);
  background: #2a2a2a;
}
.seat-zoom-ico {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--point);
  color: var(--on-point);
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.3s var(--ease);
}
.seat-zoom:hover .seat-zoom-ico { transform: scale(1.08); }
.seat-zoom:focus-visible { outline: 3px solid var(--point); outline-offset: 3px; }
.seat-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--mute);
}

/* ---------- 라이트박스 (좌석 배치도 확대 보기) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 10, 10, 0.98);   /* 뒤 페이지 글자가 비치지 않을 만큼 진하게 */
}
.lightbox[hidden] { display: none; }
.lb-view {
  position: absolute;
  inset: 0;
  display: flex;                  /* 이미지가 화면보다 작을 때 가운데 정렬 (img margin:auto) */
  overflow: auto;                 /* 모바일: 손가락으로 밀어서 이동 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  cursor: grab;
  scrollbar-width: thin;
}
.lb-view.is-dragging { cursor: grabbing; }
.lb-img {
  display: block;
  flex: none;                     /* JS가 정한 크기 그대로 (화면 폭에 맞춰 눌리거나 늘어나지 않게) */
  min-width: 0;
  max-width: none;                /* 화면보다 크게 확대 가능 */
  height: auto;
  margin: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.lb-help {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(250, 250, 247, 0.92);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
.lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--point);
  color: var(--on-point);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.lb-close:hover { background: var(--point-hover); }

/* ---------- 유의사항 ---------- */
.notice { border-top: 2px solid var(--line); }
.notice li {
  display: grid;
  grid-template-columns: 64px 220px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
}
.notice .idx { font-family: var(--display); font-weight: 700; color: var(--point-ink); }
.notice b { font-weight: 900; letter-spacing: -0.02em; }
.notice span:last-child { color: #333; }

/* ---------- FAQ ---------- */
.faq { border-top: 2px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-weight: 900;
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: -0.03em;
  cursor: pointer;
  list-style: none;
  transition: color 0.3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--line);
  font-family: var(--display);
  font-size: 18px;
  transition: transform 0.4s var(--ease), background 0.3s, border-color 0.3s;
}
.faq summary:hover { color: var(--point-ink); }
.faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--point);
  border-color: var(--point);
}
.faq .ans { padding: 0 56px 28px 0; color: #333; font-size: 16px; line-height: 1.85; }

/* ---------- 연락처 카드 ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.ccard { border-top: 2px solid var(--line); padding-top: 20px; }
.ccard .c-lab { font-weight: 700; font-size: 14px; color: var(--mute); }
.ccard .c-val {
  display: inline-block;
  margin: 12px 0 8px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  transition: color 0.3s;
}
.ccard .c-val-sm { font-size: clamp(20px, 1.9vw, 28px); }
a.c-val:hover { color: var(--point-ink); }
.ccard p { font-size: 14px; color: var(--mute); }

/* ---------- 주소 · 지도 ---------- */
.addr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px 0;
  border-top: 2px solid var(--line);
}
.addr-main { font-weight: 900; font-size: clamp(20px, 2.4vw, 32px); letter-spacing: -0.03em; line-height: 1.3; }
.addr-sub { font-size: 14px; color: var(--mute); margin-top: 4px; }

.map {
  border: 2px solid var(--line);
  aspect-ratio: 16 / 7;
  background: #e9e9e4;
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

.ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(40px, 5vw, 64px);
}
.way { border-top: 2px solid var(--line); padding-top: 18px; }
.way h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.way h3 small {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  color: var(--point-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.way p { font-size: 15px; color: #333; line-height: 1.8; }

.parking { margin-top: clamp(48px, 6vw, 80px); }
.parking-title { font-weight: 900; font-size: 20px; letter-spacing: -0.03em; margin-bottom: 6px; }
.parking-cap { font-size: 14px; color: var(--mute); margin-bottom: 20px; }

/* ---------- 마무리 영역 버튼 (검정 배경) ---------- */
.outro-lead {
  margin-top: 28px;
  max-width: 560px;
  font-size: 17px;
  font-weight: 500;
  color: rgba(250, 250, 247, 0.75);
}
.outro-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn-point { background: var(--point); color: var(--on-point); }
.btn-point:hover { background: var(--point-hover); }
.btn-line-inv { border: 2px solid var(--bg); color: var(--bg); }
.btn-line-inv:hover { background: var(--bg); color: var(--ink); }

/* ---------- 반응형 ---------- */
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .seat-split { grid-template-columns: 1fr; }
  .notice li { grid-template-columns: 48px 1fr; }
  .notice li span:last-child { grid-column: 2; }
}

@media (max-width: 760px) {
  :root { --jump-h: 54px; }
  .jump a { padding: 6px 14px; font-size: 13px; }
  /* 가로로 더 있다는 걸 알 수 있도록 양 끝 페이드 */
  .jump {
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
  }
  .sub-head { grid-template-columns: 1fr; }
  .sub-desc { justify-self: start; }
  .dot-list { grid-template-columns: 1fr; }
  .contact-cards,
  .ways { grid-template-columns: 1fr; row-gap: 32px; }
  .map { aspect-ratio: 4 / 3; }
  .faq .ans { padding-right: 0; }
}

@media (max-width: 480px) {
  .steps { grid-template-columns: 1fr; }
}