/* 여행 상황형 가이드 비교 템플릿. 운영 home.css 와 겹치지 않게 gj- 접두어만 쓴다.
   색·곡률·그림자는 web/css/brand.css 토큰(해안 팔레트)만 쓴다. 풀블리드 사진 히어로 대신
   밝은 바탕 위 2단(문구 | 실제 매장 사진 모자이크) 구조다. */
body { background: var(--coast-foam); color: var(--coast-ink); }

.gj-main { --gj-width: min(1180px, calc(100% - 80px)); }
.gj-section, .gj-hero, .gj-ask-in, .gj-template-note { width: var(--gj-width); margin-inline: auto; }
.gj-section { padding: 56px 0 0; scroll-margin-top: calc(var(--site-header-h, 84px) + 12px); }
.gj-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 24px; margin-bottom: 20px; }
.gj-section h2, .gj-ask h2 { font: 400 clamp(26px, 3vw, 36px)/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.01em; color: var(--coast-ink); word-break: keep-all; }
.gj-head p { max-width: 460px; color: var(--coast-muted); font-size: 15px; line-height: 1.55; word-break: keep-all; }

/* 히어로 — 문구와 실제 사진을 나란히. 높이를 눌러 경험 선택이 첫 화면 가까이 오게 한다. */
.gj-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center;
  padding: calc(var(--site-header-h, 84px) + 44px) 0 8px;
}
.gj-eyebrow { color: var(--coast-sea); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; word-break: keep-all; }
.gj-hero h1, .gj-hero h2 { font: 400 clamp(36px, 4vw, 56px)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.03em; color: var(--coast-ink); margin-bottom: 18px; word-break: keep-all; }
.gj-lead { font-size: 17px; line-height: 1.65; color: var(--text-sub); max-width: 560px; margin-bottom: 22px; word-break: keep-all; }
.gj-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin-bottom: 26px; border-block: 1px solid var(--coast-line); }
.gj-stats div { padding: 12px 22px 12px 0; margin-right: 22px; border-right: 1px solid var(--coast-line); }
.gj-stats div:last-child { border-right: 0; margin-right: 0; }
.gj-stats dt { font-size: 12px; color: var(--coast-muted); }
.gj-stats dd { font-size: 20px; font-weight: 700; color: var(--primary-navy); white-space: nowrap; }
.gj-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.gj-cta .pill-btn { min-height: 46px; padding: 0 22px; font-size: 14px; font-weight: 800; }
.gj-cta .pill-btn-navy { box-shadow: none; }

.gj-shots { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 440px; }
.gj-shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--coast-line); }
.gj-shot-1 { grid-row: span 2; }
.gj-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gj-shot figcaption {
  position: absolute; left: 10px; bottom: 10px; right: 10px; width: fit-content; max-width: calc(100% - 20px);
  padding: 6px 11px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--coast-ink);
  font-size: 12px; font-weight: 700; line-height: 1.3;
}
.gj-shot figcaption span { display: block; font-weight: 500; color: var(--coast-muted); }

