/* THE PLAN 하위 페이지 — 홈(OD-10 합격)의 SBS 톤으로 통일 (원장 OD-15, 2026-09-30)
 *
 * 옛 스타일(style.css · reference-shell.css) 위에 얹는 디자인 층이다. 문구·데이터·사실 표기는
 * 건드리지 않고 모양만 바꾼다. 기준은 홈과 같다:
 *   본문 1200 · 섹션 대제목 크고 굵게 · 간격 4의 배수 · 모서리 6px · 브랜드 남색 + 노랑 강조
 * 스킬 human-art-direction 규칙: 그라데이션·유리 효과·영문 장식 라벨·알약 버튼 반복·
 * 같은 테두리 카드 반복·장식 그림자 없음. 색은 공통 셸의 --sb- 변수만 쓴다.
 */

/* 하위 페이지 전용 색 토큰 — 셸(--sb-*)에 없는 '어두운 띠 위 글자·면' 단계만. 규칙 안에 색을 직접 적지 않는다(design-eng-gate) */
:root {
  --sp-paper: #fff;
  --sp-ink-press: #000;
  --sp-accent-hover: #ffe066;
  --sp-on-dark: #fff;
  --sp-on-dark-2: #e3e7f2;
  --sp-on-dark-3: #cdd3e6;
  --sp-on-dark-line: rgba(255, 255, 255, .5);
  --sp-on-dark-fill: rgba(255, 255, 255, .12);
  --sp-on-dark-fill-2: rgba(255, 255, 255, .06);
}

/* ── 바탕 ───────────────────────────────────────────── */
body:not(.hp) { color: var(--sb-ink); letter-spacing: -0.01em; word-break: keep-all; -webkit-font-smoothing: antialiased; }
body:not(.hp) main { font-size: 16px; line-height: 1.7; }
/* 문단 색을 한꺼번에 바꾸지 않는다 — 어두운 띠(과정 상세 머리·안내 띠) 위 글자가 묻혔었다(스테이징 전 자체 점검). */

/* 경로 표시: 작고 조용하게 */
body:not(.hp) .breadcrumb { font-size: 13px; color: var(--sb-ink-3); padding: 24px 0 0; }
body:not(.hp) .breadcrumb a { color: var(--sb-ink-3); }
body:not(.hp) .breadcrumb [aria-current="page"] { color: var(--sb-ink); font-weight: 700; }

/* ── 제목 체계: 홈과 같은 크기 차이 ─────────────────── */
body:not(.hp) main h1 { font-size: 40px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; color: var(--sb-ink); margin: 12px 0 12px; }
body:not(.hp) main h2 { font-size: 28px; line-height: 1.3; font-weight: 800; letter-spacing: -0.025em; color: var(--sb-ink); margin: 0 0 16px; }
body:not(.hp) main h3 { font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -0.015em; color: var(--sb-ink); }
body:not(.hp) main .lead { font-size: 17px; line-height: 1.7; color: var(--sb-ink-2); max-width: 720px; }
@media (max-width: 767px) {
  body:not(.hp) main h1 { font-size: 28px; }
  body:not(.hp) main h2 { font-size: 22px; }
  body:not(.hp) main .lead { font-size: 16px; }
}

/* 제목 위 작은 파란 라벨: 장식처럼 보이지 않게 — 영문 부분은 숨김(X-2), 한국어 라벨은 회색 보조 정보로 */
body:not(.hp) .section-tag { color: var(--sb-ink-3); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 0 4px; }
body:not(.hp) .section-tag .tag-en { display: none; }

