@charset "utf-8";

/* ==========================================================================
   LIFE — 토털라이프지원센터 포털
   디자인 시스템: 배재대학교 토털라이프지원센터 (oc-* 클래스 prefix 는 그대로 유지)
   ========================================================================== */

/* ---- 색상 변수 ---- */
:root {
	--navy-dark: #002D62;
	--navy-sub: #1A2B5B;
	--blue-accent: #2F6FBF;
	--blue-light: #1476CE;
	--blue-pale: #E3F2FD;
	--bg-main: #F8F9FB;
	--bg-card: #F0F2F5;
	--text-dark: #263238;
	--text-medium: #4A4A4A;
	--text-muted: #546E7A;
	--text-light: #6E6E6E;
	--border-color: #E0E0E0;
	--star-yellow: #FFC107;
	--success-green: #2E7D32;
	--danger-red: #D32F2F;
	--white: #FFFFFF;
	--tag-new: #D32F2F;
	--tag-free: #1476CE;
	--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
	--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.14);
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	--container-max: 1200px;
	--transition: 0.2s ease;
}

/* ---- 리셋 & 기본 ---- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html { scroll-behavior: smooth; }
body {
	font-family: 'Noto Sans KR', "맑은 고딕", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 15px;
	color: var(--text-medium);
	background-color: var(--bg-main);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ---- 컨테이너 ---- */
.oc-container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- 뱃지/태그 ---- */
.oc-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}
.oc-badge--navy   { background: var(--navy-dark);    color: var(--white); }
.oc-badge--blue   { background: var(--blue-accent);  color: var(--white); }
.oc-badge--green  { background: var(--success-green); color: var(--white); }
.oc-badge--red    { background: var(--danger-red);   color: var(--white); }
.oc-badge--light  { background: rgba(77,136,216,.15); color: var(--blue-accent); }
.oc-badge--outline { border: 1px solid var(--border-color); color: var(--text-muted); background: transparent; }

/* ---- 버튼 ---- */
.oc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: var(--radius-md);
	font-size: 14px;
	font-weight: 600;
	transition: all var(--transition);
	white-space: nowrap;
}
.oc-btn--primary { background: var(--blue-accent); color: var(--white); }
.oc-btn--primary:hover { background: #3a72c4; transform: translateY(-1px); }
.oc-btn--navy { background: var(--navy-dark); color: var(--white); }
.oc-btn--navy:hover { background: var(--navy-sub); transform: translateY(-1px); }
.oc-btn--outline {
	border: 1.5px solid var(--border-color);
	color: var(--text-medium);
	background: var(--white);
}
.oc-btn--outline:hover { border-color: var(--blue-accent); color: var(--blue-accent); }
.oc-btn--full { width: 100%; }
.oc-btn:disabled,
.oc-btn:disabled:hover {
	background: var(--border-color);
	color: var(--text-muted);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---- 섹션 제목 ---- */
.oc-section-title {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 32px;
}
.oc-section-title .label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.oc-section-title h2 {
	font-size: 26px;
	font-weight: 700;
	color: var(--text-dark);
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
}
.oc-section-title h2::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 40px; height: 3px;
	background: var(--blue-accent);
	border-radius: 2px;
}

/* ---- 헤더 (네이비 - 메인) ---- */
.oc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--navy-dark);
	height: 64px;
	display: flex;
	align-items: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.oc-header .oc-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.oc-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--white);
	font-weight: 700;
	font-size: 17px;
}
.oc-header__logo-icon {
	width: 36px; height: 36px;
	background: rgba(255,255,255,.15);
	border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 900; color: var(--white);
	border: 1.5px solid rgba(255,255,255,.3);
}
.oc-header__logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.oc-header__logo-text span:first-child { font-size: 16px; font-weight: 700; }
.oc-header__logo-text span:last-child { font-size: 13.5px; font-weight: 400; opacity: .7; letter-spacing: .05em; }
/* 배재대학교 로고 이미지 (네이비/화이트 헤더 모두 대응 위해 흰 배경 칩 처리) */
.oc-header__logo-img {
	height: 38px; width: auto; display: block;
}
.oc-header__logo-sub {
	font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
}

.oc-nav { display: flex; align-items: center; gap: 28px; }
.oc-nav a {
	color: rgba(255,255,255,.85);
	font-size: 14px; font-weight: 500;
	transition: color var(--transition);
	position: relative; padding: 4px 0;
}
.oc-nav a:hover, .oc-nav a.active { color: var(--white); }
.oc-nav a.active::after {
	content: ''; position: absolute; left: 0; bottom: -2px;
	width: 100%; height: 2px; background: var(--blue-accent); border-radius: 2px;
}

/* ---- 2단 드롭다운 ---- */
.oc-nav__item {
	position: relative;
	padding: 22px 0;             /* 호버 영역 확장 */
}
.oc-nav__item > a {
	display: inline-flex; align-items: center; gap: 4px;
	cursor: pointer;
}
.oc-nav__item > a::after {
	content: '▾';
	font-size: 13.5px; opacity: .7;
	margin-left: 2px;
}
.oc-nav__item.active > a { color: var(--white); }
.oc-header--white .oc-nav__item.active > a { color: var(--navy-sub); }

.oc-nav__sub {
	display: none;
	position: absolute; top: 100%; left: -16px;
	min-width: 200px;
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	padding: 8px 0;
	z-index: 200;
}
.oc-nav__item:hover > .oc-nav__sub,
.oc-nav__item:focus-within > .oc-nav__sub { display: block; }

.oc-nav__sub a {
	display: block;
	padding: 9px 18px;
	color: var(--text-medium);
	font-size: 13.5px; font-weight: 500;
	white-space: nowrap;
	transition: all var(--transition);
}
.oc-nav__sub a:hover {
	background: var(--bg-card);
	color: var(--blue-accent);
	padding-left: 22px;
}
.oc-nav__sub a::after { content: none; }   /* 부모의 active underline 제거 */

/* 메가 드롭다운 (마이페이지 4/3컬럼) */
.oc-nav__sub.oc-nav__mega {
	display: none;
	min-width: 760px;
	left: -180px;
	padding: 22px 26px 24px;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px 32px;
}
.oc-nav__sub.oc-nav__mega--3col {
	min-width: 560px;
	left: -120px;
	grid-template-columns: repeat(3, 1fr);
}
.oc-nav__item--mega:hover > .oc-nav__sub.oc-nav__mega,
.oc-nav__item--mega:focus-within > .oc-nav__sub.oc-nav__mega {
	display: grid;
}
.oc-nav__col { display: flex; flex-direction: column; }
.oc-nav__col-title {
	font-size: 13.5px; font-weight: 700;
	color: var(--navy-dark);
	letter-spacing: .3px;
	padding: 0 0 8px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--blue-accent);
}
.oc-nav__mega .oc-nav__col a {
	display: block;
	padding: 7px 4px;
	color: var(--text-medium);
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: 4px;
	transition: all var(--transition);
}
.oc-nav__mega .oc-nav__col a:hover {
	background: var(--bg-card);
	color: var(--blue-accent);
	padding-left: 8px;
}

.oc-header__utils { display: flex; align-items: center; gap: 12px; }
.oc-header__utils a {
	color: rgba(255,255,255,.8); font-size: 13.5px;
	padding: 6px 12px; border-radius: var(--radius-sm);
	transition: all var(--transition);
}
.oc-header__utils a:hover { background: rgba(255,255,255,.1); color: var(--white); }
.oc-header__utils .btn-login {
	border: 1px solid rgba(255,255,255,.3);
	color: var(--white);
}
.oc-header__utils .btn-signup {
	background: var(--blue-accent); color: var(--white);
	font-weight: 600;
}
.oc-header__utils .btn-signup:hover { background: #3a72c4; }

/* ---- 헤더 (흰색 - 서브페이지) ---- */
.oc-header--white {
	background: var(--white);
	border-bottom: 1px solid var(--border-color);
}
.oc-header--white .oc-header__logo { color: var(--navy-sub); }
.oc-header--white .oc-header__logo-icon {
	background: var(--navy-sub); border-color: var(--navy-sub);
}
.oc-header--white .oc-nav a { color: var(--text-medium); }
.oc-header--white .oc-nav a:hover, .oc-header--white .oc-nav a.active { color: var(--navy-sub); }
.oc-header--white .oc-header__utils a { color: var(--text-medium); }
.oc-header--white .oc-header__utils a:hover { background: var(--bg-card); color: var(--text-dark); }
.oc-header--white .oc-header__utils .btn-login { border-color: var(--border-color); color: var(--text-medium); }
.oc-header--white .oc-header__utils .btn-signup { background: var(--navy-sub); color: var(--white); }

/* ---- 강사 전용 메뉴 (헤더 우측, 강사 계정에만 렌더) ---- */
.oc-header__utils .oc-header__gangsa { position: relative; display: flex; align-items: center; }
.oc-header__utils .oc-header__gangsa > .btn-gangsa::after {
	content: '▾'; margin-left: 4px; font-size: 12px; opacity: .7;
}
.oc-header__gangsa-sub { top: 100%; left: auto; right: 0; min-width: 168px; }
.oc-header__gangsa:hover > .oc-header__gangsa-sub,
.oc-header__gangsa:focus-within > .oc-header__gangsa-sub { display: block; }
.oc-header__utils .oc-header__gangsa-sub a { color: var(--text-medium); }
.oc-header__utils .oc-header__gangsa-sub a:hover { background: var(--bg-card); color: var(--blue-accent); }

/* ---- 푸터 ---- */
.oc-footer {
	background: #004ea2;
	padding: 48px 0 24px;
	color: rgba(255,255,255,.7);
	margin-top: auto;
}
.oc-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}
.oc-footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.oc-footer__logo-icon {
	width: 36px; height: 36px;
	background: rgba(255,255,255,.1);
	border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 900; color: var(--white);
	border: 1.5px solid rgba(255,255,255,.2);
}
.oc-footer__logo-img { height: 38px; width: auto; display: block; }
.oc-footer__logo-text { color: var(--white); font-size: 16px; font-weight: 700; }
.oc-footer__info { font-size: 13.5px; line-height: 1.8; }
.oc-footer__info strong { color: var(--white); }
.oc-footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.oc-footer__links { display: flex; gap: 18px; }
.oc-footer__links a { color: rgba(255,255,255,.8); font-size: 13.5px; }
.oc-footer__links a:hover { color: var(--white); }
.oc-footer__links-sep { color: rgba(255,255,255,.3); }
.oc-footer__social { display: flex; gap: 10px; }
.oc-footer__social a {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.1);
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,.7); font-size: 15px;
	transition: all var(--transition);
}
.oc-footer__social a:hover { background: rgba(255,255,255,.2); color: var(--white); }
.oc-footer__family select {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.2);
	color: rgba(255,255,255,.8);
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	font-size: 13.5px; font-family: inherit;
	width: 220px;
}
.oc-footer__family select option { color: #333; background: #fff; }
.oc-footer__bottom {
	display: flex; justify-content: center; gap: 20px;
	font-size: 13.5px; color: rgba(255,255,255,.4);
}
.oc-footer__bottom a { color: rgba(255,255,255,.4); }
.oc-footer__bottom a:hover { color: rgba(255,255,255,.7); }

/* ---- 별점 ---- */
.oc-stars { color: var(--star-yellow); font-size: 14px; letter-spacing: 1px; }

/* ==========================================================================
   메인 페이지
   ========================================================================== */

/* ---- 히어로 ---- */
.main-hero {
	background: #004ea2;
	padding: 32px 0 36px;
	position: relative;
	overflow: hidden;
}
.main-hero::before {
	content: '';
	position: absolute;
	top: -80px; right: -60px;
	width: 500px; height: 500px;
	background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%);
	pointer-events: none;
}
.main-hero__inner {
	display: flex;
	align-items: center;
	gap: 56px;
}
.main-hero__content { flex: 1; min-width: 0; }
.main-hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.3);
	color: rgba(255,255,255,.92);
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 600;
	margin-bottom: 20px;
}
.main-hero__content h1 {
	font-size: 42px; font-weight: 800;
	color: var(--white); line-height: 1.2;
	margin-bottom: 14px;
}
.main-hero__content p {
	font-size: 16px; color: rgba(255,255,255,.8);
	line-height: 1.7; margin-bottom: 28px; max-width: 620px;
}
.main-hero__search {
	display: flex;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 18px;
	max-width: 500px;
}
.main-hero__search input {
	flex: 1; padding: 13px 18px;
	background: transparent; border: none; outline: none;
	color: var(--white); font-size: 14px;
}
.main-hero__search input::placeholder { color: rgba(255,255,255,.6); }
.main-hero__search button {
	padding: 0 18px;
	color: rgba(255,255,255,.85); font-size: 18px;
	transition: color var(--transition);
}
.main-hero__search button:hover { color: var(--white); }
.main-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.main-hero__tags a {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.18);
	color: rgba(255,255,255,.9);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	font-size: 13.5px;
	transition: all var(--transition);
}
.main-hero__tags a:hover {
	background: rgba(255,255,255,.22);
	color: var(--white);
}

