@charset "utf-8";

/****************************************************************************************************************************************
모드별 컬러
*****************************************************************************************************************************************/
:root {
	/* 기본값은 라이트 테마로 초기화 */
	--body-bg: #fff;
	--color:#333;
	--secondary:#545454;

	--white-color:#fff;
	--black-color:#000;

	--red-color:#cc2124;
	--red-color-hover:#f2585c;
	--green-color:#2cd97d;
	--blue-color:#047aff;
	--gray-color:#999;
	--light-gray:#c8c8c8;
	--placeholder-color:#b0b6bf;

	--bg-layer1:#fff;
	--bg-layer2:#dadada;
	--bg-layer3:#eee;
	--red-bg:#cc2124;
	--red-bg-hover:rgba(204, 33, 36, 0.8);
	--red-border:#cc2124;
	--blue-bg:#2168cc;
	--green-bg:#1baa25;
	--th-bg:#74768d;
	--sport-bg:#f4f7fe;
	--sport-on-bg:#c9e7ff;

	--border1-color:#757575; 
	--border1-color-hover:#454545;
	--border2-color:#c1c1c1;
	--border3-color:#ddd;
	--board-sport:#d8dbe5;
	--board-sport-on:#4385f8;

	--border1-font:#757575;
	--border1-font-hover:#454545;
	--border2-font:#c1c1c1;  
}


/****************************************************************************************************************************************
공통부분
*****************************************************************************************************************************************/
body {font-size: 14px; font-weight: 400; color:var(--color); background: var(--body-bg);}
.contents {position: relative; margin:155px auto 0 auto; padding:0; width: 100%; text-align: center;}
.container {position: relative; margin:0 auto; padding:15px 15px; width: 1330px; text-align: center;}
.main-container {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center;}
.con-container {position: relative; margin:0 auto; padding:20px 15px; width: 1330px; text-align: center;}

/****************************************************************************************************************************************
header 시작
*****************************************************************************************************************************************/
header {position: fixed; top:0; left:0; right:0; z-index: 99; width: 100%; background: var(--bg-layer1);}


/****************************************************************************************************************************************
tnb 시작
*****************************************************************************************************************************************/
.tnb {position: relative; margin:0 auto; padding:0; width: 100%;}
.tnb-inner {position: relative; margin:0 auto; padding:0 15px; width: 1330px; height: 89px; display: flex; justify-content: space-between; align-items: center;}

/* logo */
.top-logo {position: relative; text-align: left;}
.top-logo > img {height:64px; cursor: pointer;}

/* before-btns */
.before-btns {display: flex; justify-content: flex-end; gap:10px;}
.before-btns >  button {margin:0; padding:8px 20px; min-width: 120px; font-size: 16px; font-weight: 600;}
.hd-login {color:var(--red-color); background: transparent; border:1px var(--red-border) solid; border-radius: 5px;}
.hd-join,
.hd-logout {color:var(--white-color); background: var(--red-bg); border:1px transparent solid; border-radius: 5px;}

