/* Newdesign6: deep navy base with cyan/blue highlights */
:root {
	--theme-bg: #07111f;
	--theme-sidebar: #0b1626;
	--theme-surface: #10294a;
	--theme-line: #213d63;
	--theme-green: #4a81fa;
	--theme-green-hover: #84eaf8;
	--theme-green-dark: #356eea;
	--app-primary: #4a81fa;
	--app-primary-light: #84eaf8;
	--app-secondary: #84eaf8;
	--app-text: #eafcff;
	--app-muted: #8ba6c6;
}

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(7 17 31 / 97%);
	border-color: rgb(132 234 248 / 16%);
}

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

html.dark .game-card:hover {
	border-color: rgb(132 234 248 / 70%);
	box-shadow: 0 14px 34px rgb(74 129 250 / 24%), 0 8px 24px rgb(132 234 248 / 10%);
}

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

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

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

/* 중복되는 문의는 상단 GNB와 모바일 drawer에서만 숨깁니다. */
.app-gnb > a[href="helpdesk.html"],
.app-drawer-nav > a[href="helpdesk.html"] {
	display: none !important;
}

/* Newdesign6 hero: alternating Tiles3D / Bars3D transitions */
#carousel-container {
	isolation: isolate;
	perspective: 1400px;
	touch-action: pan-y;
}

.app-hero-particles {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: .64;
	mix-blend-mode: screen;
	transition: opacity .35s ease;
	contain: strict;
}

.app-hero-particles.is-boosted {
	opacity: .92;
}

.app-hero-track {
	z-index: 1;
	perspective: 1400px;
	transform-style: preserve-3d;
}

.app-hero-track > .app-hero-slide {
	/* Tailwind CDN .relative 우선 */
	position: absolute !important;
	inset: 0 !important;
	width: 100%;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .22s ease, visibility .22s ease;
}

.app-hero-track > .app-hero-slide.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.app-hero-track > .app-hero-slide.is-active.is-leaving {
	opacity: 0;
	visibility: visible;
	pointer-events: none;
}

/* 3D 조각 전환 프레임: 페이드 없음 */
.app-hero-track > .app-hero-slide.is-active.is-handoff {
	opacity: 1 !important;
	visibility: visible !important;
	transition: none !important;
}

/* Layered hero: background 3D transition -> object -> hero -> text */
.app-hero-visuals,
.app-hero-object-wrap,
.app-hero-person-wrap {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.app-hero-visuals {
	z-index: 0;
	overflow: hidden;
	contain: paint;
}

.app-hero-background,
.app-hero-object,
.app-hero-person {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
}

.app-hero-background {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.app-hero-object-wrap {
	z-index: 1;
	opacity: 0;
	transform: perspective(1000px) translate3d(0, 0, -420px) scale(.28);
	transform-origin: 50% 52%;
	transition: opacity .2s ease-out, transform .48s cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, transform;
}

.app-hero-person-wrap {
	z-index: 2;
	opacity: 0;
	filter: blur(5px);
	transform: translate3d(82px, 0, 0);
	transition: opacity .48s ease-out, filter .5s ease-out, transform .58s cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, filter, transform;
}

.app-hero-slide.is-object-visible .app-hero-object-wrap {
	opacity: 1;
	transform: perspective(1000px) translate3d(0, 0, 0) scale(1);
}

.app-hero-slide.is-person-visible .app-hero-person-wrap {
	opacity: 1;
	filter: blur(0);
	transform: translate3d(0, 0, 0);
}

.app-hero-object,
.app-hero-person {
	will-change: transform;
}

.app-hero-slide.is-object-visible .app-hero-object {
	animation: app-object-breathe 4.2s ease-in-out .48s infinite;
}

.app-hero-slide.is-person-visible .app-hero-person {
	animation: app-person-float 4.8s ease-in-out .58s infinite;
}

@keyframes app-object-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.024); }
}

@keyframes app-person-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, 5px, 0); }
}

.app-hero-copy > span,
.app-hero-copy > h3,
.app-hero-action {
	opacity: 0;
	filter: blur(8px);
	will-change: opacity, transform, filter;
}

.app-hero-copy > span {
	transform: translate3d(0, 14px, 0);
	transition: opacity .42s ease, transform .55s cubic-bezier(.22, 1, .36, 1), filter .45s ease;
}

.app-hero-copy > h3 {
	transform: translate3d(0, 28px, 0);
	transition: opacity .55s ease, transform .7s cubic-bezier(.16, 1, .3, 1), filter .55s ease;
}

.app-hero-action {
	transform: translate3d(0, 22px, 0) scale(.94);
	transition: opacity .48s ease, transform .65s cubic-bezier(.16, 1, .3, 1), filter .5s ease;
}

.app-hero-slide.is-content-visible .app-hero-copy > span,
.app-hero-slide.is-content-visible .app-hero-copy > h3,
.app-hero-slide.is-content-visible .app-hero-action {
	opacity: 1;
	filter: blur(0);
	transform: translate3d(0, 0, 0) scale(1);
}

.app-hero-slide.is-content-visible .app-hero-copy > span {
	transition-delay: .08s;
}

.app-hero-slide.is-content-visible .app-hero-copy > h3 {
	transition-delay: .18s;
}

.app-hero-slide.is-content-visible .app-hero-action {
	transition-delay: .36s;
}