/* 지금 필요한 경험 — 누르면 아래 전체 목록이 걸러진다(aria-pressed). */
.gj-need-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.gj-need {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 112px; padding: 14px 14px 12px;
  text-align: left; font: inherit; color: var(--coast-ink); background: #fff; cursor: pointer;
  border: 1.5px solid var(--coast-line); border-radius: var(--radius-sm); transition: border-color .2s, background .2s;
}
.gj-need b { font-size: 15px; line-height: 1.3; word-break: keep-all; }
.gj-need span { font-size: 13px; line-height: 1.4; color: var(--coast-muted); word-break: keep-all; }
.gj-need em { margin-top: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--coast-sea); }
.gj-need:hover { border-color: var(--coast-sea); }
.gj-need[aria-pressed="true"], .gj-trip[aria-pressed="true"] { border-color: var(--primary-navy); background: var(--coast-sea-soft); }
.gj-need-result { margin-top: 12px; font-size: 14px; color: var(--text-sub); word-break: keep-all; }
.gj-need-result a { color: var(--primary-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* 대표 추천 3곳 — 사진·설명이 큰 소개 카드. 전체 목록(비교 행)과 모양·역할이 다르다. */
.gj-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gj-pick { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.gj-pick-photo { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--coast-line); }
.gj-pick-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gj-pick-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 14px; }
.gj-kind { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--coast-sea); word-break: keep-all; }
.gj-pick h3 { margin: 6px 0 2px; font: 600 21px/1.25 Georgia, "Times New Roman", serif; }
.gj-pick h3 a, .gj-row h3 a { color: inherit; }
.gj-area { font-size: 13px; color: var(--coast-muted); }
.gj-desc { margin: 10px 0 14px; font-size: 14px; line-height: 1.5; color: var(--text-sub); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gj-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--coast-line); font-size: 14px; }
.gj-price { white-space: nowrap; color: var(--coast-ink); }
.gj-price b { font-size: 16px; color: var(--primary-navy); }
.gj-detail { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--primary-navy); font-weight: 700; white-space: nowrap; }
.gj-detail::after { content: "→"; transition: transform .2s; }
.gj-detail:hover::after, .gj-detail:focus-visible::after { transform: translateX(3px); }

/* 전체 업체 비교 — 가로 행(사진 | 이름·영업시간·근거 | 시작가·상세). 예약·지도 버튼 없음. */
.gj-list-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 0; margin: -6px 0 14px; font-size: 14px; font-weight: 700; color: var(--primary-navy); }
.gj-list-status:empty { display: none; }
.gj-reset { min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--primary-navy); background: #fff; color: var(--primary-navy); font: inherit; font-weight: 700; cursor: pointer; }
.gj-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gj-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); background: #fff; border: 1px solid var(--coast-line); border-radius: var(--radius-sm); overflow: hidden; }
.gj-row-photo { position: relative; display: block; min-height: 148px; background: var(--coast-line); }
.gj-row-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gj-discount { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--coast-ink); font-size: 11px; font-weight: 700; }
.gj-row-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 6px; min-width: 0; }
.gj-row h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.gj-row-meta { font-size: 13px; color: var(--coast-muted); }
.gj-evidence { font-size: 13px; color: var(--coast-sea); font-weight: 600; word-break: keep-all; }
.gj-evidence::before { content: "✓ "; }
.gj-row .gj-foot { margin-top: auto; padding-top: 6px; }
.gj-empty { color: var(--coast-muted); }