/* 분야 이름표: 파란 대문자 대신 조용한 글자 */
body:not(.hp) .cat-tag { color: var(--sb-brand); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* ── 버튼: 알약 대신 네모(모서리 6px), 주 버튼 하나만 진하게 ── */
body:not(.hp) .pill-btn,
body:not(.hp) .category-tab { border-radius: var(--sb-r-sm); border: 1px solid var(--sb-line); background: var(--sp-paper); color: var(--sb-ink); font-size: 15px; font-weight: 700; min-height: 44px; padding: 0 18px; box-shadow: none; transform: none; }
body:not(.hp) .pill-btn:hover, body:not(.hp) .category-tab:hover { background: var(--sp-paper); color: var(--sb-ink); border-color: var(--sb-ink); }
body:not(.hp) .pill-btn.primary-action { background: var(--sb-ink); border-color: var(--sb-ink); color: var(--sp-on-dark); }
body:not(.hp) .pill-btn.primary-action:hover { background: var(--sp-ink-press); border-color: var(--sp-ink-press); color: var(--sp-on-dark); }
body:not(.hp) .category-tab.active, body:not(.hp) .category-tab[aria-selected="true"] { background: var(--sb-ink); border-color: var(--sb-ink); color: var(--sp-on-dark); }

/* ── 카드: 떠 있는 상자 대신 선으로 나눈 목록 느낌 ──────── */
body:not(.hp) .course-list-card, body:not(.hp) .campus-list-card, body:not(.hp) .campus-card,
body:not(.hp) .category-card, body:not(.hp) .opening-card, body:not(.hp) .search-result-card { border: 1px solid var(--sb-line); border-radius: var(--sb-r-sm); box-shadow: none; background: var(--sp-paper); transition: border-color .15s var(--sb-ease); }
body:not(.hp) .course-list-card:hover, body:not(.hp) .campus-card:hover,
body:not(.hp) .category-card:hover, body:not(.hp) .opening-card:hover { transform: none; box-shadow: none; border-color: var(--sb-ink-4); }
body:not(.hp) .course-list-card h3 { font-size: 19px; line-height: 1.4; margin: 8px 0 6px; }
body:not(.hp) .course-list-card p { font-size: 15px; }

/* 자격증 칩: 네모 격자 대신 이름·설명이 한 줄에 읽히는 표 칸 */
body:not(.hp) .cert-chip { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; padding: 14px 4px; background: transparent; box-shadow: none; }
body:not(.hp) .cert-chip .cn { font-size: 16px; font-weight: 700; color: var(--sb-ink); }
body:not(.hp) .cert-chip .cd { font-size: 14px; color: var(--sb-ink-3); margin-top: 2px; }

/* 상태 표시: 작은 사각 표시(홈의 모집 상태와 같은 모양) */
body:not(.hp) .status-qualifier-badge { border-radius: 4px; font-size: 12px; font-weight: 700; padding: 3px 8px; }

/* 결과 없음 상자: 점선 상자 대신 조용한 안내 줄 */
body:not(.hp) .no-result-box { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; background: transparent; padding: 20px 0; color: var(--sb-ink-3); font-size: 15px; }

/* 파란 그라데이션 안내 띠 → 단색 남색 */
body:not(.hp) .cta-block { background: var(--sb-brand-deep); border-radius: var(--sb-r-sm); }
body:not(.hp) .cta-block .lead { color: var(--sp-on-dark-3); }
body:not(.hp) .cta-block .cta-btn { background: var(--sb-accent); color: var(--sb-accent-ink); border-radius: var(--sb-r-sm); }
body:not(.hp) .cta-block .cta-btn:hover { background: var(--sp-accent-hover); }

/* ── 과정 상세(course-experience): 분야별 보라·초록 대신 하나의 남색, 번호 장식은 조용히 ── */
body:not(.hp) .cx-hero { background: var(--sb-brand-deep); color: var(--sp-on-dark); }
body:not(.hp) .cx-hero h1 { color: var(--sp-on-dark); }
body:not(.hp) .cx-fam { color: var(--sp-on-dark-3); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; }
body:not(.hp) .cx-cta { border-radius: var(--sb-r-sm); min-height: 48px; font-weight: 700; }
body:not(.hp) .cx-cta--primary { background: var(--sb-accent); border-color: var(--sb-accent); color: var(--sb-accent-ink); }
body:not(.hp) .cx-hero-media { border-radius: var(--sb-r-sm); }
body:not(.hp) .cx-hero-fallback { background: var(--sp-on-dark-fill-2); }
body:not(.hp) .cx-final { background: var(--sb-brand-deep); color: var(--sp-on-dark); border-radius: var(--sb-r-sm); }
body:not(.hp) .cx-head { display: flex; align-items: baseline; gap: 12px; }
body:not(.hp) .cx-no { font-size: 14px; font-weight: 700; letter-spacing: 0; background: none; padding: 0; }
/* 분야 공통 안내(사실 표기 — 지우지 않는다): 상자 대신 작은 회색 한 줄 */
body:not(.hp) .cx-scope { background: none; border: 0; border-left: 2px solid var(--sb-line); border-radius: 0; padding: 0 0 0 12px; font-size: 13px; color: var(--sb-ink-3); }
body:not(.hp) .cx-chip { border-radius: 4px; background: var(--sb-bg-2); border: 0; color: var(--sb-ink-2); font-weight: 700; }

/* 섹션 사이 간격: 4의 배수로 넉넉하게 */
body:not(.hp) .course-section, body:not(.hp) .cx-section { padding-top: 48px; padding-bottom: 48px; }

/* ── 페이지 제목 띠(SBS 하위 페이지의 상단 제목 영역) ─────────────
   대부분의 하위 페이지가 쓰는 section.detail-hero(라벨·제목·한 줄 설명)를 연회색 띠로.
   과정 상세(.cx-hero)는 따로 남색 띠를 쓴다. */
body:not(.hp) #breadcrumb-mount .breadcrumb { padding: 16px 0 12px; }
body:not(.hp) section.detail-hero { background: var(--sb-bg-2); border-bottom: 1px solid var(--sb-line); padding: 48px 0 44px; margin: 0; }
body:not(.hp) section.detail-hero h1 { margin: 4px 0 12px; }
body:not(.hp) section.detail-hero .lead { margin: 0; }
@media (max-width: 767px) { body:not(.hp) section.detail-hero { padding: 32px 0 28px; } }
body:not(.hp) .sub-body { padding-top: 40px; }
body:not(.hp) .sub-list-title { font-size: 20px; margin: 24px 0 16px; }

/* ── 과정 카드 사진(홈과 같은 과정 사진) ───────────────────────── */
body:not(.hp) .course-list-card.has-photo { overflow: hidden; }
body:not(.hp) .course-list-card.has-photo > :not(.clc-photo) { margin-left: 20px; margin-right: 20px; }
body:not(.hp) .course-list-card .clc-photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sb-bg-2); margin: 0 0 16px; }
body:not(.hp) .course-list-card .clc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .24s var(--sb-ease); }
/* 휴대폰에서 탭하면 확대된 채 남지 않게 — 마우스가 있는 기기에서만, UI 상한 300ms 안(emil·review-animations) */
@media (hover: hover) and (pointer: fine) { body:not(.hp) .course-list-card:hover .clc-photo img { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { body:not(.hp) .course-list-card:hover .clc-photo img { transform: none; } }
body:not(.hp) .course-list-card .clc-summary { color: var(--sb-ink-3); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
body:not(.hp) .course-list-card .status-qualifier-badge { margin-left: 6px; }

/* 과정 상세 상단: 사진이 들어오면 꽉 채운다 */
body:not(.hp) .cx-hero-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 자격증 목록: 분야 이름이 제목이 되게(위계 바로잡기) ─────────── */
body:not(.hp) .cert-category-block { margin: 0 0 48px !important; }
body:not(.hp) .cert-category-block > .section-tag { font-size: 22px; font-weight: 800; color: var(--sb-ink); letter-spacing: -0.02em; margin: 0 0 4px; }
body:not(.hp) .cert-category-block > .lead { font-size: 15px; color: var(--sb-ink-3); margin: 0 0 16px !important; }

/* 어두운 띠 위 글자색은 명시한다 */
body:not(.hp) .cx-hero .cx-summary { color: var(--sp-on-dark-2); opacity: 1; }
body:not(.hp) .cx-hero .cx-status { color: var(--sb-accent); }
body:not(.hp) .cx-hero .compare-add-btn { border-color: var(--sp-on-dark-line); color: var(--sp-on-dark); background: transparent; }
body:not(.hp) .cx-final p, body:not(.hp) .cta-block p { color: var(--sp-on-dark-2); }

/* ── 자동 진단(대비·터치 크기)으로 찾은 것 바로잡기 ────────────── */
/* 경로 표시: "홈"처럼 짧은 링크도 누를 자리 44px, 구분 기호도 읽히게 */
body:not(.hp) .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
body:not(.hp) .breadcrumb .crumb-sep { color: var(--sb-ink-3); }
body:not(.hp) .cx-no { color: var(--sb-ink-3); }
/* 연회색 제목 띠 위 보조 글자(주소·날짜 등): 옛 회색은 띠 위에서 4.44 — 한 단계 진하게 */
body:not(.hp) section.detail-hero p, body:not(.hp) section.detail-hero .campus-hero-meta { color: var(--sb-ink-2) !important; }
/* 개인정보처리방침 공고·시행일자 등 작은 안내: 법정 고지는 읽혀야 한다 */
body:not(.hp) main p.muted { color: var(--sb-ink-3) !important; font-size: 13px !important; }
/* 선택 상자(개강일정 필터 등)도 누를 자리 44px */
body:not(.hp) main select { min-height: 44px; border-radius: var(--sb-r-sm); }
/* 어두운 띠 위 제목은 흰색(제목 공통 규칙이 남색 띠 위 제목을 어둡게 만들었었다 — 대비 1.24) */
body:not(.hp) .cx-final h2, body:not(.hp) .cx-final h3, body:not(.hp) .cta-block h2, body:not(.hp) .cta-block h3,
body:not(.hp) .cx-hero h2, body:not(.hp) .cx-hero h3 { color: var(--sp-on-dark); }
/* 연회색 구역 위 보조 문장 한 단계 진하게 */
body:not(.hp) .cx-section--alt p, body:not(.hp) .cx-pending, body:not(.hp) .cx-note { color: var(--sb-ink-2); }

/* 새 창 링크 아이콘 + 화면낭독기 전용 글자 */
body:not(.hp) .ext-ico { display: inline-block; vertical-align: -2px; margin-left: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ══ 과정 상세 2차 (OD-15): 상자 반복·장식 줄·번호 불일치 걷어내기 ═══════════════ */
/* 섹션 번호(01~11, 섹션마다 붙었다 안 붙었다 함)는 숨긴다 — 제목만으로 읽힌다 */
body:not(.hp) .cx-no { display: none; }
/* 제목 앞 파란 세로줄(콘텐츠 묶음 h2·비교 항목) 없애고 같은 제목 체계로 */
body:not(.hp) .course-section h2 { padding-left: 0; font-size: 28px; }
body:not(.hp) .course-section h2::before { display: none; }
@media (max-width: 767px) { body:not(.hp) .course-section h2 { font-size: 22px; } }
body:not(.hp) .selection-guide-item { border-left: 0; border-top: 1px solid var(--sb-line); padding: 16px 0 0; }
/* 실습 범위·추천 대상: 테두리 상자 대신 두 칸 목록(윗선) */
body:not(.hp) .cx-works li, body:not(.hp) .cx-personas li { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; background: transparent; padding: 16px 0; }
body:not(.hp) .cx-works li strong, body:not(.hp) .cx-personas li strong { font-size: 17px; }
body:not(.hp) .cx-works li span, body:not(.hp) .cx-personas li span { font-size: 15px; color: var(--sb-ink-2); }
/* 학습 흐름: 파란 왼쪽 줄·카드 대신 번호가 앞에 오는 순서 목록 */
body:not(.hp) .cx-flow li { border-left: 0; border-top: 2px solid var(--sb-ink); border-radius: 0; background: transparent; padding: 16px 0 0; }
body:not(.hp) .cx-flow-no { font-size: 14px; font-weight: 800; letter-spacing: 0; color: var(--sb-ink); }
body:not(.hp) .cx-flow li strong { font-size: 17px; }
body:not(.hp) .cx-flow li span:not(.cx-flow-no) { font-size: 15px; color: var(--sb-ink-2); }
/* 아직 확인 전인 섹션: 점선 상자 대신 조용한 한 줄(사실 표기는 그대로) */
body:not(.hp) .cx-pending { background: none; border: 0; border-radius: 0; padding: 0; font-size: 15px; color: var(--sb-ink-3); text-align: left; }
body:not(.hp) .no-result-box { text-align: left; }
/* 핵심 개념·FAQ: 상자 대신 윗선 목록 */
body:not(.hp) .key-concept-card { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; background: transparent; padding: 16px 0 0; }
body:not(.hp) .key-concept-card h3 { font-size: 17px; }
body:not(.hp) .key-concept-card p { font-size: 15px; color: var(--sb-ink-2); line-height: 1.7; }
body:not(.hp) .faq-item { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; }
body:not(.hp) .faq-type-badge { border-radius: 4px; }
/* 관련 과정 카드의 버튼은 한 줄에 */
body:not(.hp) .detail-cta-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* 관련 과정: 과정 목록과 같은 사진 카드, 넉넉한 3칸 */
body:not(.hp) .adjacent-course-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
/* 과정 증거 없음: 점선 상자 대신 조용한 한 줄 */
body:not(.hp) .proof-empty { border: 0; border-radius: 0; padding: 0; text-align: left; font-size: 15px; color: var(--sb-ink-3); }

/* ── 진실성 보정(OD-05·OD-15 검토) ─────────────────────────────── */
/* 분위기 사진 구역 안내 한 줄 — 홈 .sample-note 와 같은 모양 */
body:not(.hp) .sample-note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--sb-ink-3); }
/* 과정 상세 첫 화면: 실제 사진·분야 그림이 없으면 사진 칸을 비워 두지 않고 접는다(영문 분야명 장식이 남지 않게) */
body:not(.hp) .cx-hero-grid:has(> .cx-hero-media > .cx-hero-fallback) { grid-template-columns: minmax(0, 1fr); }
body:not(.hp) .cx-hero-media:has(> .cx-hero-fallback) { display: none; }

/* ── 디자인 스킬 전체 적용 1차(OD-15 · 2026-10-01) ─────────────────────────────
   impeccable critique·audit, web-design-guidelines, design-eng-gate, human-art-direction 검토 결과.
   근거와 페이지별 지적: docs/design/subpages-skill-audit/REVIEW.md */

/* 폭: 하위 본문(옛 1120)을 머리말·푸터·홈과 같은 1200 으로 — 왼쪽 선이 60px 어긋났다 */
body:not(.hp) main .wrap { max-width: calc(var(--sb-wrap) + var(--sb-gutter) * 2); padding-left: var(--sb-gutter); padding-right: var(--sb-gutter); }
/* 고정 머리말이 앵커 위치(#cx-*, #funding-*, 본문 건너뛰기)를 가리지 않게 */
html:has(body:not(.hp)) { scroll-padding-top: calc(var(--sb-header-h) + 16px); }
@media (max-width: 767px) { html:has(body:not(.hp)) { scroll-padding-top: 80px; } }
/* 긴 제목이 한 글자만 다음 줄로 넘어가지 않게 */
body:not(.hp) main h1, body:not(.hp) main h2 { text-wrap: balance; }

/* 제목 띠 위 작은 라벨은 경로 표시·제목과 같은 말을 반복한다(학습가이드 → 학습가이드 → 학습가이드). 정보인 분류(소식 상세)만 남긴다 */
body:not(.hp) section.detail-hero .section-tag:not(.is-info) { display: none; }

/* 어두운 띠 위 포커스 링: 기본 파랑은 남색 위에서 약 2.8:1 — 노랑으로 */
body:not(.hp) .cx-hero :focus-visible, body:not(.hp) .cx-final :focus-visible, body:not(.hp) .cta-block :focus-visible { outline: 3px solid var(--sb-accent); outline-offset: 2px; }
/* 휴대폰에서 16px 미만 입력칸은 누르면 화면이 확대된다(iOS) */
@media (max-width: 767px) { body:not(.hp) main select, body:not(.hp) main input, body:not(.hp) main textarea { font-size: 16px; } }

/* 주 버튼은 한 가지: 밝은 바탕 = 검정, 어두운 띠 = 노랑. 인라인 파랑·브랜드 파랑을 걷어낸다 */
body:not(.hp) .detail-cta-row .cta-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--sb-r-sm); background: var(--sb-ink); color: var(--sp-on-dark); font-weight: 700; text-decoration: none; }
body:not(.hp) .detail-cta-row .cta-btn:hover { background: var(--sp-ink-press); color: var(--sp-on-dark); }
body:not(.hp) .cds-btn { border-radius: var(--sb-r-sm); border-color: var(--sb-line); color: var(--sb-ink); font-size: 15px; }
body:not(.hp) .cds-btn--primary { background: var(--sb-ink); border-color: var(--sb-ink); color: var(--sp-on-dark); }
body:not(.hp) .cds-btn:hover { text-decoration: none; border-color: var(--sb-ink); }
body:not(.hp) .cds-btn--primary:hover { background: var(--sp-ink-press); }

/* 캠퍼스 이동은 같은 크기 상자 3개(X-1) 대신 글자 링크 줄 */

body:not(.hp) .campus-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--sb-ink); text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 5px; }
body:not(.hp) .campus-link:hover { text-decoration-color: var(--sb-ink); }
body:not(.hp) .cds-chips { gap: 4px 20px; }
body:not(.hp) .cds-chip--link a { border: 0; border-radius: 0; padding: 0; font-size: 15px; font-weight: 700; color: var(--sb-ink); text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 5px; }
body:not(.hp) .cds-chip:not(.cds-chip--link) { border-radius: 4px; }

/* 모든 카드에 똑같이 붙는 상태 표시(개설 예정 등)는 색 배지 대신 회색 메타 — 글자는 그대로 */
body:not(.hp) .status-qualifier-badge { background: var(--sb-bg-2); color: var(--sb-ink-2); }
body:not(.hp) .cx-hero .status-qualifier-badge { background: var(--sp-on-dark-fill); }

/* 과정 카드: 홈 카드처럼 테두리 없이 사진 + 글 */
body:not(.hp) .course-list-card.has-photo { border: 0; padding: 0; background: transparent; }
body:not(.hp) .course-list-card.has-photo .clc-photo { margin: 0 0 14px; }

/* 읽는 글(소식·학습 상세·개인정보): 한 줄 길이를 줄인다. 왼쪽 선은 경로 표시와 맞춘다 */
body:not(.hp) .article-wrap > * { max-width: 720px; }
body:not(.hp) .article-sec { padding: 40px 0 72px; }
body:not(.hp) .article-body { font-size: 17px; line-height: 1.85; color: var(--sb-ink); margin: 0 0 32px; }
body:not(.hp) .article-body--pre { white-space: pre-line; }
body:not(.hp) section.detail-hero .article-date { font-size: 14px; color: var(--sb-ink-3) !important; margin: 0; }
body:not(.hp) .article-source { font-size: 13px; color: var(--sb-ink-3); margin: 24px 0 0; }
body:not(.hp) .article-related { margin-top: 20px; }
body:not(.hp) .article-back { margin: 32px 0 0; font-weight: 700; }
body:not(.hp) .article-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sb-ink); }
body:not(.hp) .privacy-doc h2 { font-size: 20px; margin: 40px 0 8px; }
body:not(.hp) .privacy-doc p, body:not(.hp) .privacy-doc li { font-size: 15px; line-height: 1.85; }
body:not(.hp) .privacy-doc .privacy-intro { color: var(--sb-ink-2); }
body:not(.hp) .privacy-doc .privacy-note { font-size: 13px; color: var(--sb-ink-3); }