/* 히어로 카드 + 슬라이더 */
.main-hero__slider { width: 380px; flex-shrink: 0; position: relative; }
.main-hero__card {
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(0,0,0,.22);
	height: 340px;                 /* 카드 높이 강제 통일 (내용 길이 무관, 슬라이드 흔들림 방지) */
	display: flex; flex-direction: column;
}
.main-hero__card-img {
	position: relative;
	height: 200px;
	overflow: hidden;
}
.main-hero__card-img-fallback {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-size: 48px;
}
.main-hero__card-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
}
/* 카드 상단 우측 배지 행 (썸네일 제거 후 본문 우상단으로 이동) */
.main-hero__card-top {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
}
.main-hero__card-badges { display: flex; gap: 6px; flex-shrink: 0; }
.main-hero__card-badge {
	background: var(--danger-red); color: var(--white);
	padding: 3px 10px; border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.main-hero__card-badge--live { background: var(--success-green); }
.main-hero__card-badge--free { background: var(--tag-free); }
.main-hero__card-badge--new  { background: #C75000; }
.main-hero__card-badge--soon { background: var(--star-yellow); color: #3a2f00; }
.main-hero__card-body { padding: 16px 18px 20px; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.main-hero__card-body > .oc-btn { margin-top: auto; }   /* 수강신청 버튼은 카드 하단 고정 */
.main-hero__card-platform {
	display: flex; align-items: center; gap: 6px;
	font-size: 13.5px; color: var(--text-muted); margin-bottom: 0;
}
.main-hero__card-platform .dot {
	width: 6px; height: 6px; border-radius: 50%; background: var(--blue-accent);
}
.main-hero__card-title {
	font-size: 16px; font-weight: 700; color: var(--text-dark);
	line-height: 1.4; margin-bottom: 4px;
}
.main-hero__card-summary {
	font-size: 13.5px; color: var(--text-muted); line-height: 1.45; margin-bottom: 10px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.main-hero__card-instructor { font-size: 13.5px; color: var(--text-muted); margin-bottom: 12px; }
.main-hero__card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
.main-hero__card-meta span {
	display: flex; align-items: center; gap: 4px;
	font-size: 13.5px; color: var(--text-muted);
}
.main-hero__card-meta .star { color: var(--star-yellow); }
.main-hero__card-period {
	display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px;
	font-size: 13.5px; color: var(--text-muted);
}
.main-hero__card-period span { display: flex; align-items: center; gap: 5px; }
/* 히어로 캐러셀 (메인 노출 강좌 회전) */
.hero-slide-item { display: none; }
.hero-slide-item.active { display: block; }
.hero-slide-dots {
	display: flex; justify-content: center; gap: 6px; margin-top: 14px;
}
.hero-slide-dots .dot {
	width: 7px; height: 7px;
	border-radius: 50%; background: rgba(255,255,255,.45);
	transition: all var(--transition);
	cursor: pointer;
	display: inline-block;
}
.hero-slide-dots .dot.active {
	background: var(--white); width: 22px; border-radius: 4px;
}
.hero-slide-nav {
	display: flex; align-items: center; justify-content: center;
	gap: 12px; margin-top: 14px;
}
.hero-slide-nav .hero-slide-dots { margin-top: 0; }
.hero-slide-arrow {
	position: absolute; top: 170px; transform: translateY(-50%); z-index: 5;  /* 카드(340px) 세로 중앙 */
	width: 40px; height: 48px; padding: 0;
	border: none; border-radius: 0; box-shadow: none;
	background: transparent; color: #fff;   /* 동그라미 제거 → 하얀 방향표만 */
	font-size: 40px; line-height: 1;
	text-shadow: 0 1px 4px rgba(0,0,0,.25);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; opacity: .85; transition: opacity var(--transition);
}
.hero-slide-arrow.prev { left: -44px; }    /* 카드 좌측 경계 밖 */
.hero-slide-arrow.next { right: -44px; }   /* 카드 우측 경계 밖 */
.hero-slide-arrow:hover { opacity: 1; background: transparent; box-shadow: none; }
/* 자동 전환 정지/재생 — KWCAG 2.1 「정지 기능 제공」 */
.hero-slide-toggle {
	margin-left: 10px; padding: 0; width: 22px; height: 22px;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.22); color: #fff;
	font-size: 9px; line-height: 22px; vertical-align: middle;
}
.hero-slide-toggle:hover { background: rgba(255,255,255,.34); }
.hero-slide-toggle:focus-visible { outline: 2px solid #ffd54f; outline-offset: 2px; }

/* 통계 바 */
.main-stats {
	background: rgba(255,255,255,.07);
	border-top: 1px solid rgba(255,255,255,.1);
	padding: 16px 0;
}
.main-stats__inner {
	display: flex; align-items: center; justify-content: center;
	gap: 0; flex-wrap: wrap;
}
.main-stats__item {
	display: flex; flex-direction: column; align-items: center;
	padding: 8px 32px;
	border-right: 1px solid rgba(255,255,255,.1);
}
.main-stats__item:last-child { border-right: none; }
.main-stats__num { font-size: 22px; font-weight: 800; color: var(--white); }
.main-stats__label { font-size: 13.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
/* 특징(가치) 바 — 통계 대체 */
.main-feats {
	background: rgba(255,255,255,.08);
	border-top: 1px solid rgba(255,255,255,.14);
	padding: 13px 0;
}
.main-feats__inner {
	display: flex; align-items: stretch; justify-content: center; gap: 0; flex-wrap: wrap;
}
.main-feat {
	display: flex; align-items: center; gap: 11px;
	padding: 5px 26px;
	border-right: 1px solid rgba(255,255,255,.14);
}
.main-feat:last-child { border-right: none; }
.main-feat__ic { font-size: 25px; line-height: 1; flex-shrink: 0; }
.main-feat__tx { display: flex; flex-direction: column; line-height: 1.3; }
.main-feat__tx b { font-size: 14px; font-weight: 700; color: var(--white); }
.main-feat__tx span { font-size: 13.5px; color: rgba(255,255,255,.88); margin-top: 1px; }

/* ---- 강좌 섹션 ---- */
.main-courses {
	padding: 32px 0 28px;
	background: var(--bg-main);
}
.main-courses__top {
	display: flex; align-items: flex-end;
	justify-content: space-between; margin-bottom: 24px;
}
.main-courses__view-all {
	font-size: 13.5px; color: var(--text-muted);
	display: flex; align-items: center; gap: 4px;
	transition: color var(--transition);
}
.main-courses__view-all:hover { color: var(--blue-accent); }

.main-courses__tabs {
	display: flex; gap: 0;
	border-bottom: 2px solid var(--border-color);
	margin-bottom: 32px;
}
.main-courses__tab {
	display: inline-block; text-decoration: none;
	padding: 10px 20px;
	font-size: 14px; font-weight: 500;
	color: var(--text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all var(--transition);
	cursor: pointer;
}
.main-courses__tab:hover { color: var(--text-dark); }
.main-courses__tab.active {
	color: var(--text-dark); font-weight: 700;
	border-bottom-color: var(--blue-accent);
}

.main-courses__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.course-card {
	background: var(--white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: all var(--transition);
}
.course-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}
.course-card__img {
	position: relative;
	height: 160px; overflow: hidden;
}
.course-card__img-fallback {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-size: 36px;
}
.course-card__badge {
	position: absolute; top: 10px; right: 10px;
	padding: 3px 8px; border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 700; color: var(--white);
}
.course-card__badge--progress { background: var(--success-green); }
.course-card__badge--new      { background: var(--danger-red); }
.course-card__badge--free     { background: var(--blue-accent); }

.course-card__body { padding: 14px; }
.course-card__platform {
	display: flex; align-items: center; gap: 5px;
	font-size: 13.5px; color: var(--text-muted); margin-bottom: 6px;
}
.course-card__platform .dot {
	width: 5px; height: 5px; border-radius: 50%; background: var(--blue-accent);
}
.course-card__title {
	font-size: 14px; font-weight: 700; color: var(--text-dark);
	line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; margin-bottom: 5px;
}
.course-card__instructor { font-size: 13.5px; color: var(--text-muted); margin-bottom: 10px; }
.course-card__meta {
	display: flex; flex-wrap: wrap; gap: 6px 12px; padding-top: 8px;
	border-top: 1px solid var(--border-color);
}
.course-card__fee { color: var(--blue-accent); font-weight: 700; }
.course-card__target {
	font-size: 13.5px; color: var(--text-muted); margin-top: 8px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.course-card__meta span {
	display: flex; align-items: center; gap: 3px;
	font-size: 13.5px; color: var(--text-muted);
}
.course-card__meta .star { color: var(--star-yellow); }

/* ---- 인기강좌: 썸네일 없는 카드(상단 hero 카드 스타일) ---- */
/* 인기강좌 카드 높이 정렬: 같은 행 카드 동일 높이 */
.main-courses__grid .course-card-link { display: flex; }
.course-card--flat { display: flex; flex-direction: column; flex: 1; }
.course-card--flat .course-card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 13px 16px 12px; }
.course-card--flat .course-card__period { margin-top: auto; min-height: 3em; }
/* 카드 내부 영역 정렬: 제목 옆 강사명 + 제목/요약 높이 고정 */
.course-card__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 8px; margin-bottom: 4px;
}
.course-card__head .course-card__title {
	flex: 1 1 auto; min-height: 2.9em; margin-bottom: 0;
}
.course-card__head .course-card__instructor {
	flex: 0 0 auto; align-self: flex-start; margin-bottom: 0; padding-top: 1px;
	max-width: 42%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.course-card--flat .course-card__summary { min-height: 3em; margin-bottom: 6px; }
.course-card__top {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px; margin-bottom: 7px;
}
.course-card__top .course-card__platform { margin-bottom: 0; }
.course-card__badge2 {
	flex-shrink: 0;
	padding: 2px 9px; border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 700; color: var(--white); white-space: nowrap;
}
.course-card__badge2--progress { background: var(--success-green); }
.course-card__badge2--open     { background: var(--blue-accent); }
.course-card__badge2--soon     { background: var(--star-yellow); color: #3a2f00; }
.course-card__badge2--closed   { background: var(--text-muted); }
/* [2026-08-24 No.18] 과정구분(GWAJEONG_GB) 「프로그램」 배지 — 상태 배지 옆에 나란히 둔다.
   .course-card__top 은 space-between 이라 배지를 그냥 하나 더 붙이면 가운데로 흩어진다.
   → 배지들을 .course-card__badges 로 묶어 오른쪽에 모으고, 360px 에서 한 줄에
     못 들어가면 배지끼리 줄바꿈시켜 강좌분류(.course-card__platform)를 밀어내지 않게 한다.
   색은 상태 배지 4색(green/blue/yellow/muted)과 겹치지 않는 --navy-dark 로 구분한다
   (#002D62 위 흰 글씨 = 대비 약 13.5:1, AA 4.5:1 충족). */
.course-card__badges {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
	gap: 4px 6px; min-width: 0;
}
.course-card__badge2--program  { background: var(--navy-dark); }
.course-card__summary {
	font-size: 13.5px; color: var(--text-muted); line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; margin-bottom: 8px;
}
.course-card__period {
	display: flex; flex-direction: column; gap: 3px; justify-content: flex-end;
	margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-color);
	font-size: 13.5px; color: var(--text-muted);
}
.course-card__period span { display: flex; align-items: center; gap: 5px; }
/* 분류 필터/2행 제한으로 숨김 */
.main-courses__grid .is-hidden { display: none !important; }

/* ---- 공지 + FAQ ---- */
.main-info {
	padding: 32px 0 64px;
	background: var(--white);
}
.main-info__inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 48px;
}
.notice-header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 16px;
}
.notice-header h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); }
.notice-more { font-size: 13.5px; color: var(--text-muted); transition: color var(--transition); }
.notice-more:hover { color: var(--blue-accent); }
.notice-list { display: flex; flex-direction: column; }
.notice-item {
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 0;
	border-bottom: 1px dashed var(--border-color);
	gap: 12px;
}
.notice-item:last-child { border-bottom: none; }
.notice-item a {
	flex: 1; font-size: 14px; color: var(--text-medium);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	transition: color var(--transition);
}
.notice-item a:hover { color: var(--blue-accent); }
.notice-item .date { font-size: 13.5px; color: var(--text-muted); flex-shrink: 0; }

.faq-card {
	background: var(--blue-pale);
	border-radius: var(--radius-lg);
	padding: 24px;
	display: flex; align-items: center;
	gap: 16px; margin-bottom: 16px;
}
.faq-card__content { flex: 1; }
.faq-card__content h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.faq-card__content p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; }
.faq-card__icon {
	width: 72px; height: 72px; flex-shrink: 0;
	background: rgba(77,136,216,.15);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 32px;
}

.faq-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-link-card {
	background: var(--white);
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 18px;
	text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	transition: all var(--transition); cursor: pointer;
}
.faq-link-card:hover {
	border-color: var(--blue-accent);
	box-shadow: 0 4px 16px rgba(77,136,216,.15);
	transform: translateY(-2px);
}
.faq-link-card .icon { font-size: 28px; }
.faq-link-card h4 { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.faq-link-card p { font-size: 13.5px; color: var(--text-muted); }

/* ==========================================================================
   서브 페이지 (강좌 상세)
   ========================================================================== */

.breadcrumb {
	background: var(--white);
	border-bottom: 1px solid var(--border-color);
	padding: 12px 0;
}
.breadcrumb__inner {
	display: flex; align-items: center; gap: 6px;
	font-size: 13.5px; color: var(--text-muted);
}
.breadcrumb__inner a { color: var(--text-muted); transition: color var(--transition); }
.breadcrumb__inner a:hover { color: var(--blue-accent); }
.breadcrumb__inner .sep { color: var(--text-light); font-size: 13.5px; }
.breadcrumb__inner .current { color: var(--text-dark); font-weight: 500; }

.sub-hero {
	background: #004ea2;   /* 푸터 배경색과 동일 */
	padding: 30px 0;
	position: relative;
	overflow: hidden;
}
.sub-hero::before {
	content: '';
	position: absolute;
	top: -100px; right: -80px;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(77,136,216,.15) 0%, transparent 65%);
	pointer-events: none;
}
.sub-hero__inner {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}
.sub-hero__content { flex: 1; min-width: 0; }
.sub-hero__badges {
	display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.sub-hero__badges .badge {
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 600; color: var(--white);
}
.sub-hero__badges .badge--kmooc  { background: var(--blue-accent); }
.sub-hero__badges .badge--field  { background: var(--success-green); }
.sub-hero__badges .badge--free   { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); }
.sub-hero__badges .badge--cert   { background: rgba(255,183,0,.25); border: 1px solid rgba(255,183,0,.4); color: #ffd966; }

.sub-hero__content h1 {
	font-size: 32px; font-weight: 800;
	color: var(--white); line-height: 1.25;
	margin-bottom: 14px;
}
.sub-hero__content > p {
	font-size: 15px; color: rgba(255,255,255,.75);
	line-height: 1.7; max-width: 540px; margin-bottom: 24px;
}

.sub-hero__stats {
	display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px;
}
.sub-hero__stat {
	display: flex; align-items: center; gap: 6px;
	font-size: 14px; color: rgba(255,255,255,.85);
}
.sub-hero__stat .icon { font-size: 16px; }
.sub-hero__stat .star { color: var(--star-yellow); }

.sub-hero__instructor {
	display: flex; align-items: center; gap: 12px;
	padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
}
.sub-hero__instructor-avatar {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--blue-accent);
	display: flex; align-items: center; justify-content: center;
	color: var(--white); font-size: 17px; font-weight: 700; flex-shrink: 0;
}
.sub-hero__instructor-info strong {
	display: block; font-size: 14px; color: var(--white); font-weight: 700;
}
.sub-hero__instructor-info span { font-size: 13.5px; color: rgba(255,255,255,.65); }

.sub-hero__side { width: 320px; flex-shrink: 0; }
.sub-enroll-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.sub-enroll-card__thumb { display: none; }   /* 상세 우측 썸네일 영역 숨김 */
.sub-enroll-card__play {
	position: absolute;
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(255,255,255,.9);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; cursor: pointer;
	transition: all var(--transition);
	box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.sub-enroll-card__play:hover { background: var(--white); transform: scale(1.06); }
.sub-enroll-card__body { padding: 20px; }
.sub-enroll-card__period { display: none; }   /* 수강료/모집·운영기간 숨김 */
.sub-enroll-card__actions { display: flex; flex-direction: column; gap: 10px; }
.sub-enroll-card__actions .oc-btn { padding: 13px 20px; font-size: 15px; }
/* 강좌상세: 본문 상단 강좌명/요약 (hero 분리 후) */
.course-detail-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); }
.course-detail-title { font-size: 26px; font-weight: 700; color: var(--text-dark); margin: 0 0 8px; line-height: 1.35; }
.course-detail-summary { font-size: 15px; color: var(--text-muted); margin: 0; line-height: 1.6; }
/* 수강신청 카드를 사이드바로 이동 */
.sub-sidebar .sub-enroll-card { box-shadow: var(--shadow-card); margin-bottom: 16px; }

.sub-body {
	background: var(--bg-main);
	padding: 48px 0 72px;
}
.sub-body__inner {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 36px;
	align-items: start;
}
.sub-tabs {
	display: flex; gap: 0;
	border-bottom: 2px solid var(--border-color);
	margin-bottom: 36px;
	position: sticky; top: 64px; z-index: 10;
	background: var(--bg-main); padding: 0;
}
.sub-tab-btn {
	padding: 12px 20px;
	font-size: 14px; font-weight: 500; color: var(--text-muted);
	border-bottom: 2px solid transparent; margin-bottom: -2px;
	transition: all var(--transition); cursor: pointer;
	background: none; border-top: none; border-left: none; border-right: none;
	font-family: inherit;
}
.sub-tab-btn:hover { color: var(--text-dark); }
.sub-tab-btn.active { color: var(--navy-sub); font-weight: 700; border-bottom-color: var(--navy-sub); }

.sub-section { margin-bottom: 52px; }
.sub-section-title {
	display: flex; align-items: center; gap: 10px;
	font-size: 20px; font-weight: 700; color: var(--text-dark);
	margin-bottom: 20px; padding-bottom: 12px;
	border-bottom: 2px solid var(--border-color);
}
.sub-section-title::before {
	content: '';
	width: 4px; height: 20px;
	background: var(--navy-sub); border-radius: 2px;
}
.sub-intro-text { font-size: 15px; color: var(--text-medium); line-height: 1.8; }

.sub-goals { display: flex; flex-direction: column; gap: 12px; }
.sub-goal {
	display: flex; align-items: flex-start; gap: 14px;
	background: var(--bg-card); border-radius: var(--radius-md);
	padding: 16px 18px;
}
.sub-goal__num {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--navy-sub); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	font-size: 13.5px; font-weight: 700; flex-shrink: 0;
}
.sub-goal__text { font-size: 14px; color: var(--text-medium); line-height: 1.6; }

