/* ══════════════════════════════════════════════════════════════
   표쌤코딩 수업 콘텐츠 페이지 — 클린 브랜드 재스킨 (오버라이드)
   ▸ 대상: lesson/*_content, microbit, science_* 등 (career_content/_base.css + 페이지별 인라인 <style> 사용)
   ▸ 맨 마지막 로드. _base.css·인라인 스타일 무수정, !important 로 색/폰트만 덮음.
   ▸ 오렌지/레드/보라 테마 → 브랜드 블루 #2E6BD6 클린 라이트(about/inquiry와 동일 톤).
   ▸ 콘텐츠 주제 이모지는 그대로 둠(의미 있는 콘텐츠라 유지).
   ══════════════════════════════════════════════════════════════ */
:root{
  --c-blue:#2E6BD6; --c-blue-ink:#1F55BC; --c-blue-soft:#EEF3FB;
  --c-ink:#1C2530; --c-ink-2:#5B6675; --c-ink-3:#98A2B0;
  --c-line:#ECEFF3; --c-line-2:#E1E6EC; --c-panel:#F5F8FC;
  --c-yellow:#FFDD2B;
  --c-font:"Pretendard Variable",Pretendard,-apple-system,"Noto Sans KR",sans-serif;
}

/* 배경/폰트 — 오렌지 radial 제거, 화이트 + Pretendard + 한글 줄바꿈 */
body{ background:#fff !important; color:var(--c-ink) !important; font-family:var(--c-font) !important; }
body::before{ display:none !important; }
body, .page-wrap, .c, .hero, .unit-card, .ov-item, .goal-banner, .phase-section{ word-break:keep-all !important; }

/* ── 네비 — 메인과 동일(알약형) ── */
.navbar{ background:rgba(255,255,255,.92) !important; border:1px solid var(--c-line) !important; border-radius:20px !important; box-shadow:0 6px 22px rgba(20,24,31,.07) !important; }
.nav-logo{ background:var(--c-blue) !important; box-shadow:none !important; border-radius:12px !important; color:#fff !important; }
.nav-title strong{ color:var(--c-ink) !important; }
.nav-title small{ color:var(--c-ink-3) !important; }
.nav-back{ background:#fff !important; border:1px solid var(--c-line-2) !important; color:#2A3547 !important; }
.nav-back:hover{ background:var(--c-blue-soft) !important; color:var(--c-blue) !important; border-color:transparent !important; }

/* ── 히어로 ── */
.hero::before{ display:none !important; }
.hero-badge{ background:var(--c-blue-soft) !important; border:1px solid color-mix(in srgb,var(--c-blue) 22%,var(--c-line)) !important; color:var(--c-blue) !important; }
.hero-badge-dot{ background:var(--c-yellow) !important; box-shadow:0 0 8px var(--c-yellow) !important; }
.hero h1{ color:var(--c-ink) !important; }
.hero h1 .grad{ background:none !important; -webkit-text-fill-color:var(--c-blue) !important; color:var(--c-blue) !important; }
.hero-sub{ color:var(--c-ink-2) !important; }

/* ── 구분선/섹션 헤더 ── */
.divider{ background:var(--c-line) !important; }
.sec-label{ color:var(--c-blue) !important; }
.sec-title{ color:var(--c-ink) !important; }
.sec-sub{ color:var(--c-ink-3) !important; }

/* ── 칩 통일(클린 라이트 블루) ── */
.chip-amber,.chip-purple,.chip-blue,.chip-green,.chip-red{
  background:var(--c-blue-soft) !important; color:var(--c-blue) !important; border:1px solid transparent !important;
}

/* ── 개요 배너 ── */
.overview-banner .ov-item{ background:#fff !important; border:1px solid var(--c-line) !important; border-radius:12px !important; box-shadow:none !important; }
.ov-label{ color:var(--c-blue) !important; }
.ov-value{ color:var(--c-ink) !important; }
.ov-sub{ color:var(--c-ink-3) !important; }

/* ── 목표 배너 ── */
.goal-banner{ background:var(--c-panel) !important; border:1px solid var(--c-line) !important; border-radius:12px !important; }
.goal-banner h3{ color:var(--c-ink) !important; }
.goal-banner p{ color:var(--c-ink-2) !important; }

/* ── 태그 ── */
.tag-item,.unit-num,.unit-tag{ background:var(--c-blue-soft) !important; color:var(--c-blue) !important; border:1px solid transparent !important; }

/* ── 단계 헤더 ── */
.phase-header{ border-bottom:1px solid var(--c-line) !important; }
.phase-info h3{ color:var(--c-ink) !important; }
.phase-info p{ color:var(--c-ink-3) !important; }

/* ── 작품 갤러리 (콘텐츠 페이지 공용) ── */
.works-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; margin:6px 0 10px; }
.work-item{ border:1px solid var(--c-line); border-radius:12px; overflow:hidden; background:#fff; transition:border-color .15s,box-shadow .15s; }
.work-item:hover{ border-color:var(--c-line-2); box-shadow:0 8px 24px rgba(20,32,48,.07); }
.work-thumb{ aspect-ratio:4/3; background:var(--c-panel); display:grid; place-items:center; position:relative; }
.work-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.work-ph{ width:32px; height:32px; color:var(--c-ink-3); }
.work-thumb .ph-txt{ position:absolute; bottom:9px; font-size:.64rem; color:var(--c-ink-3); font-weight:700; letter-spacing:.03em; }
.work-item figcaption{ padding:10px 12px; font-size:.82rem; color:var(--c-ink); font-weight:700; word-break:keep-all; }

/* prog-icon/phase-icon 이모지 → 라인 SVG */
.prog-icon{ font-size:0 !important; }
.prog-icon .ic{ width:52px; height:52px; color:#fff; }
.phase-icon .ic{ width:26px; height:26px; color:var(--c-blue); }

/* ── 목록 페이지 프로그램 카드(prog-card, *-content.css) — 컬러풀 → 브랜드 클린 ── */
.prog-card{ --c1:#2E6BD6 !important; --c2:#1F55BC !important; background:#fff !important; border:1px solid var(--c-line) !important; border-radius:14px !important; box-shadow:none !important; backdrop-filter:none !important; }
.prog-card:hover{ transform:none !important; border-color:var(--c-line-2) !important; box-shadow:0 8px 24px rgba(20,32,48,.07) !important; }
.prog-card::before{ display:none !important; }
.prog-card .prog-visual{ background:var(--c-blue) !important; }
.prog-card .prog-visual::after{ display:none !important; }
.prog-type-badge{ background:rgba(255,255,255,.22) !important; border-color:rgba(255,255,255,.45) !important; }
.prog-cat{ color:var(--c-blue) !important; }
.prog-title{ color:var(--c-ink) !important; }
.prog-desc{ color:var(--c-ink-2) !important; }
.prog-meta-item{ background:var(--c-panel) !important; border-color:var(--c-line) !important; color:var(--c-ink-2) !important; }
.prog-meta-item .mi-label{ color:var(--c-ink-3) !important; }
.prog-tags span{ background:var(--c-blue-soft) !important; color:var(--c-blue) !important; border-color:transparent !important; }
.prog-footer{ border-top-color:var(--c-line) !important; }
.prog-status{ color:var(--c-ink-3) !important; }
.prog-btn{ background:var(--c-blue) !important; box-shadow:none !important; }
.prog-btn:hover{ background:var(--c-blue-ink) !important; transform:none !important; box-shadow:none !important; }

/* ── 유닛 카드 ── */
.unit-card{ background:#fff !important; border:1px solid var(--c-line) !important; border-radius:12px !important; box-shadow:none !important; }
.unit-card:hover{ transform:none !important; border-color:var(--c-line-2) !important; box-shadow:0 8px 24px rgba(20,32,48,.07) !important; }
.unit-title{ color:var(--c-ink) !important; }
.unit-desc{ color:var(--c-ink-2) !important; }
.unit-footer{ border-top:1px solid var(--c-line) !important; }
.unit-kit{ color:var(--c-ink-3) !important; }

/* 인라인 장식 아이콘(이모지 대체) */
.ic-in{ display:inline-block; width:15px; height:15px; vertical-align:-2px; flex:none; }
.unit-visual .ic-in{ width:30px; height:30px; }
.tab-icon .ic-in{ width:18px; height:18px; }
.session-ai-tag .ic-in{ width:14px; height:14px; }

.unit-title .ic-in{ width:17px; height:17px; color:var(--c-blue); margin-right:3px; }
.kit-icon .ic-in,.stage-visual-icon .ic-in,.prep-icon .ic-in{ width:22px; height:22px; color:var(--c-blue); }

/* ── 자격증 페이지: 공식 안내 바로가기 카드 (기출 이미지 호스팅 대신) ── */
.official-card{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--c-panel); border:1px solid var(--c-line); border-radius:12px; padding:22px 26px; margin:6px 0 10px; }
.official-card .sec-label{ margin-bottom:6px; }
.official-card h3{ margin:0 0 6px; color:var(--c-ink); font-size:1.08rem; letter-spacing:-.02em; word-break:keep-all; }
.official-card p{ margin:0; color:var(--c-ink-2); font-size:.9rem; word-break:keep-all; max-width:52ch; }
.official-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--c-blue); color:#fff !important;
  border-radius:8px; padding:12px 22px; font-weight:700; text-decoration:none; white-space:nowrap; transition:background .15s; }
.official-btn:hover{ background:var(--c-blue-ink); }

/* ══ 생기 보완 (밋밋·허전 해소) — 색밴드·깊이·포인트 되살리기 ══ */
/* 히어로: 소프트 블루 밴드 + 은은한 도트 패턴 */
.hero{ background:linear-gradient(180deg,#E8F0FD 0%,#F4F8FE 55%,#fff 100%) !important; }
.hero::before{ content:"" !important; display:block !important; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:radial-gradient(var(--c-line-2) 1.3px,transparent 1.3px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 85% at 50% 0,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 85% at 50% 0,#000,transparent 72%); }
.hero .c{ position:relative; z-index:1; }
.hero h1{ font-size:clamp(2rem,5vw,3.1rem) !important; }
/* 강조 단어: 옐로우 하이라이터 (브랜드 포인트) */
.hero h1 .grad{ background:linear-gradient(transparent 54%,#FFE98C 54%) !important; -webkit-text-fill-color:var(--c-blue) !important; color:var(--c-blue) !important; padding:0 .06em; border-radius:4px; }
.hero-badge{ box-shadow:0 4px 14px rgba(25,74,152,.08) !important; }

/* 카드: 부드러운 그림자 + 살짝 떠오르는 호버 (입체감) + 라운드↑ */
.unit-card,.ov-item,.goal-banner,.overview-banner .ov-item,.prog-card{ border-radius:16px !important; box-shadow:0 4px 18px rgba(25,74,152,.07) !important; }
.unit-card:hover,.prog-card:hover{ transform:translateY(-4px) !important; border-color:transparent !important; box-shadow:0 14px 32px rgba(25,74,152,.13) !important; }
.work-item{ box-shadow:0 4px 16px rgba(25,74,152,.06) !important; }
.work-item:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(25,74,152,.12) !important; }

/* 섹션 제목: 좌측 옐로우 액센트 바 (포인트) */
.sec-title{ position:relative; padding-left:14px !important; }
.sec-title::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:5px; border-radius:3px; background:var(--c-yellow); }

/* 목록 카드 비주얼: 밋밋한 단색 → 은은한 블루 세로 그라디언트(브랜드 내, 튀지 않게) */
.prog-card .prog-visual{ background:linear-gradient(160deg,var(--c-blue) 0%,#2358B8 100%) !important; }
.prog-icon .ic{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.15)); }

/* 유닛 번호: 옐로우 포인트 살짝 */
.unit-num{ background:var(--c-blue) !important; color:#fff !important; }

/* ══ AI 티 감소: 영어 대문자 라벨 제거 + 아이콘 절제 ══ */
.sec-label,.eyebrow,.eyebrow-text,.section-eyebrow,.pick-label,.banner-label,
.section-header .label,.section-eyebrow .eyebrow-text{ display:none !important; }
.ic-in{ display:none !important; }