@charset "utf-8";

/****************************************************************************************************************************************
모드별 컬러
*****************************************************************************************************************************************/
:root {
	/* 기본 다크모드 */
	--body-bg: #0f212e;
	--color:#fff;
	--primary: #fff;
	--secondary:#b1bad3;
	--red-color:#fc3c3c;
	--blue-color:#1475e1;
	--green-color:#00e701;
	--darkgreen-color:#249c25;
	--orange-color:#f7931a;
	--darkOrange-color:#e15514;
	--purple-color:#b914e1;
	--lightPurple-color:#c92ce4;
	--black-color:#000;
	--placeholder-color:#3d5a6d;

	--bg-white:#fff;
	--bg-layer1:#0f212e;
	--bg-layer2:#1a2c38;	
	--bg-layer3:#213743;
	--bg-layer4:#2f4553; 
	--bg-layer4-hover:#3d5665;  
	--bg-layer5:#071d2a;
	--bg-layer6:#557086;	
	--bg-layer7:rgba(70, 88, 109, 0.8);

	--ft-bg:#1e2121;
	--caption-bg: rgba(0, 0, 0, 0.15);

	--board-1:#304a58;
	--board-2:#394a55;

	--intro-overlay-bg:#071d2a;

	/* ── Z-Index 레이어 시스템 ── */
	--z-alert:        100000;  /* SweetAlert2 (최상위) */
	--z-popup:         50000;  /* 로그인/인트로 팝업 */
	--z-game-popup:    20000;  /* 카지노 게임 팝업 */
	--z-fab:           10100;  /* FAB 버튼 (모바일) */
	--z-mobile-menu:   10050;  /* 모바일 하단 메뉴 */
	--z-bottom-sheet:  10000;  /* 배팅 카트 bottom sheet */
	--z-sidebar:        9000;  /* 모바일 사이드바 */
	--z-scroll-top:     5000;  /* 스크롤 맨위 버튼 */
	--z-tooltip:        3000;  /* 메뉴 툴팁 */
	--z-header:         1000;  /* 헤더 바 */

	/* floating-field 입력 폼 (auth-floating.css) — 다크 모드 */
	--border2-color: #4a5b6b;   /* input 테두리 */
	--border2-font: #8a9ba8;    /* 라벨 기본 색 + placeholder */
}

html[data-theme="light"] {
	--body-bg: #f4f4f4;
	--color:#171a1a;
	--primary: #171a1a;
	--secondary:#5f6d6d;
	--red-color:#fc3c3c;
	--blue-color:#1475e1;
	--green-color:#15803d;
	--darkgreen-color:#249c25;
	--orange-color:#f7931a;
	--darkOrange-color:#e15514;
	--purple-color:#b914e1;
	--black-color:#000;
	--placeholder-color:#b5b5b5;

	--bg-white:#fff;
	--bg-layer1:#f0f2f2;
	--bg-layer2:#f9f9f9;
	
	--bg-layer3:#ededed;
	--bg-layer4:#d2d2d2; 
	--bg-layer5:#f4f4f4;
	--bg-layer6:#d8d8d8;

	--ft-bg:#1e2121;
	--caption-bg: rgba(0, 0, 0, 0.15);

	--board-1:#dee1e1;
	--board-2:#dfe0e1;

	--intro-overlay-bg:#e0e0e0;

	/* floating-field 입력 폼 (auth-floating.css) — 라이트 모드 (ST02 톤 차용) */
	--border2-color: #c1c1c1;
	--border2-font: #757575;
}


/****************************************************************************************************************************************
공통 시작
*****************************************************************************************************************************************/
body {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%; background: var(--body-bg); color: var(--color); overflow-y: hidden;}

.light-img {display: none;}
.dark-img {display: inline-block;}
html[data-theme="dark"] .light-img {display: none;}
html[data-theme="dark"] .dark-img {display:inline-block;}

.page-con {position: relative; margin:0 auto; padding:0; width: 100%; height: calc(100% - 60px); overflow-y: auto;}
.container {position: relative; margin:0 auto; padding:15px 15px; width: 1280px;}

/* 초기 로드 시 트랜지션 비활성화 */
.no-transition,
.no-transition *,
.no-transition *::before,
.no-transition *::after {
    transition: none !important;
}

