@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   호텔 상세 공통 스타일 (2026-08-22)

   기준 파일 — hotelpack/test/golf/mgc.html 의 인라인 `.gdx` 블록
   CTO 지시 — 「호텔도 우리 골프페이지처럼」

   🔴 골프 다섯 곳은 이 CSS 를 파일마다 인라인으로 복제하고 있다.
      호텔은 열두 곳이라 같은 짓을 하면 34KB 가 열두 번 복사된다.
      그래서 여기로 뺐다. 골프 쪽은 이번에 건드리지 않았다 —
      다음 손질 때 골프도 이 파일을 쓰게 하면 여섯 벌이 한 벌이 된다.

   클래스 여덟이 guamez-refresh.css 와 이름이 겹친다 —
   .gx-btn .gx-chip .gx-chips .gx-course .crumb .gx-hero .gx-side .wrap
   그 파일은 메인·상세가 같이 쓰므로 그대로 얹으면 다른 화면이 깨진다.
   전부 `.gdx` 안에서만 살게 했다.

   골프와 다른 곳 셋
   ① `.gx-tips` — 「알아두면 좋은 것들」. 호텔은 머무는 시간이 길어 팁이 많이 나온다
   ② 그 패널을 오른쪽 열에 둔다. 골프의 오른쪽 하단 여백 문제를 여기서 풀었다
   ③ 갤러리가 사진 수에 따라 1·2·3칸으로 갈린다 (아래)

   🔴 갤러리 칸수 — 실서버 사진 수가 호텔마다 다르다
      `.gx-gallery`      2칸 (기본). 850×540 두 장
      `.gx-gallery.g3`   3칸. 닛코만 해당 (nikko-01·02·03)
      `.gx-gallery.g1`   1칸. 하얏트·두짓비치. 사진이 한 장뿐이다
      「{호텔}.jpg」(숫자 없는 것) 여덟은 966×966 정사각 배너다. 글자가 박혀 있어 쓰지 않는다.
      예외는 lotte.jpg 하나로 720×468 실사진이다.
   ══════════════════════════════════════════════════════════════ */

.gdx{--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)}
.gdx, .gdx *{box-sizing:border-box}
.gdx a{text-decoration:none;color:inherit}
.gdx button{font:inherit}

.gdx .gx-hero{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(390px,.78fr);gap:24px;align-items:stretch}

