/* ══════════════════════════════════════════════════════════════
   표쌤코딩 하위 페이지 — 메인(clean-2026.css)과 무드 통일
   ▸ 맨 마지막 로드. redesign-content/misc/about.css 위에 덮어씀.
   ▸ 목적: 메인에서 클릭해 들어왔을 때 스타일이 튀지 않게.
     떠 있는 알약 네비 → 붙은 흰 바 / 형광펜·그라디언트 제거 /
     큰 라운드·그림자 제거 → 1px 테두리 / 알약 칩 → 사각 라벨.
   ▸ 주의: redesign-content.css 가 --c-* 토큰을 이미 쓰고 있어
     여기서는 --k-* 접두어를 써서 기존 토큰을 건드리지 않는다.
   ══════════════════════════════════════════════════════════════ */

:root{
  --k-ink:#161d29; --k-ink-2:#4b5666; --k-ink-3:#8b95a5;
  --k-line:#e3e6eb; --k-line-2:#eef0f4;
  --k-blue:#1D5FD0; --k-blue-dark:#164BA6; --k-blue-soft:#F1F6FE;
  --k-bg:#ffffff; --k-bg-2:#F7F8FA;
  --k-r:8px; --k-r-sm:4px;
}

/* ── 배경: 오로라/노이즈/그라디언트 레이어 제거 ───────────── */
html{ background:var(--k-bg) !important; }
body{ background:var(--k-bg) !important; }
body::before,body::after{ display:none !important; content:none !important; background:none !important; }

/* ══ 네비게이션 — 떠 있는 알약 → 화면에 붙은 흰 바 (메인과 동일) ══ */
.navbar{
  position:sticky !important; top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; max-width:none !important;
  margin:0 !important; transform:none !important;
  border:none !important; border-bottom:1px solid var(--k-line) !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  padding:0 28px !important;
  height:66px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:16px !important;
  z-index:900 !important;
}
/* 상세 페이지는 .nav-logo 에 인라인 그라디언트가 박혀 있어 !important 로 덮는다 */
.navbar .nav-logo{
  background:var(--k-blue) !important; background-image:none !important;
  color:#fff !important; box-shadow:none !important;
  width:32px !important; height:32px !important; line-height:32px !important;
  border-radius:6px !important; font-size:1rem !important;
}
.nav-title strong{ font-size:1.05rem !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--k-ink) !important; }
.nav-title small{ font-size:.62rem !important; letter-spacing:.12em !important; color:var(--k-ink-3) !important; }

.nav-pill{
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:var(--k-r-sm) !important;
  font-size:.95rem !important; font-weight:600 !important;
  color:#39404d !important; padding:9px 15px !important;
}
.nav-pill:hover{ background:var(--k-blue-soft) !important; color:var(--k-blue) !important; }
.nav-pill.active{ background:var(--k-blue-soft) !important; color:var(--k-blue) !important; font-weight:700 !important; }

