@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   골프장 상세 A-1 골프장탐색형 공통 스타일 (2026-08-23)

   기준 시안 — Codex\작업기록\골프장상세페이지\20260823_{코드}_A1_골프장탐색형_시안.html
   문구 정본 — _배포_골프장상세_문구교정_20260822 (CCP 만 본섭 08-22 20:57 이 최신)

   다섯 곳이 이 파일 하나를 함께 쓴다.
   전에는 34KB 인라인 CSS 를 다섯 벌 복제하고 있었다. 한 벌로 줄였다.

   🔴 네임스페이스는 `.gaa`. 전부 그 안에 가뒀다.
      /css/guamez-refresh.css 가 `.hero .course .go .top .page .facts .team .package`
      같은 제네릭 이름을 전역으로 점유하고 있어 접두어 없이 쓰면 새어 들어온다.
      08-21 과 08-23 에 같은 사고가 두 번 났다. 그래서 클래스마다 `ga-` 를 붙였다.
      `.uhead .ufoot .gfloat .crumb .gzmark` 는 실사이트 것을 그대로 쓴다.

   갤러리 — 사진 다섯 장이 전부 1920×1280 안팎(비율 1.4~1.5)이다.
      큰 칸이 작은 칸 폭의 두 배면 두 칸의 비율이 같아지므로 2fr 1fr 1fr 로 잡고
      height 대신 aspect-ratio 로 걸었다. 폭이 줄어도 잘림이 늘지 않는다.
   ══════════════════════════════════════════════════════════════ */

.gaa{--brand:#1570ef;--brand-dark:#0b4da2;--soft:#eaf2fe;--ink:#263548;--sub:#607086;--muted:#94a3b8;
     --line:#e5ebf2;--ground:#f5f8fc;--paper:#fff;--navy:#103e63;--sun:#f59e0b;--green:#16835c;
     --shadow:0 1px 2px rgba(16,32,48,.04),0 10px 26px rgba(16,32,48,.08),0 28px 64px rgba(16,32,48,.08)}
.gaa,.gaa *{box-sizing:border-box}
.gaa a{text-decoration:none;color:inherit}
.gaa button{font:inherit}

/* ── 골격 ── */
.ga-wrap{width:min(1380px,calc(100% - 40px));margin:22px auto 70px;
         display:grid;grid-template-columns:244px minmax(0,1fr);gap:22px;align-items:start}

/* ── 왼쪽 골프장 탐색 ── */
.ga-side{position:sticky;top:16px;background:var(--paper);border:1px solid var(--line);
         border-radius:20px;padding:20px 16px;box-shadow:0 10px 30px rgba(20,52,82,.07)}
.ga-kicker{font-size:11px;letter-spacing:.07em;color:var(--brand);font-weight:850}
.ga-side h2{font-size:20px;margin:6px 0 5px;letter-spacing:-.035em;color:var(--ink)}
.ga-sdesc{font-size:12.5px;line-height:1.55;color:var(--sub);margin:0 0 17px}

/* 선택한 골프장 — 호텔 상세의 .hd-selected 와 같은 형태로 맞췄다 (2026-08-23).
   사진 배경을 쓰면 바로 아래 목록 첫 줄의 썸네일과 같은 사진이 두 번 보인다.
   왼쪽 4px 띠와 옅은 그라데이션만으로 「지금 보고 있는 곳」을 표시한다 */
