/* =========================================================
   XmasLegacy - Minecraft Christmas Server
   ========================================================= */

:root {
	--bg-0: #060a1a;
	--bg-1: #0b1230;
	--bg-2: #131d45;
	--panel: rgba(14, 22, 52, 0.82);
	--panel-border: #2a3a78;

	--red: #e5484d;
	--red-dark: #a51f2b;
	--green: #46b45f;
	--green-dark: #1f6e3a;
	--gold: #ffcf4a;
	--snow: #f4f8ff;

	--text: #e8eefc;
	--muted: #98a5c9;
	--mc-shadow: 2px 2px 0 #3f3f3f;

	--font-pixel: "Galmuri11", "Galmuri9", "NeoDunggeunmo", monospace;
	--font-body: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

	--nav-h: 72px;
	--radius: 4px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
	min-height: 100vh;
	font-family: var(--font-body);
	color: var(--text);
	line-height: 1.6;
	background:
		radial-gradient(1200px 600px at 80% -10%, rgba(70, 90, 200, 0.25), transparent 60%),
		radial-gradient(900px 500px at 0% 30%, rgba(229, 72, 77, 0.10), transparent 60%),
		linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
	background-attachment: fixed;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }

.pixel {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.container {
	width: min(1180px, 100% - 48px);
	margin-inline: auto;
}

.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-gold { color: var(--gold); }

#snow {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 50;
}

/* =========================================================
   Minecraft Button (9-slice: button.png 200x20)
   ========================================================= */
.mc-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 20px;
	font-family: var(--font-pixel);
	font-size: 15px;
	color: #fff;
	text-shadow: var(--mc-shadow);
	white-space: nowrap;
	background: #6d6d6d;
	border: 6px solid #000;
	border-image: url("../assets/mc/widget_button.png") 3 fill / 6px stretch;
	image-rendering: pixelated;
	user-select: none;
	transition: transform 0.08s ease;
}

.mc-btn img {
	height: 20px;
	width: auto;
	image-rendering: pixelated;
}

.mc-btn:hover:not(:disabled),
.mc-btn:focus-visible:not(:disabled) {
	border-image-source: url("../assets/mc/widget_button_highlighted.png");
	color: #ffffa0;
	outline: none;
}

.mc-btn:active:not(:disabled) { transform: translateY(1px); }

.mc-btn:disabled {
	border-image-source: url("../assets/mc/widget_button_disabled.png");
	color: #a0a0a0;
	text-shadow: none;
	cursor: not-allowed;
}

/* 회색 텍스처 위에 색을 얹는 컬러 버튼 */
.mc-btn--green::before,
.mc-btn--red::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.mc-btn--green::before { background: rgba(40, 200, 80, 0.85); }
.mc-btn--red::before { background: rgba(235, 50, 60, 0.85); }
.mc-btn--green:disabled::before,
.mc-btn--red:disabled::before { background: transparent; }

.mc-btn--sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
.mc-btn--lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.mc-btn--icon { min-height: 48px; width: 52px; padding: 0; }
.mc-btn--icon img { height: 22px; }
.mc-btn--full { width: 100%; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--nav-h);
	background: rgba(6, 10, 26, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition: background 0.3s;
}

.nav.is-scrolled { background: rgba(6, 10, 26, 0.88); }

