@charset "utf-8";
/* ============================================================================
   Phase 0 - 반응형 복원 (PoC)
   기존 파일 수정을 최소화하기 위해 가장 마지막에 로드되는 오버라이드 시트입니다.
   이 파일과 layout.php 의 link 한 줄만 제거하면 원상 복구됩니다.
   ============================================================================ */

/* 1. 1000px 고정 컨테이너 해제 -----------------------------------------------
   기존: .container{width:1000px;max-width:none !important;}
   1024px 이상에서는 기존과 동일하게 1000px 를 유지하므로 데스크톱은 변화 없음 */
.container{
	width:auto !important;
	max-width:1000px !important;
}
@media (max-width:1023px){
	.container{
		padding-left:15px;
		padding-right:15px;
	}
}

/* 2. 미디어 넘침 방지 ------------------------------------------------------ */
img,video,iframe,object,embed{max-width:100%;}
img{height:auto;}

/* 3. 가로 스크롤 차단 ------------------------------------------------------ */
html,body{overflow-x:hidden;}

/* 4. 표 가로 스크롤 -------------------------------------------------------- */
@media (max-width:991px){
	table{max-width:100%;}
}

/* 5. GNB - 992px 미만에서 햄버거 메뉴 ------------------------------------- */
@media (max-width:991px){
	.navbar-header{float:none;}
	.navbar-brand{padding-left:0;}

	.navbar-toggle{
		display:block;
		position:relative;
		float:right;
		margin:10px 0 10px 0;
		padding:9px 10px;
		background-color:transparent;
		background-image:none;
		border:1px solid #ccc;
		border-radius:4px;
	}
	.navbar-toggle .icon-bar{
		display:block;
		width:22px;
		height:2px;
		border-radius:1px;
		background-color:#888;
	}
	.navbar-toggle .icon-bar+.icon-bar{margin-top:4px;}

	.navbar-collapse{
		width:auto;
		border-top:1px solid rgba(0,0,0,.1);
		max-height:80vh;
		overflow-x:visible;
		overflow-y:auto;
		padding-left:0;
		padding-right:0;
	}
	.navbar-collapse.collapse{display:none !important;}
	.navbar-collapse.collapse.in{display:block !important;}

	.navbar-nav{float:none !important;margin:0;}
	.navbar-nav>li{float:none;}
	.navbar-nav>li>a{
		padding-top:14px;
		padding-bottom:14px;
		border-bottom:1px solid rgba(0,0,0,.06);
	}

	/* 데스크톱 전용 메가메뉴(hover 기반)는 모바일에서 숨김 - Phase 1 에서 재설계 */
	#gnbnav-open{display:none !important;}
}

/* 6. 앱 출시 팝업 반응형 --------------------------------------------------- */
.popup-app-dialog{
	width:600px;
	max-width:calc(100% - 20px);
	margin:20px auto;
}
.popup-app-body{
	display:block;
	width:100%;
	height:0;
	padding:0 0 133.3333% 0;   /* 800 / 600 = 1.33333 */
	background-repeat:no-repeat;
	background-position:center top;
	background-size:contain;
}
/* 데스크톱은 기존과 동일하게 화면 중앙 정렬 유지 */
@media (min-width:768px){
	.popup-app-dialog{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		margin:0;
	}
}


/* 7. [핵심] 미디어쿼리 밖에 중복 정의된 col-md-* 그리드 무력화 ---------------
   bootstrap.min.css 안에 col-md-1~12 의 {float:left; width:N%} 세트가
   @media (min-width:1024px) 안에 49개, 그리고 미디어쿼리 '밖'에 70개
   중복으로 들어가 있습니다. 밖에 있는 쪽 때문에 모바일에서도 컬럼이
   가로로 유지되어 화면을 넘칩니다. 1024px 미만에서만 무력화합니다.
   (원본 CSS 는 건드리지 않음) */
@media (max-width:1023px){
	.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
	.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{
		float:none !important;
		width:100% !important;
	}
	/* 데스크톱 메가메뉴용 px 고정폭도 함께 해제 */
	#gnbnav-open .col-md-3,
	#gnbnav-open .col-md-9,
	#gnbnav-open .col-md-9 .col-md-2,
	#gnbnav-open .col-md-3 a{
		width:100% !important;
	}
	/* row 음수 마진으로 인한 가로 넘침 방지 */
	.row{margin-left:0;margin-right:0;}
}

/* 8. 팝업 규칙 보강 (인라인 스타일 제거분 대체) ---------------------------- */
.popup-app-dialog{
	width:600px !important;
	max-width:calc(100% - 20px) !important;
}
.popup-app-body{
	width:100% !important;
	height:0 !important;
	min-height:0 !important;
	padding:0 0 133.3333% 0 !important;
	background-size:contain !important;
	background-repeat:no-repeat !important;
	background-position:center top !important;
}
.popup-app-dialog .modal-content{
	width:100% !important;
	overflow:hidden;
}
@media (min-width:768px){
	.popup-app-dialog{width:600px !important;}
}


/* 9. px 고정폭 래퍼 무력화 (1024px 미만) -----------------------------------
   .section-hero / .hero-content 의 min-width:1000px 이 페이지 전체가
   1000px 아래로 줄어들지 못하게 막고 있었습니다. */
@media (max-width:1023px){
	.section-hero,
	.hero-content,
	.section-hero.franchise .hero-content,
	.franchise .proven-success,
	.franchise .proven-success > div,
	.main .msgbox,
	.main .jumbotron#global .msgbox,
	.main .jumbotron#startup .msgbox,
	.main .jumbotron#xgolf .msgbox,
	.main .jumbotron#xfitting .msgbox,
	.fixed_img_col li,
	.fixed_img_col .thumb,
	.fixed_img_col a,
	.fixed_img_col p,
	.jumbotron1 li,
	.point_img_col li,
	.point_img_col .thumb,
	.point_img_col p,
	.store_maps,
	.course ul,
	.course_none,
	.form-width,
	.notifications-menu,
	.px100,.px150,.px200,.px250,.px300,.px350,
	.px400,.px450,.px500,.px550,.px600,.px650,.px700{
		width:auto !important;
		min-width:0 !important;
		max-width:100% !important;
	}
	.fixed_img_col .thumb img,
	.point_img_col .thumb img{
		width:100% !important;
		height:auto !important;
	}
	.main .carousel-indicators-main,
	.main .carousel-indicators-main li,
	#side_menu .side_wr{
		width:100% !important;
	}
}

/* 10. 탭 메뉴 - 항목이 많아 잘리므로 가로 스크롤로 전환 -------------------- */
@media (max-width:1023px){
	.nav-tabs{
		display:flex;
		flex-wrap:nowrap;
		overflow-x:auto;
		overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		border-bottom:1px solid #ddd;
	}
	.nav-tabs>li{
		float:none;
	}
	.nav-tabs>li>a{white-space:nowrap;}
	/* breadcrumb 도 넘칠 수 있으므로 줄바꿈 허용 */
	.breadcrumb ol{flex-wrap:wrap;}
}


/* 11. [핵심2] nav-justified 가 컨테이너를 넓히는 문제 ----------------------
   .nav-pills.nav-justified 는 display:table / li 는 table-cell 이라
   7개 탭의 min-content 폭(약 529px)이 부모(#wrap, .container)를 함께
   밀어내어 페이지 전체가 559px 로 고정되고 있었습니다.
   flex + 가로스크롤로 전환하여 컨테이너 확장을 끊습니다. */
@media (max-width:1023px){
	#wrap,
	.container{
		width:100% !important;
		max-width:100% !important;
	}

	.nav-justified,
	.nav-pills.nav-justified,
	.nav-tabs.nav-justified{
		display:flex !important;
		flex-wrap:nowrap;
		overflow-x:auto;
		overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		width:100% !important;
		max-width:100% !important;
	}
	.nav-justified > li,
	.nav-pills.nav-justified > li,
	.nav-tabs.nav-justified > li{
		display:block !important;
		float:none !important;
		flex:0 0 auto;
		width:auto !important;
	}
	.nav-justified > li > a{white-space:nowrap;}

	/* 표도 가로 스크롤 컨테이너로 */
	.table-responsive,
	.tab-content{max-width:100%;}
}


/* 12. [진짜 원인] #wrap 의 display:table 해제 ------------------------------
   #wrap 이 display:table 이라 CSS 테이블 박스 규칙상 min-content 폭
   (이 사이트에서는 약 559px) 아래로 절대 줄어들지 않습니다.
   그래서 .container / col-* 를 아무리 손봐도 페이지가 559px 에 고정되어
   모바일에서 우측이 잘렸습니다. 1024px 미만에서만 block 으로 전환합니다. */
@media (max-width:1023px){
	#wrap{
		display:block !important;
		width:100% !important;
		max-width:100% !important;
	}
	/* 스티키 푸터용 음수 마진도 모바일에서는 해제 */
	.main#wrap{
		margin-bottom:0 !important;
		padding-bottom:0 !important;
	}
}


/* ==========================================================================
   Phase 1 - 모바일 GNB 아코디언 및 잔여 넘침 해결
   ========================================================================== */

/* 13. 모바일 GNB 하위메뉴(아코디언) --------------------------------------
   데스크톱 메가메뉴는 hover 기반이라 모바일에서 도달 불가였습니다.
   responsive.nav.js 가 링크를 복제해 아코디언으로 만들고, 여기서 꾸밉니다. */
@media (max-width:991px){
	.navbar-nav > li.has-sub{position:relative;}

	.gnb-sub-toggle{
		position:absolute;
		top:0;
		right:0;
		width:58px;
		height:49px;
		padding:0;
		border:0;
		background:none;
		cursor:pointer;
	}
	.gnb-sub-toggle .gnb-caret{
		display:inline-block;
		width:9px;
		height:9px;
		margin-top:-4px;
		border-right:2px solid #999;
		border-bottom:2px solid #999;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		transition:transform .15s ease;
	}
	.navbar-nav > li.sub-open > .gnb-sub-toggle .gnb-caret{
		margin-top:3px;
		-webkit-transform:rotate(-135deg);
		transform:rotate(-135deg);
	}

	ul.gnb-sub{
		display:none;
		list-style:none;
		margin:0;
		padding:4px 0 8px;
		background:#f6f7f9;
	}
	.navbar-nav > li.sub-open > ul.gnb-sub{display:block;}
	ul.gnb-sub > li > a{
		display:block;
		padding:10px 16px 10px 30px;
		font-size:13px;
		line-height:1.4;
		color:#555;
		text-decoration:none;
	}
	ul.gnb-sub > li > a:active{background:#eceef1;}

	ul.gnb-extra{
		list-style:none;
		margin:0;
		padding:6px 0 10px;
		border-top:1px solid rgba(0,0,0,.08);
		background:#fff;
	}
	ul.gnb-extra > li > a{
		display:block;
		padding:11px 16px;
		font-size:13px;
		color:#333;
		text-decoration:none;
	}
	ul.gnb-extra > li > a .icon{margin-right:6px;vertical-align:middle;}
}

/* 14. 고객센터 - display:table 기반 레이아웃 해제 -------------------------
   table.cs-hotline / table.cs-shortcut 과 그 안의 ul.box 가 모두
   display:table / table-cell 이라 min-content 폭(437~520px)이 강제됐습니다. */
@media (max-width:991px){
	table.cs-hotline,
	table.cs-shortcut,
	table.cs-hotline > tbody,
	table.cs-shortcut > tbody,
	table.cs-hotline > tbody > tr,
	table.cs-shortcut > tbody > tr{
		display:block !important;
		width:100% !important;
	}
	table.cs-hotline > tbody > tr > td,
	table.cs-shortcut > tbody > tr > td,
	table.cs-hotline > tbody > tr > th,
	table.cs-shortcut > tbody > tr > th{
		display:block !important;
		width:auto !important;
	}

	ul.box{
		display:block !important;
		width:100% !important;
	}
	ul.box > li{
		display:block !important;
		width:auto !important;
		padding-left:15px !important;
		padding-right:15px !important;
	}
	ul.box > li:first-child{
		width:auto !important;
		padding-bottom:0 !important;
	}
}

/* 15. 프랜차이즈(창업안내) 성공사례 카드 세로 배치 ------------------------- */
@media (max-width:991px){
	.section-hero.franchise{
		min-height:0 !important;
		height:auto !important;
		background-size:cover !important;
	}
	.franchise .proven-success{
		display:block !important;
		width:100% !important;
	}
	.franchise .proven-success > div{
		width:100% !important;
		max-width:100% !important;
		/* 원본 padding-top:296px 은 480px 폭 기준. 배경이미지 비율에 맞춰 상대값으로 */
		padding:62% 20px 24px !important;
		background-size:100% auto !important;
	}
	.franchise .proven-success > div + div{margin-top:20px;}
	.franchise .proven-success .btn-wrap{flex-wrap:wrap;}
	.franchise .proven-success .btn-wrap a.btn{margin-bottom:6px;}
	.section-hero.franchise + #wrap{padding-top:32px !important;}
}

/* 16. 다음 지도(roughmap) 컨테이너 --------------------------------------- */
.root_daum_roughmap{
	max-width:100% !important;
	overflow:hidden;
}
.root_daum_roughmap .wrap_map,
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap img{max-width:100% !important;}

/* 17. 탭바 가로 스크롤 힌트 ---------------------------------------------- */
@media (max-width:1023px){
	.nav-justified{
		position:relative;
		scrollbar-width:none;
	}
	.nav-justified::-webkit-scrollbar{height:0;}
	.tab-scroll-hint{
		position:absolute;
		top:0;
		right:0;
		width:28px;
		height:100%;
		pointer-events:none;
		background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));
	}
}


/* 18. [Phase 1b] 모바일 GNB 정렬 정리 -------------------------------------
   bootstrap.min.css 안에 .navbar-nav>li>a{width:140px;height:62px;
   text-align:center} 와 .navbar-nav{float:right} 가 '미디어쿼리 밖'에
   들어 있어(그리드와 동일한 패턴) 모바일에서도 가로 메뉴용 치수가 적용되고
   있었습니다. 밑줄이 절반만 그어지고 항목 정렬이 어긋나던 원인입니다. */
@media (max-width:991px){
	.navbar-collapse{
		background:#fff;
		padding-top:4px;
		padding-bottom:0;
	}
	.navbar-nav{
		float:none !important;
		margin:0 !important;
		padding:0 !important;
		width:100% !important;
	}
	.navbar-nav > li{
		float:none !important;
		width:100% !important;
	}
	.navbar-nav > li > a,
	.navbar-nav > li:first-child > a{
		display:block !important;
		width:auto !important;
		height:auto !important;
		margin:0 !important;
		padding:15px 58px 15px 16px !important;
		text-align:left !important;
		line-height:1.4 !important;
		font-size:15px;
		border-bottom:1px solid rgba(0,0,0,.07);
	}
	.navbar-nav > li > a:hover,
	.navbar-nav > li > a:focus{background:#fafbfc;}

	/* 하단 바로가기의 스프라이트 아이콘은 어두운 메가메뉴용이라 흰 배경에서
	   보이지 않으므로 모바일에서는 숨기고 여백만 정리합니다. */
	ul.gnb-extra .icon{display:none !important;}
	ul.gnb-extra > li > a{padding-left:16px !important;}
}

/* 19. [Phase 1b] 탭바 - 모바일에서 더 많이 보이도록 + 스크롤 힌트 --------- */
@media (max-width:1023px){
	.nav-scroll-wrap{position:relative;}
	.tab-scroll-hint{
		position:absolute;
		top:0;
		right:0;
		width:32px;
		height:100%;
		pointer-events:none;
		background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));
	}
	.nav-justified > li > a{
		padding-left:14px !important;
		padding-right:14px !important;
		font-size:13px !important;
	}
}


/* 20. [Phase 1c] navbar-header clearfix ----------------------------------
   .navbar-brand 와 .navbar-toggle 이 모두 float 이라 .navbar-header 의
   높이가 0 으로 무너지고, 그 결과 열린 메뉴의 첫 항목이 로고 옆에
   나란히 붙어 보였습니다. */
@media (max-width:991px){
	.navbar-header:before,
	.navbar-header:after{content:" ";display:table;}
	.navbar-header:after{clear:both;}
	.navbar-header{overflow:hidden;}
	.navbar-collapse{clear:both;}
	.navbar-brand{
		float:left;
		height:auto;
		padding-top:12px;
		padding-bottom:12px;
	}
}


/* 21. [Phase 1d] 프랜차이즈 히어로 배치 교정 -----------------------------
   .hero-content 는 position:absolute; top:50%; transform:translate(-50%,-50%)
   로 '절대 중앙정렬' 되어 있어서 섹션의 명시적 height 에 의존합니다.
   20번 항목에서 height:auto 로 바꾸자 섹션 높이가 0 이 되어 카드가 위로
   튀어나와 상단 네비를 덮었습니다. 모바일에서는 일반 흐름으로 돌립니다. */
@media (max-width:991px){
	.section-hero.franchise{
		min-height:0 !important;
		height:auto !important;
		background-size:cover !important;
	}
	.section-hero.franchise .hero-content{
		position:static !important;
		top:auto !important;
		left:auto !important;
		-webkit-transform:none !important;
		transform:none !important;
		height:auto !important;
		min-width:0 !important;
		padding:36px 16px 40px !important;
	}
	.section-hero.franchise .hero-content .page-header{
		margin:0 auto 24px !important;
	}
	.section-hero.franchise .hero-content .page-header h1{
		font-size:1.5rem !important;
		line-height:1.45 !important;
	}
	.section-hero.franchise .hero-content .page-header h5{
		font-size:14px;
		line-height:1.6;
	}
}


/* 22. [Phase 1e] 모바일 가독성 다듬기 (영문) ------------------------------ */
@media (max-width:1023px){
	body{overflow-wrap:break-word;}
	table.table > tbody > tr > td:empty{display:none !important;}
	table.table > tbody > tr > th{padding-right:12px;}
	footer .col-md-2,
	footer .col-md-3,
	footer [class*="col-md-"]{margin-bottom:18px;}
}


/* 23. [Phase 1f] 데스크톱 팝업 중앙정렬 회귀 수정 -------------------------
   원본은 인라인 style 에 transform:translate(-50%,-50%) !important 였습니다.
   이를 클래스로 옮기면서 !important 를 잃었고, 부트스트랩의
   .modal.in .modal-dialog{transform:translate(0,0)} (특이도가 더 높음)에
   밀려 팝업이 화면 중앙이 아니라 우측 하단으로 내려갔습니다. */
@media (min-width:768px){
	.modal.fade .popup-app-dialog,
	.modal.in .popup-app-dialog,
	.popup-app-dialog{
		position:absolute !important;
		top:50% !important;
		left:50% !important;
		margin:0 !important;
		-webkit-transform:translate(-50%,-50%) !important;
		transform:translate(-50%,-50%) !important;
	}
}
/* 모바일에서는 일반 흐름 + 상단 여백 (중앙정렬 시 세로로 잘릴 수 있음) */
@media (max-width:767px){
	.modal.fade .popup-app-dialog,
	.modal.in .popup-app-dialog,
	.popup-app-dialog{
		position:relative !important;
		top:auto !important;
		left:auto !important;
		margin:16px auto !important;
		-webkit-transform:none !important;
		transform:none !important;
	}
}


/* 24. [Phase 1g] 데스크톱에서 햄버거 버튼 숨김 ----------------------------
   Phase 0 에서 <button class="navbar-toggle"> 주석을 해제했는데, 이 테마는
   bootstrap.min.css 안의 .navbar-toggle 관련 규칙(.navbar-toggle{display:none}
   포함)이 통째로 주석 처리되어 있습니다. 그래서 데스크톱에서 스타일이 전혀
   먹지 않은 브라우저 기본 버튼(16x6px 회색 상자)이 로고 옆에 노출됐습니다.
   992px 이상에서 명시적으로 숨깁니다. */
@media (min-width:992px){
	.navbar-toggle{display:none !important;}
}


/* ==========================================================================
   Phase 2 - 모바일 푸터 정리
   ========================================================================== */

/* 25. 하단 사이트맵 메뉴 숨김 --------------------------------------------
   푸터의 5단 사이트맵(골프시뮬레이터/관련제품/프랜차이즈/고객센터/회사소개)은
   모바일에서 세로로 길게 늘어져 스크롤만 잡아먹습니다. 같은 링크를 상단 GNB
   아코디언에서 모두 제공하므로 모바일에서는 숨깁니다. */
@media (max-width:991px){
	#footer .footer-nav > .col-md-10{display:none !important;}

	/* 푸터 전체 여백 */
	#footer{padding:22px 0 26px !important;}
	#footer .footer-nav-wrap{
		padding-bottom:18px;
		margin-bottom:18px;
		border-bottom:1px solid #e3e3e3;
	}
	#footer .footer-nav{margin:0 !important;}

	/* Phase 1e 에서 넣은 일괄 하단여백은 푸터에서 과해지므로 해제 */
	#footer [class*="col-md-"]{margin-bottom:0 !important;}

	/* 콜센터 블록 - 우측정렬 해제, 중앙 배치 */
	#footer .footer-nav > .col-md-2{
		float:none !important;
		width:100% !important;
		text-align:center !important;
		padding-left:15px;
		padding-right:15px;
	}
	#footer .footer-nav > .col-md-2 h6{
		margin:0 0 6px;
		font-size:12px;
		font-weight:normal;
		color:#8a8f96;
		letter-spacing:0;
	}
	#footer .footer-nav > .col-md-2 h2{
		margin:0 0 5px;
		font-size:27px;
		line-height:1.15;
		letter-spacing:-0.5px;
	}
	#footer .footer-nav > .col-md-2 h2 .footer-tel{
		color:inherit;
		text-decoration:none;
	}
	#footer .footer-nav > .col-md-2 small{
		display:block;
		font-size:11px;
		color:#9aa0a6;
	}

	/* SNS 아이콘 - 중앙 정렬 + 터치 영역 확보 */
	#footer .sns{
		margin-top:14px;
		text-align:center;
	}
	#footer .sns .icon_sns{
		display:inline-block;
		margin:0 9px;
	}

	/* 주소 / 저작권 */
	#footer address{
		margin:0 !important;
		font-style:normal;
	}
	#footer address .col-md-10{
		float:none !important;
		width:100% !important;
		text-align:center;
		font-size:12px;
		line-height:1.75;
		color:#7b8188;
	}
	#footer address .col-md-10 b{
		color:#5a6067;
		font-weight:600;
	}
	#footer address .copyright{
		margin:10px 0 0 !important;
		font-size:11px;
		color:#9aa0a6;
	}

	/* 하단 로고 */
	#footer address .col-md-2{
		float:none !important;
		width:100% !important;
		text-align:center !important;
		margin-top:16px !important;
	}
	#footer address .col-md-2 img{
		width:104px;
		height:auto;
	}
}

/* 26. 아주 좁은 화면 보정 ------------------------------------------------- */
@media (max-width:360px){
	#footer .footer-nav > .col-md-2 h2{font-size:24px;}
	#footer address .col-md-10{font-size:11.5px;}
}


/* 27. [Phase 2b] 푸터 주소 항목 묶음 -------------------------------------- */
@media (max-width:991px){
	#footer address .f-item{
		display:inline-block;
		margin:0 5px;
	}
	#footer address .f-item-nowrap{
		white-space:nowrap;
	}
	#footer address .f-item b{margin-right:3px;}
}


/* 28. [Phase 2c] 푸터 잔여 여백 제거 --------------------------------------
   - .footer-nav-wrap 에 min-height:300px 가 걸려 있어(실제 콘텐츠 127px)
     사이트맵을 숨긴 뒤 회색 빈 공간이 170px 가량 남았습니다.
   - #footer 자체가 display:table 이고 margin-top:100px 이라 푸터 위 여백도
     모바일에서는 과합니다.
   margin-top 은 !important 를 쓰지 않습니다. 메인 페이지의
   `.main + #footer{margin-top:0}` (특이도가 더 높음)을 그대로 살리기 위함입니다. */
@media (max-width:991px){
	#footer{
		display:block !important;
		width:100% !important;
		margin-top:40px;
	}
	#footer .footer-nav-wrap{
		min-height:0 !important;
	}
}