/* 404: 남색 띠를 빼고 일반 버튼 줄로(주 버튼 하나) */
body:not(.hp) .error-actions { margin-top: 24px; }
/* 자격증 분야 제목(h2) — 위 .cert-category-block > .section-tag 규칙이 크기를 정한다 */
body:not(.hp) h2.cert-cat-title { font-size: 22px; line-height: 1.35; }
/* 학습가이드 질문·답 */
body:not(.hp) .faq-sec { margin-top: 0; }
body:not(.hp) .faq-list { margin: 0; max-width: 820px; }
body:not(.hp) .faq-row { border-top: 1px solid var(--sb-line); padding: 18px 0; }
body:not(.hp) .faq-row dt { font-size: 17px; font-weight: 700; color: var(--sb-ink); margin: 0 0 6px; }
body:not(.hp) .faq-row dd { margin: 0; font-size: 15px; line-height: 1.8; color: var(--sb-ink-2); }
/* 학원소개·강사진 구역 제목: 작은 회색 라벨(div)이 제목 노릇을 했다 → 실제 h2, 홈 섹션 제목과 같은 크기 */
body:not(.hp) h2.sec-title { font-size: 28px; font-weight: 800; color: var(--sb-ink); letter-spacing: -0.025em; margin: 0 0 20px; }
@media (max-width: 767px) { body:not(.hp) h2.sec-title { font-size: 22px; } }
/* 소식·학습 목록 분류: 파란 알약 대신 글자 라벨(홈 소식 칸과 같은 결) */
body:not(.hp) .ed-cat { background: none; padding: 0; border-radius: 0; color: var(--sb-brand); font-size: 13px; letter-spacing: 0; }
body:not(.hp) .ed-date { color: var(--sb-ink-3); font-size: 13px; }
body:not(.hp) .ed-title { font-size: 19px; color: var(--sb-ink); }
body:not(.hp) .ed-summary { font-size: 15px; color: var(--sb-ink-2); }
/* 휴대폰 경로 표시: 긴 현재 페이지 이름(기사 제목)은 한 줄로 줄인다 */
@media (max-width: 767px) { body:not(.hp) .breadcrumb [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* 캠퍼스 이동 링크는 세로 목록 — 가로로 같은 폭 세 칸이 나란하면 카드 격자처럼 보인다(X-1) */
body:not(.hp) .campus-link-row { flex-direction: column; align-items: flex-start; gap: 0; }
body:not(.hp) .cds-chips:has(> .cds-chip--link) { flex-direction: column; align-items: flex-start; gap: 0; }
/* 학원소개 “학원 시스템 자체 개발”(홈에서 옮겨 온 증거 구역): 홈용 어두운 그라데이션 상자 대신 밝은 단색 면.
   바깥 구역 제목(h2)과 같은 말인 안쪽 라벨은 숨긴다 */
body:not(.hp) .themain-proof { background: var(--sb-bg-2); color: var(--sb-ink); border: 0; border-radius: var(--sb-r-sm); box-shadow: none; }
body:not(.hp) .themain-proof .section-tag { display: none; }
body:not(.hp) .themain-proof h2 { color: var(--sb-ink); font-size: 22px; margin: 0 0 8px; }
body:not(.hp) .themain-proof-intro { color: var(--sb-ink-2); font-size: 15px; }
body:not(.hp) .themain-proof .proof-card { background: var(--sp-paper); border: 1px solid var(--sb-line); border-radius: var(--sb-r-sm); color: var(--sb-ink); }
body:not(.hp) .themain-proof .proof-card h3, body:not(.hp) .themain-proof .proof-card p { color: var(--sb-ink); }
body:not(.hp) .themain-proof .proof-card .proof-summary, body:not(.hp) .themain-proof .proof-card .proof-value { color: var(--sb-ink-2); }
body:not(.hp) .themain-proof a, body:not(.hp) .themain-hub-link { color: var(--sb-ink); font-weight: 700; }
body:not(.hp) .themain-proof .proof-card-head h4 { color: var(--sb-ink); }
body:not(.hp) .themain-proof .proof-status--internal, body:not(.hp) .themain-proof .proof-status--prototype { background: var(--sb-bg-2); color: var(--sb-ink-2); }
body:not(.hp) .themain-proof .proof-shot { background: var(--sb-bg-2); border-bottom: 1px solid var(--sb-line); }
body:not(.hp) .themain-proof .proof-link { color: var(--sb-ink); }
/* 강사진 “대표원장이 직접 가르칩니다”: 바깥 구역 제목과 같은 말인 안쪽 라벨은 숨긴다 */
body:not(.hp) .founder-authority .section-tag { display: none; }
/* OD-17 학원소개 “학원 시스템 자체 개발” 한 구역: 소개(설명·링크) → 증거 카드. 같은 말을 반복하는 머리·라벨·허브 링크는 한 번만 */
body:not(.hp) #themain-development .themain-block { border: 0; border-radius: 0; padding: 0; margin: 0 0 24px; background: transparent; box-shadow: none; }
body:not(.hp) #themain-development .themain-block > .section-tag { display: none; }
body:not(.hp) #themain-development .themain-block h3 { font-size: 20px; margin: 0 0 8px; }
body:not(.hp) #themain-development .themain-desc { font-size: 16px; line-height: 1.8; color: var(--sb-ink-2); max-width: 720px; margin: 0 0 16px; }
body:not(.hp) #themain-development .themain-proof-head, body:not(.hp) #themain-development .themain-hub-link { display: none; }
body:not(.hp) #themain-development .themain-proof { padding: 20px; }

/* ── 과정 상세 리듬(OD-17 “계속 진행” · impeccable P1 “모든 섹션 같은 리듬”) ─────────────
   섹션 생성 코드(course-experience.js)는 검사로 고정돼 있어 구조는 그대로 두고 배치만 바꾼다.
   홈 .sec 골격과 같게: 흰/회색 띠 교대 대신 윗선 하나, PC에서는 왼쪽 제목 칸 + 오른쪽 본문.
   “확인 후 공개” 대기 안내만 있는 섹션은 작게 접어 실제 내용이 있는 섹션이 앞에 서게 한다. */
body:not(.hp) .cx-section--alt { background: transparent; }
body:not(.hp) .cx-section:not(.cx-section--cta), body:not(.hp) .content-package-section { padding-top: 0; padding-bottom: 0; }
body:not(.hp) .cx-section:not(.cx-section--cta) > .wrap, body:not(.hp) .content-package-section > .wrap { border-top: 1px solid var(--sb-line); padding-top: 40px; padding-bottom: 48px; }
body:not(.hp) #cx-can > .wrap { border-top: 0; }
body:not(.hp) .cx-section .cx-head h2, body:not(.hp) .content-package-section > .wrap > h2 { font-size: 22px; }
@media (min-width: 960px) {
  body:not(.hp) .cx-section:not(.cx-section--cta) > .wrap, body:not(.hp) .content-package-section > .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; row-gap: 0; align-items: start; }
  body:not(.hp) .cx-section:not(.cx-section--cta) > .wrap > .cx-head, body:not(.hp) .content-package-section > .wrap > h2 { grid-column: 1; grid-row: 1 / span 30; margin: 0; }
  body:not(.hp) .cx-section:not(.cx-section--cta) > .wrap > :not(.cx-head), body:not(.hp) .content-package-section > .wrap > :not(h2) { grid-column: 2; }
  body:not(.hp) .cx-section:not(.cx-section--cta) > .wrap > :not(.cx-head) + :not(.cx-head) { margin-top: 16px; }
}
body:not(.hp) .cx-section:has(> .wrap > .cx-head + .cx-pending:last-child) > .wrap { padding-top: 20px; padding-bottom: 24px; }
body:not(.hp) .cx-section:has(> .wrap > .cx-head + .cx-pending:last-child) .cx-head h2 { font-size: 17px; color: var(--sb-ink-2); }

/* 대표원장 이력: 체크표(✓) 줄 세우기 대신 짧은 선 표시 */
body:not(.hp) .founder-cred::before { content: ''; top: .8em; width: 8px; height: 1px; background: var(--sb-ink-4); }
body:not(.hp) .founder-quote { border-left-color: var(--sb-line); }
/* 같은 리듬에 합류: 판매용 상세 조각(수료 후 제작 결과물·수업 방식) — course-detail-sales.js */
body:not(.hp) .cds-section:not(.cds-section--glance) { padding: 0; border-top: 0; background: transparent; }
body:not(.hp) .cds-section:not(.cds-section--glance) > .wrap { border-top: 1px solid var(--sb-line); padding-top: 40px; padding-bottom: 48px; }
body:not(.hp) .cds-section .cds-h2 { font-size: 22px; }
@media (min-width: 960px) {
  body:not(.hp) .cds-section:not(.cds-section--glance) > .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; row-gap: 0; align-items: start; }
  body:not(.hp) .cds-section:not(.cds-section--glance) > .wrap > .cds-h2 { grid-column: 1; grid-row: 1 / span 30; margin: 0; }
  body:not(.hp) .cds-section:not(.cds-section--glance) > .wrap > :not(.cds-h2) { grid-column: 2; }
}
/* 옛 짝수 회색 띠(.course-section:nth-of-type(even))는 하위 페이지 전체에서 끈다 — 윗선 하나로 구역을 나눈다 */
body:not(.hp) .course-section:nth-of-type(even) { background: transparent; }
/* 국비지원 안내(renderFundingGuideHtml)도 과정 상세와 같은 골격: 윗선 · PC 왼쪽 제목 칸 · 본문 읽기 폭 */
body:not(.hp) .funding-guide-section { padding-top: 0; padding-bottom: 0; }
body:not(.hp) .funding-guide-section > .wrap { border-top: 1px solid var(--sb-line); padding-top: 40px; padding-bottom: 48px; }
body:not(.hp) .funding-guide-section > .wrap > h2 { font-size: 22px; }
body:not(.hp) .funding-guide-section p { max-width: 720px; font-size: 16px; line-height: 1.85; color: var(--sb-ink-2); }
@media (min-width: 960px) {
  body:not(.hp) .funding-guide-section > .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; row-gap: 0; align-items: start; }
  body:not(.hp) .funding-guide-section > .wrap > h2 { grid-column: 1; grid-row: 1 / span 30; margin: 0; }
  body:not(.hp) .funding-guide-section > .wrap > :not(h2) { grid-column: 2; }
}
/* 자격증 분야 바로가기 · 개인정보 목차 (이미 있는 제목 글자로만) */
body:not(.hp) .cert-jump { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0 0 24px; margin: 0 0 32px; border-bottom: 1px solid var(--sb-line); }
body:not(.hp) .cert-jump a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--sb-ink); text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 5px; }
body:not(.hp) .cert-jump a:hover { text-decoration-color: var(--sb-ink); }
body:not(.hp) .privacy-toc { margin: 24px 0 8px; padding: 16px 20px; background: var(--sb-bg-2); border-radius: var(--sb-r-sm); }
body:not(.hp) .privacy-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
body:not(.hp) .privacy-toc li { font-size: 14px; line-height: 1.6; break-inside: avoid; }
body:not(.hp) .privacy-toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sb-ink-2); }
@media (max-width: 767px) { body:not(.hp) .privacy-toc ol { columns: 1; } }