.nav__inner {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 32px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.logo__block {
	width: 32px;
	height: 32px;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}

.logo__text {
	font-family: var(--font-pixel);
	font-size: 22px;
	letter-spacing: 0.5px;
	text-shadow: var(--mc-shadow);
}
.logo__text b { color: var(--red); font-weight: inherit; }

.nav__links {
	display: flex;
	gap: 28px;
	margin-right: auto;
}

.nav__links a {
	position: relative;
	font-family: var(--font-pixel);
	font-size: 14px;
	color: var(--muted);
	transition: color 0.2s;
}
.nav__links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transition: transform 0.2s;
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	font-family: var(--font-pixel);
	font-size: 12px;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
}
.status-pill__dot {
	width: 8px;
	height: 8px;
	background: #888;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}
.status-pill[data-state="online"] .status-pill__dot {
	background: #4dff7a;
	box-shadow: 0 0 8px #4dff7a;
	animation: pulse 1.6s infinite;
}
.status-pill[data-state="offline"] .status-pill__dot { background: var(--red); }

@keyframes pulse {
	50% { opacity: 0.4; }
}

.nav__burger {
	display: none;
	width: 40px;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 8px;
}
.nav__burger span {
	height: 3px;
	background: #fff;
}

/* 크리스마스 전구 */
.lights {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -14px;
	height: 18px;
	display: flex;
	justify-content: space-between;
	padding: 0 12px;
	pointer-events: none;
	overflow: hidden;
}
.lights::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: #1d2a1d;
}
.bulb {
	position: relative;
	width: 6px;
	height: 10px;
	margin-top: 2px;
	background: var(--c);
	box-shadow: 0 0 10px 2px var(--c);
	animation: twinkle 1.8s infinite steps(2);
	animation-delay: var(--d);
}
.bulb::before {
	content: "";
	position: absolute;
	top: -3px;
	left: 1px;
	width: 4px;
	height: 3px;
	background: #2c3a2c;
}
@keyframes twinkle {
	50% { opacity: 0.35; box-shadow: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
	position: relative;
	min-height: 100vh;
	padding-top: calc(var(--nav-h) + 48px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hero__sky {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(2px 2px at 10% 20%, #fff, transparent),
		radial-gradient(2px 2px at 30% 12%, #cfe0ff, transparent),
		radial-gradient(1.5px 1.5px at 55% 25%, #fff, transparent),
		radial-gradient(2px 2px at 72% 8%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 88% 30%, #cfe0ff, transparent),
		radial-gradient(1.5px 1.5px at 42% 40%, #fff, transparent),
		radial-gradient(2px 2px at 18% 48%, #fff, transparent);
	opacity: 0.8;
}

.moon {
	position: absolute;
	top: 16%;
	right: 8%;
	width: 72px;
	height: 72px;
	background: #fdf6d8;
	box-shadow:
		inset -12px -8px 0 #e6dbb0,
		0 0 60px 20px rgba(253, 246, 216, 0.15);
	image-rendering: pixelated;
}
.moon::before,
.moon::after {
	content: "";
	position: absolute;
	background: #e6dbb0;
}
.moon::before { width: 12px; height: 12px; top: 16px; left: 18px; }
.moon::after { width: 8px; height: 8px; top: 40px; left: 36px; }

.hero__inner {
	position: relative;
	flex: 1;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: 40px;
	padding-bottom: 140px;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	font-family: var(--font-pixel);
	font-size: 12px;
	color: #cfe0ff;
	background: rgba(20, 40, 90, 0.6);
	border: 2px solid #2a4a9a;
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
}
.badge img { width: 18px; height: 18px; }

.hero__title {
	margin: 22px 0 18px;
	line-height: 1;
}
.hero__title-sub {
	display: block;
	margin-bottom: 14px;
	font-family: var(--font-pixel);
	font-size: clamp(16px, 2vw, 20px);
	font-weight: 400;
	color: var(--gold);
	text-shadow: 2px 2px 0 #5a3d00;
}
.hero__title-main {
	position: relative;
	display: inline-block;
	font-family: var(--font-pixel);
	font-size: clamp(52px, 8vw, 104px);
	font-weight: 400;
	letter-spacing: -1px;
	color: #fff;
	text-shadow:
		4px 4px 0 var(--red-dark),
		8px 8px 0 rgba(0, 0, 0, 0.35);
}
/* 눈 쌓인 글자 효과 */
.hero__title-main::before {
	content: "";
	position: absolute;
	left: 2%;
	right: 4%;
	top: -6px;
	height: 10px;
	background:
		linear-gradient(90deg, #fff 0 8%, transparent 8% 12%, #fff 12% 30%, transparent 30% 34%,
			#fff 34% 52%, transparent 52% 57%, #fff 57% 78%, transparent 78% 82%, #fff 82% 100%);
	filter: drop-shadow(0 2px 0 #b9c9e8);
	opacity: 0.95;
}

.hero__desc {
	max-width: 520px;
	font-size: 18px;
	color: var(--muted);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.countdown {
	margin-top: 36px;
}
.countdown__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-family: var(--font-pixel);
	font-size: 13px;
	color: var(--muted);
}
.countdown__label img { width: 16px; height: 16px; }

.countdown__boxes {
	display: flex;
	gap: 10px;
}
.cd-box {
	min-width: 76px;
	padding: 10px 8px 8px;
	text-align: center;
	background: rgba(0, 0, 0, 0.45);
	border: 2px solid #000;
	box-shadow:
		inset 2px 2px 0 rgba(255, 255, 255, 0.08),
		inset -2px -2px 0 rgba(0, 0, 0, 0.4);
}
.cd-box b {
	display: block;
	font-family: var(--font-pixel);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	text-shadow: var(--mc-shadow);
}
.cd-box small {
	font-family: var(--font-pixel);
	font-size: 10px;
	letter-spacing: 1px;
	color: var(--muted);
}

.hero__visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.tree {
	--p: 18px;
	display: grid;
	grid-template-columns: repeat(15, var(--p));
	grid-auto-rows: var(--p);
	filter: drop-shadow(0 0 40px rgba(255, 207, 74, 0.18));
	animation: float 5s ease-in-out infinite;
}
.tree i { display: block; }
.tree .tw {
	animation: twinkle 1.4s infinite steps(2);
}
@keyframes float {
	50% { transform: translateY(-8px); }
}

.address {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	min-width: 300px;
	background: rgba(0, 0, 0, 0.55);
	border: 2px solid #a0a0a0;
	box-shadow: 0 0 0 2px #000;
	text-align: left;
	transition: border-color 0.15s;
}
.address:hover { border-color: #fff; }
.address__icon { width: 28px; height: 28px; }
.address__body { display: flex; flex-direction: column; flex: 1; }
.address__body small { font-size: 12px; color: var(--muted); }
.address__body b { font-family: var(--font-pixel); font-size: 17px; font-weight: 400; }
.address__copy {
	font-family: var(--font-pixel);
	font-size: 12px;
	color: var(--gold);
}

/* 눈 덮인 잔디 땅 */
.ground {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 128px;
	background:
		url("../assets/block/grass_block_side.png") repeat-x 0 0 / 64px 64px,
		url("../assets/block/dirt.png") repeat 0 0 / 64px 64px,
		#5b3f2a;
	image-rendering: pixelated;
	box-shadow: inset 0 -40px 60px rgba(0, 0, 0, 0.55);
}
.ground::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 16px;
	background:
		repeating-linear-gradient(90deg,
			#fff 0 24px, #e9f1ff 24px 32px, #fff 32px 52px, transparent 52px 56px, #fff 56px 64px);
	box-shadow: 0 4px 0 rgba(185, 201, 232, 0.6);
}

/* =========================================================
   STATS
   ========================================================= */
.stats {
	position: relative;
	z-index: 2;
	margin-top: -1px;
	background: linear-gradient(180deg, #1a120c, var(--bg-0));
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 28px 16px;
}
.stat + .stat { border-left: 1px dashed rgba(255, 255, 255, 0.1); }
.stat__icon { width: 32px; height: 32px; object-fit: contain; }
.stat b {
	display: block;
	font-family: var(--font-pixel);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.1;
	text-shadow: var(--mc-shadow);
}
.stat small { color: var(--muted); font-size: 13px; }

/* =========================================================
   SECTIONS (공통)
   ========================================================= */
.section { padding: 120px 0; position: relative; }

.section__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 56px;
}

.eyebrow {
	font-family: var(--font-pixel);
	font-size: 13px;
	letter-spacing: 3px;
	color: var(--gold);
	margin-bottom: 12px;
}

.section__title {
	font-family: var(--font-pixel);
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 400;
	line-height: 1.3;
	text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}

.section__desc {
	margin-top: 16px;
	font-size: 17px;
	color: var(--muted);
}

.note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--muted);
	background: rgba(0, 0, 0, 0.28);
	border-left: 3px solid #4a6bd0;
}
.note img { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.note b { color: #fff; }
.note--warn { border-left-color: var(--gold); }

/* =========================================================
   ABOUT (book.png 256x256, 페이지 영역 약 168x186)
   ========================================================= */
.about__grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 80px;
	align-items: center;
}

.book {
	--bs: 2.5px;
	position: relative;
	width: calc(168 * var(--bs));
	height: calc(186 * var(--bs));
	background: url("../assets/mc/book.png") no-repeat 0 0 / calc(256 * var(--bs)) calc(256 * var(--bs));
	image-rendering: pixelated;
	filter: drop-shadow(10px 14px 0 rgba(0, 0, 0, 0.35));
	transform: rotate(-2deg);
	transition: transform 0.3s;
}
.book:hover { transform: rotate(0deg) translateY(-4px); }

.book__page {
	position: absolute;
	inset: calc(16 * var(--bs)) calc(24 * var(--bs)) calc(22 * var(--bs)) calc(44 * var(--bs));
	font-family: var(--font-pixel);
	font-size: 13px;
	line-height: 1.75;
	color: #3b2a1a;
}
.book__page p + p { margin-top: 10px; }
.book__page em { font-style: normal; color: #b0262f; }
.book__chapter { font-size: 11px; color: #9a7b55; letter-spacing: 2px; }
.book__title {
	margin: 4px 0 12px;
	font-size: 19px;
	font-weight: 400;
	color: #1f150c;
	border-bottom: 2px dashed rgba(59, 42, 26, 0.3);
	padding-bottom: 8px;
}
.book__sign { text-align: right; color: #7a5a3a; }
.book__pageno {
	position: absolute;
	bottom: 0;
	left: 50%;
	font-size: 11px;
	color: #9a7b55;
}

.checklist {
	list-style: none;
	margin-top: 28px;
	display: grid;
	gap: 14px;
}
.checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
}
.checklist img { width: 18px; height: 16px; object-fit: contain; }

/* =========================================================
   FEATURES
   ========================================================= */
.features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.card {
	position: relative;
	padding: 28px 24px;
	background: var(--panel);
	border: 3px solid #000;
	box-shadow:
		inset 3px 3px 0 rgba(255, 255, 255, 0.07),
		inset -3px -3px 0 rgba(0, 0, 0, 0.45),
		0 10px 30px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s, box-shadow 0.2s;
}
.card::before {
	content: "";
	position: absolute;
	left: -3px;
	right: -3px;
	top: -3px;
	height: 9px;
	background: repeating-linear-gradient(90deg, #fff 0 18px, #e9f1ff 18px 22px, #fff 22px 40px, transparent 40px 44px);
}
.card:hover {
	transform: translateY(-6px);
	box-shadow:
		inset 3px 3px 0 rgba(255, 255, 255, 0.07),
		inset -3px -3px 0 rgba(0, 0, 0, 0.45),
		0 18px 40px rgba(0, 0, 0, 0.45);
}
.card__no {
	font-family: var(--font-pixel);
	font-size: 34px;
	color: transparent;
	-webkit-text-stroke: 1px var(--gold);
	margin-bottom: 12px;
}
.card:nth-child(even) .card__no { -webkit-text-stroke-color: var(--red); }
.card h3 {
	font-family: var(--font-pixel);
	font-size: 19px;
	font-weight: 400;
	margin-bottom: 10px;
}
.card p { font-size: 15px; color: var(--muted); }

/* =========================================================
   PRE-REGISTRATION
   ========================================================= */
.prereg {
	background:
		linear-gradient(180deg, transparent, rgba(229, 72, 77, 0.06) 50%, transparent);
}

.prereg__grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 64px;
	align-items: center;
}

.rewards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 28px;
}
.reward {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	background: rgba(0, 0, 0, 0.3);
	border: 2px solid rgba(255, 207, 74, 0.35);
}
.reward b { display: block; font-family: var(--font-pixel); font-size: 15px; font-weight: 400; color: var(--gold); }
.reward small { font-size: 13px; color: var(--muted); }
.reward__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	font-family: var(--font-pixel);
	font-size: 22px;
	color: #1a3a12;
	background: #6fd34f;
	box-shadow: inset -4px -4px 0 #3e9a2a, inset 4px 4px 0 #a6f08a;
}
.reward__icon.pixel {
	object-fit: contain;
	background: none;
	box-shadow: none;
}
.reward__icon--cookie {
	background: #c98a3e;
	box-shadow: inset -4px -4px 0 #8f5b22, inset 4px 4px 0 #e8b06a;
	position: relative;
}
.reward__icon--cookie::before,
.reward__icon--cookie::after {
	content: "";
	position: absolute;
	width: 6px;
	height: 6px;
	background: #4a2a12;
}
.reward__icon--cookie::before { top: 10px; left: 12px; box-shadow: 12px 8px 0 #4a2a12; }
.reward__icon--cookie::after { top: 24px; left: 10px; }

.steps {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 22px;
}
.steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	font-family: var(--font-pixel);
	font-size: 13px;
	background: rgba(255, 255, 255, 0.05);
}
.steps li span {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	background: var(--red);
	color: #fff;
	font-size: 12px;
}
.prereg__auth-notice {
	margin-top: 14px;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.6;
	color: #ffe0a6;
	background: rgba(190, 120, 30, 0.12);
	border-left: 3px solid var(--mc-yellow);
}
.prereg__auth-notice[hidden] { display: none; }
.prereg__guide-link {
	display: inline-flex;
	margin-top: 10px;
	color: #cfe0ff;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 검색 패널 (panel_search.png 256x256, 패널 영역 약 150x170) */
.search-panel {
	--ps: 2.8px;
	position: relative;
	width: calc(150 * var(--ps));
	height: calc(170 * var(--ps));
	padding: calc(28 * var(--ps)) calc(13 * var(--ps)) calc(13 * var(--ps));
	background: #373737;
	border: 4px solid #a0a0a0;
	box-shadow: inset 0 0 0 3px #555, 0 0 0 3px #000;
	image-rendering: pixelated;
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}
.search-panel__title {
	position: absolute;
	top: calc(10 * var(--ps));
	left: calc(26 * var(--ps));
	font-family: var(--font-pixel);
	font-size: 14px;
	color: #e0e0e0;
	text-shadow: var(--mc-shadow);
}

.sp-step {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(6px); }
}

.mc-label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-pixel);
	font-size: 12px;
	color: #a0a0a0;
}

.search-row { display: flex; gap: 8px; }

.mc-input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 12px;
	font-family: var(--font-pixel);
	font-size: 16px;
	color: #fff;
	background: #000;
	border: 2px solid #a0a0a0;
	outline: none;
	caret-color: #fff;
}
.mc-input::placeholder { color: #555; }
.mc-input:focus { border-color: #fff; }
.mc-input.is-invalid { border-color: var(--red); animation: shake 0.3s; }
@keyframes shake {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.sp-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 12px;
	color: #8a8a8a;
}
.sp-hint img { width: 14px; height: 14px; }

.sp-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	font-family: var(--font-pixel);
	font-size: 12px;
	line-height: 1.7;
	color: #6f6f6f;
	border: 2px dashed #4a4a4a;
}
.sp-empty__head {
	width: 48px;
	height: 48px;
	background: #4a4a4a;
	box-shadow:
		inset 8px 16px 0 -0px #3b3b3b,
		inset -8px 0 0 #555;
	opacity: 0.8;
}

.profile {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	background: rgba(0, 0, 0, 0.45);
	border: 2px solid #555;
}
.profile__avatar {
	width: 64px;
	height: 64px;
	background: #222;
	box-shadow: 0 0 0 2px #000;
}
.profile__info { min-width: 0; }
.profile__info b {
	display: block;
	font-family: var(--font-pixel);
	font-size: 20px;
	font-weight: 400;
	text-shadow: var(--mc-shadow);
}
.profile__info small {
	display: block;
	font-size: 11px;
	color: #8a8a8a;
	word-break: break-all;
}

.sp-alert {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	font-size: 13px;
	background: rgba(70, 180, 95, 0.12);
	border: 2px solid rgba(70, 180, 95, 0.5);
}
.sp-alert img { width: 18px; height: 16px; object-fit: contain; }

/* 체크박스 (checkbox*.png 20x20) */
.mc-check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 13px;
	color: #cfcfcf;
	line-height: 1.5;
}
.mc-check input { position: absolute; opacity: 0; pointer-events: none; }
.mc-check__box {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	background: #000 url("../assets/mc/widget_checkbox.png") no-repeat center / 100% 100%;
	image-rendering: pixelated;
}
.mc-check:hover .mc-check__box,
.mc-check input:focus-visible + .mc-check__box {
	background-image: url("../assets/mc/widget_checkbox_highlighted.png");
}
.mc-check input:checked + .mc-check__box {
	background-image: url("../assets/mc/widget_checkbox_selected.png");
}
.mc-check:hover input:checked + .mc-check__box {
	background-image: url("../assets/mc/widget_checkbox_selected_highlighted.png");
}

.sp-actions {
	margin-top: auto;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px;
}

.done {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
}
.done__avatar {
	width: 96px;
	height: 96px;
	margin-bottom: 8px;
	box-shadow: 0 0 0 3px #000, 0 0 40px rgba(70, 180, 95, 0.5);
}
.done__check {
	position: absolute;
	width: 36px;
	height: 32px;
	object-fit: contain;
	transform: translate(44px, -60px);
	animation: pop 0.4s cubic-bezier(.3, 1.8, .5, 1);
}
@keyframes pop {
	from { transform: translate(44px, -60px) scale(0); }
}
.done b {
	font-family: var(--font-pixel);
	font-size: 24px;
	font-weight: 400;
	text-shadow: var(--mc-shadow);
}
.done p { font-family: var(--font-pixel); color: #7dff94; font-size: 15px; }
.done small { font-size: 12px; color: #9a9a9a; }

/* =========================================================
   DOWNLOAD
   ========================================================= */
.download__card {
	padding: 40px;
	background: var(--panel);
	border: 3px solid #000;
	box-shadow:
		inset 3px 3px 0 rgba(255, 255, 255, 0.06),
		inset -3px -3px 0 rgba(0, 0, 0, 0.45),
		0 30px 60px rgba(0, 0, 0, 0.4);
}

.download__main {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-bottom: 32px;
	border-bottom: 2px dashed rgba(255, 255, 255, 0.08);
}

.launcher-icon {
	position: relative;
	width: 88px;
	height: 88px;
	flex-shrink: 0;
	padding: 8px;
	background: #000;
	border: 3px solid #a0a0a0;
}
.launcher-icon img { width: 100%; height: 100%; }
.launcher-icon::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	top: 8px;
	height: 10px;
	background: repeating-linear-gradient(90deg, #fff 0 12px, #e9f1ff 12px 16px);
}

.download__meta { flex: 1; }
.download__meta h3 {
	font-family: var(--font-pixel);
	font-size: 26px;
	font-weight: 400;
	margin-bottom: 8px;
}
.tag {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 3px 10px;
	font-family: var(--font-pixel);
	font-size: 12px;
	color: #cfe0ff;
	background: rgba(74, 107, 208, 0.18);
	border: 1px solid rgba(74, 107, 208, 0.5);
}

.download__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.install {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 32px 0;
	counter-reset: step;
}
.install li { position: relative; }
.install li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 14px;
	left: 54px;
	right: 0;
	height: 2px;
	background: repeating-linear-gradient(90deg, #4a5a90 0 6px, transparent 6px 12px);
}
.install b {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 30px;
	font-family: var(--font-pixel);
	font-size: 13px;
	font-weight: 400;
	background: var(--green-dark);
	border: 2px solid #000;
	box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2);
}
.install h4 {
	margin: 14px 0 6px;
	font-family: var(--font-pixel);
	font-size: 17px;
	font-weight: 400;
}
.install p { font-size: 14px; color: var(--muted); }

.download__notes { display: grid; gap: 10px; }

/* =========================================================
   FOOTER (dirt.png)
   ========================================================= */
.footer {
	position: relative;
	padding: 56px 0 48px;
	background:
		linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.82)),
		url("../assets/block/dirt.png") repeat 0 0 / 48px 48px,
		#2a1d12;
	image-rendering: pixelated;
	border-top: 3px solid #000;
}
.footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 12px;
	background: repeating-linear-gradient(90deg, #fff 0 30px, #e9f1ff 30px 36px, #fff 36px 58px, transparent 58px 64px);
}
.footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
	flex-wrap: wrap;
}
.footer__copy {
	margin-top: 14px;
	font-size: 12px;
	color: #8a8a8a;
}
.footer__links {
	display: flex;
	gap: 24px;
	font-family: var(--font-pixel);
	font-size: 13px;
	color: #bdbdbd;
}
.footer__links a:hover { color: #ffffa0; }

/* =========================================================
   TOAST (toast.png)
   ========================================================= */
.toasts {
	position: fixed;
	top: calc(var(--nav-h) + 20px);
	right: 20px;
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.toast {
	position: relative;
	width: 340px;
	aspect-ratio: 160 / 64;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 40px 0 54px;
	background: #0b2747 url("../assets/mc/toast_system.png") no-repeat 0 0 / 100% 100%;
	image-rendering: pixelated;
	pointer-events: auto;
	animation: toastIn 0.35s cubic-bezier(.2, 1.3, .5, 1);
}
.toast.is-leaving { animation: toastOut 0.3s forwards; }
@keyframes toastIn { from { transform: translateX(120%); } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

.toast__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	object-fit: contain;
	image-rendering: pixelated;
}
.toast__body { min-width: 0; }
.toast__title {
	display: block;
	font-family: var(--font-pixel);
	font-size: 14px;
	color: #ffff55;
	text-shadow: var(--mc-shadow);
}
.toast--error .toast__title { color: #ff7070; }
.toast--success .toast__title { color: #7dff94; }
.toast__msg {
	display: block;
	font-size: 13px;
	color: #fff;
	line-height: 1.4;
}
.toast__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	width: 22px;
	height: 22px;
	background: url("../assets/mc/widget_cross_button.png") no-repeat center / contain;
	image-rendering: pixelated;
	cursor: pointer;
}
.toast__close:hover { background-image: url("../assets/mc/widget_cross_button_highlighted.png"); }

/* =========================================================
   REVEAL
   ========================================================= */
/* transform 대신 translate 를 사용해 hover transform 과 충돌하지 않도록 함 */
.reveal {
	opacity: 0;
	translate: 0 24px;
	transition: opacity 0.7s ease, translate 0.7s ease, transform 0.25s, box-shadow 0.2s;
}
.reveal.is-visible {
	opacity: 1;
	translate: 0 0;
}

/* =========================================================
   실시간 서버 대시보드
   ========================================================= */
.live {
	background: linear-gradient(180deg, rgba(13, 25, 56, 0.78), rgba(6, 10, 26, 0.2));
	border-block: 2px solid rgba(110, 143, 219, 0.14);
}
.live__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}
.live-card {
	min-width: 0;
	padding: 24px;
	background: var(--panel);
	border: 3px solid #000;
	box-shadow:
		inset 3px 3px 0 rgba(255, 255, 255, 0.06),
		inset -3px -3px 0 rgba(0, 0, 0, 0.4),
		0 12px 32px rgba(0, 0, 0, 0.25);
}
.live-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.live-card__head .eyebrow { margin-bottom: 4px; }
.live-card__head h3 {
	font-family: var(--font-pixel);
	font-size: 20px;
	font-weight: 400;
}
.live-count {
	padding: 5px 10px;
	font-family: var(--font-pixel);
	font-size: 12px;
	color: var(--mc-aqua);
	background: rgba(0, 0, 0, 0.38);
	border: 1px solid rgba(85, 255, 255, 0.2);
	white-space: nowrap;
}
.world-map {
	position: relative;
	height: 300px;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 45%, rgba(64, 111, 84, 0.55), transparent 58%),
		linear-gradient(135deg, #142840, #172537 48%, #192d36);
	border: 3px solid #000;
	isolation: isolate;
}
.world-map::before,
.world-map::after {
	content: "";
	position: absolute;
	inset: 12%;
	border: 1px solid rgba(221, 243, 255, 0.16);
	transform: rotate(18deg);
	pointer-events: none;
}
.world-map::after {
	inset: 26% 8%;
	transform: rotate(-24deg);
	border-color: rgba(243, 255, 221, 0.1);
}
.world-map__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.3;
	background-image:
		linear-gradient(rgba(190, 220, 255, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(190, 220, 255, 0.12) 1px, transparent 1px);
	background-size: 32px 32px;
}
.world-map__message {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(80%, 320px);
	transform: translate(-50%, -50%);
	color: #c9d9e9;
	text-align: center;
	font-size: 14px;
	text-shadow: 1px 2px 0 #000;
}
.map-pin {
	position: absolute;
	z-index: 1;
	max-width: 130px;
	padding: 4px 7px 4px 20px;
	overflow: hidden;
	color: #fff;
	font-family: var(--font-pixel);
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: #244c36;
	border: 2px solid #000;
	box-shadow: inset 0 0 0 1px #77ce81, 2px 3px 0 rgba(0, 0, 0, 0.55);
	transform: translate(-50%, -50%);
}
.map-pin::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 6px;
	width: 7px;
	height: 7px;
	background: #ffff55;
	border: 1px solid #000;
	transform: translateY(-50%);
}
.live-card__note {
	margin-top: 12px;
	color: var(--muted);
	font-size: 12px;
}
.chat-messages {
	height: 300px;
	overflow-y: auto;
	padding: 8px;
	background: rgba(0, 0, 0, 0.5);
	border: 2px solid #000;
	scrollbar-color: #536a8e #111827;
}
.chat-message {
	display: flex;
	gap: 10px;
	padding: 9px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.chat-message:last-child { border-bottom: 0; }
.chat-message__avatar {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	background: #182235;
}
.chat-message__body { min-width: 0; }
.chat-message__meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.chat-message__meta b {
	color: #ffe17a;
	font-family: var(--font-pixel);
	font-size: 12px;
	font-weight: 400;
}
.chat-message__meta time { color: #8291aa; font-size: 10px; }
.chat-message__body p { overflow-wrap: anywhere; color: #e5eaf2; font-size: 13px; }
.chat-form {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}
.chat-form .mc-input { height: 42px; font-size: 13px; }
.chat-form .mc-btn { min-height: 42px; }
.voice-card { margin-top: 20px; }
.voice-card .section__desc { margin-bottom: 18px; }
.voice-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.voice-members { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.voice-member {
	padding: 5px 9px;
	color: #cfe0ff;
	font-family: var(--font-pixel);
	font-size: 11px;
	background: rgba(0, 0, 0, 0.32);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.voice-audio { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	clip-path: inset(50%);
	border: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
	.features__grid { grid-template-columns: repeat(2, 1fr); }
	.about__grid { gap: 48px; }
	.prereg__grid { gap: 40px; }
}

@media (max-width: 920px) {
	.nav__links {
		position: fixed;
		top: var(--nav-h);
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: rgba(6, 10, 26, 0.97);
		border-bottom: 2px solid #000;
		transform: translateY(-120%);
		transition: transform 0.25s;
		z-index: -1;
	}
	.nav__links.is-open { transform: none; }
	.nav__links a { padding: 16px 24px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
	.nav__links a::after { display: none; }
	.nav__burger { display: flex; }
	.nav__cta { display: none; }

	.hero__inner { grid-template-columns: 1fr; text-align: center; }
	.hero__desc { margin-inline: auto; }
	.hero__actions, .countdown__boxes, .countdown__label { justify-content: center; }
	.hero__visual { order: -1; }
	.tree { --p: 12px; }

	.about__grid,
	.prereg__grid { grid-template-columns: 1fr; justify-items: center; }
	.about__copy, .prereg__copy { width: 100%; }
	.live__grid { grid-template-columns: 1fr; }

	.download__main { flex-direction: column; text-align: center; }
	.download__buttons { justify-content: center; }
	.install { grid-template-columns: repeat(2, 1fr); }
	.install li::after { display: none; }
}

@media (max-width: 560px) {
	.container { width: calc(100% - 32px); }
	.section { padding: 80px 0; }
	.status-pill__text { display: none; }

	.cd-box { min-width: 64px; }
	.cd-box b { font-size: 24px; }

	.stats__grid { grid-template-columns: 1fr; }
	.stat + .stat { border-left: 0; border-top: 1px dashed rgba(255, 255, 255, 0.1); }
	.stat { justify-content: flex-start; padding: 18px 8px; }

	.features__grid,
	.rewards,
	.install { grid-template-columns: 1fr; }

	.book { --bs: 1.95px; }
	.book__page { font-size: 11px; line-height: 1.6; }
	.book__title { font-size: 15px; margin-bottom: 6px; }

	/* 모바일에서는 텍스처 대신 CSS 패널로 */
	.search-panel {
		width: 100%;
		height: auto;
		min-height: 440px;
		padding: 56px 18px 18px;
		background: #373737;
		border: 4px solid #c6c6c6;
		box-shadow: inset 0 0 0 3px #555, 0 0 0 3px #000;
	}
	.search-panel__title { top: 18px; left: 18px; }
	.sp-step { min-height: 360px; }

	.download__card { padding: 24px; }
	.address { min-width: 0; width: 100%; }
	.live-card { padding: 18px; }
	.live-card__head { align-items: flex-start; flex-direction: column; }
	.world-map,
	.chat-messages { height: 250px; }
	.chat-form { align-items: stretch; flex-direction: column; }
	.chat-form .mc-btn { width: 100%; }

	.toasts { left: 12px; right: 12px; align-items: center; }
	.toast { width: min(340px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}