@charset "UTF-8";
/*
 * 모스바니 게임 이벤트 (docs/0015) — 화면 스타일
 *
 * 디자인 원본: mosvani-front-2 (React + Tailwind). Tailwind 유틸리티를 **손으로 고치는 CSS 한 장**
 * 으로 옮긴 것이다. 빌드 단계가 없다 — 이 파일을 고치면 그대로 반영된다.
 *
 * 손댈 때 알아 둘 것
 *  - 클래스는 전부 `mv-` 접두사다(사이트 공통 CSS 와 이름이 겹치지 않게).
 *  - 색은 아래 :root 토큰만 쓴다. 원본의 oklch 팔레트를 sRGB 로 환산해 둔 값이라
 *    같은 색을 두 곳에 적지 않는다. 시안이 직접 지정한 색(#E7F0FA 등)은 `--mv-c-*` 에 있다.
 *  - 이 페이지는 공통 레이아웃을 쓰지 않는 전체화면이라 리셋도 여기서 직접 한다(아래 첫 블록).
 *    사이트 공통 CSS 를 불러오지 않으므로 여기 없는 규칙은 브라우저 기본값이다.
 *  - 폭 기준: 껍데기 480px, 안쪽 콘텐츠 400px. 시안 그대로다.
 *  - 줄 높이는 원본(Tailwind)과 같게 둔다 — 기본은 html 의 1.5, `text-*` 크기에는 짝이 되는 줄 높이가 붙는다
 *    (xs 12/16 · sm 14/20 · base 16/24 · lg 18/28 · xl 20/28 · 2xl 24/32 · 3xl 30/36 · 4xl 36/40).
 *    원본이 이름 있는 크기면 font-size 옆에 짝 줄 높이를 함께 적는다. 빠뜨리면 텍스트마다 2~6px 씩 낮아진다(2026-09-15 실측).
 *    원본이 임의 크기(`text-[14px]`)면 줄 높이를 적지 않는다 — 원본도 부모에게서 물려받는다.
 */

/* ===== 토큰 ===== */
:root {
	/* 원본 팔레트(oklch) → sRGB 환산 */
	--mv-background-50: #F8F5EE;
	--mv-background-100: #F1EADC;
	--mv-background-200: #E7DDC8;
	--mv-background-300: #DACCB1;

	--mv-primary-50: #E0F1FF;
	--mv-primary-100: #C1E2FF;
	--mv-primary-200: #9BD3FF;
	--mv-primary-300: #6DBDFF;
	--mv-primary-400: #42A3FD;
	--mv-primary-500: #0082E6;
	--mv-primary-600: #006AC0;
	--mv-primary-700: #00539B;

	--mv-accent-600: #A84811;

	--mv-foreground-300: #A8BFE5;
	--mv-foreground-400: #81A0D1;
	--mv-foreground-500: #5C80BC;
	--mv-foreground-600: #446396;
	--mv-foreground-700: #2D4772;
	--mv-foreground-800: #1B2E4C;
	--mv-foreground-900: #08152C;
	--mv-foreground-950: #020511;

	/* 시안이 직접 지정한 색 */
	--mv-c-page: #E7F0FA;			/* 껍데기 바깥 바탕 */
	--mv-c-join: #F0F7FF;			/* 매장 선택 영역 */
	--mv-c-notice: #EFF4FF;			/* 유의사항 영역 */
	--mv-c-thumb: #E3ECFF;			/* 경품 이미지 바탕 */
	--mv-c-cat: #EDF3FC;			/* 경품소개 원형 썸네일 바탕 */
	--mv-c-soft: #F6F6F6;			/* 등수 pill·안내 박스 */
	--mv-c-line: #EAEAEA;			/* 목록 카드 테두리 */
	--mv-c-sub: #666666;			/* 보조 문구 */
	--mv-c-hint: #999999;			/* 더 옅은 보조 문구 */
	--mv-c-blue: #4297E3;			/* 등수 pill·워터마크 */
	--mv-c-navy: #0044A9;			/* 대표번호 라벨 */

	/* 중립 회색 — 수령완료 처리 */
	--mv-gray-50: #F9FAFB;
	--mv-gray-100: #F3F4F6;
	--mv-gray-200: #E5E7EB;
	--mv-gray-300: #D1D5DB;
	--mv-gray-400: #9CA3AF;
	--mv-gray-500: #6B7280;

	--mv-font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system,
		BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', sans-serif;

	--mv-radius: 12px;				/* rounded-xl */
	--mv-radius-lg: 16px;			/* rounded-2xl */
	--mv-shell: 480px;
	--mv-content: 400px;
}

/* ===== 리셋 (공통 CSS 를 쓰지 않는 전체화면이라 여기서 직접 한다) ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* 원본 Tailwind preflight 와 같은 기본 줄 높이 — 없으면 브라우저 기본값(normal, 약 1.2)이라 텍스트가 전부 낮아진다 */
html { line-height: 1.5; }
body { line-height: inherit; }
body {
	font-family: var(--mv-font);
	background: var(--mv-c-page);
	color: var(--mv-foreground-950);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}
