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

/*mobile-main*/
@layer mobile-main {
    .sub-top-header {gap:5px}
	.sub-top-header > div{cursor:pointer}
    .sub-top-header > div:first-child{display:flex; align-items:center;}
    .sub-top-header p{border-radius: 50px; background: #4E4E4E; color:#fff; padding:5px 13px; font-weight:500}
    .sub-top-header p.actived{background: rgb(255 194 51); color:#222}

   /* ==========================================================================
    배경 애니메이션 요소
    ========================================================================== */
    .m-content-area{ width:90%; margin:0 auto; position: relative;z-index: 10;}
	.m-parallax-bg{width:100% !important; max-width: 500px !important; left:50%; transform:translateX(-50%);}
    .m-parallax-bg .orb {
		position: absolute;
		border-radius: 50%;
		filter: blur(50px);
	}
	.m-layer .orb-1{width:150px; height:150px; top:50%; left:-10%;}
	.m-layer .orb-2 {width:200px; height:200px; top:10%; right:-10%;}
	.m-layer .orb-3 {width:500px; height:500px; bottom:-30%; right:-30%;}
	.m-layer .orb-4 {width:330px; height:330px; bottom:-80%; left:-30%;}
    
	.m-layer .suit-1 {top:55%; left:-10%;}
	.m-layer .suit-2 {top:30%; right:-10%; }
	.m-layer .suit-3 {top:100%; right: -10%;}
	.m-layer .suit-4 {bottom:-55%; left:-10%;}
	.m-layer .suit-5 {bottom:-75%; left:-10%;}
    
	.m-layer .suit-1{width:30%;}
	.m-layer .suit-2{width:50%;}
	.m-layer .suit-3{width:30%;}
	.m-layer .suit-4{width:50%;}
	.m-layer .suit-5{width:50%;}
	.m-layer .suit-1 img,
	.m-layer .suit-2 img,
	.m-layer .suit-3 img,
	.m-layer .suit-4 img,
	.m-layer .suit-5 img{max-width:100%;}

    .m-single-banner{margin: 0 auto 0px !important;}

    /* ==========================================================================
    슬라이드 공지
    ========================================================================== */
	.m-slider-notice{position: relative;  width: 100%; display:flex; align-items:center; justify-content:center; }
    .m-slider-notice > img{width:100%}
	.m-slider-notice .animated-title {
      width:79%;
      overflow: hidden;
      position: absolute;
	  transform:translate(-2px, 6px);
    }

    .m-slider-notice .track {
      display: flex;
      width: max-content;
      animation: marquee 50s linear infinite;
      will-change: transform;
    }

    .m-slider-notice .track:hover {
      animation-play-state: paused;
    }

    .m-slider-notice .content {
      flex-shrink: 0;
      white-space: nowrap;
      font-size: var(--text-xl);
      font-weight: 700;
      line-height: 1.2;
      color: #fff;
      padding-right: 80px;
	  text-shadow:0 0 15px rgba(0,0,0,0.5);
	  display:flex;
    }

    @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
	
	/* ==========================================================================
    게임 리스트
    ========================================================================== */
	.m-game-list{display:grid; grid-template-columns: repeat(2, 1fr); gap:13px; margin-bottom:50px}
    .m-game-list1{display:grid; grid-template-columns: repeat(3, 1fr); gap:13px; margin-bottom:50px}
	.m-game-list .game-card{
	    border-radius:10px; 
		overflow:hidden; 
		cursor:pointer;
		/*border-top: 2px solid rgba(1, 255, 145, 0.82);
		border-right:2px solid rgba(1, 255, 145, 0.82);
		border-left:2px solid rgba(1, 255, 145, 0.82);*/
		border: 1px solid var(--lemon_text);
		background: #070707;
		box-shadow: 0 0 9.603px 0 #620A85;
	}	
	.m-game-list .game-card img{width:100%}
	.m-game-lis tgame-card {
		position: relative;
		transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
					box-shadow 0.3s ease, 
					border-color 0.3s ease, 
					z-index 0s; 
		z-index: 1;
	}

    /* ==========================================================================
    컨텐츠
    ========================================================================== */
    body.is-mobile .container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      padding: 20px 0;
      position: relative;
      box-sizing: border-box;
    }

    body.is-mobile .post {
      width: calc(100% - 95px);
    }
	.m-fame-game-list{display:grid; grid-template-columns: repeat(auto-fill, minmax(30%, auto)); gap:15px; }
	.m-fame-game-list1{display:grid; grid-template-columns: repeat(auto-fill, minmax(40%, auto)); gap:5px; }
	.tablist .m-tab{font-size:var(--text-sm) !important}
	.section-tit .m-text{font-size:var(--text-lg) !important}

    body.is-mobile #sidebar-wrapper {
      width:95px; 
    }
    body.is-mobile #sidebar {
      width:95px;
      color: #fff;
      
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
    }

    body.is-mobile #sidebar:hover {
      scrollbar-color: rgba(255, 255, 255, 0.5) transparent; 
    }

    body.is-mobile #sidebar::-webkit-scrollbar {
      width: 8px; /* 스크롤바 너비 */
    }
    body.is-mobile #sidebar::-webkit-scrollbar-track {
      background: transparent; 
    }
    body.is-mobile #sidebar::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: 4px;
    }
    
    body.is-mobile #sidebar:hover::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.5); 
    }
    
	body.is-mobile .sidebar-content{display:grid; grid-template-columns: repeat(1, 1fr); gap:10px; padding-bottom:50px}
    body.is-mobile .sidebar-content > div{width: 80px; height: 80px; border-radius:15px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.21); display:flex; align-items:center; justify-content:center; flex-direction: column; text-align:center;}
	body.is-mobile .sidebar-content > div p{line-height:1.2; font-size:var(--text-sm)}

	body.is-mobile .sidebar-content > div.active{
	border: 1px solid rgb(255 191 0 / 82%);
    background: rgb(255 202 0 / 25%);
    box-shadow: 0 0 6.1px 0 #ffca01
	}

	/* ==========================================================================
    푸터
    ========================================================================== */
	.m-footer{display:flex; align-items:center; justify-content:center; flex-direction: column;}
	.m-footer > div{text-align:center;}
	.m-footer > div p{opacity:0.7; font-size:var(--text-sm); word-break: break-all; white-space: normal;}
	.m-footer > div:first-child{display:flex; padding-top:50px}

	.m-footer > div a{transition:all 0.3s ease-in}
	.m-footer > div a:hover{transform:translateY(-5px)}

	.m-history{position:fixed; bottom:0;  width: 100%; max-width: 500px; left:50%; height:50px; border-radius: 50px 50px 0 0; background:rgb(255 193 7 / 88%); display:flex; align-items:center; justify-content:center; cursor: pointer; opacity:0; visibility: hidden; transform:translateX(-50%); z-index: 9999; transition: opacity 0.3s ease, visibility 0.3s ease;}
	.m-history.show {opacity: 1;visibility: visible;}

	.m-history > div{display:flex; align-items:center; justify-content:center;}
	.m-history > div span{color:#fff; font-weight:600}

	.histor-content {
		position: fixed;
		bottom:0px;
		left:50%;
		width: 100%;
		max-width: 500px;
		background: #252a33;
		border-top-left-radius:20px;
		border-top-right-radius:20px;
		box-shadow: 0 10px 25px rgba(0,0,0,0.15);
		padding:20px 20px 60px 20px;
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transform: translateY(30px)  translateX(-50%);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .histor-content.active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0) translateX(-50%);
    }
    
	.histor-content h2{font-size:var(--text-2xl); margin-bottom:10px}
	.histor-content ul {display:grid; grid-template-columns: repeat(6, 1fr); gap:5px; padding-bottom:15px}
	.histor-content li p{width: 100%; padding-top:100%; position: relative; border:1px solid rgba(255,255,255,0.7)}
	.histor-content p > img{
	    position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ==========================================================================
    모달
    ========================================================================== */
	/*회원가입*/
	.m-join-modal{width:min(780px,92vw) !important; padding:0 !important; overflow-y: auto; height:600px}
	.m-join-modal .join-wrap{display:block}
    .m-join-modal .join-wrap .box:last-child{padding:15px;}
	.m-join-modal .join-wrap .section{}
	.m-join-modal .box header > h2{font-size:var(--text-2xl) !important; margin-bottom:0px !important; }
	.m-join-modal .input_group span.icon {
		position: absolute;
		right: 20px;
		cursor: pointer;
		width: 20px;
		height: 20px;
		top: 50%;
		transform: translateY(-50%);
	}

	.m-content-modal{width:min(780px,92vw) !important; padding:20 !important; overflow-y: auto; height:600px}

} 

/* ── 커스텀 ── */
.m-content-area { padding-top: 75px !important; }
.m-slider-notice { margin-top: 12px; }
.lang-selector-m .lang-list { min-width: unset; width: auto; padding: 4px 6px; }
.lang-selector-m .lang-item { padding: 4px 0; }
.lang-selector-m .lang-item button { display: flex; align-items: center; justify-content: center; }
.mobile-wrap .modal { width: 94vw !important; max-width: 94vw !important; padding: 20px !important; }
.mobile-wrap .modal .inner-pop { max-height: 60vh; overflow-y: auto; }
@media (max-width: 500px) { body.is-mobile .modal { width: 92vw !important; max-width: 92vw !important; } }