@layer reset, tokens, base, utilities, components, mobile-layout, mobile-main, mobile-sub, overrides;

/*mobile-layout*/
@layer mobile-layout {
    :root {
	    --header-h-mobile:75px;
        --container-w-mobile:500px;
    }
    body.is-mobile {
        min-width: 0;
        width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background: #000;
        font-size: 14px;
    }

    .mobile-wrap {
        width: 100%;
        max-width: 500px;  
        min-height: 100dvh;
        background:#000; 
        flex-shrink: 0;
        
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
		position:relative;
    } 

	/* 기본 컨테이너 */
	.m-container-inner{width:100%; padding-inline:16px; margin-inline: auto;}
	.translateX_30{transform:translateX(20px); overflow:hidden}
    
    /*헤더*/
	.m-header {
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		max-width: 500px;   
		height: var(--header-h-mobile);
		z-index: 100;
		display:flex;
		align-items:center;
	}
	.m-header h1 img{max-width:100%; width:180px}
	.m-header .inner-header{position:relative; width:95%; margin:0 auto; display:flex; align-items:center;}
	.m-header .top-section{margin-left:auto; display:flex; align-items:center;}
	.m-header .top-section > button{display:flex; align-items:center; gap:2px; font-size:var(--text-sm)}
    .m-header .top-section > button:hover{color:var(--current_text)}
    
	.m-header .m-top-section{margin-left:auto;}
	.m-header .m-top-section .inner-box{display:flex; align-items:center; gap:5px; justify-content:flex-end}
	.m-header .m-top-section .btn_square{width:30px; height:30px}

    .lang-selector-m .lang-btn{padding:8px 10px !important; gap:3px}
	.lang-selector-m .lang-text{ font-size:var(--text-sm)}
	.lang-selector-m .lang-item{display:block; text-align:center; padding: 5px 0px;}
	.lang-selector-m .lang-item span{display:inline-block;}
	.lang-selector-m .lang-item button{padding:0; display:inline-block;}

	.nav-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 200;
	}

	.drawer {
		position: fixed;
		top: 0;
		width: 100%;
		max-width: 320px;
		height: 100%;
		background-color: #fff;
		z-index: 201;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
	}

	.nav-drawer {
		left: 0;
		transform: translateX(-100%);
		box-shadow: 2px 0 8px rgba(0,0,0,0.1);
	}

	.my-drawer {
		right: 0;
		transform: translateX(100%);
		box-shadow: -2px 0 8px rgba(0,0,0,0.1); 
		background:#1B1B1B
	}
	.my-drawer .btn-close{background:#fff}
	.my-drawer .drawer-header{background:#1B1B1B; padding: 20px 20px 0 20px;}
	.my-drawer .drawer-content{padding:30px 15px; overflow-y: auto;}

	.my-drawer .level {width:35px; height: 35px; padding:0;}
	.my-drawer .level > img{max-width:100%; width:35px}

	body.nav-open, body.my-open {
		overflow: hidden;
		height: 100vh;
		padding-right: 0;
	}
	body.nav-open .nav-overlay,
	body.my-open .nav-overlay {
		opacity: 1;
		visibility: visible;
	}
	body.nav-open .nav-drawer {
		transform: translateX(0);
	}
	body.my-open .my-drawer {
		transform: translateX(0);
	}

	/* --- Drawer Inner Layout --- */
	.drawer-header {
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
	}
    .drawer-header h2 img{max-width:100%; width:120px;}
	.btn-close {
		background: #000;
		border-radius:50px;
		width:35px; 
		height:35px;
	}

	.drawer-content {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.depth-1{padding:0 15px;}
	.depth-1 li > .menu-link{background: #F3F3F3; border-radius: 8px;}
	.menu-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 16px 20px;
		border: none;
		font-size: 16px;
		font-weight: 500;
		text-align: left;
		color: #1F1E21;
		transition: background-color 0.2s;
		margin-bottom:10px;
		font-family: "Montserrat"
	}
	.menu-link:active { background-color: #fafafa; }

	.has-sub .arrow {
		width: 10px;
		height: 10px;
		border-right: 2px solid #ccc;
		border-bottom: 2px solid #ccc;
		transform: rotate(45deg);
		transition: transform 0.3s ease, border-color 0.3s;
	}

	.has-sub.active > .menu-link {
		color: #000;
		background-color: #ddd;
	}
	.has-sub.active > .menu-link .arrow {
		transform: rotate(-135deg);
		border-color: #000;
	}

	.sub-menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease-out;
	}
	
	.depth-2 > li > .menu-link { padding-left: 20px; padding-top:5px; padding-bottom:5px; font-size: 15px; color: #555; background:#fff;}
	.depth-3 { background-color: #eee; }
	.depth-3 > li > .menu-link { padding-left: 50px; font-size: 14px; color: #666; padding-top: 12px; padding-bottom: 12px; }

	.nav_banner{padding: 16px 20px;}
	.nav_banner .banner-item {
		position: relative;
		flex: 1;
		display: block;
		margin-bottom:20px; 
		border-bottom:1px solid #ddd;
		padding-bottom:20px;
	}
	.nav_banner .banner-img {
		max-width: 100%;
		object-fit: cover;
		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.nav_banner .banner-overlay{margin-top:10px}
	.nav_banner .badge-new {
		background-color:#000;
		color: #ffcc00;
		font-weight:600;
		padding: 2px 6px;
		margin-bottom: 0.5rem;
		display: inline-block;
		font-size:12px;
		font-family: "Montserrat";
		border-radius:5px;
	}
	.nav_banner .banner-title {
		font-weight:500;
		color: #000;
		font-size:15px;
	}

	/* --- My Page --- */
	.money_box{
	    position:relative;
	    border-radius: 15px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		background: #18181B;
		display:flex;
		align-items:center;
		margin-bottom:20px;
	}
	.money_box > div{padding:15px 0; }
	.money_box > div:first-child{flex-grow:1; font-family: "Montserrat"; text-indent:15px; color:#EACB1B; font-weight:600; font-size:17px;}
	.money_box > div:last-child{position:relative;background: linear-gradient(111deg, #FFD258 25.89%, #F82D34 65.29%);  border-radius:15px; width:130px; flex-shrink:0; text-align:right; padding-right:20px}
	.money_box > div:last-child > img{position:absolute; left:-40px; top:-20px; z-index:9; max-width:100%; width:95px}

	.mypage-list {
		padding: 0;
	}
	.mypage-list a {
		display: block;
		padding:10px 20px;
		font-size: 15px;
	}

	.my-drawer .logout{border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: #18181B; height:50px; display:flex; align-items:center; justify-content:flex-end; padding-left:15px; padding-right:15px; margin-top:50px;}
	.my-drawer .logout button{display:flex; align-items:center; font-size:14px;}

	/*타이틀 메인 + 서브*/
	.m-section-tit{display:flex; align-items:center;}
	.m-section-tit > h2{color:#fff; font-size:16px; font-weight: 500; margin-left:5px}
	.m-section-tit > p{line-height:0}
	.m-section-tit > p svg{filter: drop-shadow(0 0 5.4px #ff6600);}

	/*콘솔로 버튼*/
	.m-carousel-btn{border-radius:7px; background: #ff5307; width:25px; height: 25px; border:0; display:inline-flex; justify-content:center; align-items:center; cursor:pointer;}
	.m-carousel-btn span{display:flex; justify-content:center; align-items:center;}
    .m-carousel-btn[disabled]{ opacity:.35; background: #313440; cursor:default; pointer-events:none;}

	/*탭 리스트*/
    .m-section-tab{position:relative;}
	.m-section-tab .tablist{position:relative; gap:1px; align-items:center; justify-content:center; flex-wrap:wrap; padding:0 15px; z-index:9}
	.m-section-tab .pill{border-radius:13px; background: #000; border: 1px solid rgba(71, 67, 75, 0.56); color:var(--muted); display:inline-flex; align-items:center; gap:2px; font-size:14px; cursor:pointer; justify-content:center; padding:10px 5px; flex:1 0 24%;}
	.m-section-tab .pill[aria-selected="true"]{
        color:#fff;
		border: 1px solid #FFCA58;
		background: #F60;
    }
	.m-section-tab .pill:hover{color:var(--lemon_text)}
	.m-section-tab .scroll-x{gap:14px;}
	.m-section-tab .table-panels{position:relative;  z-index:9}
    
	.m-demo-tab .tablist{position:relative; gap:3px; align-items:center; justify-content:center; flex-wrap:wrap; padding:0px; z-index:9}
	.m-demo-tab .table-panel{margin-top: 20px !important;}
	.m-demo-tab .inpill{border-radius:8px; background: #2F323B; border: 1px solid rgba(71, 67, 75, 0.56); color:var(--muted); font-size:14px; cursor:pointer; justify-content:center; padding:6px 6px; letter-spacing:-1px; flex-grow:1}
	.m-demo-tab .inpill[aria-selected="true"]{
        color: #fff;
		border: 1px solid #E8A30D;
		background: #EA891B;
		filter: drop-shadow(0px 0px 10px rgba(255, 0102, 0, 0.5));
    }
	.m-demo-tab .inpill:hover{color:var(--lemon_text)}

    
	/*스크롤바 트랙 */
	.custom-scrollbar {
		position: relative;
		width:92%;
		height:4px;
		background: #222; 
		border-radius: 3px;
		overflow: hidden;
		cursor: pointer;
		margin:20px auto 0;
	}

	.custom-scrollbar .thumb {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background: #DFC21E; 
		border-radius: 3px;
		width: 0; 
		cursor: pointer;
		transition: background 0.2s;
	}

	.custom-scrollbar .thumb:hover,
	.custom-scrollbar .thumb:active {
		background: #ffaa00;
	}
	@media screen and (max-width:375px){
	    .m-section-tab .tablist{ gap:8px}
	    .m-section-tab .pill{ flex:1 0 48%;}
	}
     
    /*table*/
    .table-panel-wrap .table-panel{overflow-x: scroll !important;}

	.m-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 14px;
		color:var(--text);
		border-top:2px solid #383941;
		border-bottom:1px solid #383941
	}
	.m-table th,
	.m-table td {padding:15px; font-size:14px; font-family:'Montserrat'; word-break: break-all !important; white-space: nowrap;  border-bottom: 1px solid rgba(53, 58, 74, 0.50); text-align:center; word-break: break-all !important; white-space: nowrap}
    .m-table th {font-weight:500;}
	.m-table tbody tr:hover,
	.m-table tbody tr:nth-child(odd):hover{background:rgba(0,0,0,0.5)}
	.m-table tbody tr:nth-child(odd){background:#141416;}
	.text-sm{font-size:var(--text-sm) !important; color:#ddd !important;}
	.td-text-tit{color:var(--panel-9) !important;}

	/* variant 1 */
	.m-table--default tbody td > div {display:flex; align-items:center; gap:5px; }
	.m-table--default tbody td > div span:nth-child(1){width:30px;}
    
	/*m_footer*/
	.m_footer{border-top-left-radius: 20px; border-top-right-radius: 20px; background: #191919; margin:60px auto 0; padding:20px 30px; overflow:hidden}
	.m_footer{position:relative}
	.m_footer:after{position:absolute; content:""; width: 911px; height: 736px; top:50%; left:90%; transform:translate(-50%,-50%); 
		border-radius: 911px;
	    background: radial-gradient(69.91% 53.89% at 49.71% 50.6%, rgba(201, 30, 0, 0.09) 0%, rgba(0, 0, 0, 0.00) 100%);
	}
    
	.m_footer h1{border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:20px; padding-bottom:15px;}
	.m_footer h1 img{max-width:100%; width:120px}
	
	.m_footer .m_footer_site {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 10px;
	}
	.m_footer .m_footer_site .footer_col {
		flex: 1; 
		display: flex;
		flex-direction: column;
		gap: 30px; 
	}
	.m_footer .m_footer_site h2 {
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 10px;
	}
	.m_footer .m_footer_site ul li {
		margin:5px 0;
	}
	.m_footer .m_footer_site ul li a {
		color: rgba(255, 255, 255, 0.60);
		font-size: 13px;
		text-decoration: none;
	}
	.m_footer .m_footer_site ul li a:hover {
		color: #fff;
	}
	    
	.m_footer_copy {margin-top:40px;}
	.m_footer_copy div p{color: rgba(255, 255, 255, 0.60); line-height: 27px; margin:5px 0; font-size:13px}
	@media screen and (max-width: 395px) {
		.m_footer .m_footer_site {
			flex-direction: row; 
			flex-wrap: wrap;
			gap: 10px
		}

		.m_footer .m_footer_site .footer_col {
			/* gap이 있기 때문에 50%보다 아주 조금 작게 잡아야 줄이 안 깨집니다 */
			flex: 0 0 calc(50% - 10px); 
			width: calc(50% - 10px);
			
			margin-bottom:10px;
		}
		
		.m_footer .m_footer_site .footer_col:last-child {
			flex: 0 0 100%;
			width: 100%;
		}
	}

	/*버튼*/
	.m_btn {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 0 15px;
		height:35px;
		font-size:14px;
		font-weight: 500;
		border-radius:13px;
		cursor: pointer;
		transition: all 0.3s ease;
		white-space: nowrap;
	}
	.md_btn {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 0 15px;
		height:45px;
		font-size:15px;
		font-weight: 500;
		border-radius:13px;
		cursor: pointer;
		transition: all 0.3s ease;
		white-space: nowrap;
	}
	.m_box_small {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 13px;
		border: 1px solid #303441;
		background: #1F1F24;
		box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.80);
		height:35px;
		padding: 0 10px;
	}
    
	/*박스스타일*/
	.m_radius{border-radius:8px !important; padding:15px;}

	.m_tip_red{position:relative; overflow:hidden; padding:20px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background: #18181B; border-radius:10px}
	.m_tip_red:after{position:absolute; content:""; width:800px; height:800px; top:0%; left:20%; transform: translate(-50%, -50%); border-radius:800px; background: radial-gradient(30.7% 34.94% at 49.71% 50.6%, rgba(242, 71, 71, 0.13) 0%, rgba(0, 0, 0, 0.00) 100%);}

	.m_tip_blue{position:relative; overflow:hidden; padding:20px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background: #18181B; border-radius:10px}
	.m_tip_blue:after{position:absolute; content:"";width:800px; height:800px; top: 50%; left:30%; transform: translate(-50%, -50%); border-radius: 800px; background: radial-gradient(30.7% 34.94% at 49.71% 50.6%, rgba(22, 106, 158, 0.18) 0%, rgba(0, 0, 0, 0.00) 100%);}

    .m_tip_green{position:relative; overflow:hidden; padding:20px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background: #18181B; border-radius:10px}
	.m_tip_green:after{position:absolute; content:"";width:1500px; height:1000px; top: 30%; left:50%; transform: translate(-50%, -50%); border-radius: 1500px; background: radial-gradient(30.7% 34.94% at 49.71% 50.6%, rgba(28, 185, 112, 0.18) 0%, rgba(0, 0, 0, 0.00) 100%);}

	.m_tip .inner_tit{display:flex; align-items:flex-start; gap:5px; padding-bottom:10px; margin-bottom:10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
	.m_tip .inner_tit > h2{font-size:16px;}
	.m_tip .inner_tit > h2 span{display:block; font-size:12px; font-weight:400; padding:5px 0; color:rgba(255,255,255,0.6)}
	.m_tip > ul li{padding:3px 0; font-size:14px;}
	.m_tip > ul li p:first-child{font-size:14px; color:var(--panel-2)}
	.m_tip > ul li p:last-child{font-size:12px;}
    .m_tip .inner_btn{position:relative; display:flex; align-items:center; justify-content:center; gap:5px; z-index:9}
	.m_tip .inner_btn a{flex-grow:1}

	.m_warning_box{position:relative; overflow:hidden; display:flex; align-items:flex-start; padding:15px; border-radius:13px; border: 1px solid #FF6B2C; background: #18181B; gap:10px}
	.m_warning_box:after{position:absolute; content:""; width:500px; height:300px; top:50%; left:50%; transform: translate(-50%, -50%); border-radius:800px; background:radial-gradient(30.7% 34.94% at 49.71% 50.6%, rgba(255, 136, 51, 0.26) 0%, rgba(0, 0, 0, 0.00) 100%);}

	/*하이라이트 박스*/
	._sepia{border-radius: 8px; font-size:12px; height:30px; display:inline-flex; align-items:center; justify-content:center; font-family: Montserrat; padding:5px 10px;}
	._sepia_red{background: rgba(255, 88, 100, 0.09); color: #F82D34;}
	._sepia_green{background: rgba(88, 255, 222, 0.09); color: #2DF8A7;}

	.m_badge {border-radius:100px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; font-family: Montserrat; padding:5px 10px;}
	.m_badge_orage{background: #FF8B25;}
	.m_badge_purple{background: #9E5EF7;}
	.m_badge_purple1{background: rgba(251, 37, 255, 0.65);}
	.m_badge_purple2{background: #9E5EF7;}
	.m_badge_blue{background: rgba(42, 111, 201, 0.58);}
	.m_badge_green{background: rgba(37, 173, 105, 0.58);}
	.m_badge_green_mid{background:#598339}
	.m_badge_red_deep{background:#8C2E2E}
	.m_badge_red_deep1{background: rgba(246, 36, 95, 0.40);}
	.m_badge_gray{background:#303441}
	.m_badge_brown{background: rgba(234, 172, 72, 0.83);}
    .m_badge_kagi{background: rgba(37, 153, 173, 0.40);}
    
	.m_badge_line{height:30px; border-radius:100px; font-size:12px; display:inline-flex; align-items:center; justify-content:center;  padding:5px 10px; width:50px}
	.m_badge_line-auto{height:30px; border-radius:100px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; padding:5px 10px;}
	.m_badge_line-red{border: 1px solid #F82D34; background: #A83A42;}
	.m_badge_line-gray{border: 1px solid #111216; background: #303441;}
	.m_badge_line-purple{border: 1px solid #883583;background: #642171;}
	.m_badge_line-green{border: 1px solid #358877; background: #21716D;}
	.m_badge_line-red-deep{border: 1px solid rgba(255, 88, 100, 0.38); background: rgba(183, 0, 0, 0.19);}

	/* 페이지컷 스타일 */
    .m-page-cut{margin-top:50px; margin-bottom:20px}
	.m-page-cut ul{display:flex; align-items:center; justify-content:center; gap:15px}
	.m-page-cut ul li a{display:flex; align-items:center; justify-content:center; font-family: 'Montserrat';transition:all 0.3s ease-out; font-weight:500}
	.m-page-cut ul li a.active{ color:var(--panel-2); }
	.m-page-cut ul li a:hover{}
	.m-page-cut ul li.prev a,
    .m-page-cut ul li.next a{width:35px; height: 35px;  border-radius: 35px; border: 1.03px solid rgba(255, 255, 255, 0.12); background:#FF9800;
	box-shadow: 8px 10px 9.4px 0 rgba(0, 0, 0, 0.20);}
	.m-page-cut ul li.prev svg{transform:rotate(180deg)}

	/* ==========================================================================
    아코디언 관리
    ========================================================================== */
    .m_acc_item {
        border-radius: 12px;
        padding:0 10px;
        margin-bottom:10px;
    }
	.m_acc_button {
        gap:5px;
        padding:10px 5px;
        font-size:14px;
		line-height:1.5
    }
	.m_acc_button .chev {
        width:20px;
        height:20px;
    }
	.m_acc_button .q {
        width:20px;
        height:20px;
        font-weight:600;
		font-size:10px;
    }
	.m_acc_panel_inner {
        padding:0 5px 15px 10px;
        color: #cfcfe0;
        line-height: 1.5;
    }
	.m_acc_panel p{font-size:13px;}

	/*modal*/
    .m-modal h2{font-size:18px !important; margin-bottom:10px !important;}
	.m-modal .btn{padding:0 10px}
}