/* 29. [Phase 2d] 푸터 값(전화/사업자번호)은 숫자 중간에서 끊지 않음 -------- */
@media (max-width:991px){
	#footer address .f-val{white-space:nowrap;}
}


/* ==========================================================================
   Phase 3 - 메인 히어로 텍스트 정렬 / 동영상 비율 / 상하 마진
   ========================================================================== */

/* 30. 메인 히어로 캐러셀 --------------------------------------------------
   .msgbox 는 데스크톱에서 배경사진 우측에 얹히도록 margin-left:50~56% 로
   밀어둔 블록입니다. 모바일(390px)에서는 남는 폭이 165px 이고 .msg 의
   padding:35px 를 빼면 텍스트 폭이 95px 밖에 안 됩니다. 그래서 문단이
   세로로 1029px 까지 늘어나고 .carousel-inner{overflow:hidden} 에 잘려
   히어로가 빈 화면처럼 보였습니다. 모바일에서는 전체폭 + 중앙정렬로 바꿉니다. */
@media (max-width:991px){
	.main .jumbotron{
		padding:0 !important;
		min-height:56vh;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-align:center;
		-ms-flex-align:center;
		align-items:center;
		background-position:center center !important;
		background-size:cover !important;
	}

	.main .msgbox,
	.main .jumbotron#global .msgbox,
	.main .jumbotron#startup .msgbox,
	.main .jumbotron#xgolf .msgbox,
	.main .jumbotron#xfitting .msgbox{
		float:none !important;
		width:100% !important;
		max-width:100% !important;
		margin:0 !important;
	}

	.main .msgbox .msg{
		padding:34px 22px 36px !important;
		text-align:center !important;
	}
	.main .msgbox .msg h1{
		margin:0 0 12px !important;
		font-size:24px !important;
		line-height:1.35 !important;
	}
	.main .msgbox .msg p{
		margin:0 !important;
		font-size:14px !important;
		line-height:1.7 !important;
		word-break:keep-all;
	}
	.main .msgbox .msg p + .btn{
		margin:20px 0 0 !important;
		padding:9px 22px;
	}

	/* 마스크는 텍스트 가독성용. 전체폭이 되면 너무 어두워지므로 톤을 낮춥니다. */
	.main .msgbox .mask{opacity:0.62 !important;}
	.main .msgbox .mask span.mask-pointer{display:none !important;}

	/* 좌우 슬라이드 화살표 터치 영역 확보 */
	.main .carousel-control{
		width:15% !important;
		min-width:44px;
		background-image:none !important;
	}
}

@media (max-width:400px){
	.main .jumbotron{min-height:52vh;}
	.main .msgbox .msg{padding:28px 18px 30px !important;}
	.main .msgbox .msg h1{font-size:21px !important;}
}

/* 31. 동영상 - 비율 유지 및 상하 여백 정리 --------------------------------
   원본은 <video width="1000" height="562"> 입니다. max-width:100% 만 걸면
   폭은 줄어드는데 height 속성(562px)이 남아 실제 영상 위아래로 큰 빈
   공간(레터박스)이 생깁니다. JS 로 width/height 속성을 aspect-ratio 로
   옮기고, 여기서 폭 100% / 높이 자동으로 마무리합니다. */
video{
	max-width:100%;
	height:auto;
}
@media (max-width:1023px){
	video{
		display:block;
		width:100% !important;
		height:auto !important;
		margin:0 auto;
		background:#000;
	}
	/* 영상 바로 아래 캡션은 붙여서 한 덩어리로 */
	video + .footnote,
	video + small.footnote{
		display:block;
		margin:8px 0 0 !important;
		font-size:11px;
		line-height:1.5;
		color:#8a8f96;
	}
	/* 영상을 감싼 칸의 상하 여백 정돈 */
	.embed-responsive{margin-bottom:10px;}
}

/* 32. 상하 마진 정돈 (모바일 세로 리듬) ------------------------------------ */
@media (max-width:991px){
	/* 섹션 제목 */
	.page-header{
		margin:24px 0 18px !important;
		padding-bottom:12px;
	}
	h3.subtit-exp,
	h3.xtit,
	h3.mb-2{
		margin:28px 0 12px !important;
	}
	h5, h6{margin-top:16px;}

	/* 탭 내용 상하 여백 */
	.tab-content{padding-top:16px;}
	.col-gutter{margin-bottom:0;}

	/* 그리드 스택 시 칸 사이 간격 (컬럼이 세로로 쌓이므로 아래 여백 필요) */
	.col-gutter .row > [class*="col-md-"]{margin-bottom:22px;}
	.col-gutter .row > [class*="col-md-"]:last-child{margin-bottom:0;}

	/* 썸네일 카드 */
	.thumbnail{margin-bottom:22px;}
	.thumbnail .caption{padding:14px 2px 0;}
	.thumbnail .caption h5{margin:0 0 6px;}
	.thumbnail .caption p{margin:0;font-size:13px;line-height:1.65;}

	/* 히어로 바로 다음 본문 시작 여백 */
	.section-hero + #wrap{padding-top:24px !important;}
}


/* 33. [Phase 3b] 메인 히어로 가독성 ---------------------------------------
   .mask 는 position:absolute; width/height:100% 로 .msgbox(=position:relative)
   기준에 맞춰집니다. 데스크톱에서는 우측 540px 박스만 덮으면 되지만,
   모바일에서 msgbox 가 전체폭이 되면 텍스트 영역에만 띠처럼 걸려
   경계가 드러나고 사진이 그대로 비쳐 글씨가 잘 안 읽힙니다.
   msgbox 를 static 으로 바꿔 마스크가 .item(=position:relative) 전체를
   덮게 하고, 톤을 낮춰 사진이 배경으로 보이게 합니다. */
@media (max-width:991px){
	.main .msgbox{position:static !important;}
	.main .msgbox .mask{
		opacity:0.58 !important;
		background-color:#0b1219 !important;
	}
	.main .msgbox .msg h1{
		text-shadow:0 2px 10px rgba(0,0,0,.55);
	}
	.main .msgbox .msg p{
		text-shadow:0 1px 6px rgba(0,0,0,.5);
	}
	.main .msgbox .msg .btn{
		box-shadow:0 2px 10px rgba(0,0,0,.3);
	}
	/* 좌우 화살표가 본문 위로 겹치지 않도록 아래쪽으로 */
	.main .carousel-control .icon{
		position:absolute;
		top:auto;
		bottom:14px;
	}
}


/* 34. [Phase 3c] 히어로 마스크 톤 --------------------------------------- */
@media (max-width:991px){
	.main .msgbox .mask{opacity:0.65 !important;}
}


/* 35. [Phase 3d] 제품 페이지 히어로(.section-hero) 정렬/높이 --------------
   .hero-content 는 flex + align-items:center 로 '블록'은 가운데지만
   text-align 은 상속값(left)이라 줄마다 왼쪽에 붙어 들쭉날쭉했습니다.
   또 height:calc(100svh - 131px) / min-height:563px 라서 모바일에서는
   빈 사진만 700px 넘게 차지합니다.
   .franchise 는 Phase 1d 에서 일반 흐름으로 바꿨으므로 제외합니다. */
@media (max-width:991px){
	.section-hero:not(.franchise){
		height:56vh !important;
		min-height:330px !important;
		max-height:520px !important;
	}
	.section-hero:not(.franchise) .hero-content{
		text-align:center !important;
		padding-left:22px !important;
		padding-right:22px !important;
		min-width:0 !important;
	}
	.section-hero:not(.franchise) .hero-content img{
		max-width:58% !important;
		height:auto !important;
	}
	.section-hero:not(.franchise) .hero-content p{
		margin:12px 0 0 !important;
		font-size:19px !important;
		line-height:1.4 !important;
		word-break:keep-all;
	}
}

@media (max-width:400px){
	.section-hero:not(.franchise){min-height:300px !important;}
	.section-hero:not(.franchise) .hero-content p{font-size:17px !important;}
}


/* ==========================================================================
   Phase 4 - 제품 히어로(.hero-content) 폭 회귀 수정
   ========================================================================== */

/* 36. [회귀 수정] .hero-content 가 화면의 절반 폭이 되던 문제 ---------------
   9번 항목(px 고정폭 무력화)에서 .hero-content 의 min-width:1000px 를 없애려고
   width:auto !important 를 함께 걸었습니다. 그런데 .hero-content 는
   position:absolute; left:50%; transform:translate(-50%,-50%) 이라
   width:auto 가 되면 shrink-to-fit 이 적용되고, 가용폭은
   '컨테이닝 블록 폭 - left 오프셋' = 390 - 195 = 195px 이 됩니다.
   결과적으로 히어로 문구가 화면 절반(195px)에만 갇혀 3~4줄로 접혔습니다.
   메인 페이지의 .msgbox{margin-left:50%} 와 같은 증상입니다.
   -> width 는 100% 로 되돌리고 min-width 만 해제합니다. */
@media (max-width:1023px){
	.hero-content{
		width:100% !important;
		min-width:0 !important;
		max-width:100% !important;
	}
}

/* 37. 히어로 로고/문구 크기 정리 ------------------------------------------
   폭이 195px 일 때는 로고가 88x16px 까지 쪼그라들었습니다.
   전체폭으로 돌아온 만큼 로고와 문구 크기를 다시 잡습니다. */
@media (max-width:991px){
	.section-hero:not(.franchise) .hero-content img{
		width:auto !important;
		max-width:62% !important;
		max-height:44px !important;
		height:auto !important;
	}
	.section-hero:not(.franchise) .hero-content p{
		max-width:320px;
		margin:14px auto 0 !important;
		font-size:20px !important;
		line-height:1.45 !important;
	}
}

@media (max-width:400px){
	.section-hero:not(.franchise) .hero-content img{max-height:38px !important;}
	.section-hero:not(.franchise) .hero-content p{
		max-width:286px;
		font-size:18px !important;
	}
}


/* ==========================================================================
   Phase 5 - X-BALL 마진 / 푸터 여백 / 모바일 가독성(폰트)
   ========================================================================== */

/* 38. X-BALL 구성품 썸네일 고정높이 해제 -----------------------------------
   .equi.xball .fix-height .thumbnail{height:230px} 이라 데스크톱 3단 배치에
   맞춘 높이가 모바일에서도 그대로 유지됩니다. 이미지는 폭에 맞춰 줄어드는데
   칸 높이는 230px 로 남아 이미지 아래에 빈 공간이 생깁니다.
   h5 캡션도 absolute + margin-left:-20px 이라 함께 흐름 배치로 되돌립니다. */
@media (max-width:991px){
	.equi.xball .fix-height .thumbnail{
		height:auto !important;
		padding:0 !important;
		margin-bottom:18px !important;
	}
	.equi.xball .fix-height .thumbnail h5{
		position:static !important;
		width:auto !important;
		margin:10px 0 0 !important;
		text-align:center !important;
	}
	.equi.xball .panel .col-gutter.fix-height .col-md-4{
		margin-bottom:18px !important;
	}
	.equi.xball .panel .panel-body{padding:20px 16px 12px !important;}
}

/* 39. .notifications-menu 안전장치 ---------------------------------------
   9번에서 width:auto 로 바꿨는데 이 요소는 position:absolute; left:0 이라
   shrink-to-fit 으로 찌그러질 수 있습니다(프론트에서는 미사용이지만 방어). */
@media (max-width:1023px){
	.notifications-menu{
		width:100% !important;
		max-width:330px !important;
	}
}

/* 40. 푸터 상하 여백 --------------------------------------------------------
   - "통합 콜센터 및 창업문의" 위쪽에 여백 추가
   - "X-GOLF. All Rights Reserved." 아래 공백 축소 */
@media (max-width:991px){
	#footer{padding:0 0 14px !important;}
	#footer .footer-nav-wrap{
		padding-top:26px !important;
		padding-bottom:20px !important;
		margin-bottom:16px !important;
	}
	#footer address .copyright{margin:10px 0 0 !important;}
	#footer address .col-md-2{
		margin-top:10px !important;
		margin-bottom:0 !important;
	}
	#footer address .col-md-2 img{width:96px !important;}
}

/* 41. 모바일 가독성 - 본문 폰트 확대 ---------------------------------------
   기본 13px 대는 모바일에서 작습니다. 본문 15px / 행간 1.75 를 기준으로
   올리고, 제목도 함께 한 단계씩 키웁니다. */
@media (max-width:991px){
	body{
		font-size:15px !important;
		line-height:1.75 !important;
	}
	p, li, dd, dt, td, th, address, label,
	.caption p, blockquote p, .panel-body,
	.thumbnail .caption p{
		font-size:15px !important;
		line-height:1.75 !important;
	}
	h1{font-size:26px !important; line-height:1.4 !important;}
	h2{font-size:22px !important; line-height:1.4 !important;}
	h3{font-size:19px !important; line-height:1.45 !important;}
	h4{font-size:17px !important; line-height:1.5 !important;}
	h5{font-size:16px !important; line-height:1.55 !important;}
	h6{font-size:15px !important; line-height:1.6 !important;}

	.btn, .btn-sm{font-size:14px !important;}
	small, .footnote, .footnote.text-right{font-size:12.5px !important;}

	/* 서브 내비/탭은 커지면 넘치므로 예외 */
	.navbar-nav > li > a{font-size:16px !important;}
	.nav-justified > li > a{font-size:13px !important;}
	.breadcrumb ol li a{font-size:13px !important;}
	ul.gnb-sub > li > a{font-size:14px !important;}
	ul.gnb-extra > li > a{font-size:14px !important;}

	/* 푸터는 과하게 커지지 않도록 */
	#footer address .col-md-10{font-size:13px !important;}
	#footer address .copyright{font-size:12px !important;}
	#footer .footer-nav > .col-md-2 h6{font-size:13px !important;}
	#footer .footer-nav > .col-md-2 small{font-size:12px !important;}
}

@media (max-width:400px){
	body{font-size:14.5px !important;}
	p, li, dd, dt, td, th{font-size:14.5px !important;}
	h1{font-size:23px !important;}
	h2{font-size:20px !important;}
	h3{font-size:18px !important;}
}


/* ==========================================================================
   Phase 7 - 전체 페이지 푸터 상하 여백 축소
   ========================================================================== */

/* 42. 푸터 아래 60px 빈 공간 제거 -----------------------------------------
   #wrap 에 스티키푸터용 padding-bottom / 음수 margin-bottom 이 걸려 있어
   푸터 아래로 60px 이 삐져나옵니다(전 페이지 공통).
   Phase 0e 에서는 메인 페이지(.main#wrap)만 해제했었습니다.
   측정값(390px, 원격지원/xball/찾아오시는길 동일):
     footer h=420 mar=40/0 pad=0/14
     body.scrollHeight - footer.bottom = 60px   <- 이 60px 제거 */
@media (max-width:991px){
	#wrap{
		padding-bottom:0 !important;
		margin-bottom:0 !important;
	}

	/* 푸터 위 간격 40px -> 20px */
	#footer{
		margin-top:20px !important;
		padding:0 0 8px !important;
	}

	/* 푸터 내부 여백도 한 단계씩 축소
	   ("통합 콜센터 및 창업문의" 위 여백은 유지하되 과하지 않게) */
	#footer .footer-nav-wrap{
		padding-top:20px !important;
		padding-bottom:16px !important;
		margin-bottom:12px !important;
	}
	#footer .sns{margin-top:10px !important;}
	#footer address .copyright{margin:8px 0 0 !important;}
	#footer address .col-md-2{
		margin-top:8px !important;
		margin-bottom:0 !important;
	}
	#footer address .col-md-2 img{width:88px !important;}
}

@media (max-width:400px){
	#footer{margin-top:16px !important;}
	#footer .footer-nav-wrap{padding-top:18px !important;}
}


/* ==========================================================================
   Phase 8 - 푸터 고정높이 / 캐러셀 고정높이 / 좌우 폭·중간 탭 / 로케이션 가독성
   ========================================================================== */

/* 43. [핵심] #footer 고정높이 420px 해제 ----------------------------------
   bootstrap.min.css:86 에 #footer{display:table;width:100%;margin-top:100px;
   height:420px;} 이 있습니다. Phase 2c 에서 display/margin 은 잡았지만
   height:420px 를 놓쳤습니다. 그래서 내용이 335px 로 줄어든 뒤에도
   푸터는 420px 를 유지했고, 마지막 요소(로고) 아래에 93px 의 빈 공간이
   남아 있었습니다. */
@media (max-width:991px){
	#footer{
		height:auto !important;
		min-height:0 !important;
	}
}

/* 44. 캐러셀 고정높이 해제 (회사 전경 등) ---------------------------------
   .company .carousel-inner{height:666px !important} 처럼 데스크톱 이미지
   크기에 맞춘 고정 높이가 걸려 있습니다. 모바일에서는 이미지가 폭에 맞춰
   줄어드는데 칸 높이는 그대로라 이미지 위아래로 검은 배경이 크게 남습니다.
   (회사소개 > 회사개요 "회사 전경"에서 특히 두드러짐) */
@media (max-width:991px){
	.company .carousel-inner,
	.installation .thumbnail .carousel-inner{
		height:auto !important;
		min-height:0 !important;
		background-image:none !important;
	}
	.equi.xplate .carousel-inner > .item{
		height:auto !important;
	}
	.carousel-inner > .item > img,
	.carousel-inner > .item > a > img{
		width:100% !important;
		height:auto !important;
	}
	/* 캡션이 이미지 위에 겹쳐 잘리지 않도록 */
	.carousel-caption{
		position:static !important;
		padding:8px 4px 0 !important;
		text-shadow:none !important;
		color:#555 !important;
		font-size:13px !important;
		text-align:center;
	}
}

/* 45. 좌우 폭 - 콘텐츠가 화면을 더 쓰도록 -------------------------------
   .container(15px) + .col-*(15px) = 좌우 30px 씩 60px 을 여백으로 쓰고
   있었습니다. 390px 화면에서 본문 폭이 330px 밖에 안 됩니다.
   모바일에서는 여백을 줄여 본문 폭을 350px 로 넓힙니다. */
@media (max-width:991px){
	.container{
		padding-left:12px !important;
		padding-right:12px !important;
	}
	.row > [class*="col-md-"],
	.row > [class*="col-sm-"],
	.row > [class*="col-xs-"],
	.row > [class*="col-lg-"]{
		padding-left:8px !important;
		padding-right:8px !important;
	}
	.col-gutter{padding-left:0 !important; padding-right:0 !important;}
	.panel-body{padding-left:14px !important; padding-right:14px !important;}
	.xgolf .panel-body{padding-left:14px !important;}
}

/* 46. 중간 메뉴 탭 - 가로 스크롤 대신 줄바꿈 ------------------------------
   7개 탭을 가로 스크롤로 두면 뒤쪽 항목이 보이지 않아 있는 줄도 모릅니다.
   여러 줄로 접어 전부 보이게 합니다. */
@media (max-width:1023px){
	.nav-justified,
	.nav-pills.nav-justified,
	.nav-tabs.nav-justified{
		display:flex !important;
		flex-wrap:wrap !important;
		overflow:visible !important;
		width:100% !important;
	}
	.nav-justified > li,
	.nav-pills.nav-justified > li,
	.nav-tabs.nav-justified > li,
	.xgolf .nav-justified > li{
		display:block !important;
		float:none !important;
		flex:1 1 33.3333% !important;
		width:auto !important;
		min-width:33.3333%;
		max-width:50%;
	}
	.nav-justified > li > a{
		white-space:normal !important;
		text-align:center !important;
		padding:11px 6px !important;
		font-size:13.5px !important;
		line-height:1.35 !important;
		border-radius:0 !important;
	}
	/* 줄바꿈이 되므로 스크롤 힌트는 불필요 */
	.tab-scroll-hint{display:none !important;}
	.nav-scroll-wrap{overflow:visible !important;}
}

@media (max-width:400px){
	.nav-justified > li,
	.xgolf .nav-justified > li{flex:1 1 50% !important; min-width:50%; max-width:100%;}
	.nav-justified > li > a{font-size:13px !important;}
}

/* 47. 찾아오시는 길 - 표/링크 가독성 --------------------------------------
   기본 본문 색이 #666 이라 모바일에서 대비가 약합니다. */
@media (max-width:991px){
	.location .table.table-condensed tbody tr th,
	.history .table.table-condensed tbody tr th{
		font-size:15px !important;
		color:#333 !important;
	}
	.location .table.table-condensed tbody tr td,
	.history .table.table-condensed tbody tr td{
		font-size:15px !important;
		line-height:1.75 !important;
		color:#4a4a4a !important;
	}
	.location .table > tbody > tr > th,
	.location .table > tbody > tr > td{
		padding-top:12px !important;
		padding-bottom:12px !important;
	}

	/* 서브 내비(브레드크럼) 링크 - 링크 밀도가 높은 영역이라 함께 키움 */
	.breadcrumb ol li a{
		font-size:14px !important;
		line-height:1.5 !important;
	}
	.breadcrumb ol li{padding-top:2px; padding-bottom:2px;}

	/* 본문 링크 대비 강화 */
	#wrap a{color:#2b2b2b;}
	#wrap p a, #wrap li a, #wrap td a{text-decoration:underline;}
}


/* 48. [Phase 8b] 링크 밑줄/색상 적용 범위 축소 ----------------------------
   47번에서 본문 링크 대비를 높이려고 `#wrap li a` 까지 밑줄을 넣었더니
   탭 메뉴(.nav-justified > li > a)와 캐러셀 버튼에도 밑줄이 생겼습니다.
   내비게이션 성격의 링크는 제외합니다. */
@media (max-width:991px){
	#wrap .nav a,
	#wrap .nav-justified a,
	#wrap .nav-pills a,
	#wrap .nav-tabs a,
	#wrap .breadcrumb a,
	#wrap .carousel-btn-set a,
	#wrap .carousel-control,
	#wrap .btn,
	#wrap .thumbnail a,
	#wrap .pagination a{
		text-decoration:none !important;
	}
	#wrap li a{text-decoration:none;}
	#wrap p a,
	#wrap td a,
	#wrap dd a{text-decoration:underline;}

	/* 탭 글자색은 테마 값을 그대로 쓰도록 되돌림 */
	#wrap .nav-justified > li > a{color:inherit;}
	#wrap .nav-justified > li.active > a,
	#wrap .nav-justified > li.active > a:focus,
	#wrap .nav-justified > li.active > a:hover{color:#fff !important;}
}


/* ==========================================================================
   Phase 9 - 중간 메뉴 탭: 한 줄 + 좌우 스크롤
   ========================================================================== */

/* 49. 46번(여러 줄 접기) 취소 --------------------------------------------
   탭을 여러 줄로 접으니 메뉴가 블록처럼 커져 어색했습니다.
   한 줄로 유지하고 넘치는 부분은 좌우 스크롤로 보게 합니다.
   스크롤 가능하다는 표시(우측 페이드)를 다시 켭니다. */
@media (max-width:1023px){
	.nav-justified,
	.nav-pills.nav-justified,
	.nav-tabs.nav-justified{
		display:flex !important;
		flex-wrap:nowrap !important;
		overflow-x:auto !important;
		overflow-y:hidden !important;
		-webkit-overflow-scrolling:touch;
		width:100% !important;
		max-width:100% !important;
		scrollbar-width:none;
	}
	.nav-justified::-webkit-scrollbar{height:0;}

	.nav-justified > li,
	.nav-pills.nav-justified > li,
	.nav-tabs.nav-justified > li,
	.xgolf .nav-justified > li{
		display:block !important;
		float:none !important;
		flex:0 0 auto !important;
		width:auto !important;
		min-width:0 !important;
		max-width:none !important;
	}

	.nav-justified > li > a{
		white-space:nowrap !important;
		text-align:center !important;
		padding:12px 16px !important;
		font-size:14px !important;
		line-height:1.4 !important;
	}

	/* 스크롤 가능 표시 복원 */
	.nav-scroll-wrap{
		position:relative;
		overflow:hidden !important;
	}
	.tab-scroll-hint{
		display:block !important;
		position:absolute;
		top:0;
		right:0;
		width:34px;
		height:100%;
		pointer-events:none;
		background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));
	}
}

