/* ══════════════════════════════════════════════════════════════
   표쌤코딩 기타 공개 페이지 — 클린 브랜드 재스킨 (오버라이드)
   ▸ 대상: science_exploration(_1/_2), design_workshop, microbit, story 등
           (자체 CSS: science-exploration.css / design-workshop.css / story.css / 인라인)
   ▸ 맨 마지막 로드. 원본 CSS 무수정, !important 로 색/폰트만 덮음.
   ▸ 파랑보라·시안·앰버 테마 → 브랜드 블루 #2E6BD6 클린 라이트(사이트 공통 톤).
   ══════════════════════════════════════════════════════════════ */
:root{
  --m-blue:#2E6BD6; --m-blue-ink:#1F55BC; --m-blue-soft:#EEF3FB;
  --m-ink:#1C2530; --m-ink-2:#5B6675; --m-ink-3:#98A2B0;
  --m-line:#ECEFF3; --m-line-2:#E1E6EC; --m-panel:#F5F8FC;
  --m-yellow:#FFDD2B;
  --m-font:"Pretendard Variable",Pretendard,-apple-system,"Noto Sans KR",sans-serif;
  /* style.css :root 토큰도 브랜드로 */
  --primary:#2E6BD6; --primary-strong:#1F55BC; --accent:#2E6BD6; --violet:#2E6BD6;
  --bg:#fff; --bg-soft:#F5F8FC; --text:#1C2530; --muted:#5B6675;
  --surface:#ffffff; --surface-strong:#ffffff; --line:#ECEFF3;
}

