/* 모바일 우선 반응형 */

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif; background: #000; color: #222; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; overflow: hidden; }

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

.page { display: flex; justify-content: center; align-items: stretch; width: 100%; height: 100%; min-height: 100dvh; min-height: 100svh; padding-left: calc(0px + env(safe-area-inset-left, 0px)); padding-right: calc(0px + env(safe-area-inset-right, 0px)); }
.content { width: 100%; max-width: 500px; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: transparent; box-shadow: none; }

.video-wrap { position: sticky; top: 0; z-index: 1; width: 100%; aspect-ratio: 2 / 3; background: #000; flex-shrink: 0; }
.video-wrap video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-progress { width: 92%; margin: 0 auto; position: absolute; left: 0; right: 0; bottom: 0.04vw; z-index: 3; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent); pointer-events: none; }
.video-progress__track { width: 100%; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); overflow: hidden; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.video-progress__fill { width: 0%; height: 100%; border-radius: inherit; background: #fff; transition: width 0.1s linear; }

.content-inner { position: relative; z-index: 3; margin-top: 100vh; width: 100%; aspect-ratio: 500 / 1540; padding: 48.4vw 12.4vw 25.4vw; background: url("./cont_img_bg.png") center/cover no-repeat; transition: margin-top 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: margin-top; }

/* small gradient overlay positioned above content-inner (30% of viewport) */
.content-inner::before { content: ""; position: absolute; left: 0; right: 0; top: -30vh; height: 30vh; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); opacity: 0.65; pointer-events: none; z-index: 2; }
.content-block.block-1 { margin: 0 2.6vw; }
.content-block.block-2 { margin: 11vw 0 0; }
.content-block.block-3 { margin: 7.2vw 0 0; }
.content-block.block-4 { margin: 7.2vw 2.2vw 0 0; }
.content-block.block-4 > img { width: 100%; max-width: 34vw; height: auto; }
.content-block.block-5 { margin: 11.6vw 2.2vw 0; }
.content-block.block-5 .img-box { width: 100%; position: relative; }
.content-block.block-5 .img-box > a { display: block; width: 100%; max-width: 16.8vw; aspect-ratio: 120/44; position: absolute; left: 46.8vw; top: 6.4vw; }
.content-block.block-5 dl { display: grid; grid-template-columns: 33.71% 33.42% 32.57%; max-height: 23.6vw; margin-top: 2.8vw; }
.content-block.block-5 dl > dd:first-child { max-width: 22.4vw; }
.content-block img { display: block; width: 100%; height: auto; }

/* gradient panel element placed over the video but under .content-inner */
.gradient-panel { position: fixed; left: 0; right: 0; top: 60vh; height: 40vh; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); pointer-events: none; z-index: 2; box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.08); }