/* after-tnb (로그인 시 유저정보 — 서버렌더 조건부라 항상 표시) */
.after-tnb {display: block; position: relative;}
ul.tnb-info {position: relative; display: flex; justify-content: flex-end; gap:10px; align-items: center;} 
ul.tnb-info > li {font-size:15px; font-weight: 500; color:var(--color);}
ul.tnb-info > li > b {font-size:15px; font-weight: 500;}
ul.tnb-info > li > span {margin-left:3px; font-size:15px; font-weight: 500; color:var(--blue-color);}
ul.tnb-info > li > button {margin:0; padding:5px 15px; font-weight: 600; border-radius:5px; cursor:pointer;}
/* 충전/환전/포인트전환/내프로필 = 회색버튼(로그아웃 hd-logout 은 빨강 유지) */
ul.tnb-info > li > button.hd-btn:not(.hd-logout) {color:var(--white-color); background:#5f6b7a; border:1px transparent solid;}
ul.tnb-info > li.tnb-message {cursor: pointer;}
/* 로그아웃 아이콘은 데스크톱에선 숨김(텍스트만), 모바일에서 아이콘 노출 */
.hd-logout .lo-ico {display:none;}
/* 모바일 전용 계정 액션(드로어) — 데스크톱 숨김 */
.mo-user-actions {display:none;}

@media (hover: hover) and (pointer: fine) {
	.hd-login:hover {color:var(--red-color-hover);}
	.hd-join:hover,
	.hd-logout:hover {background: var(--red-bg-hover);}

	ul.tnb-info > li.tnb-message:hover > span {text-decoration: underline;}
}

/****************************************************************************************************************************************
nav 시작
*****************************************************************************************************************************************/
.nav {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center; background: var(--red-bg);}
.nav-inner {position: relative; margin:0 auto; padding:0 15px; width: 1330px; height: 100%; text-align: center;}

ul.main-menu {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content:space-between; align-items: center;}
ul.main-menu > li {position: relative; margin:0; padding:0;}
ul.main-menu > li > a {position: relative; display: block; width: 100%; line-height: 66px; font-size: 18px; font-weight: 500; color: var(--white-color);}
ul.main-menu > li > a::before {content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 3px; background: var(--bg-layer1);}
ul.main-menu > li > a:hover {opacity: 0.6;}
ul.main-menu > li > a:hover::before {z-index: 1;}	
ul.main-menu > li.active > a {color:var(--white-color);}
ul.main-menu > li.active > a::before {z-index: 1; background: var(--bg-layer1);}	

ul.sub-menu {display: none; position: absolute; top:66px; left:-16px; z-index: 9999; margin: 0 auto; padding-top:10px; width:150px; text-align: center;}
ul.sub-menu::after {content: ""; position: absolute; top: 0; left: 43%; border: 5px solid transparent; border-bottom-color: #b21a1d;}
ul.sub-menu > li {display: block; float: none; width:100%; line-height: 35px;}
ul.sub-menu > li > a {display: block; width:100%; line-height:45px; font-weight: 500; color:var(--white-color); background:#b21a1d; border-bottom: 1px solid #8a1518;}
ul.sub-menu > li > a:hover,
ul.sub-menu > li > a.active {background: var(--red-bg);}

ul.main-menu > li:hover ul.sub-menu {display: block;}

@media (hover: hover) and (pointer: fine) {
	ul.main-menu > li > a:hover {opacity: 0.6;}
	ul.main-menu > li > a:hover::before {z-index: 1;}	
}

/* pc일때 hid */
.mo-bar {display: none;}

/****************************************************************************************************************************************
footer 시작
*****************************************************************************************************************************************/
footer {position:relative; margin:0 auto; padding:0; width: 100%; background: var(--bg-layer1);}
.ftTop-inner {position: relative; margin:0 auto; padding:0 15px; width: 100%; text-align: center; border-top:1px #eee solid; border-bottom:1px #eee solid; }
.ft-inner {position: relative; margin:0 auto; padding:0 15px; width: 1330px; height: 100%; text-align: center;}

/* ft-brand */
.ft-brand {position: relative; margin: 0 auto; padding:23px 15px; width: 1330px; overflow: hidden;}
.ft-brand > .swiper-wrapper {transition-timing-function: linear !important;}

/* ft-bottom */
.ft-bottom {position: relative; margin:0; padding:30px 0; width: 100%; display: flex; justify-content: center;}
.ft-info {position: relative; flex:2; padding-right:50px; display: flex; flex-direction: column; align-items: flex-start;}
.ft-info > img {width: 120px;}
.ft-info > p {margin:30px auto 0 auto; text-align: left; color:var(--secondary)}

.ft-bottom dl {position: relative; flex: 1;}
.ft-bottom dt {position: relative; margin-bottom:15px; padding-bottom:10px; font-size: 15px; font-weight: bold; text-align: left;}
.ft-bottom dt::after {content:''; display: block; position: absolute; left: 0; bottom: 0; z-index: 1; width: 40px; height: 4px; background: #ff9294;}
.ft-bottom dd {line-height:1.7; font-weight: 500; color:var(--secondary); text-align: left; cursor: pointer;}
.ft-bottom dd > a {display:block; margin-bottom: 10px; padding:5px 5px 5px 15px; width: 100%; font-size: 15px; font-weight: 600; color:var(--white-color); border-radius: 5px;}
.ft-bottom dd > a > i {margin-right:3px;}
.sns-tel {background: #0da2f5;}
.sns-kakao {background: #ffa91f;}
.sns-facebook {background: #0078ff;}

.ft-copyright {position: relative; margin:0 auto; padding:15px 0; width: 100%; text-align: center; font-weight: 500; color: var(--color);}

@media (hover: hover) and (pointer: fine) {
  .ft-bottom dd:hover {color:var(--black-color);}
  .ft-menu > dl.ft-sns > dd.ft-sns-list > a:hover {background: var(--bg-layer2-hover);}
}

/* 모바일 ft 메뉴 */
.mo-menuWrap {display: none;}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1360px) {
	.tnb-inner,
	.nav-inner,
	.container,
	.con-container,
	.ft-inner,
	.ft-brand {width: 100%;}  
}/* 미디어쿼리문 끝 */

@media (max-width:992px) {
	/* nav */
    ul.main-menu > li > a {font-size: 16px;}

	/* footer */
	.ft-info {padding-right:30px;}
	.ft-info > img {width: 100px;}
	.ft-info > p {margin:10px 0 auto 0; font-size: 12px;}
	
	.ft-bottom dl {flex:1.5;}
	.ft-bottom dd > a {margin-bottom: 5px; padding: 5px 5px 5px 10px; font-size: 13px;}
}/* 미디어쿼리문 끝 */


@media (max-width:797px) {
	header {position: relative; z-index: unset;}
	/* tnb */
	.tnb {position:fixed; left:0; right:0; top:0; width: 100%; z-index:999; background: var(--bg-layer1); box-shadow: 0 2px 8px rgba(0,0,0,0.15);}
	.tnb-inner {padding:0 5px; height: 50px;}
	.top-logo > img {height:40px;}

	.before-btns { gap:5px;}
	.before-btns >  button {padding:0 15px; min-width: auto; height: 30px; font-size: 14px;}

	/* nav */
	.nav {position:fixed; left:-100%; top:50px; z-index: 99; width: 100%; height:calc(100% - 50px); background: var(--bg-layer3); visibility: hidden; opacity: 0; transition: 0.2s;}
	.nav.active {left:0; width: 100%; visibility: visible; opacity: 1;}
	.nav-inner {padding: 10px 10px 64px 10px; width: 100%; height: 100%; overflow-y: auto;}


	ul.main-menu {flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:5px;}
	ul.main-menu > li {width: 100%;}
	ul.main-menu > li > a {padding:0 20px; line-height: 40px; text-align: left; font-size: 15px; color: var(--black-color); background: var(--bg-layer1); border-radius: 10px;}
	ul.main-menu > li.active > a {color: var(--white-color); background: var(--red-bg);}
	ul.main-menu > li.active > a::before {display: none;}
	ul.main-menu > li > a::before,
	ul.main-menu > li > a:hover::before,
	ul.main-menu > li > a.active::before {display: none;}
	ul.main-menu > li > a:hover {opacity:1;}
	
	ul.sub-menu {position: relative; top:unset; left:unset; z-index: unset; padding:unset; width: 100%;}
	ul.sub-menu::after {display: none;}
	ul.sub-menu > li > a {margin-top:5px; padding:0 20px; line-height: 40px; text-align: left; font-size: 15px; color: var(--white-color); background: var(--red-color-hover); border: none; border-radius: 10px;}


	/* contents */
	.contents {margin:50px auto 0 auto; padding-bottom:60px;}
	.con-container {padding: 0 10px;}

	/* footer */
	footer {display:none;}
	.mo-menuWrap {display: block; position: fixed; bottom:0; z-index: 999; margin:0; padding:0; width: 100%; background: var(--bg-layer1); box-shadow: 0 -2px 8px rgba(0,0,0,0.15);}
	ul.mo-menu {position: relative; margin:0; padding:10px 0; width: 100%; display: flex; justify-content: center; align-items: center;}
	ul.mo-menu > li {position: relative; padding:0; width:100%;}
	ul.mo-menu > li > a {margin:0 auto; padding:0; width:100%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;}

	ul.mo-menu > li > a > svg,
	ul.mo-menu > li > a > p {font-weight: 600; color:var(--secondary);}

	ul.mo-menu > li:hover > a > svg,
	ul.mo-menu > li:hover > a > p,
	ul.mo-menu > li.active > a > svg,
	ul.mo-menu > li.active > a > p {color:var(--red-color);}

	/* ===== 로그인 후 상단정보 최적화(잘림 방지) ===== */
	/* 로그인 시 로고 숨겨 정보/버튼 공간 확보 */
	.tnb-inner:has(.after-tnb) .top-logo {display:none;}
	.after-tnb {flex:1 1 auto; min-width:0;}
	/* 정보 한 줄 컴팩트 */
	ul.tnb-info {flex-wrap:nowrap; gap:5px; min-width:0; overflow:hidden; justify-content:flex-end; white-space:nowrap;}
	ul.tnb-info > li {font-size:12px;}
	ul.tnb-info > li > b,
	ul.tnb-info > li > span {font-size:12px;}
	/* 닉네임/보유금액은 길면 말줄임 */
	ul.tnb-info > li:nth-child(2) {min-width:0; overflow:hidden; text-overflow:ellipsis;}
	ul.tnb-info > li:has(#user-balance) {min-width:0; overflow:hidden;}
	ul.tnb-info > li:has(#user-balance) > span {display:inline-block; max-width:90px; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom;}
	/* 충전/환전 버튼 컴팩트 */
	ul.tnb-info > li.tnb-act > button {padding:5px 9px; font-size:12px;}
	/* 포인트전환/내프로필은 상단에서 숨기고 햄버거 메뉴로 이동 */
	ul.tnb-info > li.tnb-act-more {display:none;}
	/* 로그아웃: 빨강 아이콘, 항상 우측 노출 */
	li.tnb-logout {flex:0 0 auto; order:99;}
	.hd-logout {padding:6px 9px !important; border-radius:8px;}
	.hd-logout .lo-txt {display:none;}
	.hd-logout .lo-ico {display:inline-block; font-size:18px; line-height:1;}
	/* 햄버거 메뉴 상단의 계정 액션(포인트전환/내프로필) */
	.mo-user-actions {display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px 0; padding:0;}
	.mo-user-actions > li {width:100%;}
	.mo-user-actions > li > button {width:100%; padding:0; line-height:40px; font-size:15px; font-weight:600; color:var(--white-color); background:#5f6b7a; border:1px transparent solid; border-radius:10px; cursor:pointer;}

}/* 미디어쿼리문 끝 */