/* Newdesign5: deep violet base with purple/pink highlights */
:root {
	--theme-bg: #140f1f;
	--theme-sidebar: #1a0d2e;
	--theme-surface: #550055;
	--theme-line: #3a2453;
	--theme-green: #7c3aed;
	--theme-green-hover: #ec4899;
	--theme-green-dark: #6d28d9;
	--nd5-primary: #7c3aed;
	--nd5-primary-light: #c084fc;
	--nd5-secondary: #ec4899;
	--nd5-text: #f3e8ff;
	--nd5-muted: #a78bca;
}

html.dark body,
html.dark main {
	background-color: var(--theme-bg);
}

html.dark #sidebar {
	background-color: var(--theme-sidebar);
	border-color: #323532;
}

html.dark header {
	background-color: rgb(20 15 31 / 97%);
	border-color: rgb(192 132 252 / 16%);
}

html.dark .game-card {
	border-color: transparent;
	background-color: var(--theme-surface);
}

html.dark .game-card:hover {
	border-color: rgb(192 132 252 / 70%);
	box-shadow: 0 14px 34px rgb(124 58 237 / 24%), 0 8px 24px rgb(236 72 153 / 10%);
}

.shortcut-btn {
	background-image: linear-gradient(135deg, var(--theme-green), var(--theme-green-dark));
	box-shadow: 0 8px 24px rgb(124 58 237 / 24%);
}

.shortcut-btn:hover {
	background-image: linear-gradient(135deg, var(--theme-green-hover), var(--theme-green));
	box-shadow: 0 10px 32px rgb(236 72 153 / 32%);
}

.nav-dot.bg-cyan-400,
.nav-dot.bg-brand-green {
	background-color: var(--theme-green);
}

button.bg-brand-blue:hover,
button.bg-brand-green:hover {
	background-color: var(--theme-green-hover);
	color: #102a22;
}

html.dark [class~="bg-brand-blue"] {
	box-shadow: 0 8px 22px rgb(124 58 237 / 24%);
}



html.dark input,
html.dark select {
	background-color: var(--theme-surface);
	border-color: var(--theme-line);
}
  
body {
	font-family: 'Pretendard','Noto Sans KR', sans-serif;
	background-color: #090f1e; 
	color: #ffffff;
	/* 화면 전체 프레임 고정 (스크롤은 우측 본문에서만) */
	overflow: hidden; 
}

/* 우측 본문 전용 커스텀 스크롤바 */
.right-scroll {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #2a354f #090f1e;
}
.right-scroll::-webkit-scrollbar {
	width: 8px;
}
.right-scroll::-webkit-scrollbar-track {
	background: #090f1e; 
}
.right-scroll::-webkit-scrollbar-thumb {
	background: #2a354f; 
	border-radius: 10px;
}
.right-scroll::-webkit-scrollbar-thumb:hover {
	background: #0082f0; 
}

/* 좌측 메뉴 스크롤바 */
.left-scroll::-webkit-scrollbar {
	width: 4px;
}
.left-scroll::-webkit-scrollbar-thumb {
	background: #1f2937;
	border-radius: 4px;
}

.game-card:hover .game-img {
	transform: scale(1.05);
}

