@charset "utf-8";

/* =========================================================
 * 스터디코리안 2026 리뉴얼 공통 스타일
 * 헤더 / 메인 / 푸터 + 반응형(1440 / 1024 / 937 헤더·767 본문)
 * 기존 2024 스타일과 충돌을 피하기 위해 모든 클래스에 sk- 접두사 사용
 * ========================================================= */

/* ---------------------------------------------------------
 * 1. 디자인 토큰
 * --------------------------------------------------------- */
:root {
	/* Color - Primary */
	--sk-primary: #246beb;
	--sk-primary-strong: #2563eb;
	--sk-primary-dark: #1d4ed8;
	--sk-primary-deep: #00327d;
	--sk-primary-bg: #edf3ff;
	--sk-primary-bg-strong: #d7e8fd;
	--sk-primary-text: #3d71e4;

	/* Color - Text */
	--sk-text: #1e2124;
	--sk-text-strong: #171a23;
	--sk-text-heading: #191c1e;
	--sk-text-title: #1a1f2e;
	--sk-text-body: #434653;
	--sk-text-util: #464c53;
	--sk-text-muted: #475569;
	--sk-text-sub: #6b7280;
	--sk-text-desc: #4b5563;
	--sk-text-placeholder: #9a9fa9;
	--sk-text-date: #b8bcc4;
	--sk-text-list: #2d313a;

	/* Color - Line */
	--sk-border: #cdd1d5;
	--sk-border-light: #eceff5;
	--sk-border-divider: #eeeef0;
	--sk-border-strong: #c3c6d5;
	--sk-border-bar: #d4d9e2;

	/* Color - Surface */
	--sk-surface: #fff;
	--sk-surface-subtle: #eff4fc;
	--sk-surface-masthead: #eef2f7;
	--sk-surface-card: #f7f9fc;

	/* Color - Accent */
	--sk-accent-green: #059669;
	--sk-accent-magenta: #c026d3;

	/* Radius */
	--sk-radius-xs: 4px;
	--sk-radius-sm: 8px;
	--sk-radius-md: 10px;
	--sk-radius-lg: 12px;
	--sk-radius-xl: 16px;
	--sk-radius-2xl: 20px;
	--sk-radius-3xl: 24px;
	--sk-radius-max: 1000px;

	/* Spacing */
	--sk-gap-1: 4px;
	--sk-gap-2: 8px;
	--sk-gap-3: 12px;
	--sk-gap-4: 16px;
	--sk-gap-5: 24px;
	--sk-gap-6: 32px;
	--sk-gap-7: 40px;

	/* Section spacing (Figma PC/MO) */
	--sk-section-gap-pc: 10px;
	--sk-section-gap-mo: 32px;
	--sk-main-bottom-pc: 30px;
	--sk-main-bottom-mo: 20px;

	/* Shadow */
	--sk-shadow-card: 0 1px 1px rgba(0, 0, 0, .05);
	--sk-shadow-step: 0 4px 7px rgba(15, 30, 65, .06);
	--sk-shadow-cta: 0 6px 8px rgba(37, 99, 235, .25);

	/* Layout */
	--sk-container: 1400px;
	--sk-content: 1360px;
	--sk-header-h: 143px;
}

/* ---------------------------------------------------------
 * 2. 레이아웃 리셋 (2024 고정 헤더 전제 해제)
 *
 * 2026 헤더는 고정(fixed)이 아니므로 renew_2024/responsive 가 잡아둔
 * 헤더 높이만큼의 padding-top 만 해제한다. min-width/overflow 는
 * 서브 435개 페이지의 기존 레이아웃 전제이므로 건드리지 않는다.
 * --------------------------------------------------------- */
#wrap {
	padding-top: 0;
}

.sk-container {
	max-width: var(--sk-container);
	margin: 0 auto;
	padding: 0 20px;
}

.sk-content {
	max-width: var(--sk-content);
	margin: 0 auto;
	padding: 0 20px;
}

/* 화면에서는 감추고 스크린리더에만 제공 */
.sk-blind {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sk-main {
	display: block;
	padding-bottom: var(--sk-main-bottom-pc);
}

/* PC: 히어로~추천 콘텐츠 섹션 간격 10px (Figma y 좌표 기준) */
.sk-main > * + * {
	margin-top: var(--sk-section-gap-pc);
}

.sk-icon {
	display: block;
	flex: none;
}

/* 키보드 포커스 표시 (색상에만 의존하지 않도록 외곽선 사용) */
.sk-header a:focus-visible,
.sk-header button:focus-visible,
.sk-main a:focus-visible,
.sk-main button:focus-visible,
.sk-footer a:focus-visible,
.sk-footer button:focus-visible {
	outline: 2px solid var(--sk-primary-strong);
	outline-offset: 2px;
	background: transparent;
}

/* ---------------------------------------------------------
 * 3. 헤더
 * --------------------------------------------------------- */
.sk-header {
	position: relative;
	z-index: 100;
	background: var(--sk-surface);
	/*border-bottom: 1px solid var(--sk-border-light);*/
}

/* 3-1. 전자정부 마스트헤드 */
.sk-masthead {
	height: 32px;
	background: var(--sk-surface-masthead);
}

.sk-masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--sk-gap-2);
	height: 32px;
	max-width: var(--sk-content);
	margin: 0 auto;
	padding: 0 20px;
}

.sk-masthead__inner img {
	width: 24px;
	height: 16px;
}

.sk-masthead__text {
	font-size: 15px;
	line-height: 1.5;
	color: var(--sk-text);
}

/* 3-2. 로고 + 유틸 */
.sk-header__identity {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-gap-4);
	padding: 20px 20px 10px;
}

.sk-brand {
	display: flex;
	align-items: center;
	gap: var(--sk-gap-2);
}

.sk-brand__logo {
	display: block;
	width: 126px;
	height: 40px;
	object-fit: contain;
}