/* 여행 일정 — 짧은 상황 카드. 같은 필터를 걸고 목록으로 올라간다. */
.gj-trips h2 { font-size: 22px; margin-bottom: 12px; }
.gj-trips ul { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gj-trip { width: 100%; min-height: 64px; padding: 10px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: var(--coast-ink); background: #fff; border: 1.5px solid var(--coast-line); border-radius: var(--radius-sm); cursor: pointer; }
.gj-trip b { font-size: 14px; word-break: keep-all; }
.gj-trip span { font-size: 12px; color: var(--coast-muted); word-break: keep-all; }
.gj-trip:hover { border-color: var(--coast-sea); }

/* 왜 다낭픽 · 이용 방법 — 짧은 3칸. */
.gj-why ul, .gj-steps ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.gj-why li, .gj-steps li { padding: 18px; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--coast-line); }
.gj-why b, .gj-steps b { display: block; margin-bottom: 6px; font-size: 16px; word-break: keep-all; }
.gj-why span, .gj-steps span { display: block; font-size: 14px; line-height: 1.55; color: var(--text-sub); word-break: keep-all; }
.gj-steps ol { counter-reset: gj-step; }
.gj-steps li { counter-increment: gj-step; }
.gj-steps li::before { content: counter(gj-step); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; background: var(--accent-orange); color: #fff; font-weight: 800; font-size: 14px; }

.gj-faq > div { margin-top: 12px; border-top: 1px solid var(--coast-line); }
.gj-faq-item { border-bottom: 1px solid var(--coast-line); }
.gj-faq-item summary { min-height: 52px; display: flex; align-items: center; padding: 12px 32px 12px 0; position: relative; font-weight: 700; cursor: pointer; list-style: none; word-break: keep-all; }
.gj-faq-item summary::-webkit-details-marker { display: none; }
.gj-faq-item summary::after { content: "+"; position: absolute; right: 4px; font-size: 20px; color: var(--coast-sea); }
.gj-faq-item[open] summary::after { content: "−"; }
.gj-faq-item p { padding: 0 0 16px; color: var(--text-sub); line-height: 1.6; word-break: keep-all; }

/* 짧은 상담 요청 — 운영 consult-panel 을 연다. */
.gj-ask { margin-top: 56px; padding: 36px 0; background: #fff; border-top: 1px solid var(--coast-line); }
.gj-ask-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; }
.gj-ask p { margin-top: 6px; color: var(--coast-muted); word-break: keep-all; }
.gj-template-note { padding: 14px 0; font-size: 12px; color: var(--coast-muted); }

@media (max-width: 1080px) {
  .gj-need-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gj-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gj-rows { grid-template-columns: 1fr; }
  .gj-trips ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gj-main { --gj-width: calc(100% - 32px); }
  .gj-section { padding-top: 40px; }
  .gj-head { display: block; margin-bottom: 14px; }
  .gj-head p { margin-top: 6px; font-size: 14px; }
  .gj-hero { grid-template-columns: 1fr; gap: 20px; padding-top: calc(var(--site-header-h, 64px) + 24px); }
  .gj-hero h1, .gj-hero h2 { font-size: 32px; margin-bottom: 12px; }
  .gj-lead { font-size: 15px; margin-bottom: 16px; }
  .gj-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
  .gj-stats div { padding: 10px 8px 10px 0; margin-right: 8px; }
  .gj-stats dd { font-size: 16px; white-space: normal; }
  .gj-cta .pill-btn { flex: 1 1 auto; }
  .gj-shots { height: 190px; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr; order: -1; }
  .gj-shot-1 { grid-row: auto; }
  .gj-shot figcaption { left: 6px; bottom: 6px; padding: 4px 8px; font-size: 11px; }
  .gj-shot figcaption span { display: none; }
  .gj-need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gj-need { min-height: 96px; padding: 12px; }
  .gj-need b { font-size: 14px; }
  .gj-need span { font-size: 12px; }
  .gj-pick-grid { grid-template-columns: 1fr; }
  .gj-row { grid-template-columns: 104px minmax(0, 1fr); }
  .gj-row-photo { min-height: 132px; }
  .gj-row-body { padding: 10px 12px 4px; }
  .gj-row h3 { font-size: 16px; }
  .gj-foot { flex-wrap: wrap; gap: 0 10px; }
  .gj-trips ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gj-why ul, .gj-steps ol { grid-template-columns: 1fr; }
  .gj-ask .gj-cta { width: 100%; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .gj-detail::after, .gj-need, .gj-peek-more { transition: none; } }

/* 상황 선택 결과 — 편집 추천 자리를 물려받아 앞의 2곳을 축약 행으로 보여준다(UX-006).
   가로 캐러셀·가로 스크롤은 두지 않는다 — 아래 전체 업체 비교 목록이 세로 흐름의 정본이다. */
.gj-peek-list { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.gj-peek-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; background: #fff; border: 1px solid var(--coast-line); border-radius: var(--radius-sm); }
.gj-peek-photo { display: block; aspect-ratio: 1 / 1; background: var(--coast-line); }
.gj-peek-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gj-peek-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px 10px 0; }
.gj-peek-row h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.gj-peek-row h3 a { color: var(--coast-ink); }
.gj-peek-price { margin: 0; font-size: 14px; font-weight: 700; color: var(--primary-navy); }
.gj-peek-more-in { margin: 0; }
.gj-peek-more {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px;
  border: 1.5px solid var(--primary-navy); border-radius: var(--radius-pill); background: #fff; color: var(--primary-navy);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s;
}
.gj-peek-more:hover { background: var(--coast-sea-soft); }
.gj-peeks .gj-empty { margin: 0; color: var(--coast-muted); }
/* 기본 상태의 빈 자리표시자 — 교체 기준점일 뿐이다. hidden 이라 높이·여백·읽힘이 없고,
   규칙이 겹쳐도 숨김이 유지되도록 한 줄로 고정한다. */
#peek[hidden] { display: none; }

/* 데스크톱은 고른 상황과 그 결과가 같은 시야에 들어온다(안내 그리드 옆). 축약 업체 카드는 두지 않고
   제목(상황명·N곳)과 「N곳 모두 보기」 이동 요약만 같은 자리에 둔다 — 같은 데이터, 다른 배치. */
@media (min-width: 761px) {
  .gj-peek-list { display: none; }
  .gj-peek-more { min-height: 40px; padding: 0 18px; }
}

/* ── 비교 상세(detail.html) — 같은 토큰·gj- 부품을 쓰고, 상세에만 있는 부품은 gd- 접두어. ── */
.gd-hero, .gd-subnav { width: var(--gj-width); margin-inline: auto; }
.gd-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: center;
  padding: calc(var(--site-header-h, 84px) + 32px) 0 0;
}
.gd-hero-photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--coast-line); }
.gd-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd-hero-copy { min-width: 0; }
.gd-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; color: var(--primary-navy); font-size: 14px; font-weight: 700; word-break: keep-all; }
.gd-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.gd-vendor-name { margin: 4px 0 0; color: var(--coast-sea); font-size: 13px; font-weight: 800; letter-spacing: .04em; word-break: keep-all; }
.gd-hero h1 { margin: 6px 0 14px; font: 400 clamp(32px, 3.6vw, 50px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.02em; color: var(--coast-ink); word-break: keep-all; overflow-wrap: anywhere; }
.gd-lead { margin: 0 0 16px; max-width: 600px; color: var(--text-sub); line-height: 1.6; word-break: keep-all; }
.gd-reason { display: grid; gap: 2px; margin-bottom: 16px; padding: 12px 14px; border-left: 3px solid var(--coast-sea); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #fff; font-size: 14px; line-height: 1.45; word-break: keep-all; }
.gd-reason b { color: var(--coast-sea); font-size: 12px; letter-spacing: .04em; }
.gd-reason span::before { content: "✓ "; color: var(--coast-sea); }
.gd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; margin-bottom: 22px; border-block: 1px solid var(--coast-line); }
.gd-facts div { padding: 10px 22px 10px 0; margin-right: 22px; border-right: 1px solid var(--coast-line); }
.gd-facts div:last-child { border-right: 0; margin-right: 0; }
.gd-facts dt { font-size: 12px; color: var(--coast-muted); }
.gd-facts dd { font-size: 17px; font-weight: 700; color: var(--primary-navy); }

.gd-subnav { display: flex; gap: 6px; margin-top: 28px; padding: 6px; overflow-x: auto; background: #fff; border: 1px solid var(--coast-line); border-radius: var(--radius-pill); scrollbar-width: none; }
.gd-subnav::-webkit-scrollbar { display: none; }
.gd-subnav a { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--radius-pill); color: var(--coast-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.gd-subnav a:hover { background: var(--coast-foam); }

.gd-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.gd-gallery figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--coast-line); }
.gd-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd-gallery figcaption { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: var(--coast-ink); font-size: 12px; font-weight: 700; word-break: keep-all; }
.gd-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gd-story { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1fr); gap: 14px; min-width: 0; padding: 12px; background: #fff; border: 1px solid var(--coast-line); border-radius: var(--radius-sm); }
.gd-story img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; border-radius: calc(var(--radius-sm) - 3px); }
.gd-story h3 { margin-bottom: 8px; font: 600 18px/1.3 Georgia, "Times New Roman", serif; word-break: keep-all; }
.gd-story p { color: var(--text-sub); font-size: 14px; line-height: 1.55; word-break: keep-all; }

