/* ============================================================
   main.css — 메인(홈) 전용

   GHGOLF 메인 시안 H : 클린 그리드 + 투어·상품 쇼케이스.
     상단 : 골프장 사진 띠 + 헤드라인 + 한 줄 통합검색
     본문 : 지역탭 / 기간이동 / 골프장 × 10일 예약표 (1179px 전체 폭)
     하단 : 오늘의 추천 골프장(표) / 투어·패키지 쇼케이스(사진)
            / 공지·그린피공지·이벤트·후기 4단 / 뉴스레터

   흰 바탕 · 얇은 선 · 그림자 없음이 이 시안의 규칙이다.
   브랜드색(그린)은 강조에만 쓰고, 뼈대는 잉크색(--gh-ink)으로 잡는다.
   메인에서만 쓰는 규칙이라 pages.css 와 분리했다(다른 화면에 영향 없음).
   ============================================================ */

:root{
  --gh-ink:#111;          /* 표 머리선·탭 활성 등 뼈대 */
  --gh-ink2:#333;
  --gh-mute:#8a8f8c;      /* 보조 설명 */
  --gh-line:#e4e6e5;      /* 기본 구분선 */
  --gh-line2:#cfd3d1;     /* 입력 테두리 */
  --gh-soft:#fafbfa;      /* 행 hover */
}

/* 메인 본문 — 사이드바 없이 1179px 전체 폭 */
.gh-main{max-width:var(--container);margin:0 auto;padding:30px 24px 0;}

/* ============================================================
   상단 띠 — 좌 추천 슬라이드 / 우 통합검색 (투덜이 구성)
   사진은 슬라이드 안에서만 쓰고, 띠 자체는 흰 바탕이다.
   ============================================================ */