.sk-brand__name {
	margin: 0;
	font-size: 20px;
	font-weight: 900;
	line-height: 28px;
	letter-spacing: -0.6px;
	background: linear-gradient(90deg, #6ab3d5 0%, #8e90a5 52.5%, #e63c2e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sk-util {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
}

.sk-util > li {
	display: flex;
	align-items: center;
}

.sk-util__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	line-height: 20.15px;
	letter-spacing: -0.2px;
	color: var(--sk-text-util);
	border-radius: var(--sk-radius-xs);
}

.sk-util__link:hover {
	color: var(--sk-primary-strong);
	text-decoration: underline;
}

.sk-util__divider {
	font-size: 13px;
	line-height: 20.15px;
	color: var(--sk-border-bar);
}

.sk-util__lang {
	background: none;
	border: 0;
	padding: 0;
}

.sk-util__lang img {
	width: 14px;
	height: 14px;
}

/* 현재 선택된 언어 표시 */
.sk-util__lang.is-on {
	color: var(--sk-primary-strong);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sk-util__name {
	font-size: 16px;
	color: var(--sk-text-util);
}

.sk-util__name strong {
	font-weight: 600;
}

/* PC 사용자명 드롭다운 */
.sk-util__profile {
	position: relative;
}

.sk-util__profile-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 16px;
	line-height: 20.15px;
	color: var(--sk-text-util);
	cursor: pointer;
	border-radius: var(--sk-radius-xs);
}

/* 언어선택(지구본)과 구분 — 2024 my_profile ▼ 패턴 */
.sk-util__profile-btn::after {
	content: "▼";
	font-size: 10px;
	line-height: 1;
	color: var(--sk-text-util);
}

.sk-util__profile-btn:hover,
.sk-util__profile-btn:focus {
	color: var(--sk-primary-strong);
}

.sk-util__profile-ico {
	width: 15px;
	height: 15px;
	margin: 0;
}

.sk-util__profile-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 100;
	min-width: 120px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--sk-primary-strong);
	border-radius: var(--sk-radius-sm);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.sk-util__profile-menu:not([hidden]) {
	display: block;
}

.sk-util__profile-menu li {
	border-top: 1px solid rgba(255, 255, 255, .25);
}

.sk-util__profile-menu li:first-child {
	border-top: 0;
}

.sk-util__profile-menu a {
	display: block;
	padding: 8px 12px;
	font-size: 14px;
	color: #fff;
	white-space: nowrap;
}

.sk-util__profile-menu a:hover,
.sk-util__profile-menu a:focus {
	background: rgba(255, 255, 255, .12);
	text-decoration: none;
}

/* 총괄관리자 (PC/MO 공통) */
.sk-auth {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sk-auth__select {
	height: 28px;
	min-width: 100px;
	padding: 0 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--sk-text-util);
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius-xs);
}

.sk-auth__go {
	height: 28px;
	padding: 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--sk-primary-strong);
	border: 0;
	border-radius: var(--sk-radius-xs);
	cursor: pointer;
}

.sk-auth__go:hover,
.sk-auth__go:focus {
	background: var(--sk-primary-text);
}

.sk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 3-3. PC 메인 메뉴 */
.sk-gnb {
	position: relative;
	border-top: 1px solid var(--sk-border);
}

.sk-gnb__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sk-gap-6);
	max-width: 1200px;
	height: 56px;
	margin: 0 auto;
	padding: 0;
}

.sk-gnb__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 41px;
	padding: 6px 16px;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--sk-text-muted);
	border-radius: var(--sk-radius-sm);
}

.sk-gnb__link:hover,
.sk-gnb__link:focus {
	background: var(--sk-primary-bg);
	color: var(--sk-primary-text);
}

.sk-gnb__item.is-active .sk-gnb__link,
.sk-gnb__link[aria-current="page"] {
	background: var(--sk-primary-bg-strong);
	color: var(--sk-primary-text);
	font-weight: 500;
}

/* 건너뛰기 링크 (KRDS) */
.sk-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 1001;
	padding: 8px 16px;
	background: #000;
	color: #fff;
	font-size: 15px;
}

.sk-skip-link:focus {
	top: 0;
}

/* PC GNB 2뎁스 패널 (KRDS main_menu_open) */
.sk-gnb__bar {
	max-width: 1200px;
	margin: 0 auto;
}

.sk-gnb__item {
	position: static;
}

.sk-gnb__item.is-open > .sk-gnb__link {
	background: var(--sk-primary-bg-strong);
	color: var(--sk-primary-text);
	font-weight: 500;
}

.sk-gnb__sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	/*background: var(--sk-surface);*/
	background: var(--sk-surface-subtle);
	border-top: 1px solid var(--sk-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.sk-gnb__item.is-open .sk-gnb__sub {
	display: block;
}

.sk-gnb__sub-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sk-gap-4);
	/*background: var(--sk-surface-subtle);*/
}

.sk-gnb__sub-head {
	display: flex;
	align-items: center;
	gap: var(--sk-gap-4);
	margin-bottom: var(--sk-gap-4);
}

.sk-gnb__sub-title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sk-text);
}

.sk-gnb__sub-go {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-gap-1);
	font-size: 15px;
	color: var(--sk-text);
	text-decoration: underline;
}

.sk-gnb__sub-go img {
	width: 16px;
	height: 16px;
}

.sk-gnb__sub-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sk-gap-3) var(--sk-gap-7);
	margin: 0;
	padding: 0;
	list-style: none;
	letter-spacing: -0.4px;
}

.sk-gnb__sub-link {
	display: flex;
	align-items: center;
	gap: var(--sk-gap-2);
	padding: 10px var(--sk-gap-3);
	border-radius: 6px;
	font-size: 17px;
	color: var(--sk-text);
}

.sk-gnb__sub-link:hover,
.sk-gnb__sub-link:focus {
	background: var(--sk-primary-bg);
	color: var(--sk-primary-text);
}

