/* /resources/youth2028/css/video.css */
:root {
			--bg: #ffffff;
			--surface: #ffffff;
			--surface-soft: #f8f8f8;
			--line: #e5e5e5;
			--text: #0f0f0f;
			--muted: #606060;
			--muted-2: #909090;
			--danger: #cc0000;
			--radius: 12px;
			--header-h: 56px;
			--shadow: 0 1px 2px rgba(0, 0, 0, .08);
		}

		* { box-sizing: border-box; }

		html, body {
			margin: 0;
			min-height: 100%;
			background: var(--bg);
			color: var(--text);
			font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
			-webkit-font-smoothing: antialiased;
			text-rendering: optimizeLegibility;
		}

		body { overflow-x: hidden; }
		a { color: inherit; text-decoration: none; }
		button { font: inherit; }

		.ksgi-header {
			position: sticky;
			top: 0;
			z-index: 20;
			height: var(--header-h);
			background: linear-gradient(90deg, #0b5cab 0%, #0f75d6 52%, #0a4e96 100%);
			border-bottom: 1px solid rgba(255, 255, 255, .18);
			box-shadow: 0 2px 10px rgba(0, 64, 128, .18);
		}

		.ksgi-header-inner {
			position: relative;
			width: min(1180px, 100%);
			height: 100%;
			margin: 0 auto;
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.header-title {
			min-width: 0;
			max-width: 100%;
			color: #ffffff;
			font-size: 18px;
			font-weight: 900;
			line-height: 1.25;
			letter-spacing: -.02em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: center;
			text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
			cursor: pointer;
		}

		.header-title:focus-visible {
			outline: 3px solid rgba(255, 255, 255, .7);
			outline-offset: 3px;
			border-radius: 8px;
		}


		.header-home {
			position: absolute;
			left: 16px;
			top: 50%;
			transform: translateY(-50%);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 30px;
			padding: 0 11px;
			border: 1px solid rgba(255, 255, 255, .5);
			border-radius: 999px;
			background: rgba(255, 255, 255, .13);
			color: #fff;
			font-size: 12px;
			font-weight: 900;
			line-height: 1;
			backdrop-filter: blur(7px);
		}

		.header-home:focus-visible {
			outline: 3px solid rgba(255, 255, 255, .7);
			outline-offset: 3px;
		}

		.page {
			width: min(1180px, 100%);
			margin: 0 auto;
			padding: 20px 16px 52px;
		}

		.player-frame {
			position: relative;
			width: 100%;
			overflow: hidden;
			border-radius: var(--radius);
			background: #000;
			box-shadow: var(--shadow);
		}

		.player-mount {
			position: relative;
			width: 100%;
			aspect-ratio: 16 / 9;
			background: #000;
		}

		.native-video,
		.youtube-frame,
		.youtube-gate {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
			background: #000;
		}

		.native-video {
			display: block;
			object-fit: contain;
			color: #fff;
		}

		.youtube-gate {
			display: block;
			padding: 0;
			border: 0;
			cursor: pointer;
			color: #fff;
			text-align: center;
			overflow: hidden;
		}

		.youtube-gate:focus-visible {
			outline: 4px solid rgba(255, 255, 255, .75);
			outline-offset: -8px;
		}

		.youtube-gate::before {
			display: none;
		}

		.youtube-poster {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform: scale(1.01);
		}

		.youtube-gate-content {
			position: absolute;
			z-index: 2;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px;
		}

		.play-button {
			width: 72px;
			height: 50px;
			border-radius: 14px;
			background: rgba(204, 0, 0, .94);
			box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
			position: relative;
		}

		.play-button::after {
			content: "";
			position: absolute;
			left: 29px;
			top: 15px;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 16px solid #fff;
		}



		.player-action-row {
			display: none;
			padding: 12px 2px 0;
		}

		.player-action-row.is-visible {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.youtube-open-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 30px;
			padding: 0 13px;
			border-radius: 999px;
			background: var(--danger);
			color: #fff;
			font-size: 12px;
			font-weight: 900;
			box-shadow: 0 3px 9px rgba(204, 0, 0, .18);
		}

		.youtube-open-button:hover {
			background: #b00000;
		}

		.youtube-open-button:focus-visible {
			outline: 3px solid rgba(204, 0, 0, .25);
			outline-offset: 3px;
		}

		.ios-kakao-caption-note {
			margin-right: auto;
			padding-right: 10px;
			color: var(--muted);
			font-size: 12px;
			line-height: 1.45;
			word-break: keep-all;
		}

		.player-notice {
			display: none;
			position: absolute;
			left: 12px;
			right: 12px;
			bottom: 12px;
			z-index: 8;
			padding: 12px 14px;
			border-radius: 10px;
			color: #fff;
			background: rgba(20, 20, 20, .88);
			font-size: 14px;
			line-height: 1.45;
		}

		.player-notice.is-visible { display: block; }

		.player-notice a {
			display: inline-block;
			margin-top: 8px;
			color: #fff;
			font-weight: 700;
			text-decoration: underline;
		}

		.video-info { padding: 14px 2px 16px; }

		.video-title {
			margin: 0;
			color: var(--text);
			font-size: 21px;
			font-weight: 800;
			line-height: 1.35;
			word-break: keep-all;
		}

		.video-subtitle {
			margin: 7px 0 0;
			color: var(--muted);
			font-size: 14px;
			line-height: 1.55;
			word-break: keep-all;
		}

		.channel-row {
			margin-top: 13px;
			padding-top: 13px;
			border-top: 1px solid var(--line);
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.channel-avatar {
			width: 38px;
			height: 38px;
			flex: 0 0 38px;
			border-radius: 50%;
			background: #111;
			color: #fff;
			display: grid;
			place-items: center;
			font-size: 11px;
			font-weight: 800;
			letter-spacing: -.02em;
		}

		.channel-name {
			font-size: 14px;
			font-weight: 800;
			line-height: 1.35;
		}

		.channel-meta {
			margin-top: 2px;
			color: var(--muted);
			font-size: 12px;
			line-height: 1.35;
		}

		.description-box {
			margin-top: 12px;
			padding: 12px 13px;
			border-radius: 12px;
			background: var(--surface-soft);
			color: var(--text);
			font-size: 13px;
			line-height: 1.55;
		}

		.description-meta {
			margin-bottom: 5px;
			font-weight: 800;
		}

		.recommend-section {
			margin-top: 10px;
			padding-top: 14px;
			border-top: 1px solid var(--line);
		}

		.section-title {
			margin: 0 0 12px;
			font-size: 18px;
			line-height: 1.35;
			font-weight: 900;
		}

		.recommend-list {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.recommend-card {
			display: grid;
			grid-template-columns: 168px minmax(0, 1fr);
			gap: 12px;
			width: 100%;
			padding: 0;
			border: 0;
			background: transparent;
			text-align: left;
			color: inherit;
			cursor: pointer;
		}

		.recommend-card:focus-visible {
			outline: 3px solid rgba(0, 0, 0, .2);
			outline-offset: 4px;
			border-radius: 10px;
		}

		.thumb-wrap {
			position: relative;
			overflow: hidden;
			border-radius: 10px;
			background: #eee;
			aspect-ratio: 16 / 9;
		}

		.thumb-wrap img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.thumb-fallback {
			display: grid;
			place-items: center;
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, #2b2b2b, #111);
			color: #fff;
			font-size: 12px;
			font-weight: 900;
			letter-spacing: .04em;
		}

		.duration-badge,
		.provider-badge {
			position: absolute;
			bottom: 5px;
			padding: 2px 5px;
			border-radius: 4px;
			background: rgba(0, 0, 0, .82);
			color: #fff;
			font-size: 11px;
			line-height: 1.2;
			font-weight: 700;
		}

		.duration-badge { right: 5px; }
		.provider-badge { left: 5px; }

		.recommend-body {
			min-width: 0;
			padding: 1px 0;
		}

		.recommend-title {
			margin: 0;
			color: var(--text);
			font-size: 15px;
			font-weight: 800;
			line-height: 1.38;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			word-break: keep-all;
		}

		.recommend-subtitle {
			margin: 5px 0 0;
			color: var(--muted);
			font-size: 13px;
			line-height: 1.4;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			word-break: keep-all;
		}

		.recommend-meta {
			margin-top: 5px;
			color: var(--muted-2);
			font-size: 12px;
			line-height: 1.35;
		}

		.recommend-card.is-active .recommend-title { color: var(--danger); }

		.recommend-card.is-active .thumb-wrap::after {
			content: "재생 중";
			position: absolute;
			inset: 0;
			display: grid;
			place-items: center;
			background: rgba(0, 0, 0, .48);
			color: #fff;
			font-size: 13px;
			font-weight: 900;
		}


		.ksgi-footer {
			margin-top: 34px;
			border-top: 1px solid var(--line);
			background: #f7f7f7;
			color: #4b4b4b;
		}

		.ksgi-footer-inner {
			width: min(1180px, 100%);
			margin: 0 auto;
			padding: 28px 16px 34px;
		}

		.footer-main {
			display: flex;
			align-items: flex-start;
			gap: 28px;
		}

		.footer-logo {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			padding-top: 2px;
		}

		.footer-logo img {
			display: block;
			width: 116px;
			height: auto;
			opacity: .9;
		}

		.footer-info {
			min-width: 0;
			font-size: 13px;
			line-height: 1.65;
		}

		.footer-info p {
			margin: 0;
		}

		.footer-copy {
			margin-top: 8px !important;
			color: #777;
			font-size: 12px;
		}

		.family-sites {
			margin-top: 22px;
			padding-top: 18px;
			border-top: 1px solid #e1e1e1;
		}

		.family-title {
			display: block;
			margin-bottom: 10px;
			color: #222;
			font-size: 13px;
			font-weight: 900;
		}

		.family-list {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
		}

		.family-list a {
			display: inline-flex;
			align-items: center;
			min-height: 30px;
			padding: 0 10px;
			border: 1px solid #ddd;
			border-radius: 999px;
			background: #fff;
			color: #555;
			font-size: 12px;
			font-weight: 700;
		}

		.family-list a:hover {
			border-color: #cfcfcf;
			color: #111;
		}

		.debug-panel {
			margin-top: 14px;
			padding: 10px 12px;
			border: 1px solid var(--line);
			border-radius: 10px;
			background: #fafafa;
			color: var(--muted);
			font-size: 12px;
			line-height: 1.5;
			white-space: pre-wrap;
			word-break: break-word;
		}

		@media (max-width: 720px) {
			:root { --header-h: 52px; }
			.page { padding: 12px 0 38px; }
			.ksgi-header-inner { padding: 0 14px; }
			.header-title { font-size: 15px; letter-spacing: -.04em; }
			.footer-main { flex-direction: column; gap: 14px; }
			.ksgi-footer-inner { padding: 24px 14px 30px; }
			.footer-logo img { width: 104px; }
			.family-list { gap: 7px; }
			.player-frame { border-radius: 0; box-shadow: none; }
			.player-action-row { padding: 12px 14px 0; gap: 8px; flex-wrap: wrap; }
			.ios-kakao-caption-note { width: 100%; margin-right: 0; padding-right: 0; }
			.video-info { padding: 13px 14px 14px; }
			.video-title { font-size: 18px; }
			.recommend-section { padding: 14px 14px 0; }
			.recommend-card { grid-template-columns: 132px minmax(0, 1fr); gap: 10px; }
			.recommend-title { font-size: 14px; }
			.recommend-subtitle { font-size: 12px; -webkit-line-clamp: 2; }
			.debug-panel { margin-left: 14px; margin-right: 14px; }
			.play-button { width: 64px; height: 44px; border-radius: 12px; }
			.play-button::after { left: 26px; top: 13px; border-top-width: 9px; border-bottom-width: 9px; border-left-width: 15px; }
		}

		@media (max-width: 420px) {
			.header-title { font-size: 14px; }
			.recommend-card { grid-template-columns: 118px minmax(0, 1fr); }
			.duration-badge,
			.provider-badge { font-size: 10px; }
		}