.sub-syllabus { display: flex; flex-direction: column; gap: 8px; }
.sub-syllabus-item {
	display: flex; align-items: center; justify-content: space-between;
	background: var(--bg-card); border-radius: var(--radius-md);
	padding: 14px 18px; gap: 12px;
	transition: all var(--transition); cursor: pointer;
}
.sub-syllabus-item:hover { background: #e8ecf2; }
.sub-syllabus-item__left { display: flex; align-items: center; gap: 14px; }
.sub-syllabus-item__week {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--blue-accent); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	font-size: 13.5px; font-weight: 700; flex-shrink: 0;
}
.sub-syllabus-item__week--dark { background: var(--navy-sub); }
.sub-syllabus-item__title { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.sub-syllabus-item__subtitle { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
.sub-syllabus-item__right { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13.5px; }

.sub-instructor {
	display: flex; align-items: flex-start; gap: 20px;
	background: var(--white); border-radius: var(--radius-md);
	padding: 24px; box-shadow: var(--shadow-card);
}
.sub-instructor__avatar {
	width: 72px; height: 72px; border-radius: 50%;
	background: var(--blue-accent);
	display: flex; align-items: center; justify-content: center;
	color: var(--white); font-size: 28px; font-weight: 700; flex-shrink: 0;
}
.sub-instructor__info h3 { font-size: 19px; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }
.sub-instructor__info .affil { font-size: 13.5px; color: var(--text-muted); margin-bottom: 12px; }
.sub-instructor__info .bio {
	font-size: 14px; color: var(--text-medium); line-height: 1.7; margin-bottom: 14px;
}
.sub-instructor__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.sub-instructor__tags span {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-medium);
	padding: 4px 12px; border-radius: var(--radius-pill);
	font-size: 13.5px;
}

.sub-rating-summary {
	display: flex; align-items: center; gap: 32px;
	background: var(--white); border-radius: var(--radius-md);
	padding: 24px; box-shadow: var(--shadow-card); margin-bottom: 24px;
}
.sub-rating-avg { text-align: center; flex-shrink: 0; }
.sub-rating-avg .num { font-size: 48px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.sub-rating-avg .stars { color: var(--star-yellow); font-size: 18px; margin: 4px 0; }
.sub-rating-avg .cnt { font-size: 13.5px; color: var(--text-muted); }
.sub-rating-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sub-rating-bar { display: flex; align-items: center; gap: 10px; }
.sub-rating-bar .label { font-size: 13.5px; color: var(--text-muted); width: 28px; text-align: right; flex-shrink: 0; }
.sub-rating-bar .bar { flex: 1; height: 8px; background: var(--border-color); border-radius: 4px; overflow: hidden; }
.sub-rating-bar .fill { height: 100%; background: var(--blue-accent); border-radius: 4px; }
.sub-rating-bar .pct { font-size: 13.5px; color: var(--text-muted); width: 30px; flex-shrink: 0; }

.sub-review { padding: 20px 0; border-bottom: 1px solid var(--border-color); }
.sub-review:last-child { border-bottom: none; }
.sub-review__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sub-review__author { font-size: 15px; font-weight: 600; color: var(--text-dark); }
.sub-review__date { font-size: 13.5px; color: var(--text-muted); }
.sub-review__stars { color: var(--star-yellow); font-size: 13.5px; margin-bottom: 8px; }
.sub-review__text { font-size: 14px; color: var(--text-medium); line-height: 1.7; }

.sub-faq { display: flex; flex-direction: column; gap: 8px; }
.sub-faq-item {
	background: var(--bg-card); border-radius: var(--radius-md);
	overflow: hidden;
}
.sub-faq-q {
	display: flex; align-items: center; justify-content: space-between;
	padding: 15px 18px; cursor: pointer;
	transition: background var(--transition);
}
.sub-faq-q:hover { background: #e8ecf2; }
.sub-faq-q__left { display: flex; align-items: center; gap: 10px; }
.sub-faq-q__icon { font-size: 16px; color: var(--blue-accent); font-weight: 800; }
.sub-faq-q__text { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.sub-faq-q__arrow { font-size: 16px; color: var(--text-muted); transition: transform var(--transition); }
.sub-faq-a {
	padding: 0 18px 14px 42px;
	font-size: 13.5px; color: var(--text-medium); line-height: 1.7;
	display: none;
}
.sub-faq-item.open .sub-faq-a { display: block; }
.sub-faq-item.open .sub-faq-q__arrow { transform: rotate(180deg); }

.sub-related-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.sub-related-card {
	background: var(--white); border-radius: var(--radius-md);
	overflow: hidden; box-shadow: var(--shadow-card);
	transition: all var(--transition); cursor: pointer;
}
.sub-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.sub-related-card__thumb {
	height: 100px;
	display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.sub-related-card__body { padding: 12px; }
.sub-related-card__tag { font-size: 13.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.sub-related-card__title {
	font-size: 13.5px; font-weight: 700; color: var(--text-dark);
	line-height: 1.4; margin-bottom: 5px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sub-related-card__prof { font-size: 13.5px; color: var(--text-muted); }

.sub-sidebar { display: flex; flex-direction: column; gap: 24px; }
.sub-sidebar-card {
	background: var(--white);
	border-radius: var(--radius-md);
	padding: 24px;
	box-shadow: var(--shadow-card);
}
.sub-sidebar-card h4 {
	font-size: 17px; font-weight: 700; color: var(--text-dark);
	margin-bottom: 18px; padding-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
}
.sidebar-prof { display: flex; align-items: flex-start; gap: 14px; }
.sidebar-prof__avatar {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--blue-accent);
	display: flex; align-items: center; justify-content: center;
	color: var(--white); font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.sidebar-prof__name { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.sidebar-prof__affil { font-size: 13.5px; color: var(--text-muted); margin-bottom: 8px; }
.sidebar-prof__bio { font-size: 13.5px; color: var(--text-medium); line-height: 1.6; }
.sidebar-info-rows { display: flex; flex-direction: column; gap: 10px; }
.sidebar-info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sidebar-info-row .key { font-size: 14px; color: var(--text-muted); flex-shrink: 0; }
.sidebar-info-row .val { font-size: 14px; font-weight: 600; color: var(--text-dark); text-align: right; }
.sidebar-share-btns { display: flex; gap: 10px; }
.sidebar-share-btns .oc-btn { flex: 1; padding: 10px 12px; font-size: 13.5px; }

/* ==========================================================================
   인증 페이지 (회원가입 / 로그인)
   ========================================================================== */

.auth-hero {
	background: linear-gradient(135deg, var(--navy-sub) 0%, #213570 60%, #2a4090 100%);
	padding: 40px 0;
	color: var(--white);
	position: relative;
	overflow: hidden;
}
.auth-hero::before {
	content: '';
	position: absolute;
	top: -80px; right: -60px;
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(77,136,216,.18) 0%, transparent 65%);
	pointer-events: none;
}
.auth-hero__inner { position: relative; z-index: 1; }
.auth-hero__title {
	font-size: 28px; font-weight: 800;
	margin-bottom: 8px;
}
.auth-hero__sub {
	font-size: 14px;
	color: rgba(255,255,255,.78);
	line-height: 1.7;
	max-width: 720px;
}

/* ---- Stepper ---- */
.auth-stepper {
	display: flex;
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 18px 12px;
	box-shadow: var(--shadow-card);
	margin-top: -32px;
	position: relative;
	z-index: 2;
	margin-bottom: 32px;
}
.auth-stepper__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
	color: var(--text-muted);
}
.auth-stepper__item + .auth-stepper__item::before {
	content: '';
	position: absolute;
	top: 17px; left: -50%;
	width: 100%; height: 2px;
	background: var(--border-color);
	z-index: 0;
}
.auth-stepper__item.done + .auth-stepper__item::before,
.auth-stepper__item.active + .auth-stepper__item.done::before {
	background: var(--blue-accent);
}
.auth-stepper__num {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--bg-card);
	color: var(--text-muted);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13.5px;
	border: 2px solid var(--border-color);
	position: relative; z-index: 1;
	transition: all var(--transition);
}
.auth-stepper__item.active .auth-stepper__num {
	background: var(--blue-accent);
	color: var(--white);
	border-color: var(--blue-accent);
	box-shadow: 0 0 0 4px rgba(77,136,216,.2);
}
.auth-stepper__item.done .auth-stepper__num {
	background: var(--success-green);
	color: var(--white);
	border-color: var(--success-green);
}
.auth-stepper__item.active .auth-stepper__label,
.auth-stepper__item.done .auth-stepper__label { color: var(--text-dark); font-weight: 700; }
.auth-stepper__label { font-size: 13.5px; }

/* ---- Auth Body ---- */
.auth-section {
	background: var(--bg-main);
	padding: 48px 0 72px;
}
.auth-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
}

/* ---- Step Card ---- */
.auth-step-card {
	background: var(--white);
	border-radius: var(--radius-md);
	padding: 28px 32px;
	box-shadow: var(--shadow-card);
	margin-bottom: 24px;
}
.auth-step-card__head {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--border-color);
}
.auth-step-card__no {
	background: var(--navy-sub); color: var(--white);
	font-size: 13.5px; font-weight: 700;
	padding: 4px 10px; border-radius: var(--radius-pill);
	letter-spacing: 0.05em;
}
.auth-step-card__title { font-size: 19px; font-weight: 700; color: var(--text-dark); }

/* ---- Form Components ---- */
.form-group { margin-bottom: 18px; }
.form-label {
	display: block;
	font-size: 13.5px; font-weight: 600;
	color: var(--text-dark);
	margin-bottom: 6px;
}
.form-label .req { color: var(--danger-red); margin-left: 2px; }
.form-label .optional { color: var(--text-muted); font-weight: 400; font-size: 13.5px; margin-left: 4px; }
.form-input {
	width: 100%;
	padding: 11px 14px;
	font-size: 14px;
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: var(--white);
	color: var(--text-dark);
	transition: border-color var(--transition);
}
.form-input:focus { outline: none; border-color: var(--blue-accent); }
.form-input[readonly] { background: var(--bg-card); color: var(--text-muted); }
.form-input.narrow { width: auto; min-width: 120px; }
.form-help { display: block; font-size: 13.5px; color: var(--text-muted); margin-top: 6px; }
.form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-row .dash { color: var(--text-muted); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* 라디오 그룹 (회원등급 등) */
.form-radio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.form-radio {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 16px;
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition);
}
.form-radio:hover { border-color: var(--blue-accent); }
.form-radio input { position: absolute; opacity: 0; }
.form-radio .radio-mark {
	width: 18px; height: 18px;
	border-radius: 50%;
	border: 2px solid var(--border-color);
	flex-shrink: 0;
	margin-top: 2px;
	position: relative;
}
.form-radio input:checked ~ .radio-mark {
	border-color: var(--blue-accent);
}
.form-radio input:checked ~ .radio-mark::after {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--blue-accent);
}
.form-radio input:checked ~ .radio-body .radio-title { color: var(--blue-accent); }
.form-radio:has(input:checked) { border-color: var(--blue-accent); background: rgba(77,136,216,.05); }
.form-radio .radio-body { display: flex; flex-direction: column; gap: 4px; }
.form-radio .radio-title { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.form-radio .radio-sub { font-size: 13.5px; color: var(--text-muted); }

/* 체크박스 리스트 */
.form-check-list { display: flex; flex-direction: column; gap: 10px; }
.form-check {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	cursor: pointer;
	background: var(--white);
	transition: all var(--transition);
}
.form-check:hover { border-color: var(--blue-accent); }
.form-check input { position: absolute; opacity: 0; }
.form-check .check-mark {
	width: 20px; height: 20px;
	border: 2px solid var(--border-color);
	border-radius: 4px;
	flex-shrink: 0;
	margin-top: 1px;
	position: relative;
}
.form-check input:checked ~ .check-mark {
	background: var(--blue-accent);
	border-color: var(--blue-accent);
}
.form-check input:checked ~ .check-mark::after {
	content: '';
	position: absolute;
	top: 2px; left: 5px;
	width: 6px; height: 11px;
	border-right: 2px solid var(--white);
	border-bottom: 2px solid var(--white);
	transform: rotate(45deg);
}
.form-check .check-body { display: flex; flex-direction: column; gap: 2px; }
.form-check .check-title { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.form-check .check-sub { font-size: 13.5px; color: var(--text-muted); }
.form-check .check-required { font-size: 13.5px; color: var(--danger-red); margin-left: 6px; }
.form-check .check-optional { font-size: 13.5px; color: var(--text-muted); margin-left: 6px; font-weight: 500; }
.form-check .check-link {
	margin-left: auto; align-self: center;
	display: inline-flex; align-items: center;
	padding: 7px 14px;
	font-size: 13.5px; font-weight: 600;
	color: var(--blue-accent);
	background: var(--white);
	border: 1.5px solid var(--blue-accent);
	border-radius: var(--radius-md, 8px);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: all var(--transition);
}
.form-check .check-link:hover {
	background: var(--blue-accent);
	color: var(--white);
	box-shadow: 0 2px 6px rgba(77, 136, 216, .25);
}
.form-check .check-link:active { transform: translateY(1px); }

/* 약관 항목 (체크박스 + 전문보기 박스 묶음) */
.terms-item { display: flex; flex-direction: column; }

/* 일괄(전체) 동의 — 강조 스타일 */
.form-check--all {
	background: linear-gradient(90deg, rgba(77,136,216,.08), rgba(77,136,216,.02));
	border: 1.5px solid var(--blue-accent);
	padding: 16px 18px;
}
.form-check--all .check-title { font-size: 15px; color: var(--navy-dark); }
.form-check--all .check-sub   { font-size: 13.5px; color: var(--text-medium); }
.form-check-divider {
	height: 1px;
	background: var(--border-color);
	margin: 4px 0 6px;
}

/* 약관 본문 — 모달용 데이터 저장소 (화면에는 표시되지 않음) */
.terms-box { display: none; }

/* 약관 전문 보기 모달 */
.terms-modal {
	position: fixed; inset: 0;
	z-index: 9000;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.terms-modal__overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .55);
	cursor: pointer;
}
.terms-modal__card {
	position: relative;
	width: 100%; max-width: 640px;
	max-height: calc(100vh - 48px);
	background: var(--white);
	border-radius: var(--radius-lg, 12px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
	display: flex; flex-direction: column;
	overflow: hidden;
}
.terms-modal__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--border-color);
	background: var(--bg-card);
}
.terms-modal__title {
	font-size: 16px; font-weight: 700; color: var(--navy-dark);
	margin: 0;
}
.terms-modal__close {
	width: 32px; height: 32px;
	border: 0; background: transparent;
	font-size: 24px; line-height: 1; color: var(--text-muted);
	cursor: pointer; border-radius: var(--radius-sm, 6px);
	transition: all var(--transition);
}
.terms-modal__close:hover { background: rgba(0, 0, 0, .06); color: var(--navy-dark); }
.terms-modal__body {
	padding: 22px;
	overflow-y: auto;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--text-medium);
	flex: 1;
}
.terms-modal__body strong { color: var(--navy-dark); }
.terms-modal__foot {
	padding: 14px 22px;
	border-top: 1px solid var(--border-color);
	background: var(--bg-card);
	display: flex; justify-content: flex-end; gap: 8px;
}

/* 모달 열린 동안 배경 스크롤 잠금 */
body.is-modal-open { overflow: hidden; }

/* ── LIFE 마이페이지 레이아웃 (좌측 sub-nav + 우측 콘텐츠) ── */
.my-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 28px;
	margin: 28px auto 60px;
}
.my-side {
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md, 8px);
	padding: 18px 0;
	height: fit-content;
}
.my-side__title {
	padding: 0 20px 14px;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 10px;
	font-size: 14px; color: var(--text-medium);
}
.my-side__title strong { color: var(--navy-dark); font-size: 15px; }

.my-side__top {
	display: flex; align-items: center; gap: 8px;
	padding: 11px 20px;
	font-size: 14px; font-weight: 600; color: var(--text-dark);
	border-left: 3px solid transparent;
	transition: all var(--transition);
}
.my-side__top:hover { background: var(--bg-card); color: var(--blue-accent); }
.my-side__top.is-active { background: rgba(77,136,216,.08); color: var(--blue-accent); border-left-color: var(--blue-accent); }
.my-side__top-icon { font-size: 14px; }

.my-side__group { padding: 8px 0; }
.my-side__group-title {
	display: block;
	padding: 11px 20px;
	font-size: 13.5px; font-weight: 700; color: var(--navy-dark);
	border-left: 3px solid transparent;
	transition: all var(--transition);
}
.my-side__group-title:hover { background: var(--bg-card); }
.my-side__group.is-active > .my-side__group-title {
	background: rgba(77,136,216,.08);
	color: var(--blue-accent);
	border-left-color: var(--blue-accent);
}
.my-side__group > a:not(.my-side__group-title) {
	display: block;
	padding: 8px 20px 8px 36px;
	font-size: 13.5px; color: var(--text-medium);
	transition: all var(--transition);
}
.my-side__group > a:not(.my-side__group-title):hover { color: var(--blue-accent); padding-left: 40px; }
.my-side__group > a.is-sub-active { color: var(--blue-accent); font-weight: 600; padding-left: 40px; }

/* 우측 메인 */
.my-main { min-width: 0; }
.my-main__head {
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--blue-accent);
}
.my-main__head h1 { font-size: 22px; font-weight: 700; color: var(--navy-dark); margin: 0 0 6px; }
.my-main__head p  { font-size: 13.5px; color: var(--text-muted); margin: 0; }

/* 통계 카드 */
.my-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 28px;
}
.my-stat-card {
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md, 8px);
	padding: 22px 18px;
	text-align: center;
}
.my-stat-card__num { font-size: 28px; font-weight: 700; color: var(--blue-accent); margin-bottom: 4px; }
.my-stat-card__lbl { font-size: 13.5px; color: var(--text-muted); }

/* 섹션 블록 */
.my-block {
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md, 8px);
	padding: 22px 24px;
	margin-bottom: 18px;
}
.my-block h2 { font-size: 15px; font-weight: 700; color: var(--navy-dark); margin: 0 0 12px; }
.my-block__empty {
	color: var(--text-muted); font-size: 13.5px;
	text-align: center; padding: 32px 0;
	background: var(--bg-card); border-radius: 6px;
}

/* ── 학습지원 (공지/FAQ/Q&A) ── */
.cs-tabs {
	display: flex; flex-wrap: wrap; gap: 6px;
	border-bottom: 2px solid var(--border-color);
	margin: 18px 0 16px;
}
.cs-tabs a {
	padding: 9px 16px; font-size: 13.5px; font-weight: 500;
	color: var(--text-medium);
	border-bottom: 2px solid transparent; margin-bottom: -2px;
	transition: all var(--transition);
}
.cs-tabs a:hover { color: var(--blue-accent); }
.cs-tabs a.is-active { color: var(--blue-accent); border-bottom-color: var(--blue-accent); font-weight: 600; }

.cs-search { display: flex; gap: 8px; margin-bottom: 18px; }
.cs-search .form-input { flex: 1; }

.cs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cs-table thead th {
	background: var(--bg-card);
	padding: 12px 10px;
	font-weight: 600; color: var(--navy-dark);
	border-bottom: 2px solid var(--blue-accent);
}
.cs-table tbody td {
	padding: 14px 10px;
	border-bottom: 1px solid var(--border-color);
	vertical-align: middle;
}
.cs-table .cs-col-no  { width: 60px;  text-align: center; color: var(--text-muted); }
.cs-table .cs-col-cat { width: 100px; text-align: center; }
.cs-table .cs-col-dt  { width: 130px; text-align: center; color: var(--text-muted); font-size: 13.5px; white-space: nowrap; }
.cs-table .cs-col-vc  { width: 60px;  text-align: center; color: var(--text-muted); font-size: 13.5px; }
.cs-table .cs-col-st  { width: 110px; text-align: center; white-space: nowrap; }
.cs-table .cs-col-isu { width: 80px;  text-align: center; white-space: nowrap; }
.cs-table tr.is-pinned td { background: rgba(77, 136, 216, .04); }
.cs-table .cs-empty { text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 13.5px; }
.cs-table .cs-title { color: var(--text-dark); font-weight: 500; }
.cs-table .cs-title:hover { color: var(--blue-accent); text-decoration: underline; }
/* [2026-08-24 No.18] 과정구분 「프로그램」 배지 — 표(마이페이지 학습 현황) 안 강좌명 앞에 붙는다.
   강좌(01)에는 배지를 달지 않으므로 '강좌' 라벨은 만들지 않는다.
   카드 배지(.course-card__badge2--program)와 같은 --navy-dark 를 써서 색을 통일한다. */
.gwajeong-badge {
	display: inline-block; vertical-align: middle;
	margin-right: 6px; padding: 1px 8px;
	border-radius: var(--radius-pill);
	background: var(--navy-dark); color: var(--white);
	font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap;
}