.sk-gnb__bullet {
	display: flex;
	align-items: center;
	height: 26px;
	padding-right: var(--sk-gap-3);
}

.sk-gnb__bullet::before {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 4px;
	background: #33363d;
}

/* 3-4. 모바일 유틸 / 드로어 */
.sk-mo-util {
	display: none;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
	gap: 0;
}

.sk-mo-util__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 56px;
	padding: 4px 8px 0;
	white-space: nowrap;
	background: none;
	border: 0;
	border-radius: var(--sk-radius-sm);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sk-text);
}

.sk-mo-util__btn img {
	width: 20px;
	height: 20px;
}

.sk-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	width: 300px;
	max-width: 85vw;
	height: 100%;
	background: var(--sk-surface);
	box-shadow: -4px 0 16px rgba(0, 0, 0, .12);
	overflow-y: auto;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform .25s ease, visibility .25s ease;
}

.sk-drawer.is-open {
	visibility: visible;
	transform: translateX(0);
}

.sk-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-gap-2);
	padding: 16px;
	border-bottom: 1px solid var(--sk-border);
}

.sk-drawer__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--sk-text);
}

.sk-drawer__close {
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	border-radius: var(--sk-radius-sm);
	font-size: 22px;
	line-height: 1;
	color: var(--sk-text-body);
}

.sk-drawer__list {
	margin: 0;
	padding: 8px 0;
}

.sk-drawer__list a {
	display: block;
	padding: 14px 16px;
	font-size: 17px;
	color: var(--sk-text);
	border-radius: 0;
}

.sk-drawer__list a:hover {
	background: var(--sk-primary-bg);
	color: var(--sk-primary-text);
}

/* MO 전체메뉴 아코디언 (KRDS) */
.sk-drawer__accordion {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk-drawer__group {
	border-bottom: 1px solid var(--sk-border-divider);
}

.sk-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px var(--sk-gap-4);
	background: none;
	border: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--sk-text);
	text-align: left;
}

.sk-drawer__toggle::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%236b7280' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .2s ease;
}

.sk-drawer__group.is-open .sk-drawer__toggle::after {
	transform: rotate(180deg);
}

.sk-drawer__sub {
	margin: 0;
	padding: 4px 0 12px;
	list-style: none;
	background: var(--sk-surface-card);
}

.sk-drawer__sub[hidden] {
	display: none;
}

.sk-drawer__sub a {
	display: block;
	padding: 10px 24px;
	font-size: 15px;
	color: var(--sk-text-body);
}

.sk-drawer__sub a:hover,
.sk-drawer__sub a:focus {
	background: var(--sk-primary-bg);
	color: var(--sk-primary-text);
}

.sk-drawer__util {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sk-gap-2) var(--sk-gap-3);
	margin: 0;
	padding: 12px var(--sk-gap-4);
	list-style: none;
	border-bottom: 1px solid var(--sk-border);
}

.sk-drawer__util li {
	display: flex;
	align-items: center;
	padding: 0;
}

.sk-drawer__util a {
	font-size: 14px;
	font-weight: 500;
	color: var(--sk-text-util);
	white-space: nowrap;
}

.sk-drawer__util a:hover,
.sk-drawer__util a:focus {
	color: var(--sk-primary-text);
	text-decoration: underline;
}

.sk-drawer__util-lang {
	display: flex;
	align-items: center;
	gap: var(--sk-gap-2);
}

.sk-drawer__util-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--sk-text-util);
	white-space: nowrap;
}

.sk-drawer__util-lang-btn img {
	width: 14px;
	height: 14px;
}

.sk-drawer__util-lang-btn.is-on {
	color: var(--sk-primary-strong);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sk-drawer__util-lang-btn:hover,
.sk-drawer__util-lang-btn:focus {
	color: var(--sk-primary-text);
	text-decoration: underline;
}

/* MO 사용자명 드롭다운 */
.sk-drawer__profile {
	position: relative;
	width: 100%;
}

.sk-drawer__profile-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--sk-text-util);
	cursor: pointer;
}

.sk-drawer__profile-btn::after {
	content: "▼";
	font-size: 9px;
	line-height: 1;
	color: var(--sk-text-util);
}

.sk-drawer__profile-ico {
	width: 15px;
	height: 15px;
}

.sk-drawer__profile-menu {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 10;
	min-width: 120px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--sk-primary-strong);
	border-radius: var(--sk-radius-sm);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.sk-drawer__profile-menu:not([hidden]) {
	display: block;
}

.sk-drawer__profile-menu li {
	border-top: 1px solid rgba(255, 255, 255, .25);
}

.sk-drawer__profile-menu li:first-child {
	border-top: 0;
}

.sk-drawer__profile-menu a {
	display: block;
	padding: 8px 12px;
	font-size: 14px;
	color: #fff;
	white-space: nowrap;
}

.sk-drawer__profile-menu a:hover,
.sk-drawer__profile-menu a:focus {
	background: rgba(255, 255, 255, .12);
	text-decoration: none;
}

.sk-drawer__admin {
	width: 100%;
}

.sk-auth--drawer {
	width: 100%;
}

.sk-auth--drawer .sk-auth__select {
	flex: 1;
	min-width: 0;
}

.sk-dimmed {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(0, 0, 0, .45);
}

.sk-dimmed.is-open {
	display: block;
}

body.sk-scroll-lock {
	overflow: hidden;
}

/* ---------------------------------------------------------
 * 4. 히어로 롤링 배너
 * --------------------------------------------------------- */
/*
 * PC·태블릿 히어로: 콘텐츠 폭(1360) × 높이(420) 비율을 유지한다.
 * 좁은 태블릿에서 높이만 420 고정이면 PC 배너가 cover 로 좌우가 잘린다.
 */