.hide-scroll::-webkit-scrollbar {
	display: none;
}
.hide-scroll {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
@keyframes shimmer {
	100% { transform: translateX(100%); }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
 }
 
 
 /* 미니 사이드바 모드 전환을 위한 커스텀 스타일 */
.mini-sidebar {
	width: 80px !important;
}

/* 미니 모드일 때 텍스트 및 뱃지 숨김 */
.mini-sidebar .nav-text,
.mini-sidebar .nav-badge,
.mini-sidebar .nav-section-title {
	opacity: 0;
	width: 0;
	display: none !important;
}

/* 미니 모드일 때 메뉴 아이콘 가운데 정렬 */
.mini-sidebar .menu-link {
	justify-content: center !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* 제공사(Providers) 아이콘 정렬 */
.mini-sidebar .provider-dot-container {
	justify-content: center !important;
	width: 100% !important;
}

/* 하단 앱 설치 버튼 아이콘 간격 조정 */
.mini-sidebar .app-install-btn {
	padding: 0.75rem 0 !important;
}

#partners img {
	max-width: 100px;
	max-height: 24px;
}

/* 입금·출금 페이지 모바일 전환 탭 */
.wallet-page-tabs {
	display: none;
}

@media (max-width: 767px) {
	.wallet-page-tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
		margin: 0 0 20px;
		padding: 4px;
		background: rgb(255 255 255 / 4%);
		border: 1px solid rgb(192 132 252 / 18%);
		border-radius: 14px;
	}

	.wallet-page-tab {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		padding: 8px 12px;
		color: var(--nd5-muted);
		border: 1px solid transparent;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 800;
		transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
	}

	.wallet-page-tab:hover,
	.wallet-page-tab:focus-visible {
		color: #fff;
		background: rgb(124 58 237 / 15%);
		outline: none;
	}

	.wallet-page-tab.is-active {
		color: #fff;
		background: linear-gradient(135deg, var(--nd5-primary), var(--nd5-secondary));
		border-color: rgb(255 255 255 / 14%);
		box-shadow: 0 7px 20px rgb(124 58 237 / 28%);
	}

	.wallet-page-tab i {
		font-size: 12px;
	}
}

/* Newdesign5 top GNB */
.nd5-page {
	--nd5-mobile-header-height: 68px;
	background: radial-gradient(circle at 70% -20%, rgb(124 58 237 / 18%), transparent 36%), #140f1f;
}

.nd5-header {
	position: sticky;
	top: 0;
	z-index: 45;
	width: 100%;
	border-bottom: 1px solid rgb(192 132 252 / 16%);
	backdrop-filter: blur(18px);
}

.nd5-header-bar {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	min-height: 76px;
	padding: 0 24px;
}

.nd5-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.nd5-logo img {
	display: block;
	width: 116px;
	height: 38px;
	object-fit: contain;
}

.nd5-gnb {
	display: flex;
	align-items: stretch;
	min-width: 0;
	height: 76px;
	flex: 1 1 auto;
}

.nd5-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 11px;
	color: var(--nd5-muted);
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
	transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.nd5-nav-link i {
	font-size: 12px;
	opacity: .85;
}

.nd5-nav-link::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--nd5-primary-light), var(--nd5-secondary));
	box-shadow: 0 0 14px rgb(192 132 252 / 75%);
	transition: left .22s ease, right .22s ease;
}

.nd5-nav-link:hover,
.nd5-nav-link:focus-visible,
.nd5-nav-link.is-active {
	color: #fff;
	background: linear-gradient(180deg, transparent, rgb(124 58 237 / 12%));
}

.nd5-nav-link:hover::after,
.nd5-nav-link:focus-visible::after,
.nd5-nav-link.is-active::after {
	left: 18%;
	right: 18%;
}

.nd5-nav-separator {
	margin-left: 7px;
}

.nd5-nav-separator::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 24px;
	bottom: 24px;
	width: 1px;
	background: rgb(192 132 252 / 20%);
}

.nd5-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.nd5-icon-btn,
.nd5-mobile-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 38px;
	height: 38px;
	padding: 0 9px;
	color: var(--nd5-muted);
	background: rgb(255 255 255 / 4%);
	border: 1px solid rgb(192 132 252 / 16%);
	border-radius: 10px;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.nd5-icon-btn:hover,
.nd5-mobile-toggle:hover {
	color: #fff;
	border-color: rgb(192 132 252 / 55%);
	background: rgb(124 58 237 / 15%);
}

.nd5-icon-btn > img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.nd5-language-wrap,
.nd5-header-actions .relative {
	position: relative;
}

.nd5-lang-dropdown,
.nd5-user-dropdown {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 168px;
	padding: 8px;
	color: var(--nd5-text);
	background: rgb(26 13 46 / 98%);
	border: 1px solid rgb(192 132 252 / 22%);
	border-radius: 14px;
	box-shadow: 0 22px 50px rgb(0 0 0 / 44%), 0 0 28px rgb(124 58 237 / 10%);
}

.nd5-lang-dropdown button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 13px;
	text-align: left;
}

.nd5-lang-dropdown button:hover {
	background: rgb(124 58 237 / 18%);
}

.nd5-lang-dropdown img {
	width: 20px;
	height: 20px;
	object-fit: cover;
	border-radius: 2px;
}