/* 소식·학습 목록: 날짜를 왼쪽 고정 칸으로(홈 소식 칸과 같은 읽는 순서) */
@media (min-width: 768px) {
  body:not(.hp) .ed-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
  body:not(.hp) .ed-row > .ed-meta { grid-row: 1 / span 3; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
  body:not(.hp) .ed-row > :not(.ed-meta) { grid-column: 2; }
}

/* 캠퍼스 상세: 같은 테두리 카드 8장(같은 배지·같은 버튼) → 과정 이름 목록. 마크업은 그대로(검사 고정), 모양만 */
body:not(.hp) #campus-detail-root .course-list-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 960px) { body:not(.hp) #campus-detail-root .course-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
body:not(.hp) #campus-detail-root .course-list-card { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; padding: 18px 0; background: transparent; }
body:not(.hp) #campus-detail-root .course-list-card h3 { font-size: 17px; margin: 6px 0 4px; }
body:not(.hp) #campus-detail-root .course-list-card p { font-size: 14px !important; color: var(--sb-ink-3) !important; margin: 0 0 6px !important; }
body:not(.hp) #campus-detail-root .course-list-card .pill-btn { border: 0; padding: 0; min-height: 44px; background: transparent; text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 5px; }
/* 캠퍼스 구역도 과정 상세·국비지원과 같은 골격 */
body:not(.hp) #campus-detail-root .course-section { padding-top: 0; padding-bottom: 0; }
body:not(.hp) #campus-detail-root .course-section > .wrap { border-top: 1px solid var(--sb-line); padding-top: 40px; padding-bottom: 48px; }
body:not(.hp) #campus-detail-root .course-section > .wrap > h2 { font-size: 22px; }
@media (min-width: 960px) {
  body:not(.hp) #campus-detail-root .course-section > .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; row-gap: 0; align-items: start; }
  body:not(.hp) #campus-detail-root .course-section > .wrap > h2 { grid-column: 1; grid-row: 1 / span 30; margin: 0; }
  body:not(.hp) #campus-detail-root .course-section > .wrap > :not(h2) { grid-column: 2; }
}

/* ── 3라운드(OD-18) ───────────────────────────────────────────── */
/* 캠퍼스 상세 머리: PC에서 왼쪽 이름·상담 / 오른쪽 주소·전화·시간 — 방문자가 먼저 찾는 연락 정보를 한눈에(D-1) */
/* 캠퍼스 상세 머리(원장 2026-10-03 "주소랑 나오는 부분 UIUX 이상해요" → "왼쪽이 횡해요"): 지점 상세의 흔한 틀.
   PC — 왼쪽 실제 사진(4:3, 아래 작은 사진 고르기) · 오른쪽 이름 → 이름표 정보 카드(주소/전화/운영시간) → 상담.
   휴대폰 — 사진 → 이름 → 정보 → 상담 한 단. 사진 없는 캠퍼스는 오른쪽 내용만 한 단. */
body:not(.hp) #campus-detail-root .campus-hero-main h1 { margin: 6px 0 20px; }
body:not(.hp) #campus-detail-root .campus-hero-main .detail-cta-row { margin: 20px 0 0; }
body:not(.hp) #campus-detail-root .campus-gallery { margin: 0 0 28px; min-width: 0; }
body:not(.hp) #campus-detail-root .campus-gallery .campus-lead { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--sb-r-sm); overflow: hidden; background: var(--sb-line); }
body:not(.hp) #campus-detail-root .campus-gallery .campus-lead img { width: 100%; height: 100%; object-fit: cover; display: block; }
body:not(.hp) #campus-detail-root .campus-thumbs { display: flex; gap: 8px; margin-top: 10px; }
body:not(.hp) #campus-detail-root .campus-thumb { width: 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--sb-line); cursor: pointer; opacity: .72; transition: opacity .15s ease, border-color .15s ease; }
body:not(.hp) #campus-detail-root .campus-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body:not(.hp) #campus-detail-root .campus-thumb[aria-pressed="true"] { border-color: var(--sb-ink); opacity: 1; }
body:not(.hp) #campus-detail-root .campus-thumb:hover { opacity: 1; }
body:not(.hp) #campus-detail-root .campus-thumb:focus-visible { outline: 2px solid var(--sb-brand); outline-offset: 2px; }
body:not(.hp) #campus-detail-root .campus-photo-note { font-size: 12.5px !important; color: var(--sb-ink-3) !important; margin: 10px 0 0 !important; }
body:not(.hp) #campus-detail-root .campus-info { margin: 0; background: var(--sp-paper); border: 1px solid var(--sb-line); border-radius: var(--sb-r-sm); padding: 4px 22px; }
body:not(.hp) #campus-detail-root .campus-info-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; padding: 16px 0; border-top: 1px solid var(--sb-line); }
body:not(.hp) #campus-detail-root .campus-info-row:first-child { border-top: 0; }
body:not(.hp) #campus-detail-root .campus-info dt { font-size: 13px; font-weight: 700; color: var(--sb-ink-3); padding-top: 2px; }
body:not(.hp) #campus-detail-root .campus-info dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
body:not(.hp) #campus-detail-root .campus-info-main { font-size: 16px; font-weight: 600; color: var(--sb-ink); line-height: 1.5; }
body:not(.hp) #campus-detail-root .campus-info-sub { font-size: 14px; color: var(--sb-ink-2); line-height: 1.5; }
body:not(.hp) #campus-detail-root .campus-info-tel { font-size: 18px; font-weight: 800; color: var(--sb-ink); text-decoration: none; letter-spacing: .01em; font-variant-numeric: tabular-nums; min-height: 44px; display: inline-flex; align-items: center; }
body:not(.hp) #campus-detail-root .campus-info-link { font-size: 14px; font-weight: 700; color: var(--sb-ink); text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
body:not(.hp) #campus-detail-root .campus-info .campus-hours-note { display: block; background: none; border: 0; padding: 0; margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--sb-ink-3) !important; }
body:not(.hp) #campus-detail-root .campus-info .campus-hours-note strong { color: var(--sb-ink-2); font-weight: 700; }
@media (min-width: 960px) {
  body:not(.hp) #campus-detail-root .campus-hero--photo > .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  body:not(.hp) #campus-detail-root .campus-hero--photo .campus-gallery { margin: 0; }
  body:not(.hp) #campus-detail-root .campus-hero--photo .campus-tabs { grid-column: 1 / -1; }
}
/* 2026-10-04 캠퍼스 탭: 4개 지점 사이 바로 이동. 지금 캠퍼스는 진하게 + 아래 줄(메뉴 현재 위치와 같은 말투) */
body:not(.hp) #campus-detail-root .campus-tabs { display: flex; gap: 4px; margin: 0 0 28px; border-bottom: 1px solid var(--sb-line); overflow-x: auto; scrollbar-width: none; }
body:not(.hp) #campus-detail-root .campus-tabs::-webkit-scrollbar { display: none; }
body:not(.hp) #campus-detail-root .campus-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 600; color: var(--sb-ink-3); text-decoration: none; white-space: nowrap; }
body:not(.hp) #campus-detail-root .campus-tabs a:hover { color: var(--sb-ink); }
body:not(.hp) #campus-detail-root .campus-tabs a[aria-current="page"] { color: var(--sb-ink); font-weight: 800; border-bottom-color: var(--sb-brand); }
body:not(.hp) #campus-detail-root .campus-tabs a:focus-visible { outline: 2px solid var(--sb-brand); outline-offset: -2px; }
@media (max-width: 767px) { body:not(.hp) #campus-detail-root .campus-tabs { margin: 0 0 20px; } body:not(.hp) #campus-detail-root .campus-tabs a { padding: 0 12px; font-size: 14px; } }
/* 과정 줄 전체가 눌리는 곳(자세히 보기 링크를 줄 전체로 늘림) — 글자·마크업은 그대로 */
body:not(.hp) #campus-detail-root .course-list-card { position: relative; }
body:not(.hp) #campus-detail-root .course-list-card .pill-btn::after { content: ''; position: absolute; inset: 0; }
/* 누를 때 버튼 축소(style.css .pill-btn:active scale)가 늘린 영역을 버튼 크기로 되돌려, 빈 곳 클릭이 사라졌다(B16) → 이 줄 링크는 축소 없음 */
body:not(.hp) #campus-detail-root .course-list-card .pill-btn:active { transform: none; }
@media (hover: hover) and (pointer: fine) { body:not(.hp) #campus-detail-root .course-list-card:hover h3 { color: var(--sb-brand); } }
body:not(.hp) #campus-detail-root .course-list-card .pill-btn:focus-visible { outline: 0; }
body:not(.hp) #campus-detail-root .course-list-card:focus-within { outline: 2px solid var(--sb-brand); outline-offset: 4px; }
/* 빈 개강일정: 안내 한 줄 + 다음 행동 두 개 */
body:not(.hp) #campus-detail-root .campus-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }
body:not(.hp) #campus-detail-root .campus-empty-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
body:not(.hp) #campus-detail-root .campus-empty-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--sb-ink); text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 4px; }

/* 소식 상세: 관련 과정·캠퍼스 이동은 버튼 상자 대신 글자 링크 — 주 행동(상담) 하나만 버튼으로 남는다 */
body:not(.hp) .article-related { gap: 4px 20px; }
body:not(.hp) .article-related .pill-btn { border: 0; padding: 0; background: transparent; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 5px; }
body:not(.hp) .article-related .pill-btn.primary-action { padding: 0 18px; background: var(--sb-ink); color: var(--sp-on-dark); text-decoration: none; }
body:not(.hp) .article-next { padding: 20px 0 8px; }
body:not(.hp) .article-next .detail-cta-row { margin-top: 12px; }

/* 개강일정: 같은 카드 격자 대신 한 줄에 한 일정(행) — 과정명 | 캠퍼스·시간·개강일 | 상담 */
body:not(.hp) #opening-results .opening-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
body:not(.hp) #opening-results .opening-card { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; padding: 18px 0; background: transparent; }
body:not(.hp) #opening-results .opening-card:last-child { border-bottom: 1px solid var(--sb-line); }
@media (min-width: 960px) {
  body:not(.hp) #opening-results .opening-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  body:not(.hp) #opening-results .opening-card > :not(h3):not(.meta):not(.apply) { grid-column: 1; }
  body:not(.hp) #opening-results .opening-card > h3 { grid-column: 1; margin: 4px 0 0; }
  body:not(.hp) #opening-results .opening-card > .meta { grid-column: 2; grid-row: 1 / span 6; }
  body:not(.hp) #opening-results .opening-card > .apply { grid-column: 3; grid-row: 1 / span 6; }
}
body:not(.hp) #opening-results .opening-card .apply { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--sb-ink); }
body:not(.hp) #opening-results .opening-card > :is(.badge, .fixture-badge, .opening-not-real, .status-qualifier-badge) { justify-self: start; width: auto; margin: 0 6px 6px 0; }
@media (max-width: 959px) { body:not(.hp) #opening-results .opening-card > :is(.badge, .fixture-badge, .opening-not-real, .status-qualifier-badge) { display: inline-block; } }

/* ── 3라운드 b: impeccable polish·layout·typeset 재검토 반영(OD-18) ─────────────── */
/* 제목 역할을 둘로: 구역 제목 24/800, 하위 제목 20/700 (28·22·20 세 단계가 섞여 있었다) */
body:not(.hp) main h2, body:not(.hp) h2.sec-title,
body:not(.hp) .cx-section .cx-head h2, body:not(.hp) .content-package-section > .wrap > h2,
body:not(.hp) .funding-guide-section > .wrap > h2, body:not(.hp) #campus-detail-root .course-section > .wrap > h2,
body:not(.hp) .cds-section .cds-h2 { font-size: 24px; font-weight: 800; }
body:not(.hp) .privacy-doc h2, body:not(.hp) .sub-list-title, body:not(.hp) h2.cert-cat-title { font-size: 20px; font-weight: 700; }
@media (max-width: 767px) {
  body:not(.hp) main h2, body:not(.hp) h2.sec-title, body:not(.hp) .cx-section .cx-head h2, body:not(.hp) .content-package-section > .wrap > h2,
  body:not(.hp) .funding-guide-section > .wrap > h2, body:not(.hp) #campus-detail-root .course-section > .wrap > h2, body:not(.hp) .cds-section .cds-h2 { font-size: 21px; }
}
/* 2열 골격을 홈 .sec 와 같은 200px / 32px 로 — 본문 시작선을 홈과 맞춘다 */
@media (min-width: 960px) {
  body:not(.hp) .cx-section:not(.cx-section--cta) > .wrap, body:not(.hp) .content-package-section > .wrap,
  body:not(.hp) .funding-guide-section > .wrap, body:not(.hp) #campus-detail-root .course-section > .wrap,
  body:not(.hp) .cds-section:not(.cds-section--glance) > .wrap { grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; }
  /* 긴 과정 상세에서 지금 어느 구역인지 — 왼쪽 제목이 구역 안에서 따라온다 */
  body:not(.hp) .cx-section:not(.cx-section--cta) > .wrap > .cx-head, body:not(.hp) .content-package-section > .wrap > h2,
  body:not(.hp) .funding-guide-section > .wrap > h2, body:not(.hp) .cds-section:not(.cds-section--glance) > .wrap > .cds-h2 { position: sticky; top: calc(var(--sb-header-h) + 24px); align-self: start; }
}

/* 같은 값이 반복되는 표시(개설 예정·FAQ 종류·증거 범위)는 알약 대신 회색 글자 — 글자는 그대로 */
body:not(.hp) .status-qualifier-badge, body:not(.hp) .faq-type-badge, body:not(.hp) .proof-scope-badge { background: none !important; padding: 0; border-radius: 0; font-weight: 600; color: var(--sb-ink-3) !important; }
body:not(.hp) .cx-hero .status-qualifier-badge { color: var(--sp-on-dark-3) !important; }

/* 경로 표시와 회색 제목 띠를 한 덩어리로(경로가 흰 띠에 혼자 떠 있었다) */
body:not(.hp) main > #breadcrumb-mount:has(+ section.detail-hero) { background: var(--sb-bg-2); box-shadow: 0 0 0 100vmax var(--sb-bg-2); clip-path: inset(0 -100vmax); }
body:not(.hp) main > #breadcrumb-mount:has(+ section.detail-hero) + section.detail-hero { padding-top: 16px; border-top: 0; }

/* 대표원장: 홈 .director 와 같은 모양(240px 4:5 사진 · 22px 인용 · 2열 이력 · 작은 점) — 학원소개·강사진 */
body:not(.hp) #about-director-trust .trust-block { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { body:not(.hp) #about-director-trust .trust-block { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center; } }
body:not(.hp) #about-director-trust .trust-block .photo { width: 100%; max-width: 240px; height: auto; aspect-ratio: 4 / 5; border-radius: var(--sb-r-sm); box-shadow: none; }
body:not(.hp) #about-director-trust .trust-block .quote, body:not(.hp) .founder-quote { font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: var(--sb-ink); border-left: 0; padding-left: 0; }
body:not(.hp) .trust-creds, body:not(.hp) .founder-creds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
@media (max-width: 767px) { body:not(.hp) .trust-creds, body:not(.hp) .founder-creds { grid-template-columns: 1fr; } }
body:not(.hp) .trust-creds li, body:not(.hp) .founder-cred { font-size: 14px; line-height: 1.5; color: var(--sb-ink-2); padding-left: 14px; position: relative; }
body:not(.hp) .trust-creds li::before, body:not(.hp) .founder-cred::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--sb-brand); }
@media (min-width: 768px) { body:not(.hp) .founder-authority { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center; } }
body:not(.hp) .founder-photo img { max-width: 240px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sb-r-sm); }
body:not(.hp) .founder-authority { border: 0; box-shadow: none; background: transparent; padding: 0; }

/* 캠퍼스: 설명 문장은 경고색 상자 대신 조용한 안내 줄, 신뢰 근거는 위 과정 목록과 같은 윗선 목록 */
body:not(.hp) .campus-schedule-disclaimer { background: none; border: 0; border-left: 2px solid var(--sb-line); border-radius: 0; padding: 0 0 0 12px; font-size: 13px; color: var(--sb-ink-2); }
body:not(.hp) #campus-detail-root .proof-card { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; padding: 16px 0; background: transparent; box-shadow: none; }

/* 국비지원 신청 단계 “1)~5)”: 걸침 들여쓰기로 단계가 읽히게(문구 그대로) */
body:not(.hp) #process p { padding-left: 1.75em; text-indent: -1.75em; margin: 0 0 12px; }

/* FAQ 두 종류(국비지원 .faq-item / 학습 .faq-row)를 같은 모양으로 */
body:not(.hp) .faq-item { max-width: 820px; padding: 18px 0; }
body:not(.hp) .faq-item h3 { font-size: 17px; font-weight: 700; margin: 2px 0 6px; }
body:not(.hp) .faq-item p { font-size: 15px; line-height: 1.8; color: var(--sb-ink-2); }

/* 과정찾기 분야 탭 7개가 PC에서 한 줄에 들어가게 */
body:not(.hp) .category-tab { padding: 0 14px; font-size: 14px; }

/* 빈 상태·안내 문장 한 줄 길이 */
body:not(.hp) .no-result-box, body:not(.hp) #reviews-empty-state, body:not(.hp) .subset-note { max-width: 720px; }
body:not(.hp) .error-help { margin-top: 32px; }

/* 숫자는 홈처럼 자릿수 맞춤 */
body:not(.hp) .ed-date, body:not(.hp) .article-date, body:not(.hp) .campus-hero-meta, body:not(.hp) a[href^="tel:"] { font-variant-numeric: tabular-nums; }

/* 개인정보: PC에서는 목차를 오른쪽 칸에 두고 따라오게(긴 문서) */
@media (min-width: 1100px) {
  body:not(.hp) .privacy-doc .article-wrap { display: grid; grid-template-columns: minmax(0, 720px) 240px; column-gap: 64px; justify-content: start; }
  body:not(.hp) .privacy-doc .article-wrap > * { grid-column: 1; }
  body:not(.hp) .privacy-doc .article-wrap > .privacy-toc { grid-column: 2; grid-row: 1 / span 80; align-self: start; position: sticky; top: calc(var(--sb-header-h) + 16px); margin: 0; }
  body:not(.hp) .privacy-doc .privacy-toc ol { columns: 1; }
}
/* 끝맺음 띠는 홈 상담 띠와 같은 어두운 색 */
body:not(.hp) .cx-final, body:not(.hp) .cta-block { background: var(--sb-dark); }

/* ── 3라운드 c: emil-design-eng · apple-design · review-animations 검토 반영(OD-18) ────────── */
/* 누르면 반응한다: 공통 버튼 규칙의 transform:none 이 style.css 의 눌림(.97)을 지우고 있었다 */
body:not(.hp) :is(.pill-btn, .category-tab, .cx-cta, .cds-btn, .detail-cta-row .cta-btn, .m3-subhead-actions a) { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform var(--dur-press) var(--ease-out); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body:not(.hp) :is(.pill-btn, .category-tab, .cx-cta, .cds-btn, .detail-cta-row .cta-btn, .m3-subhead-actions a):active { transform: scale(var(--press-scale)); }
/* 글자 링크는 크기 대신 밑줄 색으로 반응 */
body:not(.hp) :is(.campus-link, .cert-jump a, .article-back a, .privacy-toc a, .cds-chip--link a, .article-related .pill-btn:not(.primary-action)) { transition: color 160ms ease, text-decoration-color 160ms ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body:not(.hp) :is(.campus-link, .cert-jump a, .article-back a, .privacy-toc a, .cds-chip--link a, .article-related .pill-btn:not(.primary-action)):active { text-decoration-color: var(--sb-ink); transform: none; }
@media (prefers-reduced-motion: reduce) { body:not(.hp) :is(.pill-btn, .category-tab, .cx-cta, .cds-btn, .detail-cta-row .cta-btn, .m3-subhead-actions a):active { transform: none; } }

/* 과정 상세 고정 부제목: 머리말(80/64px) 밑에 깔리지 않게, 앵커 이동 시 부제목에 제목이 가리지 않게 */
body:not(.hp) .m3-subhead { top: var(--sb-header-h); }
@media (max-width: 1139px) { body:not(.hp) .m3-subhead { top: 64px; } }
html:has(body:not(.hp) .m3-subhead) { scroll-padding-top: calc(var(--sb-header-h) + 72px); }
/* 고정 부제목 버튼도 주 버튼 한 가지(검정) — 남아 있던 브랜드 파랑 */
body:not(.hp) .m3-subhead-actions a { border-color: var(--sb-line); color: var(--sb-ink); border-radius: var(--sb-r-sm); }
body:not(.hp) .m3-subhead-actions a.is-primary { background: var(--sb-ink); border-color: var(--sb-ink); color: var(--sp-on-dark); }
body:not(.hp) .cds-chip--cert { border-color: var(--sb-line); color: var(--sb-ink); }

/* 경로 표시: 휴대폰에서 계단처럼 어긋나던 정렬을 한 줄로 */
body:not(.hp) .breadcrumb { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
body:not(.hp) .breadcrumb a { min-width: 44px; padding: 0 8px; justify-content: center; }
body:not(.hp) .breadcrumb a:first-child { margin-left: -8px; }
body:not(.hp) .breadcrumb [aria-current="page"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; }
@media (max-width: 767px) { body:not(.hp) .breadcrumb [aria-current="page"] { display: block; max-width: none; vertical-align: baseline; } }

/* 소식·학습 행: 1200px 행 전체가 줄어드는 눌림 대신 바탕색, 마우스 올림은 밑줄(파란 면 제거) */
body:not(.hp) .ed-row { padding: 20px 16px; margin: 0 -16px; border-radius: var(--sb-r-sm); }
body:not(.hp) .ed-row:active { transform: none; background: var(--sb-bg-2); }
@media (hover: hover) and (pointer: fine) {
  body:not(.hp) .ed-row:hover { background: var(--sb-bg-2); }
  body:not(.hp) .ed-row:hover .ed-title { color: var(--sb-ink); text-decoration: underline; text-underline-offset: 4px; }
}

/* 과정찾기 분야 탭: 휴대폰은 한 줄 가로 넘김(3줄로 접혀 150px를 먹었다) */
@media (max-width: 767px) {
  body:not(.hp) .category-tabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--sb-gutter) * -1); padding-inline: var(--sb-gutter); }
  body:not(.hp) .category-tabs::-webkit-scrollbar { display: none; }
  body:not(.hp) .category-tab { flex: none; scroll-snap-align: start; }
}

/* 과정 상세 학습 흐름: 4단계가 3칸 격자에서 끊기지 않게 */
@media (min-width: 960px) { body:not(.hp) .cx-flow { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

/* 학원소개 지점안내: 같은 테두리 카드 4장 → 윗선 목록 */
body:not(.hp) #about-campus-grid .campus-card { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; padding: 20px 0; background: transparent; }

/* 신뢰 근거 카드: 마지막 남은 큰 둥근 상자·초록 알약 → 윗선 목록, 작은 사각 표시(검증/예시 색 구분은 의미라 유지) */
body:not(.hp) .proof-list .proof-card { border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; padding: 16px 0; background: transparent; box-shadow: none; }
body:not(.hp) .proof-badge { border-radius: 4px; font-size: 12px; }

/* 작은 보조 글자는 자간을 풀어 준다(본문 -0.01em 을 물려받고 있었다 — Apple 크기별 자간) */
body:not(.hp) :is(.breadcrumb, .ed-date, .cx-scope, .sample-note, .article-source, .privacy-note) { letter-spacing: 0; }

/* 404 휴대폰: 버튼 3개가 한 줄에 끼지 않게 두 줄 */
@media (max-width: 767px) { body:not(.hp) .error-actions .pill-btn { flex: 1 1 calc(50% - 4px); justify-content: center; } }
/* 개강일정 휴대폰 필터: 들쭉날쭉한 폭 → 2열 */
@media (max-width: 767px) {
  body:not(.hp) .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body:not(.hp) .filter-row select { width: 100%; }
}

/* ── 4라운드(OD-19 “네 그렇게 하시죠”) ─────────────────────────────── */
/* 1) 버튼 모양을 원장 승인 홈과 한 가지로: 알약(999px) */
body:not(.hp) :is(.pill-btn, .category-tab, .cx-cta, .cds-btn, .detail-cta-row .cta-btn, .m3-subhead-actions a, .cta-block .cta-btn) { border-radius: 999px; }
body:not(.hp) .article-related .pill-btn.primary-action { border-radius: 999px; }

/* 2) 하위 페이지 끝맺음 상담 띠 — 홈 .consult 와 같은 어두운 띠·같은 문장(js/subpage-consult.js) */
body:not(.hp) .sub-consult { background: var(--sb-dark); color: var(--sp-on-dark); }
body:not(.hp) .sub-consult__in { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; padding-top: 88px; padding-bottom: 88px; }
body:not(.hp) .sub-consult h2 { color: var(--sp-on-dark); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
body:not(.hp) .sub-consult__txt p { margin: 16px 0 0; color: var(--sp-on-dark-3); font-size: 16px; line-height: 1.7; }
body:not(.hp) .sub-consult__tel { display: inline-flex; align-items: center; min-height: 48px; margin-top: 24px; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--sp-on-dark); font-variant-numeric: tabular-nums; }
body:not(.hp) .sub-consult__txt .sub-consult__hours { margin-top: 4px; font-size: 14px; }
body:not(.hp) .sub-consult__campuses { list-style: none; margin: 0; padding: 0; }
body:not(.hp) .sub-consult__campuses li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--sp-on-dark-fill); }
body:not(.hp) .sub-consult__campuses span { color: var(--sp-on-dark-3); font-size: 15px; }
body:not(.hp) .sub-consult__campuses a { display: inline-flex; align-items: center; min-height: 48px; color: var(--sp-on-dark); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
body:not(.hp) .sub-consult__kakao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 52px; margin-top: 24px; border-radius: 999px; background: var(--sb-accent); color: var(--sb-accent-ink); font-size: 16px; font-weight: 700; transition: background-color 160ms ease, transform var(--dur-press) var(--ease-out); }
body:not(.hp) .sub-consult__kakao:hover { background: var(--sp-accent-hover); }
body:not(.hp) .sub-consult__kakao:active { transform: scale(var(--press-scale)); }
body:not(.hp) .sub-consult :focus-visible { outline: 3px solid var(--sb-accent); outline-offset: 2px; }
@media (max-width: 959px) { body:not(.hp) .sub-consult__in { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 64px; padding-bottom: 64px; } }
@media (max-width: 767px) { body:not(.hp) .sub-consult h2 { font-size: 26px; } body:not(.hp) .sub-consult__tel { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { body:not(.hp) .sub-consult__kakao:active { transform: none; } }
/* 띠와 겹치는 옛 끝맺음은 띠가 대신한다: 404 상담 안내 문단은 그대로 두고, 국비지원 끝 안내도 그대로(문구 보존) */

/* 3) 과정 상세 첫 화면: 같은 상태 문장이 배지·상태 줄·한눈에 보기 세 번 — 배지만 접는다(상태 줄·한눈에 보기에 같은 문장이 남는다) */
body:not(.hp) .cx-hero-copy:has(> .cx-status) > .status-qualifier-badge { display: none; }  /* 상태 줄이 없는 과정은 배지를 그대로 둔다 */

/* 4) 과정찾기 휴대폰: 화면 폭 사진 카드 10장(약 7,300px) → 작은 정사각 사진 + 글 */
@media (max-width: 767px) {
  body:not(.hp) #course-list .course-list-card.has-photo { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--sb-line); }
  body:not(.hp) #course-list .course-list-card.has-photo > .clc-photo { grid-column: 1; grid-row: 1 / span 6; aspect-ratio: 1; margin: 0; border-radius: var(--sb-r-sm); overflow: hidden; }
  body:not(.hp) #course-list .course-list-card.has-photo > :not(.clc-photo) { grid-column: 2; }
  body:not(.hp) #course-list .course-list-card.has-photo h3 { font-size: 17px; margin: 4px 0; }
  body:not(.hp) #course-list .course-list-card.has-photo .clc-summary { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body:not(.hp) #course-list .course-list-card.has-photo .detail-cta-row { margin-top: 4px; gap: 4px 12px; }
  body:not(.hp) #course-list .course-list-card.has-photo .detail-cta-row .pill-btn { border: 0; padding: 0; background: transparent; text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 5px; }
}

/* 5) 소식·학습 상세 PC: 오른쪽 빈칸에 상담 안내(같은 데이터·같은 문구), 휴대폰에서는 아래 띠가 대신한다 */
body:not(.hp) .article-aside { display: none; }
@media (min-width: 1100px) {
  body:not(.hp) .article-sec .article-wrap { display: grid; grid-template-columns: minmax(0, 720px) 280px; column-gap: 80px; justify-content: start; }
  body:not(.hp) .article-sec .article-wrap > * { grid-column: 1; }
  body:not(.hp) .article-sec .article-wrap > .article-aside { display: block; grid-column: 2; grid-row: 1 / span 20; align-self: start; position: sticky; top: calc(var(--sb-header-h) + 24px); border: 1px solid var(--sb-line); border-radius: var(--sb-r-sm); padding: 24px; }
}
body:not(.hp) .article-aside__title { margin: 0; font-size: 15px; font-weight: 800; color: var(--sb-ink); }
body:not(.hp) .article-aside__tel { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 24px; font-weight: 800; color: var(--sb-ink); font-variant-numeric: tabular-nums; }
body:not(.hp) .article-aside ul { list-style: none; margin: 8px 0 0; padding: 0; }
body:not(.hp) .article-aside li { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--sb-line); font-size: 14px; color: var(--sb-ink-3); }
body:not(.hp) .article-aside li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
body:not(.hp) .article-aside__kakao { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; margin-top: 16px; border-radius: 999px; background: var(--sb-accent); color: var(--sb-accent-ink); font-weight: 700; }
/* 예시 사진 안내가 목록 앞에 올 때(Codex PR #45 P1): 위 여백 대신 아래 여백 */
body:not(.hp) #course-list-note .sample-note, body:not(.hp) .sample-note:has(+ .adjacent-course-list) { margin: 0 0 16px; }

/* ── OD-21: 메뉴에서 고른 자격증 표시 ── */
body:not(.hp) .cert-chip { scroll-margin-top: calc(var(--sb-header-h) + 24px); }
body:not(.hp) .cert-chip.is-target { background: var(--sb-bg-2); box-shadow: inset 3px 0 0 var(--sb-brand); padding-left: 14px; border-radius: 0 var(--sb-r-sm) var(--sb-r-sm) 0; }
body:not(.hp) .cert-chip:focus { outline: none; }
body:not(.hp) .cert-chip:focus-visible { outline: 2px solid var(--sb-brand); outline-offset: 2px; }
/* OD-21 과정 상세: 공식 시험 정보 목록 */
body:not(.hp) .cx-exams { list-style: none; margin: 0; padding: 0; }
body:not(.hp) .cx-exams li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 4px; align-items: center; padding: 16px 0; border-top: 1px solid var(--sb-line); }
body:not(.hp) .cx-exams strong { grid-column: 1; font-size: 17px; color: var(--sb-ink); }
body:not(.hp) .cx-exams span { grid-column: 1; font-size: 14px; line-height: 1.7; color: var(--sb-ink-2); }
body:not(.hp) .cx-exams a { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--sb-ink); text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 5px; }
@media (max-width: 767px) { body:not(.hp) .cx-exams li { grid-template-columns: minmax(0, 1fr); } body:not(.hp) .cx-exams a { grid-column: 1; grid-row: auto; } }
body:not(.hp) .cx-scope a { color: var(--sb-ink-2); text-decoration: underline; text-underline-offset: 3px; }
/* OD-22 과정 상세: 도구 이용 안내(요금제·사용 한도) */
body:not(.hp) .cx-plans { margin-top: 20px; }
body:not(.hp) .cx-plans-title { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--sb-ink); }
body:not(.hp) .cx-plans ul { list-style: none; margin: 0; padding: 0; }
body:not(.hp) .cx-plans li { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 20px; padding: 10px 0; border-top: 1px solid var(--sb-line); font-size: 14px; line-height: 1.7; }
body:not(.hp) .cx-plans li strong { color: var(--sb-ink); }
body:not(.hp) .cx-plans li span { color: var(--sb-ink-2); }
body:not(.hp) .cx-plans-note { margin: 8px 0 0; font-size: 13px; color: var(--sb-ink-3); }
@media (max-width: 767px) { body:not(.hp) .cx-plans li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } }

/* ── OD-24 자격증 상세·분야 소개(js/certification-pages.js) ─────────────────
   SBS 과정 페이지 뼈대: 남색 첫 화면 왼쪽 제목·상담 버튼, 오른쪽 "수업 정보" 상자(대상·기간·형태).
   과정 상세(.cx-*)와 같은 띠·번호 제목을 그대로 쓰고, 새로 필요한 것만 lp- 로 더한다. 색은 변수만. */
body:not(.hp) .lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 960px) { body:not(.hp) .lp-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; } body:not(.hp) .lp-hero-grid--cat { grid-template-columns: minmax(0, 1fr); } }
body:not(.hp) .lp-hero .cx-hero-copy > .cx-fam { display: block; margin-bottom: 8px; }
body:not(.hp) .lp-type { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; margin-right: 6px; border-radius: 4px; font-size: 12px; font-weight: 700; background: var(--sp-on-dark-fill); color: var(--sp-on-dark); }
body:not(.hp) .lp-type--sm { background: var(--sb-bg-2); color: var(--sb-ink-2); }
body:not(.hp) .lp-hero .cx-summary { color: var(--sp-on-dark-2); font-size: 17px; line-height: 1.7; margin: 0 0 20px; }
body:not(.hp) .lp-count { color: var(--sp-on-dark-2); font-size: 15px; font-weight: 700; margin: -8px 0 20px; }
body:not(.hp) .lp-hero .cx-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
body:not(.hp) .lp-hero .cx-cta:not(.cx-cta--primary) { background: transparent; border: 1px solid var(--sp-on-dark-line); color: var(--sp-on-dark); }
body:not(.hp) .lp-info { background: var(--sp-paper); color: var(--sb-ink); border-radius: var(--sb-r-sm); padding: 20px 24px 8px; }
body:not(.hp) .lp-info-title { font-size: 15px; font-weight: 800; margin: 0 0 4px; }
body:not(.hp) .lp-facts { margin: 0; }
body:not(.hp) .lp-facts > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--sb-line); }
body:not(.hp) .lp-facts dt { font-size: 13px; font-weight: 700; color: var(--sb-ink-3); }
body:not(.hp) .lp-facts dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sb-ink); }
body:not(.hp) .lp-change { margin: 16px 0 0; padding: 14px 16px; background: var(--sb-bg-2); border-radius: var(--sb-r-sm); font-size: 14px; line-height: 1.7; color: var(--sb-ink-2); }
body:not(.hp) .lp-change strong { display: block; color: var(--sb-ink); margin-bottom: 2px; }
body:not(.hp) .lp-official a, body:not(.hp) .lp-more a, body:not(.hp) .cert-cat-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--sb-ink); text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 5px; }
body:not(.hp) .lp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--sb-ink); }
@media (min-width: 768px) { body:not(.hp) .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1100px) { body:not(.hp) .lp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body:not(.hp) .lp-card a { display: grid; gap: 6px; padding: 18px 0 20px; border-bottom: 1px solid var(--sb-line); color: var(--sb-ink); text-decoration: none; min-height: 44px; }
body:not(.hp) .lp-card strong { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
body:not(.hp) .lp-card span:not(.lp-card-badges):not(.lp-card-go):not(.badge):not(.lp-type) { font-size: 14px; line-height: 1.6; color: var(--sb-ink-3); }
body:not(.hp) .lp-card-badges { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
body:not(.hp) .lp-card-go { font-size: 14px; font-weight: 700; color: var(--sb-ink-2); }
body:not(.hp) .lp-card a:hover strong, body:not(.hp) .lp-card a:focus-visible strong { text-decoration: underline; text-underline-offset: 4px; }
body:not(.hp) .lp-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--sb-line); }
@media (min-width: 768px) { body:not(.hp) .lp-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
body:not(.hp) .lp-links a { display: grid; gap: 2px; padding: 14px 0; min-height: 44px; border-bottom: 1px solid var(--sb-line); color: var(--sb-ink); text-decoration: none; }
body:not(.hp) .lp-links strong { font-size: 16px; }
body:not(.hp) .lp-links span { font-size: 14px; color: var(--sb-ink-3); }
body:not(.hp) .lp-links a:hover strong, body:not(.hp) .lp-links a:focus-visible strong { text-decoration: underline; text-underline-offset: 4px; }
body:not(.hp) .lp-empty { margin: 0; padding: 20px 0; border-top: 2px solid var(--sb-ink); font-size: 15px; color: var(--sb-ink-2); }
body:not(.hp) .lp-empty strong { display: block; font-size: 18px; color: var(--sb-ink); margin-bottom: 4px; }
body:not(.hp) .lp-notice-wrap { padding-top: 8px; padding-bottom: 40px; }
body:not(.hp) .lp-notice { margin: 0; font-size: 13px; line-height: 1.8; color: var(--sb-ink-3); border-top: 1px solid var(--sb-line); padding-top: 16px; }
body:not(.hp) .lp-notice a { color: var(--sb-ink-2); }
body:not(.hp) a.cert-chip--link { display: block; color: inherit; text-decoration: none; min-height: 44px; }
body:not(.hp) a.cert-chip--link .cn, body:not(.hp) a.cert-chip--link .cd { display: block; }
body:not(.hp) a.cert-chip--link:hover .cn { text-decoration: underline; text-underline-offset: 4px; }
body:not(.hp) a.cx-chip--link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--sb-line); text-underline-offset: 4px; }
/* 원장 2026-10-03 "뒤에 사진 나오고 파란색 투명도 해 놓은 거 마음에 안 들어" → 자격·분야 첫 화면은 밝은 띠 + 사진은 덮개 없이 따로.
   남색 첫 화면(.cx-hero)은 과정 상세에 그대로 두고, 이 두 쪽(.lp-hero)만 밝게. 글자색·버튼·표시는 밝은 바탕용으로 다시 맞춘다. */