.app-hero-slide.is-content-immediate .app-hero-copy > span,
.app-hero-slide.is-content-immediate .app-hero-copy > h3,
.app-hero-slide.is-content-immediate .app-hero-action {
	transition-duration: .01ms !important;
	transition-delay: 0s !important;
}

.app-hero-transition {
	position: absolute;
	inset: 0;
	z-index: 15;
	overflow: hidden;
	pointer-events: none;
	perspective: 1400px;
	transform-style: preserve-3d;
}

.app-hero-piece {
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	will-change: transform, opacity, filter;
}

.app-effect-tiles3d .app-hero-piece {
	transform-origin: 50% 50%;
}

.app-effect-tiles3d.is-running .app-hero-piece {
	animation: app-tiles3d-in .86s cubic-bezier(.18, .82, .26, 1) var(--piece-delay) both;
}

.app-effect-bars3d .app-hero-piece {
	transform-origin: 50% 50%;
}

.app-effect-bars3d.is-running .app-hero-piece {
	animation: app-bars3d-in .82s cubic-bezier(.2, .78, .22, 1) var(--piece-delay) both;
}

@keyframes app-tiles3d-in {
	0% {
		opacity: 0;
		filter: brightness(.2) saturate(.5);
		transform:
			translate3d(var(--tile-x), var(--tile-y), -300px)
			rotateX(var(--tile-rx))
			rotateY(var(--tile-ry))
			scale(.68);
	}

	70% {
		opacity: 1;
		filter: brightness(.35) saturate(.7);
	}

	88% {
		filter: brightness(.45) saturate(.8);
	}

	100% {
		opacity: 1;
		filter: brightness(1) saturate(1);
		transform:
			translate3d(0, 0, 0)
			rotateX(0)
			rotateY(0)
			scale(1);
	}
}

@keyframes app-bars3d-in {
	0% {
		opacity: 0;
		filter: brightness(.16) saturate(.5);
		transform:
			translate3d(0, 0, -220px)
			rotateY(var(--bar-rotate))
			scaleX(.62);
	}

	62% {
		opacity: 1;
		filter: brightness(.22) saturate(.58);
	}

	100% {
		opacity: 1;
		filter: brightness(1) saturate(1);
		transform:
			translate3d(0, 0, 0)
			rotateY(0)
			scaleX(1);
	}
}

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(74 129 250 / 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; 
}

/* 전역 스크롤바: 저채도 블루 */
:where([class*="scrollbar-color"]) {
	scrollbar-color: rgb(117 142 174 / 48%) transparent !important;
}

:where([class*="scrollbar-color"])::-webkit-scrollbar-track {
	background: transparent !important;
}

:where([class*="scrollbar-color"])::-webkit-scrollbar-thumb {
	background-color: rgb(117 142 174 / 42%) !important;
	border: 2px solid transparent;
	background-clip: padding-box;
	border-radius: 999px;
}

:where([class*="scrollbar-color"])::-webkit-scrollbar-thumb:hover {
	background-color: rgb(144 174 205 / 62%) !important;
}