.nd5-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	min-width: 66px;
	padding: 0 15px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 800;
	overflow: hidden;
	transition: opacity .2s ease, transform .2s ease, color .2s ease, background-color .2s ease;
}

.nd5-btn-primary {
	color: #fff;
	background: linear-gradient(135deg, var(--nd5-primary), var(--nd5-secondary));
	box-shadow: 0 8px 22px rgb(124 58 237 / 26%);
}

.nd5-btn-primary:hover {
	opacity: .88;
	transform: translateY(-2px);
}

.nd5-btn-outline {
	color: var(--nd5-text);
	border: 1px solid var(--nd5-primary);
	background: transparent;
}

.nd5-btn-outline:hover {
	color: #fff;
	background: var(--nd5-primary);
	transform: translateY(-2px);
}

.nd5-shimmer::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100%;
	width: 60%;
	transform: skewX(-18deg);
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 45%), transparent);
	animation: nd5-button-shine 2.8s ease-in-out infinite;
}

@keyframes nd5-button-shine {
	0% { left: -100%; }
	60%, 100% { left: 200%; }
}

.nd5-wallet-actions {
	display: flex;
	gap: 6px;
}

.nd5-balance {
	padding: 0 3px 0 7px;
	line-height: 1.15;
	text-align: right;
}

.nd5-balance span {
	display: block;
	color: var(--nd5-muted);
	font-size: 10px;
}

.nd5-balance strong {
	color: #fff;
	font-size: 13px;
}

.nd5-balance small {
	margin-left: 2px;
	color: var(--nd5-primary-light);
	font-size: 9px;
}

.nd5-user-dropdown {
	width: 270px;
	padding: 0;
	overflow: hidden;
}

.nd5-user-summary {
	padding: 18px;
	background: linear-gradient(135deg, rgb(124 58 237 / 24%), rgb(236 72 153 / 10%));
}

