/* /resources/youth2028/css/index.css */
:root {
			--bg: #f3f8ff;
			--surface: #ffffff;
			--line: rgba(13, 95, 174, .16);
			--text: #0f172a;
			--muted: #64748b;
			--blue-1: #0b5cab;
			--blue-2: #0f75d6;
			--blue-3: #0a4e96;
			--radius: 18px;
			--header-h: 56px;
		}
		* { box-sizing: border-box; }
		html, body { margin: 0; min-height: 100%; }
		body {
			background:
				radial-gradient(circle at 18% 8%, rgba(49, 151, 255, .22), transparent 28%),
				radial-gradient(circle at 90% 4%, rgba(126, 211, 255, .24), transparent 30%),
				linear-gradient(180deg, #f4f9ff 0%, #edf6ff 42%, #ffffff 100%);
			color: var(--text);
			font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
			-webkit-font-smoothing: antialiased;
		}
		a { color: inherit; text-decoration: none; }
		.ksgi-header {
			position: sticky;
			top: 0;
			z-index: 20;
			height: var(--header-h);
			background: linear-gradient(90deg, var(--blue-1) 0%, var(--blue-2) 52%, var(--blue-3) 100%);
			border-bottom: 1px solid rgba(255, 255, 255, .18);
			box-shadow: 0 2px 10px rgba(0, 64, 128, .18);
		}
		.ksgi-header-inner {
			width: min(960px, 100%);
			height: 100%;
			margin: 0 auto;
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.header-title {
			color: #fff;
			font-size: 19px;
			font-weight: 950;
			line-height: 1.25;
			letter-spacing: -.03em;
			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,.72); outline-offset: 4px; border-radius: 8px; }
		.page { width: min(960px, 100%); margin: 0 auto; padding: 28px 16px 58px; }
		.hero {
			position: relative;
			overflow: hidden;
			border-radius: 26px;
			padding: 30px 24px 26px;
			background: linear-gradient(135deg, rgba(15, 117, 214, .96), rgba(11, 92, 171, .96));
			color: #fff;
			box-shadow: 0 18px 40px rgba(15, 92, 171, .22);
		}
		.hero::after {
			content: "";
			position: absolute;
			right: -90px;
			top: -90px;
			width: 260px;
			height: 260px;
			border-radius: 50%;
			background: rgba(255, 255, 255, .15);
		}
		.hero-kicker { margin: 0 0 10px; font-size: 13px; font-weight: 900; letter-spacing: .08em; opacity: .9; }
		.hero-title { position: relative; z-index: 1; margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spacing: -.06em; font-weight: 950; word-break: keep-all; }
		.hero-desc { position: relative; z-index: 1; max-width: 620px; margin: 14px 0 0; color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.65; word-break: keep-all; }
		.menu-list { margin-top: 18px; display: grid; gap: 12px; }
		.menu-card {
			display: grid;
			grid-template-columns: 54px minmax(0, 1fr) auto;
			align-items: center;
			gap: 14px;
			min-height: 86px;
			padding: 16px 18px;
			border: 1px solid var(--line);
			border-radius: var(--radius);
			background: rgba(255,255,255,.88);
			box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
			transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
		}
		.menu-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .12); border-color: rgba(15, 117, 214, .32); }
		.menu-card:focus-visible { outline: 4px solid rgba(15,117,214,.22); outline-offset: 4px; }
		.menu-icon {
			width: 54px;
			height: 54px;
			border-radius: 18px;
			display: grid;
			place-items: center;
			background: linear-gradient(135deg, #0f75d6, #48b9ff);
			color: #fff;
			font-size: 23px;
			font-weight: 950;
			box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
		}
		.menu-title { display: block; font-size: 20px; font-weight: 950; line-height: 1.25; letter-spacing: -.04em; }
		.menu-desc { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; word-break: keep-all; }
		.menu-arrow { color: #0f75d6; font-size: 26px; font-weight: 300; }
		.menu-card-study {
			border-color: rgba(34, 197, 94, .28);
			background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(240,253,244,.92));
		}
		.menu-card-study:hover { border-color: rgba(34, 197, 94, .48); box-shadow: 0 14px 30px rgba(21, 128, 61, .14); }
		.menu-card-study .menu-icon { background: linear-gradient(135deg, #16a34a, #7ccf5b); }
		.menu-card-study .menu-arrow { color: #16a34a; }
		.ksgi-footer { margin-top: 22px; border-top: 1px solid #e5e5e5; background: #f7f7f7; color: #4b4b4b; }
		.ksgi-footer-inner { width: min(960px, 100%); margin: 0 auto; padding: 26px 16px 32px; }
		.footer-main { display: flex; align-items: flex-start; gap: 26px; }
		.footer-logo { flex: 0 0 auto; display: inline-flex; align-items: center; padding-top: 2px; }
		.footer-logo img { display: block; width: 112px; 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; }
		@media (max-width: 720px) {
			:root { --header-h: 52px; }
			.ksgi-header-inner { padding: 0 14px; }
			.header-title { font-size: 16px; }
			.page { padding: 16px 14px 42px; }
			.hero { border-radius: 22px; padding: 26px 20px 24px; }
			.hero-title { font-size: 32px; }
			.menu-card { grid-template-columns: 48px minmax(0, 1fr) 18px; min-height: 82px; padding: 15px 15px; gap: 12px; }
			.menu-icon { width: 48px; height: 48px; border-radius: 16px; font-size: 21px; }
			.menu-title { font-size: 18px; }
			.footer-main { flex-direction: column; gap: 14px; }
			.footer-logo img { width: 104px; }
			.family-list { gap: 7px; }
		}