.gh-top{background:#fff;border-bottom:1px solid var(--gh-line);}
.gh-top .inner{
  display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:36px;align-items:start;
  max-width:var(--container);margin:0 auto;padding:26px 24px 30px;
}

/* ---------- 추천 슬라이드 ---------- */
.gh-slide{min-width:0;}
.gh-slide .sl-head{
  display:flex;align-items:center;height:42px;padding:0 14px;
  background:var(--gh-ink);color:#fff;
}
.gh-slide .sl-head b{font-size:15px;font-weight:700;letter-spacing:-.6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gh-slide .sl-head b em{font-style:normal;font-weight:800;color:#8fe0b6;}
.gh-slide .sl-head a{margin-left:auto;font-size:12px;color:rgba(255,255,255,.75);padding-left:12px;}
.gh-slide .sl-head a:hover{color:#fff;}

.gh-slide .sl-body{position:relative;height:325px;background:#0d1512;overflow:hidden;
  border:1px solid var(--gh-line2);border-top:0;}
.gh-slide .sl{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease);}
.gh-slide .sl.on{opacity:1;visibility:visible;}
.gh-slide .sl img{width:100%;height:100%;object-fit:cover;display:block;}
.gh-slide .sl .ov{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.24) 46%,rgba(0,0,0,0) 72%);}
.gh-slide .sl .cap{position:absolute;left:22px;right:70px;bottom:44px;color:#fff;display:block;}
.gh-slide .sl .cap small{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;
  padding:3px 8px;border:1px solid rgba(255,255,255,.7);margin-bottom:9px;white-space:nowrap;}
.gh-slide .sl .cap b{display:block;font-size:23px;font-weight:800;letter-spacing:-1px;line-height:1.25;}
.gh-slide .sl .cap .pr{display:block;margin-top:8px;font-size:19px;font-weight:800;}
.gh-slide .sl .cap .pr small{border:0;padding:0;margin:0 0 0 4px;font-size:12px;font-weight:500;letter-spacing:0;}

/* 좌우 화살표 */
.gh-slide .sl-arr{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:52px;border:0;background:rgba(0,0,0,.34);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;
}
.gh-slide .sl-arr:hover{background:rgba(0,0,0,.56);}
.gh-slide .sl-arr.prev{left:0;}
.gh-slide .sl-arr.next{right:0;}

/* 인디케이터 */
.gh-slide .sl-dots{position:absolute;right:20px;bottom:18px;z-index:2;display:flex;gap:7px;}
.gh-slide .sl-dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);
}
.gh-slide .sl-dots button.on{background:#fff;width:22px;border-radius:5px;}

/* ---------- 통합검색 박스 ---------- */
.gh-sbox{background:#fff;border:1px solid var(--gh-line2);box-shadow:0 6px 20px rgba(14,40,26,.10);}
.gh-sbox .bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;
  background:var(--green-700);color:#fff;}
.gh-sbox .bar svg{width:18px;height:18px;flex-shrink:0;}
.gh-sbox .bar b{font-size:16px;font-weight:800;letter-spacing:-.6px;}
.gh-sbox .bar span{margin-left:auto;font-size:11px;color:rgba(255,255,255,.75);}
/* 키워드 한 줄 */
.gh-sbox .kw{display:flex;gap:8px;padding:12px 14px;border-bottom:1px solid var(--gh-line);}
.gh-sbox .kw input{flex:1;min-width:0;height:40px;border:1px solid var(--gh-line2);padding:0 12px;font-size:14px;outline:0;}
.gh-sbox .kw input::placeholder{color:#b3b7b5;}
.gh-sbox .kw button{height:40px;padding:0 18px;border:0;background:var(--gh-ink);color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;}
.gh-sbox .kw button:hover{background:var(--green-600);}
/* 탭 */
.gh-sbox .tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#f5f6f6;}
.gh-sbox .tabs a{display:flex;align-items:center;justify-content:center;height:38px;
  font-size:13px;font-weight:600;color:var(--gh-mute);border-bottom:1px solid var(--gh-line);}
.gh-sbox .tabs a.on{background:#fff;color:var(--gh-ink);font-weight:800;
  border-bottom-color:#fff;box-shadow:inset 0 2px 0 var(--green-600);}
/* 표 */
.gh-sbox .pane{display:none;}
.gh-sbox .pane.on{display:block;}
.gh-sbox table{width:100%;border-collapse:collapse;}
.gh-sbox th,.gh-sbox td{border-bottom:1px solid var(--gh-line);height:44px;vertical-align:middle;}
.gh-sbox th{width:96px;background:#fafbfa;font-size:12px;font-weight:700;color:var(--gh-ink2);
  text-align:left;padding-left:14px;border-right:1px solid var(--gh-line);}
.gh-sbox td{padding:0 12px;}
.gh-sbox td input,.gh-sbox td select{width:100%;height:30px;border:0;font-size:13px;font-weight:600;
  color:var(--gh-ink);outline:0;background:transparent;}
.gh-sbox td input::placeholder{color:#b8bcba;font-weight:400;}
/* 하단 버튼 */
.gh-sbox .go{display:flex;gap:8px;padding:12px 14px;}
.gh-sbox .go .cond,.gh-sbox .go .submit{height:44px;display:flex;align-items:center;justify-content:center;
  gap:6px;font-size:14px;font-weight:700;border:0;cursor:pointer;}
.gh-sbox .go .cond{flex:0 0 116px;border:1px solid var(--gh-line2);background:#fff;color:var(--gh-ink2);}
.gh-sbox .go .cond:hover{border-color:var(--gh-ink);}
.gh-sbox .go .submit{flex:1;background:var(--green-600);color:#fff;}
.gh-sbox .go .submit:hover{background:var(--green-800);}
.gh-sbox .go svg{width:15px;height:15px;}

/* ============================================================
   지역 탭 / 기간 이동
   ============================================================ */
.gh-tabs{display:flex;gap:26px;border-bottom:1px solid var(--gh-line);flex-wrap:wrap;}
.gh-tabs a{padding:0 0 12px;font-size:15px;font-weight:600;color:var(--gh-mute);position:relative;}
.gh-tabs a:hover{color:var(--gh-ink2);}
.gh-tabs a.on{color:var(--gh-ink);font-weight:800;}
.gh-tabs a.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gh-ink);}

.gh-period{display:flex;align-items:center;gap:12px;padding:16px 0 12px;flex-wrap:wrap;}
.gh-period b{font-size:17px;font-weight:800;letter-spacing:-.6px;}
.gh-period .arr{
  width:26px;height:26px;border:1px solid var(--gh-line2);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gh-ink2);
}
.gh-period .arr:hover{border-color:var(--gh-ink);}
.gh-period .arr.off{color:var(--gray-300);cursor:not-allowed;}
.gh-period .legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gh-mute);margin-left:16px;}
.gh-period .legend i{margin-left:10px;}
.gh-period .legend i:first-child{margin-left:0;}
.gh-period .legend em{font-style:normal;margin-left:10px;}
.gh-period .cal-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--gh-ink2);border:1px solid var(--gh-line2);padding:6px 10px;
}
.gh-period .cal-btn:hover{border-color:var(--gh-ink);}
.gh-period .cal-btn svg{width:13px;height:13px;}