/* 400px 이하에서도 동일하게 한 줄 유지 (46번의 2열 규칙 취소) */
@media (max-width:400px){
	.nav-justified > li,
	.xgolf .nav-justified > li{
		flex:0 0 auto !important;
		min-width:0 !important;
		max-width:none !important;
		width:auto !important;
	}
	.nav-justified > li > a{
		font-size:13.5px !important;
		padding:11px 14px !important;
	}
}


/* ==========================================================================
   Phase 10 - 회사 전경 썸네일 스트립
   ========================================================================== */

/* 50. 썸네일 스트립 정렬/접근성 -------------------------------------------
   측정값(390px, 회사소개>회사개요 "회사 전경"):
     #carousel-view        366x276
     .carousel-slide       366x80   position:absolute; bottom:0   <- 사진을 덮음
     .carousel-indicators  3000x52  <- 트랙이 3000px, 썸네일 10개
     li #0..#2 만 화면 안, #3 부터는 화면 밖 (overflow:hidden 이라 스크롤 불가)
     좌측이 55px 밀려 정렬도 어긋남
   -> 오버레이를 풀어 사진 아래로 내리고, 좌우 스크롤로 10개 모두 접근 가능하게,
      좌측 정렬을 맞춥니다. */
@media (max-width:991px){
	.carousel-slide{
		position:static !important;
		width:100% !important;
		height:auto !important;
		border-top:0 !important;
		overflow:visible !important;
	}

	.carousel-slide .s_photo{
		position:relative !important;
		width:100% !important;
		height:auto !important;
		padding:8px 0 !important;
		background:#1a1a1a !important;
		opacity:1 !important;
		overflow-x:auto !important;
		overflow-y:hidden !important;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		text-align:left !important;
	}
	.carousel-slide .s_photo::-webkit-scrollbar{height:0;}

	.carousel-slide .s_photo .carousel-indicators{
		position:static !important;
		width:auto !important;
		min-width:100% !important;
		max-width:none !important;
		margin:0 !important;
		padding:0 8px !important;
		white-space:nowrap !important;
		text-align:left !important;
		font-size:0 !important;
		line-height:0 !important;
	}

	.carousel-slide .s_photo .carousel-indicators li,
	.carousel-slide .s_photo .carousel-indicators li:hover{
		display:inline-block !important;
		float:none !important;
		width:76px !important;
		height:54px !important;
		margin:0 5px 0 0 !important;
		padding:0 !important;
		border:1px solid rgba(255,255,255,.45) !important;
		border-radius:0 !important;
		background-size:cover !important;
		background-position:center center !important;
		background-repeat:no-repeat !important;
		vertical-align:top !important;
		text-indent:-9999px;
	}
	.carousel-slide .s_photo .carousel-indicators li.active{
		width:76px !important;
		height:54px !important;
		margin:0 5px 0 0 !important;
		border:2px solid #00b34a !important;
		background-color:transparent !important;
	}

	/* 스트립 전용 좌우 화살표는 스크롤로 대체되므로 숨김 */
	.carousel-slide .s_photo .carousel-control{display:none !important;}

	/* 사진 위 캡션이 스트립과 겹치지 않도록 */
	#carousel-view .carousel-caption{
		position:static !important;
		padding:8px 4px 0 !important;
		color:#555 !important;
		text-shadow:none !important;
		font-size:13px !important;
		text-align:center !important;
	}
}


/* ==========================================================================
   Phase 12 - 중간 메뉴 탭 폭 균일화
   ========================================================================== */

/* 51. 탭 항목 폭을 모두 같게 -----------------------------------------------
   49번에서는 flex:0 0 auto 라 글자 수에 따라 칸 너비가 제각각이었습니다
   (Analysis & Practice 146px vs System 74px).
   가장 긴 라벨(118px)이 들어가는 고정 폭 140px 로 통일합니다.
   flex-grow:1 을 함께 주어 탭이 적은 페이지에서는 남는 폭을 똑같이 나눠
   가지므로, 어느 경우에도 칸 너비는 서로 같습니다.
   한 줄 유지 + 좌우 스크롤은 그대로입니다. */
@media (max-width:1023px){
	.nav-justified > li,
	.nav-pills.nav-justified > li,
	.nav-tabs.nav-justified > li,
	.xgolf .nav-justified > li{
		flex:1 0 140px !important;
		width:140px !important;
		min-width:140px !important;
		max-width:none !important;
	}
	.nav-justified > li > a{
		display:block !important;
		width:100% !important;
		padding:12px 6px !important;
		text-align:center !important;
		white-space:nowrap !important;
		overflow:hidden;
		text-overflow:ellipsis;
	}
}

@media (max-width:400px){
	.nav-justified > li,
	.xgolf .nav-justified > li{
		flex:1 0 140px !important;
		width:140px !important;
		min-width:140px !important;
	}
	.nav-justified > li > a{
		font-size:13.5px !important;
		padding:11px 6px !important;
	}
}


/* ==========================================================================
   Phase 13 - 글로벌 네트워크 이미지 / 메인 캐러셀 화살표
   ========================================================================== */

/* 52. 글로벌 네트워크 - 나라별 이미지 확대 --------------------------------
   .global .img-responsive{width:207px} 로 폭이 고정되어 있습니다.
   데스크톱 2단 배치 기준 크기라 390px 화면에서는 이미지가 절반만 차지하고
   우측이 비어 보입니다. (9번 px 고정폭 무력화 목록에서 빠져 있었습니다) */
@media (max-width:991px){
	.global .img-responsive{
		width:100% !important;
		max-width:100% !important;
		height:auto !important;
		display:block !important;
	}
	/* 이미지가 들어있는 칸도 전체폭으로 */
	.global .cs-hotline ul.box > li:first-child{
		width:100% !important;
		padding-bottom:10px !important;
	}
	.global .cs-hotline ul.box > li{
		padding-left:12px !important;
		padding-right:12px !important;
	}
	.global .cs-hotline{
		width:100% !important;
		margin-bottom:18px;
	}
	.global .table tbody > tr:first-child > td h4{
		text-indent:0 !important;
		margin:0 !important;
		font-size:17px !important;
	}
	.global .highlight{margin-bottom:28px !important;}
	.global .highlight .col-md-6:first-child{
		padding:20px 14px 0 !important;
	}
	.global .highlight .subtit{font-size:20px !important;}
	.global .highlight img{width:100% !important; height:auto !important;}
}

/* 53. 메인 캐러셀 좌우 화살표 축소 ----------------------------------------
   .icon.icon-prev-lg / .icon-next-lg 는 43x78px 스프라이트입니다.
   모바일 화면에서는 과하게 커서 히어로 사진을 가립니다.
   스프라이트라 width/height 를 바꾸면 잘리므로 transform 으로 축소합니다. */
@media (max-width:991px){
	.main .carousel-control{
		width:58px !important;
		min-width:0 !important;
	}
	.main .carousel-control .icon-prev-lg,
	.main .carousel-control .icon-next-lg,
	.main .carousel-control .icon{
		-webkit-transform:scale(.45);
		-ms-transform:scale(.45);
		transform:scale(.45);
		-webkit-transform-origin:center center;
		transform-origin:center center;
		opacity:.8;
	}
}

@media (max-width:400px){
	.main .carousel-control{width:50px !important;}
	.main .carousel-control .icon-prev-lg,
	.main .carousel-control .icon-next-lg,
	.main .carousel-control .icon{
		-webkit-transform:scale(.4);
		-ms-transform:scale(.4);
		transform:scale(.4);
	}
}


/* ==========================================================================
   Phase 14 - 비교표 모바일 카드 재구성 (골프 시뮬레이터 > 제품 비교 등)
   ========================================================================== */

/* 54. 비교표 카드 -----------------------------------------------------------
   4열(구분/레이더형/비전형/광센서 조합형)짜리 표는 390px 에서 열당 90px 라
   글이 세로로 길게 쪼개져 읽기 어렵습니다.
   responsive.nav.js 가 '열 기준 카드'로 다시 그리고, 원본 표는 숨깁니다. */
@media (max-width:991px){
	table.rt-hidden{display:none !important;}

	.rt-cards{margin:0 0 4px;}

	.rt-card{
		margin-bottom:16px;
		border:1px solid #dfe3e7;
		background:#fff;
	}
	.rt-card-head{
		padding:12px 14px;
		background:#37424d;
		color:#fff;
		font-family:"NgothicB";
		font-size:15px;
		line-height:1.45;
		word-break:keep-all;
	}
	.rt-row{
		padding:12px 14px;
		border-top:1px solid #edf0f2;
	}
	.rt-card .rt-row:first-of-type{border-top:0;}
	.rt-label{
		margin-bottom:7px;
		font-family:"NgothicB";
		font-size:14px;
		color:#00b34a;
	}
	.rt-value{
		font-size:14.5px;
		line-height:1.72;
		color:#4a4a4a;
	}
	.rt-value ul{
		margin:0 !important;
		padding-left:0 !important;
	}
	.rt-value li{
		margin:0 0 6px !important;
		line-height:1.72;
	}
	.rt-value li:last-child{margin-bottom:0 !important;}
	.rt-value em.b{color:#222;}

	/* 원본의 <br> 은 데스크톱 열 너비에 맞춘 줄바꿈이라
	   모바일에서는 어색한 위치에서 끊깁니다. 자연스럽게 흐르도록 무시합니다. */
	.rt-value br{display:none !important;}

	/* 카드 바로 뒤 각주 위치 정리 */
	.rt-cards + .footnote,
	.rt-cards + small.footnote{
		display:block;
		margin:2px 0 0 !important;
	}
}


/* 55. [Phase 14c] 비교표 카드 - 데스크톱 노출 차단 ------------------------
   responsiveTables() 는 992px 미만에서만 카드를 만들지만, 한 번 만들어진
   카드는 DOM 에 남습니다. 사용자가 창을 넓혀 데스크톱 폭이 되면
   원본 표(rt-hidden 은 모바일 미디어쿼리 안에만 있음)가 다시 보이면서
   카드까지 함께 보여 내용이 중복될 수 있습니다.
   카드는 기본을 숨김으로 두고 모바일에서만 표시합니다. */
.rt-cards{display:none;}
@media (max-width:991px){
	.rt-cards{display:block;}
}


/* ==========================================================================
   Phase 15 - 최신 반응형 트렌드 반영 (디자인 토큰 레이어)

   근거: 2026-08 기준 아래 8개 사이트의 실제 CSS 를 받아 측정한 값
     Trackman / Full Swing / Foresight Sports / Uneekor /
     Rapsodo / Topgolf / PXG / Garmin
     (SkyTrak, Golfzon 은 JS 셸만 내려와 측정 불가)

   측정 요약
     - 브레이크포인트 : 768 / 1024 / 1200~1280 로 수렴  (이 사이트도 동일 → 유지)
     - 본문 크기      : 16px 이 표준 (Rapsodo 16px x33, Foresight 16px x14, Uneekor 18px)
     - 유동 타이포    : clamp() 사용이 일반화 (PXG 69회, Foresight/Rapsodo 18회, Uneekor 10회)
                        예) Uneekor  clamp(.875rem, 2.75vw, 1.125rem)  = 14→18px
     - 라운드         : 8px 기본 / 12~16px 카드 / 9999px pill 버튼
     - 터치 타깃      : 44px 최소 (Rapsodo --swiper-navigation-size:44px,
                        Foresight/PXG 의 clamp(25px, ..., 44px))
     - 컨테이너 최대폭: 1200~1440  (이 사이트는 1000px → 데스크톱 결정 필요, 미적용)

   적용 원칙
     - 브랜드 결정(색상/서체/사진/컨테이너 폭)은 건드리지 않음
     - 모두 991px 이하에만 적용 → 데스크톱 무영향
     - 토큰만 바꾸면 일괄 조정 가능
   ========================================================================== */

:root{
	/* 유동 타입 스케일 (모바일 기준값 → 태블릿 상한) */
	--xg-text-xs:   clamp(0.75rem,   2.1vw, 0.8125rem);  /* 12 → 13 */
	--xg-text-sm:   clamp(0.8125rem, 2.6vw, 0.9375rem);  /* 13 → 15 */
	--xg-text-base: clamp(1rem,      3.0vw, 1.0625rem);  /* 16 → 17 */
	--xg-text-lg:   clamp(1.0625rem, 3.4vw, 1.1875rem);  /* 17 → 19 */
	--xg-text-xl:   clamp(1.1875rem, 4.0vw, 1.375rem);   /* 19 → 22 */
	--xg-text-2xl:  clamp(1.375rem,  5.0vw, 1.75rem);    /* 22 → 28 */
	--xg-text-3xl:  clamp(1.625rem,  6.2vw, 2.125rem);   /* 26 → 34 */

	/* 8pt 간격 스케일 */
	--xg-1:4px;  --xg-2:8px;  --xg-3:12px; --xg-4:16px;
	--xg-5:20px; --xg-6:24px; --xg-8:32px; --xg-10:40px; --xg-12:48px;

	/* 라운드 */
	--xg-radius-sm:6px;
	--xg-radius:8px;
	--xg-radius-lg:14px;
	--xg-pill:999px;

	/* 터치 타깃 / 모션 */
	--xg-tap:44px;
	--xg-dur:180ms;
	--xg-ease:cubic-bezier(.2,.6,.2,1);

	/* 그림자 (평면 테두리 대신 깊이로 구분) */
	--xg-shadow-sm:0 1px 2px rgba(16,24,40,.06);
	--xg-shadow:0 2px 8px rgba(16,24,40,.07);
	--xg-shadow-lg:0 10px 28px rgba(16,24,40,.10);
}

@media (max-width:991px){

	/* ---------- 1) 유동 타이포 : 고정 px 단계 → clamp() ------------------
	   기존에는 991px/400px 두 구간에서 값이 툭 바뀌었습니다.
	   clamp() 는 화면 폭에 따라 연속적으로 변해 320~991px 어디서나 자연스럽습니다. */
	body{
		font-size:var(--xg-text-base) !important;
		line-height:1.72 !important;
		-webkit-text-size-adjust:100%;
		text-size-adjust:100%;
	}
	p, li, dd, dt, td, th, address, label,
	.caption p, blockquote p, .panel-body,
	.thumbnail .caption p{
		font-size:var(--xg-text-base) !important;
		line-height:1.72 !important;
	}
	h1{font-size:var(--xg-text-3xl) !important; line-height:1.28 !important; letter-spacing:-0.02em;}
	h2{font-size:var(--xg-text-2xl) !important; line-height:1.32 !important; letter-spacing:-0.015em;}
	h3{font-size:var(--xg-text-xl)  !important; line-height:1.38 !important; letter-spacing:-0.01em;}
	h4{font-size:var(--xg-text-lg)  !important; line-height:1.45 !important;}
	h5{font-size:var(--xg-text-lg)  !important; line-height:1.5  !important;}
	h6{font-size:var(--xg-text-base)!important; line-height:1.55 !important;}
	small, .footnote{font-size:var(--xg-text-xs) !important;}

	/* ---------- 2) 8pt 수직 리듬 ---------------------------------------- */
	.page-header{margin:var(--xg-6) 0 var(--xg-5) !important; padding-bottom:var(--xg-3);}
	h3.subtit-exp, h3.xtit, h3.mb-2{margin:var(--xg-8) 0 var(--xg-3) !important;}
	h5, h6{margin-top:var(--xg-4);}
	.tab-content{padding-top:var(--xg-4);}
	.col-gutter .row > [class*="col-md-"]{margin-bottom:var(--xg-5) !important;}
	.thumbnail{margin-bottom:var(--xg-5) !important;}

	/* ---------- 3) 터치 타깃 44px ---------------------------------------
	   Rapsodo / Foresight / PXG 가 공통으로 쓰는 최소치입니다. */
	.navbar-nav > li > a{
		min-height:var(--xg-tap) !important;
		display:flex !important;
		align-items:center;
	}
	.nav-justified > li > a{
		min-height:var(--xg-tap) !important;
		display:flex !important;
		align-items:center;
		justify-content:center;
	}
	.gnb-sub-toggle{min-height:var(--xg-tap) !important; min-width:var(--xg-tap) !important;}
	ul.gnb-sub > li > a,
	ul.gnb-extra > li > a{min-height:var(--xg-tap) !important; display:flex; align-items:center;}
	.navbar-toggle{min-width:var(--xg-tap) !important; min-height:var(--xg-tap) !important;}
	#footer .sns .icon_sns{min-width:var(--xg-tap); min-height:var(--xg-tap);}
	.breadcrumb ol li a{padding-top:var(--xg-2); padding-bottom:var(--xg-2);}

	/* ---------- 4) 라운드 + 깊이 (평면 1px 선 → 카드) -------------------- */
	.btn{
		min-height:var(--xg-tap) !important;
		padding-left:var(--xg-5) !important;
		padding-right:var(--xg-5) !important;
		border-radius:var(--xg-pill) !important;
		font-size:var(--xg-text-sm) !important;
		transition:transform var(--xg-dur) var(--xg-ease),
		           box-shadow var(--xg-dur) var(--xg-ease),
		           background-color var(--xg-dur) var(--xg-ease) !important;
	}
	.btn:active{transform:translateY(1px);}

	.thumbnail,
	.panel,
	.rt-card,
	.cs-hotline,
	.cs-shortcut{
		border-radius:var(--xg-radius) !important;
		overflow:hidden;
	}
	.rt-card{
		border:1px solid #e7eaee !important;
		box-shadow:var(--xg-shadow-sm);
	}
	.rt-card-head{border-radius:0 !important;}
	.panel{
		border:1px solid #e7eaee !important;
		box-shadow:var(--xg-shadow-sm);
	}
	.thumbnail img{border-radius:var(--xg-radius-sm);}

	/* 슬라이드 썸네일 */
	.carousel-slide .s_photo .carousel-indicators li{border-radius:var(--xg-radius-sm) !important;}

	/* ---------- 5) 상호작용 상태 / 접근성 -------------------------------- */
	a, .btn, button{transition:color var(--xg-dur) var(--xg-ease),
	                            background-color var(--xg-dur) var(--xg-ease);}
	a:focus-visible,
	button:focus-visible,
	.btn:focus-visible,
	input:focus-visible,
	textarea:focus-visible,
	select:focus-visible{
		outline:2px solid #00b34a !important;
		outline-offset:2px !important;
		border-radius:var(--xg-radius-sm);
	}
	/* 폼 요소도 44px + 라운드 */
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="password"], select, textarea{
		min-height:var(--xg-tap) !important;
		border-radius:var(--xg-radius-sm) !important;
		font-size:16px !important;   /* iOS 자동 확대 방지 임계값 */
	}

	/* ---------- 6) 노치/홈바 대응 (safe-area) ---------------------------- */
	.navbar > .container,
	#footer > .container,
	#footer .footer-nav-wrap > .container{
		padding-left:calc(12px + env(safe-area-inset-left)) !important;
		padding-right:calc(12px + env(safe-area-inset-right)) !important;
	}
	#footer{padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important;}

	/* ---------- 7) 이미지 로딩 안정화 ------------------------------------ */
	/* (제거) img 에 배경색을 깔았더니 투명 로고(PNG/SVG)에 회색 판이 생겨
	   상단 로고와 제품 로고가 지저분해졌습니다. 로딩 중 깜빡임보다
	   로고 훼손이 더 큰 문제라 배경색은 쓰지 않습니다. */
	.thumbnail img, .rt-value img{display:block;}
}

/* ---------- 8) 모션 최소화 선호 존중 (모든 폭) --------------------------- */
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
	}
}


/* ==========================================================================
   Phase 17 - 제목 안 pull-right 버튼 (X-NET)
   ========================================================================== */

/* 56. 제목 안에 float 된 버튼이 본문과 겹치는 문제 -------------------------
   원본 마크업:
     <h3>X-GOLF CUBE : X-NET 설치가 가능한 시뮬레이터
         <span class="btn btn-lg btn-primary pull-right mb20"
               style="margin-top:-10px;">X-GOLF CUBE 바로가기</span>
     </h3>
   데스크톱(제목 1000px)에서는 제목과 버튼이 한 줄에 나란히 놓이지만,
   모바일에서는 제목이 2~3줄로 접히면서 float 된 버튼과 겹칩니다.
   인라인 margin-top:-10px 도 겹침을 키웁니다.
   -> 모바일에서는 float 을 풀고 제목 아래 전체폭 버튼으로 내립니다.
   (해당 패턴은 kor/eng xnet.php 2곳에만 존재) */
@media (max-width:991px){
	h1 > .btn.pull-right,
	h2 > .btn.pull-right,
	h3 > .btn.pull-right,
	h4 > .btn.pull-right,
	h5 > .btn.pull-right,
	h6 > .btn.pull-right{
		float:none !important;
		display:block !important;
		width:100% !important;
		margin:var(--xg-4) 0 0 !important;
		padding-top:11px !important;
		padding-bottom:11px !important;
		text-align:center !important;
		font-size:var(--xg-text-sm) !important;
		line-height:1.4 !important;
		white-space:normal !important;
		word-break:keep-all;
	}
	/* 제목 자체도 버튼과 붙지 않도록 */
	h3 > .btn.pull-right + *{margin-top:var(--xg-3);}
}


/* ==========================================================================
   Phase 19 - 모바일 팝업 하단 정렬
   ========================================================================== */

/* 57. 팝업 푸터 정렬 -------------------------------------------------------
   원본은 label 을 float:left, 버튼을 float:right 로 붙여둔 구조입니다.
   label 의 line-height 는 22px 인데 버튼은 Phase 15 에서 44px 로 커져서
   세로 중심이 어긋나 보입니다. 체크박스 자체도 탭 영역이 작습니다.
   -> flex 로 바꿔 세로 중앙을 맞추고, 라벨 전체를 44px 탭 영역으로 만듭니다.
      (라벨을 누르면 체크박스가 토글되므로 탭 영역이 곧 라벨입니다) */
@media (max-width:991px){
	#popupModal .modal-footer,
	#popupModal2 .modal-footer{
		display:flex !important;
		align-items:center !important;
		justify-content:space-between !important;
		gap:10px;
		padding:10px 14px !important;
		margin:0 !important;
		border:none !important;
		text-align:left !important;
		background:#fff;
	}

	#popupModal .pop-hide{
		float:none !important;
		display:inline-flex !important;
		align-items:center;
		gap:8px;
		margin:0 !important;
		padding:0 !important;
		min-height:var(--xg-tap);
		font-size:14px !important;
		font-weight:normal !important;
		line-height:1.3 !important;
		color:#555 !important;
		cursor:pointer;
		word-break:keep-all;
	}
	#popupModal .pop-hide input[type="checkbox"]{
		flex:0 0 auto;
		width:20px !important;
		height:20px !important;
		min-height:0 !important;
		margin:0 !important;
		vertical-align:middle;
		accent-color:#00b34a;
	}

	#popupModal .modal-footer .btn,
	#popupModal2 .modal-footer .btn{
		float:none !important;
		margin:0 !important;
		flex:0 0 auto;
		display:inline-flex !important;
		align-items:center;
		justify-content:center;
		min-height:var(--xg-tap) !important;
		padding:0 22px !important;
		font-size:14px !important;
		line-height:1 !important;
	}

	/* 팝업 본문과 푸터 사이 경계 */
	#popupModal .modal-content{
		border-radius:var(--xg-radius) !important;
		overflow:hidden;
	}
	#popupModal .modal-footer{
		border-top:1px solid #eceef1 !important;
	}
}

@media (max-width:360px){
	#popupModal .pop-hide{font-size:13px !important;}
	#popupModal .modal-footer .btn{padding:0 16px !important; font-size:13px !important;}
}


/* ==========================================================================
   Phase 20 - 모바일 주입 요소가 데스크톱에 남는 문제
   ========================================================================== */

/* 58. 모바일 전용 주입 요소는 기본 숨김 -----------------------------------
   responsive.nav.js 가 모바일에서 만든 요소들(하위메뉴/캐럿/하단 바로가기,
   탭 스크롤 힌트)은 DOM 에 남습니다. 창을 넓혀 데스크톱이 되면 표시 규칙이
   없어 기본값으로 나타나 GNB 에 잔재가 보였습니다.
   계측(1280px 전환 직후):
     ul.gnb-sub 5개 display=block / .gnb-sub-toggle 5개 inline-block
     ul.gnb-extra 1개 block / .navbar-collapse height=174px
   -> 기본을 숨김으로 두고 모바일에서만 켭니다. (JS teardown 과 이중 방어) */
