/* ============================================================
   클래스 랜딩(소개) — 1a 사이드카드형
   전부 .oclz 하위로 스코프. 토큰은 핸드오프 디자인값(scoped 변수).
   ============================================================ */

/* ── GP 컨테이너 해제 (풀블리드) — single-class 문서 스코프 ── */
body.single-class { background: #fff; overflow-x: clip; }
body.single-class #page.grid-container { max-width: 100%; }
body.single-class #content.site-content {
	max-width: 100%;
	padding: 0;
	background: #fff;
}
body.single-class .site-content > .oclz { flex: 1 1 auto; min-width: 0; width: 100%; }

.oclz {
	width: 100%;
	min-width: 0;
	--cl-green: #1E875A;
	--cl-green-h: #15613F;
	--cl-bright: #2ED47A;
	--cl-bright-h: #4BE08E;
	--cl-tint: #EAF5EF;
	--cl-tint-b: #CFE8DB;
	--cl-dark: #0D1712;
	--cl-ink: #1D1D1F;
	--cl-ink2: #3A3A3C;
	--cl-ink3: #3A463E;
	--cl-sub: #6E6E73;
	--cl-mut: #A6ADA7;
	--cl-line: #E8E8E6;
	--cl-line2: #F0F0EE;
	--cl-line3: #ECECEA;
	--cl-surf: #F7F7F5;
	--cl-surf2: #FAFAF8;
	--cl-page: #F5F5F7;
	--cl-radius: 18px;
	--cl-radius2: 16px;
	--cl-radius3: 14px;
	--cl-btn-r: 12px;
	--cl-wrap: 1240px;

	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--cl-ink);
	-webkit-font-smoothing: antialiased;
}
.oclz * { box-sizing: border-box; }
.oclz b { font-weight: 700; }
.oclz .oclz-wrap { max-width: var(--cl-wrap); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.oclz [style*="tabular"], .oclz .oclz-statcard-v, .oclz .oclz-students b,
.oclz .oclz-ch-meta, .oclz .oclz-ls-no, .oclz .oclz-ls-time, .oclz .oclz-price { font-variant-numeric: tabular-nums; }

/* ── SHELL: 풀블리드 그리드(히어로+바디 공유 · 신청카드는 두 행 스팬 → 히어로 상단부터 시작) ── */
.oclz-shell {
	display: grid;
	grid-template-columns:
		[full-start] minmax(28px, 1fr)
		[c1] minmax(0, 804px)
		[c2] 52px
		[c3] 384px
		[c4] minmax(28px, 1fr) [full-end];
	align-items: start;
}
.oclz-herobg, .oclz-bodybg { z-index: 0; grid-column: full-start / full-end; align-self: stretch; min-height: 100%; }
.oclz-herobg {
	grid-row: 1;
	background:
		radial-gradient(90% 82% at 12% 4%, #1B2E23, transparent 58%),
		radial-gradient(90% 82% at 88% 4%, #143024, transparent 58%),
		#0D1712;
}
.oclz-bodybg { grid-row: 2 / 4; background: var(--cl-page); }
.oclz-hero-copy { grid-column: c1 / c2; grid-row: 1; z-index: 1; padding: 56px 0 60px; }
.oclz-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.oclz-badge { font-size: 11.5px; font-weight: 700; border-radius: 7px; padding: 4px 10px; border: 1px solid transparent; }
.oclz-badge--level { color: #E8EDE9; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); }
.oclz-badge--price { color: #7BE3AC; background: rgba(46,212,122,.14); border-color: rgba(46,212,122,.28); }
.oclz-badge--best  { color: #F4C07E; background: rgba(240,160,60,.14); border-color: rgba(240,160,60,.3); }
.oclz-h1 { margin: 20px 0 0; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.16; color: #fff; }
.oclz-tagline { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
.oclz-herometa { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-size: 13.5px; color: rgba(255,255,255,.66); flex-wrap: wrap; }
.oclz-inst-mini { display: flex; align-items: center; gap: 8px; }
.oclz-inst-mini img, .oclz-inst-mono { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.oclz-inst-mono { background: var(--cl-green); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.oclz-inst-mini b { color: rgba(255,255,255,.85); font-weight: 600; }
.oclz-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); }
.oclz-students { display: flex; align-items: center; gap: 7px; }
.oclz-students b { color: rgba(255,255,255,.92); }
.oclz-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-bright); flex: none; }
/* "지금 클래스에서" 활동 티커 — 전광판(위→아래 슬라이드) */
.oclz-activity { margin-top: 18px; max-width: 650px; display: flex; align-items: center; gap: 12px; }
.oclz-act-live { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.55); white-space: nowrap; }
.oclz-act-live .oclz-live-dot { box-shadow: 0 0 6px 1px rgba(46,212,122,.75); animation: oclz-live-pulse 1.8s ease-out infinite; }
@keyframes oclz-live-pulse {
	0%   { box-shadow: 0 0 6px 1px rgba(46,212,122,.75), 0 0 0 0 rgba(46,212,122,.55); }
	70%  { box-shadow: 0 0 6px 1px rgba(46,212,122,.55), 0 0 0 7px rgba(46,212,122,0); }
	100% { box-shadow: 0 0 6px 1px rgba(46,212,122,.55), 0 0 0 0 rgba(46,212,122,0); }
}
.oclz-act-track { position: relative; flex: 1 1 auto; min-width: 0; height: 3.1em; overflow: hidden; }
.oclz-act-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 9px; opacity: 0; transform: translateY(100%); transition: opacity 0.3s ease, transform 0.55s cubic-bezier(.22,.61,.36,1); pointer-events: none; }
.oclz-act-item.is-active { opacity: 1; transform: translateY(0); }
.oclz-act-item.is-leaving { opacity: 0; transform: translateY(-100%); }
.oclz-act-av { position: relative; width: 24px; height: 24px; border-radius: 50%; flex: none; overflow: hidden; background: var(--cl-green); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.oclz-act-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.oclz-act-msg { min-width: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oclz-act-msg b { color: rgba(255,255,255,.92); font-weight: 600; }
.oclz-hashtags { margin-top: 13px; font-size: 12.5px; color: rgba(255,255,255,.42); display: flex; gap: 14px; flex-wrap: wrap; }
.oclz-hero-divider { max-width: 560px; height: 1px; background: rgba(255,255,255,.11); margin: 26px 0 22px; }
.oclz-statcards { display: flex; gap: 42px; max-width: 560px; flex-wrap: wrap; }
.oclz-statcard { display: flex; align-items: center; gap: 11px; }
.oclz-statcard-ic { flex: none; color: rgba(255,255,255,.5); display: inline-flex; }
.oclz-statcard-txt { min-width: 0; }
.oclz-statcard-v { font-size: 19px; font-weight: 700; color: #fff; line-height: 1.15; }
.oclz-statcard-l { margin-top: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.5); }

/* ── 본문 · 신청 카드(그리드 배치) ── */
.oclz-main { grid-column: c1 / c2; grid-row: 2; z-index: 1; min-width: 0; padding: 56px 0 72px; display: flex; flex-direction: column; gap: 56px; }
/* 그리드 아이템은 정적(영역=row 1~2)으로 두고, 자식 카드를 sticky → 경계가 그리드 트랙(oclz-bottom 직전)으로 제한됨 */
.oclz-side { grid-column: c3 / c4; grid-row: 1 / 3; z-index: 2; align-self: stretch; margin-top: 40px; }
/* FAQ + 최종 CTA — 두 컬럼 아래 풀폭(row 3). sticky 사이드는 row 2 끝에서 멈춤 */
.oclz-bottom { grid-column: c1 / c4; grid-row: 3; z-index: 1; min-width: 0; width: 100%; max-width: 950px; margin: 0 auto; padding: 0 0 72px; display: flex; flex-direction: column; gap: 56px; }

/* ── 섹션 공통 ── */
.oclz-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--cl-green); margin-bottom: 9px; }
.oclz-h2 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--cl-ink); }
.oclz-sec > .oclz-h2 { margin-bottom: 20px; }
.oclz-h2row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.oclz-h2row .oclz-h2 { margin: 0; }
.oclz-h2note { font-size: 13px; color: #86868B; }
.oclz-h2note b { color: var(--cl-green); font-weight: 600; }
.oclz-card { background: #fff; border: 1px solid var(--cl-line); border-radius: var(--cl-radius2); overflow: hidden; }

/* 얻는 것 */
.oclz-learn-row { display: flex; gap: 14px; align-items: flex-start; padding: 19px 22px; }
.oclz-learn-row + .oclz-learn-row { border-top: 1px solid var(--cl-line2); }
.oclz-learn-ic { width: 26px; height: 26px; border-radius: 50%; background: #EAF4EE; color: var(--cl-green); display: grid; place-items: center; flex: none; }
.oclz-learn-t { font-size: 15px; line-height: 1.62; color: var(--cl-ink3); }

/* 추천 */
.oclz-reco { padding: 24px 26px; display: flex; flex-direction: column; gap: 15px; }
.oclz-reco-row { display: flex; gap: 14px; align-items: center; font-size: 15px; line-height: 1.55; color: var(--cl-ink3); }
.oclz-reco-no {
	flex: none; width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center;
	font-size: 13px; font-weight: 800; color: #fff;
	font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--cl-green), var(--cl-green-h));
}
.oclz-reco-t { flex: 1; min-width: 0; }

/* 리치에디터(wysiwyg) 항목 공통 — p 여백 리셋·강조·링크 */
.oclz-rte :first-child { margin-top: 0; }
.oclz-rte :last-child { margin-bottom: 0; }
.oclz-rte p { margin: 0 0 8px; }
.oclz-rte b, .oclz-rte strong { color: var(--cl-ink); font-weight: 700; }
/* 학습 목표 · 추천 대상 · 강좌 소개 블록 — 굵은 글씨 자동 초록 형광펜 */
.oclz-learn-t.oclz-rte b, .oclz-learn-t.oclz-rte strong,
.oclz-reco-t.oclz-rte b, .oclz-reco-t.oclz-rte strong,
.oclz-introblk-sub.oclz-rte b, .oclz-introblk-sub.oclz-rte strong,
.oclz-introblk-body.oclz-rte b, .oclz-introblk-body.oclz-rte strong {
	color: var(--cl-ink); font-weight: 700;
	background: linear-gradient(to top, rgb(53 161 102 / 19%) 38%, transparent 38%);
	padding: 0 2px; border-radius: 2px;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.oclz-rte a { color: var(--cl-green); text-decoration: underline; }
.oclz-rte ul, .oclz-rte ol { margin: 6px 0; padding-left: 20px; }
.oclz-rte li { margin: 2px 0; }

/* 소개 + 교재 */
.oclz-intro { background: none; border: 0; border-radius: 0; overflow: visible; padding: 0; }
/* 강좌 소개 블록 (반복) — 타이틀 / 부제목(강조) / 본문 */
.oclz-introblk + .oclz-introblk { margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--cl-line2); }
.oclz-introblk-title { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.36; color: var(--cl-ink); }
.oclz-introblk-sub { margin-top: 18px; padding: 3px 0 3px 18px; border-left: 3px solid var(--cl-green); font-size: 16px; line-height: 1.65; font-weight: 500; color: var(--cl-ink2); }
.oclz-introblk-body { margin-top: 20px; font-size: 15px; line-height: 1.78; color: var(--cl-ink3); }
.oclz-introblk-sub :first-child, .oclz-introblk-body :first-child { margin-top: 0; }
.oclz-introblk-sub :last-child, .oclz-introblk-body :last-child { margin-bottom: 0; }
.oclz-introblk-body p { margin: 0 0 12px; }
.oclz-introblk-body img, .oclz-rte img, .oclz-wysiwyg img { max-width: 100%; height: auto; border-radius: var(--cl-radius2); }
.wp-caption { max-width: 100%; }
.wp-caption .wp-caption-text { font-size: 90%; }
.oclz-wysiwyg { font-size: 15px; line-height: 1.7; color: var(--cl-ink3); }
.oclz-wysiwyg :first-child { margin-top: 0; }
.oclz-wysiwyg :last-child { margin-bottom: 0; }
.oclz-wysiwyg b, .oclz-wysiwyg strong { color: var(--cl-ink); }
.oclz-textbook { background: var(--cl-surf2); border: 1px solid var(--cl-line); border-radius: var(--cl-btn-r); padding: 16px 18px; display: flex; gap: 16px; align-items: center; }
.oclz-tb-img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; }
.oclz-tb-body { flex: 1; min-width: 0; }
.oclz-tb-title { font-size: 14px; font-weight: 700; color: var(--cl-ink); }
.oclz-tb-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: #86868B; }
.oclz-tb-link { font-size: 13px; font-weight: 600; color: var(--cl-green); white-space: nowrap; text-decoration: none; }

/* 커리큘럼 */
.oclz-curric { display: flex; flex-direction: column; gap: 10px; }
.oclz-ch { border: 1px solid var(--cl-line); border-radius: var(--cl-radius3); background: #fff; overflow: hidden; }
.oclz-ch-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 18px; background: transparent; border: none; cursor: pointer; text-align: left; font: inherit; }
.oclz-ch-head:hover { background: var(--cl-surf2); }
.oclz-ch-no { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--cl-green); background: var(--cl-tint); border-radius: 6px; padding: 4px 8px; }
.oclz-ch-title { font-size: 14.5px; font-weight: 700; color: var(--cl-ink); min-width: 0; }
.oclz-pv-badge { flex: none; font-size: 10.5px; font-weight: 700; color: var(--cl-green); border: 1px solid var(--cl-tint-b); background: #F4FAF6; border-radius: 5px; padding: 2px 7px; }
.oclz-ch-meta { margin-left: auto; font-size: 12.5px; color: var(--cl-mut); }
.oclz-chev { flex: none; color: var(--cl-mut); transition: transform .18s; }
.oclz-ch.is-open > .oclz-ch-head .oclz-chev { transform: rotate(180deg); }
.oclz-ch-body { display: none; border-top: 1px solid var(--cl-line2); }
.oclz-ch.is-open > .oclz-ch-body { display: block; }
.oclz-ls { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--cl-surf); text-decoration: none; }
.oclz-ls:last-child { border-bottom: none; }
a.oclz-ls:hover { background: var(--cl-surf2); }
.oclz-ls-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px solid #DCDFDB; color: #B0B5AF; }
.oclz-ls.is-open .oclz-ls-ic { background: var(--cl-green); border-color: var(--cl-green); color: #fff; }
.oclz-ls-no { flex: none; width: 30px; font-size: 11.5px; color: var(--cl-mut); }
.oclz-ls-t { flex: 1; min-width: 0; font-size: 13.5px; color: var(--cl-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oclz-pv-inline { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--cl-green); border: 1px solid var(--cl-tint-b); background: #F4FAF6; border-radius: 5px; padding: 1.5px 6px; white-space: nowrap; }
.oclz-ls-time { flex: none; font-size: 11.5px; color: #C2C7C1; }

/* 완주 혜택 */
.oclz-perks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
.oclz-perk-ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; overflow: hidden; }
.oclz-perk-ic--badge { border-radius: 50%; background: #EDF4EF; border: 1.5px solid var(--cl-tint-b); color: var(--cl-green); }
.oclz-perk-ic--cert { background: var(--cl-surf); }
.oclz-perk-ic--extra { background: #EDF4EF; }
.oclz-perk-ic--extra img { width: 100%; height: 100%; object-fit: cover; }
.oclz-perk-t { margin-top: 13px; font-size: 14.5px; font-weight: 700; color: var(--cl-ink); }
.oclz-perk-d { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: #86868B; }

/* FAQ */
.oclz-faq-controls { display: flex; flex: none; }
.oclz-faq-ctl { font: inherit; font-size: 13px; font-weight: 600; color: var(--cl-green); background: none; border: none; border-radius: 0; padding: 4px 2px; cursor: pointer; transition: color var(--transition-fast); white-space: nowrap; }
.oclz-faq-ctl:hover { color: var(--cl-green-h); text-decoration: underline; }
.oclz-faq-item { border-bottom: 1px solid var(--cl-line3); }
.oclz-faq-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 17px 2px; background: transparent; border: none; cursor: pointer; text-align: left; font: inherit; }
.oclz-faq-q > span { flex: 1; font-size: 16.5px; font-weight: 600; color: var(--cl-ink); }
.oclz-faq-q:hover { background: var(--cl-surf2); }
.oclz-faq-item.is-open .oclz-faq-q .oclz-chev { transform: rotate(180deg); }
.oclz-faq-a { display: none; }
.oclz-faq-item.is-open .oclz-faq-a { display: block; }
.oclz-faq-a p { margin: 0; padding: 0 2px 18px; font-size: 15.5px; line-height: 1.65; color: var(--cl-sub); }

/* 최종 CTA */
.oclz-finalcta { margin-top: 8px; text-align: center; }
.oclz-finalcta-t { font-size: 25px; font-weight: 800; letter-spacing: -0.025em; color: var(--cl-ink); }
.oclz-finalcta-sub { margin-top: 10px; font-size: 14.5px; color: #86868B; }
.oclz-finalcta .oclz-btn { margin-top: 24px; }
.oclz-finalcta-micro { margin-top: 12px; font-size: 12.5px; color: var(--cl-mut); }

/* ── 버튼 ── */
.oclz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--cl-btn-r); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: background-color .15s ease; }
.oclz-btn--dark { background: var(--cl-ink); color: #fff; padding: 15px; font-size: 15px; }
.oclz-btn--dark:hover { background: #2E2E30; color: #fff; }
.oclz-btn--lg { padding: 15px 36px; }
.oclz-btn--outline { background: #fff; color: var(--cl-ink); border: 1px solid #DEDEDE; padding: 12px; font-size: 14px; font-weight: 600; }
.oclz-btn--outline:hover { background: var(--cl-surf); color: var(--cl-ink); }
.oclz-btn--green { background: var(--cl-green); color: #fff; padding: 16px; font-size: 15.5px; }
.oclz-btn--green:hover { background: var(--cl-green-h); color: #fff; }
.oclz-btn.is-loading { opacity: .6; pointer-events: none; }

/* ── 신청 완료 확인 페이지 (게이팅 체크리스트 · Deep Jade #059669) ── */
.oclz-ob {
	--j: #059669; --j-h: #047857; --j-deep: #0E5A37; --j-chip: #E7F4EE;
	--ob-ink: #111110; --ob-body: #45453F; --ob-sub: #7C7F7A; --ob-mut: #8A8A85; --ob-page: #F7F8F5;
	position: relative; background: var(--ob-page); padding: 0 0 84px; min-height: 60vh;
}
.oclz-ob-wash { position: absolute; left: 0; right: 0; top: 0; height: 380px; background: radial-gradient(92% 100% at 50% -24%, rgba(5,150,105,.13), transparent 60%); pointer-events: none; }
.oclz-ob-shell { position: relative; max-width: 600px; margin: 0 auto; padding: 60px 24px 0; }
/* 완료 헤더 + 뾰로롱·뿅 */
.oclz-ob-head { position: relative; text-align: center; }
.oclz-ob-check { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--j); color: #fff; box-shadow: 0 14px 34px rgba(5,150,105,.32); animation: obPop .55s cubic-bezier(.34,1.5,.5,1) both; }
.oclz-ob-check svg { width: 32px; height: 32px; }
.oclz-ob-check::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--j); opacity: 0; animation: obRing 1s ease-out .05s both; }
.oclz-ob-spark { position: absolute; left: 50%; top: 38px; width: 0; height: 0; z-index: 0; pointer-events: none; }
.oclz-ob-spark i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; opacity: 0; transform: translate(-50%,-50%); animation: obSpark 1s ease-out forwards; }
.oclz-ob-title { margin: 22px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--ob-ink); animation: obRise .5s ease .1s both; }
.oclz-ob-sub { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ob-body); animation: obRise .5s ease .18s both; }
@keyframes obPop { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
@keyframes obRing { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes obRise { 0% { transform: translateY(9px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes obSpark { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(0); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); } }
@keyframes obCtaPop { 0% { transform: scale(.96); } 55% { transform: scale(1.03); } 100% { transform: scale(1); } }
/* 코스 카드 — 정보 전용 */
.oclz-ob-card { margin-top: 34px; display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(17,17,17,.06), 0 10px 30px rgba(17,17,17,.06); padding: 16px; animation: obRise .5s ease .26s both; }
.oclz-ob-thumb { flex: none; width: 116px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #0F1A13; }
.oclz-ob-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oclz-ob-cardinfo { min-width: 0; text-align: left; }
.oclz-ob-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--j); }
.oclz-ob-name { margin-top: 5px; font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--ob-ink); }
.oclz-ob-meta { margin-top: 5px; font-size: 12.5px; color: var(--ob-mut); }
/* 진행 헤더 */
.oclz-ob-prog { margin-top: 42px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.oclz-ob-prog-l { font-size: 15px; font-weight: 800; color: var(--ob-ink); }
.oclz-ob-prog-c { font-size: 13px; font-weight: 700; color: var(--j); font-variant-numeric: tabular-nums; }
/* 열린 체크리스트 */
.oclz-ob-list { margin-top: 16px; }
.oclz-ob-item { display: flex; gap: 16px; }
.oclz-ob-rail { flex: none; display: flex; flex-direction: column; align-items: center; }
.oclz-ob-num { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #EFF1EE; color: #AAB0AA; font-size: 16px; font-weight: 800; transition: background-color .25s ease, box-shadow .25s ease; }
.oclz-ob-num-n { transition: opacity .2s ease; }
.oclz-ob-num-ck { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity .2s ease; }
.oclz-ob-num-ck svg { width: 22px; height: 22px; }
.oclz-ob-line { flex: 1 0 auto; width: 2px; min-height: 22px; background: #E3E5E2; margin: 4px 0; transition: background-color .25s ease; }
.oclz-ob-ibody { flex: 1; min-width: 0; padding-bottom: 26px; }
.oclz-ob-it { padding-top: 11px; font-size: 16px; font-weight: 700; color: var(--ob-ink); }
.oclz-ob-id { margin-top: 5px; font-size: 13.5px; line-height: 1.6; color: var(--ob-sub); }
.oclz-ob-iact { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oclz-ob-act { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #E6E7E2; color: var(--ob-ink); font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background-color .15s ease; }
.oclz-ob-act:hover { background: #F6F7F4; color: var(--ob-ink); }
.oclz-ob-act-ic { display: inline-flex; color: #2F6E52; }
.oclz-ob-act-ic svg { width: 17px; height: 17px; }
.oclz-ob-chip { display: none; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 9px; background: var(--j-chip); color: var(--j-deep); font-size: 13px; font-weight: 700; }
.oclz-ob-chip svg { width: 15px; height: 15px; }
.oclz-ob-item.is-done .oclz-ob-num { background: var(--j); box-shadow: 0 6px 16px rgba(5,150,105,.3); }
.oclz-ob-item.is-done .oclz-ob-num-n { opacity: 0; }
.oclz-ob-item.is-done .oclz-ob-num-ck { opacity: 1; }
.oclz-ob-item.is-done .oclz-ob-line { background: var(--j); }
.oclz-ob-item.is-done .oclz-ob-act { display: none; }
.oclz-ob-item.is-done .oclz-ob-chip { display: inline-flex; }
/* 게이트 CTA */
.oclz-ob-gate { margin-top: 8px; }
.oclz-ob-gate-lock { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 12px; background: #EAEBE7; padding: 0 18px; }
.oclz-ob-lockic { width: 18px; height: 18px; flex: none; color: #A2A6A1; }
.oclz-ob-gate-t { font-size: 15px; font-weight: 700; color: #7C7F7A; }
.oclz-ob-gate-note { font-size: 12.5px; font-weight: 600; color: #A2A6A1; }
.oclz-ob-gate-note b { color: #7C7F7A; }
.oclz-ob-gate-go { display: none; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 12px; background: var(--j); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 26px rgba(5,150,105,.3); transition: background-color .15s ease; }
.oclz-ob-gate-go:hover { background: var(--j-h); color: #fff; }
.oclz-ob-gate.is-open .oclz-ob-gate-lock { display: none; }
.oclz-ob-gate.is-open .oclz-ob-gate-go { display: flex; }
.oclz-ob-gate.is-pop .oclz-ob-gate-go { animation: obCtaPop .5s ease; }
.oclz-ob-go-arrow { transition: transform .2s ease; }
.oclz-ob-gate-go:hover .oclz-ob-go-arrow { transform: translateX(3px); }
.oclz-ob-foot { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--ob-mut); }
.oclz-ob-foot b { color: var(--ob-sub); }
@media (max-width: 600px) {
	.oclz-ob-shell { padding: 44px 18px 0; }
	.oclz-ob-title { font-size: 26px; }
	.oclz-ob-num { width: 42px; height: 42px; font-size: 15px; }
	.oclz-ob-card { flex-direction: column; align-items: flex-start; }
	.oclz-ob-thumb { width: 100%; }
	.oclz-ob-gate-lock { flex-wrap: wrap; height: auto; padding: 14px 16px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.oclz-ob-check, .oclz-ob-check::after, .oclz-ob-title, .oclz-ob-sub, .oclz-ob-card, .oclz-ob-spark i, .oclz-ob-gate.is-pop .oclz-ob-gate-go { animation: none !important; }
	.oclz-ob-check, .oclz-ob-title, .oclz-ob-sub, .oclz-ob-card { transform: none; opacity: 1; }
	.oclz-ob-spark { display: none; }
}

/* ── 신청 카드 ── */
.oclz-applycard { position: sticky; top: 80px; background: #fff; border: 1px solid var(--cl-line); border-radius: var(--cl-radius); overflow: hidden; box-shadow: 0 18px 44px rgba(8,18,12,.18); }
.oclz-applycard-thumb { position: relative; aspect-ratio: 16/9; background: #0F1A13; }
.oclz-applycard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oclz-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border: none; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--cl-ink); box-shadow: 0 8px 24px rgba(0,0,0,.3); display: grid; place-items: center; transition: transform .15s ease, background-color .15s ease; }
.oclz-play:hover { background: #fff; transform: scale(1.06); }
.oclz-thumb-badge { position: absolute; left: 12px; top: 12px; background: rgba(10,18,13,.62); color: #fff; font-size: 11px; font-weight: 600; border-radius: 7px; padding: 5px 9px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oclz-applycard-body { padding: 22px 22px 20px; }
.oclz-price-row { display: flex; align-items: baseline; gap: 9px; }
.oclz-price { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--cl-ink); }
.oclz-price-cap { font-size: 12.5px; color: var(--cl-mut); }
.oclz-cta-main { width: 100%; margin-top: 15px; }
.oclz-applycard-body .oclz-btn--outline { width: 100%; margin-top: 8px; }
.oclz-cta-micro { margin-top: 11px; text-align: center; font-size: 12px; color: var(--cl-mut); }
.oclz-hr { height: 1px; background: var(--cl-line2); margin: 18px 0 16px; }
.oclz-provide-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #86868B; margin-bottom: 12px; }
.oclz-provide { display: flex; flex-direction: column; gap: 10px; }
.oclz-provide-row { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--cl-ink3); }
.oclz-provide-ic { color: var(--cl-green); flex: none; margin-top: 2px; }
.oclz-applycard-foot { text-align: center; font-size: 12px; color: var(--cl-mut); }

/* 강사 미니 카드 (신청 카드 아래) */
.oclz-instcard { margin-top: 14px; background: var(--cl-surf); border-radius: var(--cl-radius2); padding: 18px 20px; display: flex; align-items: center; gap: 12px; }
.oclz-instcard-av { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.oclz-instcard-av--mono { background: var(--cl-green); color: #fff; font-size: 15px; font-weight: 800; display: grid; place-items: center; }
.oclz-instcard-body { min-width: 0; }
.oclz-instcard-name { font-size: 13.5px; font-weight: 700; color: var(--cl-ink); }

/* 미리보기 영상 모달 */
.oclz-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; }
.oclz-modal[hidden] { display: none; }
.oclz-modal-backdrop { position: absolute; inset: 0; background: rgba(6,12,8,.82); }
.oclz-modal-box { position: relative; width: 100%; max-width: 960px; }
.oclz-modal-video { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.oclz-modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.oclz-modal-close { position: absolute; top: -42px; right: 0; width: 34px; height: 34px; border: none; background: transparent; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; opacity: .85; }
.oclz-modal-close:hover { opacity: 1; }

/* ── 반응형 ── */
@media (max-width: 980px) {
	.oclz-shell { grid-template-columns: 1fr; }
	.oclz-herobg { grid-column: 1; grid-row: 1; }
	.oclz-hero-copy { grid-column: 1; grid-row: 1; padding: 36px 20px; }
	.oclz-side { grid-column: 1; grid-row: 2; position: static; align-self: stretch; margin: 0; padding: 16px 20px 0; }
	.oclz-bodybg { grid-column: 1; grid-row: 2 / 5; }
	.oclz-main { grid-column: 1; grid-row: 3; padding: 24px 20px 40px; }
	.oclz-bottom { grid-column: 1; grid-row: 4; padding: 0 20px 40px; }
	.oclz-applycard { position: static; box-shadow: 0 8px 24px rgba(8,18,12,.1); }
}
@media (max-width: 640px) {
	.oclz-hero-copy { padding: 28px 20px; }
	.oclz-h1 { font-size: 30px; }
	.oclz-tagline { font-size: 15px; }
	.oclz-statcards { grid-template-columns: 1fr 1fr 1fr; gap: 8px; max-width: none; }
	.oclz-statcard { padding: 12px 12px; }
	.oclz-statcard-v { font-size: 16px; }
	.oclz-perks { grid-template-columns: 1fr; gap: 20px; }
	.oclz-applycard-thumb { display: none; }
}