.sk-hero {
	position: relative;
	max-width: var(--sk-content);
	width: 100%;
	height: auto;
	aspect-ratio: 1360 / 420;
	max-height: 420px;
	margin: 0 auto 15px auto;
	border-radius: var(--sk-radius-3xl);
	overflow: hidden;
	background: linear-gradient(135deg, #eaf3fd 0%, #dce9f8 100%);
}

.sk-hero__viewport {
	height: 100%;
	overflow: hidden;
}

.sk-hero__viewport .swiper-wrapper,
.sk-hero__viewport .swiper-slide {
	height: 100%;
}

.sk-hero__slide {
	display: flex;
	position: relative;
	align-items: center;
	height: 100%;
	min-height: 0;
	padding: 60px;
	box-sizing: border-box;
}

/* 배경 이미지가 슬라이드 전체를 덮고, 문구·컨트롤은 그 위에 올린다 */
.sk-hero__illust {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	pointer-events: none;
}

.sk-hero__slide--banner {
	padding: 0;
	justify-content: stretch;
}

.sk-hero__banner {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* picture 가 슬라이드 높이를 채워야 PC/모바일 이미지가 object-fit 으로 맞춰진다 */
.sk-hero__banner picture {
	display: block;
	width: 100%;
	height: 100%;
}

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

.sk-hero__copy {
	position: relative;
	z-index: 1;
	flex: 0 1 608px;
	max-width: 608px;
}

.sk-hero__title {
	margin: 0;
	font-size: 43.7px;
	font-weight: 400;
	line-height: 50.6px;
	letter-spacing: -1.2px;
	color: var(--sk-text-title);
}

.sk-hero__desc {
	margin: 21px 0 0;
	font-size: 15px;
	line-height: 25.5px;
	letter-spacing: -0.2px;
	color: var(--sk-text-desc);
}

.sk-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-gap-3);
	margin-top: 33px;
	padding: 14px 26px;
	background: var(--sk-primary-strong);
	border: 0;
	border-radius: var(--sk-radius-md);
	box-shadow: var(--sk-shadow-cta);
	font-size: 15px;
	color: #fff;
}

.sk-hero__cta img {
	width: 16px;
	height: 16px;
}

.sk-hero__cta:hover {
	background: var(--sk-primary-dark);
}

.sk-hero__controls {
	position: absolute;
	left: 60px;
	right: 60px;
	bottom: 31px;
	z-index: 2;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.sk-hero__nav {
	display: flex;
	align-items: center;
	gap: var(--sk-gap-2);
	pointer-events: auto;
}

.sk-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: var(--sk-radius-max);
	box-shadow: 0 1px 4px rgba(15, 30, 65, .12);
	line-height: 1;
	color: var(--sk-text-body);
}

.sk-hero__btn:hover {
	background: #fff;
}

/* KRDS 시스템 아이콘 (24 → 20 표시) */
.sk-hero__ico {
	display: block;
	width: 20px;
	height: 20px;
}

/* 재생 중: pause(stop) 표시 / 정지 중: play 표시 */
.sk-hero__toggle .sk-hero__ico--play {
	display: none;
}

.sk-hero__toggle[aria-pressed="true"] .sk-hero__ico--pause {
	display: none;
}

.sk-hero__toggle[aria-pressed="true"] .sk-hero__ico--play {
	display: block;
}

/* 점 페이징: 활성 알약 20x8, 비활성 원 8x8 */
.sk-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 2px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto !important;
	transform: translateX(-50%);
	pointer-events: auto;
}

.sk-hero__dots .swiper-pagination-bullet {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 !important;
	padding: 0;
	background: #6d7882;
	border: 0;
	border-radius: var(--sk-radius-max);
	opacity: 1;
	transition: width .2s ease;
	cursor: pointer;
}

.sk-hero__dots .swiper-pagination-bullet-active {
	width: 20px;
	background: var(--sk-primary-strong);
}


/* ---------------------------------------------------------
 * 5. 공지사항 + 4가지 소식
 * --------------------------------------------------------- */
.sk-board {
	display: flex;
	align-items: stretch;
	gap: 14px;
	max-width: var(--sk-content);
	margin: 0 auto 15px auto;
	padding: 40px 36px;
	background: var(--sk-surface);
	border: 1px solid var(--sk-border-light);
	border-radius: var(--sk-radius-3xl);
}

/* 5-1. 공지사항 */
.sk-notice {
	flex: 1 1 651px;
	min-width: 0;
}

.sk-notice__head {
	position: relative;
	padding-bottom: 20px;
}

.sk-notice__title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 35.2px;
	letter-spacing: -0.5px;
	color: var(--sk-text-strong);
}

.sk-notice__desc {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 20.8px;
	color: var(--sk-text-placeholder);
}

.sk-notice__more {
	position: absolute;
	top: 10px;
	right: 0;
	font-size: 16px;
	line-height: 20.8px;
	color: var(--sk-primary);
}

.sk-notice__more:hover {
	text-decoration: underline;
}

.sk-notice__list {
	margin: 0;
	padding: 0;
}

.sk-notice__item {
	border-bottom: 1px solid var(--sk-border-divider);
}

.sk-notice__link {
	display: flex;
	align-items: center;
	gap: var(--sk-gap-3);
	width: 100%;
	min-height: 62px;
	padding: 18px 0;
	border-radius: var(--sk-radius-xs);
}

.sk-notice__badge {
	flex: none;
	padding: 4px 10px;
	background: var(--sk-primary-bg);
	border-radius: var(--sk-radius-xs);
	font-size: 14px;
	font-weight: 500;
	line-height: 17.6px;
	color: var(--sk-primary);
}

.sk-notice__subject {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 22.4px;
	color: var(--sk-text-list);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sk-notice__link:hover .sk-notice__subject {
	color: var(--sk-primary);
	text-decoration: underline;
}

.sk-notice__date {
	flex: none;
	font-size: 14px;
	line-height: 19.2px;
	color: var(--sk-text-date);
}

.sk-notice__empty {
	padding: 40px 0;
	font-size: 16px;
	color: var(--sk-text-placeholder);
	text-align: center;
}

/* 5-2. 4가지 소식 - 이미지는 네모 원본, 라운드는 CSS에서 처리 */
.sk-news4 {
	flex: 0 0 629px;
}

.sk-news4__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	margin: 0;
	padding: 0;
}

