/* =========================================================
   XmasLegacy · 공용 UI (실제 마인크래프트 GUI 텍스처 사용)
   ========================================================= */

:root {
	--mc-black: #000;
	--mc-white: #fff;
	--mc-text: #e6e6e6;
	--mc-gray: #a0a0a0;
	--mc-dark-gray: #555;
	--mc-yellow: #ffff55;
	--mc-red: #ff5555;
	--mc-green: #55ff55;
	--mc-aqua: #55ffff;
	--mc-gold: #ffaa00;
	--mc-purple: #aa00aa;
	--mc-shadow: #3f3f3f;
	--snow: #eaf2ff;

	--nav-h: 56px;
	--font: "Galmuri11", "Galmuri9", "DungGeunMo", "Malgun Gothic", monospace;
	--font-display: "Galmuri11", "Galmuri9", monospace;

	--gui: "/assets/mc";
	--item: "/assets/item";

	--panel-bg: #0f1420;
	--panel-border: #1d2637;
}

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

html {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--mc-text);
	background: #0a0d14;
	-webkit-font-smoothing: none;
	overflow-x: hidden;
}

img { image-rendering: pixelated; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
ul, ol { list-style: none; }

::selection { background: #3d5a8c; color: #fff; }

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

.pixel { image-rendering: pixelated; }

/* =========================================================
   텍스트 효과
   ========================================================= */
.shadow {
	text-shadow: 2px 2px 0 var(--mc-shadow);
}
.outline {
	text-shadow:
		2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
		2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
}
.text-yellow { color: var(--mc-yellow); }
.text-gold { color: var(--mc-gold); }
.text-green { color: var(--mc-green); }
.text-red { color: var(--mc-red); }
.text-gray { color: var(--mc-gray); }
.text-aqua { color: var(--mc-aqua); }

/* =========================================================
   마크 버튼 (widget/button.png = 200x20)
   ========================================================= */
.mc-btn {
	--slice: 8;
	--bw: 8px;
	--h: 40px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--h);
	padding: 0 20px;
	font-family: var(--font);
	font-size: 15px;
	color: var(--mc-white);
	text-shadow: 2px 2px 0 var(--mc-shadow);
	white-space: nowrap;
	user-select: none;
	background-color: #6f6f6f;
	background-image: url("../assets/mc/widget_button.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	image-rendering: pixelated;
	border: 0;
}
.mc-btn:hover:not(:disabled) {
	background-image: url("../assets/mc/widget_button_highlighted.png");
	color: #ffffa0;
}
.mc-btn:active:not(:disabled) {
	transform: translateY(1px);
}
.mc-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.mc-btn:disabled {
	background-image: url("../assets/mc/widget_button_disabled.png");
	color: #a0a0a0;
	text-shadow: 2px 2px 0 #1a1a1a;
	cursor: not-allowed;
}

.mc-btn img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.mc-btn--sm { --h: 32px; padding: 0 12px; font-size: 13px; }
.mc-btn--lg { --h: 52px; padding: 0 32px; font-size: 17px; }
.mc-btn--wide { width: 100%; }
.mc-btn--icon { padding: 0; width: var(--h); }
.mc-btn--icon img { width: 18px; height: 18px; }

/* =========================================================
   마크 체크박스 (widget/checkbox*.png = 20x20)
   ========================================================= */
.mc-check {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	color: var(--mc-text);
}
.mc-check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.mc-check__box {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background: 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,
.mc-check input:checked:focus-visible + .mc-check__box {
	background-image: url("../assets/mc/widget_checkbox_selected_highlighted.png");
}
.mc-check__text {
	font-size: 14px;
	line-height: 1.5;
}

/* =========================================================
   텍스트 필드 (widget/text_field.png = 200x20)
   ========================================================= */
.mc-input {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	font-family: var(--font);
	font-size: 16px;
	color: #e0e0e0;
	background-color: #000;
	background-image: url("../assets/mc/widget_text_field.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border: 0;
	outline: none;
	caret-color: #fff;
	image-rendering: pixelated;
}
.mc-input:focus {
	background-image: url("../assets/mc/widget_text_field_highlighted.png");
}
.mc-input::placeholder { color: #6b6b6b; }

/* =========================================================
   패널 (GUI 배경)
   ========================================================= */
.panel {
	position: relative;
	padding: 20px;
	background-color: var(--panel-bg);
	background-image:
		linear-gradient(rgba(12, 16, 26, 0.82), rgba(12, 16, 26, 0.9)),
		url("../assets/mc/menu_background.png");
	background-size: auto, 64px 64px;
	image-rendering: pixelated;
	border: 2px solid #000;
	box-shadow:
		inset 2px 2px 0 rgba(255, 255, 255, 0.06),
		inset -2px -2px 0 rgba(0, 0, 0, 0.55),
		0 6px 0 rgba(0, 0, 0, 0.35);
}
.panel--tight { padding: 14px; }

/* 인벤토리 스타일 테두리 */
.panel--inv {
	border: 4px solid #c6c6c6;
	box-shadow:
		inset 0 0 0 2px #555,
		inset 0 0 0 4px #8b8b8b,
		0 0 0 2px #000,
		0 8px 0 rgba(0, 0, 0, 0.4);
}

.panel__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 16px;
	color: #fff;
	text-shadow: 2px 2px 0 var(--mc-shadow);
}
.panel__title img { width: 20px; height: 20px; }
.panel__title small {
	margin-left: auto;
	font-size: 12px;
	color: var(--mc-gray);
	text-shadow: none;
}

/* =========================================================
   툴팁 (tooltip/background + frame)
   ========================================================= */
.mc-tooltip {
	position: relative;
	display: inline-block;
}
.mc-tooltip__content {
	position: absolute;
	z-index: 300;
	left: 50%;
	bottom: calc(100% + 10px);
	translate: -50% 0;
	min-width: 120px;
	max-width: 280px;
	padding: 6px 12px 5px;
	font-size: 13px;
	line-height: 1.5;
	color: #fff;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.12s;
}
.mc-tooltip__content::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../assets/mc/tooltip_background.png") center / 100% 100%;
	image-rendering: pixelated;
}
.mc-tooltip__content::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../assets/mc/tooltip_frame.png") center / 100% 100%;
	image-rendering: pixelated;
}
.mc-tooltip__content > span {
	position: relative;
	z-index: 1;
	display: block;
	white-space: normal;
}
.mc-tooltip:hover .mc-tooltip__content,
.mc-tooltip:focus-within .mc-tooltip__content {
	opacity: 1;
}

/* 툴팁 안의 텍스트 색상 */
.mc-tooltip__content .t-title { color: var(--mc-white); }
.mc-tooltip__content .t-gray { color: #aaa; }
.mc-tooltip__content .t-yellow { color: var(--mc-yellow); }
.mc-tooltip__content .t-green { color: var(--mc-green); }
.mc-tooltip__content .t-red { color: var(--mc-red); }

/* =========================================================
   슬롯 (container/slot.png = 18x18)
   ========================================================= */
.mc-slot {
	position: relative;
	display: grid;
	place-items: center;
	image-rendering: pixelated;
}
.mc-slot::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../assets/mc/container_slot.png") center / 100% 100%;
	box-shadow: 0 0 0 1px #000;
}

/* =========================================================
   토스트 (toast/system.png 160x64)
   ========================================================= */
.toasts {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 900;
	display: flex;
	flex-direction: column-reverse;
	gap: 8px;
	pointer-events: none;
}

.toast {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 320px;
	min-height: 64px;
	padding: 12px 36px 12px 22px;
	pointer-events: auto;
	background: #10233c url("../assets/mc/toast_system.png") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	color: #fff;
	text-shadow: 2px 2px 0 #1a1a1a;
	animation: toast-in 0.3s cubic-bezier(0.2, 1.4, 0.5, 1);
}
.toast.is-out { animation: toast-out 0.25s forwards; }
@keyframes toast-in {
	from { transform: translateY(120%); opacity: 0; }
}
@keyframes toast-out {
	to { transform: translateY(120%); opacity: 0; }
}
.toast__icon { width: 22px; height: 22px; flex-shrink: 0; }
.toast__title { display: block; font-size: 14px; color: var(--mc-yellow); }
.toast__msg { display: block; font-size: 13px; color: #fff; line-height: 1.4; }
.toast--error .toast__title { color: var(--mc-red); }
.toast--success .toast__title { color: var(--mc-green); }
.toast__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	width: 16px;
	height: 16px;
	background: url("../assets/mc/widget_cross_button.png") center / 100% 100%;
	image-rendering: pixelated;
	cursor: pointer;
}
.toast__close:hover { background-image: url("../assets/mc/widget_cross_button_highlighted.png"); }

/* =========================================================
   공용 레이아웃 / 헤더
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 400;
	background: rgba(6, 8, 13, 0.9);
	backdrop-filter: blur(4px);
	border-bottom: 2px solid #000;
	box-shadow: 0 2px 0 rgba(255, 255, 255, 0.05);
}
.site-header__inner {
	height: var(--nav-h);
	display: flex;
	align-items: center;
	gap: 24px;
}
.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 19px;
	color: #fff;
	text-shadow: 2px 2px 0 #6a0f12;
}
.logo img { width: 28px; height: 28px; }
.logo b { color: var(--mc-red); font-weight: 400; }

.site-nav {
	display: flex;
	gap: 20px;
	margin-right: auto;
	font-size: 14px;
	color: var(--mc-gray);
}
.site-nav a:hover { color: var(--mc-yellow); }

.header-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 서버 상태 (아이콘 ping 사용) */
.server-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	font-size: 12px;
	color: #cfd8e6;
	background: rgba(0, 0, 0, 0.4);
	border: 2px solid #000;
}
.server-status img { width: 10px; height: 8px; }

.user-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 4px;
	font-size: 13px;
	background: rgba(0, 0, 0, 0.4);
	border: 2px solid #000;
}
.user-chip img { width: 24px; height: 24px; }
.user-chip small { color: var(--mc-gray); font-size: 11px; }