/****************************************************************************************************************************************
aside 시작
*****************************************************************************************************************************************/
.aside {position: fixed; top:0; left:0; width: 260px; height: 100%; background: var(--bg-layer1); transition: 0.2s;}
.left-inner {position: relative; margin:0; padding: 0; width: 100%; height: 100%; overflow-y: auto;}

/* left-hd */
.left-hd {position:relative; margin:0; padding:0 15px; width: 100%; height:60px; display: flex; gap:5px; align-items: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1);}
.icon-bar {position: relative; margin:0; padding:0 5px; height:36px; display: flex; justify-content: center; align-items: center; color:var(--secondary); background: none; border: none;}
.icon-bar > svg {font-size: 20px;}
.leftHd-btn {position: relative; margin: 0; padding:0 25px; height: 36px; border-radius: 8px; font-size: 16px; font-weight: 600; color: #fff; text-shadow: 0px 1px 2px rgba(0, 0, 0, .12), 0px 1px 3px rgba(0, 0, 0, .2);}
.btn-casino {background: url('../img/green-bg.png') center no-repeat; background-size: cover;}
.btn-sport {background: url('../img/default-bg.png') center no-repeat; background-size: cover;}

ul.main-menu {position: relative; margin:15px 15px 0 15px; padding:5px 0; width: calc(100% - 30px); display: flex; flex-direction: column; background: var(--bg-layer2); border-radius: 5px;}
ul.main-menu > li {position: relative; margin:0; padding:0;}
ul.main-menu > li.pcHid-menu {display: none;}
ul.main-menu > li.menu-tit {padding:15px 15px 5px 15px; width:100%; text-align: left; font-size: 15px; font-weight: 600; color:var(--secondary);}
ul.main-menu > li.menu-line {margin:15px 15px; padding:0; width:calc(100% - 30px); text-align: center; border-top:2px var(--bg-layer4) solid;}
ul.main-menu > li > a {position: relative; margin:2px auto; padding:0 10px 0 0; text-align: left; width: 100%; height: 40px; display: flex; align-items: center;}
ul.main-menu > li > a > img {margin:0 5px 0 10px; width: 22px;}

ul.main-menu > li > a.has-sub > svg {position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(180deg); z-index: 1; font-size: 16px; font-weight: 500; color: var(--secondary); transition: 0.2s;}
ul.main-menu > li.active > a.has-sub > svg {transform: translateY(-50%) rotate(360deg);}
ul.main-menu > li > a.has-sub::after {content: none;}

ul.sub-menu {display: none; position: relative; margin:0 0 0 18px; padding:0; width:calc(100% - 20px); transition: 0.2s;}
ul.sub-menu > li {position: relative; margin:0; padding:0; width:100%;}
ul.sub-menu > li > a {position: relative; display: block;margin:2px auto; padding:0 10px 0 0; text-align: left; width: 100%; height: 40px; display: flex; align-items: center;}

.menu-icon {position:relative; margin:0 auto; padding:0; width: 40px; text-align: center; color: var(--secondary);}

.menu-text {flex: 1; font-weight: 500; white-space: nowrap; transform: translateX(0); transition: opacity 0.2s, transform 0.2s;}
.menu-text.tooltip {position: absolute; z-index: var(--z-tooltip); padding: 0 15px; height: 40px; line-height: 40px; white-space: nowrap; color: #fff; background: var(--bg-layer7); border-radius: 5px;}
.menu-text.tooltip::before {content: ""; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); border-width: 10px; border-style: solid; border-color: transparent var(--bg-layer7) transparent transparent;}

ul.main-menu > li.active > a,
ul.sub-menu > li.active > a {background: var(--bg-layer4);}
ul.main-menu > li.active > a > .menu-text {color:var(--color); font-weight: 600;}

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

@media (hover: hover) and (pointer: fine) {
	.btn-sport:hover {background: url('../img/orange-bg.png') center no-repeat; background-size: cover;}

	ul.main-menu > li:hover > a,
	ul.sub-menu > li:hover > a {background: var(--bg-layer4);}
	ul.main-menu > li:hover > a > .menu-text {color:var(--color); font-weight: 600;}
}

/* mode-switcher */
.mode-switcher {position:relative; margin:10px auto; padding:0 15px; width: 100%; display: flex; justify-content:space-between; align-items: center; gap:10px; transform: translateX(0); transition: opacity 0.2s, transform 0.2s;}
.mode-switcher > button {margin:0 auto; padding:10px 10px; width: calc(100% / 2); font-weight: 600; color:var(--secondary); background: var(--bg-layer3); border-radius: 5px;}
.mode-switcher > button > svg {margin-right: 5px;}

.mode-switcher > button.active {color:var(--color);}
html[data-theme="light"] .mode-switcher > button.active {color:var(--color); background: var(--bg-layer6);}
html[data-theme="light"] .mode-switcher > button {background: var(--bg-layer6); color:#9c9c9c;}

@media (hover: hover) and (pointer: fine) {
	.mode-switcher > button:hover {filter: brightness(97%);}
	html[data-theme="light"] .mode-switcher > button:hover {color:var(--color);}
}

/* aside-active */
.aside.active {padding:0 5px; width: 60px;}
.aside.active .menu-text,
.aside.active ul.main-menu > li > a.has-sub::after,
.aside.active ul.main-menu > li > a.has-sub > svg,
.aside.active ul.main-menu > li.menu-tit,
.aside.active .mode-switcher {display: none;}

.aside.active .left-hd {padding:0; justify-content: center;}
.aside.active .icon-bar {margin:0 auto; width:100%; height: 60px; text-align: center;}
.aside.active .leftHd-btn {display: none;}

.aside.active ul.main-menu {margin:0; width: 100%; background: var(--bg-layer1); border-radius: 0;}
.aside.active ul.main-menu > li > a,
.aside.active ul.sub-menu > li > a {padding:0; width: 44px; height: 44px;}
.aside.active ul.main-menu > li > a > .menu-icon,
.aside.active ul.sub-menu > li > a > .menu-icon {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.aside.active ul.main-menu > li > a > .menu-icon > svg,
.aside.active ul.sub-menu > li > a > .menu-icon > svg {font-size: 18px;}
.aside.active ul.sub-menu > li:hover > a {border-radius: 5px;}

.aside.active ul.main-menu > li > a.menu-casino,
.aside.active ul.main-menu > li > a.menu-slot {background: url('../img/default-short.png') center no-repeat; background-size: cover; border-radius: 5px}

.aside.active ul.main-menu > li > a.menu-sport,
.aside.active ul.main-menu > li > a.menu-mini,
.aside.active ul.main-menu > li > a.menu-powerball,
.aside.active ul.main-menu > li > a.menu-holdem {background: url('../img/default-short2.png') center no-repeat; background-size: cover; border-radius: 5px}

.aside.active ul.main-menu > li > a.menu-casino > .menu-icon,
.aside.active ul.main-menu > li > a.menu-slot > .menu-icon,
.aside.active ul.main-menu > li > a.menu-sport > .menu-icon,
.aside.active ul.main-menu > li > a.menu-mini > .menu-icon,
.aside.active ul.main-menu > li > a.menu-powerball > .menu-icon,
.aside.active ul.main-menu > li > a.menu-holdem > .menu-icon {color:#fff; text-shadow: 0px 1px 2px rgba(0, 0, 0, .12), 0px 1px 3px rgba(0, 0, 0, .2);}

.aside.active ul.main-menu > li:hover > a {background: var(--bg-layer4); border-radius: 5px;}
.aside.active ul.main-menu > li:hover > a.menu-casino,
.aside.active ul.main-menu > li:hover > a.menu-slot,
.aside.active ul.main-menu > li:hover > a.menu-holdem {background: url('../img/green-short.png') center no-repeat; background-size: cover;}
.aside.active ul.main-menu > li:hover > a.menu-sport {background: url('../img/orange-short.png') center no-repeat; background-size: cover;}
.aside.active ul.main-menu > li:hover > a.menu-mini,
.aside.active ul.main-menu > li:hover > a.menu-powerball {background: url('../img/purple-short.png') center no-repeat; background-size: cover;}

.aside.active ul.sub-menu {margin:3px 0 0 0; width: 100%; border-left:unset;}

/****************************************************************************************************************************************
intro-popup 시작
*****************************************************************************************************************************************/
.intro-popup {display:none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: var(--z-popup); padding: 20px 20px; width: 100%; height: 100%; background: var(--intro-overlay-bg, #071d2a); overflow-y: auto;}
.intro-popup.active {display:block;}
.intro-inner {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); padding:0; width: 600px; max-height: calc(100vh - 40px);  display: flex; justify-content: center; flex-wrap: wrap; align-items: center; background: var(--body-bg); border-radius: 10px; overflow-y: auto;} 

.intro-closeBtn {position: absolute; right:20px; top:20px; z-index: 1;}
.intro-closeBtn > svg {font-size:18px; font-weight: 400; cursor: pointer;}



/* intro-wrap */
.intro-wrap {position: relative; margin:0 auto; padding:0; width: 100%;}

.intro-tit {position: relative; margin:0 auto 20px auto; padding:15px 25px; width: 100%; text-align: left; font-size:18px; font-weight: 600; background: var(--bg-layer2);}

/* 업체별 기본 추천인코드 안내 (Site:Brand:ReferralCode 설정 시에만 렌더링) — Default/W01/W04/W12 공통 */
.code-notice {position: relative; margin:-8px auto 14px; padding:0 25px; width: 100%; font-size:13px; line-height:1.6; color: var(--secondary);}
.code-notice > p {margin:0;}
.code-notice strong {font-weight:700; color: var(--orange-color);}

ul.intro-list {position: relative; margin:0 auto; padding:0 25px; width: 100%;}
ul.intro-list > li {position: relative; margin:10px auto; padding:0; width: 100%;}
ul.intro-list > li > label {display: block; margin:0 auto; padding:5px 0; width: 100%; text-align: left; font-weight: 600; color: var(--secondary);}
ul.intro-list > li > input {display:block; margin: 0 auto; padding:10px 10px; width: 100%; text-align: left; font-weight:600; color:var(--color); background: var(--bg-layer1); border:2px var(--bg-layer4) solid; border-radius: 5px;}
ul.intro-list > li > input::placeholder {color:var(--placeholder-color);}
html[data-theme="light"] ul.intro-list > li > input::placeholder {color:#a4a4a4;}
ul.intro-list > li > input:focus {border: 2px var(--bg-layer6) solid;}
ul.intro-list > li > select {display:block; margin: 0 auto; padding:10px 10px; width: 100%; text-align: left; font-weight:600; color:var(--color); background: var(--bg-layer1); border:2px var(--bg-layer4) solid; border-radius: 5px;}
ul.intro-list > li > select:invalid {color:var(--placeholder-color);}
html[data-theme="light"] ul.intro-list > li > select:invalid {color:#a4a4a4;}
ul.intro-list > li > select:focus {border: 2px var(--bg-layer6) solid;}
ul.intro-list > li > select > option {color:var(--color);}

ul.intro-list > li.check-list {display: flex; justify-content:space-between; align-items: center; gap:5px;}
ul.intro-list > li.check-list > input {width: 70%;}
ul.intro-list > li.check-list > button {margin:0; padding:0 15px; width: 30%; line-height: 40px; font-weight: 600; color:#fff; background: var(--blue-bg, #2168cc); border-radius: 5px;}

.intro-btns {position: relative; margin:0 auto; padding:0 25px 20px 25px; width: 100%;}
.intro-btns > button {margin: 5px auto; padding:12px 5px; width: 100%; text-align: center; font-weight: bold; border-radius: 5px; transition: 0.3 ease;}
.intro-login,
.go-join,
.ok-join {color:#fff; background:var(--blue-color);}
.intro-join,
.go-login {color:#fff; background:var(--bg-layer7);}

.intro-sns {position: relative; padding:0 25px 35px 25px; width: 100%; display: flex; justify-content: center; align-items: center; gap:10px;}
.intro-sns > a {position: relative; width:40px; height:40px; display: flex; justify-content: center; align-items: center; background: var(--bg-layer3); border: 1px var(--board-1) solid; border-radius: 5px;}
.intro-sns > a > i {font-size:20px; color:var(--secondary);}

.login-wrap,
.join-wrap,
.code-wrap {display: none;}

.login-wrap.active,
.join-wrap.active,
.code-wrap.active {display: block;}

@media (hover: hover) and (pointer: fine) {
	.intro-login:hover,
	.go-join:hover,
	.ok-join:hover,
	.intro-join:hover,
	.go-login:hover,
	ul.intro-list > li.check-list > button:hover {filter: brightness(130%);}

	html[data-theme="light"] .intro-login:hover,
	html[data-theme="light"] .go-join:hover,
	html[data-theme="light"] .ok-join:hover,
	html[data-theme="light"] .intro-join:hover,
	html[data-theme="light"] .go-login:hover,
	html[data-theme="light"] ul.intro-list > li.check-list > button:hover {filter: brightness(90%);}

	.intro-sns > a:hover {background:var(--bg-layer2);}
	.intro-sns > a:hover > i {color:var(--color);}
}

/****************************************************************************************************************************************
notice-popup 공지 팝업 (캐러셀)
*****************************************************************************************************************************************/
.notice-popup {display:none; position:fixed; inset:0; z-index:var(--z-popup); background:rgba(0,0,0,0.6); overflow-y:auto;}
.notice-popup.active {display:flex; justify-content:center; align-items:center;}

.notice-popup-inner {position:relative; width:500px; max-height:calc(100vh - 80px); background:var(--bg-layer2); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.4);}

/* 닫기 버튼 */
.notice-popup-close {position:absolute; right:12px; top:12px; z-index:2; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); border:none; border-radius:50%; color:#fff; font-size:14px; cursor:pointer; transition:background 0.2s;}
.notice-popup-close:hover {background:rgba(0,0,0,0.5);}

/* Swiper 컨테이너 — autoHeight 가 잡은 높이를 따르도록 flex-basis:auto (꽉 채움 X), 상한 초과 시 shrink */
.notice-popup-swiper {flex:0 1 auto; min-height:0; min-width:0; width:100%; overflow:hidden;}

/* 슬라이드 컨텐츠 */
.notice-popup-slide {padding:0;}
.notice-popup-title {margin:0; padding:18px 50px 18px 20px; font-size:16px; font-weight:600; color:var(--color); background:var(--bg-layer3); border-bottom:1px solid var(--bg-layer4);}
.notice-popup-body {padding:20px; min-height:240px; max-height:calc(100vh - 160px); overflow-y:auto;}
.notice-popup-image {margin-bottom:15px; text-align:center;}
.notice-popup-image img {max-width:100%; height:auto; border-radius:8px;}
.notice-popup-content {font-size:14px; line-height:1.7; color:var(--secondary); word-break:break-word; white-space:pre-wrap;}

/* Swiper 페이지네이션 */
.notice-popup-pagination {padding:10px 0; text-align:center;}
.notice-popup-pagination .swiper-pagination-bullet {width:8px; height:8px; margin:0 4px; background:var(--bg-layer4); opacity:1; transition:background 0.2s;}
.notice-popup-pagination .swiper-pagination-bullet-active {background:var(--blue-color);}

/* 하단 체크박스 + 닫기 */
.notice-popup-footer {display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-top:1px solid var(--bg-layer4); background:var(--bg-layer3);}
.notice-popup-check {display:flex; align-items:center; gap:6px; font-size:13px; color:var(--secondary); cursor:pointer;}
.notice-popup-check input[type="checkbox"] {width:16px; height:16px; accent-color:var(--blue-color); cursor:pointer;}
.notice-popup-close-btn {padding:6px 20px; font-size:13px; font-weight:600; color:#fff; background:var(--bg-layer4); border:none; border-radius:6px; cursor:pointer; transition:background 0.2s;}
.notice-popup-close-btn:hover {background:var(--bg-layer6);}

/* 모바일 반응형 — dvh: 모바일 브라우저 주소창/하단바 제외한 실제 뷰포트 */
@media screen and (max-width:767px) {
	.notice-popup-inner {width:92vw; max-height:85dvh;}
	.notice-popup-body {max-height:calc(85dvh - 120px); overflow-y:auto;}
}

/****************************************************************************************************************************************
row-popup 가로 일렬 모드 (SET_SYSTEM_OPEN.POPUP_SEPARATE='Y' + 데스크탑 ≥1280px)
- 5개 카드를 가로 균등 배치, 각 카드 독립 닫기
- 1280px 미만은 JS가 caroussel로 폴백 → 컨테이너는 display:none 유지
*****************************************************************************************************************************************/
.row-popup-container {display:none; position:fixed; inset:0; z-index:var(--z-popup); padding:60px 30px; pointer-events:none;}
.row-popup-container.active {display:flex; justify-content:center; align-items:center; gap:16px;}

.row-popup-card {flex:1 1 0; min-width:0; max-width:340px; max-height:calc(100vh - 120px); display:flex; flex-direction:column; background:var(--bg-layer2); border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.4); pointer-events:auto;}

.row-popup-card-header {display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--bg-layer3); border-bottom:1px solid var(--bg-layer4);}
.row-popup-card-title {margin:0; font-size:15px; font-weight:600; color:var(--color); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;}
.row-popup-card-close {flex-shrink:0; width:28px; height:28px; margin-left:8px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); border:none; border-radius:50%; color:#fff; font-size:18px; line-height:1; cursor:pointer; transition:background 0.2s;}
.row-popup-card-close:hover {background:rgba(0,0,0,0.5);}

.row-popup-card-body {flex:1; padding:16px; overflow-y:auto;}
.row-popup-card-image {margin-bottom:12px; text-align:center;}
.row-popup-card-image img {max-width:100%; height:auto; border-radius:6px;}
.row-popup-card-content {font-size:13px; line-height:1.6; color:var(--secondary); word-break:break-word; white-space:pre-wrap;}

.row-popup-card-footer {padding:10px 16px; background:var(--bg-layer3); border-top:1px solid var(--bg-layer4);}
.row-popup-card-dontshow {display:flex; align-items:center; gap:6px; font-size:12px; color:var(--secondary); cursor:pointer;}
.row-popup-card-dontshow input[type="checkbox"] {width:14px; height:14px; accent-color:var(--blue-color); cursor:pointer;}

/* 1280px 미만은 JS가 캐러셀로 폴백하지만 CSS 안전망 */
@media screen and (max-width:1279px) {
	.row-popup-container {display:none !important;}
}

/****************************************************************************************************************************************
right-con 시작
*****************************************************************************************************************************************/
.right-con {position: relative; margin:0 0 0 260px; padding:0; width: calc(100% - 260px); height: 100%; display: flex; flex-direction: column; background:var(--bg-layer2); overflow: hidden;}
.right-con.active {margin: 0 0 0 60px; width: calc(100% - 60px);}
.right-con hr {position: relative; width:100%;}

/* right-header */
.right-header {position: relative; z-index: var(--z-header); margin:0 auto; padding:0; width: 100%; height: 60px; background:var(--bg-layer2); box-shadow: #0003 0 4px 6px -1px, #0000001f 0 2px 4px -1px;}

.hd-inner {position: relative; margin:0 auto; padding: 0 15px; max-width: 1280px; height: 100%; display: flex; justify-content: space-between; align-items: center;}

.hd-logo > img {max-width:125px; max-height:48px; width:auto; height:auto; cursor: pointer;}

/* right-hd */
.right-hd {position: relative; display: flex; justify-content:flex-end; align-items: center; gap:8px;}

.before-btns {display: flex; justify-content: center; align-items: center; gap:10px; padding-right:10px;}
.hd-btn {margin:0 auto; padding:0 20px; height: 40px; display: flex; justify-content: center; align-items: center; font-size:16px; font-weight:bold; border-radius: 10px;}
.hd-login {color:#fff; background:var(--bg-layer7);}
.hd-join {color:#fff; background:var(--blue-color);}

.after-info {position: relative; display:flex; justify-content: flex-end; align-items: center; gap: 5px;}
ul.tnb-info {position: relative; height: 40px; display: flex; justify-content: center; align-items: center; gap:5px;}
ul.tnb-info > li,
ul.tnb-info > li > font {font-weight: 500;}

ul.tnb-info > li > svg {display:inline-block; margin:0 5px 0 10px;}
ul.tnb-info > li > span {display:inline-block; margin:0 5px 0 0; font-weight: 500;}
ul.tnb-info > li > button {margin:0; padding:5px 10px; color:#fff; background:var(--bg-layer7); border-radius: 5px; cursor: pointer;}
.pcHid-tnb {display: none;}

/* lang-dropdown */
.lang-dropdown {position: relative;}
.btn-lang {display:inline-flex; align-items:center; justify-content:center; gap:4px; width:42px; height:34px; color:var(--color) !important; background:var(--bg-layer1); border:1px solid var(--bg-layer4); border-radius:6px; cursor:pointer; white-space:nowrap;}
.btn-lang > .current-flag {font-size:20px; line-height:1;}
.btn-lang > i,
.btn-lang > svg {font-size:10px; color:var(--secondary); transition:transform 0.2s;}
.btn-lang.active > i,
.btn-lang.active > svg {transform: rotate(180deg);}

.lang-menu {display: none; position: absolute; top:38px; right:0; z-index: 9; padding: 5px 5px; width:auto; min-width:122px; background: var(--bg-layer2); border: 1px var(--board-1) solid; border-radius: 6px; box-shadow:0 4px 12px rgba(0,0,0,0.12); transition:all 0.2s ease-in-out;}
.lang-menu > a {display: flex; align-items: center; gap:6px; padding:6px 10px; color:var(--color); border-radius:4px;}
.country-name {min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.flags {width: 20px; line-height:1;}

/* tnb-logout */
.tnb-logout {position: relative;}
.tnb-logout > button {margin:0; padding:5px 10px; color:#fff; background:var(--blue-color); border-radius: 5px; cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
	.hd-btn:hover,
	ul.tnb-info > li > button:hover,
	.tnb-logout > button:hover {filter: brightness(130%);}

	html[data-theme="light"] .hd-join:hover {filter: brightness(1.2);}
	.lang-menu > a:hover {background: var(--bg-layer3);}
}

/****************************************************************************************************************************************
footer 시작
*****************************************************************************************************************************************/
footer {position:relative; margin:30px auto 0 auto; padding:30px 0; width: 100%; background: var(--bg-layer5);}
footer hr {margin:30px 0; border: none; border-top:2px var(--bg-layer3) solid;}

ul.ft-brand {position: relative; margin:0 auto; padding:20px 0; width: 100%; display: flex; justify-content: center; align-items: center;}
ul.ft-brand > li {margin:0 auto; padding:0; width: calc(100% / 9);}
ul.ft-brand > li:nth-child(-n+4) {flex: 1.5;}
ul.ft-brand > li:nth-child(n+5):nth-child(-n+9) {flex: 1;}

ul.ft-brand > li > a {display:block; margin:0 auto; padding:0 10px; width: 100%; text-align: center; cursor: default;}
ul.ft-brand > li > a > img {object-fit: contain; max-height: 45px; cursor: pointer;}
ul.ft-brand > li:nth-child(-n+4) img {object-fit: contain; max-height: 35px;}
ul.ft-brand > li:nth-child(1) img {object-fit: contain; max-height: 18px;}

/* ft-menu */
.ft-menu {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: center;}
.ft-menu > dl {position: relative; flex: 1;}
.ft-menu > dl > dt {margin-bottom:15px; font-weight: bold; text-align: left;}
.ft-menu > dl > dd {line-height:1.7; font-weight: 500; color:var(--secondary); text-align: left; cursor: pointer;}
.ft-menu > dl.ft-sns {flex: 1.8;}
.ft-menu > dl.ft-sns > dt {text-align: center;}
.ft-menu > dl.ft-sns > dd.ft-sns-list {display: flex; justify-content: center; align-items: center; gap: 5px;}
.ft-menu > dl.ft-sns > dd.ft-sns-list > a {position: relative; width:40px; height:40px; display: flex; justify-content: center; align-items: center; background: var(--bg-layer2); border-radius: 5px;}
.ft-menu > dl.ft-sns > dd.ft-sns-list > a > i {font-size:22px; color:var(--secondary);}

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

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

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

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1600px) {    
    .container{width: 100%;}  
}/* 미디어쿼리문 끝 */

@media (max-width:1310px) {
	.hd-inner {max-width: 100%;}
	footer {margin-top:40px;}
}/* 미디어쿼리문 끝 */

@media (max-width:991px) {
	/* right-header */
	/* .right-header {box-shadow: none;} */
	.hd-inner {display: block; padding:0; align-items: unset;}
	.hd-logo {position: absolute; left:10px; z-index: 1; padding:5px 0;}
	.hd-logo > img {height: 50px;}

		/* right-hd */
		.right-hd {width:100%; height: 100%;}
		body:not([class]) .right-hd > .lang-dropdown {position:absolute; top:13px; right:90px; z-index:3;}
		.moHid-tnb {display: none;}
		.pcHid-tnb {display:inline-block;}

	.after-info {width:100%; flex-wrap: wrap;}
	ul.tnb-info {order: 3; gap: 8px; position: absolute; left:0; right:0; top:45px; width: 100%; background: var(--bg-layer2); border-top: 1px var(--board-1) solid; box-shadow: #0003 0 4px 6px -1px, #0000001f 0 2px 4px -1px;}
	ul.tnb-info > li > span {margin:0;}
	ul.tnb-info > li > svg {margin:0 3px 0 0; color:var(--lightPurple-color)}

	.tnb-logout {padding-right:10px;}
	/* main-menu */
	ul.main-menu > li.pcHid-menu {display: block;}

	/* page-con */
	.page-con {padding-top:40px;}
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
	/* header */
	header {height: 50px;}
	.icon-bar {display: none;}
	.before-btns {gap:5px;}
	.hd-btn {padding:0 15px; height: 35px; font-size: 14px;}

	/* aside */
	.aside {left:0; top:0; z-index: var(--z-sidebar); width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: 0.2s;}
	.aside.active {left:-120%; width: 100%; visibility: visible; opacity: 1;}

	.aside.active .menu-text,
	.aside.active ul.main-menu > li > a.has-sub::after,
	.aside.active ul.main-menu > li > a.has-sub > svg,
	.aside.active .mode-switcher {display: flex;}
	.aside.active ul.main-menu > li > a,
	.aside.active ul.sub-menu > li > a {padding:unset; width: 100%;}

	.left-inner {padding: 10px 10px 64px 10px;}
	.left-hd {padding:0;}
	.leftHd-btn {width: calc(100% / 2);}

	ul.main-menu {margin:0 auto; width: 100%;}	

	.mode-switcher {gap:5px; padding:0;}
	.mode-switcher > button {width: calc(100% - 5px);}	

	/* lang */
	.btn-lang {width:40px; height:32px;}
	.btn-lang > .current-flag {font-size:18px;}
	.lang-menu {top:34px;}

	.intro-img {width: 100%;}
	.intor-logo {top:10px; left:10px; width: 130px;}
	.intor-bg {display: none !important;}
	.mo-intor-bg {display:inline-block; position: relative;}

	html[data-theme="light"] .mo-light-img {display: inline-block;}
	html[data-theme="light"] .mo-dark-img {display:none;}
	html[data-theme="dark"] .mo-light-img {display: none;}
	html[data-theme="dark"] .mo-dark-img {display:inline-block;}

	.intro-greetings {position:absolute; left:0; bottom:unset; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
	.greetings-tit,
	.greetings-txt {display: none;}

	ul.greetings-list {margin-top:60px; flex-direction: column;}
	ul.greetings-list > li:nth-child(2) {border:none;}
	ul.greetings-list > li {padding-left:10px; width: 100%; text-align: left;}

	.intro-sns {position:relative; left:unset; right:unset; bottom:unset; margin-top:15px;}

	/* right-con */
	.right-con,
	.right-con.active {margin: 0; width: 100%;}
	.page-con {padding-bottom:60px;}
	.container {padding:10px 3px;}

	/* ft */
	footer {display: none;}
	.mo-menuWrap {display: block; position: fixed; bottom:0; z-index: var(--z-mobile-menu); margin:0; padding:0; width: 100%; background: var(--bg-layer2); border-top: 1px var(--bg-layer4) solid;}
	ul.mo-menu {position: relative; margin:0; padding:10px 0; width: 100%; display: flex; justify-content: center; align-items: center;}
	ul.mo-menu > li {margin:0 auto; padding:0; width:100%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;}
	ul.mo-menu > li > p,
	ul.mo-menu > li > svg {font-weight: 600; color:var(--secondary);}
	ul.mo-menu > li.active > p,
	ul.mo-menu > li.active > svg {color:var(--orange-color);}
}/* 미디어쿼리문 끝 */

@media (max-width:630px) {
	.intro-inner {width: 95%;}
	.login-wrap.active,
	.join-wrap.active,
	.code-wrap.active {padding-bottom: 20px;}
}/* 미디어쿼리문 끝 */

/* 잔액 증감 색상 (선택적 - JS에서 클래스 추가 시 사용) */
#user-balance.balance-increased {
	color: var(--green-color);
}

#user-balance.balance-decreased {
	color: var(--red-color);
}