.sk-news4__link {
	display: block;
	position: relative;
	border-radius: var(--sk-radius-2xl);
	overflow: hidden;
}

.sk-news4__link img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 860 / 450;
	object-fit: cover;
	transition: transform .25s ease;
}

.sk-news4__link:hover img,
.sk-news4__link:focus img {
	transform: scale(1.04);
}

/* ---------------------------------------------------------
 * 6. 내게 맞는 강의 찾아보기
 * --------------------------------------------------------- */
.sk-finder {
	max-width: var(--sk-content);
	margin: 0 auto 15px auto;
	padding: 44px 44px 36px;
	background: var(--sk-surface-subtle);
	border-radius: var(--sk-radius-3xl);
}

.sk-finder__inner {
	display: grid;
	grid-template-columns: 280px 1fr;
	grid-template-areas:
		"intro steps"
		"cta   steps";
	align-items: center;
	gap: var(--sk-gap-5) var(--sk-gap-6);
}

.sk-finder__intro {
	grid-area: intro;
	align-self: end;
}

.sk-finder__title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 34.1px;
	letter-spacing: -0.6px;
	color: var(--sk-text-title);
}

.sk-finder__desc {
	margin: 9px 0 0;
	font-size: 14px;
	line-height: 21.6px;
	letter-spacing: -0.2px;
	color: var(--sk-text-desc);
}

.sk-finder__cta {
	grid-area: cta;
	align-self: start;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--sk-gap-3);
	padding: 11px 21px;
	background: var(--sk-surface);
	border: 1px solid var(--sk-primary-strong);
	border-radius: var(--sk-radius-md);
	font-size: 16px;
	font-weight: 600;
	color: var(--sk-primary-strong);
}

.sk-finder__cta img {
	width: 14px;
	height: 14px;
}

.sk-finder__cta:hover {
	background: var(--sk-primary-strong);
	color: #fff;
}

.sk-finder__cta:hover img {
	filter: brightness(0) invert(1);
}

.sk-finder__steps {
	grid-area: steps;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--sk-gap-1);
	margin: 0;
	padding: 0;
}

.sk-finder__step {
	width: 130px;
	text-align: center;
}

.sk-finder__step-link {
	display: block;
	width: 100%;
	padding: 4px 0;
	border-radius: var(--sk-radius-lg);
}

.sk-finder__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	margin: 0 auto;
	background: var(--sk-surface);
	border-radius: var(--sk-radius-max);
	box-shadow: var(--sk-shadow-step);
}

.sk-finder__icon img {
	width: 44px;
	height: 44px;
}

.sk-finder__label {
	display: block;
	margin-top: 13px;
	font-size: 16px;
	line-height: 21.7px;
	letter-spacing: -0.2px;
	color: var(--sk-text-title);
}

.sk-finder__hint {
	display: block;
	font-size: 14px;
	line-height: 18.6px;
	letter-spacing: -0.8px;
	color: var(--sk-text-sub);
}

.sk-finder__arrow {
	flex: none;
	align-self: center;
	width: 16px;
	margin-top: -40px;
}

.sk-finder__arrow img {
	width: 16px;
	height: 16px;
}

/* ---------------------------------------------------------
 * 7. 추천 콘텐츠 (탭)
 * --------------------------------------------------------- */
.sk-hub {
	max-width: var(--sk-content);
	margin: 0 auto;
	padding: 37px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: var(--sk-radius-3xl);
}

.sk-hub__inner {
	max-width: 1280px;
	margin: 0 auto;
}

.sk-hub__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sk-gap-6);
	padding-bottom: 25px;
	border-bottom: 1px solid var(--sk-border-strong);
}

.sk-hub__title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 24px;
	color: var(--sk-text-heading);
}

.sk-hub__desc {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sk-text-body);
}

.sk-hub__tabs {
	display: flex;
	gap: var(--sk-gap-6);
}

.sk-hub__tab {
	padding: 0 0 12px;
	background: none;
	border: 0;
	border-bottom: 4px solid transparent;
	border-radius: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sk-text-body);
}

.sk-hub__tab[aria-selected="true"] {
	border-bottom-color: var(--sk-primary);
	color: var(--sk-primary);
	font-weight: 600;
}

.sk-hub__panel {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sk-gap-6);
	margin-top: 48px;
}

.sk-hub__panel[hidden] {
	display: none;
}

/* 7-1. 큰 카드 - 오른쪽 목록 3개(136px + 간격)와 높이를 맞춘다 */
.sk-hub__feature {
	grid-column: 1 / span 2;
	position: relative;
	height: calc(136px * 3 + var(--sk-gap-5) * 2);
	border-radius: var(--sk-radius-xl);
	overflow: hidden;
}