/* =========================================================
   지도
   ========================================================= */
.map-wrap {
	position: relative;
	aspect-ratio: 16 / 10;
	background:
		linear-gradient(rgba(6, 12, 22, 0.55), rgba(6, 12, 22, 0.75)),
		url("../assets/block/snow.png");
	background-size: auto, 32px 32px;
	image-rendering: pixelated;
	border: 4px solid #000;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
}
.map-wrap.is-dragging { cursor: grabbing; }
.map-wrap canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

.map-legend {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc(100% - 20px);
}
.map-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px;
	font-size: 11px;
	color: #cfd8e6;
	background: rgba(0, 0, 0, 0.65);
	border: 1px solid #2a3a55;
}
.map-chip i {
	width: 8px;
	height: 8px;
	background: var(--mc-green);
}

.map-controls {
	position: absolute;
	right: 10px;
	top: 10px;
	display: flex;
	gap: 4px;
}
.map-controls .mc-btn {
	width: 32px;
	min-height: 32px;
	padding: 0;
	font-size: 18px;
}

/* =========================================================
   채팅 (마크 채팅창)
   ========================================================= */
.chat-box {
	display: flex;
	flex-direction: column;
	height: 420px;
	background: rgba(0, 0, 0, 0.35);
	border: 2px solid #000;
}
.chat-log {
	flex: 1;
	overflow-y: auto;
	padding: 10px;
	font-size: 13.5px;
	line-height: 1.65;
	text-shadow: 2px 2px 0 #000;
	scrollbar-width: thin;
	scrollbar-color: #777 #1a1a1a;
}
.chat-log::-webkit-scrollbar { width: 12px; }
.chat-log::-webkit-scrollbar-track { background: #1a1a1a; }
.chat-log::-webkit-scrollbar-thumb {
	background: url("../assets/mc/widget_scroller.png") center / 100% 100%;
	image-rendering: pixelated;
}
.chat-line { display: block; word-break: break-word; }
.chat-line b { font-weight: 400; }
.chat-line .server-tag {
	display: inline-block;
	margin-right: 6px;
	padding: 0 4px;
	font-size: 10px;
	vertical-align: 1px;
	color: #9fd2ff;
	background: rgba(60, 110, 170, 0.25);
	border: 1px solid rgba(120, 180, 255, 0.35);
}
.chat-line .web-mark { color: var(--mc-aqua); }
.chat-form {
	display: flex;
	gap: 6px;
	padding: 6px;
	border-top: 2px solid #000;
	background: rgba(0, 0, 0, 0.45);
}

/* =========================================================
   사전예약자 슬롯 그리드
   ========================================================= */
.slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
	gap: 6px;
}
.player-slot {
	position: relative;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: #8b8b8b;
	border: 2px solid #000;
	box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff;
	image-rendering: pixelated;
	cursor: pointer;
}
.player-slot::before {
	content: "";
	position: absolute;
	inset: 2px;
	background: url("../assets/mc/container_slot.png") center / 100% 100%;
	background-size: 100% 100%;
	box-shadow: inset 2px 2px 0 #373737;
}
.player-slot img {
	position: relative;
	z-index: 1;
	width: 80%;
	height: 80%;
	object-fit: contain;
	image-rendering: pixelated;
}
.player-slot:hover {
	outline: 2px solid #fff;
	outline-offset: -2px;
	z-index: 2;
}
.player-slot.is-me {
	border-color: var(--mc-green);
	box-shadow:
		0 0 0 2px var(--mc-green),
		inset 2px 2px 0 #1d5a1d,
		inset -2px -2px 0 #aaffaa;
}
.player-slot.is-me::after {
	content: "ME";
	position: absolute;
	z-index: 2;
	right: -2px;
	bottom: -2px;
	padding: 0 3px;
	font-size: 9px;
	color: #04240a;
	background: var(--mc-green);
}