body:not(.hp) .cx-hero.lp-hero { background: var(--sb-bg-2); color: var(--sb-ink); border-bottom: 1px solid var(--sb-line); }
body:not(.hp) .cx-hero.lp-hero h1 { color: var(--sb-ink); }
body:not(.hp) .cx-hero.lp-hero .cx-fam { color: var(--sb-brand); }
body:not(.hp) .cx-hero.lp-hero .cx-summary { color: var(--sb-ink-2); }
body:not(.hp) .cx-hero.lp-hero .lp-count { color: var(--sb-ink-2); }
body:not(.hp) .cx-hero.lp-hero .lp-type { background: var(--sp-paper); color: var(--sb-ink-2); border: 1px solid var(--sb-line); }
body:not(.hp) .cx-hero.lp-hero .status-qualifier-badge { background: var(--sp-paper) !important; color: var(--sb-ink-2) !important; }
body:not(.hp) .cx-hero.lp-hero .cx-cta:not(.cx-cta--primary) { background: var(--sp-paper); border: 1px solid var(--sb-line); color: var(--sb-ink); }
body:not(.hp) .cx-hero.lp-hero .cx-cta:not(.cx-cta--primary):hover { border-color: var(--sb-ink-3); }
body:not(.hp) .cx-hero.lp-hero :focus-visible { outline: 3px solid var(--sb-brand); outline-offset: 2px; }
body:not(.hp) .cx-hero.lp-hero .lp-info { border: 1px solid var(--sb-line); }
body:not(.hp) .lp-hero-photo { margin: 0; min-width: 0; }
body:not(.hp) .lp-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sb-r-sm); background: var(--sb-line); }
body:not(.hp) .lp-photo-note { margin: 8px 0 0; font-size: 12px; color: var(--sb-ink-3); }
@media (min-width: 960px) {
  body:not(.hp) .lp-hero.has-photo .lp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; row-gap: 32px; }
  /* 자격 쪽: 글 | 사진, 그 아래 "수업 정보"를 두 칸 표로 넓게 */
  body:not(.hp) .lp-hero.has-photo .lp-hero-grid .lp-info { grid-column: 1 / -1; }
  body:not(.hp) .lp-hero.has-photo .lp-info .lp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