/* 안쪽 viewport 만 Swiper 컨테이너로 써서 높이 붕괴를 막는다 */
.sk-hub__feature-viewport {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sk-hub__feature-viewport .swiper-wrapper,
.sk-hub__feature-viewport .swiper-slide {
	height: 100%;
}

.sk-hub__feature-viewport .swiper-slide {
	position: relative;
}

.sk-hub__feature-link {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	border-radius: var(--sk-radius-xl);
	overflow: hidden;
	cursor: pointer;
	pointer-events: auto;
}

/* picture/img 를 카드 전체에 깔아 object-fit 이 동작하게 한다 */
.sk-hub__feature-link picture {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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

.sk-hub__feature-body {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 32px;
	background: linear-gradient(0deg, rgba(247, 249, 252, .96) 0%, rgba(247, 249, 252, .82) 55%, rgba(247, 249, 252, 0) 100%);
}

/*
 * 페이징은 우상단만 차지해야 한다.
 * Swiper 기본(.swiper-container-horizontal > .swiper-pagination-bullets)의
 * left:0 / width:100% 가 이기면 투명 영역이 카드 전체를 덮어 a 클릭이 막힌다.
 */
.sk-hub__feature-viewport.swiper-container-horizontal > .sk-hub__feature-dots.swiper-pagination-bullets,
.sk-hub__feature-dots {
	position: absolute;
	top: 16px !important;
	right: 16px !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 2;
	width: auto !important;
	height: auto !important;
	text-align: right;
	pointer-events: none;
}

.sk-hub__feature-dots .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	background: rgba(255, 255, 255, .7);
	box-shadow: 0 1px 3px rgba(15, 30, 65, .25);
	border: 0;
	border-radius: 50%;
	opacity: 1;
	cursor: pointer;
	vertical-align: middle;
	pointer-events: auto;
}

.sk-hub__feature-dots .swiper-pagination-bullet-active {
	width: 20px;
	border-radius: 999px;
	background: var(--sk-primary-strong);
}

/* 슬라이드 1장일 때는 점 UI를 숨긴다 */
.sk-hub__feature.is-single .sk-hub__feature-dots {
	display: none;
}

.sk-hub__tags {
	display: flex;
	align-items: center;
	gap: var(--sk-gap-3);
	margin-bottom: var(--sk-gap-2);
}

.sk-hub__tag {
	padding: 4px 12px;
	background: var(--sk-surface-card);
	border-radius: var(--sk-radius-lg);
	box-shadow: var(--sk-shadow-card);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sk-primary-deep);
}

.sk-hub__tag--pick {
	padding: 4px 8px;
}

.sk-hub__feature-title {
	display: block;
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--sk-text-heading);
}

.sk-hub__feature-desc {
	display: block;
	/*max-width: 576px;*/
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: #000;
}

/* 7-2. 작은 카드 */
.sk-hub__list {
	display: flex;
	flex-direction: column;
	gap: var(--sk-gap-5);
	margin: 0;
	padding: 0;
}

.sk-hub__card {
	background: var(--sk-surface);
	/*border-radius: var(--sk-radius-xl);*/
	box-shadow: var(--sk-shadow-card);
}

.sk-hub__card-link {
	display: flex;
	align-items: center;
	gap: var(--sk-gap-4);
	width: 100%;
	height: 136px;
	padding: 16px;
	border-radius: var(--sk-radius-xl);
}

.sk-hub__card-thumb {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: var(--sk-radius-sm);
	object-fit: cover;
	background: var(--sk-primary-bg);
}

.sk-hub__card-body {
	display: block;
	min-width: 0;
}

.sk-hub__card-cate {
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sk-primary-deep);
}

.sk-hub__card:nth-child(2) .sk-hub__card-cate {
	color: var(--sk-accent-green);
}

.sk-hub__card:nth-child(3) .sk-hub__card-cate {
	color: var(--sk-accent-magenta);
}

.sk-hub__card-title {
	display: block;
	margin: 4px 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sk-text-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sk-hub__card-desc {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sk-text-body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sk-hub__card-link:hover .sk-hub__card-title {
	color: var(--sk-primary);
	text-decoration: underline;
}

/* ---------------------------------------------------------
 * 8. 푸터
 * --------------------------------------------------------- */
.sk-footer {
	margin-top: var(--sk-main-bottom-pc);
	background: var(--sk-surface);
}

/* 8-1. 관련 사이트 */
.sk-footer__related {
	border-top: 1px solid var(--sk-border);
	border-bottom: 1px solid var(--sk-border);
}

.sk-footer__related-inner {
	max-width: var(--sk-content);
	margin: 0 auto;
	border-left: 1px solid var(--sk-border);
}

.sk-footer__related-box {
	position: relative;
	width: 300px;
	border-right: 1px solid var(--sk-border);
}

.sk-footer__related-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-gap-2);
	width: 100%;
	height: 56px;
	padding: 0 24px;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 17px;
	line-height: 1.5;
	color: #000;
	text-align: left;
}

.sk-footer__related-toggle img {
	flex: none;
	width: 20px;
	height: 20px;
	transition: transform .2s ease;
}

.sk-footer__related-toggle[aria-expanded="true"] img {
	transform: rotate(45deg);
}

.sk-footer__related-toggle:hover {
	background: var(--sk-primary-bg);
	color: var(--sk-primary);
}

/* PC 는 푸터 상단이므로 위쪽으로 펼친다 */
.sk-footer__related-list {
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: 100%;
	z-index: 10;
	margin: 0;
	padding: 8px 0;
	background: var(--sk-surface);
	border: 1px solid var(--sk-border);
	box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
}

.sk-footer__related-list[hidden] {
	display: none;
}

.sk-footer__related-list a {
	display: block;
	padding: 10px 24px;
	border-radius: 0;
	font-size: 16px;
	color: var(--sk-text);
}

.sk-footer__related-list a:hover {
	background: var(--sk-primary-bg);
	color: var(--sk-primary);
	text-decoration: underline;
}

/* 8-2. 본문 */
.sk-footer__surface {
	padding: 40px 0 24px;
	background: var(--sk-surface-subtle);
}

.sk-footer__inner {
	max-width: var(--sk-content);
	margin: 0 auto;
	padding: 0 20px;
}

.sk-footer__logo {
	display: inline-block;
	margin-bottom: var(--sk-gap-7);
}

.sk-footer__logo img {
	width: 151px;
	height: 38px;
	object-fit: contain;
}

.sk-footer__grid {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sk-gap-5);
}

.sk-footer__address {
	max-width: 620px;
	margin: 0;
	font-size: 14px;
	line-height: 22.75px;
	color: var(--sk-text-muted);
}

.sk-footer__sns {
	display: flex;
	gap: var(--sk-gap-2);
	margin: 0;
	padding: 0;
}

.sk-footer__sns a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius-max);
}

.sk-footer__sns img {
	width: 24px;
	height: 24px;
}