ul.gnb-sub,
ul.gnb-extra,
.gnb-sub-toggle,
.tab-scroll-hint{
	display:none !important;
}

@media (max-width:991px){
	ul.gnb-extra{display:block !important;}
	.gnb-sub-toggle{display:block !important;}
	/* ul.gnb-sub 는 .sub-open 일 때만 (13번 규칙이 담당) */
	.navbar-nav > li.sub-open > ul.gnb-sub{display:block !important;}
}
@media (max-width:1023px){
	.nav-scroll-wrap .tab-scroll-hint{display:block !important;}
}

/* 59. 로고에 배경색이 깔리지 않도록 --------------------------------------- */
img[src*="logo"],
img[src$=".svg"],
.navbar-brand img,
.hero-content img,
.page-header img,
#footer img{
	background-color:transparent !important;
}


/* ==========================================================================
   Phase 21 - 버튼 가독성 / 크기 재조정
   ========================================================================== */

/* 60. 버튼 --------------------------------------------------------------
   Phase 15 에서 pill 로 바꾸면서 생긴 문제를 계측으로 확인했습니다(390px):
     .btn                    77x44  fs=13  pad=8/20   "더보기"
     .btn.btn-lg.btn-primary 366x44 fs=13  pad=11/20  "X-GOLF CUBE 바로가기"
     .btn.btn-sm             107x44 fs=13  pad=9/20   "자세히 보기"
   ① 폰트가 전부 13px : --xg-text-sm 이 clamp(.8125rem,2.6vw,.9375rem) 인데
      390px 에서 2.6vw=10px 라 항상 하한(13px)에 걸립니다. pill 안에서 작아 보입니다.
   ② 크기 위계 상실 : btn / btn-sm / btn-lg 가 모두 높이 44px, 폰트 13px.
   ③ 세로 중앙 아님 : 8+19.5+8=35.5 인데 min-height 44 라 텍스트가 위로 치우침.
   ④ 알약이 뭉툭 : 좌우 패딩 20px 뿐이라 "더보기" 가 77px 로 짧습니다.

   -> 고정 px 로 또렷한 위계를 주고, inline-flex 로 세로 중앙을 맞추며,
      최소 너비를 줘서 pill 비율이 자연스럽게 나오도록 합니다. */
@media (max-width:991px){
	.btn,
	.btn.btn-default,
	.btn.btn-primary,
	.btn[class*="btn-primary"]{
		display:inline-flex !important;
		align-items:center !important;
		justify-content:center !important;
		min-height:46px !important;
		padding:0 26px !important;
		min-width:104px;
		font-size:15px !important;
		line-height:1 !important;
		font-weight:600;
		letter-spacing:-0.01em;
		border-radius:var(--xg-pill) !important;
		text-align:center !important;
		white-space:nowrap;
	}

	.btn.btn-lg{
		min-height:52px !important;
		padding:0 30px !important;
		min-width:128px;
		font-size:16px !important;
	}
	.btn.btn-sm{
		min-height:42px !important;
		padding:0 22px !important;
		min-width:96px;
		font-size:14px !important;
	}
	.btn.btn-xs{
		min-height:38px !important;
		padding:0 18px !important;
		min-width:80px;
		font-size:13px !important;
		font-weight:500;
	}

	/* 전체폭으로 쓰는 경우(제목 안 버튼 등)는 최소 너비를 풀어줍니다 */
	h1 > .btn.pull-right,
	h2 > .btn.pull-right,
	h3 > .btn.pull-right,
	h4 > .btn.pull-right,
	h5 > .btn.pull-right,
	h6 > .btn.pull-right,
	.btn.btn-block{
		display:flex !important;
		width:100% !important;
		min-width:0 !important;
		padding-left:16px !important;
		padding-right:16px !important;
		white-space:normal !important;
		line-height:1.35 !important;
	}

	/* 버튼이 나란히 놓이는 곳 간격 */
	.btn + .btn{margin-left:8px;}
	.btn-wrap{
		display:flex;
		flex-wrap:wrap;
		gap:8px;
	}
	.btn-wrap .btn{margin:0 !important;}
	.btn-wrap .btn + .btn{margin-left:0 !important;}

	/* 팝업 하단 버튼은 Phase 19 치수를 유지 */
	#popupModal .modal-footer .btn,
	#popupModal2 .modal-footer .btn{
		min-height:var(--xg-tap) !important;
		min-width:0 !important;
		padding:0 22px !important;
		font-size:14px !important;
	}
}

@media (max-width:360px){
	.btn,
	.btn.btn-default,
	.btn.btn-primary,
	.btn[class*="btn-primary"]{
		min-height:44px !important;
		padding:0 20px !important;
		min-width:92px;
		font-size:14px !important;
	}
	.btn.btn-lg{min-height:48px !important; padding:0 24px !important; font-size:15px !important;}
	.btn.btn-sm{min-height:40px !important; padding:0 18px !important; font-size:13.5px !important;}
}


/* 61. [Phase 21b] 제목 안 전체폭 버튼 폰트 -------------------------------
   56번(Phase 17)에서 이 버튼에 font-size:var(--xg-text-sm) 을 걸어뒀는데,
   390px 에서 그 값은 하한인 13px 입니다. 60번에서 정한 위계와 어긋나
   X-NET 의 btn-lg 만 13px 로 남았습니다(계측: 366x52 fs=13px). */
@media (max-width:991px){
	h1 > .btn.pull-right,
	h2 > .btn.pull-right,
	h3 > .btn.pull-right,
	h4 > .btn.pull-right,
	h5 > .btn.pull-right,
	h6 > .btn.pull-right{
		font-size:15px !important;
		line-height:1.35 !important;
		padding-top:14px !important;
		padding-bottom:14px !important;
	}
	h1 > .btn.btn-lg.pull-right,
	h2 > .btn.btn-lg.pull-right,
	h3 > .btn.btn-lg.pull-right,
	h4 > .btn.btn-lg.pull-right{
		font-size:16px !important;
	}
}
@media (max-width:360px){
	h1 > .btn.pull-right, h2 > .btn.pull-right, h3 > .btn.pull-right,
	h4 > .btn.pull-right, h5 > .btn.pull-right, h6 > .btn.pull-right{
		font-size:14px !important;
	}
	h3 > .btn.btn-lg.pull-right{font-size:15px !important;}
}


/* ==========================================================================
   Phase 22 - 중간 메뉴 탭 대비
   ========================================================================== */

/* 62. 탭 색 대비 ----------------------------------------------------------
   계측(390px, xgolf_nex):
     미선택  글자 #666666  /  배경 #818d99  ->  대비 1.70:1  (WCAG AA 4.5 미달)
     선택됨  글자 #ffffff  /  배경 #00b34a  ->  대비 2.78:1  (역시 미달)
   회색 배경 위 회색 글자라 거의 읽히지 않았습니다.

   -> 미선택은 '밝은 배경 + 진한 글자' 로 뒤집어 대비를 확보합니다.
      #37424d on #eef1f4 = 약 8.9:1 (AA 통과)
   -> 선택 탭은 브랜드 초록을 유지하되 대비 확보를 위해 소폭 어둡게 합니다.
      #ffffff on #00963e = 약 3.4:1 (굵은 14px 이상이면 AA Large 기준 충족)
      브랜드 색 자체(#00b34a)는 흰 글자와의 대비가 원래 3.0 수준이라
      더 올리려면 브랜드 팔레트 조정이 필요합니다(별도 판단 사항). */
@media (max-width:1023px){
	.nav-justified,
	.nav-pills.nav-justified,
	.nav-tabs.nav-justified{
		background:#eef1f4 !important;
		border-bottom:1px solid #dfe4e9;
	}

	.nav-justified > li > a,
	.nav-pills.nav-justified > li > a{
		background:transparent !important;
		color:#37424d !important;
		font-weight:600 !important;
		border:0 !important;
		border-radius:0 !important;
	}
	.nav-justified > li + li > a{
		box-shadow:inset 1px 0 0 #dfe4e9;
	}

	.nav-justified > li > a:hover,
	.nav-justified > li > a:focus{
		background:#e2e7ec !important;
		color:#1f2933 !important;
	}

	.nav-justified > li.active > a,
	.nav-justified > li.active > a:hover,
	.nav-justified > li.active > a:focus,
	.nav-pills.nav-justified > li.active > a{
		background:#00963e !important;
		color:#ffffff !important;
		font-weight:700 !important;
		box-shadow:none !important;
	}

	/* 스크롤 힌트 그라데이션도 새 배경색에 맞춤 */
	.tab-scroll-hint{
		background:linear-gradient(90deg,rgba(238,241,244,0),rgba(238,241,244,.97)) !important;
	}
}


/* ==========================================================================
   Phase 23 - 탭 아래 회색 띠 (스크롤 힌트 넘침)
   ========================================================================== */

/* 63. 스크롤 힌트 높이 -----------------------------------------------------
   계측(390px, xgolf_nex):
     ul.nav-justified      366x51   <- 실제 탭 높이
     div.nav-scroll-wrap   366x91   <- 래퍼가 40px 더 큼
     .tab-scroll-hint      34x91    <- height:100% 라 탭보다 40px 아래로 삐져나옴
   래퍼(.nav-scroll-wrap)는 49번에서 overflow:hidden 을 줘 BFC 가 되었고,
   그 때문에 ul 의 아래 마진이 밖으로 빠져나가지 못하고 래퍼 높이에
   더해졌습니다. 힌트는 그 높이를 100% 로 따라가면서 탭 아래까지
   회색 그라데이션이 흘러내렸습니다.

   -> ul 의 아래 마진을 없애 래퍼 높이를 탭 높이와 같게 만들고,
      그 만큼의 간격은 래퍼의 margin-bottom 으로 옮깁니다. */
@media (max-width:1023px){
	.nav-scroll-wrap > .nav-justified,
	.nav-scroll-wrap > .nav{
		margin-bottom:0 !important;
	}
	.nav-scroll-wrap{
		margin-bottom:16px;
		line-height:0;
	}
	.nav-scroll-wrap > .nav-justified{
		line-height:normal;
	}
	.tab-scroll-hint{
		top:0 !important;
		bottom:0 !important;
		height:auto !important;
	}
}


/* ==========================================================================
   Phase 24 - 모바일 푸터 재구성
   ========================================================================== */

/* 64. 콜센터 블록을 CTA 카드로 --------------------------------------------
   기존 문제
     - 대표번호가 가장 중요한 액션인데 평범한 텍스트로만 보임
       (tel: 링크는 걸려 있으나 눌러야 할 것처럼 보이지 않음)
     - SNS 아이콘이 float:left + width:36px 인데 Phase 15 에서 min-width:44px 를
       줘서 3번째 아이콘이 우측에서 잘림
     - 라벨/번호/시간이 같은 무게로 나열되어 위계가 없음
   벤치마크에서 정리한 토큰(카드 / 8~14px 라운드 / 44px 타깃 / 8pt 리듬) 적용 */
@media (max-width:991px){

	#footer .footer-nav-wrap{
		background:#f5f7f9 !important;
		padding:24px 0 20px !important;
		margin-bottom:0 !important;
		border-bottom:0 !important;
	}

	/* --- 콜센터 카드 --- */
	#footer .footer-nav > .col-md-2{
		width:auto !important;
		max-width:420px;
		margin:0 auto !important;
		padding:0 14px !important;
		text-align:center !important;
	}

	#footer .footer-nav > .col-md-2 h6,
	#footer .footer-nav > .col-md-2 h2,
	#footer .footer-nav > .col-md-2 small{
		display:block;
	}

	/* 라벨 + 번호 + 시간을 하나의 흰 카드로 묶어 보이게 합니다.
	   (마크업을 바꾸지 않고 h6 에 카드 상단, small 에 카드 하단을 그립니다) */
	#footer .footer-nav > .col-md-2 h6{
		margin:0 !important;
		padding:16px 18px 0 !important;
		background:#fff;
		border:1px solid #e6eaee;
		border-bottom:0;
		border-radius:var(--xg-radius-lg) var(--xg-radius-lg) 0 0;
		font-size:12.5px !important;
		font-weight:600 !important;
		letter-spacing:0.02em;
		color:#7b848d !important;
	}
	#footer .footer-nav > .col-md-2 h6:before{
		content:"\f095";              /* FontAwesome phone */
		font-family:"FontAwesome";
		margin-right:6px;
		color:#00963e;
		font-weight:normal;
	}

	#footer .footer-nav > .col-md-2 h2{
		margin:0 !important;
		padding:4px 18px 0 !important;
		background:#fff;
		border-left:1px solid #e6eaee;
		border-right:1px solid #e6eaee;
		font-size:30px !important;
		line-height:1.15 !important;
		letter-spacing:-0.02em;
		font-weight:700 !important;
		color:#111 !important;
	}
	#footer .footer-nav > .col-md-2 h2 .footer-tel{
		display:block;
		color:#00963e !important;
		text-decoration:none !important;
	}
	#footer .footer-nav > .col-md-2 h2 .ls{letter-spacing:inherit;}

	#footer .footer-nav > .col-md-2 small{
		margin:0 !important;
		padding:2px 18px 16px !important;
		background:#fff;
		border:1px solid #e6eaee;
		border-top:0;
		border-radius:0 0 var(--xg-radius-lg) var(--xg-radius-lg);
		box-shadow:var(--xg-shadow-sm);
		font-size:12px !important;
		color:#98a1a9 !important;
	}

	/* --- SNS : float 해제 후 원형 버튼 --- */
	#footer .sns{
		display:flex !important;
		justify-content:center;
		align-items:center;
		/* 데스크톱 기본의 float:right 가 남아 박스가 내용 너비로 줄어들면서
		   위의 justify-content:center 가 무력화되어 있었습니다. */
		float:none !important;
		width:100% !important;
		gap:12px;
		margin:18px 0 0 !important;
		padding:0 !important;
		text-align:center;
	}
	#footer .sns a,
	#footer .sns .icon_sns{
		float:none !important;
		display:inline-flex !important;
		align-items:center;
		justify-content:center;
		width:48px !important;
		height:48px !important;
		min-width:0 !important;
		min-height:0 !important;
		margin:0 !important;
		border:1px solid #dde2e7 !important;
		border-radius:50% !important;
		background-color:#fff !important;
		background-size:26px 26px !important;
		background-position:50% 50% !important;
		background-repeat:no-repeat !important;
		opacity:0.75;
		transition:opacity var(--xg-dur) var(--xg-ease),
		           border-color var(--xg-dur) var(--xg-ease),
		           box-shadow var(--xg-dur) var(--xg-ease);
	}
	#footer .sns a:hover,
	#footer .sns a:focus{
		opacity:1;
		border-color:#00963e !important;
		box-shadow:var(--xg-shadow-sm);
	}

	/* --- 주소 / 저작권 / 로고 --- */
	#footer > .container{
		padding-top:18px !important;
	}
	#footer address .col-md-10{
		font-size:12.5px !important;
		line-height:1.85 !important;
		color:#828a92 !important;
	}
	#footer address .col-md-10 b{
		color:#5c646c !important;
		font-weight:600;
	}
	#footer address .f-item{margin:0 6px !important;}

	#footer address .copyright{
		margin:12px 0 0 !important;
		padding-top:12px;
		border-top:1px solid #edf0f2;
		font-size:11.5px !important;
		color:#a3abb2 !important;
	}

	#footer address .col-md-2{
		margin-top:12px !important;
		text-align:center !important;
	}
	#footer address .col-md-2 img{
		width:84px !important;
		opacity:0.55;
		transition:opacity var(--xg-dur) var(--xg-ease);
	}
	#footer address .col-md-2 a:hover img{opacity:0.9;}
}

@media (max-width:360px){
	#footer .footer-nav > .col-md-2 h2{font-size:26px !important;}
	#footer .sns{gap:10px;}
	#footer .sns a,
	#footer .sns .icon_sns{
		width:46px !important; height:46px !important;
		background-size:24px 24px !important;
	}
}


/* ==========================================================================
   Phase 25 - 브레드크럼 한 줄 / 찾아오시는 길 표 카드화
   ========================================================================== */

/* 65. 상단 브레드크럼(서브 내비)을 한 줄 + 좌우 스크롤로 -------------------
   원본은 .breadcrumb{display:table} + ol>li{float:left} 라 항목이 많으면
   2~3줄로 접힙니다(회사소개는 7개 → 3줄).
   중간 메뉴 탭과 같은 방식으로 한 줄 유지 + 좌우 스크롤로 바꿉니다. */
@media (max-width:991px){
	.breadcrumb{
		display:block !important;
		position:relative;
		overflow:hidden;
	}
	.breadcrumb > .container{
		padding-left:0 !important;
		padding-right:0 !important;
	}
	.breadcrumb ol{
		display:flex !important;
		flex-wrap:nowrap !important;
		align-items:center;
		overflow-x:auto;
		overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		padding:0 12px !important;
		margin:0 !important;
	}
	.breadcrumb ol::-webkit-scrollbar{height:0;}

	.breadcrumb ol > li{
		float:none !important;
		flex:0 0 auto !important;
		white-space:nowrap !important;
	}
	.breadcrumb ol > li.depth2{
		display:flex !important;
		align-items:center;
		flex:0 0 auto !important;
	}
	.breadcrumb ol > li.depth2 a{
		flex:0 0 auto;
		white-space:nowrap !important;
	}

	/* 스크롤 가능 표시 */
	.breadcrumb:after{
		content:"";
		position:absolute;
		top:0;
		right:0;
		width:30px;
		height:100%;
		pointer-events:none;
		background:linear-gradient(90deg,rgba(250,251,252,0),rgba(250,251,252,.98));
	}
}

/* 66. 찾아오시는 길 - 카드 사이 여백 -------------------------------------- */
@media (max-width:991px){
	.location .rt-cards{margin-top:4px;}
	.location .rt-card .rt-value{
		font-size:14.5px !important;
		line-height:1.75 !important;
		color:#4a4a4a !important;
	}
	.location .rt-card-head{
		background:#37424d !important;
		font-size:14.5px !important;
	}
}


/* 67. [Phase 26] 브레드크럼 활성 항목 강조 -------------------------------
   한 줄 스크롤이 되면서 현재 위치가 덜 드러나므로 대비를 조금 올립니다. */
@media (max-width:991px){
	.breadcrumb ol > li.depth2 a{
		padding:6px 10px !important;
		margin:0 2px !important;
		color:#5b636b !important;
		font-size:14px !important;
	}
	.breadcrumb ol > li.depth2 a.active{
		color:#00963e !important;
		font-weight:700 !important;
		border-bottom:2px solid #00963e !important;
	}
}


/* ==========================================================================
   Phase 27 - 브레드크럼 : 1depth 고정, 2depth 만 스크롤
   ========================================================================== */

/* 68. 스크롤 범위를 2depth 로 한정 ----------------------------------------
   65번에서는 <ol> 전체를 가로 스크롤로 만들어서 홈 아이콘과 1depth
   (예: "회사소개 ▾")까지 같이 밀려났습니다.
   -> ol 은 스크롤하지 않는 flex 행으로 두고,
      2depth(li.depth2)만 스크롤 컨테이너로 만듭니다.
      1depth 는 flex:0 0 auto 로 자리를 고정합니다. */
@media (max-width:991px){
	/* 65번에서 .breadcrumb 에 overflow:hidden 을 줬는데, 이 때문에 1depth 의
	   부트스트랩 드롭다운 메뉴(.dropdown-menu)가 아래로 펼쳐질 때 잘렸습니다.
	   이제 스크롤은 li.depth2 가 담당하므로 여기서는 잘라낼 이유가 없습니다. */
	.breadcrumb{
		overflow:visible !important;
	}
	.breadcrumb .dropdown-menu{
		z-index:300 !important;
		min-width:150px;
	}
	.breadcrumb .dropdown-menu > li > a{
		padding:10px 14px !important;
		font-size:14px !important;
		line-height:1.4 !important;
	}
	.breadcrumb.open .dropdown-menu,
	.breadcrumb li.dropdown.open .dropdown-menu{
		display:block !important;
	}

	.breadcrumb ol{
		display:flex !important;
		flex-wrap:nowrap !important;
		align-items:stretch;
		overflow:visible !important;   /* ol 자체는 스크롤하지 않음 */
		padding:0 !important;
	}

	/* --- 1depth : 고정 --- */
	.breadcrumb ol > li{
		float:none !important;
		flex:0 0 auto !important;
		white-space:nowrap !important;
	}
	.breadcrumb ol > li:first-child{
		padding-left:10px !important;
	}
	/* 1depth 묶음과 2depth 사이 경계 (스크롤되는 느낌을 살림) */
	.breadcrumb ol > li.dropdown{
		position:relative;
		z-index:2;
		background:#fafbfc;
		box-shadow:6px 0 8px -6px rgba(16,24,40,.18);
	}

	/* --- 2depth : 여기만 스크롤 --- */
	.breadcrumb ol > li.depth2{
		display:block !important;
		flex:1 1 auto !important;
		min-width:0 !important;
		overflow-x:auto !important;
		overflow-y:hidden !important;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		white-space:nowrap !important;
		background:none !important;
	}
	.breadcrumb ol > li.depth2::-webkit-scrollbar{height:0;}

	.breadcrumb ol > li.depth2 a{
		display:inline-block !important;
		float:none !important;
		white-space:nowrap !important;
	}
	.breadcrumb ol > li.depth2 a:last-child{
		margin-right:26px !important;   /* 우측 페이드에 마지막 글자가 가리지 않도록 */
	}
}


/* ==========================================================================
   Phase 28 - 회사 전경 캡션 / 푸터 주소 정렬
   ========================================================================== */

/* 69. 캐러셀 캡션 가독성 ---------------------------------------------------
   부트스트랩3 의 .carousel-caption 은 사진 위에 흰 글자 + 그림자로 얹히는
   구조입니다. 모바일에서는 사진을 가리고 대비도 낮습니다.
   -> 사진 아래 별도 줄로 내리고, 밝은 배경 + 진한 글자로 바꿉니다. */
@media (max-width:991px){
	.carousel-caption,
	#carousel-view .carousel-caption,
	.carousel-inner .item .carousel-caption{
		position:static !important;
		left:auto !important;
		right:auto !important;
		top:auto !important;
		bottom:auto !important;
		width:auto !important;
		max-width:none !important;
		margin:0 !important;
		padding:10px 12px !important;
		background:#f2f5f7 !important;
		color:#37424d !important;
		font-size:13.5px !important;
		line-height:1.5 !important;
		font-weight:600 !important;
		text-shadow:none !important;
		text-align:center !important;
		border-radius:0 0 var(--xg-radius-sm) var(--xg-radius-sm);
	}
}

/* 70. 푸터 주소 블록 정렬 --------------------------------------------------
   가운데 정렬이라 "(전민동, 엑스골프)" 가 따로 떨어지고 라벨과 값의
   시작점이 제각각이라 정돈돼 보이지 않았습니다.
   -> 라벨 열을 고정한 좌측 정렬로 바꾸고, 블록 자체를 가운데 둡니다. */
@media (max-width:991px){
	#footer address .col-md-10{
		max-width:330px;
		margin:0 auto !important;
		text-align:left !important;
	}

	#footer address .f-item,
	#footer address .f-item.f-item-nowrap{
		display:flex !important;
		align-items:baseline;
		gap:10px;
		margin:0 0 6px !important;
		padding:0 !important;
		white-space:normal !important;
	}
	#footer address .f-item b{
		flex:0 0 72px;
		margin:0 !important;
		color:#9aa2a9 !important;
		font-weight:500 !important;
		font-size:11.5px !important;
		letter-spacing:0.01em;
		white-space:nowrap;
	}
	#footer address .f-item .f-val,
	#footer address .f-item{
		font-size:13px !important;
		line-height:1.6 !important;
		color:#6d757c !important;
	}

	#footer address .copyright{
		text-align:center !important;
		margin-top:14px !important;
	}
	#footer address .col-md-2{text-align:center !important;}
}

