:root{
	--bg:#0c0f14;
	--card:#121825;
	--text:#eaf0ff;
	--muted:rgba(234,240,255,.72);
	--line:rgba(234,240,255,.12);
	--accent:#6ee7ff;
	--accent2:#a78bfa;
	--good:#8bffb5;
	--warn:#ffd36e;
	--shadow:0 10px 30px rgba(0,0,0,.35);
	--radius:18px;
	--max:900px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:system-ui,-apple-system,"Segoe UI",Roboto,AppleSDGothicNeo,"Noto Sans KR","Malgun Gothic",sans-serif;
	color:var(--text);
	background:
		radial-gradient(1200px 500px at 20% -10%, rgba(110,231,255,.18), transparent 60%),
		radial-gradient(900px 400px at 80% 0%, rgba(167,139,250,.16), transparent 60%),
		linear-gradient(180deg, #070a10, var(--bg));
	overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%; display:block}

.wrap{
	max-width:var(--max);
	margin:0 auto;
	padding:0 16px 110px;
}

/* 상단 포스터 */
.hero{
	margin:0 -16px 18px;
	position:relative;
}
.hero .poster{
	width:100%;
	/* aspect-ratio: 3 / 4; */
	object-fit:cover;
	border-bottom-left-radius:22px;
	border-bottom-right-radius:22px;
	box-shadow:var(--shadow);
}
.hero .hero-overlay{
	position:absolute;
	inset:auto 0 0 0;
	padding:18px 16px 16px;
	background:linear-gradient(180deg, transparent, rgba(0,0,0,.78));
	border-bottom-left-radius:22px;
	border-bottom-right-radius:22px;
}
.hero .hero-top{
	position:absolute;
	top:14px;
	left:14px;
	right:14px;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:10px;
	pointer-events:none;
}
.dday{
	pointer-events:none;
	display:inline-flex;
	flex-direction:column;
	gap:6px;
	padding:10px 12px;
	border-radius:16px;
	border:1px solid rgba(234,240,255,.14);
	background:rgba(0,0,0,.40);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow:var(--shadow);
	max-width:70%;
}
.dday .k{
	font-size:11px;
	letter-spacing:.3px;
	color:rgba(234,240,255,.75);
	font-weight:900;
}
.dday .v{
	font-size:14px;
	font-weight:950;
	letter-spacing:.2px;
	line-height:1.25;
}
.dday .sub{
	font-size:11px;
	color:rgba(234,240,255,.68);
	font-weight:650;
}
.dday .chip{
	display:inline-flex;
	align-items:center;
	gap:8px;
	width:max-content;
	padding:6px 10px;
	border-radius:999px;
	border:1px solid rgba(110,231,255,.22);
	background:linear-gradient(90deg, rgba(110,231,255,.14), rgba(167,139,250,.12));
	font-size:11px;
	font-weight:900;
	color:rgba(234,240,255,.90);
}
.dday .chip .dot{
	width:8px;
	height:8px;
	border-radius:99px;
	background:var(--accent);
	box-shadow:0 0 16px rgba(110,231,255,.6);
	animation:pulse 1.5s infinite;
}

.brand{
	display:flex;
	align-items:center;
	gap:12px;
}
.brand .logo{
	width:44px;
	height:44px;
	border-radius:12px;
	object-fit:contain;
	background:rgba(255,255,255,.06);
	border:1px solid var(--line);
	padding:6px;
}
.brand .title{
	line-height:1.2;
}
.brand .title .kicker{
	font-size:12px;
	letter-spacing:.2px;
	color:var(--muted);
}
.brand .title h1{
	margin:6px 0 0 0;
	font-size:18px;
	font-weight:800;
}

@keyframes pulse{
	0%{transform:scale(1); opacity:.9}
	50%{transform:scale(1.5); opacity:.45}
	100%{transform:scale(1); opacity:.9}
}

/* 카드/섹션 */
.section{margin:14px 0}
.card{
	background:rgba(18,24,37,.78);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow:hidden;
}
.card-inner{padding:16px}
.sec-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 16px;
	border-bottom:1px solid var(--line);
	background:linear-gradient(90deg, rgba(110,231,255,.08), rgba(167,139,250,.06));
}
.sec-head h2{
	margin:0;
	font-size:15px;
	letter-spacing:.2px;
}
.badge{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	color:var(--muted);
}