.sk-footer__sns a:hover {
	background: var(--sk-surface);
	border-color: var(--sk-primary-strong);
}

.sk-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-gap-7);
	max-width: var(--sk-content);
	margin: 40px auto 0;
	padding: 16px 20px 0;
	border-top: 1px solid var(--sk-border);
}

.sk-footer__policy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-gap-2);
	margin: 0;
	padding: 0;
}

.sk-footer__policy a {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 2px;
	border-radius: var(--sk-radius-xs);
	font-size: 15px;
	line-height: 1.5;
	color: var(--sk-text);
}

.sk-footer__policy a:hover {
	text-decoration: underline;
}

.sk-footer__policy li:first-child a {
	color: var(--sk-primary-dark);
	font-weight: 600;
}

.sk-footer__copyright {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--sk-text-muted);
	white-space: nowrap;
}
/* =========================================================
 * 반응형 - 컨텐츠 영역크기 이하 (max-width: 1360px)
 * ========================================================= */
 @media screen and (max-width: 1360px) {
	.sk-main {
		padding: 0 16px;
	}
 }
/* =========================================================
 * 반응형 - 태블릿 이하 (max-width: 1024px)
 * ========================================================= */
@media screen and (max-width: 1024px) {
	/* 비율은 기본(1360/420) 유지. 고정 height 로 덮어쓰지 않는다 */
	.sk-hero__slide {
		padding: 40px 40px 80px;
	}

	/* 프로모션 배너는 PC와 동일하게 슬라이드 전체(패딩 없음)를 채운다 */
	.sk-hero__slide--banner {
		padding: 0;
	}

	.sk-hero__slide--banner .sk-hero__banner img {
		object-fit: cover;
		object-position: center center;
	}

	.sk-hero__controls {
		left: 40px;
		right: 40px;
		bottom: 24px;
	}

	.sk-hero__title {
		font-size: 34px;
		line-height: 42px;
		letter-spacing: -0.8px;
	}

	.sk-board {
		flex-direction: column;
		padding: 32px 24px;
	}

	.sk-notice,
	.sk-news4 {
		flex: 1 1 auto;
		width: 100%;
	}

	.sk-finder {
		padding: 32px 24px;
	}

	.sk-finder__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"intro"
			"steps"
			"cta";
		align-items: start;
	}

	.sk-finder__steps {
		justify-content: space-between;
		width: 100%;
	}

	.sk-hub {
		padding: 28px 20px;
	}

	.sk-hub__inner {
		padding: 0;
	}

	.sk-hub__panel {
		grid-template-columns: 1fr;
		margin-top: 32px;
	}

	.sk-hub__feature {
		grid-column: auto;
	}

	.sk-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sk-gap-3);
	}
}

/* =========================================================
 * 반응형 - 헤더 모바일 (max-width: 937px)
 * PC GNB·유틸이 좁은 태블릿(768~937px)에서 깨지므로 MO 헤더 적용
 * ========================================================= */