@media (max-width:360px){
	#footer address .col-md-10{max-width:300px;}
	#footer address .f-item b{flex-basis:64px;}
}


/* ==========================================================================
   Phase 29 - 브레드크럼 1depth / 2depth 경계
   ========================================================================== */

/* 71. 경계 처리 -----------------------------------------------------------
   68번에서 고정 영역을 구분하려고 1depth 에 진한 box-shadow 를 줬는데,
   딱딱한 단차처럼 보여 어색했습니다.
   -> 그림자를 걷어내고, 고정 영역에서 스크롤 영역으로 자연스럽게 이어지는
      부드러운 페이드로 바꿉니다. 2depth 첫 항목이 경계에 딱 붙지 않도록
      여백도 줍니다. */
@media (max-width:991px){
	.breadcrumb ol > li.dropdown{
		background:transparent !important;
		box-shadow:none !important;
		padding-right:12px !important;
	}

	/* 고정 영역 → 스크롤 영역으로 이어지는 좌측 페이드 */
	.breadcrumb ol > li.dropdown:after{
		content:"";
		position:absolute;
		top:0;
		right:-18px;
		width:18px;
		height:100%;
		z-index:3;
		pointer-events:none;
		background:linear-gradient(90deg,
			rgba(250,251,252,1) 0%,
			rgba(250,251,252,0.75) 45%,
			rgba(250,251,252,0) 100%);
	}

	/* 2depth 시작 여백 */
	.breadcrumb ol > li.depth2{
		padding-left:8px !important;
	}
	.breadcrumb ol > li.depth2 a:first-child{
		margin-left:2px !important;
	}

	/* 우측 페이드는 조금 더 은은하게 */
	.breadcrumb:after{
		width:24px !important;
		background:linear-gradient(90deg,
			rgba(250,251,252,0) 0%,
			rgba(250,251,252,0.85) 60%,
			rgba(250,251,252,1) 100%) !important;
	}

	/* 1depth 텍스트를 살짝 눌러 2depth 와 위계를 만듭니다 */
	.breadcrumb ol > li.dropdown > a.dropdown-toggle{
		color:#6b737a !important;
		font-size:14px !important;
	}
	.breadcrumb ol > li.dropdown > a.dropdown-toggle .caret{
		margin-left:2px;
	}
}


/* ==========================================================================
   Phase 30 - 푸터 위 배경 비침 / 라벨 회색 배경
   ========================================================================== */

/* 72. 푸터 위에 배경 이미지가 비치는 문제 ---------------------------------
   계측(390px, xgolf_nex):
     .section-hero  position:sticky  z-index:-1  background-image:xgolf_nex_bg
     #wrap bottom=3617 / #footer top=3633  -> 그 사이 16px 틈
     #footer background = rgba(0,0,0,0)  (투명)
     .wrapper       background = rgba(0,0,0,0)  (투명)
   히어로가 sticky + z-index:-1 이라 스크롤해도 화면에 남아 있고,
   앞쪽에 불투명한 배경이 없는 16px 틈으로 그 이미지가 비쳐 보였습니다.
   (그 16px 은 42번에서 제가 준 #footer margin-top 입니다)

   -> 틈 자체를 없애고 그만큼의 간격은 푸터 안쪽 padding 으로 옮깁니다.
      푸터에 불투명 배경과 z-index 를 줘 히어로가 비치지 않게 합니다. */
@media (max-width:991px){
	#footer{
		margin-top:0 !important;
		background:#ffffff !important;
		position:relative;
		z-index:1;
	}
	#footer .footer-nav-wrap{
		padding-top:40px !important;   /* 기존 24 + 위 여백 16 */
	}
}

/* 73. 고객센터 라벨의 회색 배경 -------------------------------------------
   .cs-hotline ul.box li:first-child 에 background:#fbfcfd 가 걸려 있는데,
   데스크톱에서는 25% 폭 라벨 칸의 배경이지만 모바일에서 블록으로 펴지면
   폭이 어중간한 회색 덩어리로 보입니다(특히 영문은 라벨이 길어 두드러짐).
   -> 배경을 걷어내고 소제목처럼 보이게 정리합니다. */
@media (max-width:991px){
	ul.box > li:first-child,
	.cs-hotline tbody > tr > td ul.box li:first-child,
	.cs-shortcut tbody > tr > td ul.box li:first-child{
		background:transparent !important;
		padding-top:14px !important;
		padding-bottom:2px !important;
		border-top:1px solid #edf0f2;
	}
	ul.box:first-of-type > li:first-child{border-top:0;}

	ul.box > li:first-child h6,
	ul.box > li:first-child{
		margin:0 !important;
		font-size:12.5px !important;
		font-weight:700 !important;
		letter-spacing:0.02em;
		color:#8a929a !important;
		line-height:1.5 !important;
	}
	ul.box > li:first-child h6{
		color:#8a929a !important;
		font-size:12.5px !important;
	}

	/* 값 영역 */
	ul.box > li + li{
		padding-top:4px !important;
		padding-bottom:14px !important;
	}
	.cs-hotline-no{
		color:#1f2933 !important;
	}
	h2.cs-hotline-no{
		font-size:24px !important;
		margin:2px 0 6px !important;
		line-height:1.2 !important;
	}
}


/* ==========================================================================
   Phase 31 - 푸터 콜센터 카드 구조 변경
   ========================================================================== */

/* 74. 카드를 3조각이 아니라 한 덩어리로 -----------------------------------
   64번에서는 마크업을 건드리지 않으려고 h6(위) / h2(옆) / small(아래) 에
   각각 테두리를 그려 '카드처럼' 보이게 했습니다. 국문은 시간이 한 줄이라
   맞아떨어졌지만, 영문은 "9a.m.~6p.m. (Mon.~Fri.) Off on weekend & holidays"
   가 두 줄로 접히면서 조각들의 폭과 이음새가 어긋나 깨져 보였습니다.

   -> 부모(.col-md-2)에 카드를 그리고 자식들은 평범한 요소로 되돌립니다.
      구조가 단순해져 문구 길이에 상관없이 깨지지 않습니다.
      SNS 아이콘도 같은 카드 안에 구분선과 함께 넣습니다. */
@media (max-width:991px){
	#footer .footer-nav > .col-md-2{
		max-width:360px;
		margin:0 auto !important;
		padding:18px 18px 16px !important;
		background:#ffffff;
		border:1px solid #e6eaee;
		border-radius:var(--xg-radius-lg);
		box-shadow:var(--xg-shadow-sm);
		text-align:center !important;
	}

	/* 조각별 테두리/배경 해제 */
	#footer .footer-nav > .col-md-2 h6,
	#footer .footer-nav > .col-md-2 h2,
	#footer .footer-nav > .col-md-2 small{
		background:none !important;
		border:0 !important;
		border-radius:0 !important;
		box-shadow:none !important;
		padding-left:0 !important;
		padding-right:0 !important;
	}
	#footer .footer-nav > .col-md-2 h6{
		margin:0 0 7px !important;
		padding:0 !important;
		font-size:12.5px !important;
		font-weight:600 !important;
		color:#7b848d !important;
	}
	#footer .footer-nav > .col-md-2 h2{
		margin:0 0 6px !important;
		padding:0 !important;
		font-size:28px !important;
		line-height:1.15 !important;
	}
	#footer .footer-nav > .col-md-2 small{
		display:block;
		margin:0 !important;
		padding:0 !important;
		font-size:12px !important;
		line-height:1.6 !important;
		color:#98a1a9 !important;
	}

	/* SNS : 카드 하단, 구분선과 함께 */
	#footer .sns{
		margin:14px 0 0 !important;
		padding-top:14px !important;
		border-top:1px solid #eef1f4;
		gap:12px;
	}
}

@media (max-width:360px){
	#footer .footer-nav > .col-md-2{padding:16px 14px 14px !important;}
	#footer .footer-nav > .col-md-2 h2{font-size:25px !important;}
}


/* ==========================================================================
   Phase 32 - 상단 KR | EN 정렬
   ========================================================================== */

/* 75. 언어 선택 구분선 -----------------------------------------------------
   계측(390px):
     KR  li top=15.0 bottom=26.0 h=11.0   (안에 <a> fs=11px lh=11px)
     |   li top=16.0 bottom=43.5 h=27.5   (직접 텍스트라 li 의 fs=16px/lh=27.52px 적용)
     EN  li top=15.0 bottom=26.0 h=11.0
   구분선만 높이가 27.5px 라 아래로 17.5px 늘어지고 1px 위로 밀려
   KR / EN 과 세로선이 맞지 않았습니다.
   -> flex 로 세로 중앙을 맞추고 구분선의 글꼴/행간을 링크와 통일합니다. */
@media (max-width:991px){
	.topbar > .container{
		padding-top:0 !important;
		padding-bottom:0 !important;
	}
	.topbar .selectlang{
		display:flex !important;
		align-items:center !important;
		justify-content:flex-end !important;
		float:none !important;
		margin:0 0 0 auto !important;
		padding:0 !important;
		list-style:none;
	}
	.topbar .selectlang > li{
		float:none !important;
		display:flex !important;
		align-items:center !important;
		height:auto !important;
		margin:0 !important;
		padding:0 !important;
		font-size:11.5px !important;
		line-height:1 !important;
	}
	.topbar .selectlang > li > a{
		display:flex !important;
		align-items:center !important;
		height:auto !important;
		min-height:34px;
		padding:0 9px !important;
		font-size:11.5px !important;
		line-height:1 !important;
		letter-spacing:0.04em;
	}
	.topbar .selectlang > li.topbar-devider{
		width:1px;
		height:10px;
		padding:0 !important;
		overflow:hidden;
		text-indent:-999px;          /* 텍스트 "|" 는 감추고 */
		background:#d5dade;          /* 1px 선으로 대체해 항상 정확히 맞춤 */
		border-radius:1px;
	}
	.topbar .selectlang > li.active > a{
		font-weight:700;
	}
}


/* ==========================================================================
   Phase 33 - 푸터 주소 라벨 열 폭
   ========================================================================== */

/* 76. 라벨 열이 좁아 한 줄만 어긋나던 문제 --------------------------------
   70번에서 라벨 열을 72px 로 고정했는데, 계측해보니
   'Head Quarter' 만 80px 이 필요했고(나머지는 72px),
   그 라벨만 열을 넘쳐 값의 시작점이 다른 줄과 어긋났습니다.
   -> 최장 라벨이 들어가는 88px 로 넓혀 모든 값의 시작점을 맞춥니다. */
@media (max-width:991px){
	#footer address .f-item b{
		flex:0 0 88px !important;
		white-space:nowrap;
	}
	#footer address .col-md-10{
		max-width:346px;
	}
}

@media (max-width:360px){
	#footer address .f-item b{flex-basis:82px !important;}
	#footer address .col-md-10{max-width:310px;}
}


/* ==========================================================================
   Phase 34 - 상단 언어 링크 포커스 표시
   ========================================================================== */

/* 77. KR / EN 탭 시 아래에 선이 보이던 문제 --------------------------------
   계측(390px, KR 링크 탭):
     activeElement = KR 링크
     outline = solid 2px rgb(0,179,74)  outline-offset = 2px
     matches(:focus-visible) = 예      <- 포인터 탭에서도 매칭됨
   링크가 상단바 맨 위(top=0, 높이 34px)에 있어서 offset:2px 아웃라인의
   아래쪽 획이 상단바 경계선처럼 보였습니다. 탭할 때 나타났다가 페이지가
   바뀌면서 사라지니 "긴 선이 깜빡인다" 로 보입니다.

   접근성상 키보드 포커스 표시는 필요하므로 없애지 않고,
   링크 '안쪽'에 그려 상단바 경계에 닿지 않도록 바꿉니다. */
@media (max-width:991px){
	.topbar .selectlang > li > a:focus,
	.topbar .selectlang > li > a:focus-visible{
		outline:none !important;
		outline-offset:0 !important;
	}
	.topbar .selectlang > li > a:focus-visible{
		border-radius:4px;
		background:rgba(0,150,62,.10);
		box-shadow:inset 0 0 0 2px rgba(0,150,62,.55);
	}
	/* 포인터로 눌렀을 때는 표시하지 않습니다 */
	.topbar .selectlang > li > a:focus:not(:focus-visible){
		background:transparent;
		box-shadow:none;
	}
	.topbar .selectlang > li > a{
		-webkit-tap-highlight-color:transparent;
	}
}

/* 78. 공통 - 포인터 클릭에는 포커스 링을 그리지 않음 ---------------------- */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible){
	outline:none !important;
}


/* ==========================================================================
   Phase 35 - 지도 타일 렌더링 회귀 수정
   ========================================================================== */

/* 79. [회귀] 지도 타일이 보이지 않던 문제 ---------------------------------
   증상: 찾아오시는 길에서 마커/컨트롤/축척은 보이는데 지도 그림만 안 나옴.
   계측(390px):
     타일 img  naturalSize=256x256
               rect = 0x256          <- 렌더 폭이 0
               computed width = 0px  max-width = 100%
     JS 오류 0건, 타일 12개 모두 HTTP 로드 성공(mts.kakaocdn.net)
   원인: 카카오 로프맵은 타일을 '크기 0인 앵커 div' 안에 position:absolute
     로 배치하고 이미지의 고유 크기(256px)에 의존합니다. 그런데 16번에서
     컨테이너가 넘치지 않게 하려고 넣은
        .root_daum_roughmap img { max-width:100% !important }
     때문에 max-width 가 '0 의 100% = 0' 으로 계산되어 타일 폭이 0 이
     되었습니다. 이 규칙은 미디어쿼리 밖이라 데스크톱도 같이 깨져 있었습니다.
   -> 지도 내부 이미지는 크기 제한에서 제외합니다.
      (컨테이너 자체의 max-width:100% 와 overflow:hidden 은 그대로 두어
       가로 넘침 방지 효과는 유지됩니다.) */
.root_daum_roughmap img,
.root_daum_roughmap .wrap_map img,
.root_daum_roughmap canvas,
.root_daum_roughmap .wrap_map canvas{
	max-width:none !important;
	min-width:0 !important;
	/* width/height 는 지정하지 않습니다.
	   레티나(DPR 2 이상)에서 카카오 SDK 는 512px HD 타일을 받아
	   인라인으로 width:256px 를 지정해 2배 선명하게 그립니다.
	   여기서 width:auto !important 를 걸면 그 지정을 덮어써
	   512px 로 그려지고, 지도가 2배 확대되어 1/4 영역만 보입니다.
	   (계측: inline width=256px 인데 computed=512px 이었음) */
}

/* 지도 컨트롤(확대/축소/로드뷰) 아이콘은 스프라이트라 크기가 고정입니다 */
.root_daum_roughmap .wrap_controllers img,
.root_daum_roughmap .map_border{
	max-width:none !important;
}


/* ==========================================================================
   Phase 36 - 지도 마커 크기 (Phase 35 과잉 수정 보정)
   ========================================================================== */

/* 80. 타일은 살리고 마커는 원래 크기로 -------------------------------------
   79번에서 타일이 width:0 으로 클램프되는 걸 풀려고
       max-width:none / width:auto / height:auto
   를 한꺼번에 걸었는데, 실제 원인은 max-width 뿐이었습니다.
   width/height:auto 까지 강제한 탓에 마커 스프라이트가 원본 크기로 커졌습니다.
   계측: MARKER marker_map01.png  natural 90x100 -> render 90x100
         (366px 폭 지도에서 마커가 가로의 25% 를 차지)
   -> width/height 강제를 걷어내고 max-width 만 해제합니다.
      레티나(2x) 에셋이므로 마커는 절반 크기로 명시합니다. */
.root_daum_roughmap img,
.root_daum_roughmap .wrap_map img,
.root_daum_roughmap canvas,
.root_daum_roughmap .wrap_map canvas{
	/* 원래 문제였던 max-width 클램프만 해제합니다.
	   width/height 는 SDK 가 DPR 에 맞춰 정하므로 건드리지 않습니다. */
	max-width:none !important;
	min-width:0 !important;
}

/* (제거) 타일에 width/height:auto !important 를 걸었던 규칙
   -------------------------------------------------------------------------
   레티나(devicePixelRatio 2 이상) 기기에서 카카오 SDK 는 HD 타일셋
   (PNG02, 512x512)을 내려받아 CSS 상으로는 256px 에 그려 2배 선명하게
   표시합니다. 그런데 이 규칙이 SDK 가 지정한 256px 를 덮어써서
   512px 그대로 그려졌고, 결과적으로 지도가 2배로 확대되어
   의도한 영역의 1/4 만 보였습니다.
   계측(DPR 2): TILE nat=512x512 -> render=512x512 (정상은 256x256)
   헤드리스 기본 DPR 이 1 이라 검증에서 놓쳤던 부분입니다.
   -> 타일 크기는 SDK 가 정하도록 두고, 원래 문제였던 max-width 만
      해제합니다(위의 공통 규칙에서 처리). */

/* 마커 : 90x100 은 2x 에셋이므로 절반으로 */
.root_daum_roughmap img[src*="marker_map"],
.root_daum_roughmap img[src*="marker"]{
	width:45px !important;
	height:50px !important;
}

/* 확대/축소 등 컨트롤 스프라이트도 원래 크기 유지 */
.root_daum_roughmap .wrap_controllers img,
.root_daum_roughmap .img_zoom{
	max-width:none !important;
}


/* ==========================================================================
   Phase 39 - 이미지 팝업(jQuery UI dialog) 모바일 대응
   ========================================================================== */

/* 81. 이미지 팝업이 화면을 벗어나던 문제 ----------------------------------
   layout.php 의 ImageViewer() 는 jQuery UI dialog 를
   width:'auto', height:'auto' 로 띄웁니다. 이미지 원본 크기에 맞춰
   커진 뒤 중앙 정렬되므로 모바일에서는 화면 밖으로 밀려납니다.
   계측(390px, eng X-GREEN, 원본 900x506):
     .ui-dialog  rect = -231,150  621x401   left = -231px
     -> 가로 231px 넘침, 왼쪽 잘림
   jQuery UI 는 left/top/width 를 인라인으로 넣으므로 !important 로 덮습니다.
   이 팝업은 kor/eng 의 xgreen · xbirdie · xmanager · xgolf_* 14개 페이지가
   공유하므로 CSS 한 곳에서 처리합니다. */
@media (max-width:991px){
	.ui-dialog{
		position:fixed !important;
		left:12px !important;
		right:12px !important;
		top:12px !important;
		width:auto !important;
		max-width:calc(100vw - 24px) !important;
		max-height:calc(100vh - 24px) !important;
		margin:0 !important;
		padding:0 !important;
		border-radius:var(--xg-radius) !important;
		box-shadow:var(--xg-shadow-lg) !important;
		overflow:hidden;
	}

	.ui-dialog .ui-dialog-titlebar{
		flex:0 0 auto;
		padding:12px 52px 12px 14px !important;
		border-radius:0 !important;
	}
	.ui-dialog .ui-dialog-title{
		float:none !important;
		width:auto !important;
		margin:0 !important;
		font-size:13.5px !important;
		line-height:1.45 !important;
		white-space:normal !important;
		overflow:visible !important;
		text-overflow:clip !important;
		word-break:keep-all;
	}
	.ui-dialog .ui-dialog-titlebar-close{
		width:44px !important;
		height:44px !important;
		min-width:44px;
		min-height:44px;
		margin-top:-22px !important;
		right:6px !important;
	}

	.ui-dialog .ui-dialog-content{
		width:auto !important;
		max-width:100% !important;
		height:auto !important;
		max-height:calc(100vh - 110px) !important;
		padding:10px !important;
		overflow:auto !important;
		-webkit-overflow-scrolling:touch;
	}
	.ui-dialog .ui-dialog-content img{
		display:block;
		width:auto !important;
		max-width:100% !important;
		height:auto !important;
		margin:0 auto;
	}

	/* 배경 오버레이가 화면 전체를 덮도록 */
	.ui-widget-overlay{
		position:fixed !important;
		top:0 !important;
		left:0 !important;
		right:0 !important;
		bottom:0 !important;
		width:auto !important;
		height:auto !important;
		opacity:.55 !important;
	}
}

@media (max-width:360px){
	.ui-dialog{left:8px !important; right:8px !important; top:8px !important;
	           max-width:calc(100vw - 16px) !important;}
	.ui-dialog .ui-dialog-title{font-size:12.5px !important;}
}

/* 82. 이미지 팝업 닫기 버튼이 보이지 않던 문제 --------------------------
   계측(390px, eng X-GREEN):
     버튼 rect = 326,34  44x44
       bg=none  text=""  자식수=0  .ui-icon 없음
   테마에 jQuery UI 아이콘 스프라이트가 붙어 있지 않아 빈 사각형만
   남습니다. 화면 폭과 무관한 문제이므로 미디어쿼리 밖에서 × 글리프를
   직접 그려 줍니다. */