/* 상세 페이지 "◀ 목록" 버튼 */
.nav-back{
  background:#fff !important; color:var(--k-ink) !important;
  border:1px solid #cdd3dc !important; border-radius:var(--k-r-sm) !important;
  box-shadow:none !important; font-weight:600 !important; font-size:.9rem !important;
  padding:9px 16px !important;
}
.nav-back:hover{ border-color:var(--k-blue) !important; color:var(--k-blue) !important; background:#fff !important; }

/* 네비가 fixed → sticky 로 바뀌었으므로 본문 상단 여백 보정 */
.page-wrap{ padding-top:0 !important; }

/* ══ 히어로 (커리큘럼 상세) ══ */
.hero{
  background:var(--k-bg-2) !important; background-image:none !important;
  border-bottom:1px solid var(--k-line) !important;
  padding:52px 0 46px !important;
}
.hero::before,.hero::after{ display:none !important; content:none !important; background:none !important; }
/* 알약 eyebrow → 작은 사각 라벨 (내용이 실제 정보라 유지하되 납작하게) */
.hero-badge{
  background:var(--k-blue-soft) !important; color:var(--k-blue) !important;
  border:1px solid #cfe0fb !important; border-radius:3px !important;
  font-size:.74rem !important; font-weight:600 !important;
  padding:4px 9px !important; letter-spacing:0 !important; box-shadow:none !important;
}
.hero-badge-dot{ display:none !important; }
.hero h1{
  color:var(--k-ink) !important;
  font-size:2.3rem !important; font-weight:800 !important;
  letter-spacing:-.035em !important; line-height:1.32 !important;
}
/* 노란 형광펜 하이라이트 제거 (redesign-content.css:137 무력화) */
.hero h1 .grad,.grad{
  background:none !important; background-image:none !important;
  -webkit-background-clip:initial !important; background-clip:initial !important;
  -webkit-text-fill-color:var(--k-blue) !important; color:var(--k-blue) !important;
  padding:0 !important; border-radius:0 !important;
}
.hero-sub{ color:var(--k-ink-2) !important; font-size:1rem !important; line-height:1.75 !important; }

/* about/inquiry 히어로 */
.hero-banner{
  background:var(--k-bg-2) !important; background-image:none !important;
  border:1px solid var(--k-line) !important; border-radius:var(--k-r) !important;
  box-shadow:none !important;
}

/* ══ 섹션 헤더 ══ */
.sec-label{ color:var(--k-blue) !important; font-weight:700 !important; letter-spacing:0 !important; }
.sec-title{ color:var(--k-ink) !important; font-weight:800 !important; letter-spacing:-.035em !important; }
.sec-sub{ color:var(--k-ink-3) !important; }
.divider{ background:var(--k-line-2) !important; }

/* ══ 카드류 — 큰 라운드+그림자 → 얇은 테두리 평면 ══ */
.card,.unit-card,.work-item,.official-card,.glass-card,.program-card,
.overview-banner,.goal-banner,.phase-section,.metric-card{
  border-radius:var(--k-r) !important;
  border:1px solid var(--k-line) !important;
  box-shadow:none !important;
  background:#fff !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.card:hover,.unit-card:hover,.work-item:hover,.program-card:hover{
  transform:none !important;
  border-color:#b9c6da !important;
  box-shadow:0 3px 12px rgba(22,29,41,.07) !important;
}
.overview-banner,.goal-banner{ background:var(--k-bg-2) !important; }
/* 카드 우하단에 깔린 220px 보라색 원형 글로우 제거 (style.css:274 .glass-card::after 등) */
.glass-card::after,.smartfarm-step-card::after,.card::after{ display:none !important; content:none !important; background:none !important; }
/* 장식용 영문 브랜드 줄은 숨김 */
.company-name{ display:none !important; }
/* .eyebrow 는 숨기지 말 것 — 디자인공방 모달의 회차번호(#designModalNumber "Session 01")와
   과학탐험대 2단계의 한글 라벨이 이 클래스를 쓴다. 장식 영문은 HTML에서 이미 제거했으므로
   여기서는 납작한 라벨로 스타일만 정리한다. */
.eyebrow{
  display:inline-flex !important; align-items:center !important;
  align-self:flex-start !important; width:auto !important;
  background:var(--k-blue-soft) !important; color:var(--k-blue) !important;
  border:1px solid #cfe0fb !important; border-radius:3px !important;
  font-size:.72rem !important; font-weight:600 !important;
  padding:3px 8px !important; letter-spacing:0 !important;
  text-transform:none !important; box-shadow:none !important;
}
.ov-label{ color:var(--k-ink-3) !important; font-size:.78rem !important; }
.ov-value{ color:var(--k-ink) !important; font-weight:700 !important; }

/* 지표 숫자 */
.metric-num{ color:var(--k-blue) !important; font-weight:800 !important; }
.metric-label{ color:var(--k-ink-2) !important; }

/* 아이콘 컬러 3종(파랑/초록/보라) → 단색 통일 */
.mv-icon,.mv-icon.blue,.mv-icon.green,.mv-icon.purple,
.biz-icon,.ci-icon,.addr-icon,.phase-icon{
  background:var(--k-blue-soft) !important; background-image:none !important;
  color:var(--k-blue) !important; box-shadow:none !important;
  border-radius:var(--k-r-sm) !important;
}

/* ══ 칩·태그 — 알약 → 작은 사각 라벨 ══ */
.tag-item,.unit-tag,.unit-kit,.chip,.label,.tag-list > li,
.value-tag,.gallery-tag,.kit-chip,.grade-chip,.kit-badge,
.prep-badge,.perm-tag,.char-badge,.video-badge,.badge-item,
.chip-amber,.chip-purple,.chip-blue,.chip-green,.chip-red{
  display:inline-flex !important; align-items:center !important;
  /* flex 컬럼 카드의 직계 자식일 때 align-items:stretch 로 전폭이 되는 것 방지 */
  align-self:flex-start !important; width:auto !important;
  border-radius:3px !important;
  font-size:.72rem !important; font-weight:600 !important;
  padding:3px 8px !important; letter-spacing:0 !important;
  border:1px solid var(--k-line) !important;
  background:#fff !important; color:var(--k-ink-2) !important;
  box-shadow:none !important;
}
.unit-tag{ border-color:#cfe0fb !important; background:var(--k-blue-soft) !important; color:var(--k-blue) !important; }
.unit-num{
  background:var(--k-blue) !important; background-image:none !important;
  color:#fff !important; border-radius:3px !important;
  font-size:.72rem !important; font-weight:700 !important; box-shadow:none !important;
}
.unit-title{ color:var(--k-ink) !important; font-weight:700 !important; letter-spacing:-.03em !important; }
.unit-desc{ color:var(--k-ink-2) !important; font-size:.88rem !important; line-height:1.6 !important; }
.unit-footer{ border-top:1px solid var(--k-line-2) !important; }

/* ══ 버튼 ══ */
.official-btn,.btn-primary,.button-primary{
  background:var(--k-blue) !important; color:#fff !important;
  border:1px solid var(--k-blue) !important; border-radius:var(--k-r-sm) !important;
  box-shadow:none !important; font-weight:700 !important;
}
.official-btn:hover,.btn-primary:hover,.button-primary:hover{
  background:var(--k-blue-dark) !important; border-color:var(--k-blue-dark) !important;
}
.button-secondary,.btn-ghost{
  background:#fff !important; color:var(--k-ink) !important;
  border:1px solid #cdd3dc !important; border-radius:var(--k-r-sm) !important;
  box-shadow:none !important; font-weight:600 !important;
}

/* ══ 작품 갤러리 ══ */
.work-thumb{ border-radius:var(--k-r) !important; }

/* ══ 가독성 버그 수정 (기존 style.css 문제) ══
   style.css:1358 `.science-info-card p{color:var(--muted)}` 가
   style.css:1345 `.science-info-card-accent p{color:#fff}` 를
   같은 specificity + 뒤 선언으로 덮어써서, 파란 배경 위에 어두운 본문이 깔림. */
.science-info-card-accent{ background:var(--k-blue) !important; background-image:none !important; border-color:var(--k-blue) !important; }
.science-info-card-accent h3,.science-info-card-accent p,.science-info-card-accent{ color:#fff !important; }
.science-info-card-accent .science-info-icon{ background:rgba(255,255,255,.18) !important; color:#fff !important; border-radius:var(--k-r-sm) !important; }

/* ══ 푸터 — 메인과 동일한 연회색 ══ */
.site-footer{
  background:var(--k-bg-2) !important; background-image:none !important;
  border-top:1px solid var(--k-line) !important;
  color:var(--k-ink-2) !important;
  padding:34px 0 30px !important;
  margin-top:56px !important;
  text-align:center !important;
}
.site-footer *{ color:var(--k-ink-2) !important; }
.footer-info{ font-size:.83rem !important; line-height:1.85 !important; color:var(--k-ink-2) !important; }
.footer-info strong{ color:var(--k-ink) !important; }

/* ══ about 좌측 사이드바 / 모바일 하단탭 ══ */
.mobile-bottom-nav{ border-top:1px solid var(--k-line) !important; background:#fff !important; box-shadow:none !important; }

/* ══ 반응형 ══ */
@media (max-width:900px){
  .navbar{ height:60px !important; padding:0 18px !important; }
  .hero{ padding:38px 0 34px !important; }
  .hero h1{ font-size:1.8rem !important; }
}