/* =========================================================
   진행도 / 페이지
   ========================================================= */
.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
	font-size: 13px;
	color: var(--mc-gray);
}
.page-btn {
	width: 24px;
	height: 14px;
	background: url("../assets/mc/widget_page_backward.png") center / 100% 100%;
	image-rendering: pixelated;
}
.page-btn.is-next { background-image: url("../assets/mc/widget_page_forward.png"); }
.page-btn:hover { background-image: url("../assets/mc/widget_page_backward_highlighted.png"); }
.page-btn.is-next:hover { background-image: url("../assets/mc/widget_page_forward_highlighted.png"); }
.page-btn:disabled { opacity: 0.35; cursor: default; }

/* =========================================================
   보이스 (슬라이더 사용)
   ========================================================= */
.voice-member {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: rgba(0, 0, 0, 0.35);
	border: 2px solid #000;
}
.voice-member + .voice-member { margin-top: 6px; }
.voice-member img.head { width: 28px; height: 28px; }
.voice-member .name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-member .state { font-size: 11px; color: var(--mc-gray); }

.mc-slider {
	position: relative;
	height: 20px;
	background: url("../assets/mc/widget_slider.png") center / 100% 100%;
	image-rendering: pixelated;
	cursor: pointer;
}
.mc-slider__fill {
	position: absolute;
	inset: 2px auto 2px 2px;
	background: #808080 url("../assets/mc/widget_slider.png") center / 100% 100%;
	opacity: 0.55;
	pointer-events: none;
}
.mc-slider__handle {
	position: absolute;
	top: -3px;
	width: 12px;
	height: 26px;
	translate: -6px 0;
	background: url("../assets/mc/widget_slider_handle.png") center / 100% 100%;
	image-rendering: pixelated;
	pointer-events: none;
}
.mc-slider:hover .mc-slider__handle {
	background-image: url("../assets/mc/widget_slider_handle_highlighted.png");
}

/* =========================================================
   스크롤바 (전역)
   ========================================================= */
* {
	scrollbar-width: thin;
	scrollbar-color: #6b6b6b #1a1a1a;
}
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #1a1a1a; border: 2px solid #000; }
::-webkit-scrollbar-thumb {
	background: #7a7a7a url("../assets/mc/widget_scroller.png") center / 100% 100%;
	image-rendering: pixelated;
	border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover { background-color: #9a9a9a; }

/* =========================================================
   유틸
   ========================================================= */
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-16 { margin-bottom: 16px; }
.w-full { width: 100%; }
.center { text-align: center; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }

.spin {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	animation: spin 0.8s steps(8) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

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