.ui-dialog .ui-dialog-titlebar-close{
	position:absolute;
	overflow:hidden;
	text-indent:0 !important;
	font-size:0;
	line-height:0;
	background:transparent;
	border:0;
	border-radius:50%;
	color:#111;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	transition:background-color .15s ease;
}
.ui-dialog .ui-dialog-titlebar-close::before{
	content:"\00d7";
	display:block;
	font-size:26px;
	line-height:1;
	font-weight:400;
	color:inherit;
	text-align:center;
}
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus{
	background-color:rgba(0,0,0,.07);
	color:#000;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon{display:none !important;}

/* 데스크톱에서도 뷰포트를 넘지 않도록 최소한의 안전장치 */
.ui-dialog{max-width:calc(100vw - 24px);}
.ui-dialog .ui-dialog-content img{max-width:100%; height:auto;}

@media (max-width:991px){
	.ui-dialog .ui-dialog-titlebar-close{
		display:flex !important;
		align-items:center;
		justify-content:center;
		top:50% !important;
	}
	.ui-dialog .ui-dialog-titlebar-close::before{font-size:30px;}
}

/* 83. 데스크톱에서 닫기 X 가 깨져 보이던 문제 --------------------------
   계측(1440px):
     닫기버튼 rect = 1162,80  20x20   overflow=hidden
     ::before  fontSize=26px  height=26px
     -> 20px 버튼 안에 26px 글리프를 넣고 overflow:hidden 이라 잘렸습니다.
   버튼 자체를 글리프가 들어갈 크기로 키우고 flex 로 중앙 정렬합니다. */
.ui-dialog .ui-dialog-titlebar-close{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	width:34px !important;
	height:34px !important;
	top:50% !important;
	right:8px !important;
	margin:-17px 0 0 0 !important;
	padding:0 !important;
	overflow:visible !important;
}
.ui-dialog .ui-dialog-titlebar-close::before{
	font-size:24px !important;
	line-height:1 !important;
	width:auto !important;
	height:auto !important;
}
/* 제목이 X 밑으로 파고들지 않도록 */
.ui-dialog .ui-dialog-titlebar{padding-right:52px !important;}

/* 84. 모바일에서 팝업이 화면 최상단에 붙던 문제 ------------------------
   Phase 39 에서 position:fixed; top:12px 로 고정했더니, 스크롤 위치와
   상관없이 팝업이 화면 맨 위에 붙어 어색했습니다. 세로 중앙으로 바꿉니다.
   덧붙여 사이트의 다른 고정 요소에 덮이지 않도록 z-index 를 올립니다
   (기존 계측값: 다이얼로그 101 / 오버레이 100). */
@media (max-width:991px){
	.ui-dialog{
		top:50% !important;
		bottom:auto !important;
		transform:translateY(-50%) !important;
		z-index:1050 !important;
	}
	.ui-widget-overlay{
		z-index:1040 !important;
		cursor:pointer;
	}
	.ui-dialog .ui-dialog-titlebar-close{
		width:44px !important;
		height:44px !important;
		margin-top:-22px !important;
		right:6px !important;
	}
	.ui-dialog .ui-dialog-titlebar-close::before{font-size:28px !important;}
}

/* 85. 닫기 버튼이 전혀 동작하지 않던 원인 -------------------------------
   계측(390px, eng X-GREEN):
     버튼 click -> document 도달 = true      (이벤트는 정상 전달)
     $("#dialog").dialog("close") 예외 = 없음 (호출도 정상)
     .ui-dialog 강제 hide() 후에도 display=flex  <<<
   원인은 Phase 39 에서 제가 넣은 `.ui-dialog{display:flex !important}`
   였습니다. jQuery 의 hide()/dialog("close") 는 인라인 display:none 을
   넣는 방식인데, !important 선언이 그것을 이겨 버려 어떤 방법으로도
   닫히지 않았습니다. 위 39 블록에서 display 강제를 제거했고, flex 없이
   같은 레이아웃이 되도록 스크롤 주체를 다이얼로그로 옮깁니다. */
@media (max-width:991px){
	/* 내용이 길면 다이얼로그 자체가 스크롤 (내부 이중 스크롤 제거) */
	.ui-dialog{
		overflow:auto !important;
		-webkit-overflow-scrolling:touch;
	}
	/* 스크롤해도 닫기 버튼이 항상 보이도록 제목줄을 고정 */
	.ui-dialog .ui-dialog-titlebar{
		position:sticky !important;
		top:0 !important;
		z-index:2;
	}
	.ui-dialog .ui-dialog-content{
		max-height:none !important;
		overflow:visible !important;
	}
}


/* ==========================================================================
   Phase 42 - 모바일 좌우 여백 24px 기준으로 통일
   ========================================================================== */

/* 86. 좌우 게터 24px ------------------------------------------------------
   계측(390px, 7개 페이지):
     .container padding = 12px / 12px
     본문이 실제로 시작하는 x 분포
       xgolf_nex : x=10(41) x=12(6)
       xgreen    : x=10(9)  x=12(2)
       overview  : x=10(4)  x=12(1)
       point     : x=12(6)  x=10(1)
       inquire   : x=13(6)  x=12(2)
   -> 페이지마다 10~13px 로 제각각이고 24px 과는 두 배 이상 차이납니다.
      .container(12) + .row(음수 마진) + .col-*(8) 이 겹친 결과입니다.

   바깥 끝을 정확히 24px 로 맞추면서 열 사이 간격(16px)은 남기려면
      컨테이너 24  -  행 마진 8  +  열 패딩 8  = 24
   가 되도록 세 값을 함께 맞춰야 합니다. */
@media (max-width:991px){
	:root{--xg-gutter:24px;}

	.container{
		padding-left:var(--xg-gutter) !important;
		padding-right:var(--xg-gutter) !important;
	}
	.row{
		margin-left:-8px !important;
		margin-right:-8px !important;
	}
	.row > [class*="col-"]{
		padding-left:8px !important;
		padding-right:8px !important;
	}
	.col-gutter{padding-left:0 !important; padding-right:0 !important;}

	/* 헤더·푸터도 같은 선에 맞춥니다. 노치 대응(safe-area)은 유지합니다.
	   이 선택자들은 특정도가 .container 보다 높아 따로 지정해야 합니다. */
	.navbar > .container,
	#footer > .container,
	#footer .footer-nav-wrap > .container{
		padding-left:calc(var(--xg-gutter) + env(safe-area-inset-left)) !important;
		padding-right:calc(var(--xg-gutter) + env(safe-area-inset-right)) !important;
	}
	.topbar > .container{
		padding-left:var(--xg-gutter) !important;
		padding-right:var(--xg-gutter) !important;
	}

	/* 가로 스크롤 스트립(브레드크럼·중간 탭)은 띠 자체를 화면 끝까지 두고
	   첫 항목만 24px 안쪽에서 시작하게 합니다. 스크롤 여지가 화면 밖으로
	   이어지는 느낌이 살아 있어야 더 스크롤된다는 걸 알 수 있습니다. */
	.breadcrumb ol{
		padding-left:var(--xg-gutter) !important;
		padding-right:var(--xg-gutter) !important;
	}
	.nav-scroll-wrap > .nav-justified,
	.nav-scroll-wrap > .nav{
		padding-left:var(--xg-gutter) !important;
		padding-right:var(--xg-gutter) !important;
	}
}

/* 87. 풀블리드 예외 -------------------------------------------------------
   "풀이미지 부분은 제외" 요청에 따라, 원래 화면 끝까지 채우던 영역은
   24px 게터를 적용하지 않고 그대로 둡니다.
   계측으로 확인한 실제 풀블리드 요소(390px 에서 rect 0~390):
     section.section-hero.xgolf-nex / .franchise   (서브페이지 히어로)
     div#carousel-fullscreen.slide-fullscreen      (메인 캐러셀)
     div#startup.jumbotron.slide-fullscreen
     div.msgbox / div.msg / div.mask               (메인 캐러셀 오버레이)
   이들은 .container 밖에 있어 위 규칙의 영향을 받지 않지만,
   나중에 구조가 바뀌어도 안전하도록 명시해 둡니다. */
@media (max-width:991px){
	section.section-hero,
	.slide-fullscreen,
	#carousel-fullscreen,
	#startup.jumbotron,
	#wrap.main .msgbox,
	#wrap.main .mask{
		padding-left:0 !important;
		padding-right:0 !important;
		margin-left:0 !important;
		margin-right:0 !important;
	}
	/* 히어로 안의 텍스트는 화면에 붙지 않도록 게터를 되살립니다 */
	section.section-hero .hero-content{
		padding-left:var(--xg-gutter) !important;
		padding-right:var(--xg-gutter) !important;
	}
}

/* 88. 24px 이 실제로 적용되지 않던 두 지점 -------------------------------
   Phase 42 적용 후 재계측했더니 컨테이너는 24px 인데 본문은 x=14 였습니다.
   조상 체인을 따라가 보니 원인이 명확했습니다.

     h3.subtit-exp            left=14
       div.col-gutter         left=14   ml=-10px   <<< 여기
         div#feature          left=24
           div.container      left=0    pl=24px

   .col-gutter 에 좌우 -10px 마진이 걸려 있어 24px 을 도로 끌어당기고
   있었습니다(45번에서 패딩만 0 으로 했고 마진은 그대로였습니다).
   썸네일 캡션의 2px 패딩도 이미지 끝선과 2px 어긋나 함께 맞춥니다. */
@media (max-width:991px){
	.col-gutter{
		margin-left:0 !important;
		margin-right:0 !important;
	}
	.thumbnail .caption{
		padding-left:0 !important;
		padding-right:0 !important;
	}
}

/* 89. 메인 캐러셀 문구가 화면에 붙던 문제 --------------------------------
   87번에서 풀블리드 예외를 주면서 .msg 까지 padding:0 으로 만들어
   메인 문구가 x=0 에서 시작했습니다(이전 18px).
   배경 레이어(.msgbox/.mask)만 화면 끝까지 두고, 글자가 들어가는
   .msg 에는 게터를 돌려줍니다. */
@media (max-width:991px){
	#wrap.main .msg{
		padding-left:var(--xg-gutter) !important;
		padding-right:var(--xg-gutter) !important;
	}
}

/* 90. .row 안에 없는 col-* 이 24px 선을 넘어가던 문제 --------------------
   계측(390px, xgolf_nex):
     li                left=34
       ul.ft.circle4x4 left=34
         div.col-md-12 left=24  pl=10px   <<< 테마 기본 패딩이 남음
           div.col-gutter left=24
             div.container pl=24px
   45번 규칙은 `.row > [class*="col-"]` 로 한정돼 있어, .row 를 거치지
   않고 바로 놓인 col-* 은 테마의 10px 패딩을 그대로 갖고 있었습니다.
   -> 모든 col-* 의 좌우 패딩을 0 으로 두고, .row 안에 든 것만 8px 을
      돌려줍니다(그래야 컨테이너 24 - 행 -8 + 열 8 = 24 가 맞습니다). */
@media (max-width:991px){
	[class*="col-md-"],
	[class*="col-sm-"],
	[class*="col-xs-"],
	[class*="col-lg-"]{
		padding-left:0 !important;
		padding-right:0 !important;
	}
	.row > [class*="col-md-"],
	.row > [class*="col-sm-"],
	.row > [class*="col-xs-"],
	.row > [class*="col-lg-"]{
		padding-left:8px !important;
		padding-right:8px !important;
	}
}


/* ==========================================================================
   Phase 43 - 본문 행간 조정 + 부가 텍스트 위계 분리
   ========================================================================== */

/* 91. 왜 커 보였나 --------------------------------------------------------
   실측(390px) 과 벤치마크(각 사이트 CSS 직접 집계) 비교:
     X-GOLF 본문 16px  /  Rapsodo 16px, Foresight 16px, Uneekor 18px, Topgolf 18px
   -> 크기 자체는 업계 표준이라 낮출 이유가 없습니다.
      커 보이는 원인은 두 가지였습니다.
        (1) 행간 1.72 - 한국어 기준으로도 넉넉한 상단값(보통 1.5~1.7)
        (2) p / li / td / th / address / label / 캡션이 전부 같은 16px 라
            본문과 부가 정보의 위계가 없음
   -> 본문 16px 는 그대로 두고 행간만 1.6 으로, 부가 텍스트만 14~15px 로
      내려 위계를 만듭니다. */

:root{
	/* 부가 텍스트 전용 단계: 폰 14px → 태블릿 15px */
	--xg-text-sub: clamp(0.875rem, 2.8vw, 0.9375rem);
}

@media (max-width:991px){
	/* ---------- (1) 행간 1.72 -> 1.6 ---------- */
	body{line-height:1.6 !important;}
	p, li, dd, dt, td, th, address, label,
	.caption p, blockquote p, .panel-body,
	.thumbnail .caption p{
		line-height:1.6 !important;
	}

	/* ---------- (2) 부가 텍스트만 한 단계 아래로 ----------
	   본문(p, li, dd, dt)은 16px 를 유지합니다.
	   표 셀 / 주소 / 폼 라벨 / 캡션 / 푸터 링크만 내립니다.
	   폼 입력(input·select·textarea)은 iOS 자동 확대 임계값이라
	   16px 로 남겨 둡니다(Phase 15 규칙 유지). */
	td, th,
	address,
	label,
	.caption p,
	.thumbnail .caption p,
	.help-block,
	.text-muted,
	#footer p,
	#footer li,
	#footer a,
	#footer address{
		font-size:var(--xg-text-sub) !important;
		line-height:1.65 !important;
	}
}


/* ==========================================================================
   Phase 44 - 영문 Customer center 전화번호를 국문과 동일하게
   ========================================================================== */

/* 92. 영문 번호만 스타일이 하나도 안 걸리던 이유 --------------------------
   마크업이 언어별로 다릅니다.
     국문  <h2><span class="ls">1</span>544-0779</h2>
     영문  <h3>+82<span class="ls txt_mdash">-</span>1544 ...</h3>
   그런데 콜센터 카드 규칙 10개가 전부
     #footer .footer-nav > .col-md-2 h2
   만 겨냥하고 있어(64번·74번 모두), 영문 h3 는 카드 안에서 크기·색·여백·
   테두리 해제를 하나도 받지 못했습니다.
   responsive.nav.js 의 telLink() 도 h2 만 찾아 영문은 tel: 링크조차
   걸리지 않았습니다(JS 도 함께 수정).

   마크업을 바꾸지 않고, h3 에 h2 와 같은 최종 상태를 그대로 부여합니다. */
@media (max-width:991px){
	/* 조각별 테두리/배경 해제 (74번의 h2 그룹과 동일) */
	#footer .footer-nav > .col-md-2 h3{
		background:none !important;
		border:0 !important;
		border-radius:0 !important;
		box-shadow:none !important;
		display:block;
		margin:0 0 6px !important;
		padding:0 !important;
		font-size:28px !important;
		line-height:1.15 !important;
		letter-spacing:-0.02em;
		font-weight:700 !important;
		color:#111 !important;
		text-align:center !important;
	}
	#footer .footer-nav > .col-md-2 h3 .footer-tel{
		display:block;
		color:#00963e !important;
		text-decoration:none !important;
	}
	/* 국문 번호의 앞자리 간격 보정용 .ls 가 영문에도 붙어 있어
	   자간이 튀지 않도록 상속으로 되돌립니다. */
	#footer .footer-nav > .col-md-2 h3 .ls{letter-spacing:inherit;}
	/* 영문은 "+82-1544-0779" 로 국문보다 길어 하이픈 앞뒤를 조금 좁힙니다. */
	#footer .footer-nav > .col-md-2 h3 .txt_mdash{
		padding:0 1px;
		color:#111;
	}
	#footer .footer-nav > .col-md-2 h3 .footer-tel .txt_mdash{color:inherit;}
}

@media (max-width:360px){
	#footer .footer-nav > .col-md-2 h3{font-size:25px !important;}
}


/* ==========================================================================
   Phase 45 - 중간 메뉴 탭 정렬 바로잡기
   ========================================================================== */

/* 93. 탭이 48px 에서 시작하고 오른쪽이 뚝 잘리던 문제 --------------------
   계측(390px, xgolf_nex):
     .nav-scroll-wrap  rect 24~366          <- 이미 컨테이너 안쪽
     ul#nexTab         pad 24px/24px        <- 42번에서 24px 를 또 줌
       항목 48~160 160~272 272~384 ... 832
       scrollW=832  clientW=342
   42번에서 "띠는 화면 끝까지, 첫 항목만 24px" 를 의도했는데, 이 띠는
   .container 안에 들어 있어 화면 끝까지가 아니었습니다. 그래서 24px 가
   두 번 더해져 첫 탭이 48px 에서 시작하고, 스크롤되는 탭들은 366px 에서
   딱 잘려 "더 있다" 는 느낌 없이 어색하게 끊겼습니다.

   -> 래퍼를 음수 마진으로 화면 끝까지 빼고(0~390),
      안쪽 패딩 24px 로 첫/끝 탭을 24px 선에 맞춥니다.
      그러면 탭이 화면 가장자리 아래로 이어져 스크롤 여지가 보입니다. */
@media (max-width:991px){
	.nav-scroll-wrap{
		margin-left:calc(var(--xg-gutter) * -1) !important;
		margin-right:calc(var(--xg-gutter) * -1) !important;
		width:auto !important;
		max-width:none !important;
	}
	/* 안쪽 패딩으로 첫 항목을 24px 선에 맞춥니다 */
	.nav-scroll-wrap > .nav-justified,
	.nav-scroll-wrap > .nav,
	.nav-scroll-wrap > .nav-pills{
		padding-left:var(--xg-gutter) !important;
		padding-right:var(--xg-gutter) !important;
	}
	/* 스크롤 힌트(우측 페이드)는 화면 오른쪽 끝에 붙어야 자연스럽습니다 */
	.nav-scroll-wrap .tab-scroll-hint{right:0 !important;}
}


/* ==========================================================================
   Phase 46 - 제품 페이지 배경 누출 + 중간 메뉴 다듬기
   ========================================================================== */

/* 94. xgolf 배경 이미지가 탭을 뚫고 내려오던 문제 -------------------------
   테마 원본:
     .xgolf.eye{background: #fff url(xgolf_eye_bg.jpg) no-repeat 50% 0;}
   계측(390px, xgolf_eye):
     배경 이미지 원본 = 1360 x 250,  background-size = auto (원본 크기)
     .xgolf.eye  높이 2898px  <- 페이지 전체가 이 배경을 깖
     .page-header 는 top=24  h=115  (배너로 보이는 부분)
     .nav-scroll-wrap 은 .xgolf 기준 top=159, 높이 51  -> 159~210
   즉 배경은 위에서 250px 까지 깔리는데 배너는 139px 에서 끝나므로,
   남은 약 110px 가 그대로 중간 메뉴 뒤로 흘러내려 탭을 뚫고 나온 것처럼
   보였습니다. 데스크톱은 컨테이너가 1000px 라 배너 높이와 맞아떨어져
   드러나지 않던 문제입니다.

   -> 모바일에서는 배경을 페이지 전체에서 떼어내 배너(.page-header)에만
      붙이고, 폭에 맞춰 cover 로 채웁니다. 그러면 배너 아래로는 절대
      번지지 않습니다. */
@media (max-width:991px){
	.xgolf.nex,
	.xgolf.eye,
	.xgolf.zes{
		background-image:none !important;
		background-color:#fff !important;
	}

	.xgolf.nex .page-header{
		background-image:url('/assets/images/xgolf/images/xgolf_nex_bg.jpg') !important;
	}
	.xgolf.eye .page-header{
		background-image:url('/assets/images/xgolf/images/xgolf_eye_bg.jpg') !important;
	}
	.xgolf.zes .page-header{
		background-image:url('/assets/images/xgolf/images/xgolf_zes_bg.jpg') !important;
	}

	/* 배너는 "풀이미지" 로 보고 화면 끝까지, 글자만 24px 안쪽에 둡니다 */
	.xgolf .page-header{
		background-repeat:no-repeat !important;
		background-position:50% 50% !important;
		background-size:cover !important;
		margin:0 calc(var(--xg-gutter) * -1) var(--xg-5) !important;
		padding:22px var(--xg-gutter) 20px !important;
		border-bottom:0 !important;
		overflow:hidden;
	}
}

/* 95. 중간 메뉴 모양 다듬기 -----------------------------------------------
   기존: 각진 사각형 + 항목 사이 1px 세로 구분선(inset box-shadow) +
         회색 띠 배경. 띠를 화면 끝까지 뺀 뒤로는 각진 블록과 구분선이
         더 도드라져 거칠어 보였습니다.
   -> 알약(pill) 형태로 바꾸고 구분선을 없앱니다.
      폭이 모두 같아야 한다는 기존 요청을 지키려고 min-width 는 유지합니다. */
@media (max-width:991px){
	.nav-scroll-wrap{
		background:transparent !important;
		margin-bottom:20px !important;
	}
	.nav-scroll-wrap > .nav-justified,
	.nav-scroll-wrap > .nav{
		display:flex !important;
		gap:8px;
		align-items:stretch;
		background:transparent !important;
		border:0 !important;
		padding-top:2px !important;
		padding-bottom:2px !important;
	}

	/* 구분선 제거 */
	.nav-justified > li + li > a{box-shadow:none !important;}

	.nav-justified > li > a,
	.nav-pills.nav-justified > li > a{
		display:flex !important;
		align-items:center;
		justify-content:center;
		min-height:42px;
		padding:9px 14px !important;
		border:1px solid #e1e6ea !important;
		border-radius:var(--xg-pill) !important;
		background:#ffffff !important;
		color:#59626b !important;
		font-size:14px !important;
		font-weight:600 !important;
		line-height:1.3 !important;
		white-space:nowrap !important;
		box-shadow:none !important;
		transition:background-color var(--xg-dur) var(--xg-ease),
		           border-color var(--xg-dur) var(--xg-ease),
		           color var(--xg-dur) var(--xg-ease);
	}
	.nav-justified > li > a:hover,
	.nav-justified > li > a:focus{
		background:#f2f5f7 !important;
		border-color:#cfd6dd !important;
		color:#1f2933 !important;
	}
	.nav-justified > li.active > a,
	.nav-justified > li.active > a:hover,
	.nav-justified > li.active > a:focus,
	.nav-pills.nav-justified > li.active > a{
		background:#00963e !important;
		border-color:#00963e !important;
		color:#ffffff !important;
		font-weight:700 !important;
		box-shadow:0 2px 8px rgba(0,150,62,.22) !important;
	}

	/* 페이지 배경이 흰색이 되었으므로 스크롤 힌트도 흰색으로 */
	.tab-scroll-hint{
		width:28px !important;
		background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.98)) !important;
	}
}

/* 96. 가로 스크롤 감촉 -----------------------------------------------------
   손가락을 떼면 항목이 어중간하게 걸쳐 멈추던 것을, 스냅으로 정리하고
   관성 스크롤과 바운스 전파 차단을 함께 켭니다. */
@media (max-width:991px){
	.nav-scroll-wrap > .nav-justified,
	.nav-scroll-wrap > .nav,
	.breadcrumb ol{
		-webkit-overflow-scrolling:touch;
		overscroll-behavior-x:contain;
		scroll-behavior:smooth;
		scroll-snap-type:x proximity;
		scroll-padding-left:var(--xg-gutter);
		scroll-padding-right:var(--xg-gutter);
		scrollbar-width:none;
	}
	.nav-scroll-wrap > .nav-justified::-webkit-scrollbar,
	.nav-scroll-wrap > .nav::-webkit-scrollbar,
	.breadcrumb ol::-webkit-scrollbar{width:0; height:0;}

	.nav-justified > li{scroll-snap-align:center;}
	.nav-justified > li:first-child{scroll-snap-align:start;}
	.nav-justified > li:last-child{scroll-snap-align:end;}
}

/* 움직임 최소화를 원하는 사용자에게는 스냅/부드러운 스크롤을 끕니다 */
@media (prefers-reduced-motion:reduce){
	.nav-scroll-wrap > .nav-justified,
	.nav-scroll-wrap > .nav,
	.breadcrumb ol{
		scroll-behavior:auto;
		scroll-snap-type:none;
	}
}


/* ==========================================================================
   Phase 47 - 제품 배너 배경 우측 잘림
   ========================================================================== */

/* 97. cover 가 좌우를 잘라내던 문제 --------------------------------------
   배너 이미지(1360x250)는 왼쪽이 거의 빈 밝은 여백(로고·문구 자리)이고
   오른쪽에 제품 사진이 놓인 구조입니다.
   46번에서 background-size:cover 로 채웠더니 세로를 기준으로 확대되어
     250 -> 배너 높이 약 139px  (배율 0.556)
     1360 * 0.556 = 약 756px  ->  390px 화면에는 가운데 390px 만 노출
   즉 좌우 각각 약 183px 이 잘리면서 오른쪽 제품이 통째로 사라졌습니다.

   -> contain 으로 바꿔 가로 전체(1360px 폭 전부)가 들어오게 합니다.
      390px 기준 이미지는 390x72 가 되고, 남는 위아래는 이미지 자체가
      흰 배경이라 배너 배경색(#fff)과 자연스럽게 이어집니다.
      문구는 이미지의 빈 왼쪽 영역 위에 놓여 가독성도 유지됩니다. */
@media (max-width:991px){
	.xgolf .page-header{
		background-size:contain !important;
		background-position:50% 50% !important;
		background-color:#ffffff !important;
	}
}


/* 98. 문구가 제품 사진 위에 겹치던 문제 ----------------------------------
   97번에서 contain 으로 바꿔 가로 잘림은 없어졌지만, 390px 기준 이미지가
   390x72 로 작아진 채 세로 중앙에 놓이면서 배너 문구와 겹쳤습니다.
   ("모든 수준의 골퍼용" 의 오른쪽 끝이 제품 사진의 어두운 부분과 만남)

   -> 이미지를 배너 아래쪽에 붙이고, 그 높이만큼 아래 여백을 확보해
      문구(위) / 제품 사진(아래) 로 분리합니다.
      배너는 화면 폭 전체(100vw)를 쓰므로 contain 높이는
        100vw * 250 / 1360 = 18.38vw
      입니다. 화면 폭이 달라져도 항상 맞도록 vw 로 계산합니다. */
@media (max-width:991px){
	.xgolf .page-header{
		background-position:50% 100% !important;
		padding-bottom:calc(18.4vw + 14px) !important;
	}
}


/* ==========================================================================
   Phase 49 - 배너 이미지를 다시 텍스트의 배경으로
   ========================================================================== */

/* 99. 이미지를 아래 띠로 분리했던 것을 원래대로 되돌립니다 ---------------
   98번에서 문구 겹침을 피하려고 이미지를 배너 아래쪽에 띠로 깔았는데,
   원래 의도대로 "텍스트의 배경" 으로 되돌립니다.
   계측(390px):
     .page-header      logo y 32~76(44px)   h1 y 86~119(eye) / 86~153(nex)
     이미지 contain 높이 = 390 * 250/1360 = 72px
   이미지를 위쪽(50% 0)에 두면 로고가 이미지 위에 얹히고, 제목은 이미지
   아래 흰 영역으로 이어집니다. 이미지 왼쪽이 원래 흰 여백이라 배너
   배경색(#fff)과 이어져 한 덩어리로 보입니다. 가로는 contain 이므로
   여전히 어느 쪽도 잘리지 않습니다.

   또 이미지가 배너 밖으로 나가지 못하도록 min-height 로 띠 높이를
   확보하고(overflow:hidden 은 46번에서 이미 적용),
   중간 메뉴는 배너 아래로 살짝 더 내려 겹치지 않게 띄웁니다. */