/* 정보 리스트 */
.info-grid{
	display:grid;
	grid-template-columns: 1fr;
	gap:10px;
}
.row{
	display:flex;
	gap:12px;
	align-items:flex-start;
	padding:12px;
	border:1px solid var(--line);
	border-radius:14px;
	background:rgba(0,0,0,.16);
}
.row .label{
	min-width:66px;
	font-size:12px;
	color:rgba(234,240,255,.75);
	letter-spacing:.2px;
	padding-top:2px;
}
.row .value{
	flex:1;
	font-size:14px;
	line-height:1.55;
	font-weight:650;
}
.row .sub{
	display:block;
	margin-top:6px;
	font-size:12px;
	color:var(--muted);
	font-weight:500;
}

.btns{
	display:flex;
	gap:10px;
	margin-top:12px;
	flex-wrap:wrap;
}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:12px 12px;
	border-radius:14px;
	border:1px solid var(--line);
	background:rgba(255,255,255,.06);
	color:var(--text);
	text-decoration:none;
	font-size:13px;
	font-weight:800;
	cursor:pointer;
	user-select:none;
	transition:transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:active{transform:scale(.98)}
.btn.primary{
	background:linear-gradient(90deg, rgba(110,231,255,.18), rgba(167,139,250,.16));
	border-color:rgba(110,231,255,.25);
}
.btn.ghost{
	background:rgba(0,0,0,.22);
	border-color:rgba(234,240,255,.14);
}

/* 인사말 */
.greeting{
	line-height:1.8;
	font-size:14px;
	color:rgba(234,240,255,.92);
	white-space:pre-line;
}
.greeting-line{
	opacity:0;
	transform:translateY(6px);
	transition:opacity .35s ease, transform .35s ease;
}
.greeting-line.in{
	opacity:1;
	transform:translateY(0);
}
.greeting .sign{
	margin-top:14px;
	color:var(--muted);
	font-weight:650;
}