@media screen and (max-width: 937px) {
	:root {
		--sk-header-h: 72px;
	}

	.sk-masthead {
		display: none;
	}

	.sk-header {
		border-bottom: 1px solid var(--sk-border-light);
	}

	.sk-header__identity {
		height: 72px;
		padding: 16px 0;
		gap: var(--sk-gap-4);
	}

	.sk-brand__logo {
		width: 126px;
		height: 40px;
	}

	/* MO 는 시안대로 로고 이미지만 노출하고 서비스명은 스크린리더용으로 남긴다 */
	.sk-brand__name {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.sk-util {
		display: none;
	}

	.sk-gnb {
		display: none;
	}

	.sk-mo-util {
		display: flex;
	}
}

/* =========================================================
 * 반응형 - 모바일 (max-width: 767px)
 * ========================================================= */
@media screen and (max-width: 767px) {
	/*
	 * 모바일 히어로: 기기 너비에 비례한 5:6 비율 (모바일 배너 시안 1500x1800과 동일).
	 * max-height 로 가로 모드에서 뷰포트를 넘지 않게 하고, 그때는 너비도 비율에 맞춰 줄인다.
	 */
	.sk-hero {
		width: min(100%, calc(85vh * 5 / 6));
		height: auto;
		aspect-ratio: 5 / 6;
		max-height: 85vh;
		margin-left: auto;
		margin-right: auto;
		border-radius: var(--sk-radius-2xl);
	}

	.sk-hero__viewport,
	.sk-hero__viewport .swiper-wrapper,
	.sk-hero__viewport .swiper-slide {
		height: 100%;
	}

	.sk-hero__slide {
		align-items: stretch;
		justify-content: flex-start;
		height: 100%;
		min-height: 0;
		padding: 20px 20px 72px;
		box-sizing: border-box;
	}

	/* 고정 카피 슬라이드만 패딩. 배너는 영역 전체를 이미지로 채운다 */
	.sk-hero__slide--banner {
		padding: 0;
	}

	.sk-hero__slide--banner .sk-hero__banner,
	.sk-hero__slide--banner .sk-hero__banner picture,
	.sk-hero__slide--banner .sk-hero__banner img {
		width: 100%;
		height: 100%;
	}

	/* img 에 aspect-ratio/height:auto 를 주지 않는다. 슬롯 비율만 맞추고 cover 로 채운다 */
	.sk-hero__slide--banner .sk-hero__banner img {
		object-fit: cover;
		object-position: center center;
	}

	.sk-hero__copy {
		flex: none;
		max-width: none;
	}

	.sk-hero__illust {
		object-position: 100% bottom;
	}

	.sk-hero__controls {
		left: 23px;
		right: 21px;
		bottom: 8px;
		justify-content: space-between;
		align-items: center;
	}

	.sk-hero__controls .sk-hero__dots {
		position: static;
		left: auto;
		right: auto;
		bottom: auto;
		transform: none;
		justify-content: flex-start;
		width: auto !important;
		flex: 0 0 auto;
	}

	/* Swiper 기본 absolute·full-width 페이징 덮어씀 */
	.sk-hero__controls .sk-hero__dots.swiper-pagination,
	.sk-hero__controls .sk-hero__dots.swiper-pagination-bullets {
		position: static;
		width: auto !important;
		bottom: auto;
		left: auto;
		transform: none;
		text-align: left;
	}

	.sk-hero__controls .sk-hero__nav {
		margin-left: auto;
		flex-shrink: 0;
	}

	.sk-hero__title {
		font-size: 28px;
		line-height: 34px;
		letter-spacing: -0.6px;
	}

	.sk-hero__desc {
		margin-top: 16px;
		font-size: 15px;
		line-height: 24px;
	}

	.sk-hero__cta {
		margin-top: 24px;
		width: 188px;
		justify-content: center;
		padding: 14px 20px;
	}

	.sk-hero__banner {
		max-width: none;
	}

	/* 공지 + 소식 */
	.sk-main {
		padding-bottom: var(--sk-main-bottom-mo);
	}

	/* MO: 섹션 간격 32px (Figma contents y 좌표 기준) */
	.sk-main > * + * {
		margin-top: var(--sk-section-gap-mo);
	}

	.sk-board {
		gap: var(--sk-gap-6);
		padding: 24px 16px;
		border-radius: var(--sk-radius-2xl);
	}

	.sk-notice__title {
		font-size: 22px;
		line-height: 30px;
	}

	.sk-notice__desc {
		font-size: 14px;
	}

	.sk-notice__more {
		top: 4px;
		font-size: 14px;
	}

	/* 모바일에서는 배지+제목 / 날짜 2줄 배치 */
	.sk-notice__link {
		flex-wrap: wrap;
		gap: var(--sk-gap-2);
		padding: 10px 0;
	}

	.sk-notice__subject {
		flex: 1 1 auto;
		font-size: 15px;
		line-height: 20px;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.sk-notice__date {
		flex: 1 0 100%;
	}

	.sk-news4__grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	/* 강의 찾아보기 */
	.sk-finder {
		padding: 24px 20px;
		border-radius: var(--sk-radius-2xl);
	}

	.sk-finder__title {
		font-size: 22px;
		line-height: 30px;
	}

	.sk-finder__steps {
		flex-direction: column;
		align-items: center;
		gap: var(--sk-gap-1);
	}

	.sk-finder__step {
		width: 100%;
	}

	.sk-finder__arrow {
		margin-top: 0;
		transform: rotate(90deg);
	}

	.sk-finder__cta {
		justify-self: stretch;
		justify-content: center;
		padding: 17px 20px;
		font-size: 15px;
	}

	/* 추천 콘텐츠 */
	.sk-hub {
		padding: 24px 20px;
		border-radius: var(--sk-radius-2xl);
	}

	.sk-hub__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sk-gap-5);
		padding-bottom: 0;
		border-bottom: 0;
	}
	.sk-hub__feature-thumb{
		object-fit: fill;
	}

	.sk-hub__title {
		font-size: 22px;
	}

	.sk-hub__desc {
		font-size: 15px;
		line-height: 22px;
	}

	.sk-hub__tabs {
		gap: var(--sk-gap-5);
		width: 100%;
		border-bottom: 1px solid var(--sk-border-strong);
	}

	.sk-hub__tab {
		font-size: 16px;
	}

	.sk-hub__panel {
		gap: var(--sk-gap-4);
		margin-top: 24px;
	}

	.sk-hub__feature {
		min-height: 0;
		height: 400px;
	}

	.sk-hub__feature-dots {
		top: 12px;
		right: 12px;
	}

	.sk-hub__feature-body {
		padding: 20px 16px;
	}

	.sk-hub__list {
		gap: var(--sk-gap-4);
	}

	.sk-hub__card-link {
		height: auto;
		min-height: 136px;
		align-items: flex-start;
	}

	.sk-hub__card-title,
	.sk-hub__card-desc {
		font-size: 15px;
		white-space: normal;
	}

	/* 푸터 - MO는 콘텐츠와 푸터가 바로 이어짐 */
	.sk-footer {
		margin-top: 0;
	}

	.sk-footer__related-inner {
		border-left: 0;
	}

	.sk-footer__related-box {
		width: 100%;
		border-right: 0;
	}

	.sk-footer__related-toggle {
		padding: 0 16px;
		font-size: 16px;
	}

	/* MO 는 아코디언으로 아래쪽에 펼친다 */
	.sk-footer__related-list {
		position: static;
		padding: 0;
		border: 0;
		border-top: 1px solid var(--sk-border);
		box-shadow: none;
	}

	.sk-footer__related-list a {
		padding: 12px 16px;
		border-bottom: 1px solid var(--sk-border-light);
	}

	.sk-footer__surface {
		padding: 24px 0;
	}

	.sk-footer__inner {
		padding: 0 16px;
	}

	.sk-footer__logo {
		margin-bottom: var(--sk-gap-5);
	}

	.sk-footer__logo img {
		width: 126px;
		height: 32px;
	}

	.sk-footer__grid {
		flex-direction: column;
		gap: var(--sk-gap-5);
	}

	.sk-footer__address {
		font-size: 13px;
		line-height: 21px;
	}

	.sk-footer__sns {
		align-self: flex-end;
	}

	.sk-footer__bottom {
		margin-top: 24px;
		padding: 0;
	}

	/* MO 는 시안과 같이 정책 링크를 56px 행으로 쌓는다 */
	.sk-footer__policy {
		display: block;
		width: 100%;
	}

	.sk-footer__policy li {
		border-bottom: 1px solid var(--sk-border-light);
	}

	.sk-footer__policy a {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 16px;
		border-radius: 0;
		font-size: 15px;
	}

	.sk-footer__copyright {
		padding: 20px 16px 0;
	}

	.sk-footer__copyright {
		font-size: 13px;
		white-space: normal;
	}
}