/* OD-27 국비지원 세 쪽 탭 줄 + 신청 바로가기 버튼 */
body:not(.hp) .fund-nav { border-bottom: 1px solid var(--sb-line); background: var(--sp-paper); }
body:not(.hp) .fund-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; }
body:not(.hp) .fund-nav a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 16px; font-size: 15px; font-weight: 700; color: var(--sb-ink-3); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
body:not(.hp) .fund-nav a[aria-current="page"] { color: var(--sb-ink); border-bottom-color: var(--sb-ink); }
body:not(.hp) .fund-nav a:hover { color: var(--sb-ink); }
body:not(.hp) .fund-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
body:not(.hp) .fund-actions .cx-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--sb-line); border-radius: var(--sb-r-sm); background: var(--sp-paper); color: var(--sb-ink); font-weight: 700; text-decoration: none; }
body:not(.hp) .fund-actions .cx-cta--primary { background: var(--sb-accent); border-color: var(--sb-accent); color: var(--sb-accent-ink); }
body:not(.hp) .fund-rows > div { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); }
@media (max-width: 767px) { body:not(.hp) .fund-rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
body:not(.hp) .fund-steps { align-items: start; } body:not(.hp) .fund-steps li { align-content: start; }
/* OD-27 17번 기업교육 — 과정 카드·정부지원 빠른 확인 */
body:not(.hp) .biz-plan { display: grid; gap: 6px; padding: 18px 0 20px; }
body:not(.hp) .biz-plan strong { font-size: 18px; font-weight: 800; }
body:not(.hp) .biz-plan > span:not(.lp-card-badges) { font-size: 14px; line-height: 1.7; color: var(--sb-ink-2); }
body:not(.hp) .biz-plan--pick .biz-plan { box-shadow: inset 0 3px 0 var(--sb-accent); padding-top: 21px; }
body:not(.hp) .biz-check { display: grid; gap: 20px; margin: 8px 0 20px; }
body:not(.hp) .biz-check fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
body:not(.hp) .biz-check legend { font-size: 15px; font-weight: 800; color: var(--sb-ink); margin-bottom: 8px; padding: 0; }
body:not(.hp) .biz-opts { display: flex; flex-wrap: wrap; gap: 8px; }
body:not(.hp) .biz-opts label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--sb-line); border-radius: var(--sb-r-sm); background: var(--sp-paper); font-size: 14px; font-weight: 700; color: var(--sb-ink-2); cursor: pointer; }
body:not(.hp) .biz-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body:not(.hp) .biz-opts label:has(input:checked) { border-color: var(--sb-ink); color: var(--sb-ink); box-shadow: inset 0 0 0 1px var(--sb-ink); }
body:not(.hp) .biz-opts label:has(input:focus-visible) { outline: 2px solid var(--sb-brand); outline-offset: 2px; }
body:not(.hp) .biz-result-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--sb-ink); }
body:not(.hp) .biz-result-list li { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--sb-line); }
body:not(.hp) .biz-result-list strong { font-size: 16px; }
body:not(.hp) .biz-result-list span { font-size: 14px; line-height: 1.7; color: var(--sb-ink-2); }
body:not(.hp) .biz-disclaimer { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: var(--sb-ink-3); }
/* OD-27 14·15번 수업 결과물 — 작품 격자 + 세로 쇼츠 카드(가로 썸네일을 9:16 가운데로 잘라 검은 띠 제거) */
body:not(.hp) .pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
body:not(.hp) .pf-grid figure { position: relative; margin: 0; }
body:not(.hp) .pf-grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sb-r-sm); background: var(--sb-bg-2); display: block; }
body:not(.hp) .pf-grid figcaption { display: grid; gap: 2px; padding-top: 10px; font-size: 14px; }
body:not(.hp) .pf-grid figcaption span { color: var(--sb-ink-3); font-size: 13px; }
body:not(.hp) .pf-grid .sample-tag { position: absolute; top: 10px; left: 10px; }
body:not(.hp) .pf-videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
@media (min-width: 768px) { body:not(.hp) .pf-videos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; } }
body:not(.hp) .pf-videos a { display: grid; gap: 10px; color: var(--sb-ink); text-decoration: none; }
body:not(.hp) .pf-thumb { display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--sb-r-sm); background: var(--sb-dark); }
body:not(.hp) .pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body:not(.hp) .pf-videos strong { font-size: 15px; line-height: 1.5; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body:not(.hp) .pf-videos a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
/* OD-27 6~8번 블로그 학습가이드 카드 */
body:not(.hp) .blog-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { body:not(.hp) .blog-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body:not(.hp) .blog-cards a { display: grid; gap: 8px; color: var(--sb-ink); text-decoration: none; }
body:not(.hp) .blog-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--sb-r-sm); background: var(--sb-bg-2); }
body:not(.hp) .blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body:not(.hp) .blog-cards strong { font-size: 16px; line-height: 1.5; }
body:not(.hp) .blog-cards span:not(.blog-thumb) { font-size: 14px; line-height: 1.6; color: var(--sb-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body:not(.hp) .blog-cards time { font-size: 13px; color: var(--sb-ink-3); }
body:not(.hp) .blog-cards a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
/* OD-27 — 분야 소개 쪽 사진 카드(홈·과정 목록과 같은 모양) */
body:not(.hp) .lp-cards--photo .lp-card a { padding-top: 20px; }
body:not(.hp) .lp-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--sb-r-sm); background: var(--sb-bg-2); margin-bottom: 6px; }
body:not(.hp) .lp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .24s var(--sb-ease); }
@media (hover: hover) and (pointer: fine) { body:not(.hp) .lp-card a:hover .lp-card-img img { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { body:not(.hp) .lp-card a:hover .lp-card-img img { transform: none; } }


/* 2026-10-03 Impeccable 감지 undersized-ui-text — 신뢰 근거 범위 표시 10px → 12px(읽히는 크기) */
body:not(.hp) .proof-scope-badge { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--sb-ink-3); }

/* 2026-10-04 캠퍼스 신뢰 근거: 자동 채움(240px)이라 2개일 때 오른쪽 1/3이 비던 것 → 과정 목록과 같은 2단 */
@media (min-width: 960px) { body:not(.hp) #campus-detail-root .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }

/* 2026-10-04 분야 첫 화면(원장 "여백도 많고 맞춘 것 같은데 이상해 보임"): 왼쪽에 이 분야 자격증 바로가기, 사진은 3:2 로 낮춰 띠 높이를 줄인다 */
body:not(.hp) .lp-hero-certs { list-style: none; margin: 4px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body:not(.hp) .lp-hero-certs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--sp-paper); border: 1px solid var(--sb-line); color: var(--sb-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
@media (hover: hover) and (pointer: fine) { body:not(.hp) .lp-hero-certs a:hover { border-color: var(--sb-brand); color: var(--sb-brand); } }
body:not(.hp) .lp-hero-certs a:focus-visible { outline: 3px solid var(--sb-brand); outline-offset: 2px; }
body:not(.hp) .lp-hero-grid--cat .lp-hero-photo img { aspect-ratio: 3 / 2; }

/* ── 분야 첫 화면(원장 2026-10-04: 시안 B → "띠는 없애고 색상도 블랙을 기준으로" + 사진 모션 "② 3장 번갈아 + ④ 마우스 따라") ──
   PC: 사진이 오른쪽 화면 끝까지(덮개 없음, 예시 안내는 사진 왼쪽 아래). 왼쪽 = 검정 바탕 위로 분야 색 빛 두 겹이 천천히 흐른다.
   사진: 분야 사진 + 자격증 이미지 2장이 번갈아(site-motion.js), 마우스를 따라 살짝(PC). 움직임 줄이기면 첫 장 고정·빛 정지. 자격 쪽 머리는 그대로. */
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed { position: relative; overflow: hidden; isolation: isolate; background: #0c0d10; color: #fff; border-bottom: 0; }
body:not(.hp) .lp-hero--bleed::before, body:not(.hp) .lp-hero--bleed::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -25% 30% -25% -20%; }
body:not(.hp) .lp-hero--bleed::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--fam-accent) 38%, transparent), transparent); opacity: .55; }
body:not(.hp) .lp-hero--bleed::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--fam-bg) 70%, transparent), transparent); opacity: .7; transform: translate(30%, 35%); }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed h1, body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .lp-count { color: #fff; }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .cx-summary { color: rgba(255, 255, 255, .8); }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .cx-fam { color: var(--fam-accent); }
body:not(.hp) .lp-hero--bleed .lp-hero-certs a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: #fff; }
@media (hover: hover) and (pointer: fine) { body:not(.hp) .lp-hero--bleed .lp-hero-certs a:hover { border-color: var(--fam-accent); color: #fff; background: rgba(255, 255, 255, .12); } }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .cx-cta:not(.cx-cta--primary) { background: transparent; border-color: rgba(255, 255, 255, .32); color: #fff; }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .cx-cta:not(.cx-cta--primary):hover { border-color: #fff; }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed :focus-visible { outline-color: #fff; }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .lp-photo-note { position: absolute; left: 10px; right: auto; bottom: 10px; z-index: 1; max-width: calc(100% - 20px); margin: 0; padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, .9); color: var(--sb-ink-2); }
/* 사진 묶음: 모든 장을 겹쳐 두고 is-on 만 보인다. 묶음은 마우스 이동 여유만큼 바깥으로(가장자리가 비지 않게) */
body:not(.hp) .lp-hero--bleed .lp-hero-photo { position: relative; overflow: hidden; aspect-ratio: 3 / 2; margin: 0; border-radius: var(--sb-r-sm); }
body:not(.hp) .lp-hero--bleed .lp-slides { position: absolute; inset: -3%; transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
body:not(.hp) .lp-hero--bleed .lp-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; border-radius: 0; aspect-ratio: auto; }
body:not(.hp) .lp-hero--bleed .lp-slide.is-on { opacity: 1; }
body:not(.hp) .lp-hero--bleed .lp-hero-photo > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes lp-tint-a { 0% { opacity: .65; transform: translate(-6%, -8%) scale(1); } 50% { opacity: .25; transform: translate(10%, 6%) scale(1.15); } 100% { opacity: .6; transform: translate(-2%, 12%) scale(.95); } }
  @keyframes lp-tint-b { 0% { opacity: .5; transform: translate(34%, 30%) scale(1.1); } 50% { opacity: .85; transform: translate(14%, 6%) scale(.9); } 100% { opacity: .55; transform: translate(26%, -12%) scale(1.05); } }
  body:not(.hp) .lp-hero--bleed::before { animation: lp-tint-a 16s ease-in-out infinite alternate; }
  body:not(.hp) .lp-hero--bleed::after { animation: lp-tint-b 19s ease-in-out infinite alternate; }
  body:not(.hp) .lp-hero--bleed .lp-slide { transition: opacity 1.2s ease, transform 6s ease-out; transform: scale(1.06); }
  body:not(.hp) .lp-hero--bleed .lp-slide.is-on { transform: scale(1); }
  body:not(.hp) .lp-hero--bleed .lp-hero-photo .lp-slide, body:not(.hp) .lp-hero--bleed .lp-hero-photo > img { animation: none; }
  body:not(.hp) .lp-hero--bleed .lp-hero-photo { animation: m-photo .9s cubic-bezier(.2,.7,.2,1) both; }
}
@media (min-width: 960px) {
  body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed { padding: 0; }
  /* Codex PR #60 P2 — 100vw 는 일반 스크롤바(리눅스·윈도 15px)까지 포함해 글 시작선이 다른 줄보다 7px 어긋난다 →
     첫 화면 자체 폭(컨테이너 단위 cqw = 스크롤바 뺀 실제 폭) 기준. 미지원 브라우저는 앞줄(100vw)로 */
  body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed { container-type: inline-size; }
  body:not(.hp) .lp-hero--bleed .lp-hero-grid { max-width: none; margin: 0; padding: 0 0 0 max(var(--sb-gutter), calc((100vw - var(--sb-wrap)) / 2)); padding-left: max(var(--sb-gutter), calc((100cqw - var(--sb-wrap)) / 2)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
  body:not(.hp) .lp-hero--bleed .cx-hero-copy { align-self: center; margin: 64px 56px 64px 0; }
  body:not(.hp) .lp-hero--bleed .lp-hero-photo { aspect-ratio: auto; height: clamp(460px, 38vw, 580px); border-radius: 0; }
}

/* 자격 쪽(원장 2026-10-04 "자격증 페이지도"): 분야 쪽과 같은 검정·사진 끝까지 틀. 그 아래 "수업 정보" 표는 검정 위 반투명 칸으로 넓게 */
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .lp-info { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .lp-info :is(.lp-info-title, dt, dd, p, span, strong, li) { color: rgba(255, 255, 255, .86); }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .lp-info :is(.lp-info-title, strong) { color: #fff; }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .lp-info a { color: #fff; }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .lp-type { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .status-qualifier-badge { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
body:not(.hp) .cx-hero.lp-hero.lp-hero--bleed .badge--consult { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
@media (min-width: 960px) {
  body:not(.hp) .lp-hero--bleed .lp-hero-grid .lp-info { grid-column: 1 / -1; margin: 0 max(var(--sb-gutter), calc((100vw - var(--sb-wrap)) / 2)) 48px 0; margin-right: max(var(--sb-gutter), calc((100cqw - var(--sb-wrap)) / 2)); }
}
@media (max-width: 959px) { body:not(.hp) .lp-hero--bleed .lp-hero-grid { padding-bottom: 32px; } }

/* ── 나머지 하위 쪽 첫 화면(원장 2026-10-04 "다른 곳도 적용") — 사진 없는 띠(section.detail-hero)도 같은 검정 바탕 + 학원 색(파랑·남색) 빛 흐름 ──
   글·링크·버튼을 검정 위 색으로 다시 맞춘다. 위쪽 길잡이 줄(breadcrumb)은 흰 바탕으로 돌려 첫 화면과 분리. 캠퍼스 쪽 정보 카드는 흰 카드 그대로. */
body:not(.hp) section.detail-hero { position: relative; overflow: hidden; isolation: isolate; background: #0c0d10; color: #fff; border-bottom: 0; padding: 56px 0 52px; }
body:not(.hp) section.detail-hero::before, body:not(.hp) section.detail-hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -60% 20% -60% -15%; }
body:not(.hp) section.detail-hero::before { background: radial-gradient(closest-side, rgba(47, 107, 255, .42), transparent); opacity: .6; }
body:not(.hp) section.detail-hero::after { background: radial-gradient(closest-side, rgba(99, 70, 255, .34), transparent); opacity: .5; transform: translate(45%, 20%); }
@media (prefers-reduced-motion: no-preference) {
  body:not(.hp) section.detail-hero::before { animation: lp-tint-a 17s ease-in-out infinite alternate; }
  body:not(.hp) section.detail-hero::after { animation: lp-tint-b 21s ease-in-out infinite alternate; }
}
body:not(.hp) main > #breadcrumb-mount:has(+ section.detail-hero) { background: transparent; box-shadow: none; clip-path: none; }
body:not(.hp) main > #breadcrumb-mount:has(+ section.detail-hero) + section.detail-hero { padding-top: 56px; }
body:not(.hp) section.detail-hero :is(h1, h2, h3, strong) { color: #fff; }
body:not(.hp) section.detail-hero p, body:not(.hp) section.detail-hero .campus-hero-meta, body:not(.hp) section.detail-hero .lead { color: rgba(255, 255, 255, .8) !important; }
body:not(.hp) section.detail-hero .article-date { color: rgba(255, 255, 255, .62) !important; }
body:not(.hp) section.detail-hero :is(.cat-tag, .section-tag.is-info, .eyebrow) { color: #9db8ff; background: transparent; }
body:not(.hp) section.detail-hero a:not(.cta-btn):not(.pill-btn):not(.cx-cta) { color: #fff; }
body:not(.hp) section.detail-hero .pill-btn { background: transparent; border-color: rgba(255, 255, 255, .32); color: #fff; }
body:not(.hp) section.detail-hero .pill-btn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
body:not(.hp) section.detail-hero .detail-cta-row .cta-btn { background: var(--sb-accent); color: var(--sb-accent-ink); }
body:not(.hp) section.detail-hero .detail-cta-row .cta-btn:hover { background: var(--sp-accent-hover); color: var(--sb-accent-ink); }
body:not(.hp) section.detail-hero :focus-visible { outline-color: #fff; }
/* 캠퍼스 쪽: 탭·사진 안내·작은 사진 고르기를 검정 위 색으로. 주소·전화·운영시간 카드는 흰 카드라 그대로 읽힌다 */
body:not(.hp) #campus-detail-root .campus-tabs { border-bottom-color: rgba(255, 255, 255, .16); }
body:not(.hp) #campus-detail-root .campus-tabs a { color: rgba(255, 255, 255, .62); }
body:not(.hp) #campus-detail-root .campus-tabs a:hover, body:not(.hp) #campus-detail-root .campus-tabs a[aria-current="page"] { color: #fff; }
body:not(.hp) #campus-detail-root .campus-tabs a[aria-current="page"] { border-bottom-color: var(--sb-accent); }
body:not(.hp) #campus-detail-root .campus-photo-note { color: rgba(255, 255, 255, .62) !important; }
body:not(.hp) #campus-detail-root .campus-thumb[aria-pressed="true"] { border-color: #fff; }
body:not(.hp) #campus-detail-root .campus-info .campus-hours-note { color: var(--sb-ink-3) !important; }
body:not(.hp) #campus-detail-root .campus-info :is(strong, .campus-info-main) { color: var(--sb-ink); }