/* ── style.css 공용 컴포넌트(허브/랜딩: microbit 등)도 브랜드로 ── */
.topbar{ background:rgba(255,255,255,.9) !important; border-bottom:1px solid var(--m-line) !important; }
.nav-link{ color:var(--m-ink-2) !important; }
.nav-link.active{ background:var(--m-blue-soft) !important; color:var(--m-blue) !important; border-color:transparent !important; }
.eyebrow{ color:var(--m-blue) !important; }
.section-head h2,.hero h1{ color:var(--m-ink) !important; }
.glass-card{ border-radius:14px !important; }
.program-card{ border-radius:12px !important; border:1px solid var(--m-line) !important; box-shadow:none !important; }
.program-card:hover{ transform:none !important; border-color:var(--m-line-2) !important; box-shadow:0 8px 24px rgba(20,32,48,.07) !important; }
/* 허브 프로그램 카드 썸네일 */
.program-card .card-thumb{ aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:var(--m-panel); display:grid; place-items:center; margin-bottom:14px; position:relative; }
.program-card .card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.program-card .card-thumb .thumb-ph{ color:var(--m-ink-3); font-weight:800; font-size:.95rem; }
.program-card .card-thumb.is-preparing{ border:1px dashed var(--m-line-2); }
.program-card .card-thumb .thumb-badge{ position:absolute; top:8px; right:8px; background:var(--m-ink); color:#fff; font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:999px; }

/* 배경·폰트 */
body{ background:#fff !important; color:var(--m-ink) !important; font-family:var(--m-font) !important; }
body::before{ display:none !important; }
body,.page-wrap,.c,.layout,.main-content,.hero,.stage-card,.gallery-card,.panel{ word-break:keep-all !important; }

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

/* ── 탭 / 사이드바 (story·about 구조) ── */
.tab-btn{ border-radius:8px !important; color:var(--m-ink-2) !important; }
.tab-btn:hover{ background:var(--m-blue-soft) !important; color:var(--m-blue) !important; }
.tab-btn.active{ background:var(--m-blue-soft) !important; color:var(--m-blue) !important; box-shadow:none !important; }
.sidebar-btn{ border-radius:8px !important; color:var(--m-ink-2) !important; }
.sidebar-btn:hover{ background:var(--m-panel) !important; color:var(--m-blue) !important; }
.sidebar-btn.active{ background:var(--m-blue-soft) !important; border:1px solid var(--m-line) !important; color:var(--m-blue) !important; box-shadow:none !important; }
.mobile-bottom-nav .page-tab.active{ color:var(--m-blue) !important; background:var(--m-blue-soft) !important; }
.mobile-bottom-nav .section-tab.active{ background:var(--m-blue-soft) !important; color:var(--m-blue) !important; box-shadow:none !important; }

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

/* hero-banner (story/about형) — 연한 패널 */
.hero-banner{ background:var(--m-panel) !important; border:1px solid var(--m-line) !important; border-radius:12px !important; color:var(--m-ink) !important; }
.hero-banner::before{ display:none !important; }
.hero-banner *{ color:inherit !important; }
.hero-banner .banner-label,.hero-banner .company-name{ color:var(--m-blue) !important; }

/* 섹션 헤더(about형) */
.section-header .label{ color:var(--m-blue) !important; }
.section-header h2{ color:var(--m-ink) !important; }
.section-header p{ color:var(--m-ink-3) !important; }

/* ── science_exploration: stage-* ── */
.stage-card{ background:#fff !important; border:1px solid var(--m-line) !important; border-radius:12px !important; box-shadow:none !important; }
.stage-card:hover{ transform:none !important; border-color:var(--m-line-2) !important; box-shadow:0 8px 24px rgba(20,32,48,.07) !important; }
.stage-card::before{ display:none !important; }
.stage-visual,.stage-visual-placeholder{ background:var(--m-panel) !important; }
.stage-btn{ background:var(--m-blue) !important; color:#fff !important; border:none !important; border-radius:8px !important; box-shadow:none !important; }
.stage-btn:hover{ background:var(--m-blue-ink) !important; }
.stage-status{ background:var(--m-blue-soft) !important; color:var(--m-blue) !important; border-color:transparent !important; }
.stage-tags span,.stage-tags .tag{ background:var(--m-blue-soft) !important; color:var(--m-blue) !important; border-color:transparent !important; }

/* ── story: 갤러리 / 공지 ── */
.gallery-card{ background:#fff !important; border:1px solid var(--m-line) !important; border-radius:12px !important; box-shadow:none !important; }
.gallery-card:hover{ transform:none !important; border-color:var(--m-line-2) !important; box-shadow:0 8px 24px rgba(20,32,48,.07) !important; }
.gallery-thumb{ background:var(--m-panel) !important; }
.notice-tag{ background:var(--m-blue-soft) !important; color:var(--m-blue) !important; border-color:transparent !important; }
.notice-date-badge{ background:var(--m-panel) !important; color:var(--m-ink-2) !important; }
.notice-body{ color:var(--m-ink-2) !important; }

/* ── design_workshop: cyan/orange → 브랜드 ── */
.design-workshop-page .science-home-link{ background:var(--m-blue) !important; box-shadow:none !important; }
.design-workshop-page .science-brand-block,.design-workshop-page .science-info-card-accent{ background:var(--m-panel) !important; }
.design-workshop-page .science-hero-banner{ background:var(--m-blue) !important; }
.design-workshop-page .science-side-link.active{ background:var(--m-blue-soft) !important; color:var(--m-blue) !important; }
.design-workshop-page .design-session-number{ background:var(--m-blue) !important; color:#fff !important; }
.design-workshop-page .evaluation-table th{ background:var(--m-panel) !important; color:var(--m-ink) !important; }
.design-workshop-page .science-week-inline-image{ background:var(--m-panel) !important; }

/* ── 칩 통일 ── */
.chip,.chip-design-person,.chip-design-science,.chip-design-culture,
.chip-amber,.chip-purple,.chip-blue,.chip-green,.chip-red{
  background:var(--m-blue-soft) !important; color:var(--m-blue) !important; border:1px solid transparent !important;
}

/* 라인 아이콘(있으면) */
.ic{ color:var(--m-blue); }

/* ── 스마트팜 큰 갤러리 ── */
.sf-gallery-block{ margin-top:28px; }
.sf-gallery-block .eyebrow{ color:var(--m-blue) !important; }
.sf-gallery-block h2{ color:var(--m-ink); font-size:1.3rem; letter-spacing:-.02em; margin:4px 0 18px; }
.sf-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.sf-gallery figure{ margin:0; border:1px solid var(--m-line); border-radius:12px; overflow:hidden; background:#fff; }
.sf-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--m-panel); }
.sf-gallery figcaption{ padding:12px 15px; font-size:.9rem; font-weight:700; color:var(--m-ink); word-break:keep-all; }
@media(max-width:640px){ .sf-gallery{ grid-template-columns:1fr; } }

/* 인라인 장식 아이콘(이모지 대체) */
.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; }

.stage-visual-icon .ic-in,.kit-icon .ic-in{ width:24px; height:24px; color:var(--m-blue); }

/* ══ 생기 보완 (밋밋·허전 해소) ══ */
.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(--m-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 .grad{ background:linear-gradient(transparent 54%,#FFE98C 54%) !important; -webkit-text-fill-color:var(--m-blue) !important; color:var(--m-blue) !important; padding:0 .06em; border-radius:4px; }
.stage-card,.gallery-card,.card,.panel,.glass-card,.program-card{ box-shadow:0 4px 18px rgba(25,74,152,.07) !important; border-radius:16px !important; }
.stage-card:hover,.gallery-card:hover,.program-card:hover{ transform:translateY(-4px) !important; box-shadow:0 14px 32px rgba(25,74,152,.13) !important; }
.sec-title,.section-head h2,.section-header h2{ position:relative; }
.hero-banner{ background:linear-gradient(135deg,#EAF2FD,#F4F8FE) !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; }