.nd5-user-kicker { color: var(--nd5-primary-light); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.nd5-user-name { margin-top: 2px; color: #fff; font-size: 16px; font-weight: 800; }
.nd5-user-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.nd5-user-summary dl div { padding: 9px; background: rgb(0 0 0 / 18%); border-radius: 8px; }
.nd5-user-summary dt { color: var(--nd5-muted); font-size: 9px; }
.nd5-user-summary dd { margin-top: 2px; color: #fff; font-size: 11px; font-weight: 700; }
.nd5-user-links { padding: 8px; }
.nd5-user-links a { display: flex; align-items: center; gap: 10px; padding: 10px; color: var(--nd5-muted); border-radius: 8px; font-size: 12px; }
.nd5-user-links a:hover { color: #fff; background: rgb(124 58 237 / 17%); }
.nd5-user-links a i { width: 16px; color: var(--nd5-primary-light); text-align: center; }
.nd5-user-links a b { margin-left: auto; padding: 1px 6px; color: #fff; background: var(--nd5-secondary); border-radius: 99px; font-size: 9px; }
.nd5-logout { width: 100%; padding: 12px; color: #f9a8d4; border-top: 1px solid rgb(192 132 252 / 15%); font-size: 11px; font-weight: 700; }
.nd5-logout:hover { color: #fff; background: rgb(236 72 153 / 14%); }
.nd5-logout i { margin-right: 7px; }

/* 라이트 모드 상단 헤더 대비 */
html:not(.dark) .nd5-header {
	background: rgb(255 255 255 / 94%);
	border-bottom-color: rgb(124 58 237 / 14%);
	box-shadow: 0 4px 18px rgb(76 29 149 / 6%);
}

html:not(.dark) .nd5-gnb .nd5-nav-link {
	color: #9a76c4;
}

html:not(.dark) .nd5-gnb .nd5-nav-link:hover,
html:not(.dark) .nd5-gnb .nd5-nav-link:focus-visible {
	color: #6d28d9;
	background: linear-gradient(180deg, transparent, rgb(124 58 237 / 7%));
}

html:not(.dark) .nd5-gnb .nd5-nav-link.is-active {
	color: #4c1d95;
	background: linear-gradient(180deg, transparent, rgb(124 58 237 / 12%));
}

html:not(.dark) .nd5-btn-outline {
	color: #5b21b6;
	background: #f5f3ff;
	border-color: #7c3aed;
}

html:not(.dark) .nd5-btn-outline:hover,
html:not(.dark) .nd5-btn-outline:focus-visible {
	color: #fff;
	background: #6d28d9;
	border-color: #6d28d9;
}

html:not(.dark) .nd5-balance span {
	color: #7c3aed;
}

html:not(.dark) .nd5-balance strong {
	color: #2e1065;
}

html:not(.dark) .nd5-balance small {
	color: #6d28d9;
}

html:not(.dark) .nd5-user-btn {
	color: #5b21b6;
	background: #f3e8ff;
	border-color: #d8b4fe;
	box-shadow: 0 5px 14px rgb(124 58 237 / 13%);
}

html:not(.dark) .nd5-user-btn:hover,
html:not(.dark) .nd5-user-btn:focus-visible {
	background: #e9d5ff;
	border-color: #a855f7;
}

html:not(.dark) .nd5-user-btn > img {
	filter: brightness(.72) sepia(.45) saturate(4) hue-rotate(230deg);
}

/* 라이트 모드 언어 및 내 정보 레이어 */
html:not(.dark) .nd5-lang-dropdown,
html:not(.dark) .nd5-user-dropdown {
	color: #3b0764;
	background: rgb(255 255 255 / 98%);
	border-color: #e9d5ff;
	box-shadow: 0 22px 50px rgb(76 29 149 / 15%), 0 0 24px rgb(124 58 237 / 7%);
}

html:not(.dark) .nd5-lang-dropdown button {
	color: #5b3a78;
}

html:not(.dark) .nd5-lang-dropdown button:hover,
html:not(.dark) .nd5-lang-dropdown button:focus-visible {
	color: #4c1d95;
	background: #f3e8ff;
	outline: none;
}

html:not(.dark) .nd5-user-summary {
	background: linear-gradient(135deg, #f3e8ff, #fdf2f8);
	border-bottom: 1px solid #eadcff;
}

html:not(.dark) .nd5-user-kicker {
	color: #7c3aed;
}

html:not(.dark) .nd5-user-name {
	color: #3b0764;
}

html:not(.dark) .nd5-user-summary dl div {
	background: rgb(255 255 255 / 78%);
	border: 1px solid #eadcff;
}

html:not(.dark) .nd5-user-summary dt {
	color: #8b6aa5;
}

html:not(.dark) .nd5-user-summary dd {
	color: #2e1065;
}

html:not(.dark) .nd5-user-links a {
	color: #6f5187;
}

html:not(.dark) .nd5-user-links a i {
	color: #7c3aed;
}

html:not(.dark) .nd5-user-links a:hover,
html:not(.dark) .nd5-user-links a:focus-visible {
	color: #4c1d95;
	background: #f3e8ff;
	outline: none;
}

html:not(.dark) .nd5-logout {
	color: #be185d;
	border-top-color: #f3d6e6;
}

html:not(.dark) .nd5-logout:hover,
html:not(.dark) .nd5-logout:focus-visible {
	color: #9d174d;
	background: #fdf2f8;
	outline: none;
}

.nd5-mobile-toggle,
.nd5-mobile-drawer,
.nd5-drawer-overlay {
	display: none;
}

/* Vertical game cards: six columns on standard desktop widths. */
.game-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.game-card {
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.game-card:hover {
	transform: translateY(-4px);
}

.game-card .bg-brand-blue {
	background: linear-gradient(135deg, var(--nd5-primary), var(--nd5-secondary));
}

@media (min-width: 640px) {
	.game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 768px) {
	.game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
	.game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 1390px) {
	.nd5-header-bar { gap: 10px; padding-inline: 16px; }
	.nd5-logo img { width: 100px; }
	.nd5-nav-link { padding-inline: 7px; font-size: 18px; }
	.nd5-nav-link i { display: none; }
	.nd5-balance { display: none; }
}

@media (max-width: 1120px) {
	.nd5-gnb { display: none; }
	.nd5-mobile-toggle { display: inline-flex; }
	.nd5-header-bar { min-height: 68px; }
	.nd5-logo { margin-right: auto; }

	.nd5-drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 110;
		background: rgb(0 0 0 / 72%);
		backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .3s ease, visibility .3s ease;
	}

	.nd5-drawer-overlay.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.nd5-mobile-drawer {
		display: flex;
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 120;
		width: min(300px, 86vw);
		height: 100vh;
		height: 100dvh;
		flex-direction: column;
		color: var(--nd5-text);
		background: linear-gradient(180deg, #1a0d2e 0%, #140f1f 100%);
		border-right: 1px solid rgb(192 132 252 / 22%);
		box-shadow: 18px 0 50px rgb(0 0 0 / 45%);
		transform: translateX(-102%);
		visibility: hidden;
		overflow: hidden;
		transition: transform .3s ease, visibility .3s ease;
	}

	.nd5-mobile-drawer.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.nd5-drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 68px;
		padding: 0 18px 0 20px;
		border-bottom: 1px solid rgb(192 132 252 / 16%);
		background: rgb(255 255 255 / 2%);
		flex: 0 0 auto;
	}

	.nd5-drawer-logo {
		display: inline-flex;
		align-items: center;
	}

	.nd5-drawer-logo img {
		width: 108px;
		height: 38px;
		object-fit: contain;
	}

	.nd5-drawer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		color: var(--nd5-muted);
		background: rgb(255 255 255 / 4%);
		border: 1px solid rgb(192 132 252 / 16%);
		border-radius: 10px;
		font-size: 20px;
		transition: color .2s ease, background-color .2s ease, border-color .2s ease;
	}

	.nd5-drawer-close:hover,
	.nd5-drawer-close:focus-visible {
		color: #fff;
		background: rgb(124 58 237 / 18%);
		border-color: rgb(192 132 252 / 50%);
		outline: none;
	}

	.nd5-drawer-nav {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 5px;
		padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.nd5-drawer-nav .nd5-nav-link {
		display: flex;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		min-height: 46px;
		padding: 0 14px;
		color: var(--nd5-muted);
		background: transparent;
		border: 1px solid transparent;
		border-radius: 10px;
		font-size: 15px;
	}

	.nd5-drawer-nav .nd5-nav-link i {
		display: inline-block;
		width: 18px;
		color: var(--nd5-primary-light);
		font-size: 14px;
		text-align: center;
	}

	.nd5-drawer-nav .nd5-nav-link::after,
	.nd5-drawer-nav .nd5-nav-separator::before {
		display: none;
	}

	.nd5-drawer-nav .nd5-nav-link:hover,
	.nd5-drawer-nav .nd5-nav-link:focus-visible {
		color: #fff;
		background: rgb(124 58 237 / 14%);
		border-color: rgb(192 132 252 / 16%);
	}

	.nd5-drawer-nav .nd5-nav-link.is-active {
		color: #fff;
		background: linear-gradient(135deg, rgb(124 58 237 / 92%), rgb(236 72 153 / 72%));
		border-color: rgb(255 255 255 / 13%);
		box-shadow: 0 8px 24px rgb(124 58 237 / 24%);
	}

	.nd5-drawer-nav .nd5-nav-link.is-active i {
		color: #fff;
	}

	.nd5-drawer-nav .nd5-nav-separator {
		margin-top: 10px;
		margin-left: 0;
	}

	.nd5-drawer-footer {
		flex: 0 0 auto;
		padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
		background: rgb(255 255 255 / 2%);
		border-top: 1px solid rgb(192 132 252 / 12%);
	}

	.nd5-drawer-controls {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.nd5-drawer-controls .nd5-icon-btn {
		width: 40px;
		min-width: 40px;
		height: 40px;
		padding: 0;
		border-radius: 50%;
	}

	.nd5-drawer-controls #btn-language-toggle > i {
		display: none;
	}

	.nd5-drawer-controls .nd5-lang-dropdown {
		top: auto;
		right: auto;
		bottom: calc(100% + 10px);
		left: 0;
		z-index: 130;
	}

	.nd5-header-actions > .nd5-language-wrap,
	.nd5-header-actions > #theme-toggle {
		display: none;
	}

	body.nd5-menu-open .right-scroll {
		overflow: hidden;
	}

	html:not(.dark) .nd5-mobile-drawer {
		color: #3b0764;
		background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
		border-right-color: #e9d5ff;
		box-shadow: 18px 0 50px rgb(76 29 149 / 18%);
	}

	html:not(.dark) .nd5-drawer-header {
		background: rgb(255 255 255 / 92%);
		border-bottom-color: #eadcff;
	}

	html:not(.dark) .nd5-drawer-close {
		color: #6d28d9;
		background: #f3e8ff;
		border-color: #d8b4fe;
	}

	html:not(.dark) .nd5-drawer-close:hover,
	html:not(.dark) .nd5-drawer-close:focus-visible {
		color: #4c1d95;
		background: #e9d5ff;
		border-color: #a855f7;
	}

	html:not(.dark) .nd5-drawer-nav .nd5-nav-link {
		color: #80609d;
	}

	html:not(.dark) .nd5-drawer-nav .nd5-nav-link i {
		color: #7c3aed;
	}

	html:not(.dark) .nd5-drawer-nav .nd5-nav-link:hover,
	html:not(.dark) .nd5-drawer-nav .nd5-nav-link:focus-visible {
		color: #4c1d95;
		background: #f3e8ff;
		border-color: #e0c5fa;
	}

	html:not(.dark) .nd5-drawer-nav .nd5-nav-link.is-active {
		color: #fff;
		background: linear-gradient(135deg, #7c3aed, #c026d3);
		border-color: rgb(124 58 237 / 18%);
		box-shadow: 0 8px 24px rgb(124 58 237 / 20%);
	}

	html:not(.dark) .nd5-drawer-nav .nd5-nav-link.is-active i {
		color: #fff;
	}

	html:not(.dark) .nd5-drawer-footer {
		background: #faf5ff;
		border-top-color: #eadcff;
	}

	html:not(.dark) .nd5-drawer-controls .nd5-icon-btn {
		color: #6d28d9;
		background: #fff;
		border-color: #d8b4fe;
		box-shadow: 0 4px 12px rgb(124 58 237 / 9%);
	}

	html:not(.dark) .nd5-drawer-controls .nd5-icon-btn:hover,
	html:not(.dark) .nd5-drawer-controls .nd5-icon-btn:focus-visible {
		background: #f3e8ff;
		border-color: #a855f7;
	}
}

@media (max-width: 680px) {
	.nd5-page { --nd5-mobile-header-height: 62px; }
	.nd5-header-bar { min-height: 62px; padding-inline: 10px; gap: 20px; }
	.nd5-logo img { width: 86px; }
	.nd5-header-actions { gap: 5px; }
	.nd5-header-actions #theme-toggle,
	.nd5-wallet-actions .nd5-btn-outline { display: none; }
	.nd5-icon-btn, .nd5-mobile-toggle { min-width: 34px; height: 34px; padding: 0 7px; }
	.nd5-btn { min-width: 55px; height: 34px; padding-inline: 10px; font-size: 11px; }
	.nd5-drawer-header { min-height: 62px; }
}

@media (max-width: 420px) {
	.nd5-logo img { width: 72px; }
	.nd5-header-actions .nd5-language-wrap { display: none; }
}

/*
 * 모바일에서는 내부 패널이 아닌 문서 자체를 스크롤합니다.
 * 그래야 브라우저 주소창이 자연스럽게 축소되고, 고정 하단 메뉴가
 * 넓어진 visual viewport의 아래쪽을 따라 내려갑니다.
 */
@media (max-width: 767px) {
	html {
		height: auto;
		min-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	body.nd5-page {
		height: auto !important;
		min-height: 100vh;
		min-height: 100dvh;
		overflow-x: hidden;
		overflow-y: auto;
	}

	body.nd5-page > main {
		height: auto !important;
		min-height: 100vh;
		min-height: 100dvh;
		padding-top: var(--nd5-mobile-header-height);
		overflow: visible;
	}

	body.nd5-page .nd5-header {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 100;
	}

	body.nd5-page main > .right-scroll {
		flex: 0 0 auto;
		overflow: visible;
	}

	body.nd5-menu-open {
		overflow: hidden;
	}
}

.mobile-bottom-menu {
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.nd5-shimmer::before { animation: none; }
	.game-card, .game-img, .nd5-btn, .nd5-nav-link, .nd5-mobile-drawer, .nd5-drawer-overlay, .mobile-bottom-menu { transition-duration: .01ms !important; }
}