.cs-badge {
	display: inline-block; padding: 3px 9px;
	background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px;
	font-size: 13.5px; color: var(--text-medium); font-weight: 500;
}
.cs-pin { color: var(--blue-accent); font-size: 13.5px; }

.cs-status {
	display: inline-block; padding: 4px 10px;
	border-radius: 999px; font-size: 13.5px; font-weight: 600;
	white-space: nowrap;
}
.cs-status.is-wait { background: #fff8e1; color: #f9a825; border: 1px solid #ffe082; }
.cs-status.is-done { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }

/* 상세 헤더 */
.cs-detail-head { padding-bottom: 18px; border-bottom: 1px solid var(--border-color); margin-bottom: 22px; }
.cs-detail-title { font-size: 22px; font-weight: 700; color: var(--navy-dark); margin: 8px 0 0; }
.cs-detail-meta {
	display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
	font-size: 13.5px; color: var(--text-muted);
}
.cs-detail-meta-inline { font-size: 13.5px; color: var(--text-muted); margin-left: 10px; font-weight: 400; }

/* FAQ accordion */
.faq-list { margin-top: 4px; }
.faq-item {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md, 8px);
	margin-bottom: 8px;
	background: var(--white);
	overflow: hidden;
	transition: border-color var(--transition);
}
.faq-item.is-open { border-color: var(--blue-accent); }
.faq-q {
	display: flex; align-items: center; gap: 10px;
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
}
.faq-q-text { flex: 1; font-size: 14px; font-weight: 500; color: var(--text-dark); }
.faq-q-icon {
	font-size: 18px; color: var(--blue-accent); font-weight: 600;
	transition: transform var(--transition);
}
.faq-item.is-open .faq-q-icon { transform: rotate(45deg); }
.faq-a {
	display: none;
	padding: 18px 22px 20px 60px;
	background: var(--bg-card);
	font-size: 13.5px; line-height: 1.75; color: var(--text-medium);
	border-top: 1px solid var(--border-color);
}
.faq-item.is-open .faq-a { display: block; }
.faq-a-loading { color: var(--text-muted); font-size: 13.5px; }

/* Q&A 상세 */
.qna-block-label { font-size: 13.5px; font-weight: 700; color: var(--navy-dark); margin-bottom: 10px; }
.qna-content { font-size: 14px; line-height: 1.75; color: var(--text-medium); white-space: pre-wrap; }
.qna-answer { background: rgba(77, 136, 216, .04); border-left: 3px solid var(--blue-accent); }
.qna-waiting { text-align: center; color: var(--text-muted); padding: 20px; background: var(--bg-card); }

/* 1:1 문의 작성 — 분류 라디오 그룹 (체크박스 디자인 재사용) */
.qna-radio-group {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
	margin-top: 4px;
}
.qna-radio-group .form-check { padding: 11px 14px; }
.qna-radio-group .form-check input:checked ~ .check-mark { background: var(--blue-accent); border-color: var(--blue-accent); }

/* 비공개 태그 */
.qna-secret-tag {
	display: inline-block;
	padding: 1px 7px;
	margin-right: 6px;
	font-size: 13.5px; font-weight: 600;
	color: var(--text-medium);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	vertical-align: middle;
}

/* 페이징 */
.cs-paging {
	display: flex; justify-content: center; align-items: center; gap: 4px;
	margin: 24px 0 8px;
}
.cs-paging a, .cs-paging span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; height: 32px; padding: 0 10px;
	font-size: 13.5px; color: var(--text-medium);
	border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px);
	background: var(--white);
	transition: all var(--transition);
}
.cs-paging a:hover { color: var(--blue-accent); border-color: var(--blue-accent); }
.cs-paging span.is-current { background: var(--blue-accent); color: var(--white); border-color: var(--blue-accent); font-weight: 600; }
.cs-paging span.is-disabled { color: var(--text-muted); background: var(--bg-card); cursor: not-allowed; }

/* ── LIFE 정적 콘텐츠 페이지 본문 ── */
.life-page-content { padding: 36px 40px; line-height: 1.75; color: var(--text-medium); font-size: 15px; }
.life-page-content h2 {
	font-size: 18px; font-weight: 700; color: var(--navy-dark);
	margin: 28px 0 12px; padding-bottom: 8px;
	border-bottom: 2px solid var(--blue-accent);
}
.life-page-content h2:first-child { margin-top: 0; }
.life-page-content h3 { font-size: 15px; font-weight: 700; color: var(--navy-dark); margin: 20px 0 8px; }
.life-page-content p  { margin: 0 0 12px; }
.life-page-content ul, .life-page-content ol { margin: 0 0 14px 20px; }
.life-page-content li { margin-bottom: 6px; }
.life-page-content strong { color: var(--navy-dark); font-weight: 600; }
.life-page-content code { background: var(--bg-card); padding: 2px 6px; border-radius: 4px; font-size: 13.5px; color: var(--blue-accent); }

/* 중앙 알림 모달 — alert() 대체 */
.alert-modal {
	position: fixed; inset: 0;
	z-index: 9500;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	opacity: 0; pointer-events: none;
	transition: opacity .18s ease;
}
.alert-modal.is-show { opacity: 1; pointer-events: auto; }
.alert-modal__overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .5);
}
.alert-modal__card {
	position: relative;
	width: 100%; max-width: 380px;
	background: var(--white);
	border-radius: var(--radius-lg, 12px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
	overflow: hidden;
	transform: scale(.95);
	transition: transform .18s ease;
}
.alert-modal.is-show .alert-modal__card { transform: scale(1); }
.alert-modal__icon-wrap {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	margin: 26px auto 14px;
	border-radius: 50%;
	font-size: 28px; font-weight: 700; color: var(--white);
	background: var(--blue-accent);
}
.alert-modal--error   .alert-modal__icon-wrap { background: var(--danger-red, #dc3545); }
.alert-modal--success .alert-modal__icon-wrap { background: var(--success-green, #28a745); }
.alert-modal--info    .alert-modal__icon-wrap { background: var(--blue-accent); }
.alert-modal__title {
	text-align: center;
	font-size: 17px; font-weight: 700; color: var(--navy-dark);
	margin: 0 24px 6px;
}
.alert-modal__msg {
	text-align: center;
	font-size: 14px; line-height: 1.6; color: var(--text-medium);
	margin: 0 24px 22px;
	white-space: pre-line;
}
.alert-modal__foot {
	display: flex; justify-content: center; gap: 8px;
	padding: 14px 22px 22px;
	border-top: 1px solid var(--border-color);
	background: var(--bg-card);
}
.alert-modal__foot .oc-btn { min-width: 96px; }

/* 본인 인증 */
.cert-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-cert {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px;
	background: var(--white);
	border: 1.5px solid var(--blue-accent);
	color: var(--blue-accent);
	border-radius: var(--radius-md);
	font-size: 14px; font-weight: 600;
	transition: all var(--transition);
}
.btn-cert:hover { background: var(--blue-accent); color: var(--white); }
.cert-status {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	background: rgba(76,175,80,.1);
	color: var(--success-green);
	font-size: 13.5px;
	border-radius: var(--radius-pill);
}
.cert-status strong { color: var(--text-dark); }

.btn-search {
	padding: 11px 18px;
	background: var(--navy-sub);
	color: var(--white);
	border-radius: var(--radius-sm);
	font-size: 13.5px; font-weight: 600;
}
.btn-search:hover { background: var(--navy-dark); }

/* 비밀번호 룰 */
.pwd-rules {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 10px;
	padding: 0;
}
.pwd-rules li {
	font-size: 13.5px;
	padding: 4px 10px;
	background: var(--bg-card);
	border-radius: var(--radius-pill);
	color: var(--text-muted);
}

/* 폼 하단 버튼 */
.form-submit-row {
	display: flex; justify-content: space-between; gap: 12px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--border-color);
}
.form-submit-row .oc-btn { padding: 13px 28px; font-size: 15px; }

/* 가입완료 */
.auth-complete {
	text-align: center;
	padding: 48px 32px;
}
.auth-complete__icon {
	width: 80px; height: 80px;
	border-radius: 50%;
	background: rgba(76,175,80,.15);
	color: var(--success-green);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 40px;
	margin-bottom: 20px;
}
.auth-complete__title {
	font-size: 24px; font-weight: 800;
	color: var(--text-dark);
	margin-bottom: 8px;
}
.auth-complete__sub {
	font-size: 14px; color: var(--text-muted);
	margin-bottom: 24px;
	line-height: 1.7;
}
.auth-complete__actions { display: flex; justify-content: center; gap: 12px; }

/* ---- Aside ---- */
.auth-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }
.aside-card {
	background: var(--white);
	border-radius: var(--radius-md);
	padding: 20px;
	box-shadow: var(--shadow-card);
}
.aside-card.help { background: var(--blue-pale); }
.aside-title {
	font-size: 14px; font-weight: 700; color: var(--text-dark);
	margin-bottom: 12px; padding-bottom: 8px;
	border-bottom: 1px solid var(--border-color);
}
.aside-card.help .aside-title { border-bottom-color: rgba(77,136,216,.2); }
.aside-dl { display: flex; flex-direction: column; gap: 10px; }
.aside-dl dt { font-size: 13.5px; font-weight: 700; color: var(--blue-accent); }
.aside-dl dd { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 6px; }
.aside-ul { display: flex; flex-direction: column; gap: 6px; padding: 0; margin-bottom: 12px; }
.aside-ul li {
	font-size: 13.5px; color: var(--text-muted);
	line-height: 1.6;
	padding-left: 14px;
	position: relative;
}
.aside-ul li::before {
	content: '•';
	position: absolute; left: 4px;
	color: var(--blue-accent);
}
.aside-ul li strong { color: var(--text-dark); font-weight: 600; }
.aside-link { font-size: 13.5px; color: var(--blue-accent); text-decoration: underline; }
.aside-card.help .help-cta {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--navy-sub); color: var(--white);
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	font-size: 13.5px; font-weight: 600;
}

/* ---- 반응형 ---- */
@media (max-width: 1024px) {
	.oc-nav { gap: 18px; }
	.main-courses__grid { grid-template-columns: repeat(3, 1fr); }
	.main-hero__slider { width: 320px; }
	.sub-body__inner { grid-template-columns: 1fr 260px; }
	.sub-related-grid { grid-template-columns: repeat(2, 1fr); }
	.auth-layout { grid-template-columns: 1fr 280px; }
}
@media (max-width: 768px) {
	.oc-nav { display: none; }
	.oc-header__utils .btn-classroom { display: none; }
	.main-hero__inner { flex-direction: column; }
	.main-hero__slider { width: 100%; }
	.main-hero__content h1 { font-size: 30px; }
	.main-courses__grid { grid-template-columns: repeat(2, 1fr); }
	.main-info__inner { grid-template-columns: 1fr; }
	.main-stats__item { padding: 8px 16px; }
	.sub-hero__inner { flex-direction: column; }
	.sub-hero__side { width: 100%; }
	.sub-body__inner { grid-template-columns: 1fr; }
	.sub-sidebar { order: -1; }
	.sub-related-grid { grid-template-columns: repeat(2, 1fr); }
	.sub-hero__content h1 { font-size: 24px; }
	.auth-layout { grid-template-columns: 1fr; }
	.auth-aside { position: static; order: -1; }
	.form-radio-grid { grid-template-columns: 1fr; }
	.form-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.main-courses__grid { grid-template-columns: 1fr; }
	.sub-related-grid { grid-template-columns: 1fr; }
	.auth-stepper { flex-wrap: wrap; gap: 12px; }
	.auth-stepper__item + .auth-stepper__item::before { display: none; }
}

/* ===== 나의 강의실 (Classroom) ===== */
.classroom-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; margin: 32px 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border-color);
}
.classroom-head h1 {
	font-size: 24px; font-weight: 700; color: var(--navy-dark);
	margin: 0 0 6px;
}
.classroom-head p { font-size: 14px; color: var(--text-muted); margin: 0; }