img { display: block; max-width: 100%; border: 0; }
h1, h2, h3, p, ul, li { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
button {
	margin: 0; padding: 0; border: 0; background: none;
	font: inherit; color: inherit; cursor: pointer;
}
input { font: inherit; }
[hidden] { display: none !important; }

/* 오버레이가 열려 있는 동안 뒤 페이지를 잠근다 — 스크롤바가 두 개 보이지 않게(JS 가 토글한다) */
body.mv-locked { overflow: hidden; }

/* ===== 공용 버튼 ===== */
.mv-btn-primary {
	display: block; width: 100%;
	border-radius: var(--mv-radius);
	background: var(--mv-primary-500);
	color: #fff; font-weight: 700; text-align: center;
	line-height: 24px;		/* 원본 text-base 의 줄 높이. 없으면 폰트 기본값(약 19px)이라 버튼이 5px 낮아진다 */
	white-space: nowrap;
	transition: background-color .15s, transform .1s;
}
.mv-btn-primary:hover { background: var(--mv-primary-600); }
.mv-btn-primary:active { transform: scale(.98); }
.mv-btn-primary:disabled {
	background: var(--mv-background-300); color: var(--mv-foreground-500);
	cursor: not-allowed; transform: none;
}
.mv-btn-ghost {
	display: block; width: 100%;
	border: 1px solid var(--mv-background-300);
	border-radius: var(--mv-radius);
	background: #fff;
	color: var(--mv-foreground-800); font-weight: 600; text-align: center;
	line-height: 24px;		/* 원본 text-base 의 줄 높이 */
	white-space: nowrap;
	transition: background-color .15s;
}
.mv-btn-ghost:hover { background: var(--mv-background-100); }

/* ===== 껍데기 ===== */
.mv-page { min-height: 100vh; background: var(--mv-c-page); }
.mv-shell {
	position: relative;
	margin: 0 auto;
	width: 100%; max-width: var(--mv-shell);
	min-height: 100vh;
	background: #fff;
}

/* ===== 1단: 헤더 + 히어로 + 참여 ===== */
.mv-top { display: flex; flex-direction: column; height: 806px; }

.mv-header {
	position: sticky; top: 0; z-index: 40;
	display: flex; align-items: center; justify-content: space-between;
	height: 56px; padding: 0 20px;
	background: rgba(255,255,255,.95);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mv-header-logo { height: 24px; width: auto; object-fit: contain; }
.mv-header-history {
	display: flex; align-items: center; gap: 2px;
	font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
	color: var(--mv-foreground-950);
	transition: opacity .15s;
}
.mv-header-history:hover { opacity: .7; }
.mv-header-history-icon {
	display: flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; font-size: 16px; line-height: 24px;
}

.mv-hero {
	position: relative;
	display: flex; flex: 1 1 auto; flex-direction: column;
	overflow: hidden; background: #fff;
}
.mv-hero-bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	pointer-events: none;
}
.mv-hero-head {
	position: relative; z-index: 10;
	margin: 0 auto; width: 100%; max-width: var(--mv-content);
	padding: 40px 20px 0;
	text-align: center;
}
.mv-hero-title { margin: 0 auto; width: 224px; max-width: 100%; object-fit: contain; }
.mv-hero-lead {
	margin-top: 20px;
	font-size: 14px; line-height: 20px; font-weight: 700;
	color: var(--mv-foreground-800);
}
.mv-hero-period {
	display: inline-block;
	margin-top: 20px; padding: 4px 8px;
	border-top: 1px solid var(--mv-primary-200);
	border-bottom: 1px solid var(--mv-primary-200);
}
.mv-hero-period span {
	font-size: 12px; line-height: 16px; letter-spacing: .025em; white-space: nowrap;
	color: var(--mv-primary-500);
}
.mv-hero-hats {
	position: relative; z-index: 10;
	margin: auto auto 0; width: 100%; max-width: var(--mv-shell);
	display: flex; align-items: flex-end; justify-content: center;
	overflow: hidden; padding-bottom: 24px;
}
.mv-hero-hat { width: 200px; height: 180px; flex-shrink: 0; object-fit: contain; }
.mv-hero-hat--mid { position: relative; z-index: 10; margin: 0 -16px; }

.mv-join {
	display: flex; flex-direction: column; justify-content: center;
	height: 200px; padding: 0 20px;
	background: var(--mv-c-join);
}
.mv-join-inner { margin: 0 auto; width: 100%; max-width: var(--mv-content); }
.mv-join-form {
	margin: 0 auto; width: 100%; max-width: 320px;
	display: flex; flex-direction: column; gap: 12px;
}
.mv-join-submit { padding: 16px 0; font-size: 16px; }
.mv-join-note {
	margin-top: 12px;
	font-size: 14px; line-height: 20px; text-align: center;
	color: var(--mv-foreground-500);
}

/* 매장 선택 */
.mv-store { position: relative; width: 100%; }
.mv-store-toggle {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; padding: 14px 16px;
	border: 1px solid var(--mv-background-200);
	border-radius: var(--mv-radius);
	background: #fff; text-align: left;
	transition: border-color .15s;
}
.mv-store-toggle:hover { border-color: var(--mv-primary-300); }
.mv-store-label { color: var(--mv-foreground-400); }	/* 원본은 크기 지정 없음 — 버튼이 물려받는 16px/24px (종전 15px 은 원본에 없는 값이었다) */
.mv-store-label.mv-is-picked { color: var(--mv-foreground-950); }
.mv-store-arrow { color: var(--mv-foreground-500); transition: transform .2s; }
.mv-store-arrow.mv-is-open { transform: rotate(180deg); }
.mv-store-list {
	position: absolute; z-index: 20; top: 100%; left: 0;
	margin-top: 4px; width: 100%; max-height: 280px; overflow-y: auto;
	border: 1px solid var(--mv-background-200);
	border-radius: var(--mv-radius);
	background: #fff;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.mv-store-option {
	display: block; width: 100%; padding: 14px 16px;
	font-size: 14px; line-height: 20px; text-align: left;
	color: var(--mv-foreground-700);
	transition: background-color .15s;
}
.mv-store-option:hover { background: var(--mv-primary-50); }
.mv-store-option.mv-is-on {
	background: var(--mv-primary-50);
	font-weight: 500; color: var(--mv-primary-700);
}
.mv-store-empty { padding: 14px 16px; font-size: 14px; line-height: 20px; color: var(--mv-foreground-500); }

/* ===== 2단: 경품소개 ===== */
.mv-prizes {
	display: flex; flex-direction: column; justify-content: center;
	height: 592px; padding: 0 20px; background: #fff;
}
.mv-prizes-inner { margin: 0 auto; width: 100%; max-width: var(--mv-content); }
.mv-prizes-title {
	margin-bottom: 28px;
	font-size: 24px; line-height: 32px; font-weight: 700; text-align: center;
	color: var(--mv-foreground-950);
}
.mv-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mv-cat { display: flex; flex-direction: column; align-items: center; }
.mv-cat-thumb-wrap { position: relative; }
.mv-cat-random {
	position: absolute; top: -8px; right: -8px; z-index: 10;
	padding: 4px 10px; border-radius: 8px;
	background: var(--mv-foreground-900);
	font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap;
	color: var(--mv-background-50);
}
.mv-cat-thumb {
	display: flex; align-items: center; justify-content: center;
	width: 96px; height: 96px; overflow: hidden;
	border-radius: 9999px; background: var(--mv-c-cat);
}
.mv-cat-thumb img { width: 100%; height: 100%; padding: 12px; object-fit: contain; }
.mv-cat-label {
	margin-top: 12px;
	font-size: 12px; font-weight: 500; line-height: 1.375; text-align: center;
	color: var(--mv-foreground-900);
}
.mv-rank-list {
	margin-top: 28px; padding: 16px;
	border: 1px solid var(--mv-background-200);
	border-radius: var(--mv-radius-lg);
	background: #fff;
}
.mv-rank-row { display: flex; align-items: center; gap: 12px; }
.mv-rank-row + .mv-rank-row { margin-top: 10px; }
.mv-rank-pill {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 28px; flex-shrink: 0;
	border-radius: 9999px; background: var(--mv-c-soft);
	font-size: 12px; line-height: 16px; font-weight: 700; color: #000;
}
.mv-rank-pill--blue { color: var(--mv-c-blue); }
.mv-rank-name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mv-c-sub); }