@media (max-width:991px){
	.xgolf .page-header{
		background-position:50% 0 !important;
		background-size:contain !important;
		/* 98번에서 넣은 이미지 띠용 아래 여백을 되돌립니다 */
		padding:16px var(--xg-gutter) 18px !important;
		/* 이미지(18.4vw)가 배너 안에 온전히 들어가도록 최소 높이 확보 */
		min-height:calc(18.4vw + 12px);
		/* 중간 메뉴를 살짝 내려 배너와 겹치지 않게 */
		margin-bottom:30px !important;
	}
	/* 로고가 오른쪽 제품 사진과 겹치지 않도록 폭을 왼쪽 여백 안으로 제한.
	   계측상 제품은 화면 x=203(52%) 부터 시작합니다. */
	.xgolf .page-header img{
		max-width:46% !important;
		height:auto !important;
	}
	.nav-scroll-wrap{margin-top:6px !important;}
}


/* ==========================================================================
   Phase 50 - 배너 배경 이미지 상단 쏠림
   ========================================================================== */

/* 100. 이미지가 화면 맨 위에 붙어 보이던 문제 -----------------------------
   데스크톱(1440) 실측:
     .page-header  margin-top 64px,  로고 y 10~54,  h1 y 64~100
     배경은 .xgolf 상단 0~250px 밴드
     -> 텍스트 위로 74px, 아래로 86px 만큼 이미지 여백이 있습니다.
   모바일(390) 실측:
     이미지 밴드 y 0~72  (위 여백 0)  로고 y 26~51,  h1 y 61~94
     -> 이미지가 배너 맨 위에 딱 붙어 위로 쏠려 보였습니다.

   데스크톱처럼 이미지 위에 여백을 두고, 로고는 이미지 안에 유지하며,
   제목은 이미지 아래로 확실히 내려 겹치지 않게 합니다.

   높이 계산 (배너는 화면 폭 전체를 쓰므로 100vw 기준)
     이미지 높이  imgH  = 100vw * 250/1360 = 18.38vw
     로고 높이    logoH = 46% * (100vw-48) * 72/393 = 8.43vw - 4px
     제목이 이미지 아래로 내려가려면 로고 아래 여백이
       imgH - logoH - 8 = 9.95vw - 4px
     만큼 필요합니다. 화면 폭이 달라져도 항상 맞도록 vw 로 둡니다. */
@media (max-width:991px){
	.xgolf .page-header{
		/* 이미지를 20px 아래에서 시작 - 상단 쏠림 해소 */
		background-position:50% 20px !important;
		background-size:contain !important;
		/* 로고가 이미지 밴드 안에 오도록 위 여백을 함께 내림 */
		padding-top:36px !important;
		padding-bottom:18px !important;
		min-height:calc(18.4vw + 44px);
	}
	/* 제목이 이미지(특히 오른쪽 제품 사진)와 겹치지 않도록 아래로 */
	.xgolf .page-header img{
		margin-bottom:calc(9.95vw - 4px) !important;
	}
	.xgolf .page-header h1,
	.xgolf .page-header h2,
	.xgolf .page-header h3{
		margin-top:0 !important;
	}
}


/* ==========================================================================
   Phase 51 - 배너: 텍스트 왼쪽 / 제품 사진 오른쪽 (데스크톱과 동일한 관계)
   ========================================================================== */

/* 101. 데스크톱 배치를 그대로 옮깁니다 ------------------------------------
   데스크톱(1440) 실측:
     컨테이너      x 220~1220 (1000px)
     로고          x 220~460
     제품 사진     화면 x 747~1330
       -> 컨테이너 왼쪽 끝에서 527px, 즉 컨테이너 폭의 약 53% 지점부터
          제품이 시작하고 텍스트는 그 왼쪽에 놓입니다.
     즉 세로로 쌓인 구조가 아니라 "텍스트 왼쪽 / 사진 오른쪽" 입니다.

   모바일(390) 계측:
     배경을 contain 으로 깔면 이미지는 화면 폭 전체(390x72)가 되고
     제품은 화면 x=203(52%) 부터 시작합니다. 데스크톱의 53% 와 거의 같습니다.
     그런데 지금까지는 텍스트 폭을 제한하지 않아 제목이 제품 위로 넘어가고,
     그걸 피하려고 제목을 이미지 아래로 내려서 세로로 쌓인 모양이 됐습니다.

   -> 제목 폭을 왼쪽 50%(=x 24~195) 로 제한해 제품(203~) 앞에서 끊고,
      이미지는 세로 중앙에 두어 데스크톱과 같은 좌우 배치로 만듭니다.
      폭이 좁아진 만큼 배너 제목만 한 단계 작게 잡습니다. */
@media (max-width:991px){
	.xgolf .page-header{
		background-position:50% 50% !important;   /* 세로 중앙 (가로는 contain 이라 전폭) */
		background-size:contain !important;
		padding:18px var(--xg-gutter) !important;
		min-height:calc(18.4vw + 34px);
		margin-bottom:30px !important;
	}

	/* 로고 - 왼쪽 열 안에 */
	.xgolf .page-header img{
		max-width:46% !important;
		height:auto !important;
		margin:0 0 8px !important;
	}

	/* 제목 - 제품 사진(화면 52% 지점)에 닿지 않도록 왼쪽 50% 로 제한.
	   폭이 좁아졌으므로 배너 제목만 별도 크기를 씁니다. */
	.xgolf .page-header h1,
	.xgolf .page-header h2,
	.xgolf .page-header h3{
		margin:0 !important;
		max-width:50% !important;
		font-size:clamp(16px, 4.5vw, 21px) !important;
		line-height:1.35 !important;
		letter-spacing:-0.01em;
		word-break:keep-all;
	}
}


/* 102. 텍스트 열이 너무 좁던 문제 ----------------------------------------
   101번 계측(390px):
     이미지 contain = 화면 폭 전체(390) -> 제품이 x=203(52%) 부터 시작
     텍스트 열 x 24~171 (147px)  -> 제목이 17.55px 까지 작아지고
                                    nex 는 3줄로 접힘 (데스크톱은 24px 1~2줄)
   -> 이미지를 82% 로 조금 줄여 오른쪽에 붙이면
        이미지 폭 320px, 높이 59px, 왼쪽 끝 x=70
        제품 위치 x 236~374  (원본 707~1290 이 그대로 다 보임)
      텍스트 열을 60%(x 24~229) 까지 넓힐 수 있어 제목을 20px 대로 되돌립니다.
      이미지 왼쪽은 원래 흰 여백이라 배너 흰 배경과 이어져 경계가 보이지 않습니다. */
@media (max-width:991px){
	.xgolf .page-header{
		background-size:82% auto !important;
		background-position:right center !important;
	}
	.xgolf .page-header h1,
	.xgolf .page-header h2,
	.xgolf .page-header h3{
		max-width:60% !important;
		font-size:clamp(18px, 5.1vw, 23px) !important;
	}
	.xgolf .page-header img{
		max-width:52% !important;
	}
}


/* ==========================================================================
   Phase 53 - 배너 배경 우측 정렬 + 꽉 채우기
   ========================================================================== */

/* 103. 왼쪽에 빈 띠가 생겨 잘려 보이던 문제 ------------------------------
   102번에서 텍스트 열을 넓히려고 background-size 를 82% 로 줄였더니
     이미지 폭 320px, 배너 폭 390px  ->  왼쪽 70px 이 빈 채로 남음
   이 빈 띠 때문에 배경이 중간에서 끊긴 것처럼 보였습니다.

   -> cover + 오른쪽 정렬로 배너를 빈틈없이 채웁니다.
      계측상 배너 높이는 106~126px 이고 이미지 비율이 1360:250 이므로
      cover 는 세로를 기준으로 확대합니다.
        배율 106/250 = 0.424,  확대 폭 = 1360 * 0.424 = 577px
        오른쪽 정렬이므로 원본 x 440~1360 구간이 보입니다.
      잘려 나가는 것은 원본 왼쪽 440px 인데, 이 영역은 원래 아무것도
      없는 빈 여백이라 제품(원본 707~1290)은 그대로 다 보입니다.

      다만 제품이 커지면서 텍스트 자리까지 올라오므로, 왼쪽에 흰색
      그라데이션 레이어를 한 장 깔아 글자가 항상 읽히게 합니다.
      (배경 레이어 2장: 그라데이션 위, 사진 아래) */
@media (max-width:991px){
	.xgolf.nex .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 32%,rgba(255,255,255,.55) 52%,rgba(255,255,255,0) 72%),
			url('/assets/images/xgolf/images/xgolf_nex_bg.jpg') !important;
	}
	.xgolf.eye .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 32%,rgba(255,255,255,.55) 52%,rgba(255,255,255,0) 72%),
			url('/assets/images/xgolf/images/xgolf_eye_bg.jpg') !important;
	}
	.xgolf.zes .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 32%,rgba(255,255,255,.55) 52%,rgba(255,255,255,0) 72%),
			url('/assets/images/xgolf/images/xgolf_zes_bg.jpg') !important;
	}

	.xgolf .page-header{
		background-repeat:no-repeat, no-repeat !important;
		background-position:left center, right center !important;
		background-size:auto, cover !important;
		min-height:96px;
	}

	/* 그라데이션이 가독성을 지켜 주므로 텍스트 열을 조금 더 넓게 */
	.xgolf .page-header h1,
	.xgolf .page-header h2,
	.xgolf .page-header h3{
		max-width:64% !important;
	}
	.xgolf .page-header img{
		max-width:54% !important;
	}
}


/* ==========================================================================
   Phase 54 - 배너 배경 최종 정리
   ========================================================================== */

/* 104. 제품이 흐려지고 텍스트 뒤로 밀려 들어가던 문제 --------------------
   전달받은 화면(20260811_103424_1.jpg) 확인 결과 두 가지 문제:
     (1) 제품이 흰 그라데이션에 덮여 흐릿함
     (2) 제품이 텍스트 바로 뒤까지 밀려 들어옴

   계측(nex, 배너 높이 126px, cover + 우측정렬):
     배율 126/250 = 0.504  ->  확대 폭 1360*0.504 = 685px
     보이는 구간 = 원본 x 586~1360
     제품(원본 707~1290) = 화면 x 61~355   <<< 화면 16% 지점부터
   103번의 cover 는 "세로를 채우려고" 이미지를 크게 키웁니다. 그 결과
   제품이 왼쪽으로 밀려 텍스트 밑에 깔렸고, 그것을 가리려고 넣은
   그라데이션이 제품까지 덮어 흐려졌습니다.

   -> 세로를 채우는 것을 포기하고 가로를 100% 로 채웁니다.
      이때 이미지는 390x72 가 되고 제품은 화면 x 203~370(오른쪽 43%)에
      놓입니다. 데스크톱에서 제품이 컨테이너의 53% 지점부터 시작하는 것과
      같은 자리입니다. 텍스트(왼쪽 50%)와 겹치지 않으므로 그라데이션도
      필요 없어 제품이 원래 색으로 선명하게 나옵니다.
      위아래로 남는 공간은 이미지 자체가 흰 배경이라 배너 흰색과 이어져
      경계가 보이지 않습니다. */
@media (max-width:991px){
	.xgolf.nex .page-header{
		background-image:url('/assets/images/xgolf/images/xgolf_nex_bg.jpg') !important;
	}
	.xgolf.eye .page-header{
		background-image:url('/assets/images/xgolf/images/xgolf_eye_bg.jpg') !important;
	}
	.xgolf.zes .page-header{
		background-image:url('/assets/images/xgolf/images/xgolf_zes_bg.jpg') !important;
	}

	.xgolf .page-header{
		background-repeat:no-repeat !important;
		background-size:100% auto !important;   /* 가로를 꽉 채움, 잘림 없음 */
		background-position:50% 50% !important; /* 세로 중앙 */
		background-color:#ffffff !important;
		padding:14px var(--xg-gutter) !important;
		min-height:calc(18.4vw + 22px);
		margin-bottom:30px !important;
	}

	/* 텍스트는 제품(화면 52% 지점) 왼쪽에만. 겹치지 않으니 덮개가 불필요 */
	.xgolf .page-header img{
		max-width:46% !important;
		height:auto !important;
		margin:0 0 6px !important;
	}
	.xgolf .page-header h1,
	.xgolf .page-header h2,
	.xgolf .page-header h3{
		margin:0 !important;
		max-width:50% !important;
		font-size:clamp(16px, 4.5vw, 20px) !important;
		line-height:1.32 !important;
		word-break:keep-all;
	}
}

/* 105. 배너 제목이 3줄로 접히던 문제 -------------------------------------
   계측(390px, nex): 텍스트 열 171px, 제목 17.55px
     "상급자용으로 이상적" = 10글자 x 17.55 = 175px > 171px  -> 한 글자가
     넘쳐서 3줄로 접혔습니다. ("프로 골프 선수 및 / 상급자용으로 / 이상적")
   -> 16px 로 한 단계 낮추면 10글자 = 160px 로 들어가 2줄이 됩니다.
      eye/cube/mini 처럼 짧은 제목은 그대로 1줄을 유지합니다. */
@media (max-width:991px){
	.xgolf .page-header h1,
	.xgolf .page-header h2,
	.xgolf .page-header h3{
		font-size:clamp(15px, 4.1vw, 19px) !important;
	}
}


/* ==========================================================================
   Phase 55 - 배너를 참고 이미지 상태로 (제목 크기 유지 / 배경 잘림 허용)
   ========================================================================== */

/* 106. 104번(가로 100% 채우기)을 되돌립니다 -------------------------------
   전달받은 20260811_103424_1.jpg 가 "고쳐야 할 화면" 이 아니라
   "원하는 화면" 이었습니다. 그 화면의 조건은 다음과 같습니다.
     - 제목이 크게 2줄  (clamp(18px, 5.1vw, 23px) -> 390px 에서 19.89px)
     - 텍스트 열 64%
     - 배경은 cover + 우측정렬로 배너를 빈틈없이 채움 (좌측 일부 잘림 허용)
     - 제품이 텍스트 영역까지 올라오므로 왼쪽 흰색 그라데이션으로 가독성 확보

   104/105 번에서 가로 100% 로 바꾸며 제목을 16px 로 줄였던 것을
   여기서 되돌립니다. 배경 왼쪽이 잘리는 것은 의도한 선택입니다
   (잘리는 구간은 원본 x 0~440 의 빈 여백이며 제품은 그대로 유지됩니다). */
@media (max-width:991px){
	.xgolf.nex .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 32%,rgba(255,255,255,.55) 52%,rgba(255,255,255,0) 72%),
			url('/assets/images/xgolf/images/xgolf_nex_bg.jpg') !important;
	}
	.xgolf.eye .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 32%,rgba(255,255,255,.55) 52%,rgba(255,255,255,0) 72%),
			url('/assets/images/xgolf/images/xgolf_eye_bg.jpg') !important;
	}
	.xgolf.zes .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 32%,rgba(255,255,255,.55) 52%,rgba(255,255,255,0) 72%),
			url('/assets/images/xgolf/images/xgolf_zes_bg.jpg') !important;
	}

	.xgolf .page-header{
		background-repeat:no-repeat, no-repeat !important;
		background-position:left center, right center !important;
		background-size:auto, cover !important;
		background-color:#ffffff !important;
		padding:18px var(--xg-gutter) !important;
		min-height:96px;
		margin-bottom:30px !important;
	}

	/* 참고 이미지의 글자 크기 그대로 */
	.xgolf .page-header h1,
	.xgolf .page-header h2,
	.xgolf .page-header h3{
		margin:0 !important;
		max-width:64% !important;
		font-size:clamp(18px, 5.1vw, 23px) !important;
		line-height:1.32 !important;
		word-break:keep-all;
	}
	.xgolf .page-header img{
		max-width:54% !important;
		height:auto !important;
		margin:0 0 6px !important;
	}
}


/* ==========================================================================
   Phase 56 - 참고 이미지와 동일한 제목 폭 / 줄바꿈
   ========================================================================== */

/* 107. 제목 줄바꿈 위치가 달랐던 이유 -------------------------------------
   참고 이미지(20260811_103424_1.jpg) 와 비교:
     참고 : "프로 골프 선수 및 상급자용으로 / 이상적"  -> 제목이 폭의 약 86% 사용
     현재 : "프로 골프 선수 및 / 상급자용으로 이상적"  -> 64% 제한 때문에 일찍 접힘
   제가 제품 사진과 겹치지 않게 하려고 건 max-width 64% 가 원인이었습니다.
   참고 이미지는 제목이 제품 왼쪽 끝을 타고 넘어가면서도 읽히는 형태입니다.

   -> 폭 제한을 풀어 제목이 컨테이너 폭을 그대로 쓰게 하고, 글자가 제품 위로
      올라가는 구간까지 흰색 그라데이션을 넓혀 가독성을 확보합니다.
      계측: 342px 폭에 21.8px 글자면 한 줄에 약 15글자
            -> "프로 골프 선수 및 상급자용으로"(15자) 가 1줄에 들어가
               참고 이미지와 같은 줄바꿈이 됩니다. */
@media (max-width:991px){
	.xgolf.nex .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.95) 44%,rgba(255,255,255,.74) 64%,rgba(255,255,255,.34) 80%,rgba(255,255,255,0) 94%),
			url('/assets/images/xgolf/images/xgolf_nex_bg.jpg') !important;
	}
	.xgolf.eye .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.95) 44%,rgba(255,255,255,.74) 64%,rgba(255,255,255,.34) 80%,rgba(255,255,255,0) 94%),
			url('/assets/images/xgolf/images/xgolf_eye_bg.jpg') !important;
	}
	.xgolf.zes .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.95) 44%,rgba(255,255,255,.74) 64%,rgba(255,255,255,.34) 80%,rgba(255,255,255,0) 94%),
			url('/assets/images/xgolf/images/xgolf_zes_bg.jpg') !important;
	}

	.xgolf .page-header h1,
	.xgolf .page-header h2,
	.xgolf .page-header h3{
		max-width:none !important;      /* 폭 제한 해제 */
		font-size:clamp(19px, 5.6vw, 24px) !important;
		line-height:1.34 !important;
	}
	.xgolf .page-header img{
		max-width:46% !important;
	}
}


/* ==========================================================================
   Phase 57 - sticky 히어로가 본문 뒤로 비치는 문제 (데스크톱 포함)
   ========================================================================== */

/* 108. 큐브 페이지 스크롤이 이상하던 이유 ---------------------------------
   계측(1440px, xgolf_cube):
     section.section-hero.xgolf-cube  position:sticky  z-index:-1
                                      top:0  h=669  배경 #000
     div.xgolf                        background: rgba(0,0,0,0)   <<< 투명
     #wrap / .wrapper                 배경 없음
   히어로를 화면 위에 고정해 두고 본문이 그 위를 덮으며 지나가는 구조인데,
   본문 배경이 투명하면 검은 히어로가 글자 뒤로 계속 비칩니다.
   테마에는 .xgolf.nex / .eye / .zes 에만 배경(#fff + 이미지)이 있고
   cube 에는 배경 규칙이 아예 없어서 이 페이지만 증상이 나타났습니다.

   -> 본문 컨테이너(#wrap)에 불투명 배경을 줍니다.
      이미 배경이 있는 nex/eye/zes 는 더 구체적인 규칙이 이기므로 영향 없고,
      메인 페이지처럼 자체 배경이 있는 섹션들도 그대로입니다.
   이 문제는 화면 폭과 무관하므로 미디어쿼리 밖에 둡니다.
   (같은 원인으로 Phase 30 에서 푸터가 비쳤던 것을 이미 한 번 고쳤습니다) */
#wrap{
	background-color:#ffffff;
	/* position:relative 만 둡니다. z-index 를 주면 쌓임 맥락이 생겨
	   내부의 부트스트랩 모달(z-index:1040)이 이 맥락 안에 갇히고,
	   body 직속인 .modal-backdrop(z-index:1030)이 그 위로 올라옵니다.
	   실제로 메인 팝업의 닫기 버튼 자리에서 elementFromPoint 가
	   .modal-backdrop 으로 잡혀 팝업을 누를 수 없었습니다.
	   히어로는 z-index:-1 이라 쌓임 맥락 없이도 항상 뒤에 그려지므로
	   z-index 없이 배경색만으로 가려집니다. */
	position:relative;
}

/* 109. 푸터에도 같은 처리 -------------------------------------------------
   히어로는 position:sticky; top:0 으로 컨테이닝 블록(.wrapper, 높이 4439px)
   끝까지 화면 상단에 붙어 있습니다. 계측상 #footer 도 .wrapper 안에 있고
   배경이 rgba(0,0,0,0) 이라, 페이지 하단까지 내려가면 푸터 뒤로도 히어로가
   비칠 수 있습니다. (모바일은 Phase 30 에서 이미 처리했고, 여기서는 화면
   폭과 무관하게 적용합니다.) */
#footer{
	background-color:#ffffff;
	position:relative;   /* z-index 는 주지 않습니다 (위 #wrap 주석 참고) */
}


/* ==========================================================================
   Phase 58 - 배경을 "장비" 기준으로 우측 정렬
   ========================================================================== */

/* 110. 이미지 오른쪽 빈 여백만큼 더 밀어내기 ------------------------------
   배경 이미지의 실제 내용 위치를 픽셀로 계측했습니다(캔버스 스캔, 밝기<80):
     xgolf_nex_bg.jpg  장비 x 811~1219 / 1360   (59.6% ~ 89.6%)
     xgolf_eye_bg.jpg  장비 x 811~1216 / 1360   (59.6% ~ 89.4%)
     xgolf_zes_bg.jpg  장비 x 813~1219 / 1360   (59.8% ~ 89.6%)
     -> 세 이미지 모두 오른쪽에 약 140px, 즉 폭의 10.3% 가 빈 흰 여백입니다.
   그래서 background-position:right 로 붙여도 장비는 화면 오른쪽 끝에서
   그 여백만큼(렌더 폭의 10.3%) 안쪽으로 들어와 있었습니다.

   -> 그 여백만큼 이미지를 오른쪽 밖으로 더 밀어 장비 오른쪽 끝을
      배너 오른쪽 끝에 맞춥니다.
      cover 상태에서 렌더 폭 = 배너 높이 x (1360/250) = 높이 x 5.44 이므로
        밀어낼 거리 = 0.103 x 5.44 x 높이 = 높이 x 0.56
      배너 높이가 페이지마다 100~129px 로 흔들리면 이 값도 흔들리므로,
      min-height 로 118px 이상으로 모아 두고 66px 을 씁니다.
        높이 118 -> 렌더 폭 642, 필요한 거리 66px  (정확히 일치)
        높이 129 -> 렌더 폭 702, 필요한 거리 72px  (흰 여백 6px 남음)
      장비가 잘리지 않는 쪽으로 값을 잡았습니다.

   결과(390px, 높이 118 기준): 장비가 화면 x 197~389 에 놓입니다. */
@media (max-width:991px){
	.xgolf .page-header{
		min-height:118px;
		background-position:left center, right -66px top 50% !important;
	}
}

/* 111. 장비가 흰색에 씻겨 흐려지던 것 완화 -------------------------------
   110번으로 장비를 오른쪽 끝까지 밀었더니(장비 x 197~388),
   107번에서 제목 보호용으로 94% 까지 넓혀 둔 흰 그라데이션이 장비 거의
   전체를 덮어 색이 빠져 보였습니다.
   -> 투명해지는 지점을 94% -> 84% 로 당기고 중간 농도도 낮춰,
      제목이 놓이는 왼쪽 절반은 계속 보호하면서 장비 오른쪽은 원래 색이
      살아나게 합니다. */
@media (max-width:991px){
	.xgolf.nex .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.90) 34%,rgba(255,255,255,.58) 52%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 84%),
			url('/assets/images/xgolf/images/xgolf_nex_bg.jpg') !important;
	}
	.xgolf.eye .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.90) 34%,rgba(255,255,255,.58) 52%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 84%),
			url('/assets/images/xgolf/images/xgolf_eye_bg.jpg') !important;
	}
	.xgolf.zes .page-header{
		background-image:
			linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.90) 34%,rgba(255,255,255,.58) 52%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 84%),
			url('/assets/images/xgolf/images/xgolf_zes_bg.jpg') !important;
	}
}