/* ── 갤러리 ── */
.gdx .gx-gallery{display:grid;grid-template-columns:1.5fr .9fr;grid-template-rows:230px 230px;gap:4px;overflow:hidden;border-radius:18px;box-shadow:var(--shadow);background:#dbe4ec}
.gdx .gx-gallery figure{margin:0;position:relative;overflow:hidden;grid-row:1/3}
.gdx .gx-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gdx .gx-gallery figure:hover img{transform:scale(1.025)}
.gdx .gx-gallery .gx-count:after{content:"사진 모두 보기";position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,31,48,.5);color:#fff;font-size:17px;font-weight:750}
/* 사진 셋 — 왼쪽 큰 것 하나, 오른쪽 위아래 둘 */
.gdx .gx-gallery.g3 figure{grid-row:auto}
.gdx .gx-gallery.g3 figure:first-child{grid-row:1/3}
/* 사진 하나 */
.gdx .gx-gallery.g1{grid-template-columns:1fr}
.gdx .gx-gallery.g1 figure{grid-row:1/3}

.gdx .gx-summary{background:rgba(255,255,255,.94);border:.5px solid rgba(16,24,40,.07);border-radius:18px;padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.gdx .gx-eyebrow{display:flex;align-items:center;gap:9px;color:var(--brand);font-size:13px;font-weight:760}
.gdx .gx-eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px var(--soft)}
.gdx h1{font-size:30px;line-height:1.25;letter-spacing:-.04em;margin:22px 0 8px;color:#182433}
.gdx .gx-formal{font-size:14px;color:#748396;margin:0 0 18px}
.gdx .gx-chips{display:flex;flex-wrap:wrap;gap:7px}
.gdx .gx-chip{background:var(--soft);color:var(--brand-dark);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700;transition:background .15s,color .15s,border-color .15s}
.gdx .gx-chip:hover{background:var(--brand);color:#fff}
.gdx .gx-fit{margin:22px 0 0;padding:17px 18px;background:#f7fafc;border:1px solid var(--line);border-radius:12px}
.gdx .gx-fit b{display:block;font-size:13px;color:#536378;margin-bottom:7px}
.gdx .gx-fit p{margin:0;font-size:15px;font-weight:700;line-height:1.55}
.gdx .gx-buttons{margin-top:auto;padding-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.gdx .gx-btn{height:48px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:800;border:1px solid var(--brand);background:#fff;color:var(--brand);transition:background .15s,border-color .15s,color .15s,transform .1s}
.gdx .gx-btn.gx-primary{background:var(--brand);color:#fff}
.gdx .gx-btn:active{transform:translateY(1px)}
.gdx .gx-consult{text-align:center;margin-top:13px;color:#5b6b7f;font-size:13px}
.gdx .gx-consult b{color:var(--brand)}
.gdx .gx-consult a{transition:color .15s}
.gdx .gx-consult a:hover b{text-decoration:underline;text-underline-offset:3px}

.gdx .gx-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 26px}
.gdx .gx-quick article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 19px;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.gdx .gx-quick article:hover{border-color:#b9d4f7;box-shadow:0 2px 10px rgba(21,112,239,.08)}
.gdx .gx-quick small{display:block;color:#7d8b9c;font-size:12px;margin-bottom:7px}
.gdx .gx-quick strong{font-size:16px;color:#16283a}
.gdx .gx-quick p{font-size:12px;color:#8997a8;margin:5px 0 0}

.gdx .gx-content{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(390px,.78fr);gap:24px;align-items:start}
.gdx .gx-left{display:grid;gap:18px}
.gdx .gx-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 2px 10px rgba(20,40,60,.04)}
.gdx .gx-panel h2{margin:0 0 6px;font-size:21px;letter-spacing:-.035em}
.gdx .gx-desc{margin:0 0 21px;color:var(--sub);font-size:14px;line-height:1.65}

.gdx .gx-reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gdx .gx-reason{padding:18px;background:#f7fafc;border:1px solid var(--line);border-radius:12px;transition:background .15s,border-color .15s}
.gdx .gx-reason:hover{border-color:#b9d4f7;background:#fbfdff}
.gdx .gx-reason em{font-style:normal;color:var(--brand);font-size:12px;font-weight:800}
.gdx .gx-reason b{display:block;margin:10px 0 6px;font-size:15px}
.gdx .gx-reason p{margin:0;color:#6d7d90;font-size:13px;line-height:1.55}

.gdx .gx-map{height:310px;overflow:hidden;border-radius:12px;background:#dceaf2}
.gdx .gx-map iframe{width:100%;height:100%;border:0}
.gdx .gx-travel{display:grid;grid-template-columns:1fr 1fr;margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gdx .gx-travel div{padding:17px 18px}
.gdx .gx-travel div+div{border-left:1px solid var(--line)}
.gdx .gx-travel span{font-size:13px;color:#748396}
.gdx .gx-travel b{float:right;font-size:19px}
.gdx .gx-travel i{font-style:normal;font-size:13px;margin-left:2px}

.gdx .gx-course{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gdx .gx-course div{padding:15px 14px;min-height:72px;transition:background .15s}
.gdx .gx-course div:hover{background:#f2f7fd}
.gdx .gx-course div:not(:nth-child(4n)){border-right:1px solid var(--line)}
.gdx .gx-course div:nth-child(n+5){border-top:1px solid var(--line)}
.gdx .gx-course span{display:block;font-size:11px;color:#8997a8;margin-bottom:6px}
.gdx .gx-course b{font-size:14px}

.gdx .gx-side{position:sticky;top:62px;display:grid;gap:18px}
.gdx .gx-check{border-top:4px solid var(--sun)}
.gdx .gx-check ul{list-style:none;margin:17px 0 0;padding:0}
.gdx .gx-check li{padding:15px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.55}
.gdx .gx-check li:first-child{border-top:0;padding-top:0}
.gdx .gx-check b{display:block;color:#26374a;margin-bottom:3px}
.gdx .gx-check span{color:#6b7b8d}

.gdx .gx-team{display:flex;gap:13px;align-items:center}
.gdx .gx-mark{width:42px;height:42px;flex:none;border-radius:50%;object-fit:cover;background:#fff;display:block}
.gdx .gx-team b{display:block;font-size:14px}
.gdx .gx-team span{font-size:12px;color:#7b899a}
.gdx .gx-teamcopy{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:1.65;color:#5c6c7d}

/* ── 아코디언 — 긴 본문을 접어서 살린다 ── */
.gdx .gx-more{margin:14px 0 0;border-top:1px solid var(--line);padding-top:13px}
.gdx .gx-more>summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;font-size:13.5px;font-weight:650;color:var(--brand);padding:2px 0;transition:color .15s}
.gdx .gx-more>summary::-webkit-details-marker{display:none}
.gdx .gx-more>summary::after{content:"";margin-left:auto;width:6px;height:6px;border-right:2px solid #9fb0c0;border-bottom:2px solid #9fb0c0;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
.gdx .gx-more[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.gdx .gx-more>summary:hover{color:var(--navy)}
.gdx .gx-morein{margin-top:12px}
.gdx .gx-morein p{margin:0 0 12px;font-size:13.5px;line-height:1.72;color:var(--sub)}
.gdx .gx-morein p:last-child{margin-bottom:2px}
.gdx .gx-morein strong{color:var(--ink);font-weight:650}
.gdx .gx-morein h4{margin:18px 0 8px;font-size:14px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.gdx .gx-morein h4:first-child{margin-top:2px}

/* 안내다. 경고가 아니다. 아이콘도 쓰지 않는다 */
.gdx .gx-callout{margin:0 0 16px;padding:13px 15px;background:#fff8ec;border-left:3px solid var(--sun);border-radius:0 8px 8px 0}
.gdx .gx-callout b{display:block;font-size:13.5px;font-weight:700;line-height:1.6;color:#8a5a08;letter-spacing:-.02em}
.gdx .gx-callout span{display:block;margin-top:4px;font-size:13px;line-height:1.65;color:#8b7350}

/* ── 호텔에만 있는 것 — 알아두면 좋은 것들 ── */
.gdx .gx-tips{border-top:4px solid var(--green)}
.gdx .gx-tips ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.gdx .gx-tips li{padding:16px 0 16px 26px;border-top:1px solid var(--line);font-size:14px;line-height:1.62;color:#54637a;position:relative}
.gdx .gx-tips li:first-child{border-top:0;padding-top:2px}
.gdx .gx-tips li:before{content:"";position:absolute;left:4px;top:24px;width:7px;height:7px;border-radius:50%;background:var(--green);opacity:.55}
.gdx .gx-tips li:first-child:before{top:10px}
.gdx .gx-tips li b{color:#22323f;font-weight:700}

.gdx .gx-btn:focus-visible,
.gdx .gx-more>summary:focus-visible{outline:3px solid rgba(21,112,239,.28);outline-offset:2px}

/* ── 빵부스러기 ── */
.crumb{gap:9px;padding-bottom:2px}
.crumb i{border-right-color:#aebccb;border-top-color:#aebccb;opacity:.9}
.crumb a{transition:color .15s}
.crumb a:hover{color:#1570ef;text-decoration:underline;text-underline-offset:3px}
.crumb span{color:#7c8b9b}
.crumb b{background:#eaf2fe;color:#1450a8;font-weight:650;padding:4px 11px;border-radius:20px;letter-spacing:-.02em}

/* 관련 패키지 구역 — 골프와 같다 */
.relsec{max-width:var(--wrap-w);margin:0 auto;padding:0 24px 70px}

/* ══════ 패키지 카드 — 요금을 넣지 않는다 ══════
   tblPack 에 요금 컬럼이 없다. 요금은 별도 계산을 타므로
   정적 HTML 에 박으면 화면가와 실제가가 어긋난다.
   헌법 1-1 「화면 표시가와 결제가는 반드시 일치해야 한다」에 걸린다.
   그래서 카드는 상품 구성까지만 보여주고 요금은 상세로 넘긴다.
   상세 페이지를 .asp 로 바꾸면 그때 요금을 붙인다. */
.relsec .vcard{display:block;color:inherit;text-decoration:none}
.relsec .vgo{
  margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.22);
  font-size:13px;font-weight:750;color:#fff;opacity:.95;
}
.relsec .vcard:hover .vgo{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* ══════ 900 이하 ══════ */
@media(max-width:900px){
  .gdx .gx-hero, .gdx .gx-content{grid-template-columns:1fr}
  .gdx .gx-summary{min-height:430px}
  .gdx .gx-quick{grid-template-columns:1fr 1fr}
  .gdx .gx-side{position:static}
  .gdx .gx-gallery{grid-template-rows:190px 190px}
  .gdx .gx-reasons{grid-template-columns:1fr}
  .gdx .gx-course{grid-template-columns:repeat(2,1fr)}
  .gdx .gx-course div:not(:nth-child(4n)){border-right:0}
  .gdx .gx-course div:nth-child(odd){border-right:1px solid var(--line)}
  .gdx .gx-course div:nth-child(n+3){border-top:1px solid var(--line)}
  /* 흰 카드만 이어지면 단조롭다. 왼쪽에 얇은 색 띠로 결을 준다 */
  .gdx .gx-quick article{position:relative;padding-left:17px}
  .gdx .gx-quick article::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--brand);opacity:.85}
  .gdx .gx-quick article:nth-child(2)::before{background:#2e9e77}
  .gdx .gx-quick article:nth-child(3)::before{background:#7b61c9}
  .gdx .gx-quick article:nth-child(4)::before{background:var(--sun)}
  .gdx .gx-reason em{background:var(--soft);color:var(--brand);padding:2px 8px;border-radius:20px}
}

/* ══════ 560 이하 ══════ */
@media(max-width:560px){
  .gdx .gx-hero{gap:12px}
  /* 사진 둘 — 위에 큰 것, 아래 하나 */
  .gdx .gx-gallery{grid-template-columns:1fr;grid-template-rows:230px 130px}
  .gdx .gx-gallery figure{grid-row:auto}
  /* 사진 셋 — 위에 큰 것, 아래 둘 */
  .gdx .gx-gallery.g3{grid-template-columns:1fr 1fr;grid-template-rows:240px 105px}
  .gdx .gx-gallery.g3 figure:first-child{grid-column:1/3;grid-row:1}
  /* 사진 하나 */
  .gdx .gx-gallery.g1{grid-template-rows:240px}
  .gdx .gx-summary{padding:22px;min-height:auto}
  .gdx h1{font-size:25px}
  .gdx .gx-buttons{grid-template-columns:1fr}
  .gdx .gx-quick{gap:8px}
  .gdx .gx-quick article{padding:15px 14px}
  .gdx .gx-content{gap:12px}
  .gdx .gx-panel{padding:21px}
  .gdx .gx-travel{grid-template-columns:1fr}
  .gdx .gx-travel div+div{border-left:0;border-top:1px solid var(--line)}
  .gdx .gx-tips li{padding-left:22px}
  .gdx .gx-tips li:before{left:2px}
  .crumb{font-size:12px;gap:7px;flex-wrap:wrap}
  .crumb span{color:#7c8b9b}
.crumb b{padding:3px 9px}
}

@media(hover:none){
  .gdx .gx-quick article:active,
  .gdx .gx-reason:active{background:#f4f8fd;transform:scale(.995)}
  .gdx .gx-btn:active{transform:scale(.985)}
}
@media (prefers-reduced-motion:reduce){
  .gdx *,.crumb a{transition:none !important}
}

/* ══════ PC 레이아웃 ══════
   요약 카드 안 순서 — 모바일은 핵심 4칸이 CTA 뒤로, PC 는 추천 대상 아래로 */
.gdx .gx-eyebrow{order:1}
.gdx .gx-summary h1{order:2}
.gdx .gx-formal{order:3}
.gdx .gx-chips{order:4}
.gdx .gx-fit{order:5}
.gdx .gx-quick{order:99}
.gdx .gx-more{order:7}
.gdx .gx-buttons{order:8}
.gdx .gx-consult{order:9}

@media(min-width:901px){
  /* 본문 폭 — 1920·2560 에서도 1400 을 넘지 않는다.
     첫 화면과 두 번째 화면의 칸 폭을 여기 한 곳에서 정한다 */
  .gdx{width:min(1400px,calc(100% - 48px));margin-inline:auto;--gx-cols:minmax(0,1.55fr) minmax(440px,1fr);--gx-gap:22px}
  .gdx .gx-hero{grid-template-columns:var(--gx-cols);gap:var(--gx-gap);align-items:stretch}
  .gdx .gx-gallery{min-width:0;grid-template-rows:1fr 1fr;max-height:760px}
  .gdx .gx-summary{min-height:0}

  /* 핵심 정보 — 흰 카드 넷을 걷고 한 영역 안 2×2 로 */
  .gdx .gx-quick{order:6;display:grid;grid-template-columns:1fr 1fr;gap:0;margin:15px 0 0;padding:0;border-top:1px solid var(--line)}
  .gdx .gx-quick article{background:none;border:0;border-radius:0;box-shadow:none;padding:11px 14px 11px 0}
  .gdx .gx-quick article:nth-child(odd){border-right:1px solid var(--line);padding-right:14px}
  .gdx .gx-quick article:nth-child(even){padding-left:14px}
  .gdx .gx-quick article:nth-child(n+3){border-top:1px solid var(--line)}
  .gdx .gx-quick article::before{display:none}
  .gdx .gx-quick article small{font-size:11.5px;color:var(--muted)}
  .gdx .gx-quick article strong{font-size:14px;font-weight:700;margin-top:1px}
  .gdx .gx-quick article p{font-size:12px;margin-top:2px}
  .gdx .gx-quick article:hover{border-color:var(--line);box-shadow:none}

  /* 권하는 이유 — 카드 셋을 걷고 구분선으로 */
  .gdx .gx-reasons{grid-template-columns:1fr 1fr 1fr;gap:0}
  .gdx .gx-reason{background:none;border:0;border-radius:0;box-shadow:none;padding:2px 18px}
  .gdx .gx-reason + .gx-reason{border-left:1px solid var(--line)}
  .gdx .gx-reason:first-child{padding-left:0}
  .gdx .gx-reason:last-child{padding-right:0}
  .gdx .gx-reason:hover{background:none;border-color:var(--line)}

  .gdx .gx-content{grid-template-columns:var(--gx-cols);gap:var(--gx-gap)}
  .gdx .gx-side{align-self:start;position:sticky;top:88px}
}