/* ============================================================
   예약표 (골프장 × 10일)
   ============================================================ */
.gh-region{margin:0 0 30px;}
.gh-region-head{display:flex;align-items:baseline;gap:12px;padding:0 0 8px;}
.gh-region-head h2{font-size:19px;font-weight:800;letter-spacing:-.9px;}
.gh-region-head strong{font-size:12px;color:var(--green-600);font-weight:700;}
.gh-region-head span{font-size:12px;margin-left:auto;color:var(--gh-mute);}

.gh-grid{
  width:100%;border-collapse:collapse;table-layout:fixed;
  border-top:2px solid var(--gh-ink);min-width:880px;
}
.gh-grid th,.gh-grid td{text-align:center;border-bottom:1px solid var(--gh-line);height:44px;}
.gh-grid th{font-size:12px;font-weight:600;color:var(--gh-mute);line-height:1.3;background:#fff;}
.gh-grid th.sat{color:var(--blue-600);}
.gh-grid th.sun{color:var(--red-600);}
.gh-grid th:first-child,.gh-grid td:first-child{width:200px;text-align:left;padding-left:4px;}
.gh-grid th:nth-child(2),.gh-grid td:nth-child(2){width:48px;}
.gh-grid tbody tr:hover td{background:var(--gh-soft);}
/* 골프장명 */
.gh-club{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 회원제(M)/퍼블릭(P) 원형 배지 — 운영사 사이트와 같은 표기 */
.gh-div{
  width:17px;height:17px;flex-shrink:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1;color:#fff;font-style:normal;
}
.gh-div.m{background:#e8536f;}
.gh-div.p{background:#2bb673;}
/* 달력 아이콘 */
.gh-cal a{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--gray-400);}
.gh-cal a:hover{color:var(--green-700);}
.gh-cal svg{width:15px;height:15px;}
/* 잔여 수량 */
.gh-num{font-size:16px;font-weight:800;color:var(--gh-ink);font-variant-numeric:tabular-nums;}
.gh-num:hover{color:var(--green-700);text-decoration:underline;}
.gh-num.low{color:var(--red-600);}
.gh-none{color:#d4d7d5;}

/* ============================================================
   섹션 공통
   ============================================================ */
.gh-sec{margin-top:52px;}
.gh-sh{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--gh-ink);
  padding-top:14px;margin-bottom:16px;flex-wrap:wrap;}
.gh-sh h2{font-size:22px;font-weight:800;letter-spacing:-1.2px;}
.gh-sh p{font-size:12px;color:var(--gh-mute);}
.gh-sh .right{margin-left:auto;display:flex;gap:18px;font-size:13px;font-weight:600;color:var(--gh-mute);flex-wrap:wrap;}
.gh-sh .right a:hover{color:var(--gh-ink2);}
.gh-sh .right a.on{color:var(--gh-ink);font-weight:800;box-shadow:inset 0 -2px 0 var(--gh-ink);padding-bottom:2px;}

/* 상태 태그 — 추천 표·상품 카드 공용 */
.gh-tag{display:inline-block;padding:3px 8px;font-size:11px;font-weight:700;border:1px solid;white-space:nowrap;}
.gh-tag,.gh-tag.g,.gh-tag.b-green{color:var(--green-700);border-color:#bcd9c9;}
.gh-tag.r,.gh-tag.b-red{color:var(--red-600);border-color:#f0bfc1;}
.gh-tag.o,.gh-tag.b-gray{color:#a8721b;border-color:#ead9b3;}

/* ---------- 오늘의 추천 골프장 (표) ---------- */
.gh-rec{width:100%;border-collapse:collapse;}
.gh-rec th,.gh-rec td{text-align:left;height:52px;border-bottom:1px solid var(--gh-line);padding:0 8px;}
.gh-rec th{font-size:12px;color:var(--gh-mute);font-weight:600;border-bottom:1px solid var(--gh-ink);height:38px;}
.gh-rec td{font-size:13px;color:var(--gh-ink2);}
.gh-rec td.nm{font-size:16px;font-weight:800;letter-spacing:-.6px;color:var(--gh-ink);}
.gh-rec td.nm a:hover{color:var(--green-700);text-decoration:underline;}
.gh-rec td.fee{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gh-ink);}
.gh-rec td.rt i{font-style:normal;color:var(--gold-600);}
.gh-rec td.rt b{font-weight:700;}
.gh-rec td.empty{text-align:center;color:var(--gray-400);height:80px;}

/* ============================================================
   투어 · 패키지 쇼케이스 (사진)
   ============================================================ */
.gh-feat{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-bottom:16px;}
.gh-fcard{position:relative;display:block;border:1px solid var(--gh-line);overflow:hidden;background:#000;}
.gh-fcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);}
.gh-fcard:hover img{transform:scale(1.04);}
.gh-fcard .ov{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.26) 46%,rgba(0,0,0,0) 72%);}
.gh-fcard .tx{display:block;position:absolute;left:22px;right:22px;bottom:20px;color:#fff;}
.gh-fcard .tx small{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;
  padding:3px 8px;border:1px solid rgba(255,255,255,.7);margin-bottom:10px;white-space:nowrap;
}
.gh-fcard .tx b{display:block;font-size:24px;font-weight:800;letter-spacing:-1px;line-height:1.25;}
.gh-fcard .tx .sub{display:block;margin-top:6px;font-size:13px;color:rgba(255,255,255,.85);}
.gh-fcard .tx .pr{display:block;margin-top:10px;font-size:20px;font-weight:800;}
.gh-fcard .tx .pr small{border:0;padding:0;margin:0 0 0 4px;font-size:12px;font-weight:500;letter-spacing:0;}
.gh-fcard.big{height:420px;}
.gh-fcol{display:grid;grid-template-rows:1fr 1fr;gap:16px;}
.gh-fcol .gh-fcard{height:202px;}
.gh-fcol .gh-fcard .tx b{font-size:19px;}
.gh-fcol .gh-fcard .tx .pr{font-size:17px;margin-top:6px;}

/* 상품 카드 4장 */
.gh-prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.gh-pcard{display:flex;flex-direction:column;border:1px solid var(--gh-line);background:#fff;min-width:0;}
.gh-pcard:hover{border-color:var(--gh-ink);}
.gh-pcard .th{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;flex-shrink:0;}
.gh-pcard .th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);}
.gh-pcard:hover .th img{transform:scale(1.05);}
.gh-pcard .rgn{
  position:absolute;left:10px;top:10px;height:22px;padding:0 8px;display:inline-flex;align-items:center;
  background:#fff;font-size:11px;font-weight:800;letter-spacing:.3px;white-space:nowrap;line-height:1;
}
.gh-pcard .bd{display:flex;flex-direction:column;flex:1;padding:12px 14px 14px;}
.gh-pcard .nm{display:block;font-size:16px;font-weight:800;letter-spacing:-.6px;line-height:1.35;
  height:44px;overflow:hidden;color:var(--gh-ink);}
.gh-pcard .inc{display:block;margin-top:5px;font-size:12px;color:var(--gh-mute);line-height:1.5;
  height:36px;overflow:hidden;}
.gh-pcard .row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;}
.gh-pcard .fee{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gh-ink);}
.gh-pcard .fee small{font-size:11px;color:var(--gh-mute);font-weight:500;margin-left:2px;}