.classroom-stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	margin-bottom: 28px;
}
.classroom-stat {
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 20px 22px;
	box-shadow: var(--shadow-card);
}
.classroom-stat__num {
	font-size: 28px; font-weight: 700; color: var(--blue-accent);
	margin-bottom: 4px;
}
.classroom-stat__unit { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.classroom-stat__lbl { font-size: 13.5px; color: var(--text-muted); }

.classroom-tabs {
	display: flex; gap: 24px;
	border-bottom: 2px solid var(--border-color);
	margin-bottom: 24px;
}
.classroom-tab {
	padding: 12px 0; font-size: 15px; color: var(--text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color var(--transition), border-color var(--transition);
}
.classroom-tab:hover { color: var(--text-dark); }
.classroom-tab.is-active {
	color: var(--blue-accent); font-weight: 700;
	border-bottom-color: var(--blue-accent);
}

.classroom-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 60px;
}

.classroom-card {
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: all var(--transition);
	display: flex; flex-direction: column;
}
.classroom-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
}
.classroom-card__thumb {
	position: relative;
	height: 110px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
}
.classroom-card__cat { font-size: 14px; }
.classroom-card__badge {
	position: absolute; top: 10px; right: 10px;
	padding: 3px 8px; border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 700; color: var(--white);
	background: var(--danger-red);
}
.classroom-card__body {
	padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.classroom-card__title {
	font-size: 15px; font-weight: 700; color: var(--text-dark);
	line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.classroom-card__instructor {
	font-size: 13.5px; color: var(--text-muted);
	margin-top: -8px;
}

.classroom-card__progress { display: flex; flex-direction: column; gap: 6px; }
.classroom-card__progress-bar {
	height: 6px; background: var(--bg-card); border-radius: 999px; overflow: hidden;
}
.classroom-card__progress-bar > span {
	display: block; height: 100%;
	background: var(--blue-accent);
	transition: width var(--transition);
}
.classroom-card__progress-meta {
	display: flex; justify-content: space-between; align-items: center;
	font-size: 13.5px; color: var(--text-muted);
}
.classroom-card__status {
	padding: 2px 8px; border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 700;
}
.classroom-card__status--ongoing  { background: rgba(77,136,216,.12); color: var(--blue-accent); }
.classroom-card__status--done     { background: rgba(34,197,94,.12);  color: var(--success-green); }
.classroom-card__status--favorite { background: rgba(236,72,153,.12); color: #ec4899; }

.classroom-card__next {
	background: var(--bg-card);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	display: flex; flex-direction: column; gap: 2px;
}
.classroom-card__next-lbl   { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.classroom-card__next-title { font-size: 13.5px; color: var(--text-dark); font-weight: 600; }
.classroom-card__next-at    { font-size: 13.5px; color: var(--text-muted); }

.classroom-card__actions { margin-top: auto; }
.oc-btn--block { display: block; width: 100%; text-align: center; }

.classroom-empty {
	background: var(--white);
	border: 1px dashed var(--border-color);
	border-radius: var(--radius-md);
	padding: 64px 24px;
	text-align: center;
	margin-bottom: 60px;
}
.classroom-empty__icon { font-size: 48px; margin-bottom: 12px; }
.classroom-empty h3 { font-size: 17px; color: var(--navy-dark); margin: 0 0 6px; }
.classroom-empty p  { font-size: 13.5px; color: var(--text-muted); margin: 0 0 20px; }

/* my-main__head 가로 정렬 변형 (대시보드의 [나의 강의실 가기] 버튼) */
.my-main__head--row {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px;
}

@media (max-width: 1024px) {
	.classroom-stats { grid-template-columns: repeat(2, 1fr); }
	.classroom-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.classroom-head  { flex-direction: column; align-items: stretch; }
	.classroom-stats { grid-template-columns: 1fr 1fr; }
	.classroom-grid  { grid-template-columns: 1fr; }
	.my-main__head--row { flex-direction: column; align-items: stretch; }
}

/* ===== 강의실 카드 액션 가로 정렬 ===== */
.classroom-card__actions--row {
	display: flex; gap: 8px;
}
.classroom-card__actions--row > * { flex: 1; padding-left: 8px; padding-right: 8px; font-size: 13.5px; text-align: center; }

/* ===== 수강 강좌 상세 (courseHome) — Hero ===== */
.course-home__hero {
	background: linear-gradient(135deg, var(--navy-dark) 0%, #1d3f73 100%);
	color: var(--white);
	border-radius: var(--radius-md);
	padding: 32px 36px;
	margin-top: 28px; margin-bottom: 24px;
	box-shadow: var(--shadow-card);
}
.course-home__hero-meta {
	display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.course-home__hero-status {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13.5px; color: rgba(255,255,255,.85);
}
.course-home__hero-status .dot {
	width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
	box-shadow: 0 0 0 4px rgba(74,222,128,.25);
}
.course-home__hero-title {
	font-size: 26px; font-weight: 700; line-height: 1.35;
	margin: 0 0 8px;
}
.course-home__hero-sub {
	font-size: 14px; color: rgba(255,255,255,.85);
	margin: 0 0 22px;
}
.course-home__hero-sub .sep { margin: 0 8px; opacity: .5; }
.course-home__progress {
	background: rgba(255,255,255,.08);
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	margin-bottom: 22px;
}
.course-home__progress-bar {
	height: 8px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden;
	margin-bottom: 10px;
}
.course-home__progress-bar > span {
	display: block; height: 100%;
	background: linear-gradient(90deg, #4ade80, #22d3ee);
	transition: width var(--transition);
}
.course-home__progress-meta {
	display: flex; justify-content: space-between;
	font-size: 13.5px; color: rgba(255,255,255,.85);
}
.course-home__hero-actions {
	display: flex; gap: 10px; flex-wrap: wrap;
}
.course-home__hero-actions .oc-btn--outline {
	background: transparent; border-color: rgba(255,255,255,.4); color: var(--white);
}
.course-home__hero-actions .oc-btn--outline:hover {
	background: rgba(255,255,255,.1); border-color: var(--white); color: var(--white);
}

/* ===== 차시 목록 (lesson-list) ===== */
.lesson-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 60px; }
.lesson-item {
	display: flex; align-items: center; gap: 16px;
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	transition: all var(--transition);
}
.lesson-item--current {
	border-color: var(--blue-accent);
	box-shadow: 0 0 0 2px rgba(77,136,216,.12);
}
.lesson-item--locked { opacity: 0.55; }
.lesson-item__no {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--bg-card); color: var(--text-muted);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.lesson-item--done    .lesson-item__no { background: var(--success-green); color: var(--white); }
.lesson-item--current .lesson-item__no { background: var(--blue-accent);   color: var(--white); }
.lesson-item__body { flex: 1; min-width: 0; }
.lesson-item__title {
	font-size: 14px; font-weight: 600; color: var(--text-dark);
	margin-bottom: 4px;
}
.lesson-item__meta {
	display: flex; gap: 10px; font-size: 13.5px; color: var(--text-muted);
}
.lesson-item__tag {
	padding: 2px 8px; border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 700;
}
.lesson-item__tag--done    { background: rgba(34,197,94,.12); color: var(--success-green); }
.lesson-item__tag--current { background: rgba(77,136,216,.12); color: var(--blue-accent); }
.lesson-item__tag--locked  { background: var(--bg-card);       color: var(--text-muted); }
.lesson-item__action .oc-btn { padding: 8px 14px; font-size: 13.5px; }

/* ===== 자료 탭 / Q&A 탭 (cs-table 재활용 + 보강) ===== */
.material-size {
	margin-left: 8px; font-size: 13.5px; color: var(--text-muted);
}
.cs-badge { padding: 2px 8px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 700; }
.cs-badge--pin  { background: rgba(244,67,54,.12);  color: var(--danger-red);    margin-right: 6px; }
.cs-badge--ext  { background: rgba(77,136,216,.12); color: var(--blue-accent);    margin-right: 6px; }
.cs-badge--done { background: rgba(34,197,94,.12);  color: var(--success-green);  margin-right: 6px; }
.cs-badge--wait { background: rgba(245,158,11,.12); color: #9A4508;               margin-right: 6px; }
/* 어두운 카드(포트폴리오) 위에서는 밝은 조합으로 — 명도 대비 4.5:1 확보 */
.portfolio-card .cs-badge--wait { background: rgba(255,255,255,.18); color: #FFD8A8; }
.portfolio-card .cs-badge--done { background: rgba(255,255,255,.18); color: #B7F0C4; }

/* ===== 과제 카드 ===== */
.assign-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
	margin-bottom: 60px;
}
.assign-grid--lg { grid-template-columns: 1fr; }
.assign-card {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 22px 24px;
	display: flex; flex-direction: column; gap: 10px;
	box-shadow: var(--shadow-card);
}
.assign-card--done    { border-left: 4px solid var(--success-green); }
.assign-card--ongoing { border-left: 4px solid var(--blue-accent); }
.assign-card--late    { border-left: 4px solid var(--danger-red); }
.assign-card__head {
	display: flex; align-items: center; justify-content: space-between;
}
.assign-card__no { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.assign-card__tag { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 700; }
.assign-card__tag--done    { background: rgba(34,197,94,.12); color: var(--success-green); }
.assign-card__tag--ongoing { background: rgba(77,136,216,.12); color: var(--blue-accent); }
.assign-card__tag--late    { background: rgba(244,67,54,.12); color: var(--danger-red); }
.assign-card__title { font-size: 16px; font-weight: 700; color: var(--navy-dark); margin: 0; }
.assign-card__due { font-size: 13.5px; color: var(--text-muted); }
.assign-card__desc { font-size: 13.5px; color: var(--text-medium); line-height: 1.6; }
.assign-card__result {
	background: var(--bg-card); border-radius: var(--radius-sm);
	padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.assign-card__score-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-medium); }
.assign-card__score-row strong { color: var(--success-green); font-size: 16px; }
.assign-card__file { display: flex; align-items: center; font-size: 13.5px; }
.assign-card__file a { color: var(--blue-accent); }
.assign-card__upload { margin-bottom: 10px; }
.assign-card__upload-btn {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px; border: 1.5px dashed var(--border-color); border-radius: var(--radius-sm);
	color: var(--text-muted); cursor: pointer; transition: all var(--transition);
	font-size: 13.5px;
}
.assign-card__upload-btn:hover {
	border-color: var(--blue-accent); color: var(--blue-accent);
	background: rgba(77,136,216,.04);
}
.assign-card__upload-icon { font-size: 16px; }
.assign-card__submit { display: flex; flex-direction: column; gap: 10px; }
.assign-card__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* ===== 수료증 페이지 ===== */
.cert-layout {
	display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px;
	margin-top: 28px; margin-bottom: 60px;
	align-items: flex-start;
}
.cert-paper {
	background: #fdfcf6;
	background-image:
		linear-gradient(rgba(0,45,98,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,45,98,.04) 1px, transparent 1px);
	background-size: 24px 24px;
	border: 1px solid #d9c98a;
	border-radius: 4px;
	padding: 56px 48px 48px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	position: relative;
}
.cert-paper::before {
	content: ""; position: absolute; inset: 12px;
	border: 2px solid var(--navy-dark); pointer-events: none;
	border-radius: 2px;
}
.cert-paper__top {
	position: relative;
	display: flex; justify-content: space-between; align-items: flex-start;
	margin-bottom: 28px;
}
.cert-paper__brand { display: flex; align-items: center; gap: 12px; }
.cert-paper__logo {
	width: 48px; height: 48px; border-radius: 8px;
	background: var(--navy-dark); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 20px;
}
.cert-paper__brand-name { font-size: 13.5px; color: var(--text-muted); letter-spacing: 1px; font-weight: 600; }
.cert-paper__brand-sub { font-size: 14px; color: var(--navy-dark); font-weight: 700; margin-top: 2px; }
.cert-paper__no { font-size: 13.5px; color: var(--text-muted); font-family: 'Courier New', monospace; }

.cert-paper__title { text-align: center; margin: 32px 0; position: relative; }
.cert-paper__kind { font-size: 38px; font-weight: 700; color: var(--navy-dark); letter-spacing: 16px; padding-left: 16px; }
.cert-paper__kind-en { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; letter-spacing: 6px; }

.cert-paper__body { position: relative; margin: 32px 0; }
.cert-row { display: flex; padding: 10px 0; border-bottom: 1px dotted #c9b772; font-size: 14px; }
.cert-row:last-child { border-bottom: none; }
.cert-row__lbl { width: 120px; flex-shrink: 0; color: var(--text-muted); font-weight: 600; }
.cert-row__val { flex: 1; color: var(--text-dark); }
.cert-row__val--strong { font-size: 16px; font-weight: 700; color: var(--navy-dark); }

.cert-paper__statement {
	position: relative;
	text-align: center; font-size: 16px; color: var(--text-dark); line-height: 1.9;
	margin: 32px 0; font-weight: 500;
}
.cert-paper__statement strong { color: var(--navy-dark); }

.cert-paper__sign { position: relative; text-align: center; margin-top: 36px; }
.cert-paper__date { font-size: 14px; color: var(--text-medium); margin-bottom: 18px; }
.cert-paper__org { font-size: 17px; color: var(--navy-dark); margin-bottom: 12px; }
.cert-paper__seal { display: inline-flex; align-items: center; gap: 12px; }
.cert-paper__seal span { font-size: 15px; color: var(--text-dark); }
.cert-paper__seal-stamp {
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(244,67,54,.85); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 18px;
	transform: rotate(-8deg);
}

.cert-paper__footer {
	position: relative;
	margin-top: 36px; padding-top: 16px;
	border-top: 1px solid #d9c98a;
	font-size: 13.5px; color: var(--text-muted); text-align: center; line-height: 1.7;
}
.cert-paper__footer code {
	background: var(--bg-card); padding: 2px 6px; border-radius: 3px;
	font-family: 'Courier New', monospace; font-size: 13.5px;
}

.cert-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.cert-info {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 20px 22px;
}
.cert-info h3 { font-size: 14px; color: var(--navy-dark); margin: 0 0 12px; }
.cert-info dl { display: grid; grid-template-columns: 80px 1fr; gap: 8px 12px; font-size: 13.5px; }
.cert-info dt { color: var(--text-muted); }
.cert-info dd { color: var(--text-dark); margin: 0; }
.cert-actions { display: flex; flex-direction: column; gap: 10px; }
.cert-badge {
	background: linear-gradient(135deg, rgba(77,136,216,.08), rgba(0,45,98,.08));
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 22px; text-align: center;
}
.cert-badge__title { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.cert-badge__icon { font-size: 56px; margin: 12px 0; }
.cert-badge__name { font-size: 15px; color: var(--navy-dark); margin-bottom: 8px; }
.cert-badge p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; }
.cert-verify {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 18px 20px;
}
.cert-verify__lbl { font-size: 13.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.cert-verify p { font-size: 13.5px; color: var(--text-medium); margin: 0 0 10px; line-height: 1.6; }

@media print {
	body * { visibility: hidden; }
	.cert-paper, .cert-paper * { visibility: visible; }
	.cert-paper { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; }
	.oc-header, .breadcrumb, .cert-aside, .oc-footer { display: none !important; }
}

/* ===== 학습 이력 ===== */
.history-filter {
	display: flex; gap: 12px; margin-bottom: 16px;
}
.form-input--sm { padding: 8px 12px; font-size: 13.5px; max-width: 220px; }

.history-list { display: flex; flex-direction: column; margin-bottom: 60px; }
.history-item {
	display: flex; gap: 18px; padding: 16px 0;
	border-bottom: 1px solid var(--border-color);
	align-items: center;
}
.history-item:last-child { border-bottom: none; }
.history-item__date {
	width: 150px; flex-shrink: 0;
	font-size: 13.5px; color: var(--text-muted); font-family: 'Courier New', monospace;
}
.history-item__body { flex: 1; min-width: 0; }
.history-item__course { font-size: 13.5px; color: var(--text-muted); margin-bottom: 4px; }
.history-item__lesson { font-size: 14px; color: var(--text-dark); font-weight: 500; }
.history-item__meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-muted); flex-shrink: 0; }
.history-item__action { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 700; }
.history-item__action--done     { background: rgba(255,193,7,.18); color: #b78103; }
.history-item__action--finish   { background: rgba(34,197,94,.12); color: var(--success-green); }
.history-item__action--progress { background: rgba(77,136,216,.12); color: var(--blue-accent); }

@media (max-width: 768px) {
	.cert-layout { grid-template-columns: 1fr; }
	.cert-aside  { position: static; }
	.cert-paper  { padding: 36px 24px; }
	.cert-paper__kind { font-size: 28px; letter-spacing: 8px; padding-left: 8px; }
	.assign-grid { grid-template-columns: 1fr; }
	.classroom-card__actions--row { flex-direction: column; }
	.history-item { flex-wrap: wrap; }
	.history-item__date { width: 100%; }
}

/* ===== 배지 (Badge) ===== */
.badge-stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
	margin-bottom: 18px;
}
.badge-stat {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 16px 18px;
}
.badge-stat__num { font-size: 24px; font-weight: 700; color: var(--blue-accent); margin-bottom: 4px; }
.badge-stat__lbl { font-size: 13.5px; color: var(--text-muted); }

.badge-filters { display: flex; gap: 8px; margin-bottom: 18px; }
.badge-filter {
	padding: 6px 14px; border-radius: var(--radius-pill);
	font-size: 13.5px; color: var(--text-muted);
	background: var(--white); border: 1px solid var(--border-color);
	transition: all var(--transition);
}
.badge-filter:hover { border-color: var(--blue-accent); color: var(--blue-accent); }
.badge-filter.is-active {
	background: var(--blue-accent); border-color: var(--blue-accent); color: var(--white);
}

/* 배지 카드 — 배지 이미지가 주인공이라 가로형(왼쪽 큰 배지 + 오른쪽 내용)으로 둔다.
   LecoS 배지 이미지는 규격이 고정(정사각 원본)이라 크게 키워도 흐려지지 않는다. */
.badge-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
	margin-bottom: 32px;
}
.badge-card {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 20px;
	display: grid; grid-template-columns: 132px 1fr; gap: 18px;
	align-items: center;
	transition: all var(--transition);
}
.badge-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.badge-card--progress { opacity: 0.65; }
/* 배지 아이콘 — LecoS 실물 배지 이미지를 그대로 보여준다(원형 테두리·배경 없음). */
.badge-card__icon {
	position: relative;
	grid-row: 1 / span 2;   /* 왼쪽 배지가 내용+하단 두 줄 높이를 함께 차지 */
	width: 132px; height: 132px;
	display: flex; align-items: center; justify-content: center;
	font-size: 44px;
	margin: 0;
}
.badge-card__icon img { width: 100%; height: 100%; object-fit: contain; }
/* 이미지가 아직 없는 배지(LecoS 미등록·수령 전) 자리 표시 */
.badge-card__soon {
	width: 120px; height: 120px; border-radius: 50%;
	background: var(--bg-light, #f1f5f9);
	border: 2px dashed var(--border-color, #cbd5e1);
	color: var(--text-muted, #546E7A);
	font-size: 14px; font-weight: 600; letter-spacing: -0.02em;
	display: flex; align-items: center; justify-content: center;
}
/* 오른쪽 내용 영역 — 본문과 하단(발급일·상태)을 세로로 쌓는다 */
.badge-card__body { text-align: left; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.badge-card__type { font-size: 13.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.badge-card__name { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 36px;
}
.badge-card__course { font-size: 13.5px; color: var(--text-muted); line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.badge-card__foot {
	display: flex; justify-content: space-between; align-items: center;
	border-top: 1px dashed var(--border-color); padding-top: 10px; margin-top: 10px;
	font-size: 13.5px; color: var(--text-muted);
	grid-column: 2;   /* 가로형 카드에서 오른쪽 내용 열에 붙인다 */
}
.badge-card__tag {
	padding: 2px 8px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 700;
}
.badge-card__tag--earned   { background: rgba(34,197,94,.12);  color: var(--success-green); }
.badge-card__tag--progress { background: rgba(245,158,11,.12); color: #9A4508; }

.badge-info {
	background: rgba(77,136,216,.05);
	border-left: 3px solid var(--blue-accent);
	padding: 18px 22px; margin-top: 16px;
	border-radius: var(--radius-sm);
}
.badge-info h3 { font-size: 14px; color: var(--navy-dark); margin: 0 0 10px; }
.badge-info ul { margin: 0 0 12px; padding-left: 18px; }
.badge-info li { font-size: 13.5px; color: var(--text-medium); line-height: 1.7; }

/* ===== 배지 상세 ===== */
.badge-detail__hero {
	display: flex; align-items: center; gap: 24px;
	border-radius: var(--radius-md); padding: 32px;
	margin-bottom: 22px;
}
.badge-detail__icon {
	width: 110px; height: 110px; border-radius: 50%;
	color: var(--white); font-size: 52px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.badge-detail__title h1 { font-size: 24px; font-weight: 700; color: var(--navy-dark); margin: 6px 0 8px; }
.badge-detail__type { display: flex; align-items: center; gap: 8px; }
.badge-detail__level { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.badge-detail__issuer { font-size: 13.5px; color: var(--text-medium); margin: 0; }

.badge-detail__actions {
	display: flex; gap: 8px; flex-wrap: wrap;
	margin-bottom: 22px;
}

.badge-detail__grid {
	display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px;
}
.badge-detail__main, .badge-detail__side { display: flex; flex-direction: column; gap: 16px; }

.badge-criteria { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.badge-criteria th, .badge-criteria td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); text-align: left; }
.badge-criteria th { background: var(--bg-card); color: var(--text-muted); font-weight: 600; font-size: 13.5px; }

.badge-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-skill {
	padding: 6px 12px; border-radius: var(--radius-pill);
	background: rgba(77,136,216,.08); color: var(--blue-accent);
	font-size: 13.5px; font-weight: 600;
}

.badge-meta { display: grid; grid-template-columns: 80px 1fr; gap: 8px 12px; font-size: 13.5px; }
.badge-meta dt { color: var(--text-muted); }
.badge-meta dd { color: var(--text-dark); margin: 0; }

/* ===== 배지 공유 ===== */
.badge-share-hero {
	display: flex; align-items: center; gap: 18px;
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 22px 24px; margin-bottom: 18px;
}
.badge-share-hero__icon {
	width: 72px; height: 72px; border-radius: 50%; color: var(--white);
	display: flex; align-items: center; justify-content: center; font-size: 32px;
	flex-shrink: 0;
}
.badge-share-hero__type { font-size: 13.5px; color: var(--text-muted); margin-bottom: 4px; }
.badge-share-hero__body h2 { font-size: 18px; color: var(--navy-dark); margin: 0 0 4px; }
.badge-share-hero__body p { font-size: 13.5px; color: var(--text-medium); margin: 0; }

.share-url-row { display: flex; gap: 8px; }
.share-url-row .form-input { flex: 1; }

.share-sns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.share-sns__btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px; border-radius: var(--radius-sm);
	font-size: 13.5px; font-weight: 600; color: var(--white);
	border: none; cursor: pointer; transition: all var(--transition);
}
.share-sns__btn:hover { transform: translateY(-2px); }
.share-sns__icon {
	width: 22px; height: 22px; border-radius: 50%;
	background: rgba(255,255,255,.25);
	display: flex; align-items: center; justify-content: center;
	font-size: 13.5px; font-weight: 700;
}
.share-sns__btn--kakao    { background: #FEE500; color: #000; }
.share-sns__btn--facebook { background: #1877F2; }
.share-sns__btn--twitter  { background: #000; }
.share-sns__btn--linkedin { background: #0A66C2; }

/* ===== 배지 발급 신청 ===== */
.apply-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.apply-card {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 18px 20px;
	display: flex; flex-direction: column; gap: 12px;
}
.apply-card__head { display: flex; align-items: center; gap: 12px; }
.apply-card__icon {
	width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 22px;
	flex-shrink: 0;
}
.apply-card__type { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.apply-card__name { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-top: 2px; }
.apply-card__progress {
	margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--blue-accent);
	background: rgba(77,136,216,.1); padding: 4px 10px; border-radius: var(--radius-pill);
	flex-shrink: 0;
}
.apply-card__desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.apply-card__actions { display: flex; gap: 6px; }
.apply-card__actions .oc-btn { flex: 1; padding: 8px 10px; font-size: 13.5px; }

.apply-upload { display: flex; align-items: center; gap: 12px; }
.apply-upload__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px; background: var(--bg-card);
	border: 1px solid var(--border-color); border-radius: var(--radius-sm);
	font-size: 13.5px; font-weight: 600; color: var(--text-medium); cursor: pointer;
	transition: all var(--transition);
}
.apply-upload__btn:hover { background: rgba(77,136,216,.08); color: var(--blue-accent); border-color: var(--blue-accent); }
.apply-upload__hint { font-size: 13.5px; color: var(--text-muted); }

.apply-history { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.apply-history th, .apply-history td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); text-align: left; }
.apply-history th { background: var(--bg-card); color: var(--text-muted); font-weight: 600; font-size: 13.5px; }

/* ===== e-포트폴리오 ===== */
.portfolio-card {
	background: linear-gradient(135deg, var(--navy-dark), #1d3f73);
	color: var(--white); border-radius: var(--radius-md); padding: 28px 32px;
	margin-bottom: 22px;
}
.portfolio-card__head { display: flex; align-items: center; gap: 18px; }
.portfolio-card__avatar {
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(255,255,255,.2); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; font-weight: 700;
	flex-shrink: 0;
}
.portfolio-card__info { flex: 1; }
.portfolio-card__info h2 { margin: 0 0 6px; font-size: 18px; }
.portfolio-card__intro { font-size: 13.5px; color: rgba(255,255,255,.85); margin: 0; line-height: 1.7; }
.portfolio-card__public { flex-shrink: 0; }

.portfolio-card__stats {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
	margin-top: 22px; padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.15);
	text-align: center;
}
.portfolio-card__stats div { font-size: 13.5px; color: rgba(255,255,255,.7); }
.portfolio-card__stats strong { font-size: 22px; color: var(--white); margin-right: 2px; }
.portfolio-card__stats span { display: block; margin-top: 4px; }

.portfolio-card__share {
	display: flex; align-items: center; gap: 10px;
	margin-top: 22px; padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.15);
}
.portfolio-card__share label { font-size: 13.5px; color: rgba(255,255,255,.7); flex-shrink: 0; }
.portfolio-card__share .form-input {
	flex: 1; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: var(--white);
}
.portfolio-card__share .oc-btn { background: transparent; border-color: rgba(255,255,255,.4); color: var(--white); }
.portfolio-card__share .oc-btn:hover { background: rgba(255,255,255,.1); border-color: var(--white); color: var(--white); }

.portfolio-timeline { display: flex; flex-direction: column; gap: 14px; }
.portfolio-timeline__row {
	display: flex; gap: 16px; padding-bottom: 14px;
	border-bottom: 1px dashed var(--border-color);
}
.portfolio-timeline__row:last-child { border-bottom: none; }
.portfolio-timeline__date {
	width: 80px; flex-shrink: 0;
	font-size: 13.5px; color: var(--text-muted); font-weight: 600;
}
.portfolio-timeline__body { font-size: 13.5px; color: var(--text-dark); line-height: 1.7; }
.portfolio-timeline__body strong { color: var(--navy-dark); }

/* ===== 배지 검증 (외부) ===== */
.verify-header {
	background: var(--navy-dark); color: var(--white);
	padding: 14px 0;
}
.verify-header__brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.verify-header__logo {
	width: 38px; height: 38px; border-radius: 8px;
	background: var(--white); color: var(--navy-dark);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.verify-header__name { font-size: 13.5px; letter-spacing: 1px; opacity: 0.7; }
.verify-header__sub  { font-size: 14px; font-weight: 700; margin-top: 2px; }

.verify-section { padding: 56px 0 80px; background: var(--bg-card); min-height: calc(100vh - 200px); }

.verify-result {
	background: var(--white); border-radius: var(--radius-md);
	padding: 36px 40px; margin-bottom: 24px;
	text-align: center;
	border: 2px solid;
}
.verify-result--valid   { border-color: var(--success-green); }
.verify-result--invalid { border-color: var(--danger-red); }
.verify-result__icon {
	width: 72px; height: 72px; border-radius: 50%;
	margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 38px; color: var(--white); font-weight: 700;
}
.verify-result--valid   .verify-result__icon { background: var(--success-green); }
.verify-result--invalid .verify-result__icon { background: var(--danger-red); }
.verify-result__title { font-size: 22px; font-weight: 700; color: var(--navy-dark); margin-bottom: 8px; }
.verify-result__sub { font-size: 14px; color: var(--text-medium); line-height: 1.7; max-width: 600px; margin: 0 auto 14px; }
.verify-result__verified-at { font-size: 13.5px; color: var(--text-muted); font-family: 'Courier New', monospace; }

.verify-card {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); overflow: hidden;
	margin-bottom: 24px;
}
.verify-card__hero {
	display: flex; align-items: center; gap: 22px;
	padding: 32px;
}
.verify-card__icon {
	width: 96px; height: 96px; border-radius: 50%;
	color: var(--white); font-size: 44px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.verify-card__hero h1 { font-size: 22px; font-weight: 700; color: var(--navy-dark); margin: 6px 0 8px; }
.verify-card__hero p { font-size: 13.5px; color: var(--text-medium); margin: 0; line-height: 1.7; }

.verify-card__grid {
	display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px;
	padding: 0 32px 32px;
}
.verify-meta { display: grid; grid-template-columns: 100px 1fr; gap: 10px 14px; font-size: 13.5px; }
.verify-meta dt { color: var(--text-muted); }
.verify-meta dd { color: var(--text-dark); margin: 0; word-break: break-all; }
.verify-meta a { color: var(--blue-accent); }

.verify-criteria h3 { font-size: 14px; color: var(--navy-dark); margin: 0 0 10px; }
.verify-criteria table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.verify-criteria th, .verify-criteria td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); text-align: left; }
.verify-criteria th { background: var(--bg-card); color: var(--text-muted); font-weight: 600; font-size: 13.5px; }

.verify-card__foot {
	display: flex; gap: 8px; justify-content: flex-end;
	padding: 18px 32px;
	background: var(--bg-card);
	border-top: 1px solid var(--border-color);
}

.verify-disclaimer {
	background: rgba(77,136,216,.06);
	border-left: 3px solid var(--blue-accent);
	padding: 18px 22px; border-radius: var(--radius-sm);
}
.verify-disclaimer h3 { font-size: 14px; color: var(--navy-dark); margin: 0 0 8px; }
.verify-disclaimer p { font-size: 13.5px; color: var(--text-medium); line-height: 1.7; margin: 0; }
.verify-disclaimer a { color: var(--blue-accent); }

@media (max-width: 1024px) {
	.badge-stats   { grid-template-columns: repeat(2, 1fr); }
	.badge-grid    { grid-template-columns: 1fr; }
	.badge-detail__grid { grid-template-columns: 1fr; }
	.apply-grid    { grid-template-columns: 1fr; }
	.share-sns     { grid-template-columns: repeat(2, 1fr); }
	.verify-card__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.badge-stats        { grid-template-columns: 1fr 1fr; }
	.badge-grid         { grid-template-columns: 1fr; }
	/* 좁은 화면에서는 배지를 위, 내용을 아래로 세로 배치 */
	.badge-card         { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.badge-card__icon   { grid-row: auto; }
	.badge-card__body   { text-align: center; }
	.badge-card__foot   { grid-column: 1; width: 100%; }
	.badge-detail__hero { flex-direction: column; text-align: center; }
	.portfolio-card__head { flex-direction: column; text-align: center; }
	.verify-card__hero  { flex-direction: column; text-align: center; padding: 24px; }
	.portfolio-card__share { flex-direction: column; align-items: stretch; }
}

/* ===== 학점인정 (Credit) ===== */
.credit-stats {
	display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px;
	margin-bottom: 22px;
}
.credit-stat {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 18px 20px;
}
.credit-stat--main {
	background: linear-gradient(135deg, var(--navy-dark), #1d3f73);
	color: var(--white); border: none;
}
.credit-stat--main .credit-stat__lbl  { color: rgba(255,255,255,.75); }
.credit-stat--main .credit-stat__num  { color: var(--white); }
.credit-stat--main .credit-stat__hint { color: rgba(255,255,255,.65); }
.credit-stat__lbl { font-size: 13.5px; color: var(--text-muted); margin-bottom: 6px; }
.credit-stat__num { font-size: 28px; font-weight: 700; color: var(--blue-accent); }
.credit-stat__num--done    { color: var(--success-green); }
.credit-stat__num--ongoing { color: #B45309; }
.credit-stat__num--reject  { color: var(--danger-red); }
.credit-stat__unit { font-size: 14px; font-weight: 600; margin-left: 2px; opacity: 0.8; }
.credit-stat__hint { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }

.credit-flow {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 22px 24px; margin-bottom: 22px;
}
.credit-flow h2 { font-size: 15px; color: var(--navy-dark); margin: 0 0 16px; }
.credit-steps {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.credit-step {
	background: var(--bg-card); border-radius: var(--radius-sm); padding: 16px;
	text-align: center;
}
.credit-step__no {
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--blue-accent); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px;
	margin: 0 auto 10px;
}
.credit-step__title { font-size: 14px; font-weight: 700; color: var(--navy-dark); margin-bottom: 4px; }
.credit-step__desc  { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

.credit-pick { display: flex; flex-direction: column; gap: 8px; }
.credit-pick__item {
	display: flex; align-items: center; gap: 14px;
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-sm); padding: 14px 18px;
	cursor: pointer; transition: all var(--transition);
}
.credit-pick__item:hover:not(.is-disabled) { border-color: var(--blue-accent); background: rgba(77,136,216,.04); }
.credit-pick__item.is-disabled { opacity: 0.55; cursor: not-allowed; background: var(--bg-card); }
.credit-pick__item input { flex-shrink: 0; }
.credit-pick__body { flex: 1; }
.credit-pick__title { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 2px; }
.credit-pick__meta  { font-size: 13.5px; color: var(--text-muted); }
.credit-pick__status { color: var(--success-green); font-weight: 600; }
.credit-pick__credit {
	font-size: 18px; font-weight: 700; color: var(--blue-accent);
	flex-shrink: 0; padding-left: 12px; border-left: 1px solid var(--border-color);
}
.credit-pick__credit small { font-size: 13.5px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }

.credit-rpl-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: rgba(245,158,11,.08); border-left: 3px solid #9A4508;
	padding: 16px 20px; border-radius: var(--radius-sm);
}

/* 진행 현황 카드 */
.status-card {
	background: var(--white); border: 1px solid var(--border-color);
	border-left: 4px solid var(--blue-accent);
	border-radius: var(--radius-md); padding: 22px 26px; margin-bottom: 14px;
	box-shadow: var(--shadow-card);
}
.status-card--done    { border-left-color: var(--success-green); }
.status-card--reject  { border-left-color: var(--danger-red); }
.status-card--ongoing { border-left-color: var(--blue-accent); }
.status-card__head {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
	margin-bottom: 18px;
}
.status-card__no { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.status-card__title h3 { font-size: 16px; color: var(--navy-dark); margin: 4px 0 0; }
.status-card__meta { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; }
.status-card__memo {
	background: var(--bg-card); border-radius: var(--radius-sm); padding: 12px 14px;
	font-size: 13.5px; color: var(--text-medium); line-height: 1.7;
	margin-bottom: 12px;
}
.status-card__memo strong { color: var(--navy-dark); }
.status-card__updated { font-size: 13.5px; color: var(--text-muted); margin-left: 6px; }
.status-card__actions { display: flex; gap: 8px; justify-content: flex-end; }

.status-track {
	display: flex; align-items: center; gap: 4px;
	padding: 12px 0;
	margin-bottom: 16px;
}
.status-track__step {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	flex-shrink: 0;
}
.status-track__no {
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--bg-card); color: var(--text-muted);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13.5px;
	border: 2px solid var(--border-color);
}
.status-track__step.is-done .status-track__no {
	background: var(--success-green); color: var(--white); border-color: var(--success-green);
}
.status-track__step.is-current .status-track__no {
	background: var(--blue-accent); color: var(--white); border-color: var(--blue-accent);
	animation: track-pulse 1.6s ease-in-out infinite;
}
.status-track__lbl { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.status-track__step.is-done .status-track__lbl { color: var(--text-dark); }
.status-track__bar {
	flex: 1; height: 2px; background: var(--border-color);
	margin: 0 -2px;
	position: relative; top: -10px;
}
.status-track__bar.is-active { background: var(--success-green); }

@keyframes track-pulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(77,136,216,.4); }
	50%     { box-shadow: 0 0 0 6px rgba(77,136,216,0); }
}

/* ===== 강좌 목록 (course/list) ===== */
.course-list-hero {
	background: #004ea2;   /* 푸터 배경색과 동일 */
	color: var(--white);
	padding: 56px 0 64px;
	text-align: center;
}
/* 소개/안내 페이지용 낮은 hero (course-list-hero 축소판) */
.about-hero {
	background: #004ea2;   /* 푸터 배경색과 동일 */
	color: var(--white);
	padding: 26px 0;
	text-align: center;
}
.about-hero h1 { font-size: 23px; font-weight: 700; margin: 0 0 5px; }
.about-hero p  { font-size: 14px; color: rgba(255,255,255,.85); margin: 0; }
.course-list-hero h1 { font-size: 30px; font-weight: 700; margin: 0 0 10px; }
.course-list-hero p  { font-size: 15px; color: rgba(255,255,255,.85); margin: 0 0 28px; }
.course-search {
	display: flex; gap: 8px; max-width: 640px; margin: 0 auto;
	background: var(--white); padding: 6px; border-radius: var(--radius-pill);
}
.course-search .form-input { border: none; box-shadow: none; padding: 12px 18px; border-radius: var(--radius-pill); }
.course-search .oc-btn { padding: 12px 24px; border-radius: var(--radius-pill); }

.course-list-filters {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	margin: 24px 0 16px; flex-wrap: wrap;
}
.course-list-filters__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.course-cat {
	padding: 6px 14px; border-radius: var(--radius-pill);
	font-size: 13.5px; color: var(--text-muted);
	background: var(--white); border: 1px solid var(--border-color);
	transition: all var(--transition);
}
.course-cat:hover { border-color: var(--blue-accent); color: var(--blue-accent); }
.course-cat.is-active { background: var(--navy-dark); border-color: var(--navy-dark); color: var(--white); }
.course-list-filters__sort { flex-shrink: 0; }

.course-list-summary {
	font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px;
}
.course-list-summary strong { color: var(--navy-dark); }

.course-list-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.course-card--list { display: block; transition: all var(--transition); }
.course-card--list:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* ===== 약관/정책 (policy) ===== */
.policy-layout {
	display: grid; grid-template-columns: 220px 1fr; gap: 32px;
	margin-top: 28px; margin-bottom: 60px;
	align-items: flex-start;
}
.policy-side {
	display: flex; flex-direction: column;
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 8px;
	position: sticky; top: 24px;
}
.policy-side__item {
	padding: 12px 16px; border-radius: var(--radius-sm);
	font-size: 14px; color: var(--text-medium);
	transition: all var(--transition);
}
.policy-side__item:hover    { background: var(--bg-card); color: var(--blue-accent); }
.policy-side__item.is-active {
	background: rgba(77,136,216,.08); color: var(--blue-accent); font-weight: 700;
}

.policy-main { min-width: 0; }
.policy-doc {
	background: var(--white); border: 1px solid var(--border-color);
	border-radius: var(--radius-md); padding: 32px 36px;
}
.policy-doc h2 {
	font-size: 16px; color: var(--navy-dark);
	margin: 28px 0 12px; padding-bottom: 8px;
	border-bottom: 1px solid var(--border-color);
}
.policy-doc h2:first-child { margin-top: 0; }
.policy-doc p {
	font-size: 13.5px; color: var(--text-medium); line-height: 1.9; margin: 0 0 12px;
}
.policy-doc ol, .policy-doc ul {
	font-size: 13.5px; color: var(--text-medium); line-height: 1.9;
	padding-left: 22px; margin: 0 0 12px;
}
.policy-doc li { margin-bottom: 4px; }
.policy-doc a { color: var(--blue-accent); }
.policy-doc__table {
	width: 100%; border-collapse: collapse; margin: 8px 0 16px;
	font-size: 13.5px;
}
.policy-doc__table th, .policy-doc__table td {
	padding: 10px 14px; border: 1px solid var(--border-color);
	text-align: left; vertical-align: top;
}
.policy-doc__table th { background: var(--bg-card); color: var(--navy-dark); font-weight: 600; }
.policy-doc__sign {
	margin-top: 28px; padding-top: 16px;
	border-top: 1px solid var(--border-color);
	text-align: right; font-size: 13.5px; color: var(--text-muted);
}
.policy-doc__sign strong { color: var(--navy-dark); }

@media (max-width: 1024px) {
	.credit-stats     { grid-template-columns: 1fr 1fr; }
	.credit-steps     { grid-template-columns: 1fr 1fr; }
	.course-list-grid { grid-template-columns: repeat(3, 1fr); }
	.policy-layout    { grid-template-columns: 1fr; }
	.policy-side      { position: static; flex-direction: row; }
	.policy-side__item { flex: 1; text-align: center; }
}
@media (max-width: 640px) {
	.credit-rpl-cta   { flex-direction: column; align-items: stretch; text-align: left; }
	.course-list-grid { grid-template-columns: repeat(2, 1fr); }
	.status-card__head { flex-direction: column; }
	.status-track     { overflow-x: auto; }
	.policy-doc       { padding: 22px 20px; }
}
@media (max-width: 480px) {
	.course-list-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   알림함 (알림 Wave2-C) — 헤더 배지 / 마이페이지 알림 목록
   ============================================================ */
/* 헤더 종 아이콘 + 미읽음 배지 */
.btn-noti { position: relative; display: inline-flex; align-items: center; }
.btn-noti__icon { font-size: 17px; line-height: 1; }
.noti-badge {
	position: absolute; top: -2px; right: -6px;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: var(--radius-pill);
	background: #e53935; color: #fff;
	font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
/* 사이드바 등 인라인 배지 */
.noti-badge--inline { position: static; display: inline-block; margin-left: 6px; vertical-align: middle; }

/* 목록 상단: 유형 필터 + 전체 읽음 */
.noti-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.noti-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.noti-filter a {
	padding: 6px 14px; border-radius: var(--radius-pill);
	border: 1px solid var(--border-color); background: #fff;
	font-size: 13.5px; color: var(--text-medium); text-decoration: none;
}
.noti-filter a:hover { background: var(--bg-card); color: var(--text-dark); }
.noti-filter a.is-current { background: var(--navy-sub); border-color: var(--navy-sub); color: #fff; font-weight: 700; }

/* 알림 목록 — 카드형 (재정돈 2026-07-07) */
.noti-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.noti-item {
	position: relative; background: #fff;
	border: 1px solid var(--border-color); border-radius: var(--radius-md);
	box-shadow: var(--shadow-card); overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.noti-item::before {   /* 좌측 카테고리 액센트 바 */
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--blue-accent);
}
.noti-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.noti-item > a { display: block; padding: 15px 18px 15px 22px; text-decoration: none; color: inherit; }
.noti-item__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.noti-item__time { margin-left: auto; font-size: 12.5px; color: var(--text-light); }
.noti-item__title { font-size: 15px; font-weight: 600; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noti-item__preview {
	margin-top: 4px; font-size: 13px; color: var(--text-light); line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.noti-item.is-unread { background: #f5f9ff; border-color: #cfe0fb; }
.noti-item.is-unread .noti-item__title { font-weight: 800; color: var(--navy-dark); }
.noti-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger-red); display: inline-block; flex-shrink: 0; }

/* 카테고리별 좌측 색상 바 */
.noti-item--sugang::before { background: #4D88D8; }
.noti-item--pay::before    { background: #2E7D32; }
.noti-item--qna::before    { background: #B45309; }
.noti-item--badge::before  { background: #E0A800; }
.noti-item--credit::before { background: #14B8A6; }
.noti-item--notice::before { background: var(--navy-sub); }

.noti-empty {
	padding: 56px 16px; text-align: center; color: var(--text-light);
	background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.noti-empty::before { content: "🔔"; display: block; font-size: 30px; margin-bottom: 10px; opacity: .5; }
.noti-readall-form { margin-left: auto; }

/* 알림 상세 본문 (줄바꿈 유지) */
.noti-content { white-space: pre-line; line-height: 1.7; font-size: 15px; color: var(--text-medium); }

/* ==========================================================================
   모바일 대응 — 공통 헤더 / 푸터 (2026-08-21)
   ---------------------------------------------------------------------------
   기존 문제:
     - .oc-header 가 height:64px 고정인데 내부 .oc-container 는 100px 로 넘쳐 겹쳤다.
     - <=768 에서 .oc-nav 를 display:none 으로 숨기기만 하고 대체 수단이 없어
       모바일에서 네비게이션 접근 자체가 불가능했다. → 햄버거(.oc-nav-toggle) 추가.
     - .oc-header__utils 가 flex-wrap:nowrap 인 채로 폭에 눌려 글자 단위 줄바꿈이 났다.
     - .oc-footer 는 반응형 규칙이 아예 없었다(@media print 제외).
   브레이크포인트는 1024 / 768 / 480 3단으로 맞춘다.
   ========================================================================== */

/* 햄버거 버튼 — 데스크톱에서는 감춘다 */
.oc-nav-toggle {
	display: none;
	width: 40px; height: 40px;
	padding: 0; border: 0; background: transparent;
	cursor: pointer; flex-direction: column;
	align-items: center; justify-content: center; gap: 5px;
	flex: 0 0 auto;
}
.oc-nav-toggle span {
	display: block; width: 22px; height: 2px; border-radius: 2px;
	background: var(--white);
	transition: transform var(--transition), opacity var(--transition);
}
.oc-header--white .oc-nav-toggle span { background: var(--navy-sub); }
.oc-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.oc-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.oc-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
	/* 헤더 — 고정 높이 해제(내용이 넘쳐 겹치던 원인) */
	.oc-header { height: auto; min-height: 56px; position: relative; }
	.oc-header .oc-container { flex-wrap: nowrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }

	.oc-nav-toggle { display: flex; order: 3; }

	/* 로고 — 남는 폭을 차지하되 넘치면 줄임표 */
	.oc-header__logo { order: 1; flex: 1 1 auto; min-width: 0; gap: 8px; }
	.oc-header__logo-img { height: 30px; }
	.oc-header__logo-sub {
		font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
	}

	/* 유틸 — 글자 단위 줄바꿈 방지(원인: 축소 허용 + white-space 미지정) */
	.oc-header__utils {
		order: 2; flex: 0 0 auto; gap: 6px; height: auto;
	}
	.oc-header__utils > a,
	.oc-header__utils .btn-login,
	.oc-header__utils .btn-signup {
		white-space: nowrap; flex: 0 0 auto;
		font-size: 12.5px; padding: 6px 10px;
	}

	/* 네비게이션 — 햄버거로 여는 패널 */
	.oc-nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--navy-dark);
		border-top: 1px solid rgba(255,255,255,.12);
		box-shadow: 0 10px 24px rgba(0,0,0,.22);
		padding: 6px 0 10px;
		max-height: calc(100vh - 56px); overflow-y: auto;
		z-index: 300;
	}
	.oc-nav.is-open { display: flex; }
	.oc-header--white .oc-nav { background: var(--white); }

	.oc-nav > a,
	.oc-nav__item > a {
		display: block; padding: 12px 20px; font-size: 15px;
	}
	.oc-nav a.active::after { content: none; }      /* 밑줄 인디케이터는 모바일에서 생략 */

	.oc-nav__item { padding: 0; position: static; }
	.oc-nav__item > a::after { content: none; }     /* ▾ 표시 제거 — 항상 펼쳐두므로 */

	/* 드롭다운: 터치에는 hover 가 없다 → 펼친 목록으로 표시 */
	.oc-nav__sub,
	.oc-nav__sub.oc-nav__mega {
		display: block; position: static;
		min-width: 0; width: auto; left: auto;
		background: transparent; border: 0; box-shadow: none;
		padding: 0 0 6px;
		grid-template-columns: none;
	}
	.oc-nav__sub a {
		padding: 9px 20px 9px 34px; font-size: 13.5px;
		color: rgba(255,255,255,.88); white-space: normal;
	}
	.oc-header--white .oc-nav__sub a { color: var(--text-medium); }
	.oc-nav__sub a:hover { padding-left: 34px; background: rgba(255,255,255,.08); }
	.oc-header--white .oc-nav__sub a:hover { background: var(--bg-card); }

	/* 강사 메뉴는 유틸 안에 있으므로 드롭다운만 우측 정렬 유지 */
	.oc-header__gangsa-sub { right: 0; left: auto; }

	/* 푸터 — 반응형 규칙이 없어 가로로 눌려 있었다 */
	.oc-footer { padding: 32px 0 20px; }
	.oc-footer__top { flex-direction: column; align-items: flex-start; gap: 20px; }
	.oc-footer__right { align-items: flex-start; width: 100%; }
	.oc-footer__links { flex-wrap: wrap; gap: 10px 14px; }
	.oc-footer__family select { width: 100%; max-width: 320px; }
	.oc-footer__bottom { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
}

@media (max-width: 480px) {
	.oc-header__logo-img { height: 26px; }
	.oc-header__logo-sub { font-size: 13px; }
	.oc-header__utils { gap: 4px; }
	.oc-header__utils > a,
	.oc-header__utils .btn-login,
	.oc-header__utils .btn-signup { font-size: 12px; padding: 5px 8px; }
	/* 로그인 상태의 'OOO님'은 프로필 링크라 아이콘성으로 축약 */
	.oc-footer__info { font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   모바일 대응 — 다중컬럼 그리드 (2026-08-21)
   전수조사로 찾은 "모바일 오버라이드가 없던 그리드"들.
   grid item 은 min-width:auto(=min-content) 가 기본이라, 1fr 이어도 내용이
   길면 트랙이 컨테이너보다 커진다(메인 FAQ 카드가 실제로 376px 로 넘쳤다).
   → 컬럼을 minmax(0,1fr) 로 두고 자식에 min-width:0 을 준다.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.main-info__inner { grid-template-columns: minmax(0, 1fr); }
	.main-info__inner > * { min-width: 0; }

	/* 메인 하단 FAQ 링크 2단 → 1단 */
	.faq-links { grid-template-columns: minmax(0, 1fr); }
	.faq-link-card { min-width: 0; }

	/* 마이페이지 레이아웃 — 사이드 220px 고정이라 모바일에서 본문이 눌렸다 */
	.my-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.my-layout > * { min-width: 0; }
	.my-side { position: static; }

	/* 3열 메가 드롭다운 변형도 펼친 목록으로 */
	.oc-nav__sub.oc-nav__mega--3col { grid-template-columns: none; }
}

/* 통계 카드는 [숫자 + 짧은 라벨]뿐이라 375px 에서도 2열이 충분하다.
   1열로 내리면 카드 4장에 508px(화면 2/3)을 써서 오히려 못 쓴다. */
@media (max-width: 640px) {
	.my-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.my-stat-card { padding: 16px 10px; }
	.my-stat-card__num { font-size: 24px; }
	.my-stat-card__lbl { font-size: 12.5px; word-break: keep-all; }
}

/* --------------------------------------------------------------------------
   모바일 대응 — 게시판 표(.cs-table) 카드형 전환 (2026-08-21)
   고정폭 합계가 350px(no 60 + cat 100 + dt 130 + vc 60)이라 327px 컨테이너에서
   제목 칸이 사실상 0 이 되어 2~3자마다 줄바꿈되고 한 행이 세로 8줄을 먹었다.
   가로 스크롤 대신 카드형으로 재배치한다(게시판은 제목·날짜만 보이면 충분).
   컬럼 식별은 마크업의 의미 클래스(.cs-col-*)로 하며 nth-child 는 쓰지 않는다.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.cs-table { display: block; font-size: 14px; }
	.cs-table thead { display: none; }
	.cs-table tbody { display: block; }

	.cs-table tbody tr {
		display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
		border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px);
		padding: 12px 14px; margin-bottom: 10px;
	}
	.cs-table tbody td { display: block; border: 0; padding: 0; width: auto; }

	/* 제목 = 클래스 없는 td. 한 줄 전체를 차지하고 가장 크게 */
	.cs-table tbody td:not([class]) { order: 3; flex: 1 1 100%; }
	.cs-table .cs-title { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.5; }

	/* 분류 배지 → 제목 위 */
	.cs-table .cs-col-cat { order: 1; width: auto; text-align: left; }

	/* 번호는 감추되, 고정글(📌)은 남긴다 */
	.cs-table .cs-col-no { display: none; }
	.cs-table tbody tr.is-pinned .cs-col-no { display: block; order: 2; width: auto; }

	/* 날짜·조회·상태 → 제목 아래 메타 줄 */
	.cs-table .cs-col-dt,
	.cs-table .cs-col-vc,
	.cs-table .cs-col-isu,
	.cs-table .cs-col-st {
		order: 4; width: auto; text-align: left;
		font-size: 12.5px; color: var(--text-muted);
	}
	.cs-table .cs-col-vc::before { content: '조회 '; }
	.cs-table .cs-col-st { order: 5; }
	.cs-table .cs-col-isu { order: 6; }
	.cs-table .cs-col-isu::before { content: '이수 '; }

	.cs-table .cs-empty { flex: 1 1 100%; text-align: center; padding: 28px 0; }
	.cs-table tbody tr.is-pinned { background: rgba(77, 136, 216, .04); }
	.cs-table tr.is-pinned td { background: transparent; }

	/* 페이징 — 줄바꿈 허용 */
	.cs-paging { flex-wrap: wrap; gap: 4px; }
}

/* --------------------------------------------------------------------------
   모바일 대응 — 좌측 사이드 nav(.my-side) 가로 칩 전환 (2026-08-21)
   학습지원(cs-side.jsp)·마이페이지(my-side.jsp)가 같은 .my-side 를 쓴다.
   모바일에서 세로로 쌓이며 250px 이상을 먹어, 본문에 닿기까지 화면 3/4 을
   스크롤해야 했다. → 가로 스크롤 칩 줄로 바꿔 약 50px 로 줄인다.
   2depth 그룹은 그룹명을 숨기고 하위 항목만 칩으로 편다(이름만으로 식별 가능).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.my-side {
		display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		padding: 4px 0 10px; margin-bottom: 4px;
		border: 0; border-radius: 0; background: transparent;
		scrollbar-width: thin;
	}
	.my-side::-webkit-scrollbar { height: 4px; }
	.my-side::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

	/* 제목(‘학습지원’ / ‘OOO님’)은 히어로·헤더에 이미 있으므로 생략 */
	.my-side__title { display: none; }

	/* 그룹 래퍼는 칩 나열만 담당 */
	.my-side__group { display: contents; padding: 0; }
	.my-side__group-title { display: none; }

	/* 모든 링크를 칩으로 */
	.my-side__top,
	.my-side__group > a:not(.my-side__group-title) {
		flex: 0 0 auto; white-space: nowrap;
		padding: 8px 14px; border: 1px solid var(--border-color);
		border-radius: var(--radius-pill, 999px);
		font-size: 13.5px; line-height: 1; background: var(--white);
		border-left-width: 1px;
	}
	.my-side__top.is-active,
	.my-side__group > a.is-sub-active {
		background: rgba(77,136,216,.10); color: var(--blue-accent);
		border-color: var(--blue-accent); font-weight: 600; padding-left: 14px;
	}
	.my-side__group > a:not(.my-side__group-title):hover { padding-left: 14px; }
	.my-side__top-icon { margin-right: 4px; }
}

/* --------------------------------------------------------------------------
   모바일 대응 — 폼/약관 (2026-08-21)
   .form-check 는 [체크박스][본문][전문 보기] 가 한 줄 flex 인데,
   .check-link 가 margin-left:auto + white-space:nowrap 이라 절대 줄지 않아
   본문 폭이 140px 까지 눌렸다("고유식별정보 처 / 리 동의" 식으로 끊김).
   → 모바일에서는 전문 보기를 본문 아래 줄로 내린다.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.form-check { flex-wrap: wrap; padding: 13px 14px; }
	/* basis:auto 면 내용이 길 때 체크박스 아래로 밀려나므로 basis:0 으로 고정 */
	.form-check .check-body { flex: 1 1 0; min-width: 0; }
	.form-check .check-title { font-size: 14px; line-height: 1.45; }
	/* 전문 보기/상세보기를 다음 줄로 내린다.
	   ── 시행착오 기록 ──
	   (1) .form-check::after 로 무조건 더미 줄을 넣으면, 링크가 없는 항목(전체 동의)에도
	       빈 줄이 생겨 row-gap 만큼(13px) 헛공간이 붙는다.
	   (2) 링크에 flex-basis:100% + max-width:max-content 를 주면, 줄바꿈 판정에 쓰이는
	       hypothetical main size 가 max-width 로 먼저 깎여 아예 줄이 안 나뉜다.
	   → 링크가 있는 .form-check 에만 더미 줄을 넣는다. 두 가지 마크업이 존재한다:
	       signup.jsp   : .terms-item > .form-check  (래퍼 있음)
	       profile.jsp  : .form-check > .check-link  (래퍼 없음 → :has 로 판별)
	   :has 미지원 브라우저에서는 profile.jsp 만 예전처럼 한 줄로 표시된다(파손 아님). */
	.terms-item > .form-check::after {
		content: ''; flex-basis: 100%; height: 0; order: 1;
	}
	.form-check:has(> .check-link)::after {
		content: ''; flex-basis: 100%; height: 0; order: 1;
	}
	.form-check .check-link {
		order: 2;
		margin-left: 32px;            /* 체크박스 폭만큼 들여 본문과 좌측 정렬 */
		margin-top: 8px;
		align-self: flex-start;
		padding: 6px 12px; font-size: 13px;
	}

	/* 입력요소 — 고정폭 방지 */
	.form-input, .form-select, .form-textarea,
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea {
		max-width: 100%;
	}

	/* 취소/다음 등 하단 버튼 줄 */
	.form-actions, .auth-actions { flex-wrap: wrap; gap: 8px; }
}

/* ==========================================================================
   모바일 대응 — 마이페이지 정적감사 반영분 (2026-08-21, 2차)
   /life/my/** 전 화면을 셀렉터 단위로 감사해 "모바일 오버라이드가 없던" 것들을 정리.
   대부분 같은 원인 세 가지다:
     (a) flex 인데 flex-wrap 미지정 + 자식이 white-space:nowrap → 옆 요소를 압착
     (b) grid 다중컬럼이 1024px 까지만 내려오고 그 이하 오버라이드 없음
     (c) 패딩이 데스크톱 값 그대로라 375px 에서 가용폭을 크게 깎음
   ========================================================================== */

/* (c) 공통 여백 — .oc-container 24×2 + .my-block 24×2 = 96px(375px 의 25.6%)를
   여백이 먹어 본문 가용폭이 277px 밖에 안 됐다. 아래 표·그리드 압착을 모두 증폭시키던 원인. */
@media (max-width: 640px) {
	.my-block { padding: 16px 14px; }
	.auth-step-card { padding: 18px 16px; }
	.portfolio-card { padding: 18px 16px; }
}
@media (max-width: 480px) {
	.oc-container { padding: 0 16px; }
}

/* 경로(breadcrumb) — flex-wrap 이 없어 '마이페이지'가 '마이 / 페이지' 로 단어 중간에서 끊겼다 */
@media (max-width: 768px) {
	.breadcrumb__inner { flex-wrap: wrap; row-gap: 2px; }
	.breadcrumb__inner > * { white-space: nowrap; }
	.breadcrumb__inner .current { white-space: normal; word-break: keep-all; }
}

/* 표 3종(.apply-history / .badge-criteria) — 부모에 overflow-x 가 없어 body 가 통째로
   가로 스크롤됐다. 카드형까지 가지 않고 표 자체를 가로 스크롤시킨다(열 수가 유동적이라
   .cs-table 처럼 의미 클래스로 재배치하기 어렵다). */
@media (max-width: 640px) {
	.apply-history, .badge-criteria { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.apply-history > tbody, .badge-criteria > tbody,
	.apply-history > thead, .badge-criteria > thead { display: table; width: 100%; min-width: 520px; }
	.apply-history th, .apply-history td,
	.badge-criteria th, .badge-criteria td { padding: 8px 10px; white-space: nowrap; }
}

/* (b) 1024px 에서 멈춘 그리드들 */
@media (max-width: 640px) {
	.credit-steps { grid-template-columns: minmax(0, 1fr); }
	.credit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.credit-stats > * { min-width: 0; }
	.portfolio-card__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.portfolio-card__stats > * { min-width: 0; }
}
@media (max-width: 420px) {
	.credit-stats { grid-template-columns: minmax(0, 1fr); }
}

/* (a) flex-wrap 누락 — .check-link 와 동일한 "안 줄어드는 우측 요소" 패턴 */
@media (max-width: 640px) {
	/* 파일첨부 버튼 + 안내문구 */
	.apply-upload { flex-wrap: wrap; gap: 8px; }
	.apply-upload__hint { flex: 1 1 100%; }

	/* 배지 신청 카드의 진행률 칩 (margin-left:auto + flex-shrink:0 이라 절대 안 줄었다) */
	.apply-card__head { flex-wrap: wrap; gap: 6px 10px; }
	.apply-card__progress { margin-left: 0; }

	/* 학점 선택 항목 — .form-check 와 같은 구조적 결함 */
	.credit-pick__item { flex-wrap: wrap; padding: 12px 14px; }
	.credit-pick__body { flex: 1 1 0; min-width: 0; }
	.credit-pick__credit { margin-left: 32px; }

	/* 하단 버튼 줄 — 자식 .oc-btn 이 nowrap 이라 줄바꿈으로 흡수되지 못했다 */
	.form-submit-row { flex-wrap: wrap; gap: 8px; }
	.status-card__actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
}

/* 알림 — 제목 강제 1줄(ellipsis) 해제, 본문의 긴 토큰 줄바꿈 */
@media (max-width: 640px) {
	.noti-item__title {
		white-space: normal; overflow: visible; text-overflow: clip;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
}
.noti-content { overflow-wrap: anywhere; word-break: break-word; }

/* --------------------------------------------------------------------------
   사이드 칩 줄 — 스크롤 가능 표시 (2026-08-21)
   마이페이지 메뉴가 10개라 375px 에서 보이는 폭 343px / 실제 897px,
   554px 가 가려지는데 더 있다는 표시가 없어 발견되지 않았다.
   background-attachment: local/scroll 조합으로 "끝에 닿지 않았을 때만" 그림자를 띄운다
   (JS 없이 순수 CSS. 좌우 끝에 도달하면 그림자가 자연히 사라진다).
   ※ 전체 메뉴는 헤더 햄버거에도 있으므로 이 줄은 보조 수단이다.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.my-side {
		background-image:
			linear-gradient(to right,  var(--bg-main) 40%, rgba(255,255,255,0)),
			linear-gradient(to left,   var(--bg-main) 40%, rgba(255,255,255,0)),
			linear-gradient(to right,  rgba(0,0,0,.14), rgba(0,0,0,0)),
			linear-gradient(to left,   rgba(0,0,0,.14), rgba(0,0,0,0));
		background-position: left center, right center, left center, right center;
		background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
		background-repeat: no-repeat;
		background-attachment: local, local, scroll, scroll;
	}
}

/* --------------------------------------------------------------------------
   결제 안내(payment.jsp) — 원장 표 (2026-08-21)
   기존: 인라인 고정폭 합계 748px(48+110+70+100×3+70+150) 인데 모바일 가용폭은 313px 라
         카드 밖으로 470px 이상 삐져나가 body 가 통째로 가로 스크롤됐다.
   금액 정렬이 의미를 갖는 원장이라 .cs-table 식 카드형 전환은 부적합 →
   표 자체를 가로 스크롤시키고, 모바일에서는 저가치 열(No·수단·비고)을 접는다.
   -------------------------------------------------------------------------- */
.pay-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pay-ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.pay-ledger thead tr { background: #f3f4f6; border-bottom: 1px solid #d1d5db; }
.pay-ledger tbody tr { border-bottom: 1px solid #e5e7eb; }
.pay-ledger th, .pay-ledger td { padding: 8px; }

.pay-ledger .pay-col-no    { width: 48px;  text-align: center; color: #6E6E6E; }
.pay-ledger .pay-col-dt    { width: 110px; text-align: center; white-space: nowrap; }
.pay-ledger .pay-col-gb    { width: 70px;  text-align: center; white-space: nowrap; }
.pay-ledger .pay-col-item  { text-align: left; }
.pay-ledger .pay-col-amt   { width: 100px; text-align: right; white-space: nowrap; }
.pay-ledger .pay-col-amt--rf { color: #6b7280; }
.pay-ledger .pay-col-sudan { width: 70px;  text-align: center; color: #555; }
.pay-ledger .pay-col-bigo  { width: 150px; text-align: left;   color: #555; }

/* 무통장 입금 안내 — 라벨/값 2열 */
.pay-bank { width: 100%; font-size: 14px; line-height: 2; }
.pay-bank .pay-bank__lbl { width: 120px; color: #555; font-weight: 400; text-align: left; }

@media (max-width: 640px) {
	/* 저가치 열은 접는다 — 남는 6열(일자/구분/항목/청구/입금/환불)로 원장 의미는 유지된다 */
	.pay-ledger .pay-col-no,
	.pay-ledger .pay-col-sudan,
	.pay-ledger .pay-col-bigo { display: none; }

	.pay-ledger { min-width: 460px; font-size: 13.5px; }   /* 남은 6열 최소폭 — 이보다 좁으면 가로 스크롤 */
	.pay-ledger th, .pay-ledger td { padding: 7px 6px; }
	.pay-ledger .pay-col-dt  { width: 92px; }
	.pay-ledger .pay-col-amt { width: 84px; }

	.pay-bank .pay-bank__lbl { width: 84px; font-size: 13.5px; }
	.pay-bank { font-size: 13.5px; line-height: 1.8; }
}

/* --------------------------------------------------------------------------
   학점인정 현황 모달 (credit/status.jsp) — 2026-08-21
   기존: .credit-modal__card 의 크기·여백이 전부 인라인 style 이라 미디어쿼리로
         덮을 수 없었다. 375px 에서는 max-width(640/560px)가 무의미해지고
         좌우 여백이 0 이라 카드가 화면 끝에 붙어 잘린 것처럼 보였다.
   -------------------------------------------------------------------------- */
.credit-modal__card {
	position: relative;
	margin: 6vh auto; max-height: 88vh; overflow: auto;
	background: #fff; border-radius: 12px; padding: 24px 28px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.credit-modal__card--lg { max-width: 640px; }
.credit-modal__card--md { max-width: 560px; margin: 8vh auto; max-height: 84vh; }

@media (max-width: 640px) {
	.credit-modal__card,
	.credit-modal__card--lg,
	.credit-modal__card--md {
		max-width: none; margin: 16px;
		max-height: calc(100vh - 32px);
		padding: 18px 16px; border-radius: 10px;
	}
}


/* ── 반복 영역 건너뛰기 (KWCAG 2.1) ─────────────────────────────
   평소에는 화면 밖으로 밀어두고, 키보드 초점을 받으면 좌상단에 나타난다. */
.oc-skip__link {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	padding: 10px 18px; background: #1b4f9c; color: #fff;
	font-size: 14px; font-weight: 700; text-decoration: none;
	border-radius: 0 0 4px 0;
}
.oc-skip__link:focus {
	left: 0; outline: 3px solid #ffd54f; outline-offset: -3px;
}
#ocContent { outline: none; }


/* ==========================================================================
   모바일 반응형 마무리 — 360px 실측 반영 (2026-08-22)
   ---------------------------------------------------------------------------
   측정 조건: Chrome 360x740, /life/** 30개 화면 순회.
   측정 결과(개선 전)
     · 가로 스크롤 1건 — 메인(/life/main.do) 문서폭 394px (뷰포트 +34px)
     · 터치 대상 44x44 미달 — 전 화면 공통(헤더 유틸/푸터 링크/페이징/칩·탭) 및 화면별
   여기서는 미디어쿼리 오버라이드만 더한다. 데스크톱 규칙은 건드리지 않는다.
   브레이크포인트는 기존 체계(1024 / 768 / 640 / 480)를 그대로 쓴다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① 가로 스크롤 제거 — 메인(main.do)
   두 원인이 겹쳐 문서폭이 394px 이 됐다.
     (1) .main-courses__tabs 가 flex 인데 flex-wrap 미지정 → 분류 탭 7개가 한 줄을 고집
     (2) .hero-slide-arrow 를 left/right:-44px 로 카드 바깥에 놓았는데,
         768px 이하에서는 .main-hero__slider 가 width:100% 라 그 -44px 이 곧 화면 밖이다
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.main-courses__tabs { flex-wrap: wrap; }
	.main-courses__tab { padding: 10px 14px; }

	/* 화살표를 카드 밖 절대배치에서 점(dot) 줄 안의 일반 항목으로 되돌린다.
	   마크업이 [이전][점들][다음] 순서라 그대로 ‹ ●●● › 한 줄이 된다.
	   점 개수는 노출 강좌 수에 따라 늘어나므로 줄바꿈을 허용해 둔다. */
	.hero-slide-nav { flex-wrap: wrap; }
	.hero-slide-arrow {
		position: static; transform: none;
		width: 44px; height: 44px; font-size: 32px;
	}
}

/* --------------------------------------------------------------------------
   ② 터치 대상 최소 44x44 (KWCAG 2.1 「충분한 크기의 터치 대상」)
   360px 실측에서 걸린 것만 올린다. 전부 768px 이하 오버라이드라 마우스 환경은 그대로다.
   인라인 링크는 min-height 만으로는 커지지 않으므로 inline-flex 로 바꿔 준다.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* 공통 버튼 — 실측 38~42px 이었다 */
	.oc-btn { min-height: 44px; }

	/* 헤더 */
	.oc-nav-toggle { width: 44px; height: 44px; }
	.oc-header__logo { min-height: 44px; }
	.oc-header__utils > a,
	.oc-header__utils .btn-login,
	.oc-header__utils .btn-signup {
		display: inline-flex; align-items: center; justify-content: center;
		min-height: 44px;
	}
	.oc-header__utils .btn-noti { min-width: 44px; }   /* 종 아이콘 하나뿐이라 37px 였다 */

	/* 푸터 */
	.oc-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
	.oc-footer__family select { min-height: 44px; }

	/* 경로(breadcrumb) — 링크를 44 로 올리는 대신 바깥 여백을 줄여 줄 높이는 그대로 둔다
	   (기존 12px×2 + 22px = 46px → 0 + 44px = 44px) */
	.breadcrumb { padding: 0; }
	.breadcrumb__inner { min-height: 44px; }
	.breadcrumb__inner a {
		display: inline-flex; align-items: center; min-height: 44px;
		/* 폭은 글자 수만큼이라 '홈' 은 12px 밖에 안 된다. padding 으로 히트 영역을 넓히고
		   같은 값의 음수 margin 으로 되돌려, 보이는 위치는 그대로 두고 폭만 24px 로 만든다.
		   (한 글자 링크를 44px 폭으로 만들면 구분자 '›' 와의 간격이 벌어져 경로가 깨진다) */
		padding: 0 6px; margin: 0 -6px;
	}

	/* 페이징 — 32x32 였다. 640px 이하에서 .cs-paging 은 이미 flex-wrap:wrap 이라 넘치지 않는다 */
	.cs-paging a, .cs-paging span { min-width: 44px; height: 44px; }

	/* 칩·탭·필터류 (강좌 분류, 게시판 탭, 알림 필터, 배지 필터, 인기강좌 탭) */
	.course-cat,
	.badge-filter,
	.noti-filter a,
	.cs-tabs a,
	.main-courses__tab {
		display: inline-flex; align-items: center; justify-content: center;
		min-height: 44px;
	}

	/* 마이페이지·학습지원 사이드 칩 줄 */
	.my-side__top,
	.my-side__group > a:not(.my-side__group-title) {
		display: inline-flex; align-items: center;
		min-height: 44px;
	}

	/* 텍스트 링크형 액션 — 22~38px 였다 */
	.main-courses__view-all,
	.notice-more,
	.aside-card > .aside-link,
	.aside-card.help .help-cta,
	.form-check .check-link {
		display: inline-flex; align-items: center; min-height: 44px;
	}
	/* ※ .aside-link 는 문장 안에 섞여 있는 것(<li>본교 학번…<a>통합 로그인</a>에서…</li>)도 있다.
	   그런 링크까지 44px 로 만들면 줄 높이가 튀어 문단이 어그러지므로,
	   카드의 직계 자식(독립 링크)만 올린다. 문장 속 링크는 「인라인 링크」 예외에 해당한다. */

	/* 메인 히어로 해시태그 */
	.main-hero__tags a { display: inline-flex; align-items: center; min-height: 44px; }

	/* 메인 공지 목록 — 링크를 44 로 올리고 행 여백을 줄여 목록 총 길이는 유지한다 */
	.notice-item { padding: 0; }
	.notice-item a { display: flex; align-items: center; min-height: 44px; }

	/* 게시판 카드형(.cs-table) 의 제목 링크 — 한 줄짜리 제목이 22px 밖에 안 됐다 */
	.cs-table .cs-title { min-height: 44px; padding: 6px 0; }

	/* 입력 요소 — select/검색버튼이 40~42px 였다 */
	.form-input, .form-input--sm, .form-select, .form-textarea,
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
	select, .btn-search { min-height: 44px; }

	/* 배너 페이지 점 — 7x7 이라 손가락으로 누를 수 없다. 다만 점을 44px 로 키우면
	   8개일 때 352px 라 360px 화면에 들어가지 않는다. → 모양은 그대로 두고
	   ::after 로 히트 영역만 24x44 로 넓힌다(히트 영역이 겹치지 않게 간격도 함께 넓힘).
	   ※ 같은 기능의 ‹ › 화살표는 위에서 44x44 를 확보했다.
	   align-items 는 원래 규칙에 없어 기본값 stretch 다. 그대로 두면 44px 짜리
	   정지 버튼과 같은 줄에 설 때 7px 점이 줄 위쪽에 붙으므로 여기서 지정한다. */
	.hero-slide-dots { gap: 18px; flex-wrap: wrap; align-items: center; }
	.hero-slide-dots .dot { position: relative; }
	.hero-slide-dots .dot::after {
		content: ''; position: absolute; top: 50%; left: 50%;
		width: 24px; height: 44px; transform: translate(-50%, -50%);
	}

	/* 자동 전환 정지/재생 — 22x22 였다 */
	.hero-slide-toggle { width: 44px; height: 44px; line-height: 44px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   ③ 표 — 콘텐츠관리(BT_PAGE_M) 본문에 들어오는 표 방어
   .life-page-content 는 관리자가 입력한 HTML 을 그대로 출력하는 영역이라,
   고정폭 표가 등록되면 페이지 본문 전체가 가로로 밀린다.
   표만 스크롤시키고 본문에는 가로 스크롤이 생기지 않게 한다
   (.apply-history / .badge-criteria 와 같은 방식).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.life-page-content table {
		display: block; max-width: 100%;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
	}
}

/* --------------------------------------------------------------------------
   ④ 여백 — 정적 콘텐츠 본문
   좌우 40px×2 여백이 360px 화면에서 가용폭의 24% 를 먹고 있었다.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.life-page-content { padding: 24px 16px; }
}