.ga-pick{position:relative;overflow:hidden;border:1px solid #d8e5ef;border-radius:14px;
         padding:14px 15px;margin-bottom:14px;
         background:linear-gradient(135deg,#fffdf8 0%,#f8fcff 72%,#eef8ff 100%);
         box-shadow:0 5px 15px rgba(29,62,89,.07)}
.ga-pick:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#f59a23}
.ga-pick:after{content:"GUAM GOLF";position:absolute;right:11px;top:10px;
               color:#d6e5f0;font-size:9px;font-weight:850;letter-spacing:.08em}
.ga-pick small{display:block;color:#a06416;font-weight:800;font-size:11px}
.ga-pick strong{display:block;margin-top:5px;padding-right:6px;font-size:16px;
                line-height:1.35;letter-spacing:-.02em;color:#122b45}
.ga-pick span{display:block;margin-top:5px;font-size:12px;line-height:1.45;color:#607487}

/* 목록 — 그룹으로 쪼개지 않는다. 다섯 곳뿐이라 한 벌로 전부 보인다.
   호텔은 12곳이라 480px 에서 잘리고 스크롤이 붙지만 여기는 그럴 일이 없다 */
.ga-list{display:grid;gap:3px;min-width:0}
.ga-course{display:flex;gap:10px;align-items:center;padding:8px 8px 8px 11px;
           border-radius:11px;color:#17304a;transition:background .15s ease,box-shadow .15s ease}
.ga-course:hover{background:#f3f8ff}
.ga-course.is-on,.ga-course.is-on:hover{background:#e3efff;color:#0a5ecb;box-shadow:inset 3px 0 0 #1677f2}
.ga-course.is-on b{font-weight:850}
.ga-course.is-on small{color:#5b86b5}
.ga-course.is-on img{box-shadow:0 0 0 2px #1677f2}
.ga-course.is-on:after{content:"";flex:none;margin-left:auto;width:16px;height:16px;border-radius:50%;
  background:#1677f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8l4.6 4.6L19 7.4'/%3E%3C/svg%3E") no-repeat center/9px 9px}
.ga-course img{flex:none;width:42px;height:34px;object-fit:cover;border-radius:8px;display:block;background:var(--ground)}
.ga-course span{min-width:0}
.ga-course b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ga-course small{display:block;margin-top:2px;font-size:10px;color:#8192a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gaa .ga-compare{display:block;text-align:center;margin-top:16px;border:1px solid #a9cdef;
            color:var(--brand-dark);border-radius:12px;padding:12px;font-size:13px;font-weight:800}
.gaa .ga-compare:hover{background:var(--soft)}

/* ── 본문 ── */
.ga-main{background:var(--paper);border:1px solid var(--line);border-radius:22px;
         padding:30px 34px 54px;box-shadow:var(--shadow)}
.ga-crumb{font-size:12.5px;color:var(--muted);margin-bottom:13px}
.ga-title{display:flex;align-items:flex-end;gap:16px;margin-bottom:19px}
.ga-title h1{font-size:31px;line-height:1.22;margin:0;letter-spacing:-.045em;color:var(--ink)}
.ga-title p{margin:7px 0 0;color:var(--sub);font-size:14px}
.ga-acts{margin-left:auto;display:flex;gap:8px;flex:none}
.ga-ghost{height:40px;padding:0 15px;background:var(--paper);border:1px solid var(--line);
          border-radius:11px;font-weight:750;font-size:13px;color:var(--sub);cursor:pointer}
.ga-ghost:hover{border-color:#bcd9f5;color:var(--brand-dark)}

/* ── 갤러리 ── */
.ga-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;
            aspect-ratio:3.173/1;overflow:hidden;border-radius:18px 18px 0 0;background:var(--ground)}
.ga-gallery figure{margin:0;position:relative;overflow:hidden}
.ga-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.ga-gallery figure:hover img{transform:scale(1.025)}
.ga-gallery .ga-big{grid-row:1/3}
.ga-gallery .ga-all:after{content:"사진 10장 모두 보기";position:absolute;inset:0;display:grid;
  place-items:center;background:rgba(8,31,48,.48);color:#fff;font-size:15px;font-weight:800}

/* 갤러리 칸은 눌러서 사진을 크게 본다 */
.gaa .ga-gallery figure{cursor:zoom-in}

/* ── 사진 보기 모달 — golf-detail-a1.js 가 body 끝에 만든다 ── */
.ga-modal{position:fixed;inset:0;z-index:10000;background:rgba(4,15,25,.93);
          display:none;align-items:center;justify-content:center;padding:60px 90px}
.ga-modal.is-open{display:flex}
.ga-modal figure{margin:0;max-width:1200px;max-height:calc(100vh - 100px);
                 display:flex;flex-direction:column;align-items:center}
.ga-modal img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;border-radius:6px}
.ga-modal figcaption{color:#fff;margin-top:12px;font-size:14px;letter-spacing:-.02em}
.ga-modal button{position:absolute;border:0;color:#fff;background:rgba(255,255,255,.13);
                 cursor:pointer;line-height:1;padding:0}
.ga-modal button:hover{background:rgba(255,255,255,.24)}
.ga-mclose{right:24px;top:20px;width:44px;height:44px;border-radius:50%;font-size:28px}
.ga-mprev,.ga-mnext{top:50%;transform:translateY(-50%);width:52px;height:64px;border-radius:14px;font-size:40px}
.ga-mprev{left:22px}
.ga-mnext{right:22px}
@media(max-width:650px){
  .ga-modal{padding:55px 12px}
  .ga-mprev,.ga-mnext{width:40px;height:52px;font-size:32px}
  .ga-mprev{left:8px}.ga-mnext{right:8px}
  .ga-modal figcaption{font-size:12px}
}

/* 2026-08-28 — 상세페이지 플로팅 찜과 방해하지 않는 짧은 상태 안내 */
.gzunifloat .gzunifloat-wish svg{width:23px;height:23px;fill:none;stroke:currentColor;transition:fill .16s ease,stroke .16s ease,transform .16s ease}
.gzunifloat .gzunifloat-wish.is-saved{color:#df234f}
.gzunifloat .gzunifloat-wish.is-saved svg{fill:currentColor;stroke:currentColor}
.gzunifloat .gzunifloat-wish.is-bump svg{transform:scale(1.14)}
.gzunifloat .gz-wish-toast{position:absolute;right:calc(100% + 10px);top:50%;z-index:1;box-sizing:border-box;max-width:calc(100vw - 78px);padding:8px 11px;border-radius:999px;background:#17243a;color:#fff;font-size:13px;font-weight:700;line-height:1.15;white-space:nowrap;box-shadow:0 6px 18px rgba(15,29,50,.2);opacity:0;pointer-events:none;transform:translate(6px,-50%);transition:opacity .16s ease,transform .16s ease}
.gzunifloat .gz-wish-toast.is-show{opacity:1;transform:translate(0,-50%)}
@media(prefers-reduced-motion:reduce){
  .gzunifloat .gzunifloat-wish svg,.gzunifloat .gz-wish-toast{transition:opacity .01ms linear!important}
  .gzunifloat .gzunifloat-wish.is-bump svg{transform:none}
}

/* ── 핵심 다섯 칸. 코스 규모와 대표 특징을 한 단계 강하게 ── */
.ga-facts{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);
          border-top:0;border-radius:0 0 16px 16px;background:var(--ground);overflow:hidden}
.ga-fact{padding:20px 18px;border-right:1px solid var(--line);min-height:92px}
.ga-fact:last-child{border-right:0}
.ga-fact small{display:block;color:var(--sub);font-size:13px;font-weight:650;margin-bottom:8px}
.ga-fact strong{display:block;font-size:17px;line-height:1.35;letter-spacing:-.025em;color:var(--ink)}
.ga-fact.is-key{background:#f0f8ff}
.ga-fact.is-key strong{font-size:18px;color:#0d3153;font-weight:800}

/* ── 소개 + 예약 전 확인 ── */
.ga-intro{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
.ga-tag{display:inline-block;background:var(--soft);color:var(--brand-dark);border-radius:999px;
        padding:6px 11px;font-size:12px;font-weight:850}
.ga-intro h2{font-size:27px;line-height:1.3;margin:11px 0 10px;letter-spacing:-.04em;color:var(--ink)}
.ga-lead{font-size:18px;line-height:1.72;margin:0;color:#33465a}
.ga-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 22px}
.ga-chip{font-size:13px;font-weight:750;color:var(--brand-dark);background:var(--soft);padding:8px 12px;border-radius:999px}
.ga-fit{background:var(--ground);border:1px solid var(--line);border-radius:14px;padding:19px}
.ga-fit small{color:var(--sub);font-size:13px}
.ga-fit strong{display:block;margin-top:7px;font-size:17px;line-height:1.55;color:var(--ink)}

/* 본문 설명 — 접지 않는다. 들어오자마자 읽히게 둔다 */
.ga-about{border-top:1px solid var(--line);margin-top:26px;padding-top:24px}
.ga-about h3{font-size:22px;margin:0 0 12px;letter-spacing:-.035em;color:var(--ink)}
.ga-copy h4{font-size:18px;margin:25px 0 8px;letter-spacing:-.03em;color:var(--ink)}
.ga-copy h4:first-child{margin-top:0}
.ga-copy p{font-size:16px;line-height:1.75;color:#475b70;margin:0 0 13px}
.ga-copy p strong{color:var(--ink)}
.gaa .ga-copy a{color:var(--brand-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.gaa .ga-copy a:hover{color:var(--brand)}
.ga-note{background:#fff8eb;border-left:3px solid var(--sun);padding:16px 18px;margin:20px 0;border-radius:0 10px 10px 0}
.ga-note b{font-size:15px;color:#84550a}
.ga-note p{margin:5px 0 0;font-size:14px;color:#806c4e;line-height:1.65}

/* ── 예약 전 꼭 확인하세요 ── */
.ga-book{border:1px solid #ffd89c;border-top:4px solid var(--sun);border-radius:17px;padding:23px;background:var(--paper)}
.ga-book h3{margin:0 0 18px;font-size:21px;letter-spacing:-.035em;color:var(--ink)}
.ga-bitem{padding:17px 0;border-top:1px solid #edf0f3}
.ga-bitem:first-of-type{border-top:0;padding-top:0}
.ga-bitem b{font-size:16px;line-height:1.4;color:var(--ink)}
.ga-bitem p{font-size:14px;line-height:1.65;color:var(--sub);margin:6px 0 0}
.ga-times{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ga-times span{background:#fff4df;color:#8b5704;border-radius:7px;padding:7px 9px;font-size:12px;font-weight:800}
.ga-team{display:flex;gap:11px;border-top:1px solid #edf0f3;margin-top:6px;padding-top:18px;align-items:center}
.ga-team img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:#fff}
.ga-team b{font-size:14px;display:block;color:var(--ink)}
.ga-team span{font-size:12px;color:var(--sub);line-height:1.5}

/* 버튼 위계 — 1순위 패키지, 2순위 골프 단품. 상담은 작은 보조 링크 */
.ga-cta{display:grid;gap:9px;margin-top:17px}
.gaa .ga-cta1,.gaa .ga-cta2{display:block;text-align:center;border-radius:11px;padding:14px;font-weight:850;font-size:15px}
.gaa .ga-cta1{background:var(--brand);color:#fff}
.gaa .ga-cta1:hover{background:var(--brand-dark)}
.gaa .ga-cta2{border:1px solid #a9cdef;color:var(--brand-dark);background:var(--paper)}
.gaa .ga-cta2:hover{background:var(--soft)}
.gaa .ga-sub{display:block;text-align:center;color:var(--sub);font-size:12px;margin-top:3px;
        text-decoration:underline;text-underline-offset:3px}
.gaa .ga-sub:hover{color:var(--brand-dark)}

/* ── 코스 제원 · 서비스 · 이동시간 ── */
.ga-block{margin-top:40px;border-top:1px solid var(--line);padding-top:36px}
.ga-bhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.ga-bhead h2{font-size:26px;margin:9px 0 0;letter-spacing:-.04em;color:var(--ink)}
.ga-bhead p{font-size:14px;color:var(--sub);margin:0}
.ga-spec{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ga-spec>div{padding:19px;min-height:90px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.ga-spec>div:nth-child(4n){border-right:0}
.ga-spec>div:nth-child(n+5){border-bottom:0}
.ga-spec small{display:block;color:var(--sub);font-size:13px;font-weight:650;margin-bottom:8px}
.ga-spec strong{font-size:17px;line-height:1.4;color:var(--ink)}
.ga-serv{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:13px}
.ga-serv>div{background:var(--ground);border:1px solid var(--line);border-radius:13px;padding:17px}
.ga-serv small{display:block;color:var(--sub);font-size:13px}
.ga-serv b{display:block;font-size:16px;margin-top:6px;line-height:1.4;color:var(--ink)}
.ga-travel{margin-top:13px;display:grid;grid-template-columns:1fr 1fr 2fr;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ga-travel>div{padding:18px;border-right:1px solid var(--line)}
.ga-travel>div:last-child{border-right:0}
.ga-travel small{display:block;color:var(--sub);font-size:13px;margin-bottom:6px}
.ga-travel b{font-size:16px;line-height:1.45;color:var(--ink)}
.ga-map{margin-top:13px;border:1px solid var(--line);border-radius:14px;overflow:hidden;height:250px;background:var(--ground)}
.ga-map iframe{width:100%;height:100%;border:0;display:block}

/* ── 관련 패키지 ── */
.ga-packs{margin-top:42px;border-top:1px solid var(--line);padding-top:36px}
.ga-phead{display:flex;align-items:flex-end;margin-bottom:18px;gap:20px}
.ga-phead h2{font-size:26px;margin:9px 0 6px;letter-spacing:-.04em;color:var(--ink)}
.ga-phead p{color:var(--sub);font-size:14px;margin:0}
.gaa .ga-phead a{margin-left:auto;color:var(--brand);font-size:14px;font-weight:800;white-space:nowrap}
.ga-plist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ga-pack{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);
         display:block;transition:transform .2s,box-shadow .2s}
.ga-pack:hover{transform:translateY(-3px);box-shadow:0 13px 32px rgba(21,61,92,.12)}
.ga-pack img{width:100%;height:165px;object-fit:cover;display:block;background:var(--ground)}
.ga-pbody{padding:18px}
.ga-pbody small{color:var(--brand);font-size:12px;font-weight:800}
.ga-pbody h3{font-size:19px;margin:8px 0 6px;letter-spacing:-.03em;color:var(--ink)}
.ga-pbody p{font-size:14px;color:var(--sub);margin:0;line-height:1.55}
.ga-pbody strong{display:block;margin-top:15px;font-size:17px;color:var(--brand)}
.ga-disc{margin-top:13px;font-size:12px;color:var(--muted);text-align:right}

/* 판매 중인 상품이 하나뿐인 골프장(현재 레오팔레스)용.
   빈 카드로 셋을 채우지 않고, 남는 자리에 다음 행동을 둔다 */
.ga-plist.ga-one{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.ga-pnone{border:1px solid var(--line);border-radius:16px;background:var(--ground);
          padding:24px;display:flex;flex-direction:column;justify-content:center}
.ga-pnone b{display:block;font-size:18px;letter-spacing:-.03em;color:var(--ink)}
.ga-pnone p{font-size:14.5px;line-height:1.7;color:var(--sub);margin:9px 0 16px}
.gaa .ga-pnone .ga-cta2{align-self:flex-start;padding:13px 20px}

/* ── 좁은 화면 ── */
@media(max-width:1050px){
  .ga-wrap{grid-template-columns:1fr;width:calc(100% - 28px)}
  .ga-side{position:static}
  .ga-pick{display:none}
  .ga-list{display:flex;gap:6px;overflow:auto;padding-bottom:2px}
  .ga-course{min-width:178px}
  .gaa .ga-compare{max-width:250px;margin-left:auto;margin-right:auto}
  .ga-intro{grid-template-columns:1fr}
  .ga-facts{grid-template-columns:repeat(3,1fr)}
  .ga-fact:nth-child(3n){border-right:0}
  .ga-fact:nth-child(n+4){border-top:1px solid var(--line)}
  .ga-plist{grid-template-columns:1fr 1fr}
  .ga-travel{grid-template-columns:1fr 1fr}
  .ga-travel>div:last-child{grid-column:1/3;border-top:1px solid var(--line)}
}
@media(max-width:650px){
  .ga-wrap{width:100%;margin:0;gap:0}
  .ga-side{border-radius:0;box-shadow:none;padding:15px 17px;border-left:0;border-right:0}
  .ga-side h2,.ga-side .ga-sdesc,.gaa .ga-compare{display:none}
  .ga-main{border-radius:0;padding:22px 17px 44px;border-left:0;border-right:0}
  .ga-title{display:block}
  .ga-title h1{font-size:25px}
  .ga-acts{display:none}
  /* 사진 셋만 쓴다. 큰 칸 : 작은 칸 = 2 : 1 이라 비율은 그대로 */
  .ga-gallery{grid-template-columns:2fr 1fr;aspect-ratio:2.371/1;border-radius:14px 14px 0 0}
  .ga-gallery figure:nth-child(n+4){display:none}
  .ga-gallery figure:nth-child(3):after{content:"사진 10장 모두 보기";position:absolute;inset:0;
    display:grid;place-items:center;background:rgba(8,31,48,.48);color:#fff;font-size:12px;font-weight:800}
  .ga-facts{grid-template-columns:1fr 1fr;border-radius:0 0 14px 14px}
  .ga-fact{min-height:0;padding:16px 15px}
  .ga-fact:nth-child(3n){border-right:1px solid var(--line)}
  .ga-fact:nth-child(2n){border-right:0}
  .ga-fact:nth-child(n+3){border-top:1px solid var(--line)}
  .ga-fact:last-child{grid-column:1/3;border-right:0}
  .ga-fact strong,.ga-fact.is-key strong{font-size:16px}
  .ga-intro{margin-top:28px}
  .ga-intro h2{font-size:22px}
  .ga-lead{font-size:16px}
  .ga-copy p{font-size:15px}
  .ga-book{padding:18px}
  .ga-spec{grid-template-columns:1fr 1fr}
  .ga-spec>div{min-height:0;padding:15px}
  .ga-spec>div:nth-child(4n){border-right:1px solid var(--line)}
  .ga-spec>div:nth-child(2n){border-right:0}
  .ga-spec>div:nth-child(n+5){border-bottom:1px solid var(--line)}
  .ga-spec>div:nth-last-child(-n+2){border-bottom:0}
  .ga-serv{grid-template-columns:1fr 1fr}
  .ga-travel,.ga-plist,.ga-plist.ga-one{grid-template-columns:1fr}
  .ga-pnone{padding:20px}
  .ga-travel>div{border-right:0;border-bottom:1px solid var(--line)}
  .ga-travel>div:last-child{grid-column:auto;border-bottom:0}
  .ga-phead{display:block}
  .ga-phead a{display:inline-block;margin:10px 0 0}
  .ga-pack img{height:190px}
  .ga-block,.ga-packs{margin-top:32px;padding-top:28px}
}

/* ═══════════════════════════════════════════════════════════
   왼쪽 탐색 메뉴 — A-2 정돈형 (2026-08-25)
   확정 시안: 작업기록\20260824_사이드메뉴_테섭\golf-sidebar-a2.html

   호텔과 같은 모양이되 골프장은 5곳뿐이라 높이를 잡지 않는다.
   목록에 flex:1 을 주거나 고정 높이를 두면 레오팔레스 아래에 빈 칸이 생긴다.

   마지막 행과 예약 버튼 사이 16px 은 이렇게 나온다
     .gax-row 아래 margin 2px  +  .gax-book 위 margin 14px  =  16px
   .ga-side 를 flex 컨테이너로 두어 .gax-list 가 BFC 를 만들게 했다.
   그래야 마지막 행의 margin 이 밖으로 새지 않고 목록 높이에 들어간다
   ═══════════════════════════════════════════════════════════ */
/* 호텔과 같은 폭으로. 244px 에서는 「괌 골프장 둘러보기」가 두 줄로 깨진다.
   🔴 반드시 PC 에서만. 미디어쿼리 없이 두면 390px 화면에서도 360px 를 차지해
   본문 폭이 0 에 가까워지고 글자가 한 자씩 세로로 흐른다 (390px 실화면으로 확인) */
@media(min-width:1101px){
  .ga-wrap{grid-template-columns:360px minmax(0,1fr)}
}
.ga-side{
  display:flex;flex-direction:column;
  padding:21px 18px 17px;border-radius:20px;
}
.ga-side .gax-home{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  width:max-content;margin:0 4px 18px;
  color:#526b80;font-size:13px;font-weight:730;text-decoration:none;
}
.ga-side .gax-home:before{
  content:"";width:7px;height:7px;
  border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg);
}
.ga-side .gax-head{flex:none;padding:0 5px 15px;border-bottom:1px solid #e5ecf1}
.ga-side .gax-head .gax-kicker{display:block;color:#0872f6;font-size:12px;font-weight:850;letter-spacing:.13em}
.ga-side .gax-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.ga-side .gax-title h2{margin:0;font-size:23px;letter-spacing:-.045em}
.ga-side .gax-count{
  flex:none;padding:5px 9px;border-radius:999px;
  background:#f1f4f7;color:#65788a;font-size:12px;font-weight:750;
}
.ga-side .gax-head p{margin:7px 0 0;color:#65788a;font-size:13px;line-height:1.5}
.ga-side .gax-listlabel{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;
  margin:14px 7px 6px;
}
.ga-side .gax-listlabel b{font-size:12px}
.ga-side .gax-listlabel span{color:#65788a;font-size:12px}

/* 5곳뿐이다. flex:1 도 고정 높이도 주지 않는다 */
.ga-side nav.gax-list{display:block;flex:none}
.ga-side .gax-row{
  display:flex;align-items:center;gap:12px;
  min-height:66px;margin:2px 0;padding:9px;
  border-radius:12px;text-decoration:none;color:#172b40;
}
.ga-side .gax-row:hover{background:#f5f8fa}
.ga-side .gax-row img{width:51px;height:42px;flex:none;border-radius:9px;object-fit:cover;background:#dbe5ec}
.ga-side .gax-row>span{flex:1;min-width:0}
.ga-side .gax-row b{display:block;overflow:hidden;font-size:15px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.ga-side .gax-row small{display:block;margin-top:4px;color:#65788a;font-size:13px;line-height:1.3}
.ga-side .gax-row.is-on{background:#edf5ff}
.ga-side .gax-row.is-on b{color:#075fc8;font-weight:850}
.ga-side .gax-now{
  flex:none;padding:4px 7px;border-radius:999px;
  background:#0a6df5;color:#fff;font-size:11px;font-style:normal;font-weight:800;
}
.ga-side .gax-arrow{
  flex:none;width:7px;height:7px;
  border-right:1.8px solid #a9b6c0;border-bottom:1.8px solid #a9b6c0;
  transform:rotate(-45deg);
}
.ga-side .gax-book{
  display:flex;align-items:center;justify-content:center;gap:8px;flex:none;
  height:52px;margin-top:14px;border-radius:13px;
  background:#0a6df5;color:#fff;font-size:15px;font-weight:820;text-decoration:none;
  box-shadow:0 8px 18px rgba(10,109,245,.2);
}
.ga-side .gax-book:after{
  content:"";width:7px;height:7px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
.ga-side a:focus-visible{outline:3px solid #9ac8ff;outline-offset:2px}

/* 사이드가 본문 위로 올라오는 폭. 5곳이라 다 펼쳐도 길지 않으므로 세로로 둔다.
   가로로 흘리면 현재 골프장이 화면 밖으로 밀려 「현재」 표시가 보이지 않는다 */
@media(max-width:1100px){
  /* 위 1100px 블록이 목록을 가로로 흘리며 padding-bottom:2px 를 준다.
     그대로 두면 마지막 행과 버튼 사이가 16px 이 아니라 18px 이 된다 (390px 실측) */
  .ga-side nav.gax-list{display:block;padding-bottom:0}
  .ga-side .gax-row{min-width:0}
  /* margin:auto 를 남기면 flex 늘리기가 풀려 버튼이 글자 폭으로 쪼그라든다 */
  .ga-side .gax-book{max-width:none;margin-left:0;margin-right:0}
}
@media(max-width:720px){
  .ga-side{padding:15px 17px}
  .ga-side .gax-home{margin-bottom:12px}
  /* 위 720px 블록의 `.ga-side h2{display:none}` 을 되살린다 — 선택 카드를 없앴기 때문이다 */
  .ga-side .gax-title h2{display:block;font-size:22px}
  .ga-side .gax-head p,.ga-side .gax-listlabel span{display:none}
  .ga-side .gax-book{height:48px}
}

/* ═════ 2026-08-27 UI·UX 전수검수 보정 ═════ */
.gax-toggle{display:none}
.gaa .ga-gallery figure:focus-visible{
  outline:3px solid #0a6df5;outline-offset:-3px
}
.gaa .ga-ghost{min-height:44px}
.uhead .ubox input[readonly]{cursor:pointer}
.uhead .ubox button:focus-visible,
.gaa .ga-ghost:focus-visible,
.gax-toggle:focus-visible{outline:3px solid #9ac8ff;outline-offset:2px}

/* 768·820px 세로 태블릿에서 상단 메뉴가 세로로 깨지지 않게 한다. */
@media(max-width:860px){
  .uhead .unav{display:none}
}

/* PC에서는 제목 옆 공유를 쓰고, 우하단은 상담 아이콘만 남긴다. */
@media(min-width:651px){
  .gaa ~ .gfloat{right:12px}
  .gaa ~ .gfloat .gf.share{display:none}
  .gaa ~ .gfloat .gf.kakao{width:46px;height:46px;padding:0}
  .gaa ~ .gfloat .gf.kakao .lb{display:none}
}

/* 본문 위로 사이드바가 올라오는 태블릿도 전체 5개를 먼저 펼치지 않는다. */
@media(min-width:721px) and (max-width:1050px){
  .ga-side.ga-enhanced{padding:14px 18px}
  .ga-side.ga-enhanced .gax-home,
  .ga-side.ga-enhanced .gax-head,
  .ga-side.ga-enhanced .gax-listlabel{display:none}
  .ga-side.ga-enhanced .gax-list{margin:0}
  .ga-side.ga-enhanced:not(.is-expanded) .gax-row:not(.is-on){display:none}
  .ga-side.ga-enhanced .gax-row{min-height:60px;margin:0;padding:8px 10px}
  .ga-side.ga-enhanced .gax-toggle{
    display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;
    margin-top:7px;border:1px solid #d5e0e8;border-radius:11px;background:#fff;
    color:#425a70;font:700 14px/1.2 inherit;cursor:pointer
  }
  .ga-side.ga-enhanced .gax-book{height:48px;margin-top:9px}
}

/* 모바일 첫 화면은 현재 골프장과 예약 버튼만 보여준다. */
@media(max-width:720px){
  .ga-side.ga-enhanced{padding:12px 14px}
  .ga-side.ga-enhanced .gax-home,
  .ga-side.ga-enhanced .gax-head,
  .ga-side.ga-enhanced .gax-listlabel{display:none}
  .ga-side.ga-enhanced .gax-list{margin:0}
  .ga-side.ga-enhanced:not(.is-expanded) .gax-row:not(.is-on){display:none}
  .ga-side.ga-enhanced .gax-row{min-height:58px;margin:0;padding:7px 9px}
  .ga-side.ga-enhanced .gax-toggle{
    display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;
    margin-top:6px;border:1px solid #d5e0e8;border-radius:11px;background:#fff;
    color:#425a70;font:700 14px/1.2 inherit;cursor:pointer
  }
  .ga-side.ga-enhanced .gax-book{height:48px;margin-top:8px}
  .uhead .ubox input{font-size:16px}
}