/* ===== 3단: 유의사항 ===== */
.mv-notice { padding: 40px 20px; background: var(--mv-c-notice); }
.mv-notice-inner { margin: 0 auto; width: 100%; max-width: var(--mv-content); }
.mv-notice-title {
	margin-bottom: 20px;
	font-size: 20px; line-height: 28px; font-weight: 700; text-align: center;
	color: var(--mv-foreground-950);
}
.mv-notice-list li {
	display: flex; gap: 10px;
	font-size: 14px; line-height: 1.625;
	color: var(--mv-foreground-700);
}
.mv-notice-list li + li { margin-top: 12px; }
.mv-notice-dot {
	margin-top: 6px; width: 4px; height: 4px; flex-shrink: 0;	/* 원본 mt-1.5 */
	border-radius: 9999px; background: var(--mv-foreground-500);
}

/* ===== 푸터 ===== */
.mv-footer { padding: 24px 20px 40px; background: #fff; }
.mv-footer-inner { margin: 0 auto; width: 100%; max-width: var(--mv-content); }
.mv-footer-cs { text-align: center; }
.mv-footer-cs-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--mv-c-navy); }
.mv-footer-cs-tel {
	margin-top: 4px;
	font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.025em;
	color: var(--mv-foreground-950);
}
.mv-footer-cs-time { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--mv-foreground-500); }
.mv-footer-line {
	margin: 24px 0; width: 100%; height: 1px;
	background: var(--mv-background-300); opacity: .6;
}
.mv-footer-copy { font-size: 12px; line-height: 16px; text-align: center; color: var(--mv-foreground-400); }

