/* ============================================================
   미래일터 탐험대 · 기본 레이아웃 · 타이포 · 헤더/푸터
   로드 순서: tokens.css → base.css → comp.css → anim.css
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 56px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:450; -webkit-font-smoothing:antialiased;
}

/* ── 한글 줄바꿈 (14.design-mo 가 "가장 값어치 있는 3줄"이라 명시한 규칙) ── */
body,h1,h2,h3,h4,h5,h6,p,li,td,th,button,label,a,dt,dd,figcaption,summary{
  word-break:keep-all; overflow-wrap:anywhere;
}
h1,h2,h3{ text-wrap:balance; }
p,li{ text-wrap:pretty; }

h1,h2,h3,h4{ color:var(--text-strong); line-height:1.3; margin:0 0 var(--sp-4); font-weight:800; letter-spacing:-.02em; }
h1{ font-size:var(--fs-h1); } h2{ font-size:var(--fs-h2); } h3{ font-size:var(--fs-h3); font-weight:750; }
p{ margin:0 0 var(--sp-4); }
a{ color:var(--brand-link); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:hover{ text-decoration-thickness:2.5px; }
img,svg,video{ max-width:100%; height:auto; display:block; }
ul,ol{ padding-left:1.25em; margin:0 0 var(--sp-4); }
li+li{ margin-top:var(--sp-2); }
strong,b{ font-weight:750; color:var(--text-strong); }
code,kbd{ font-family:ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,monospace;
  font-size:.92em; background:var(--surface-2); padding:.12em .4em; border-radius:6px; }
:focus-visible{ outline:3px solid var(--brand-link); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--planet); color:#fff; }
hr{ border:0; border-top:1px solid var(--border); margin:var(--sp-8) 0; }

/* ── 레이아웃 ─────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:var(--content-w); }
.wrap--wide{ max-width:1400px; }
.section{ padding-block:clamp(40px,7vw,88px); }
.section--tight{ padding-block:clamp(28px,4vw,48px); }
.section--surface{ background:var(--surface); }
.section--tint{ background:var(--planet-tint); }
.section--space{ background:var(--space-1); color:var(--space-text); }
.section--space h1,.section--space h2,.section--space h3{ color:#fff; }
/* on-dark 오버라이드 — 컴포넌트 토큰(--text-strong/--text-muted)은 밝은 배경 기준이라
   우주 섹션 안에서 그대로 두면 #0F172A on #0B1533 = 1.01:1 로 글자가 사라진다. */
.section--space h4,.section--space h5,.section--space h6{ color:#fff; }
.section--space .btn--outline{ color:#fff; border-color:rgba(255,255,255,.34); }
.section--space .btn--outline:hover{ color:var(--planet); border-color:var(--planet); background:var(--planet-tint); }
.section--space .timeline__title{ color:#fff; }
.section--space .timeline__desc,
.section--space .muted,
.section--space .small.muted{ color:var(--space-muted); }
.stack>*+*{ margin-top:var(--sp-4); }
.center{ text-align:center; }
.lead{ font-size:var(--fs-lead); color:var(--text); line-height:1.65; }
.muted{ color:var(--text-muted); }
.small{ font-size:var(--fs-small); }
.mono-num{ font-variant-numeric:tabular-nums; }

.grid{ display:grid; gap:var(--gut); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.row--between{ justify-content:space-between; }
.spacer{ flex:1 1 auto; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:var(--sp-4); top:-60px; z-index:1000;
  background:var(--accent); color:#fff; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius); font-weight:700; transition:top var(--dur-2) var(--ease); }
.skip-link:focus{ top:var(--sp-3); }
/* skip-link 목적지. <main tabindex="-1"> 이라야 실제로 포커스가 옮겨간다.
   마우스 클릭 시 불필요한 포커스 링이 뜨지 않도록 아웃라인만 제거한다
   (:focus-visible 은 살아 있으므로 키보드 사용자에겐 그대로 보인다). */
#main:focus:not(:focus-visible){ outline:none; }

/* ── 버튼 (onae-btn 계승 + 아동친화 확장) ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--tap-min); padding:0 var(--sp-5);
  border:2px solid transparent; border-radius:var(--radius-kid);
  font-family:var(--font-sans); font-size:16px; font-weight:700; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap; background:none; color:inherit;
  transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:scale(.97); }
.btn--lg{ min-height:54px; padding:0 var(--sp-6); font-size:17px; }
/* 작은 버튼도 --tap-min(44px) 을 지킨다 — 아동 사용자 기준 오탭 방지 */
.btn--sm{ min-height:var(--tap-min); padding:0 var(--sp-4); font-size:14px; border-width:1.5px; }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 4px 0 var(--accent-strong); }
.btn--primary:hover{ background:var(--accent-strong); box-shadow:0 2px 0 var(--accent-strong); transform:translateY(2px); }
.btn--planet{ background:var(--planet); color:#fff; box-shadow:0 4px 0 var(--planet-ink); }
.btn--planet:hover{ background:var(--planet-2); box-shadow:0 2px 0 var(--planet-ink); transform:translateY(2px); }
.btn--secondary{ background:var(--brand); color:#fff; }
.btn--secondary:hover{ background:var(--brand-strong); }
.btn--outline{ background:transparent; border-color:var(--border); color:var(--text-strong); }
.btn--outline:hover{ border-color:var(--planet); color:var(--planet); background:var(--planet-tint); }
.btn--ghost{ background:transparent; color:var(--brand-link); padding:0 var(--sp-3); border:0; }
.btn--on-space{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(6px); box-shadow:none; }
.btn--on-space:hover{ background:rgba(255,255,255,.22); }
.btn[aria-disabled="true"],.btn:disabled{ opacity:.45; pointer-events:none; }

/* ── 헤더 (onae-header 구조·클래스명 계승) ────────────── */
.site-header{
  position:sticky; top:0; z-index:900; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border); transition:box-shadow var(--dur-2) var(--ease);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-1); }
.site-header__inner{ display:flex; align-items:center; gap:var(--sp-4);
  height:var(--header-h-mobile); max-width:var(--container); margin-inline:auto; padding-inline:var(--gut); }
@media (min-width:641px){ .site-header__inner{ height:var(--header-h); } }
/* flex:0 1 auto + min-width:0 이라야 320px 에서 헤더가 줄어든다.
   (0 0 auto 였을 때 로고 152 + 유틸 158 + 좌우 패딩 28 = 338px → 20px 가로 스크롤) */
.site-header__logo{ display:flex; align-items:center; gap:var(--sp-2); text-decoration:none;
  flex:0 1 auto; min-width:0; min-height:var(--tap-min); }
.site-header__logo-mark{ width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; font-size:19px;
  background:linear-gradient(140deg,var(--brand),var(--planet)); border-radius:11px; color:#fff; }
.site-header__logo-text{ font-weight:850; font-size:17px; color:var(--text-strong); letter-spacing:-.03em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 초소형 화면(iPhone SE 1세대급)에서는 로고 텍스트를 접는다.
   .site-header__logo 에 aria-label 이 있으므로 접근 가능한 이름은 그대로 유지된다. */
@media (max-width:359px){
  .site-header__logo-text{ display:none; }
}
.site-header__nav{ display:none; align-items:center; gap:var(--sp-2); margin-left:var(--sp-3); }
@media (min-width:1025px){ .site-header__nav{ display:flex; } }
.site-header__link{ position:relative; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius);
  color:var(--text); text-decoration:none; font-weight:650; font-size:15px; }
.site-header__link:hover{ background:var(--surface-2); color:var(--text-strong); }
.site-header__link[aria-current="page"]{ color:var(--brand); background:var(--brand-tint); }
.site-header__utils{ display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; flex:0 0 auto; }
.site-header__burger{ width:var(--tap-min); height:var(--tap-min); border:0; background:transparent;
  border-radius:var(--radius-sm); display:grid; place-items:center; gap:5px; cursor:pointer; padding:11px 10px; }
@media (min-width:1025px){ .site-header__burger{ display:none; } }
.site-header__burger span{ display:block; width:22px; height:2.5px; background:var(--text-strong);
  border-radius:2px; transition:transform var(--dur-2) var(--ease),opacity var(--dur-1); }
.site-header__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
.site-header__mobile{ border-top:1px solid var(--border); background:var(--bg); padding:var(--sp-3) var(--gut) var(--sp-5); }
.site-header__mobile[hidden]{ display:none; }
.site-header__mobile-link{ display:block; padding:var(--sp-3) var(--sp-2); border-radius:var(--radius);
  color:var(--text-strong); text-decoration:none; font-weight:700; font-size:16px; min-height:var(--tap-min); }
.site-header__mobile-link:hover{ background:var(--surface-2); }

/* ── 푸터 ─────────────────────────────────────────────── */
.site-footer{ background:var(--space-0); color:var(--space-muted); padding-block:var(--sp-8) var(--sp-6);
  font-size:var(--fs-small); }
.site-footer a{ color:#C7D6F5; }
/* 푸터 제목은 h2 (contentinfo 랜드마크의 최상위 제목).
   h4 였을 때 본문 h1/h2 다음에 h4 가 와서 전 페이지에 헤딩 레벨 건너뜀이 생겼다.
   시각 크기는 아래에서 그대로 유지한다.
   h4 는 아직 재생성되지 않는 404.html 을 위한 폴백이다. */
.site-footer h2,.site-footer h4{ color:#fff; font-size:15px; font-weight:800; line-height:1.3;
  letter-spacing:-.02em; margin:0 0 var(--sp-3); }
.site-footer__grid{ display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:var(--sp-6); border-bottom:1px solid rgba(255,255,255,.12); }
.site-footer__links{ list-style:none; padding:0; margin:0; }
.site-footer__links li+li{ margin-top:var(--sp-2); }
.site-footer__bottom{ padding-top:var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5);
  align-items:center; justify-content:space-between; }
.site-footer__credit{ margin:0; line-height:1.65; max-width:70ch; }

/* ── 브레드크럼 ───────────────────────────────────────── */
.crumb{ font-size:var(--fs-small); color:var(--text-muted); padding-block:var(--sp-4) 0; }
.crumb ol{ display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; padding:0; margin:0; }
.crumb li+li::before{ content:"›"; margin-right:var(--sp-2); color:var(--border); }
.crumb a{ color:var(--text-muted); }
/* 우주(다크) 섹션 안의 브레드크럼은 밝은 배경용 --text-muted 로는 2.96:1 밖에 안 나온다 */
.section--space .crumb,.section--space .crumb a,
.hero .crumb,.hero .crumb a{ color:var(--space-muted); }
.section--space .crumb li+li::before,
.hero .crumb li+li::before{ color:rgba(255,255,255,.4); }

/* ── 인쇄 ─────────────────────────────────────────────── */
@media print{
  .site-header,.site-footer,.no-print,.grade-switch,.fab{ display:none !important; }
  body{ font-size:11.5pt; }
  .section{ padding-block:0; }
  .print-only{ display:block !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .page-break{ break-after:page; }
  .avoid-break{ break-inside:avoid; }
}
.print-only{ display:none; }

/* ── 유틸리티 (반복되던 정적 인라인 style= 대체) ───────────
   인라인 style 을 줄여야 CSP 의 style-src 에서 'unsafe-inline' 을 뗄 수 있다. */
.u-on-dark{ color:#fff; }
.u-m0{ margin:0; }
.u-mt-3{ margin-top:var(--sp-3); }
.u-mt-5{ margin-top:var(--sp-5); }
.u-mb-5{ margin-bottom:var(--sp-5); }
.u-measure{ max-width:60ch; }