/* 112. 장비를 더 오른쪽으로 (잘림 허용) ----------------------------------
   110번은 "장비가 잘리지 않는" 선인 66px 을 썼습니다.
   장비 오른쪽이 조금 잘려도 되므로 90px 으로 더 밀어 화면 밖으로
   흘러나가게 합니다.
     배너 높이 118 (eye)  렌더 폭 642  ->  장비 화면 x 217~408 (오른쪽 18px 잘림)
     배너 높이 125 (nex)  렌더 폭 680  ->  장비 화면 x 201~404 (오른쪽 14px 잘림)
   장비 왼쪽이 오른쪽으로 20px 가량 물러나므로 제목이 얹히는 구간도
   그만큼 줄어 가독성에도 유리합니다. */
@media (max-width:991px){
	.xgolf .page-header{
		background-position:left center, right -90px top 50% !important;
	}
}


/* ==========================================================================
   Phase 60 - 배너가 오른쪽으로 안 늘어나던 진짜 원인
   ========================================================================== */

/* 113. width:100% 가 음수 마진을 무력화하고 있었습니다 --------------------
   "우측 마진이 24px 인데 오른쪽이 많이 비어 보인다" 는 지적을 픽셀로
   확인했더니 배너 배경이 화면 끝까지 오지 않았습니다.
     배너 영역 열별 최소 밝기 스캔(390px):
       x   0~ 19  = 254 (내용 없음)
       x  20~359  = 0   (배경/장비)
       x 380~389  = 255 (내용 없음)
   DOM 계측:
     div.page-header  rect 0~342  w=342  width=342px  margin=0 -24px
     div.container    rect 0~390  padding 0 24px      (콘텐츠 폭 342)
   원인은 테마의 bootstrap.min.css:171
     .page-header{width:100%; margin:40px 0; color:#000;}
   width:100% + box-sizing:border-box 이면 폭이 부모의 342px 로 고정되어,
   좌우 -24px 마진이 왼쪽으로 밀기만 하고 폭을 넓히지 못합니다.
   그래서 왼쪽은 0 까지 갔지만 오른쪽은 342 에서 멈춰 48px 이 비었습니다.

   -> width 를 auto 로 되돌리면 (342 + 24 + 24) = 390 으로 계산되어
      배너가 화면 끝까지 채워집니다. */
@media (max-width:991px){
	.xgolf .page-header{
		width:auto !important;
	}
}


/* ==========================================================================
   Phase 61 - 메인 캐러셀 화살표 클릭 불가
   ========================================================================== */

/* 114. 문구 블록이 화살표를 덮고 있었습니다 -------------------------------
   클릭 가능한 요소마다 중심점에서 elementFromPoint 로 확인했습니다.
     /kor/main (390px)  검사 7개 중 2개 막힘
       X a.left.carousel-control   (25,1256)
       X a.right.carousel-control  (365,1256)
         둘 다 가로막은 것 = div.msg 안의 <p>  (rect 24,1161 342x167)
     /eng/main 도 동일, 데스크톱(1440)은 막힘 0개
   .msg 는 z-index:10 이라 화살표(z-index 없음)보다 위에 있고, 문구 블록이
   화면 전체 폭(0~390)을 차지해 좌우 끝의 화살표까지 덮었습니다.

   -> 문구 블록 자체는 클릭을 받지 않게 하고(pointer-events:none),
      그 안의 링크/버튼만 다시 받도록 되돌립니다.
      이러면 글자는 그대로 위에 보이면서, 좌우 끝을 누르면 아래의
      화살표가 눌립니다. 쌓임 순서를 건드리지 않아 보이는 모습은 그대로입니다. */
@media (max-width:991px){
	#wrap.main .msgbox,
	#wrap.main .msg{
		pointer-events:none;
	}
	#wrap.main .msg a,
	#wrap.main .msg button,
	#wrap.main .msg .btn,
	#wrap.main .msg [onclick]{
		pointer-events:auto;
	}
	/* 화살표가 확실히 눌리도록 터치 영역도 보장 */
	#wrap.main .carousel-control{
		pointer-events:auto;
	}
}


/* ==========================================================================
   Phase 62 - 메인 검은 필터 (.mask 가 화면 전체를 덮음)
   ========================================================================== */

/* 115. 마스크의 기준 박스가 잘못 잡혀 있었습니다 --------------------------
   계측:
     모바일(390)  .mask  rect 0,101  390x2310   bg rgb(11,18,25) opacity .65
                        position:absolute  z-index:1  parent=div.msgbox
                        (그런데 .msgbox 실제 크기는 390x327)
     데스크톱      .mask  rect 720,669  540x274  = .msgbox 크기와 일치
   .mask 는 absolute + inset 0 으로 부모를 채우는 어두운 판인데,
   모바일에서는 부모 .msgbox 가 positioned 가 아니어서 기준이 위쪽
   .item(390x2310) 으로 올라갔습니다. 그 결과 메인 본문 전체가
   검은 반투명 판에 덮여 "검은 필터" 처럼 보였습니다.

   -> .msgbox 를 기준 박스로 만들어 마스크가 문구 상자 크기(390x327)
      안에만 그려지게 합니다. 데스크톱 동작과 같아집니다. */
@media (max-width:991px){
	/* 아래 !important 는 이 파일 앞부분(약 908행)의
	   `.main .msgbox{position:static !important;}` 를 되돌리기 위한 것입니다.
	   그때는 .item 이 화면 높이 정도라 마스크가 슬라이드를 덮는 게
	   자연스러웠지만, 지금 .item 은 2310px(메인 본문 전체)라
	   화면 전체가 검게 덮입니다. 데스크톱과 같이 문구 상자에만 겁니다. */
	#wrap.main .msgbox,
	.main .msgbox{
		position:relative !important;
	}
	/* 마스크는 문구 뒤에만, 클릭도 통과 */
	#wrap.main .mask{
		pointer-events:none !important;
		z-index:1;
	}
}


/* ==========================================================================
   Phase 64 - 비교표 아래 안내 문구 정렬
   ========================================================================== */

/* 116. "※ The product specifications are subject to change..." ------------
   계측(/eng/xgolf/xgolf_nex, #product 탭):
     390px   탭 패널 24~366 | 카드영역 24~366 | 문구 24~366
             문구 text-align=right,  margin-top=2px,  높이 40px(2줄)
     1440px  표 220~1220     | 문구 220~1220,  text-align=right
   박스 폭은 본문과 같은데 글자만 오른쪽 정렬이라 시작선이 어긋나 보이고,
   위 여백이 2px(카드 아래 여백 4px 포함 6px)뿐이라 카드에 붙어 있었습니다.

   -> 모바일에서 본문과 같은 왼쪽 기준선(24px)에 맞추고 위 여백을 줍니다.
      마크업의 .text-right 클래스는 그대로 두고 CSS 로만 덮습니다.
      데스크톱은 한 줄로 떨어져 원래 의도(표 우측 하단 주석)가 살아 있어
      건드리지 않습니다. */
@media (max-width:991px){
	#wrap .footnote,
	#wrap small.footnote,
	#wrap .footnote.text-right{
		display:block !important;
		text-align:left !important;
		margin-top:12px !important;
		margin-bottom:0 !important;
		padding-left:0 !important;
		padding-right:0 !important;
		line-height:1.5 !important;
		color:#7b848d !important;
	}
	/* 카드/표 바로 아래에 오는 경우 간격을 조금 더 */
	#wrap .rt-cards + .footnote,
	#wrap table + .footnote{
		margin-top:14px !important;
	}
}


/* ==========================================================================
   Phase 65 - 세로 리듬 정규화 (텍스트 / 표 / 이미지 간격)
   ========================================================================== */

/* 117. 간격이 페이지마다 제각각이던 문제 ----------------------------------
   계측(390px, 블록 사이 세로 간격 히스토그램):
     xgolf_nex  5·10·20·50·6·12·16·32·48·68px   과한 여백 3건(68/521/85)
     xgreen     20·8·10·27·92·15·72·83px        과한 여백 4건(83/72/92/92)
     overview   15·20·25·28·49·98·121px         과한 여백 2건(98/121)
     point      6·14·20·135px                   과한 여백 1건(135)
     p 마진 = 0/0 (nex·point)   img 마진 = 0
   즉 문단 사이 간격이 아예 없고, 값이 5~135px 로 난립했습니다.

   벤치마크(사이트 CSS 직접 집계, 9곳):
     margin-bottom  8·16·24px 계열 (1rem / .5rem / 1.5rem)
                    Rapsodo 8·16·24·40 / Foresight 1rem·.5rem·1.5rem
                    FullSwing .8rem(12.8)·1.6rem(25.6)·2.4rem(38.4)
     gap            8·12·16·24·32px (Rapsodo, Stripe)
     섹션 상하 패딩  24·32·40·48px 주류 (큰 섹션 80~100)
     line-height    1.5 주류
   -> 8의 배수 소수 집합으로 수렴합니다. 같은 원칙으로 정리합니다.
      본문 12 / 목록 16 / 이미지·표·카드 20 / 제목 위 32·아래 12 / 구분선 32 */
@media (max-width:991px){

	/* ---- 문단: 간격이 0 이라 글이 붙어 보였습니다 ---- */
	/* 주의: margin 축약형을 쓰면 mt-2 같은 위 여백 유틸리티까지 지워집니다.
	   실제로 xgreen 에서 이미지와 캡션(p.mt-2) 간격이 0px 이 되었습니다.
	   아래 여백만 지정합니다. */
	#wrap p{margin-bottom:12px !important;}
	#wrap p:last-child{margin-bottom:0 !important;}
	#wrap .rt-card p:last-child{margin-bottom:0 !important;}

	/* ---- 목록 ---- */
	#wrap ul:not(.nav):not(.breadcrumb):not(.dropdown-menu),
	#wrap ol:not(.nav):not(.breadcrumb){
		margin:0 0 16px !important;
	}
	#wrap ul:not(.nav):not(.breadcrumb) li + li,
	#wrap ol:not(.nav):not(.breadcrumb) li + li{
		margin-top:4px;
	}

	/* ---- 제목: 위는 넉넉히, 아래는 짧게 (내용과 묶여 보이도록) ---- */
	#wrap h2{margin:32px 0 12px !important;}
	#wrap h3{margin:32px 0 12px !important;}
	#wrap h4{margin:24px 0 8px  !important;}
	#wrap h5{margin:24px 0 8px  !important;}
	#wrap h6{margin:20px 0 8px  !important;}
	/* 블록 첫 요소면 위 여백 제거 (섹션 시작에서 과해지는 것 방지) */
	#wrap h2:first-child, #wrap h3:first-child,
	#wrap h4:first-child, #wrap h5:first-child,
	#wrap h6:first-child{margin-top:0 !important;}

	/* ---- 이미지 ---- */
	#wrap img.img-responsive{
		display:block;
		margin-bottom:20px !important;
	}
	#wrap .thumbnail img{margin-bottom:0 !important;}
	#wrap a > img.img-responsive{margin-bottom:0 !important;}

	/* ---- 표 / 카드 / 썸네일 ---- */
	#wrap table{margin-bottom:20px !important;}
	#wrap .rt-cards{margin-bottom:20px !important;}
	#wrap .thumbnail{margin-bottom:20px !important;}
	#wrap .panel{margin-bottom:20px !important;}

	/* ---- 구분선 ---- */
	#wrap hr{margin:32px 0 !important;}

	/* ---- 행 자체의 잉여 여백 제거 (열 마진과 이중으로 쌓이던 것) ---- */
	#wrap .row{margin-bottom:0 !important;}
}

/* 118. 이미지와 캡션이 붙던 문제 / 히어로 안 카드 ------------------------
   65번 적용 후 재계측:
     xgreen  img#image2-1 -> p.mt-2  간격 0px  (9건)
   p 에 margin 축약형을 써서 .mt-2 의 위 여백까지 없앤 것이 원인이라
   위에서 margin-bottom 만 지정하도록 고쳤습니다. 여기서는 이미지와
   바로 뒤 캡션 사이에 최소 간격을 보장합니다.
   또 프랜차이즈 카드처럼 #wrap 밖(.section-hero)에 있는 본문에도
   같은 문단 리듬을 적용합니다. */
@media (max-width:991px){
	#wrap img + p,
	#wrap a + p,
	#wrap .trans-img + p{
		margin-top:8px !important;
	}
	/* 히어로 섹션 안의 본문도 같은 리듬으로 */
	.section-hero .caption p,
	.section-hero .thumbnail p{
		margin-bottom:12px !important;
	}
	.section-hero .caption p:last-child,
	.section-hero .thumbnail p:last-child{
		margin-bottom:0 !important;
	}
}


/* ==========================================================================
   Phase 66 - 본문 이미지가 텍스트에 붙는 문제 (글로벌 네트워크 등)
   ========================================================================== */

/* 119. 클래스 없는 <img> 가 여백을 못 받고 있었습니다 --------------------
   계측(/kor/company/global, 390px):
     [0] img  342x239  y 763~1003
         margin=0px  display=inline
         부모 div.col-md-6
         바로 위 p 와 간격 = 0px      <<< 텍스트에 붙음
     [1] img.img-responsive  margin=0 0 20px  (65번 규칙 적용됨)
   65번에서 이미지 여백을 `img.img-responsive` 로 한정했는데, 본문에는
   클래스 없이 그냥 <img> 로 들어간 것들이 있습니다. 이들은 인라인이라
   위아래 여백이 전혀 없어 문단과 맞닿았습니다.

   -> 본문 컬럼(col-*)에 바로 놓인 이미지는 블록으로 바꾸고 위 16 / 아래 20
      여백을 줍니다. 링크·썸네일·카드 안의 이미지는 각자 규칙이 있으므로
      직계 자식(>)으로만 한정해 건드리지 않습니다. */
@media (max-width:991px){
	#wrap [class*="col-md-"] > img,
	#wrap [class*="col-sm-"] > img,
	#wrap [class*="col-xs-"] > img{
		display:block;
		max-width:100%;
		height:auto;
		margin:16px 0 20px !important;
	}
	/* (제거) 처음에 "컬럼의 첫 요소면 위 여백 불필요" 로 :first-child 를
	   예외 처리했는데, 글로벌 네트워크의 지도 이미지는 자기 컬럼의 첫
	   요소이면서 바로 위 문단은 '다른 컬럼'에 있었습니다. 그래서 예외가
	   걸려 다시 0px 로 붙었습니다(재계측에서 확인).
	   부모에 세로 패딩이 없으면 위 여백은 자연스럽게 상쇄되므로
	   예외 없이 항상 주는 편이 안전합니다. */
	/* 문단 바로 뒤 / 제목 바로 뒤에 오는 이미지도 동일하게 */
	#wrap p + img,
	#wrap ul + img,
	#wrap h2 + img, #wrap h3 + img,
	#wrap h4 + img, #wrap h5 + img{
		display:block;
		margin-top:16px !important;
	}
}


/* ==========================================================================
   Phase 67 - 팝업 닫기 버튼 크기
   ========================================================================== */

/* 120. 닫기 버튼이 커 보이던 문제 -----------------------------------------
   계측(390px):
     메인 팝업 닫기   button.btn.btn-default.btn-xs   72 x 44
     이미지 팝업 X    .ui-dialog-titlebar-close       44 x 44
   둘 다 터치 타깃 44px 기준(Phase 15)에 맞춰 키운 값입니다.
   시각적으로 과해 보인다는 지적에 따라 줄이되, 손가락으로 누르기에는
   충분한 36~38px 선을 유지합니다. */
@media (max-width:991px){
	#popupModal .modal-footer .btn,
	#popupModal2 .modal-footer .btn{
		min-height:36px !important;
		height:36px !important;
		padding:0 14px !important;
		font-size:13px !important;
		border-radius:var(--xg-pill) !important;
	}
	#popupModal .modal-footer,
	#popupModal2 .modal-footer{
		padding:8px 14px !important;
	}

	/* 이미지 팝업의 X */
	.ui-dialog .ui-dialog-titlebar-close{
		width:38px !important;
		height:38px !important;
		min-width:0;
		min-height:0;
		margin-top:-19px !important;
	}
	.ui-dialog .ui-dialog-titlebar-close::before{font-size:24px !important;}
	.ui-dialog .ui-dialog-titlebar{padding-right:46px !important;}
}

@media (max-width:360px){
	#popupModal .modal-footer .btn{padding:0 12px !important; font-size:12.5px !important;}
}


/* ==========================================================================
   Phase 68 - 어색한 개행 (데스크톱용 <br>)
   ========================================================================== */

/* 121. 원인은 word-break 가 아니라 마크업의 <br> 였습니다 ----------------
   계측(390px):
     body / p / li / h3 / td  모두 word-break=keep-all, overflow-wrap=break-word
       -> 한국어 단어가 중간에서 쪼개지는 문제는 이미 없습니다.
     문단 안의 <br> 개수:  point 10개,  overview 1개,  xgreen 1개
   이 <br> 들은 데스크톱 열 너비(약 500~1000px)에 맞춰 넣은 것이라,
   390px 에서는 엉뚱한 자리에서 줄이 끊겨 한 줄이 두세 글자만 남는 식으로
   어색해집니다.

   -> 모바일에서는 본문 문단 안의 <br> 를 무시해 자연스럽게 흐르게 합니다.
      주소(address)·표(td)·각주(.footnote)·제목은 줄바꿈이 의미를 갖는
      경우가 많아 그대로 둡니다. */
@media (max-width:991px){
	#wrap p > br,
	#wrap .caption p > br,
	#wrap .thumbnail p > br,
	.section-hero .caption p > br{
		display:none;
	}
}


/* ==========================================================================
   Phase 69 - 1:1 문의하기 폼 모바일 재구성
   ========================================================================== */

/* 122. 데스크톱 표 레이아웃이 그대로라 생긴 문제 --------------------------
   계측/관찰(390px, /kor/customer/inquire):
     폼이 table.bbs 안에 라벨(th) + 입력(td) 2열로 들어 있어
       - 라벨 열이 약 80px 를 먹고 입력 칸이 240px 로 좁아짐
       - placeholder 가 잘림 ("예) 02-1111-1111, 02111", "예) 신규 장비에 대한 안내를 받")
       - textarea rows=16 이라 화면 대부분을 차지
       - 동의 체크박스는 기본 크기, 제출 버튼도 작고 가운데 정렬
   -> 모바일에서는 라벨을 입력 위로 올리는 세로 스택으로 바꾸고,
      입력 요소를 48px / 16px / 라운드 10px 로 키웁니다.
      (16px 는 iOS 자동 확대 임계값)
      버튼은 폭 100% 알약형, 동의 체크박스는 탭하기 쉬운 카드형으로. */
@media (max-width:991px){

	/* ---- 표 → 세로 스택 ---- */
	#wrap table.bbs,
	#wrap table.bbs > tbody,
	#wrap table.bbs > tbody > tr,
	#wrap table.bbs > tbody > tr > th,
	#wrap table.bbs > tbody > tr > td{
		display:block !important;
		width:100% !important;
	}
	#wrap table.bbs{
		border:0 !important;
		margin:0 0 4px !important;
	}
	#wrap table.bbs > tbody > tr{
		margin:0 0 16px !important;
		border:0 !important;
	}
	#wrap table.bbs > tbody > tr > th{
		border:0 !important;
		background:transparent !important;
		padding:0 0 6px !important;
		text-align:left !important;
		font-size:13.5px !important;
		font-weight:600 !important;
		color:#5c646c !important;
		letter-spacing:0.01em;
	}
	#wrap table.bbs > tbody > tr > td{
		border:0 !important;
		padding:0 !important;
	}

	/* ---- 입력 요소 ---- */
	#wrap .form-control{
		width:100% !important;
		height:48px !important;
		min-height:48px !important;
		padding:0 14px !important;
		font-size:16px !important;
		line-height:normal !important;
		color:#1f2933 !important;
		background:#fff !important;
		border:1px solid #dde3e8 !important;
		border-radius:10px !important;
		box-shadow:none !important;
		transition:border-color var(--xg-dur) var(--xg-ease),
		           box-shadow var(--xg-dur) var(--xg-ease);
	}
	#wrap .form-control::placeholder{color:#9aa3ab !important;}
	#wrap .form-control:focus{
		border-color:#00963e !important;
		box-shadow:0 0 0 3px rgba(0,150,62,.15) !important;
		outline:none !important;
	}
	#wrap textarea.form-control{
		height:200px !important;
		min-height:200px !important;
		padding:12px 14px !important;
		line-height:1.6 !important;
		resize:vertical;
	}
	#wrap select.form-control{
		-webkit-appearance:none;
		appearance:none;
		padding-right:40px !important;
		background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235c646c' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
		background-repeat:no-repeat !important;
		background-position:right 14px center !important;
	}

	/* ---- 섹션 제목 ---- */
	#wrap h3.subtit{
		margin:28px 0 12px !important;
		padding:0 0 0 10px !important;
		border-left:3px solid #00963e;
		font-size:17px !important;
		font-weight:700 !important;
		line-height:1.3 !important;
		color:#1f2933 !important;
	}

	/* ---- 안내 배너 ---- */
	#wrap .alert{
		border:0 !important;
		border-radius:12px !important;
		padding:14px 16px !important;
		margin-bottom:20px !important;
		font-size:14px !important;
		line-height:1.6 !important;
		box-shadow:none !important;
	}
	#wrap .alert-warning{background:#f4f7fa !important; color:#4a5560 !important;}
	#wrap .alert-info{background:#e8f6ee !important; color:#0b6b36 !important;}

	/* ---- 동의 체크박스: 눌러야 할 영역을 카드로 ---- */
	#wrap .form-group .checkbox{margin:20px 0 !important;}
	#wrap .form-group .checkbox label{
		display:flex !important;
		align-items:center;
		gap:10px;
		width:100%;
		min-height:54px;
		margin:0 !important;
		padding:12px 14px !important;
		background:#f7f9fb;
		border:1px solid #e6ebf0;
		border-radius:12px;
		font-size:14.5px !important;
		color:#333 !important;
		cursor:pointer;
	}
	#wrap .form-group .checkbox input[type="checkbox"]{
		position:static !important;
		width:20px; height:20px;
		margin:0 !important;
		flex:0 0 auto;
		accent-color:#00963e;
	}

	/* ---- 제출 버튼 ---- */
	#wrap .text-center .btn-primary,
	#wrap button[type="submit"].btn-primary{
		display:block !important;
		width:100% !important;
		height:52px !important;
		min-height:52px !important;
		padding:0 !important;
		border-radius:var(--xg-pill) !important;
		font-size:16px !important;
		font-weight:700 !important;
		background:#00963e !important;
		border-color:#00963e !important;
		box-shadow:0 4px 14px rgba(0,150,62,.25) !important;
	}
	#wrap .text-center{margin-bottom:8px !important;}

	/* 셀렉트 옆에 남아 있는 부트스트랩 드롭다운 중복 UI 는 숨김 */
	#wrap .bbs .dropdown-toggle,
	#wrap .bbs .dropdown-menu{display:none !important;}
}

/* 123. 상단 안내문 -------------------------------------------------------
   페이지 설명이 .page-header 안의 h6 라 굵고 진하게 나와 제목과 무게가
   비슷했습니다. 본문 보조 텍스트로 낮춰 위계를 만듭니다. */
@media (max-width:991px){
	#wrap .company .page-header{
		margin:20px 0 8px !important;
		padding-bottom:0 !important;
		border-bottom:0 !important;
	}
	#wrap .company .page-header h1{
		margin:0 0 10px !important;
		font-size:24px !important;
		line-height:1.3 !important;
	}
	#wrap .company .page-header h6{
		margin:0 !important;
		font-size:14.5px !important;
		font-weight:400 !important;
		line-height:1.65 !important;
		color:#6b747d !important;
		word-break:keep-all;
	}
	/* 제출 버튼이 들어 있는 열의 좌우 패딩 때문에 24px 선과 어긋나던 것 보정 */
	#wrap form .text-center{
		padding-left:0 !important;
		padding-right:0 !important;
	}
}