/* ===== 오버레이 / 전체화면 ===== */
.mv-overlay { position: fixed; inset: 0; z-index: 90; overflow: hidden; background: var(--mv-c-page); }
.mv-overlay--center { display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.mv-overlay--scroll { z-index: 100; overflow-y: auto; }
.mv-screen {
	position: relative;
	margin: 0 auto; width: 100%; max-width: var(--mv-shell); height: 100%;
	display: flex; flex-direction: column;
	background: #fff;
}
.mv-screen--clip { overflow: hidden; }
.mv-screen--auto { height: auto; min-height: 100vh; }

.mv-close {
	position: absolute; top: 12px; right: 12px; z-index: 20;
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--mv-background-200);
	border-radius: 9999px;
	background: rgba(255,255,255,.9);
	font-size: 24px; line-height: 32px; color: var(--mv-foreground-600);
	transition: background-color .15s, color .15s;
}
.mv-close--plain { border: 0; }
.mv-close:hover { background: #fff; color: var(--mv-foreground-900); }

/* ===== 알림 모달 ===== */
.mv-modal {
	position: fixed; inset: 0; z-index: 100;
	display: flex; align-items: center; justify-content: center;
	padding: 0 16px;
}
.mv-modal--top { z-index: 110; }
.mv-modal-dim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.mv-modal-box {
	position: relative; z-index: 10;
	width: 100%; border-radius: var(--mv-radius-lg);
	background: #fff; padding: 24px;
	box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
	max-height: 90vh; overflow-y: auto;
}
.mv-modal-box--alert { max-width: 320px; text-align: center; }
.mv-modal-box--pin { max-width: 360px; }
.mv-modal-message { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--mv-foreground-900); }
.mv-modal-confirm { margin-top: 20px; padding: 12px 0; font-size: 14px; line-height: 20px; font-weight: 600; }

/* ===== 상태 안내 전체화면 ===== */
.mv-notify {
	display: flex; flex-direction: column; align-items: center;
	width: 100%; max-width: 360px; text-align: center;
}
.mv-notify-badge {
	display: flex; align-items: center; justify-content: center;
	width: 80px; height: 80px;
	border-radius: 9999px; background: var(--mv-background-100);
	font-size: 36px; line-height: 40px; color: var(--mv-foreground-500);
}
.mv-notify-title {
	margin-top: 20px;
	font-size: 20px; line-height: 28px; font-weight: 700; color: var(--mv-foreground-950);
}
.mv-notify-message {
	margin-top: 8px;
	font-size: 14px; line-height: 1.625; color: var(--mv-foreground-600);
}
.mv-notify-confirm { margin-top: 32px; padding: 16px 0; font-size: 16px; font-weight: 600; }

/* ===== 모자 선택 ===== */
.mv-hatpick {
	display: flex; flex: 1 1 auto; flex-direction: column;
	overflow: hidden; padding: 56px 16px 20px;
}
.mv-hatpick-head { flex-shrink: 0; text-align: center; }
.mv-hatpick-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--mv-foreground-950); }
.mv-hatpick-sub { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--mv-c-sub); }
.mv-hatpick-center {
	display: flex; flex: 1 1 auto; min-height: 0;
	flex-direction: column; justify-content: center;
}
.mv-hat-stage { position: relative; height: 280px; flex-shrink: 0; }
.mv-hat-track {
	display: flex; align-items: center;
	height: 100%; padding: 0 10%;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* 손가락으로 좌우 스와이프해 모자를 넘긴다. 이 화면은 세로 스크롤이 없어 pan-x 로 둔다 */
	touch-action: pan-x;
	-ms-overflow-style: none; scrollbar-width: none;
}
.mv-hat-track.mv-no-snap { scroll-snap-type: none; }
.mv-hat-track::-webkit-scrollbar { display: none; }
.mv-hat-slide {
	display: flex; align-items: center; justify-content: center;
	height: 100%; width: 80%; flex-shrink: 0;
	scroll-snap-align: center;
}
.mv-hat-slide-inner {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; padding: 0 4px;
	transform: scale(.9); opacity: .4;
	transition: transform .3s, opacity .3s;
}
.mv-hat-slide.mv-is-on .mv-hat-slide-inner { transform: scale(1); opacity: 1; }
.mv-hat-img { width: 100%; height: 100%; object-fit: contain; }
.mv-hat-nav {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin-top: 8px; padding: 0 4px; flex-shrink: 0;
}
.mv-hat-arrow {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; flex-shrink: 0;
	border: 1px solid var(--mv-background-200);
	border-radius: 9999px; background: #fff;
	font-size: 24px; line-height: 32px; color: var(--mv-foreground-700);
	transition: background-color .15s;
}
.mv-hat-arrow:hover { background: var(--mv-background-50); }
.mv-hat-arrow:disabled { opacity: .4; cursor: not-allowed; }
.mv-hat-name {
	display: flex; flex-direction: column; align-items: center;
	min-width: 0;
}
.mv-hat-series {
	font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: .025em;
	color: var(--mv-foreground-950);
}
.mv-hat-color { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mv-c-sub); }
.mv-hat-dots {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	flex-shrink: 0;
}
.mv-hat-dot {
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	transition: transform .15s;
}
.mv-hat-dot:hover { transform: scale(1.1); }
.mv-hat-dot img { width: 100%; height: 100%; object-fit: contain; }
.mv-hatpick-foot { margin-top: 20px; flex-shrink: 0; }
.mv-hatpick-submit { padding: 16px 0; font-size: 16px; }

