/* /resources/youth2028/css/study.css */
:root { --header-h: 56px; --blue-1:#0b5cab; --blue-2:#0f75d6; --blue-3:#0a4e96; }
		* { box-sizing: border-box; }
		html, body { margin: 0; width: 100%; height: 100%; min-height: 100%; overscroll-behavior: none; }
		body {
			background: #07111f;
			color: #fff;
			font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
			-webkit-font-smoothing: antialiased;
			overflow: hidden;
			touch-action: pan-y;
		}
		a, button { color: inherit; }
		button { font: inherit; }
		.study-top {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 30;
			height: var(--header-h);
			display: grid;
			grid-template-columns: auto 1fr auto;
			align-items: center;
			gap: 10px;
			padding: max(0px, env(safe-area-inset-top)) 14px 0;
			background: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,0));
			pointer-events: none;
		}
		.top-btn, .page-chip {
			pointer-events: auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 34px;
			padding: 0 13px;
			border: 1px solid rgba(255,255,255,.42);
			border-radius: 999px;
			background: rgba(0,0,0,.28);
			backdrop-filter: blur(8px);
			color: #fff;
			font-size: 13px;
			font-weight: 900;
			line-height: 1;
			text-decoration: none;
			box-shadow: 0 4px 14px rgba(0,0,0,.14);
		}
		.study-title {
			min-width: 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: center;
			font-size: 16px;
			font-weight: 950;
			letter-spacing: -.04em;
			text-shadow: 0 1px 3px rgba(0,0,0,.45);
			text-decoration: none;
			cursor: pointer;
			pointer-events: auto;
		}
		.study-title:focus-visible { outline: 3px solid rgba(255,255,255,.72); outline-offset: 4px; border-radius: 8px; }
		.viewer {
			height: 100svh;
			width: 100vw;
			display: flex;
			align-items: stretch;
			overflow-x: auto;
			overflow-y: hidden;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			-webkit-overflow-scrolling: touch;
			overscroll-behavior: contain;
			touch-action: pan-y;
			background: #07111f;
			scrollbar-width: none;
			-ms-overflow-style: none;
		}
		.slide::-webkit-scrollbar { display: none; }
		.viewer::-webkit-scrollbar { display: none; }
		.viewer { scrollbar-width: none; -ms-overflow-style: none; }
		.slide {
			position: relative;
			flex: 0 0 100vw;
			height: 100svh;
			min-height: 0;
			overflow-x: hidden;
			overflow-y: auto;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			scroll-snap-align: start;
			scroll-snap-stop: always;
			-webkit-overflow-scrolling: touch;
			overscroll-behavior-y: contain;
			overscroll-behavior-x: none;
			touch-action: pan-y;
			background: #07111f;
		}
		.slide img {
			display: block;
			width: 100vw;
			height: auto;
			max-width: none;
			object-fit: contain;
			object-position: top center;
			user-select: none;
			-webkit-user-drag: none;
			touch-action: pan-y;
			transform-origin: 50% 50%;
			transform: translate3d(0,0,0) scale(1);
			transition: transform .16s ease;
			will-change: transform;
		}
		.slide.is-swipe-locked {
			overscroll-behavior-x: none;
		}
		.slide.is-zooming,
		.slide.is-zoomed {
			overflow: hidden;
			touch-action: none;
		}
		.slide.is-zooming img,
		.slide.is-zoomed img {
			touch-action: none;
			transition: none;
			cursor: grab;
		}
		.nav-btn {
			position: fixed;
			top: 50%;
			z-index: 25;
			transform: translateY(-50%);
			width: 44px;
			height: 44px;
			border: 1px solid rgba(255,255,255,.36);
			border-radius: 999px;
			background: rgba(0,0,0,.26);
			color: #fff;
			font-size: 28px;
			line-height: 1;
			box-shadow: 0 8px 22px rgba(0,0,0,.2);
			backdrop-filter: blur(8px);
			cursor: pointer;
		}
		.nav-btn.prev { left: 12px; }
		.nav-btn.next { right: 12px; }
		.dots {
			position: fixed;
			left: 50%;
			bottom: calc(18px + env(safe-area-inset-bottom));
			z-index: 30;
			transform: translateX(-50%);
			display: flex;
			gap: 7px;
			padding: 8px 10px;
			border-radius: 999px;
			background: rgba(0,0,0,.24);
			backdrop-filter: blur(8px);
		}
		.dot {
			position: relative;
			width: 20px;
			flex: 0 0 20px;
			height: 7px;
			border-radius: 999px;
			background: transparent;
			overflow: hidden;
			contain: layout paint;
		}
		.dot::before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			display: block;
			width: 7px;
			height: 7px;
			border-radius: 999px;
			background: rgba(255,255,255,.42);
			transform: translateX(-50%);
			transition: width .18s ease, background .18s ease;
		}
		.dot.is-active::before { width: 20px; background: #fff; }
		.study-top,
		.nav-btn,
		.dots {
			transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
		}
		body.study-ui-hidden .study-top,
		body.study-ui-hidden .nav-btn,
		body.study-ui-hidden .dots {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}
		body.study-ui-hidden .study-top { transform: translateY(-10px); }
		body.study-ui-hidden .dots { transform: translate(-50%, 10px); }
		body.study-ui-hidden .nav-btn.prev { transform: translate(-10px, -50%); }
		body.study-ui-hidden .nav-btn.next { transform: translate(10px, -50%); }
		.viewer.is-edge-locked,
		.viewer.is-edge-locked .slide,
		.viewer.is-edge-locked .slide img {
			transform: none !important;
			transition: none !important;
		}
		.nav-btn:disabled {
			opacity: .32;
			cursor: default;
		}
		.dot {
			padding: 0;
			border: 0;
			cursor: pointer;
		}
		@media (min-width: 769px) {
			body { overflow: hidden; background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%); color: #0f172a; }
			.study-top {
				position: sticky;
				height: var(--header-h);
				padding: 0 16px;
				background: linear-gradient(90deg, var(--blue-1) 0%, var(--blue-2) 52%, var(--blue-3) 100%);
				box-shadow: 0 2px 10px rgba(0,64,128,.18);
			}
			.top-btn, .page-chip { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.5); color: #fff; }
			.study-title { color:#fff; }
			.viewer {
				height: calc(100vh - var(--header-h));
				min-height: 0;
				padding: 28px calc((100vw - min(579px, 82vw)) / 2) 58px;
				overflow-x: auto;
				overflow-y: hidden;
				align-items: stretch;
				background: transparent;
				overscroll-behavior: contain;
				touch-action: pan-y;
			}
			.slide { flex: 0 0 min(579px, 82vw); height: auto; min-height: 0; padding: 0 16px; overflow-y: auto; overflow-x: hidden; background: transparent; align-items: flex-start; overscroll-behavior-y: contain; touch-action: pan-y; }
			.slide img { width: 100%; height: auto; object-fit: contain; border-radius: 18px; box-shadow: 0 20px 50px rgba(15,23,42,.18); }
			.nav-btn { background: rgba(15, 23, 42, .50); }
			.nav-btn.prev { left: max(18px, calc((100vw - 720px) / 2)); }
			.nav-btn.next { right: max(18px, calc((100vw - 720px) / 2)); }
			.dots { background: rgba(15, 23, 42, .18); }
			.dot::before { background: rgba(15, 23, 42, .28); }
			.dot.is-active::before { background: #0f75d6; }
		}