/* ============================================================
   공지 · 그린피공지 · 이벤트 · 후기 (4단)
   ============================================================ */
.gh-lists{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;}
.gh-list{min-width:0;}
.gh-list h4{font-size:16px;font-weight:800;border-top:2px solid var(--gh-ink);
  padding-top:12px;margin-bottom:6px;display:flex;align-items:center;letter-spacing:-.6px;}
.gh-list h4 a{margin-left:auto;font-size:12px;font-weight:500;color:var(--gh-mute);}
.gh-list h4 a:hover{color:var(--green-700);}
.gh-list li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--gh-line);font-size:14px;}
.gh-list li a{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gh-ink2);}
.gh-list li a:hover{color:var(--green-700);}
.gh-list li .dt{font-size:12px;color:var(--gh-mute);flex-shrink:0;}
.gh-list li.empty{color:var(--gray-400);font-size:13px;padding:20px 0;border-bottom:0;}

/* ============================================================
   뉴스레터
   ============================================================ */
.gh-news{margin-top:56px;border-top:1px solid var(--gh-ink);border-bottom:1px solid var(--gh-ink);}
.gh-news .inner{display:flex;align-items:center;gap:20px;min-height:84px;flex-wrap:wrap;
  max-width:var(--container);margin:0 auto;padding:18px 24px;}