/* ===== 모자 개봉 연출 ===== */
.mv-draw-intro { position: relative; z-index: 20; padding: 56px 24px 0; text-align: center; }
.mv-draw-intro-title { font-size: 30px; line-height: 36px; font-weight: 700; color: var(--mv-foreground-950); }
.mv-draw-intro-sub { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--mv-c-sub); }
.mv-draw-stage { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; }
.mv-draw-center {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 320px; height: 320px;
}
.mv-draw-disc-wrap {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
}
.mv-draw-disc {
	display: flex; align-items: center; justify-content: center;
	width: 320px; height: 320px;
	border-radius: 9999px; background: var(--mv-c-thumb);
}
.mv-draw-peek {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 256px; height: 256px;
}
.mv-draw-peek img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mv-draw-reveal {
	position: absolute; inset: 0; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
}
.mv-draw-reveal-inner {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 384px; height: 384px;
}
.mv-draw-reveal-inner img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mv-draw-caption {
	position: absolute; left: 0; right: 0; top: -64px; z-index: 30;
	display: flex; justify-content: center;
}
.mv-draw-caption p {
	font-size: 30px; line-height: 36px; font-weight: 700; white-space: nowrap;
	color: var(--mv-foreground-950);
}
.mv-draw-hat {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
}
.mv-draw-hat img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mv-draw-shadow {
	position: absolute; bottom: 8px; left: 50%;
	width: 160px; height: 16px;
	border-radius: 9999px;
	background: rgba(8,21,44,.15);
	filter: blur(16px);
	transform: translateX(-50%);
}

/* ===== 결과 / 상세 카드 (당첨완료·당첨내역 상세가 공유) ===== */
.mv-result-scroll { flex: 1 1 auto; overflow-y: auto; }
.mv-result-body { padding: 48px 24px 24px; text-align: center; }
.mv-result-body--tight { padding-top: 24px; }
.mv-result-rank {
	display: inline-flex; align-items: center;
	padding: 6px 14px; border-radius: 9999px;
	background: var(--mv-primary-100);
	font-size: 14px; line-height: 20px; font-weight: 700; color: var(--mv-primary-700);
}
.mv-result-title {
	margin-top: 16px;
	font-size: 24px; line-height: 32px; font-weight: 700; color: var(--mv-foreground-950);
}
.mv-result-sub { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--mv-c-sub); }
.mv-result-actions {
	flex-shrink: 0;
	display: flex; gap: 12px;
	padding: 16px 24px 24px; background: #fff;
}
.mv-result-ok, .mv-result-history { flex: 1 1 0; padding: 16px 0; font-size: 16px; font-weight: 600; }

.mv-card {
	margin-top: 24px; overflow: hidden;
	border: 1px solid var(--mv-background-200);
	border-radius: var(--mv-radius-lg);
	background: #fff; text-align: left;
}
.mv-card-visual {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	padding: 24px; background: var(--mv-c-thumb);
}
.mv-card-visual--coupon { padding: 24px; }
.mv-card-visual--coupon img { width: 190px; height: 110px; object-fit: contain; }
.mv-card-visual--physical { padding: 32px 24px; }
.mv-card-visual--physical img { width: 100%; max-width: 340px; max-height: 288px; object-fit: contain; }
.mv-card-badge {
	position: absolute; top: 12px; right: 12px; z-index: 30;
	padding: 4px 12px; border-radius: 9999px;
	font-size: 12px; line-height: 16px; font-weight: 700;
	background: var(--mv-primary-500); color: #fff;
}
.mv-card-badge--done { background: var(--mv-gray-200); color: var(--mv-gray-500); }
.mv-card-random {
	position: absolute; top: 12px; left: 12px; z-index: 30;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 9999px;
	background: var(--mv-foreground-900);
	font-size: 12px; line-height: 16px; font-weight: 700;
	color: var(--mv-background-50);
}

.mv-coupon-code { padding: 20px 20px 0; }
.mv-coupon-code-box { padding: 4px 16px 8px; text-align: center; }
.mv-coupon-code-label { font-size: 14px; color: var(--mv-c-hint); }
.mv-coupon-code-value {
	margin-top: 2px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 20px; font-weight: 600; letter-spacing: .025em;
	color: #000; word-break: break-all;
}
.mv-coupon-code-none {
	padding: 16px; text-align: center;
	font-size: 14px; line-height: 1.6; color: var(--mv-c-sub);
}
.mv-coupon-barcode {
	margin-top: 16px; padding: 20px 0;
	border-radius: var(--mv-radius); background: var(--mv-c-soft);
}