/* 우측 본문 전용 커스텀 스크롤바 */
.right-scroll {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgb(117 142 174 / 48%) transparent;
}
.right-scroll::-webkit-scrollbar {
	width: 8px;
}
.right-scroll::-webkit-scrollbar-track {
	background: transparent;
}
.right-scroll::-webkit-scrollbar-thumb {
	background: rgb(117 142 174 / 42%);
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.right-scroll::-webkit-scrollbar-thumb:hover {
	background: rgb(144 174 205 / 62%);
}

/* 좌측 메뉴 스크롤바 */
.left-scroll::-webkit-scrollbar {
	width: 4px;
}
.left-scroll::-webkit-scrollbar-thumb {
	background: rgb(117 142 174 / 30%);
	border-radius: 4px;
}

/* 게임 카드 4레이어: 배경 / 투명 오브젝트 / 코드 그라데이션 / 게임 로고 */
.app-game-visual {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #07111f;
}

.app-game-visual--landscape { aspect-ratio: 16 / 9; }
.app-game-visual--portrait { aspect-ratio: 3 / 4; }
.app-game-visual--square { aspect-ratio: 1; }

.app-game-layer,
.app-game-gradient,
.app-game-logo,
.app-game-hover,
.app-game-badge {
	position: absolute;
}

.app-game-layer {
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.app-game-background {
	z-index: 0;
	object-fit: cover;
	transform: scale(1.1);
	filter: saturate(.72) brightness(.62) blur(1px);
	transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}

.app-game-object {
	z-index: 1;
	/* 인물 상단 중앙 정렬, 하단 overflow 정리 */
	object-fit: cover;
	object-position: center;
	transform-origin: center;
	transform: scale(1);
	filter: contrast(1);
	transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}

.app-game-gradient {
	z-index: 2;
	inset: 0;
	background: linear-gradient(180deg, transparent 31%, rgb(7 17 31 / 13%) 48%, var(--app-game-tone, #07111f) 100%);
	pointer-events: none;
}

.app-game-logo {
	z-index: 3;
	left: 12px;
	right: 12px;
	bottom: 11px;
	color: #fff;
	font-size: clamp(12px, 1.15vw, 17px);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -.035em;
	text-shadow: 0 2px 12px rgb(0 0 0 / 72%);
	pointer-events: none;
}

.app-game-logo img {
	display: block;
	margin: 0 auto;
	max-width: min(78%, 170px);
	max-height: 50px;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 2px 8px rgb(0 0 0 / 70%));
}

.app-game-hover {
	z-index: 10;
	background-color: rgb(0 0 0 / 18%) !important;
}
.app-game-badge { z-index: 11; }

/* 단일 썸네일 카드 호버 */
.game-card:hover .game-img {
	transform: scale(1.05);
}

.game-card:hover .app-game-background {
	/* 배경 축소·blur, 인물 확대 */
	transform: scale(1);
	filter: saturate(.82) brightness(.5) blur(5px);
}

.game-card:hover .app-game-object {
	transform: scale(1.1);
	filter: brightness(1.12) contrast(1.05) drop-shadow(0 0 20px #0cf);
}

.hide-scroll::-webkit-scrollbar {
	display: none;
}
.hide-scroll {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* 상단 카드 명도 분리, 테이블 기존 톤 유지 */
.app-tone-card {
	border-color: rgb(104 137 178 / 24%) !important;
}

html.dark .app-tone-card--raised {
	background: linear-gradient(135deg, #142946 0%, #10213a 100%) !important;
}

html.dark .app-tone-card--soft {
	background: #0d1a2c !important;
	border-color: rgb(104 137 178 / 18%) !important;
}

html.dark .app-tone-card--accent {
	background: linear-gradient(135deg, #132a42 0%, #0d1c30 100%) !important;
	border-color: rgb(87 150 225 / 30%) !important;
}

html.dark .app-tone-card--form {
	background: linear-gradient(145deg, #10213a 0%, #0d1b2e 100%) !important;
	border-color: rgb(98 149 211 / 28%) !important;
}

html:not(.dark) .app-tone-card--raised { background: #ffffff !important; }
html:not(.dark) .app-tone-card--soft { background: #f8fafc !important; }
html:not(.dark) .app-tone-card--accent { background: #f5f9ff !important; }
html:not(.dark) .app-tone-card--form { background: #fbfdff !important; }

/* 입출금 빠른 금액 버튼 */
.app-amount-quick-list > button:not(:last-child) {
	background: rgb(74 129 250 / 12%) !important;
	border-color: rgb(112 157 255 / 38%) !important;
	color: #9dc0ff !important;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
}

.app-amount-quick-list > button:not(:last-child):hover {
	background: rgb(74 129 250 / 28%) !important;
	border-color: rgb(151 187 255 / 68%) !important;
	color: #ffffff !important;
}

html:not(.dark) .app-amount-quick-list > button:not(:last-child) {
	background: rgb(74 129 250 / 9%) !important;
	border-color: rgb(74 129 250 / 28%) !important;
	color: #346bcf !important;
}

/* 본문 섹션 제목: 데스크톱 2xl */
@media (min-width: 1024px) {
	.right-scroll h2[class*="text-lg"][class*="flex"][class*="items-center"] {
		font-size: 1.5rem;
		line-height: 2rem;
		gap: .75rem;
	}

	.right-scroll h2[class*="text-lg"][class*="flex"][class*="items-center"] > img {
		width: 1.5rem;
		height: 1.5rem;
		object-fit: contain;
		flex: 0 0 1.5rem;
	}
}

@property --app-provider-scroll-alpha {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

/* Providers 모달: 고정 폭, 스크롤 중 thumb 표시 */
.app-provider-scroll {
	--app-provider-scroll-rgb: 117 142 174;
	--app-provider-scroll-alpha: 0;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: --app-provider-scroll-alpha .65s ease-out;
}

.app-provider-scroll::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background: transparent !important;
}

.app-provider-scroll::-webkit-scrollbar-track {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.app-provider-scroll::-webkit-scrollbar-thumb {
	background-color: rgb(var(--app-provider-scroll-rgb) / var(--app-provider-scroll-alpha)) !important;
	border: 0 !important;
	border-radius: 999px;
	box-shadow: none !important;
	transition: background-color .65s ease-out;
}

.app-provider-scroll.is-scrolling {
	--app-provider-scroll-alpha: 1;
	scrollbar-color: rgb(117 142 174 / 58%) transparent;
}

.app-provider-scroll.is-scrolling::-webkit-scrollbar-thumb {
	background-color: rgb(var(--app-provider-scroll-rgb) / var(--app-provider-scroll-alpha)) !important;
}

.app-provider-scroll.is-scrolling::-webkit-scrollbar-thumb:hover {
	background-color: rgb(144 174 205 / 70%) !important;
}

@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) {
	/* Mobile board list: title first, compact metadata second. */
	#board-list[data-board-type] table,
	#board-list[data-board-type] tbody,
	#board-list[data-board-type] tr,
	#board-list[data-board-type] td { display: block; width: 100%; }
	#board-list[data-board-type] thead,
	#board-list[data-board-type] td { display: none; }
	#board-list[data-board-type] tr {
		position: relative;
		padding: 14px 16px 13px;
		border-bottom: 1px solid rgb(132 234 248 / 12%);
	}
	#board-list[data-board-type] tr:last-child { border-bottom: 0; }
	#board-list[data-board-type="notice"] td:nth-child(2),
	#board-list[data-board-type="support"] td:nth-child(2),
	#board-list[data-board-type="message"] td:nth-child(3) {
		display: block; padding: 0 !important; color: #eafcff !important;
		font-size: 14px; font-weight: 750; line-height: 1.45;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	#board-list[data-board-type="notice"] td:nth-child(3),
	#board-list[data-board-type="support"] td:nth-child(4),
	#board-list[data-board-type="support"] td:nth-child(5),
	#board-list[data-board-type="message"] td:nth-child(4),
	#board-list[data-board-type="message"] td:nth-child(5) {
		display: inline-block; width: auto; padding: 5px 0 0 !important;
		margin-right: 10px; color: #8ba6c6 !important; font-size: 11px; line-height: 1;
	}
	#board-list[data-board-type="message"] tr { padding-left: 48px; }
	#board-list[data-board-type="message"] td:first-child {
		display: grid; position: absolute; left: 16px; top: 17px;
		width: 18px; height: 18px; padding: 0 !important; place-items: center;
	}
	#board-list[data-board-type="message"] td:first-child input { width: 16px; height: 16px; }
	.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(132 234 248 / 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(--app-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(74 129 250 / 15%);
		outline: none;
	}

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

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


/* Newdesign5 top GNB */
.app-page {
	--app-mobile-header-height: 68px;
	background: radial-gradient(circle at 70% -20%, rgb(74 129 250 / 18%), transparent 36%), #07111f;
}

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

.app-header-bar {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	min-height: 76px;
	padding: 0;
}

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

.app-logo img {
	display: block;
	width: 150px;
	height: 66px;
	object-fit: contain;
	animation: app-logo-glow 8s ease-in-out infinite alternate;
	will-change: filter;
	overflow: visible;
}

/* 로고의 실제 불투명 픽셀 외곽을 따라 천천히 숨 쉬는 글로우 */


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

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

.app-nav-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	flex: 0 0 24px;
}

.app-nav-icon img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
	opacity: .85;
	transition: opacity .2s ease, filter .2s ease;
}

.app-nav-link:hover .app-nav-icon img,
.app-nav-link:focus-visible .app-nav-icon img,
.app-nav-link.is-active .app-nav-icon img {
	opacity: 1;
	filter: brightness(0) invert(1);
}

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

.app-nav-link:hover,
.app-nav-link:focus-visible,
.app-nav-link.is-active {
	color: #fff;
	background: linear-gradient(180deg, transparent, rgb(74 129 250 / 12%));
}

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

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

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

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

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

.app-icon-btn:hover,
.app-mobile-toggle:hover {
	color: #fff;
	border-color: rgb(132 234 248 / 55%);
	background: rgb(74 129 250 / 15%);
}

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

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

.app-lang-dropdown,
.app-user-dropdown {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 168px;
	padding: 8px;
	color: var(--app-text);
	background: rgb(11 22 38 / 98%);
	border: 1px solid rgb(132 234 248 / 22%);
	border-radius: 14px;
	box-shadow: 0 22px 50px rgb(0 0 0 / 44%), 0 0 28px rgb(74 129 250 / 10%);
}

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

.app-lang-dropdown button:hover {
	background: rgb(74 129 250 / 18%);
}

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

.app-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;
}

.app-btn-primary {
	color: #fff;
	background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
	box-shadow: 0 8px 22px rgb(74 129 250 / 26%);
}

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

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

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

.app-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: app-button-shine 2.8s ease-in-out infinite;
}

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

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

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

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

.app-balance strong {
	color: #fff;
	font-size: 14px;
}

.app-balance small {
	margin-left: 2px;
	color: var(--app-primary-light);
	font-size: 12px;
	font-weight: normal;
}

#user-menu-trigger img{
	overflow: visible;
	transition: .5s all;
	-moz-transition: .5s all;
	-webkit-transition: .5s all;
	-o-transition: .5s all;
}

#user-menu-trigger:hover img{
	transform: rotateY(360deg);
	filter: drop-shadow(0 0 10px #0cf) brightness(2);

}

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

.app-user-summary {
	padding: 18px;
	background: linear-gradient(135deg, rgb(74 129 250 / 24%), rgb(132 234 248 / 10%));
}

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

/* 라이트 모드 상단 헤더 대비 */
/* 라이트 모드 언어 및 내 정보 레이어 */
.app-mobile-toggle,
.app-mobile-drawer,
.app-drawer-overlay {
	display: none;
}

/* 게임 그리드 */
.game-grid {
	--app-game-grid-columns: 2;
	display: grid;
	grid-template-columns: repeat(var(--app-game-grid-columns), minmax(0, 1fr));
	gap: 12px;
}

.game-grid-portrait .game-card > :first-child,
.game-grid-portrait .app-game-visual {
	aspect-ratio: 3 / 4 !important;
}

.game-grid-square .game-card > :first-child,
.game-grid-square .app-game-visual {
	aspect-ratio: 1 / 1 !important;
}

.game-grid-landscape .game-card > :first-child,
.game-grid-landscape .app-game-visual {
	aspect-ratio: 16 / 9 !important;
}

@media (max-width: 639px) {
	.game-grid--mobile-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
}

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

/* 게임 썸네일 inner glow */
.game-card > :first-child::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	box-shadow:
		inset 0 0 18px 2px rgb(74 129 250 / 42%),
		inset 0 0 42px 8px rgb(7 17 31 / 48%);
	transition: box-shadow .25s ease;
}

.game-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 40;
	padding: 3px;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		135deg,
		rgb(17 48 94 / 86%) 0%,
		rgb(35 94 190 / 92%) 31%,
		rgb(74 129 250 / 100%) 42%,
		rgb(132 234 248 / 100%) 46%,
		rgb(255 255 255 / 100%) 50%,
		rgb(132 234 248 / 100%) 54%,
		rgb(74 129 250 / 100%) 58%,
		rgb(35 94 190 / 92%) 69%,
		rgb(17 48 94 / 86%) 100%
	);
	background-size: 260% 260%;
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: opacity .18s ease;
}

html.dark .game-card:hover,
.game-card:hover {
	transform: translateY(0);
	box-shadow:
		0 0 0 1px rgb(74 129 250 / 86%),
		0 0 18px 5px rgb(74 129 250 / 68%),
		0 0 38px 11px rgb(53 110 230 / 42%),
		0 0 64px 18px rgb(31 86 170 / 24%);
}

.game-card:hover > :first-child::before {
	box-shadow:
		inset 0 0 24px 3px rgb(132 234 248 / 64%),
		inset 0 0 50px 10px rgb(53 110 230 / 52%),
		inset 0 0 68px 16px rgb(7 17 31 / 54%);
}

/* 게임 썸네일 전용: 어두운 마젠타 사이로 밝은 빛이 대각선 이동 */
.game-card:hover::after {
	opacity: 1;
	animation: app-game-thumbnail-sweep 1.45s linear infinite;
}

@keyframes app-game-thumbnail-sweep {
	0% {
		background-position: 100% 100%;
	}

	100% {
		background-position: 0% 0%;
	}
}

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

@media (min-width: 640px) {
	.game-grid { --app-game-grid-columns: 3; gap: 16px; }
}

@media (min-width: 768px) {
	.game-grid { --app-game-grid-columns: 4; }
}

/*

@media (min-width: 1024px) {
	.game-grid { --app-game-grid-columns: 5; }
}

@media (min-width: 1180px) {
	.game-grid { --app-game-grid-columns: 6; }
}
*/

@media (min-width: 1400px) {
	.game-grid-portrait { --app-game-grid-columns: 6; }
	.game-grid-square { --app-game-grid-columns: 5; }
	.game-grid-landscape { --app-game-grid-columns: 4; }

	.game-grid-cols-4 { --app-game-grid-columns: 4; }
	.game-grid-cols-5 { --app-game-grid-columns: 5; }
	.game-grid-cols-6 { --app-game-grid-columns: 6; }
}

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

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

	.app-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;
	}

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

	.app-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(--app-text);
		background: linear-gradient(180deg, #0b1626 0%, #07111f 100%);
		border-right: 1px solid rgb(132 234 248 / 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;
	}

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

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

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

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

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

	.app-drawer-close:hover,
	.app-drawer-close:focus-visible {
		color: #fff;
		background: rgb(74 129 250 / 18%);
		border-color: rgb(132 234 248 / 50%);
		outline: none;
	}

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

	.app-drawer-nav .app-nav-link {
		display: flex;
		justify-content: flex-start;
		gap: 14px;
		width: 100%;
		min-height: 56px;
		padding: 0 18px;
		color: var(--app-muted);
		background: transparent;
		border: 1px solid transparent;
		border-radius: 12px;
		font-size: 20px;
		line-height: 1.2;
	}

	.app-drawer-nav .app-nav-icon {
		display: flex;
		width: 22px;
		flex-basis: 22px;
	}

	.app-drawer-nav .app-nav-icon img {
		width: 20px;
		height: 20px;
	}

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

	.app-drawer-nav .app-nav-link:hover,
	.app-drawer-nav .app-nav-link:focus-visible {
		color: #fff;
		background: rgb(74 129 250 / 14%);
		border-color: rgb(132 234 248 / 16%);
	}

	.app-drawer-nav .app-nav-link.is-active {
		color: #fff;
		background: linear-gradient(135deg, rgb(74 129 250 / 92%), rgb(132 234 248 / 72%));
		border-color: rgb(255 255 255 / 13%);
		box-shadow: 0 8px 24px rgb(74 129 250 / 24%);
	}

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

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

	.app-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(132 234 248 / 12%);
	}

	.app-drawer-controls {
		display: flex;
		align-items: center;
		gap: 0;
	}

	.app-drawer-controls .app-icon-btn {
		width: 40px;
		min-width: 40px;
		height: 40px;
		padding: 0;
		overflow: hidden;
		border-radius: 10px;
		border: 0;
		vertical-align: middle;
		background-color: transparent;
	}

	.app-drawer-controls .app-icon-btn > img {
		width: 40px;
		height: 40px;
		max-width: none;
		max-height: none;
		object-fit: cover;
	}

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

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

	.app-header-actions > .app-language-wrap {
		display: none;
	}

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

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

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

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

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

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

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

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

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

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

@media (max-width: 639px) {
	.app-effect-tiles3d.is-running .app-hero-piece,
	.app-effect-bars3d.is-running .app-hero-piece {
		animation-duration: .7s;
	}

	.app-hero-copy > span,
	.app-hero-copy > h3,
	.app-hero-action {
		filter: blur(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.app-hero-particles {
		display: none !important;
	}

	.app-shimmer::before { animation: none; }
	.app-logo img,
	.app-drawer-logo img {
		animation: none;
		filter: drop-shadow(0 0 5px rgb(74 129 250 / 42%));
	}
	html.dark .game-card:hover,
	.game-card:hover {
		box-shadow:
			0 0 0 1px rgb(132 234 248 / 88%),
			0 0 22px 6px rgb(65 126 242 / 58%),
			0 0 42px 12px rgb(38 94 186 / 34%);
	}
	.game-card:hover::after {
		animation: none;
		background-position: 50% 50%;
	}
	.game-card,
	.game-img,
	.app-btn,
	.app-nav-link,
	.app-mobile-drawer,
	.app-drawer-overlay,
	.mobile-bottom-menu,
	.app-hero-slide,
	.app-hero-copy > span,
	.app-hero-copy > h3,
	.app-hero-action {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	.app-hero-object-wrap,
	.app-hero-person-wrap {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
		transition: none !important;
	}

	.app-hero-object,
	.app-hero-person {
		animation: none !important;
	}
}

/* ====================================================
   Header-bottom scrolling notice
   ==================================================== */

.app-notice-strip {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 48px;
	margin: 0 0 20px;
	overflow: hidden;
	color: #eefbff;
	border: 1px solid rgb(132 234 248 / 10%);
	border-radius: 13px;
	background: linear-gradient(90deg, #050b14 0%, #07101c 52%, #050b14 100%);
	box-shadow: inset 0 2px 7px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 255 255 / 2%), 0 10px 26px rgb(0 0 0 / 14%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.app-notice-icon {
	position: relative;
	z-index: 2;
	display: grid;
	flex: 0 0 52px;
	place-items: center;
	color: #c9f8ff;
	font-size: 19px;
	background: linear-gradient(135deg, rgb(25 57 96 / 34%), rgb(18 44 76 / 28%));
	box-shadow: inset -1px 0 0 rgb(255 255 255 / 4%), 10px 0 24px rgb(3 9 17 / 92%);
}

.app-notice-icon i {
	filter: drop-shadow(0 0 9px rgb(184 248 255 / 50%));
	animation: app-notice-megaphone 2.4s ease-in-out infinite;
}

.app-notice-viewport {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.app-notice-track {
	display: flex;
	align-items: center;
	width: max-content;
	height: 100%;
	will-change: transform;
	animation: app-notice-marquee 27s linear infinite;
}

.app-notice-message {
	display: block;
	flex: 0 0 auto;
	padding-right: 200px;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -.01em;
	opacity: 0.75;
	transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

.app-notice-message:hover {
	opacity: 1;
	text-shadow: 0 0 10px #0cf, 0 0 15px #08f;
}

.app-notice-strip:hover .app-notice-track,
.app-notice-strip:focus-within .app-notice-track {
	animation-play-state: paused;
}

@keyframes app-notice-marquee {
	to { transform: translate3d(-50%, 0, 0); }
}

@keyframes app-notice-megaphone {
	0%, 100% { transform: rotate(-6deg) scale(1); }
	50% { transform: rotate(5deg) scale(1.08); }
}

@media (max-width: 767px) {
	.app-notice-strip {
		height: 42px;
		margin-bottom: 15px;
		border-radius: 11px;
	}

	.app-notice-icon {
		flex-basis: 44px;
		font-size: 16px;
	}

	.app-notice-track {
		animation-duration: 22s;
	}

	.app-notice-message {
		padding-right: 100px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.app-notice-icon i,
	.app-notice-track {
		animation: none !important;
	}

	.app-notice-message[aria-hidden="true"] {
		display: none;
	}

	.app-notice-message {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ====================================================
   Wide-screen floating game banners
   ==================================================== */

.app-floating-banners {
	display: none;
}

@media (min-width: 1760px) {
	.app-floating-banners {
		display: block;
	}

	.app-floating-banner {
		position: fixed;
		top: 225px;
		z-index: 18;
		width: 128px;
		color: #fff;
		text-decoration: none;
		filter: drop-shadow(0 12px 20px rgb(0 0 0 / 30%));
		animation: app-floating-banner-in .8s cubic-bezier(.16, 1, .3, 1) both;
	}

	.app-floating-banner-left {
		left: calc(50% - 700px - 149px);
	}

	.app-floating-banner-right {
		right: calc(50% - 700px - 139px);
		animation-delay: .12s;
	}

	.app-floating-banner-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		transform-origin: center;
		will-change: transform;
		animation: app-floating-banner-left 5.2s ease-in-out infinite;
	}

	.app-floating-banner-right .app-floating-banner-inner {
		animation-name: app-floating-banner-right;
		animation-duration: 5.8s;
		animation-delay: -.9s;
	}

	.app-floating-banner img {
		display: block;
		width: 128px;
		height: 128px;
		object-fit: contain;
		transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
	}

	.app-floating-banner-copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 128px;
		min-width: 0;
		margin-top: 7px;
		padding: 8px 8px 9px;
		box-sizing: border-box;
		border: 1px solid rgb(132 234 248 / 40%);
		border-radius: 15px;
		text-align: center;
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: anywhere;
		background: linear-gradient(135deg, rgb(11 22 38 / 92%), rgb(13 36 59 / 88%));
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 8px 26px rgb(0 0 0 / 30%), 0 0 22px rgb(74 129 250 / 12%);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
	}

	.app-floating-banner-copy strong {
		display: block;
		width: 100%;
		font-size: 13px;
		font-weight: 900;
		line-height: 1.3;
		letter-spacing: -.01em;
	}

	.app-floating-banner-copy small {
		display: block;
		width: 100%;
		color: #0cf;
		font-size: 9px;
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: .035em;
	}

	.app-floating-banner:hover img,
	.app-floating-banner:focus-visible img {
		transform: translateY(-3px) scale(1.055) rotate(-1deg);
		filter: saturate(1.12) brightness(1.07) drop-shadow(0 0 18px rgb(132 234 248 / 34%));
	}

	.app-floating-banner-right:hover img,
	.app-floating-banner-right:focus-visible img {
		transform: translateY(-3px) scale(1.055) rotate(1deg);
	}

	.app-floating-banner:hover .app-floating-banner-copy,
	.app-floating-banner:focus-visible .app-floating-banner-copy {
		border-color: rgb(132 234 248 / 82%);
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 10px 30px rgb(0 0 0 / 34%), 0 0 30px rgb(132 234 248 / 30%);
		transform: translateY(-2px);
	}

	.app-floating-banner:focus-visible {
		border-radius: 28px;
		outline: 2px solid #b7f5ff;
		outline-offset: 5px;
	}
}

/* 데스크톱 최상단 이동 버튼 */
@media (min-width: 768px) {
	#scroll-to-top.app-scroll-top-btn {
		display: flex !important;
		position: fixed;
		right: 28px !important;
		bottom: 28px !important;
		z-index: 120;
		width: 52px;
		height: 52px;
		border: 1px solid rgb(132 234 248 / 30%);
		background: linear-gradient(145deg, rgb(18 48 88 / 92%), rgb(40 92 160 / 88%));
		box-shadow: 0 12px 30px rgb(0 0 0 / 34%), 0 0 22px rgb(74 129 250 / 18%);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	#scroll-to-top.app-scroll-top-btn:hover,
	#scroll-to-top.app-scroll-top-btn:focus-visible {
		border-color: rgb(132 234 248 / 72%);
		background: linear-gradient(145deg, #4a81fa, #3d76f2);
		box-shadow: 0 14px 34px rgb(0 0 0 / 38%), 0 0 30px rgb(132 234 248 / 36%);
	}

	#scroll-to-top.app-scroll-top-btn:focus-visible {
		outline: 2px solid #b7f5ff;
		outline-offset: 4px;
	}
}

@keyframes app-floating-banner-in {
	from { opacity: 0; transform: translateY(14px) scale(.9); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes app-floating-banner-left {
	0%, 100% { transform: translate3d(0, -5px, 0) rotate(-.35deg); }
	50% { transform: translate3d(0, 8px, 0) rotate(.45deg); }
}

@keyframes app-floating-banner-right {
	0%, 100% { transform: translate3d(0, 7px, 0) rotate(.4deg); }
	50% { transform: translate3d(0, -7px, 0) rotate(-.4deg); }
}

@media (prefers-reduced-motion: reduce) {
	.app-floating-banner,
	.app-floating-banner-inner {
		animation: none !important;
	}
}

/* ====================================================
   Newdesign5 motion system
   Scroll reveal, ambient motion and responsive feedback
   ==================================================== */

.app-ambient-layer {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

.app-ambient-orb {
	position: absolute;
	width: clamp(260px, 34vw, 620px);
	aspect-ratio: 1;
	border-radius: 50%;
	opacity: .14;
	filter: blur(80px);
	will-change: transform;
	background: radial-gradient(circle, rgb(132 234 248 / 72%) 0%, rgb(74 129 250 / 36%) 46%, transparent 72%);
	transform: translate3d(var(--app-ambient-x, 0), var(--app-ambient-y, 0), 0);
}

.app-ambient-orb:nth-child(1) {
	top: -18%;
	left: -10%;
	animation: app-ambient-drift-a 16s ease-in-out infinite alternate;
}

.app-ambient-orb:nth-child(2) {
	top: 28%;
	right: -16%;
	opacity: .1;
	animation: app-ambient-drift-b 21s ease-in-out infinite alternate;
}

.app-ambient-orb:nth-child(3) {
	bottom: -24%;
	left: 34%;
	opacity: .08;
	animation: app-ambient-drift-c 25s ease-in-out infinite alternate;
}

body.app-page > main > .right-scroll {
	position: relative;
	z-index: 1;
}

.app-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 180;
	width: 100%;
	height: 2px;
	pointer-events: none;
}

.app-scroll-progress::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(var(--app-scroll-progress, 0));
	transform-origin: left center;
	background: linear-gradient(90deg, #4a81fa 0%, #84eaf8 68%, #fff 100%);
	box-shadow: 0 0 12px rgb(132 234 248 / 90%);
	will-change: transform;
}

.app-motion-ready .app-reveal {
	--app-reveal-x: 0px;
	--app-reveal-y: 34px;
	opacity: 0;
	filter: blur(7px);
	transform: translate3d(var(--app-reveal-x), var(--app-reveal-y), 0) scale(.985);
	transition:
		opacity .9s cubic-bezier(.16, 1, .3, 1),
		transform 1.05s cubic-bezier(.16, 1, .3, 1),
		filter .82s ease;
	transition-delay: var(--app-reveal-delay, 0ms);
	will-change: opacity, transform, filter;
}

.app-motion-ready .app-reveal.app-reveal-left {
	--app-reveal-x: -42px;
	--app-reveal-y: 12px;
}

.app-motion-ready .app-reveal.app-reveal-right {
	--app-reveal-x: 42px;
	--app-reveal-y: 12px;
}

.app-motion-ready .app-reveal.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translate3d(0, 0, 0) scale(1);
	will-change: auto;
}

.app-motion-ready .game-card.app-reveal {
	--app-reveal-y: 26px;
	filter: blur(4px) saturate(.82);
}

.app-motion-ready .game-card.app-reveal.is-visible {
	filter: blur(0) saturate(1);
}

@media (hover: hover) and (pointer: fine) {
	.game-card.app-interactive-card.is-visible:hover {
		transform:
			perspective(900px)
			translate3d(0, 0, 0)
			rotateX(var(--app-tilt-x, 0deg))
			rotateY(var(--app-tilt-y, 0deg));
	}

	.game-card.app-interactive-card .game-img {
		transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
	}

	.game-card.app-interactive-card:hover .game-img {
		transform: scale(1.075) translate3d(var(--app-image-x, 0px), var(--app-image-y, 0px), 0);
		filter: saturate(1.1) contrast(1.03);
	}
}

.app-ripple-host {
	position: relative;
	overflow: hidden;
}

.app-ripple-wave {
	position: absolute;
	z-index: 20;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	pointer-events: none;
	background: rgb(255 255 255 / 48%);
	box-shadow: 0 0 18px rgb(132 234 248 / 72%);
	transform: translate3d(-50%, -50%, 0) scale(0);
	animation: app-ripple .65s ease-out forwards;
}

@keyframes app-ambient-drift-a {
	to { transform: translate3d(calc(var(--app-ambient-x, 0px) + 13vw), calc(var(--app-ambient-y, 0px) + 10vh), 0) scale(1.14); }
}

@keyframes app-ambient-drift-b {
	to { transform: translate3d(calc(var(--app-ambient-x, 0px) - 12vw), calc(var(--app-ambient-y, 0px) + 14vh), 0) scale(.88); }
}

@keyframes app-ambient-drift-c {
	to { transform: translate3d(calc(var(--app-ambient-x, 0px) + 8vw), calc(var(--app-ambient-y, 0px) - 12vh), 0) scale(1.2); }
}

@keyframes app-ripple {
	to { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(16); }
}

@media (max-width: 767px) {
	/* 입출금 내역: 화면별 셀 배치 */
	table[data-transaction-table] thead {
		display: none;
	}

	table[data-transaction-table] tbody,
	table[data-transaction-table] tr,
	table[data-transaction-table] td {
		display: block;
		width: 100%;
	}

	table[data-transaction-table] .transaction-row {
		position: relative;
		padding: 14px 16px 13px;
		border-bottom: 1px solid rgb(132 234 248 / 12%);
	}

	table[data-transaction-table] .transaction-row > td {
		display: none;
		padding: 0 !important;
	}

	table[data-transaction-table] .transaction-amount {
		display: block !important;
		padding: 0 82px 0 0 !important;
		color: #eafcff !important;
		font-size: 14px;
		line-height: 1.45;
	}

	table[data-transaction-table] .transaction-status {
		display: block !important;
		position: absolute;
		top: 14px;
		right: 16px;
		width: auto;
		padding: 0 !important;
	}

	table[data-transaction-table] .transaction-status > span {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
	}

	table[data-transaction-table] .transaction-sender,
	table[data-transaction-table] .transaction-date {
		display: inline-block !important;
		width: auto !important;
		padding: 5px 0 0 !important;
		margin-right: 10px;
		color: #8ba6c6 !important;
		font-size: 11px;
		line-height: 1;
	}

	/* 출금 목록: 모바일 계좌번호 숨김 */
	table[data-transaction-table="withdrawal"] .transaction-sender {
		display: none !important;
	}

	/* 문의하기: 제목 / 보낸사람·시간 / 우측 상태 뱃지 */
	#board-list[data-board-type="support"] tr {
		padding-right: 86px;
	}

	#board-list[data-board-type="support"] td:nth-child(3) {
		display: block;
		position: absolute;
		top: 14px;
		right: 16px;
		width: auto;
		padding: 0 !important;
		margin: 0;
		line-height: 1;
	}

	#board-list[data-board-type="support"] td:nth-child(3) > span {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
	}

	/* 제목 셀 안에 남아 있는 기존 모바일 상태 뱃지는 숨기고,
	   제목 오른쪽의 상태 셀만 표시합니다. */
	#board-list[data-board-type="support"] td:nth-child(2) > .block.md\\:hidden {
		display: none !important;
	}

	.app-ambient-orb {
		width: 82vw;
		opacity: .08;
		filter: blur(70px);
	}

	.app-motion-ready .app-reveal {
		--app-reveal-x: 0px !important;
		--app-reveal-y: 22px !important;
		filter: blur(4px);
		transition-duration: .72s, .86s, .68s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.app-ambient-orb,
	.app-ripple-wave {
		animation: none !important;
	}

	.app-ambient-layer,
	.app-scroll-progress {
		display: none !important;
	}

	.app-motion-ready .app-reveal,
	.app-motion-ready .app-reveal.is-visible {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
		transition: none !important;
	}
}