.gh-news b{font-size:18px;font-weight:800;letter-spacing:-.8px;}
.gh-news p{font-size:13px;color:var(--gh-mute);}
.gh-news form{margin-left:auto;display:flex;}
.gh-news input{width:300px;height:42px;border:1px solid var(--gh-line2);border-right:0;padding:0 14px;font-size:14px;}
.gh-news button{height:42px;padding:0 22px;border:0;background:var(--gh-ink);color:#fff;font-weight:700;cursor:pointer;}
.gh-news button:hover{background:var(--green-600);}

/* ============================================================
   반응형 — 시안은 PC 고정. 좁은 화면은 우리가 유지한다.
   ============================================================ */
@media (max-width:1220px){
  .gh-top .inner{grid-template-columns:minmax(0,1fr) 430px;gap:24px;}
  .gh-slide .sl-body{height:300px;}
  .gh-slide .sl .cap b{font-size:20px;}
  .gh-prods{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gh-lists{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:980px){
  .gh-top .inner{grid-template-columns:1fr;padding:18px 20px 24px;gap:20px;}
  .gh-slide .sl-body{height:230px;}
  .gh-slide .sl .cap{bottom:38px;}
  .gh-slide .sl .cap b{font-size:18px;}
  .gh-main{padding:22px 20px 0;}
  .gh-feat{grid-template-columns:1fr;}
  .gh-fcard.big{height:260px;}
  .gh-news form{margin-left:0;width:100%;}
  .gh-news input{flex:1;width:auto;}
}
@media (max-width:640px){
  .gh-sbox th{width:76px;padding-left:10px;font-size:11px;}
  .gh-sbox .tabs a{font-size:12px;}
  .gh-prods,.gh-lists{grid-template-columns:1fr;}
  .gh-sh h2{font-size:19px;}
  .gh-period .legend{margin-left:0;width:100%;}
  .gh-period .cal-btn{margin-left:0;}
}