.mv-card-rows { padding: 4px 20px; }
.mv-row {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
	padding: 12px 0; font-size: 14px; line-height: 20px;
}
.mv-row-label {
	display: flex; align-items: center; gap: 8px; flex-shrink: 0;
	color: var(--mv-foreground-500);
}
.mv-row-label i { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.mv-row-value {
	text-align: right; font-weight: 500; line-height: 1.625;
	color: var(--mv-foreground-900);
}
.mv-row-value p { margin: 0; }
.mv-row-value p + p { margin-top: 2px; }

.mv-card-guide { padding: 4px 20px 20px; }
.mv-card-guide-box {
	padding: 16px; border-radius: var(--mv-radius);
	background: var(--mv-c-soft);
	text-align: center; font-size: 16px; line-height: 1.625; color: var(--mv-c-sub);
}
.mv-card-guide-box strong { font-weight: 600; color: var(--mv-foreground-950); }
.mv-card-tail { height: 20px; }

/* 바코드 — 색은 순수 흑백 고정. 대비가 곧 인식률이라 테마가 바뀌어도 흔들리면 안 된다. */
.mv-barcode { display: flex; flex-direction: column; align-items: center; }
.mv-barcode-svg { width: 88%; height: 56px; }
/* 공백 색은 박스 배경과 맞춘다. 스캐너는 빨간빛으로 읽으므로 파랑·초록·진한 색으로 바꾸면 인식이 떨어진다 */
.mv-barcode-bg { fill: var(--mv-c-soft); }
.mv-barcode-text {
	margin-top: 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px; line-height: 20px; letter-spacing: .18em; color: var(--mv-foreground-900);
}

/* ===== 캡처 방지 워터마크 (실물 경품 수령 전에만) ===== */
.mv-wm { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.mv-wm-diag {
	position: absolute; inset: 0;
	display: flex; align-items: center; overflow: hidden;
	transform: rotate(-22deg);
}
.mv-wm-track { display: flex; min-width: 100%; white-space: nowrap; }
.mv-wm-diag .mv-wm-text {
	padding: 0 32px;
	font-size: 24px; line-height: 32px; font-weight: 900; letter-spacing: .3em; white-space: nowrap;
	color: rgba(66,151,227,.5);
}
.mv-wm-bar {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; align-items: center; height: 36px;
	overflow: hidden; background: var(--mv-c-blue);
}
.mv-wm-bar .mv-wm-text {
	padding: 0 32px;
	font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .025em; white-space: nowrap;
	color: #fff;
}

/* ===== 당첨내역 ===== */
.mv-hist-header {
	position: sticky; top: 0; z-index: 10;
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--mv-c-line);
	background: rgba(255,255,255,.95);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mv-hist-icon {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; flex-shrink: 0;
	border-radius: 9999px;
	font-size: 24px; line-height: 32px; color: var(--mv-foreground-600);
	transition: background-color .15s;
}
.mv-hist-icon:hover { background: var(--mv-background-100); }
.mv-hist-spacer { width: 36px; flex-shrink: 0; }
.mv-hist-title { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--mv-foreground-950); }
.mv-hist-list { padding: 24px 20px; }	/* 원본 목록 px-5 py-6. 상세 여백은 .mv-result-body 가 갖는다 */
.mv-hist-msg { padding: 40px 20px; text-align: center; font-size: 14px; line-height: 20px; color: var(--mv-foreground-500); }
.mv-hist-count { margin-bottom: 16px; font-size: 14px; line-height: 20px; color: var(--mv-foreground-500); }
.mv-hist-count strong { color: var(--mv-foreground-900); }
.mv-hist-items { display: flex; flex-direction: column; gap: 12px; }
.mv-hist-item {
	display: flex; align-items: center; gap: 16px;
	width: 100%; padding: 16px;
	border: 1px solid var(--mv-c-line);
	border-radius: var(--mv-radius-lg);
	background: #fff; text-align: left;
	transition: border-color .15s;
}
.mv-hist-item:hover { border-color: #DADADA; }
.mv-hist-item.mv-is-done { background: var(--mv-gray-50); opacity: .7; }
.mv-hist-thumb {
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; flex-shrink: 0;
	overflow: hidden; border-radius: var(--mv-radius);
	background: var(--mv-c-thumb);
}
.mv-hist-item.mv-is-done .mv-hist-thumb { background: var(--mv-gray-100); }
.mv-hist-thumb img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.mv-hist-item.mv-is-done .mv-hist-thumb img { filter: grayscale(1); opacity: .5; }
.mv-hist-info { display: block; min-width: 0; flex: 1 1 auto; }
.mv-hist-tags {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin-bottom: 4px;
}
.mv-hist-rank {
	display: inline-flex; align-items: center; flex-shrink: 0;
	padding: 2px 10px; border-radius: 9999px;
	background: var(--mv-primary-100);
	font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap;
	color: var(--mv-primary-700);
}
.mv-hist-item.mv-is-done .mv-hist-rank { background: var(--mv-gray-200); color: var(--mv-gray-500); }
.mv-hist-state {
	flex-shrink: 0; padding: 2px 10px;
	border: 1px solid var(--mv-gray-300); border-radius: 9999px;
	background: var(--mv-gray-100);
	font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap;
	color: var(--mv-gray-500);
}
.mv-hist-name {
	display: block;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 16px; line-height: 24px; font-weight: 600; color: var(--mv-foreground-950);
}
.mv-hist-item.mv-is-done .mv-hist-name { color: var(--mv-gray-500); }
.mv-hist-meta { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--mv-c-hint); }
.mv-screen--auto .mv-hist-body { flex: 1 1 auto; }
.mv-hist-foot { flex-shrink: 0; padding: 16px 24px 24px; background: #fff; }
.mv-hist-redeem { padding: 16px 0; font-size: 16px; font-weight: 600; }
.mv-hist-redeem:disabled { background: var(--mv-gray-200); color: var(--mv-gray-400); }	/* 원본 수령 완료 bg-gray-200 text-gray-400 */

/* ===== 직원 PIN ===== */
.mv-pin-title {
	margin-bottom: 16px;
	font-size: 18px; line-height: 28px; font-weight: 700; text-align: center;
	color: var(--mv-foreground-950);
}
.mv-pin-guide {
	padding: 16px; border-radius: var(--mv-radius);
	background: var(--mv-c-soft); font-size: 14px; line-height: 20px;	/* 원본 text-sm (leading 지정 없음) */
	color: var(--mv-c-sub);
}
.mv-pin-guide p + p { margin-top: 8px; }
.mv-pin-guide-strong { font-weight: 600; color: var(--mv-foreground-950); }
.mv-pin-field { margin-top: 16px; }
.mv-pin-label {
	display: block; margin-bottom: 6px;
	font-size: 14px; line-height: 20px; font-weight: 700; color: var(--mv-foreground-950);
}
.mv-pin-input {
	width: 100%; padding: 14px 16px;
	border: 1px solid var(--mv-background-200);
	border-radius: var(--mv-radius);
	background: #fff; font-size: 16px; line-height: 24px; color: var(--mv-foreground-950);
}
.mv-pin-input::placeholder { color: var(--mv-foreground-400); }
.mv-pin-input:focus {
	outline: none;
	border-color: var(--mv-primary-400);
	box-shadow: 0 0 0 3px var(--mv-primary-100);
}
.mv-pin-error { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--mv-accent-600); }
.mv-pin-actions { display: flex; gap: 12px; margin-top: 20px; }
.mv-pin-submit, .mv-pin-cancel { flex: 1 1 0; padding: 14px 0; font-size: 14px; line-height: 20px; font-weight: 600; }

/* ===== 애니메이션 (원본 index.css 에서 이 화면이 실제로 쓰는 것만 옮겼다) ===== */

/* 콘텐츠 등장 */
@keyframes mv-fade-in-up {
	0% { transform: translateY(24px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
.anim-fade-in-up { animation: mv-fade-in-up .5s ease-out forwards; }

/* 1. 등장 — 모자 90% → 103% → 100% */
@keyframes mv-hat-entrance {
	0% { transform: scale(.9); opacity: 0; }
	25% { transform: scale(.9); opacity: 1; }
	60% { transform: scale(1.03); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes mv-shadow-entrance {
	0% { transform: translateX(-50%) scaleX(1); opacity: .12; }
	60% { transform: translateX(-50%) scaleX(1.35); opacity: .2; }
	100% { transform: translateX(-50%) scaleX(1); opacity: .15; }
}

/* 2. 뜸들이기 — 좌 3° → 우 3° → 중앙 → 6px 눌림 */
@keyframes mv-hat-anticipation {
	0% { transform: translateY(0) rotate(0deg); }
	18% { transform: translateY(0) rotate(-3deg); }
	36% { transform: translateY(0) rotate(3deg); }
	54% { transform: translateY(0) rotate(0deg); }
	76% { transform: translateY(6px) rotate(0deg); }
	100% { transform: translateY(0) rotate(0deg); }
}
@keyframes mv-shadow-anticipation {
	0%, 54% { transform: translateX(-50%) scaleX(1); opacity: .15; }
	76% { transform: translateX(-50%) scaleX(1.18); opacity: .2; }
	100% { transform: translateX(-50%) scaleX(1); opacity: .15; }
}

/* 3. 열기 — 모자가 떠올라 완전히 사라진다(경품과 겹치지 않게) */
@keyframes mv-hat-open-up {
	0% { transform: translateY(0) scale(1); opacity: 1; }
	55% { transform: translateY(-66px) scale(.98); opacity: .45; }
	100% { transform: translateY(-92px) scale(.96); opacity: 0; }
}
@keyframes mv-shadow-shrink {
	0% { transform: translateX(-50%) scaleX(1); opacity: .15; }
	100% { transform: translateX(-50%) scaleX(.35); opacity: .04; }
}

/* 원판 — 모자 아래로 살짝 보였다가(focus) 제 크기로 펼쳐진다(expand) */
@keyframes mv-circle-focus {
	0% { transform: scale(.22); opacity: 0; }
	100% { transform: scale(.6); opacity: 1; }
}
@keyframes mv-circle-expand {
	0% { transform: scale(.6); opacity: 1; }
	70% { transform: scale(1.02); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* 4. 공개 — 경품 70% → 108% → 100%, "당첨!" 캡션 */
@keyframes mv-prize-reveal {
	0% { transform: scale(.7); opacity: 0; }
	55% { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes mv-win-caption {
	0% { transform: scale(.9) translateY(6px); opacity: 0; }
	55% { transform: scale(1.06) translateY(0); opacity: 1; }
	100% { transform: scale(1) translateY(0); opacity: 1; }
}

.anim-hat-entrance { animation: mv-hat-entrance .55s cubic-bezier(.22,.61,.36,1) forwards; }
.anim-shadow-entrance { animation: mv-shadow-entrance .55s cubic-bezier(.22,.61,.36,1) forwards; }
.anim-hat-anticipation { animation: mv-hat-anticipation 1s ease-in-out forwards; }
.anim-shadow-anticipation { animation: mv-shadow-anticipation 1s ease-in-out forwards; }
.anim-hat-open-up { animation: mv-hat-open-up .7s cubic-bezier(.55,0,.68,.19) forwards; }
.anim-shadow-shrink { animation: mv-shadow-shrink .7s ease-in forwards; }
.anim-circle-focus { animation: mv-circle-focus .55s cubic-bezier(.22,.61,.36,1) forwards; }
.anim-circle-expand { animation: mv-circle-expand .8s cubic-bezier(.33,1,.68,1) forwards; }
.anim-prize-reveal { animation: mv-prize-reveal .7s cubic-bezier(.34,1.56,.64,1) forwards; }
.anim-win-caption { animation: mv-win-caption .6s ease-out forwards; }

/* 축포 — '당첨!' 순간 중앙에서 사방으로 터져나가는 컨페티.
   조각마다 날아갈 방향(--tx·--ty)·회전(--rot)·크기·색·지연·길이가 다르다(JS 가 인라인으로 넣는다). */
.mv-confetti {
	position: absolute; inset: 0; z-index: 40;
	overflow: hidden; pointer-events: none;
}
.mv-confetti span { position: absolute; left: 50%; top: 50%; }

@keyframes mv-confetti-burst {
	0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
	8% { opacity: 1; }
	70% { opacity: 1; }
	100% {
		transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(1);
		opacity: 0;
	}
}
.anim-confetti-burst { animation: mv-confetti-burst 1.2s ease-out forwards; }

/* 워터마크 흐름 — 한 벌 폭(-50%)만큼 밀어 이음매 없이 반복된다 */
@keyframes mv-marquee-x {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.anim-marquee-x { animation: mv-marquee-x 14s linear infinite; }

/* 움직임을 줄이도록 설정한 기기에서는 연출을 죽인다(접근성) */
@media (prefers-reduced-motion: reduce) {
	.anim-fade-in-up, .anim-hat-entrance, .anim-shadow-entrance,
	.anim-hat-anticipation, .anim-shadow-anticipation, .anim-hat-open-up,
	.anim-shadow-shrink, .anim-circle-focus, .anim-circle-expand,
	.anim-prize-reveal, .anim-win-caption, .anim-marquee-x, .anim-confetti-burst {
		animation-duration: .01ms; animation-iteration-count: 1;
	}
	.mv-hat-slide-inner { transition: none; }
}

/* ===== 넓은 화면 — 원본 `md:`(브라우저 폭 768px 이상). 480 껍데기 안이어도 브라우저 폭 기준이라 데스크톱에서 적용된다 ===== */
@media (min-width: 768px) {
	.mv-cat-thumb { width: 112px; height: 112px; }					/* md:h-28 md:w-28 */
	.mv-cat-label { font-size: 14px; line-height: 20px; }			/* md:text-sm — leading-snug 을 덮는다 */
	.mv-close { top: 16px; right: 16px; }							/* md:right-4 md:top-4 */
	.mv-hatpick { padding-top: 64px; padding-left: 24px; padding-right: 24px; }	/* md:pt-16 md:px-6 */
	.mv-hat-stage { height: 320px; }								/* md:h-[320px] */
	.mv-draw-intro { padding-top: 64px; }							/* md:pt-16 */
}

/* ===== 작은 화면 보정 (시안은 480 고정폭 기준) ===== */
@media (max-width: 400px) {
	.mv-top { height: auto; }
	.mv-hero-head { padding-top: 32px; }
	.mv-hero-hats { padding-bottom: 16px; }
	.mv-hero-hat { width: 150px; height: 140px; }
	.mv-hero-hat--mid { margin: 0 -12px; }
	.mv-join { height: auto; padding-top: 24px; padding-bottom: 24px; }
	.mv-prizes { height: auto; padding-top: 40px; padding-bottom: 40px; }
	.mv-cat-thumb { width: 84px; height: 84px; }
	.mv-draw-center { width: 280px; height: 280px; }
	.mv-draw-disc { width: 280px; height: 280px; }
	.mv-draw-peek { width: 224px; height: 224px; }
	.mv-draw-reveal-inner { width: 320px; height: 320px; }
	.mv-hat-stage { height: 240px; }
	.mv-hat-series { font-size: 26px; }
}