.gd-groups { display: grid; gap: 8px; }
.gd-choices { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.gd-choice { display: grid; gap: 3px; min-width: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--coast-line); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45; }
.gd-choice b { color: var(--primary-navy); word-break: keep-all; }
.gd-choice span, .gd-choice small { color: var(--text-sub); word-break: keep-all; }
.gd-choice small { font-size: 12px; }
.gd-group { background: #fff; border: 1px solid var(--coast-line); border-radius: var(--radius-sm); }
.gd-group summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; min-height: 56px; padding: 12px 44px 12px 18px; position: relative; cursor: pointer; list-style: none; }
.gd-group summary::-webkit-details-marker { display: none; }
.gd-group summary::after { content: "+"; position: absolute; right: 18px; font-size: 20px; color: var(--coast-sea); }
.gd-group[open] summary::after { content: "−"; }
.gd-group summary b { font-size: 16px; word-break: keep-all; }
.gd-group summary span { font-size: 13px; color: var(--coast-muted); }
.gd-group ul { list-style: none; padding: 0 18px 10px; columns: 2; column-gap: 32px; }
.gd-course { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--coast-line); break-inside: avoid; font-size: 14px; }
.gd-course > span:first-child { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.gd-course[data-evidence] > span:first-child { font-weight: 700; color: var(--coast-sea); }
.gd-course-price { white-space: nowrap; font-weight: 700; color: var(--primary-navy); }
.gd-course-price s { font-weight: 400; color: var(--coast-muted); }
.gd-note { margin-top: 10px; font-size: 13px; color: var(--coast-muted); word-break: keep-all; }

.gd-intro { max-width: 760px; margin: 12px 0 16px; color: var(--text-sub); line-height: 1.65; word-break: keep-all; }
.gd-visit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gd-visit-list { padding: 18px; background: #fff; border: 1px solid var(--coast-line); border-radius: var(--radius-sm); }
.gd-visit-list h3 { margin-bottom: 8px; font-size: 15px; }
.gd-visit-list ul { padding-left: 18px; }
.gd-visit-list li { padding: 3px 0; font-size: 14px; line-height: 1.5; color: var(--text-sub); word-break: keep-all; }

.gd-location-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 14px; padding: 18px; background: #fff; border: 1px solid var(--coast-line); border-radius: var(--radius-sm); }
.gd-location-facts { display: grid; gap: 8px; min-width: 0; flex: 1 1 420px; }
.gd-location-facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.gd-location-facts dt { color: var(--coast-muted); }
.gd-location-facts dd { color: var(--coast-ink); font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.gd-location-in .pill-btn { min-height: 44px; padding: 0 20px; }

.gd-book-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 26px 28px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.gd-book-in p { margin-top: 6px; color: var(--text-sub); word-break: keep-all; }
.gd-cta-title { margin-bottom: 8px; font: 400 clamp(24px, 3vw, 34px)/1.18 Georgia, "Times New Roman", serif; color: var(--coast-ink); word-break: keep-all; }

.gd-other-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gd-other { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--coast-line); border-radius: var(--radius-sm); overflow: hidden; }
.gd-other-photo { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--coast-line); }
.gd-other-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd-other > div { display: grid; gap: 3px; padding: 10px 12px 12px; }
.gd-other h3 { font-size: 16px; line-height: 1.3; }
.gd-other h3 a { color: inherit; }
.gd-other .gj-evidence { font-size: 12px; }
.gd-other .gj-price { font-size: 13px; }
.gd-others-back { margin-top: 8px; }

.gd-error { padding-top: calc(var(--site-header-h, 84px) + 48px); padding-bottom: 32px; display: grid; justify-items: start; gap: 12px; }
.gd-error h1 { font: 400 clamp(26px, 3vw, 36px)/1.2 Georgia, "Times New Roman", serif; word-break: keep-all; }
.gd-error p { color: var(--text-sub); }
.gd-error .pill-btn { min-height: 46px; padding: 0 22px; }

.gd-main a:focus-visible, .gd-main button:focus-visible, .gd-main summary:focus-visible { outline: 3px solid var(--coast-sea); outline-offset: 2px; }

@media (max-width: 1080px) {
  .gd-other-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-group ul { columns: 1; }
}
@media (max-width: 760px) {
  .gd-hero { grid-template-columns: 1fr; gap: 16px; padding-top: calc(var(--site-header-h, 64px) + 12px); }
  .gd-hero-photo { aspect-ratio: 16 / 10; }
  .gd-back { min-height: 36px; margin-bottom: 0; }
  .gd-hero h1 { font-size: 30px; margin-bottom: 10px; }
  .gd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
  .gd-facts div { padding-right: 10px; margin-right: 10px; }
  .gd-facts dd { font-size: 15px; }
  .gd-subnav { margin-top: 18px; border-radius: var(--radius-sm); }
  .gd-subnav a { padding: 0 12px; font-size: 13px; }
  .gd-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gd-gallery figcaption { font-size: 11px; padding: 3px 8px; }
  .gd-story-grid, .gd-choices { grid-template-columns: 1fr; }
  .gd-story { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .gd-story img { min-height: 112px; }
  .gd-story h3 { font-size: 16px; }
  .gd-story p { font-size: 13px; }
  .gd-group summary { padding-left: 14px; }
  .gd-group ul { padding: 0 14px 8px; }
  .gd-course { font-size: 13px; }
  .gd-visit-grid { grid-template-columns: 1fr; }
  .gd-location-in { padding: 14px; }
  .gd-location-facts { flex-basis: 100%; }
  .gd-location-facts div { grid-template-columns: 72px minmax(0, 1fr); }
  .gd-location-in .pill-btn { width: 100%; justify-content: center; }
  .gd-book-in { padding: 20px 16px; }
  .gd-book-in .gj-cta { width: 100%; flex-direction: column; }
  .gd-other-grid { grid-template-columns: 1fr; gap: 8px; }
  .gd-other { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .gd-other-photo { aspect-ratio: auto; min-height: 96px; }
}

/* 상세만: 반복 박스 대신 넉넉한 간격과 옅은 민트 면·foam 면의 교차로 구분한다. */
.gd-main {
  --gd-section-surface: var(--bg-soft-gray);
  overflow-x: clip;
}
@supports (background: color-mix(in srgb, red, blue)) {
  .gd-main {
    --gd-section-surface: color-mix(in srgb, var(--bg-white) 68%, var(--coast-foam));
  }
}
.gd-main > .gj-section {
  min-width: 0;
  margin-block-start: 44px;
  padding: 44px 24px 40px;
  background: var(--gd-section-surface);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: none;
  scroll-margin-top: calc(var(--site-header-h, 84px) + 12px);
}
.gd-main > .gj-section:nth-of-type(even) {
  background: var(--coast-foam);
  border-radius: 0;
}
.gd-main > .gj-section > * { min-width: 0; }
.gd-main > .gj-section .gd-book-in {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 760px) {
  .gd-main > .gj-section {
    margin-block-start: 30px;
    padding: 30px 8px 28px;
    border-radius: var(--radius-sm);
  }
  .gd-main > .gj-section:nth-of-type(even) { border-radius: 0; }
  .gd-main > .gj-section .gd-book-in { padding: 0; }
}