/* =============================================================================
   academy.css — 입시위키원격학원
   www(ipsiwiki_main.css)와 같은 색·글꼴 토큰을 쓴다. 이미지·애니메이션 없이
   타이포그래피만으로 구성한다 (요청서 7항).
   ============================================================================= */
:root{
	--navy:#001330;
	--cream:#F8F4F0;
	--teal:#0F766E;
	--stone:#D6D3D1;
	--orange:#FF9500;
	--white:#FFFFFF;
	--slate:#475569;
	--muted:#5B6577;	/* 크림 배경에서 4.5:1 넘기려고 #64748B 보다 조금 진하게 */
	--soft:#F3F0EC;
	--line:rgba(0,19,48,.12);
	--teal-soft:#E7F3F1;
	--max:1120px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
	margin:0;
	background:var(--cream);
	color:var(--navy);
	font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR","Segoe UI",sans-serif;
	letter-spacing:-.018em;
	line-height:1.65;
	word-break:keep-all;
}

a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; }
h1,h2,h3{ margin:0; }
p{ margin:0; }

.wrap{
	width:min(var(--max),calc(100% - 64px));
	margin:0 auto;
}
.wrap.narrow{ max-width:820px; }

/* 앵커(/#usage)로 이동할 때 고정 헤더 아래에 가려지지 않게 */
[id]{ scroll-margin-top:96px; }

/* 링크·버튼 키보드 포커스 */
a:focus-visible,button:focus-visible,input:focus-visible{
	outline:2px solid var(--teal);
	outline-offset:2px;
}

/* -----------------------------------------------------------------------------
   상단 메뉴 (inc/TopMenu.asp)
   ----------------------------------------------------------------------------- */
.TopHeader{
	position:sticky;
	top:0;
	z-index:1000;
	background:rgba(248,244,240,.94);
	border-bottom:1px solid var(--stone);
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
}

.TopHeader .wrap.nav{
	position:relative;
	min-height:76px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
}

.TopHeader .logo{
	position:relative;
	z-index:1002;
	color:var(--navy);
	font-size:34px;	/* www 의 로고(입시위키)와 같은 크기 */
	font-weight:950;
	letter-spacing:-.055em;
	white-space:nowrap;
}

.TopHeader .menu{
	display:flex;
	align-items:center;
	gap:8px;
	white-space:nowrap;
}

.TopHeader .menu a,
.TopHeader .nav-cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:42px;
	padding:0 16px;
	border:1px solid transparent;
	border-radius:999px;
	color:var(--navy);
	font-size:15px;
	font-weight:850;
	letter-spacing:-.03em;
	transition:background .18s ease,border-color .18s ease,color .18s ease;
}

.TopHeader .menu a.menu-link:hover{
	background:rgba(15,118,110,.075);
	border-color:rgba(15,118,110,.14);
	color:var(--teal);
}

.TopHeader .menu a.menu-link.is-active{
	background:var(--navy);
	border-color:var(--navy);
	color:#fff;
}

