/* =========================================================
   골프트립 (GolfTrip) 랜딩페이지 전용 스타일
   경로: /script/css/golf.css
   ========================================================= */

/* ---------- 폰트 (자체호스팅) ---------- */
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('/script/css/fonts/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	src: url('/script/css/fonts/Pretendard-ExtraBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Lora';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('/script/css/fonts/Lora-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Nanum Myeongjo';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('/script/css/fonts/NanumMyeongjo.ttf') format('truetype');
}
@font-face {
	font-family: 'Nanum Myeongjo';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('/script/css/fonts/NanumMyeongjoBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Nanum Myeongjo';
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	src: url('/script/css/fonts/NanumMyeongjoExtraBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Lato';
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	src: url('/script/css/fonts/Lato-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Lato';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('/script/css/fonts/Lato-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Lato';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('/script/css/fonts/Lato-Bold.ttf') format('truetype');
}

.gtWrap {
	--gt-green: #1B8E46;
	--gt-green-dark: #146c35;
	--gt-navy: #0B2137;
	font-family: 'Pretendard', system-ui, sans-serif;
	width: 1920px;
	margin: 0 auto;
	background: #fff;
}
.gtWrap a { text-decoration: none; }
.gtWrap * { box-sizing: border-box; }

/* ================= 1. 히어로 배너 ================= */
.gtHero {
	position: relative;
	width: 1920px;
	height: 750px;
	overflow: hidden;
}
.gtHero .gtHeroImg {
	position: absolute; top: 0; right: 0;
	width: 1152px; height: 750px;
	background: #0b3f5c;
}
.gtHero .gtHeroImg img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.gtHero .gtHeroLeft {
	position: absolute; top: 0; left: 0;
	width: 768px; height: 750px;
	padding: 52px 56px 52px 72px;
	display: flex; flex-direction: column; justify-content: space-between;
	background-color: var(--gt-navy);
	overflow: hidden;
}
.gtHero .gtLogoRow { display: flex; align-items: center; gap: 16px; }
.gtHero .gtLogoRow img { height: 44px; width: auto; display: block; flex: none; }
.gtHero .gtLogoDivider { width: 2px; height: 20px; background: rgba(255,255,255,.35); }
.gtHero .gtLogoLabel {
	font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
	color: rgba(255,255,255,.65); font-family: 'Lora', serif;
}
.gtHero .gtSeasonRow { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.gtHero .gtSeasonBar { width: 56px; height: 2px; background: var(--gt-green); }
.gtHero .gtSeasonText {
	font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
	color: rgba(255,255,255,.75); font-style: italic;
}
.gtHero h1 {
	margin: 0; font-weight: 800; font-size: 72px; line-height: 1.06;
	letter-spacing: -.02em; color: #fff;
}
.gtHero .gtHeroDivider { height: 2px; background: rgba(255,255,255,.22); margin: 34px 0 24px; }
.gtHero .gtHeroSub { font-size: 19px; color: rgba(255,255,255,.85); }
.gtHero .gtHeroBtnRow { display: flex; margin-top: 40px; }
.gtHero .gtBtn {
	display: inline-flex; align-items: center; gap: 12px;
	background: var(--gt-green); color: #fff;
	padding: 18px 32px; font-size: 20px; border: 0; cursor: pointer;
	transition: background .18s ease;
}
.gtHero .gtBtn:hover { background: var(--gt-green-dark); }

/* --- 티어 스트립 (MAX / PLUS / SIGNATURE) --- */
.gtTierStrip {
	position: relative; display: flex;
	border-top: 2px solid rgba(255,255,255,.2);
	align-items: stretch;
}
.gtTierStrip .gtTier {
	flex: none; display: flex; align-items: flex-start; cursor: default;
	border-left: 2px solid rgba(255,255,255,.14);
}
.gtTierStrip .gtTier:first-child { border-left: none; }
.gtTierStrip .gtTierHead {
	flex: none; padding: 18px 22px 0;
	display: flex; flex-direction: column; gap: 4px;
}
.gtTierStrip .gtTierNo {
	font-size: 13px; letter-spacing: .2em; color: rgba(255,255,255,.6); white-space: nowrap;
}
.gtTierStrip .gtTierName {
	font-weight: 800; font-size: 23px; letter-spacing: .08em; white-space: nowrap;
	color: #fff; transition: color .24s ease;
}
.gtTierStrip .gtTier.active .gtTierName { color: #6AEEE1; }
.gtTierStrip .gtTierDetail {
	flex: 0 0 0px; overflow: hidden; height: 74px; padding-top: 18px;
	box-sizing: border-box; display: flex; align-items: center; opacity: 0;
	transition: flex-basis .32s cubic-bezier(.4,0,.2,1), opacity .24s ease;
}
.gtTierStrip .gtTier.active .gtTierDetail { flex: 0 0 224px; opacity: 1; }
.gtTierStrip .gtTierDetail .gtTierBox { width: 224px; padding-right: 8px; flex: none; }
.gtTierStrip .gtTierLine1 { font-weight: 800; font-size: 15px; line-height: 1.3; color: #fff; }
.gtTierStrip .gtTierLine2 { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.85); }

/* ================= 2. 지역 탭 ================= */
.gtTabsSection {
	width: 100vw; background: #fff; padding: 36px 0 0;
}
.gtTabs { display: flex; justify-content: center; gap: 22px; }
.gtTabs .gtTabBtn {
	display: flex; align-items: center; justify-content: center;
	min-width: 132px; height: 52px; padding: 0 26px;
	border-radius: 26px; border: 2px solid #dfe4e8; background: #fff;
	color: #26333f; font-weight: 600; font-size: 17px;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.gtTabs .gtTabBtn:hover { background: #e8f6ee; border-color: var(--gt-green); color: var(--gt-green-dark); }
.gtTabs .gtTabAll { }
.gtTabs .gtTabAll:hover { background: #dfe6ee; border-color: var(--gt-navy); color: var(--gt-navy); }
.gtTabs .gtTabBtn.gtTabAll.active { background: var(--gt-navy); border-color: var(--gt-navy); color: #fff; }
.gtTabs .gtTabBtn.active { background: var(--gt-green); border-color: var(--gt-green); color: #fff; }

.gtTabItem { position: relative; }
.gtTabMenu {
	position: absolute; top: 52px; left: 50%;
	padding-top: 10px;
	transform: translateX(-50%) translateY(-6px);
	opacity: 0; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 20;
}
.gtTabItem:hover .gtTabMenu,
.gtTabItem.open .gtTabMenu {
	opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.gtTabMenu .gtTabArrow {
	width: 0; height: 0; margin: 0 auto;
	border-left: 9px solid transparent; border-right: 9px solid transparent;
	border-bottom: 9px solid var(--gt-green);
}
.gtTabMenu .gtTabMenuBox {
	min-width: 176px; background: #fff; border: 2px solid var(--gt-green);
	box-shadow: 0 12px 28px rgba(11,33,55,.14); padding: 8px 0;
}
.gtTabMenu .gtTabMenuBox a {
	display: block; padding: 11px 22px; font-size: 15px; color: #26333f; white-space: nowrap;
}
.gtTabMenu .gtTabMenuBox a:hover { background: #e8f6ee; color: var(--gt-green-dark); }

/* ================= 2-1. 지역 탭바 상단 고정 (스크롤로 화면 맨 위에 닿았을 때) =================
   golf.js 가 .gtTabsSection 에 gtStuck 클래스를 붙이면 탭바(.gtTabs)만 화면 맨 위에 고정됩니다. */
.gtTabsSection.gtStuck .gtTabs {
	position: fixed; top: 0; left: 0;
	width: 100vw;                /* 고정 전(.gtTabsSection 100vw)과 가운데 기준을 똑같이 맞춰서 붙을 때 옆으로 밀리지 않게 함 */
	z-index: 400;                 /* 카드보다 위, 맨위로 버튼(500)보다 아래 */
	padding: 14px 0;              /* 위 여백 14px = golf.js 의 GT_STICK_PAD 와 같은 값 */
	background: #fff;
	box-shadow: 0 4px 14px rgba(11,33,55,.12);
}

/* ================= 3. 상품 카드뷰 ================= */
.gtCardSection { width: 100vw; background: #fff; padding: 36px 0 110px; }
.gtCardInner { width: 960px; margin: 0 auto; }

.gtCardTitle { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 56px; }
.gtCardTitle .gtCardKicker { font-size: 40px; letter-spacing: .02em; color: #4a5a68; }
.gtCardTitle h2 { margin: 0; font-weight: 800; font-size: 45px; letter-spacing: -.02em; color: var(--gt-navy); }
.gtCardTitle .gtCardTitleBar { width: 56px; height: 4px; background: var(--gt-green); margin-top: 6px; }

.gtCardCount { display: flex; justify-content: center; margin: -28px 0 32px; font-size: 17px; color: #5b6b7a; }
.gtCardCount strong { color: var(--gt-green); font-weight: 800; }
.gtCardCount .gtCardCountLocation { color: var(--gt-green); font-weight: 800; }

.gtCardGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; row-gap: 32px; }

.gtCard { border: 2px solid #dfe4e8; background: #fff; display: flex; flex-direction: column; }

.gtCard .gtCardImg { position: relative; height: 272px; background: #e9edf0; }
.gtCard .gtCardImg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gtCard .gtCardImgEmpty {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	color: #9aa7b2; font-size: 14px;
}
.gtCard .gtCardDots { position: absolute; bottom: 16px; right: 16px; display: flex; gap: 6px; }
.gtCard .gtCardDots span { width: 22px; height: 4px; background: rgba(255,255,255,.45); }
.gtCard .gtCardDots span.on { background: #fff; }

.gtCard .gtCardBody { padding: 22px 24px 18px; display: flex; flex-direction: column; flex: 1; }
.gtCard .gtCardBadgeRow { display: flex; align-items: center; gap: 10px; }
.gtCard .gtCardBadge {
	flex: none; width: 125px; text-align: center; color: #fff;
	font-weight: 800; font-size: 11px; letter-spacing: .06em; padding: 6px 0;
}
.gtCard .gtCardBadge.badgeMax { background: #0E8FA6; }
.gtCard .gtCardBadge.badgePlus { background: #1C6FD0; }
.gtCard .gtCardBadge.badgeSignature { background: var(--gt-navy); }
.gtCard .gtCardRegion { font-size: 14px; font-weight: 600; color: #5b6b7a; }
.gtCard h3 { margin: 10px 0 0; font-weight: 800; font-size: 24px; line-height: 1.34; letter-spacing: -.02em; color: var(--gt-navy); }
.gtCard .gtCardTagline { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #5b6b7a; }
.gtCard .gtCardHr { height: 2px; background: #e6eaee; margin: 18px 0; }

.gtCard .gtCardPriceRow { display: flex; align-items: center; gap: 10px; }
.gtCard .gtCardPriceTag {
	flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 13px;
	border-radius: 13px; background: #eef3f7; border: 1px solid #cfdbe5;
	color: #42566a; font-weight: 600; font-size: 12px; white-space: nowrap;
}
.gtCard .gtCardPrice { font-weight: 800; font-size: 27px; letter-spacing: -.02em; color: var(--gt-navy); }

.gtCard .gtSpecBox {
	background: #f4f6f8; padding: 16px 18px; display: grid;
	grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 11px; font-size: 14px;
}
.gtCard .gtSpecBox div { display: flex; gap: 10px; }
.gtCard .gtSpecBox span:first-child { flex: none; width: 50px; color: #8a98a5; }
.gtCard .gtSpecBox span:last-child { color: #26333f; }
.gtCard .gtSpecBox .gtSpecFull { grid-column: 1 / -1; }

/* 상품 키워드 (카드 하단, 스펙 아래·버튼 위) - "#" 없이 순수 텍스트만 표시 */
.gtKeywordBox {
	display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px;
	min-height: 66px; max-height: 66px; overflow: hidden; align-content: flex-start;
}
.gtKeywordChip {
	font-size: 11px; color: #2f6b47; background: #f1f7f3;
	border: 1px solid #b9dcc7; padding: 5px 9px;
}

.gtCard .gtCardBtnRow { display: flex; gap: 8px; }
.gtCard .gtBtnPrimary {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--gt-green); color: #fff; font-weight: 600; font-size: 14px; padding: 14px 0;
	transition: background .18s ease;
}
.gtCard .gtBtnPrimary:hover { background: var(--gt-green-dark); }
.gtCard .gtBtnPrimary img { width: 22px; height: 22px; flex: none; display: block; }
.gtCard .gtBtnOutline {
	flex: none; display: flex; align-items: center; justify-content: center;
	border: 2px solid #cbd4dc; color: var(--gt-navy); font-weight: 600; font-size: 14px; padding: 12px 21px;
	transition: border-color .18s ease;
}
.gtCard .gtBtnOutline:hover { border-color: var(--gt-navy); }

.gtCardMore { display: flex; justify-content: center; margin-top: 48px; }
.gtCardMore a {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	width: 50%; height: 66px; border: 2px solid #dfe4e8; background: #fff;
	color: var(--gt-navy); font-weight: 600; font-size: 18px;
	transition: background .18s ease, border-color .18s ease;
}
.gtCardMore a:hover { background: #f4f8f5; border-color: var(--gt-green); }
.gtCardMore .gtCardMoreArrow {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 17px; background: var(--gt-green); flex: none;
}

/* ================= 맨위로 / 맨아래로 (hm.php 동일 스타일) ================= */
.gtMoveWrap {
	position: fixed; right: 30px; bottom: 40px; z-index: 500;
	display: flex; flex-direction: column; gap: 10px;
}
.gtMoveWrap .gtMoveBtn {
	display: block; width: 50px; height: 50px; border-radius: 50%;
	background: rgba(98,98,98,.27) url('/images/golf/icon_move.png') no-repeat center;
	transition: background-color .18s ease;
}
.gtMoveWrap .gtMoveBtn:hover { background-color: rgba(98,98,98,.45); }
.gtMoveWrap #gtBtnBottom { transform: rotate(180deg); }