/* 식순 */
.timeline{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.titem{
	display:flex;
	gap:12px;
	align-items:flex-start;
	padding:12px;
	border:1px solid var(--line);
	border-radius:14px;
	background:rgba(0,0,0,.16);
	transition:transform .12s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}
.time{
	min-width:62px;
	font-weight:950;
	color:rgba(234,240,255,.92);
}
.desc{
	flex:1;
	color:rgba(234,240,255,.86);
	line-height:1.5;
	font-weight:650;
}
/* 진행 강조 */
.titem.past{
	opacity:.58;
}
.titem.current{
	border-color:rgba(139,255,181,.38);
	background:linear-gradient(90deg, rgba(139,255,181,.12), rgba(110,231,255,.10));
	transform:translateX(4px);
}
.titem.current .time{
	color:rgba(139,255,181,.95);
}
.titem.current .desc:after{
	content:" (진행중)";
	color:rgba(139,255,181,.95);
	font-weight:900;
}
.titem.next{
	border-color:rgba(255,211,110,.30);
}

/* 섹션 인 애니메이션 */
.reveal{
	opacity:0;
	transform:translateX(26px);
	transition:opacity .7s cubic-bezier(.2,.9,.2,1), transform .7s cubic-bezier(.2,.9,.2,1);
	will-change:opacity, transform;
}
.reveal.in{
	opacity:1;
	transform:translateX(0);
}

/* 하단 고정 네비 */
.bottom-nav{
	position:fixed;
	left:0; right:0; bottom:0;
	padding:10px 12px calc(10px + env(safe-area-inset-bottom));
	background:linear-gradient(180deg, rgba(7,10,16,0), rgba(7,10,16,.86) 25%, rgba(7,10,16,.92));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top:1px solid rgba(234,240,255,.08);
	z-index:50;
}
.navbar{
	max-width:var(--max);
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:8px;
}
.navbtn{
	padding:12px 10px;
	border-radius:16px;
	border:1px solid rgba(234,240,255,.10);
	background:rgba(255,255,255,.04);
	color:rgba(234,240,255,.82);
	font-size:12px;
	font-weight:850;
	cursor:pointer;
	text-align:center;
	transition:background .15s ease, transform .12s ease, border-color .15s ease;
}
.navbtn:active{transform:scale(.99)}
.navbtn.on{
	background:linear-gradient(90deg, rgba(110,231,255,.16), rgba(167,139,250,.14));
	border-color:rgba(110,231,255,.25);
	color:rgba(234,240,255,.95);
}

/* 갤러리(rslider) */
.rslider{position:relative; overflow:hidden}
.rslider-viewport{overflow:hidden}
.rslider-track{
	display:flex;
	transition:transform .35s cubic-bezier(.2,.9,.2,1);
	touch-action: pan-y pan-x; /* 또는 아예 제거 */
}

.slide{min-width:100%; padding:0}
.slide img{
	width:100%;
	aspect-ratio: 16 / 10;
	object-fit:cover;
	border-radius:0;
	cursor:pointer;
}

.slide img{
	pointer-events:none;
}

.rslider-controls{
	position:absolute;
	inset:auto 0 0 0;
	display:flex;
	justify-content:space-between;
	padding:10px;
	pointer-events:none;
}
.arrow{
	pointer-events:auto;
	width:44px;
	height:44px;
	border-radius:14px;
	border:1px solid rgba(234,240,255,.14);
	background:rgba(0,0,0,.35);
	color:var(--text);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
	font-weight:900;
	cursor:pointer;
	user-select:none;
}
.arrow:active{transform:scale(.98)}

.gallery-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:10px 12px 0;
}
.gallery-hint{
	font-size:12px;
	color:rgba(234,240,255,.72);
	font-weight:700;
}
.playbtn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 12px;
	border-radius:14px;
	border:1px solid rgba(234,240,255,.14);
	background:rgba(0,0,0,.22);
	color:rgba(234,240,255,.9);
	font-size:12px;
	font-weight:900;
	cursor:pointer;
	user-select:none;
}
.playbtn:active{transform:scale(.99)}
.playbtn .dot{
	width:8px;
	height:8px;
	border-radius:99px;
	background:var(--warn);
	box-shadow:0 0 14px rgba(255,211,110,.5);
	animation:none;
}
.playbtn.on .dot{
	background:var(--good);
	box-shadow:0 0 14px rgba(139,255,181,.5);
}

.thumbs{
	display:flex;
	gap:10px;
	overflow:auto;
	padding:12px 12px 14px;
	scrollbar-width:none;
}
.thumbs::-webkit-scrollbar{display:none}
.thumb{
	flex:0 0 auto;
	width:70px;
	height:44px;
	border-radius:12px;
	border:1px solid rgba(234,240,255,.14);
	overflow:hidden;
	opacity:.72;
	transform:translateZ(0);
	cursor:pointer;
	transition:opacity .15s ease, border-color .15s ease, transform .12s ease;
	background:rgba(0,0,0,.22);
}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb.on{opacity:1; border-color:rgba(110,231,255,.35)}
.thumb:active{transform:scale(.98)}

/* 라이트박스 */
#lightbox{
	position:fixed;
	top:0; left:0;
	width:100%; height:100%;
	background:rgba(0,0,0,.92);
	display:none;
	align-items:center;
	justify-content:center;
	z-index:9999;
	padding:20px;
}
#lightbox img{
	max-width:92%;
	max-height:92%;
	border-radius:16px;
	box-shadow:0 20px 50px rgba(0,0,0,.6);
}
#lightbox .close{
	position:absolute;
	top:16px;
	right:16px;
	width:44px;
	height:44px;
	border-radius:14px;
	border:1px solid rgba(234,240,255,.14);
	background:rgba(0,0,0,.35);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:26px;
	font-weight:950;
	cursor:pointer;
	user-select:none;
}

/* 데스크탑에서도 보기 좋게 */
@media(min-width:768px){
	.hero{margin:0 0 18px}
	.hero .poster{border-radius:22px}
	.hero .hero-overlay{border-radius:0 0 22px 22px}
	.info-grid{grid-template-columns:1fr 1fr}
	.info-grid .row.full{grid-column:1 / -1}
}