.TopHeader .nav-cta,
.TopHeader .menu a.nav-cta{	/* a.nav-cta — 위 ".TopHeader .menu a"(남색 글자)보다 세게. 안 그러면 남색 위 남색 글자 */
	margin-left:10px;
	background:var(--navy);
	border-color:var(--navy);
	color:#fff;
	cursor:pointer;
}
.TopHeader .nav-cta:hover,
.TopHeader .menu a.nav-cta:hover{ background:#0b2a55; border-color:#0b2a55; }

.TopHeader .nav-cta-quiet{
	background:#fff;
	border-color:var(--navy);
	color:var(--navy);
}
.TopHeader .nav-cta-quiet:hover{ background:var(--soft); }

.TopHeader .menu-logout{ margin:0; }

.TopHeader .mobile-menu-btn{
	display:none;
	position:relative;
	z-index:1002;
	flex:0 0 44px;
	width:44px;
	height:44px;
	margin-left:auto;
	border:1px solid rgba(0,19,48,.18);
	border-radius:14px;
	background:#fff;
	cursor:pointer;
}

.TopHeader .mobile-menu-btn span{
	position:absolute;
	left:12px;
	width:18px;
	height:2px;
	border-radius:999px;
	background:var(--navy);
	transition:top .22s ease,transform .22s ease,opacity .16s ease;
}
.TopHeader .mobile-menu-btn span:nth-child(1){ top:14px; }
.TopHeader .mobile-menu-btn span:nth-child(2){ top:21px; }
.TopHeader .mobile-menu-btn span:nth-child(3){ top:28px; }

.TopHeader.is-mobile-open .mobile-menu-btn span:nth-child(1){ top:21px; transform:rotate(45deg); }
.TopHeader.is-mobile-open .mobile-menu-btn span:nth-child(2){ opacity:0; }
.TopHeader.is-mobile-open .mobile-menu-btn span:nth-child(3){ top:21px; transform:rotate(-45deg); }

.TopHeader .mobile-dim{
	display:none;
	position:fixed;
	inset:0;
	z-index:1000;
	background:rgba(0,19,48,.34);
	opacity:0;
	pointer-events:none;
	transition:opacity .24s ease;
}

body.topmenu-lock{ overflow:hidden; }

/* -----------------------------------------------------------------------------
   공통 조각
   ----------------------------------------------------------------------------- */
.Content{ min-height:500px; }

.label,
.eyebrow{
	display:block;
	color:var(--teal);
	font-size:12px;
	font-weight:950;
	letter-spacing:.26em;
	text-transform:uppercase;
}
.label.orange,.eyebrow.orange{ color:var(--orange); }

.button{
	display:inline-flex;
	min-height:48px;
	align-items:center;
	justify-content:center;
	padding:0 22px;
	border:1px solid transparent;
	border-radius:999px;
	font-weight:850;
	cursor:pointer;
	transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.button.primary{ background:var(--navy); color:#fff; }
.button.primary:hover{ background:#0b2a55; }
.button.secondary{ background:#fff; border-color:var(--navy); color:var(--navy); }
.button.secondary:hover{ background:var(--soft); }
.button.small{ min-height:40px; padding:0 16px; font-size:14px; }
.button.full{ width:100%; }

.button-row{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:38px;
}

.section{
	padding:88px 0;
	border-top:1px solid var(--line);
}
.section.muted{ background:var(--soft); }

.section h2{
	margin:8px 0 0;
	color:var(--navy);
	font-size:clamp(30px,4vw,44px);
	line-height:1.22;
	font-weight:950;
	letter-spacing:-.05em;
}

.section-heading{ margin-bottom:34px; }

.help-text{
	margin:28px 0;
	color:var(--muted);
	font-weight:600;
}

.text-link{
	color:var(--teal);
	font-weight:850;
}

/* -----------------------------------------------------------------------------
   메인 (Default.asp)
   ----------------------------------------------------------------------------- */
.hero{
	padding:118px 0 108px;
	background:linear-gradient(180deg,rgba(0,19,48,.035),transparent 75%);
}

.hero h1,
.page-hero h1{
	margin:14px 0 24px;
	color:var(--navy);
	font-size:clamp(40px,6vw,72px);
	line-height:1.1;
	font-weight:950;
	letter-spacing:-.06em;
}

.hero-copy,
.page-hero p:not(.eyebrow){
	max-width:660px;
	color:var(--slate);
	font-size:19px;
	font-weight:600;
}

.split{
	display:grid;
	grid-template-columns:1fr 1.1fr;
	gap:80px;
	align-items:start;
}

.body-copy{
	color:var(--slate);
	font-size:17px;
	font-weight:600;
}
.body-copy p + p{ margin-top:16px; }

.info-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
	background:#fff;
}

.info-item{
	padding:24px 22px;
	border-right:1px solid var(--line);
}
.info-item:last-child{ border-right:0; }
.info-item span{ display:block; margin-bottom:7px; color:var(--muted); font-size:13px; font-weight:700; }
.info-item strong{ color:var(--navy); font-weight:900; }

.topic-list{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:28px 0;
}

.topic-list span{
	padding:8px 14px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:999px;
	font-size:14px;
	font-weight:750;
}

.steps{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
}

.step{
	min-height:130px;
	padding:22px;
	border:1px solid var(--line);
	border-radius:18px;
	background:#fff;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
.step b{ color:var(--orange); font-size:13px; font-weight:950; letter-spacing:.08em; }
.step span{ color:var(--navy); font-size:18px; font-weight:850; }

.contact-section{ background:var(--navy); color:#fff; padding:56px 0; }	/* 내용이 두 줄뿐이라 88px 이면 띠가 너무 높다 */
.contact-section h2{ color:#fff; }
.contact-section .label{ color:#FFB34B; }
.contact-section p{ margin-top:14px; color:#CBD5E1; font-weight:600; }

.contact-box{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:40px;
}

.contact-section .button.primary{ background:#fff; color:var(--navy); }
.contact-section .button.primary:hover{ background:var(--cream); }

/* ★★★ 등록 전 안내 띠 — gloAcademyPreOpen 이 True 일 때만 나온다 */
.preopen{
	padding:14px 0;
	background:#FFF7ED;
	color:#9A3412;
	font-size:13px;
	font-weight:700;
	text-align:center;
	border-top:1px solid #FED7AA;
}

/* -----------------------------------------------------------------------------
   보조 페이지 공통 머리 (교습과정 · 학습실 · 개인정보)
   ----------------------------------------------------------------------------- */
.page-hero{
	padding:92px 0 64px;
	background:var(--soft);
}
.page-hero h1{ font-size:clamp(38px,5vw,60px); }
.page-hero p:not(.eyebrow) + p{ margin-top:10px; }	/* 머리말이 두 문단인 화면(개인정보처리방침) */

/* -----------------------------------------------------------------------------
   교습과정 (program/)
   ----------------------------------------------------------------------------- */
.detail-list{ border-top:1px solid var(--line); }

.detail-list > div{
	display:grid;
	grid-template-columns:180px 1fr;
	gap:20px;
	padding:20px 0;
	border-bottom:1px solid var(--line);
}
.detail-list span{ color:var(--muted); font-weight:700; }
.detail-list strong{ color:var(--navy); font-weight:900; }

.course-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
}

.course-card{
	padding:26px 24px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
}

.course-name{
	margin:0 0 22px;
	color:var(--navy);
	font-size:20px;
	font-weight:950;
}

.course-card dl{ margin:0; }
.course-card dl div{
	display:flex;
	justify-content:space-between;
	gap:12px;
	padding-top:10px;
}
.course-card dt{ color:var(--muted); font-weight:700; }
.course-card dd{ margin:0; font-weight:900; font-variant-numeric:tabular-nums; }

/* -----------------------------------------------------------------------------
   로그인 (login/) · 404
   ----------------------------------------------------------------------------- */
.login-section{
	min-height:70vh;
	display:grid;
	place-items:center;
	padding:70px 20px;
	background:var(--soft);
}

.login-box{
	width:min(100%,460px);
	padding:38px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:24px;
	box-shadow:0 24px 80px rgba(0,19,48,.06);
}

.login-box h1{
	margin:8px 0;
	color:var(--navy);
	font-size:34px;
	font-weight:950;
	letter-spacing:-.05em;
}
.login-box > p:not(.eyebrow){ color:var(--muted); font-weight:600; }

.login-form{
	display:grid;
	gap:16px;
	margin-top:28px;
}

.login-form label{
	display:grid;
	gap:7px;
	font-size:14px;
	font-weight:800;
}

.login-form input{
	width:100%;
	min-height:48px;
	padding:0 14px;
	border:1px solid #CBD5E1;
	border-radius:12px;
	background:#fff;
	color:var(--navy);
}
.login-form input:focus{
	outline:2px solid rgba(15,118,110,.25);
	outline-offset:0;
	border-color:var(--teal);
}

.alert{
	margin-top:20px;
	padding:12px 14px;
	border-radius:12px;
	font-size:14px;
	font-weight:700;
}
.alert.error{ background:#FEF2F2; color:#B91C1C; }

.login-help{
	display:grid;
	gap:4px;
	margin-top:24px;
	padding-top:22px;
	border-top:1px solid var(--line);
	font-size:13px;
}
.login-help span{ color:var(--muted); font-weight:600; }
.login-help a{ color:var(--teal); font-weight:850; }

.login-box.center{ text-align:center; }
.login-box.center .button{ margin-top:22px; }

/* -----------------------------------------------------------------------------
   온라인 학습실 (classroom/)
   ----------------------------------------------------------------------------- */
.classroom-hero{ padding-bottom:50px; }

.lesson-list{ border-top:1px solid var(--line); }

.lesson-row{
	display:grid;
	grid-template-columns:80px 1fr 200px;
	gap:28px;
	align-items:center;
	padding:26px 0;
	border-bottom:1px solid var(--line);
}

.lesson-order{
	color:var(--orange);
	font-size:13px;
	font-weight:950;
	letter-spacing:.08em;
}

.lesson-copy h2{
	margin:0 0 5px;
	font-size:22px;
	font-weight:900;
	letter-spacing:-.04em;
}
.lesson-copy p{ color:var(--muted); font-weight:600; }

.lesson-meta{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:16px;
	color:var(--muted);
	font-size:13px;
	font-weight:700;
	white-space:nowrap;
}

/* 강의 재생 */
.lesson-page{ padding-top:58px; }
.video-container{ max-width:960px; }

.back-link{
	display:inline-block;
	margin-bottom:28px;
	color:var(--muted);
	font-size:14px;
	font-weight:700;
}
.back-link:hover{ color:var(--teal); }

.lesson-kicker{
	color:var(--orange);
	font-size:13px;
	font-weight:950;
	letter-spacing:.08em;
}

.lesson-page h1{
	margin:6px 0 28px;
	color:var(--navy);
	font-size:clamp(32px,5vw,48px);
	font-weight:950;
	letter-spacing:-.05em;
	line-height:1.15;
}

/* ★★ 16:9 반응형 플레이어 (요청서 3항) */
.video-frame{
	width:100%;
	aspect-ratio:16 / 9;
	background:#050B14;
	overflow:hidden;
	border-radius:18px;
}

.video-frame iframe,
.video-frame video{
	display:block;
	width:100%;
	height:100%;
	border:0;
}

.video-placeholder{
	width:100%;
	height:100%;
	display:grid;
	place-content:center;
	gap:8px;
	padding:30px;
	color:#fff;
	text-align:center;
	font-weight:800;
}
.video-placeholder span{ color:#94A3B8; font-size:13px; font-weight:600; }

/* 강의 표지 (1~6강) — START 인트로 영상의 첫 화면과 같은 짜임:
   남색 바탕 · 흰 제목 · 주황 짧은 선 · 학원명. 누르면 js/academy.js 가 플레이어로 바꾼다.
   글자는 플레이어 너비(cqw)를 따라 커지고 줄어든다 — 영상 화면처럼 보이도록. */
.video-frame{ position:relative; container-type:inline-size; }

.lesson-cover{
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:14px 20px;
	border:0;
	background:radial-gradient(ellipse 70% 80% at 50% 45%,#0A2349 0%,var(--navy) 72%);
	color:#fff;
	text-align:center;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}

.cover-kicker{
	color:rgba(255,255,255,.62);
	font-size:11px;
	font-size:clamp(11px,1.7cqw,17px);
	font-weight:800;
	letter-spacing:.04em;
}
.cover-kicker em{ color:var(--orange); font-style:normal; }

.cover-title{
	margin-top:6px;
	margin-top:clamp(6px,1.4cqw,16px);
	font-size:17px;
	font-size:clamp(17px,4.6cqw,46px);
	font-weight:900;
	letter-spacing:-.04em;
	line-height:1.3;
}

.cover-line{
	display:block;
	width:clamp(28px,5cqw,52px);
	height:2px;
	margin:clamp(9px,2.6cqw,26px) 0;
	background:var(--orange);
}

.cover-academy{
	color:rgba(255,255,255,.9);
	font-size:12px;
	font-size:clamp(12px,1.9cqw,19px);
	font-weight:700;
}

.cover-play{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:12px;
	margin-top:clamp(12px,3.6cqw,36px);
	padding:7px 16px;
	padding:clamp(7px,1.1cqw,11px) clamp(16px,2.4cqw,24px);
	border-radius:999px;
	background:var(--orange);
	color:var(--navy);
	font-size:12px;
	font-size:clamp(12px,1.6cqw,16px);
	font-weight:900;
	letter-spacing:0;
	transition:transform .18s ease,background .18s ease;
}
.cover-play svg{ width:1em; height:1em; }
.lesson-cover:hover .cover-play,
.lesson-cover:focus-visible .cover-play{ background:#FFAA33; transform:scale(1.05); }
.lesson-cover:focus-visible{ outline:3px solid var(--orange); outline-offset:-3px; }

/* 스크립트가 꺼진 브라우저 — noscript 플레이어가 표지를 덮는다 */
.video-frame noscript iframe{ position:absolute; inset:0; z-index:2; }

.lesson-detail{
	display:grid;
	grid-template-columns:1fr 320px;
	gap:60px;
	padding:32px 0;
	border-bottom:1px solid var(--line);
}

.lesson-description{
	margin-top:8px;
	color:var(--slate);
	font-size:17px;
	font-weight:600;
}

.lesson-detail dl{ margin:0; }
.lesson-detail dl div{
	display:flex;
	justify-content:space-between;
	gap:18px;
	padding:8px 0;
}
.lesson-detail dt{ color:var(--muted); font-weight:700; }
.lesson-detail dd{ margin:0; font-weight:900; text-align:right; }

.lesson-nav{
	display:flex;
	justify-content:space-between;
	gap:16px;
	padding-top:26px;
	font-weight:850;
}
.lesson-nav a{ color:var(--teal); }
.lesson-nav a:hover{ text-decoration:underline; }

/* -----------------------------------------------------------------------------
   개인정보처리방침 (privacy/)
   ----------------------------------------------------------------------------- */
.policy{ max-width:820px; }
.policy h2{ margin-top:40px; font-size:24px; }
.policy h2:first-child{ margin-top:0; }
.policy p{ margin-top:12px; color:var(--slate); font-weight:600; }
.policy .text-link{ text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }

.policy-list{
	margin:14px 0 0;
	padding-left:1.25em;
	color:var(--slate);
	font-weight:600;
}
.policy-list li{ margin-top:6px; }
.policy-list li::marker{ color:var(--teal); }
.policy-list strong{ color:var(--navy); font-weight:850; }

/* 표 — 좁은 화면에서는 상자 안에서 가로로 민다. 양 끝 그림자가 "더 있음"을 알려 준다
   (local 배경은 내용과 같이 움직여 끝에 닿으면 그림자를 가리고, scroll 배경은 제자리에 남는다) */
.policy-table-scroll{
	margin-top:16px;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	border:1px solid var(--line);
	border-radius:14px;
	background:
		linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,
		linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%,rgba(0,19,48,.14),transparent) left/14px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%,rgba(0,19,48,.14),transparent) right/14px 100% no-repeat scroll,
		#fff;
}
.policy-table-scroll:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

.policy-table{
	width:100%;
	border-collapse:collapse;
	font-size:15px;
	line-height:1.55;
}
.policy-table.is-wide{ min-width:560px; }
.policy-table.is-wide tbody th{ white-space:nowrap; }
.policy-table th,
.policy-table td{
	padding:13px 16px;
	border-bottom:1px solid var(--line);
	text-align:left;
	vertical-align:top;
}
.policy-table tbody tr:last-child > *{ border-bottom:0; }
.policy-table thead th{
	background:var(--soft);
	color:var(--navy);
	font-size:13px;
	font-weight:900;
	letter-spacing:.02em;
	white-space:nowrap;
}
.policy-table tbody th{ color:var(--navy); font-weight:850; }
.policy-table td{ color:var(--slate); font-weight:600; }

.policy .policy-date{ margin-top:28px; }
.policy-date strong{ color:var(--navy); font-weight:900; }
.policy .policy-sign{
	margin-top:40px;
	padding-top:20px;
	border-top:1px solid var(--line);
	color:var(--muted);
	font-size:14px;
}

/* -----------------------------------------------------------------------------
   푸터 · 플로팅 (inc/Bottom.asp)
   ----------------------------------------------------------------------------- */
.floating{
	position:fixed;
	right:24px;
	bottom:24px;
	z-index:100;
}

.kakao{
	display:inline-flex;
	align-items:center;
	border:0;
	border-radius:999px;
	background:#FEE500;
	color:#191919;
	padding:14px 20px;
	font-weight:950;
	box-shadow:0 16px 50px rgba(0,19,48,.18);
}

.BottomFooter{
	padding:56px 0 24px;
	background:var(--navy);
	color:#D6D3D1;
	font-size:14px;
}

.footer-grid{
	display:grid;
	grid-template-columns:1.4fr 1.4fr .8fr;
	gap:38px;
}

.footer-brand strong{
	display:block;
	margin-bottom:12px;
	color:#fff;
	font-size:24px;
	font-weight:950;
	letter-spacing:-.05em;
}
.footer-brand p{ color:#D6D3D1; font-weight:600; }

.footer-col h4{
	margin:0 0 16px;
	color:var(--orange);
	font-size:12px;
	font-weight:950;
	letter-spacing:.18em;
}
.footer-col span{
	display:block;
	margin:8px 0;
	color:#D6D3D1;
	font-weight:650;
}
.footer-col a:hover{ color:#fff; text-decoration:underline; }

.footer-bottom{
	margin-top:32px;
	padding-top:18px;
	border-top:1px solid rgba(255,255,255,.12);
	color:#94A3B8;
	font-size:13px;
}

/* -----------------------------------------------------------------------------
   반응형
   ----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   2026-11-06 개편 — 입시기본교육 (사이트 수정 요청서)
   ----------------------------------------------------------------------------- */
.info-grid.single{ grid-template-columns:minmax(0,320px); }
.course-grid.single{ grid-template-columns:minmax(0,440px); }
.course-card dd small{ color:var(--muted); font-size:13px; font-weight:700; }
.reg-no{ margin:16px 0 0; color:var(--navy); font-weight:800; }
.footer-brand p + p{ margin-top:4px; }
.footer-brand .sep{ margin:0 6px; color:#78716C; font-style:normal; }

/* 커리큘럼 (program/) */
.cu-summary{
	padding:24px 26px;
	margin-bottom:30px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
}
.cu-total{ color:var(--navy); font-size:22px; font-weight:950; letter-spacing:-.04em; }
.cu-summary ul{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.cu-summary li{ color:var(--slate); font-weight:650; }
.cu-summary li b{ display:inline-block; min-width:62px; color:var(--orange); font-size:13px; font-weight:950; letter-spacing:.06em; }
.cu-note{ margin-top:12px !important; color:var(--muted); font-size:14px; font-weight:700; }

.cu-part + .cu-part{ margin-top:34px; }
.cu-part-title{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:6px 12px;
	margin:0 0 14px;
	color:var(--navy);
	font-size:20px;
	font-weight:950;
	letter-spacing:-.04em;
}
.cu-part-title span{ color:var(--orange); font-size:13px; letter-spacing:.1em; }
.cu-part-title small{ color:var(--muted); font-size:14px; font-weight:750; letter-spacing:0; }
.lesson-list .cu-part-title.in-list{ margin:46px 0 4px; font-size:20px; line-height:1.4; }	/* .section h2 보다 세게 */

.cu-unit{
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
}
.cu-unit + .cu-unit{ margin-top:10px; }
.cu-unit summary{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:16px 20px;
	cursor:pointer;
	list-style:none;
	font-weight:850;
}
.cu-unit summary::-webkit-details-marker{ display:none; }
.cu-unit summary::after{ content:"+"; color:var(--orange); font-size:22px; font-weight:700; line-height:1; }
.cu-unit[open] summary::after{ content:"−"; }
.cu-unit summary:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:14px; }
.cu-unit-name{ flex:1; color:var(--navy); }
.cu-unit-meta{ color:var(--muted); font-size:14px; font-weight:750; white-space:nowrap; }
.cu-lessons{ margin:0; padding:0 20px 14px; list-style:none; border-top:1px solid var(--line); }
.cu-lessons li{
	display:grid;
	grid-template-columns:52px 1fr auto;
	gap:12px;
	padding:11px 0;
	border-bottom:1px dashed var(--line);
	font-size:15px;
}
.cu-lessons li:last-child{ border-bottom:0; }
.cu-lessons b{ color:var(--orange); font-weight:900; font-variant-numeric:tabular-nums; }
.cu-lessons span{ color:var(--navy); font-weight:650; }
.cu-lessons em{ color:var(--muted); font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; }

/* 교습비 반환기준 (program/) */
.refund{ max-width:900px; }
.refund > p{ color:var(--slate); font-weight:600; }
.refund h3{ margin:28px 0 10px; color:var(--navy); font-size:18px; font-weight:900; }
.refund-reasons,.refund-notes{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.refund-reasons li,.refund-notes li{ color:var(--slate); font-weight:600; }
.refund-reasons li{ display:grid; grid-template-columns:44px 1fr; }
.refund-reasons b{ color:var(--navy); }
.refund-notes{ counter-reset:note; }
.refund-notes li{ counter-increment:note; padding-left:22px; position:relative; }
.refund-notes li::before{ content:counter(note) "."; position:absolute; left:0; color:var(--navy); font-weight:900; }
.refund-table-wrap{ margin-top:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.refund-table{ width:100%; min-width:560px; border-collapse:collapse; background:#fff; font-size:15px; }
.refund-table caption{ text-align:left; padding-bottom:8px; color:var(--muted); font-size:13px; font-weight:700; }
.refund-table th,.refund-table td{ padding:12px 14px; border:1px solid var(--line); vertical-align:top; text-align:left; }
.refund-table thead th{ background:var(--navy); color:#fff; font-weight:850; }
.refund-table tbody th{ background:var(--soft); color:var(--navy); font-weight:850; white-space:nowrap; }
.refund-table tbody th small{ color:var(--muted); font-weight:700; }
.refund-source{ margin-top:16px; color:var(--muted); font-size:13px; font-weight:600; }

/* 학습실 수강 현황 (classroom/) */
.progress-section{ padding:40px 0 0; border-top:0; }
.progress-card{
	padding:28px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:22px;
}
.progress-head h2{ font-size:28px !important; }
.progress-stats{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:12px;
	margin-top:20px;
}
.progress-stats > div{ padding:16px; background:var(--soft); border-radius:14px; }
.progress-stats span{ display:block; color:var(--muted); font-size:13px; font-weight:750; }
.progress-stats strong{ display:block; margin:4px 0 2px; color:var(--navy); font-size:26px; font-weight:950; letter-spacing:-.04em; }
.progress-stats strong.small{ font-size:18px; }
.progress-stats em{ display:block; color:var(--muted); font-size:12px; font-style:normal; font-weight:650; }
.progress-bar{ height:10px; margin-top:18px; background:var(--soft); border-radius:999px; overflow:hidden; }
.progress-bar i{ display:block; height:100%; min-width:4px; background:var(--orange); border-radius:999px; }
.history-title{ margin:26px 0 10px; color:var(--navy); font-size:17px; font-weight:900; }
.history-empty{ color:var(--muted); font-weight:650; }
/* 수강 이력 — 강의별 한 줄: 강의명 · 상태 · 마지막 수강 (2026-11-06 2차) */
.history-head,.history-list li{
	display:grid;
	grid-template-columns:1fr 96px 150px;
	gap:12px;
	align-items:center;
}
.history-head{ padding:0 0 8px; color:var(--muted); font-size:12px; font-weight:800; }
.history-head b,.history-head time{ color:var(--muted); font-weight:800; }
.history-list{ margin:0; padding:0; list-style:none; }
.history-list li{ padding:10px 0; border-top:1px solid var(--line); font-size:14px; }
.history-list span{ color:var(--navy); font-weight:700; }
.history-list b{ color:var(--orange); font-weight:800; }		/* 수강 중 */
.history-list b.done{ color:var(--teal); }
.history-list time{ color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; }
.history-more summary{
	list-style:none;
	cursor:pointer;
	padding:10px 0;
	border-top:1px solid var(--line);
	color:var(--teal);
	font-size:14px;
	font-weight:800;
}
.history-more summary::-webkit-details-marker{ display:none; }
.history-more summary::before{ content:"+ "; }
.history-more[open] summary::before{ content:"− "; }
.history-more summary:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:6px; }

/* 학습실 목록 — 단원 · 상태 · 공개 예정 */
.lesson-row{ grid-template-columns:80px 1fr 270px; }
.lesson-row.is-start .lesson-order{ font-size:14px; }
.lesson-row.compact{ padding:16px 0; }
.lesson-row.compact .lesson-copy h2{ margin:0; font-size:18px; }
.lesson-row.is-soon .lesson-copy h2{ color:var(--slate); }
.unit-block{ border-top:1px solid var(--line); }
.unit-title{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:4px 10px;
	margin:0;
	padding:22px 0 6px;
	color:var(--navy);
	font-size:18px;
	font-weight:900;
}
.unit-title b{ color:var(--orange); font-size:13px; letter-spacing:.06em; }
.unit-title small{ color:var(--muted); font-size:13px; font-weight:750; }
.lesson-state{ padding:3px 10px; background:var(--soft); border-radius:999px; color:var(--navy); font-weight:850; }
.lesson-state.done{ background:var(--teal-soft); color:var(--teal); }
.button.is-disabled{ border-color:var(--line); background:var(--soft); color:var(--muted); cursor:default; pointer-events:none; }

@media(max-width:1000px){
	.split,
	.footer-grid{ grid-template-columns:1fr; }
	.split{ gap:30px; }
	.info-grid{ grid-template-columns:1fr 1fr; }
	.info-item:nth-child(2){ border-right:0; }
	.info-item:nth-child(-n+2){ border-bottom:1px solid var(--line); }
	.steps,
	.course-grid{ grid-template-columns:1fr 1fr; }
}

@media(max-width:820px){
	.wrap{ width:calc(100% - 40px); }

	[id]{ scroll-margin-top:84px; }

	/* 상단 메뉴 → 삼선 버튼 + 오른쪽 패널
	   backdrop-filter 가 있으면 자식의 position:fixed 가 헤더 상자를 기준으로 잡혀
	   패널과 딤이 헤더 높이에 갇힌다. 모바일에서는 끈다. */
	.TopHeader{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--cream); }
	.TopHeader .wrap.nav{ min-height:64px; gap:14px; }
	.TopHeader .logo{ font-size:28px; }
	.TopHeader .mobile-menu-btn{ display:inline-flex; align-items:center; justify-content:center; }
	.TopHeader .mobile-dim{ display:block; }
	.TopHeader.is-mobile-open .mobile-dim{ opacity:1; pointer-events:auto; }

	.TopHeader .menu{
		position:fixed;
		top:0;
		right:0;
		bottom:0;
		z-index:1001;
		width:min(84vw,340px);
		height:100dvh;
		padding:88px 22px 28px;
		flex-direction:column;
		align-items:stretch;
		gap:10px;
		background:var(--cream);
		border-left:1px solid rgba(0,19,48,.08);
		box-shadow:-24px 0 60px rgba(0,19,48,.18);
		transform:translateX(105%);
		/* 닫힌 패널은 보이지 않을 뿐 아니라 Tab·스크린리더에도 잡히지 않게 (visibility) */
		visibility:hidden;
		transition:transform .32s cubic-bezier(.22,.8,.22,1),visibility 0s .32s;
		overflow-y:auto;
	}
	.TopHeader.is-mobile-open .menu{
		transform:translateX(0);
		visibility:visible;
		transition:transform .32s cubic-bezier(.22,.8,.22,1),visibility 0s 0s;
	}

	.TopHeader .menu::before{
		content:"MENU";
		display:block;
		margin:0 0 12px;
		color:var(--teal);
		font-size:13px;
		font-weight:950;
		letter-spacing:.24em;
	}

	.TopHeader .menu a,
	.TopHeader .nav-cta{
		width:100%;
		min-height:54px;
		padding:0 18px;
		justify-content:flex-start;
		border-radius:18px;
		background:#fff;
		border-color:rgba(0,19,48,.08);
		font-size:17px;
	}
	.TopHeader .nav-cta,
	.TopHeader .menu a.nav-cta{ margin:14px 0 0; background:var(--navy); border-color:var(--navy); color:#fff; }
	.TopHeader .nav-cta-quiet{ background:#fff; color:var(--navy); }
	.TopHeader .menu-logout{ width:100%; }

	.hero{ padding:82px 0 74px; }
	.hero h1{ font-size:42px; }
	.hero-copy{ font-size:17px; }
	.button-row{ flex-direction:column; }
	.button-row .button{ width:100%; }

	.section{ padding:64px 0; }
	.contact-section{ padding:44px 0; }
	/* 섹션 제목만. .lesson-copy h2(22px)·.policy h2(24px)는 같은 우선순위라 건드리면 덮어쓴다 */
	.section-heading h2,
	.split h2,
	.contact-section h2{ font-size:32px; }
	.page-hero{ padding:70px 0 48px; }

	.steps,
	.course-grid{ grid-template-columns:1fr; }
	.step{ min-height:96px; }

	.contact-box{ align-items:stretch; flex-direction:column; }

	.detail-list > div{ grid-template-columns:1fr; gap:5px; }

	.lesson-row{ grid-template-columns:48px 1fr; gap:16px; }
	.lesson-meta{ grid-column:2; justify-content:space-between; }
	.lesson-row.compact{ padding:14px 0; gap:6px 16px; }
	.lesson-meta{ flex-wrap:wrap; gap:8px 12px; }
	.progress-card{ padding:20px; }
	.progress-stats{ grid-template-columns:1fr 1fr; }
	.progress-stats strong{ font-size:22px; }
	.history-head{ display:none; }
	.history-list li{ grid-template-columns:1fr auto; gap:4px 12px; }
	.history-list time{ grid-column:1 / -1; font-size:13px; }
	.cu-summary{ padding:20px; }
	.cu-unit summary{ padding:14px 16px; align-items:flex-start; }
	.cu-unit-meta{ font-size:13px; }
	.cu-lessons{ padding:0 16px 10px; }
	.cu-lessons li{ grid-template-columns:44px 1fr auto; gap:8px; font-size:14px; }
	.course-grid.single{ grid-template-columns:1fr; }
	/* 반환기준 표 → 칸별 카드로 쌓기 (가로 스크롤 없이) */
	.refund-table-wrap{ overflow:visible; }
	.refund-table{ min-width:0; font-size:14px; background:transparent; }
	.refund-table thead{ display:none; }
	.refund-table,.refund-table tbody,.refund-table tr,.refund-table th,.refund-table td{ display:block; width:100%; }
	.refund-table tbody th{ margin-top:14px; border-radius:12px 12px 0 0; background:var(--navy); color:#fff; white-space:normal; }
	.refund-table tbody th small{ color:#D6D3D1; }
	.refund-table tbody th br{ display:none; }
	.refund-table tbody th small::before{ content:" · "; }
	.refund-table td{ background:#fff; border-top:0; }
	.refund-table td::before{ content:attr(data-label); display:block; margin-bottom:2px; color:var(--muted); font-size:12px; font-weight:800; }
	.refund-table caption{ display:block; width:100%; }
	.refund-table tbody tr:not(.group-start) td:first-child{ margin-top:6px; border-top:1px solid var(--line); }
	.lesson-detail{ grid-template-columns:1fr; gap:20px; }
	.lesson-page{ padding-top:36px; }
	.video-frame{ border-radius:12px; }

	.login-box{ padding:28px 22px; }

	.floating{ right:16px; bottom:16px; }
	.kakao{ padding:12px 16px; font-size:14px; }
}

@media(prefers-reduced-motion:reduce){
	html{ scroll-behavior:auto; }
	.TopHeader .menu,
	.TopHeader .mobile-dim,
	.TopHeader .mobile-menu-btn span{ transition:none; }
	.cover-play{ transition:none; }
}