/* ============================================================
   40주년 기념 전시회 — 공통 스타일시트
   허브(index.html) + 팀 페이지(team1~11) 전체가 이 파일 하나를 공유한다.
   구조: 0.리셋/토큰 → 1.공통 레이아웃 → 2.허브 전용 → 3.팀 페이지 전용
        → 4.리빌 애니메이션(reduced-motion 가드) → 5.모바일
   ============================================================ */

/* ---------- 폰트 ---------- */
@font-face {
  font-family: 'Freesentation';
  src: url('/fonts/freesentation-regular.woff2?v=6a07845e') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Freesentation';
  src: url('/fonts/freesentation-bold.woff2?v=4f05fc24') format('woff2');
  font-weight: 700;
  font-display: swap;
}
/* semibold(600)는 실제 사용처(.pagectrl .dots a.current)가 스크롤 리디자인으로
   사라지면서 미사용 웨이트가 되어 로드에서 제외함 (460KB 절감).
   파일 자체는 향후 재사용 가능성을 감안해 public/fonts/에 그대로 둠. */

/* ---------- 디자인 토큰 ---------- */
:root {
  --paper:      #FFFFFF;
  --paper-2:    #FAFAF8;
  --ink:        #14110F;
  --ink-mid:    #504B46;
  --ink-soft:   #7C766F;
  --rule:       #E4E2DE;
  --mark:       #D2352A;
  --font: 'Freesentation', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --header-h: 4.75rem;
  /* outro 블롭·유리 카드용 (라이트 기본값). 하드코딩 #fff 대신 이 토큰을 쓴다 */
  --blob-1:     color-mix(in srgb, #c4bcb0 72%, #fff);
  --blob-2:     color-mix(in srgb, #bdb3a6 70%, #fff);
  --blob-3:     color-mix(in srgb, #aaa195 62%, #fff);
  --glass-bg:   color-mix(in srgb, #fff 52%, transparent);
  --glass-line: color-mix(in srgb, #fff 72%, transparent);
  --glass-hi:   rgba(255,255,255,.85);
  --glass-hi-2: rgba(255,255,255,.9);
  --glass-shadow:   rgba(20,17,15,.18);
  --glass-shadow-2: rgba(20,17,15,.28);
  --glass-solid: rgba(255,255,255,.92);
  color-scheme: light dark;
}

/* ---------- 다크 테마 ----------
   선언하지 않으면 모바일 브라우저(Chrome·Brave 강제 다크모드)가 색을 알고리즘으로
   자동 반전해, 스크롤 패널·그라디언트 등에서 페이지마다 결과가 달라진다(흰 테두리).
   직접 정의하면 자동 반전이 꺼지고 모든 페이지가 같은 색을 쓴다. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #131110;
    --paper-2:  #1C1A18;
    --ink:      #ECE9E5;
    --ink-mid:  #B4AEA7;
    --ink-soft: #8A847D;
    --rule:     #2E2A27;
    --mark:     #E2483D;
    --blob-1:   #3a342e;
    --blob-2:   #342f2a;
    --blob-3:   #403931;
    --glass-bg:   color-mix(in srgb, #2a2623 58%, transparent);
    --glass-line: color-mix(in srgb, #fff 14%, transparent);
    --glass-hi:   rgba(255,255,255,.08);
    --glass-hi-2: rgba(255,255,255,.12);
    --glass-shadow:   rgba(0,0,0,.45);
    --glass-shadow-2: rgba(0,0,0,.6);
    --glass-solid: #242120;
  }
}

/* ---------- 리셋 ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overscroll-behavior-y: contain; /* 스크롤 체이닝(맨 위/아래에서 뒤 배경까지 밀리는 현상) 방지 */
}
a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; /* 모바일 탭 시 파란 하이라이트 제거 — 디자인 톤과 충돌 */
}
img { max-width: 100%; display: block; }

.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;
}

/* 정적 View Transitions — 지원 브라우저에서 페이지 이동이 부드럽게 전환됨.
   미지원 브라우저는 그냥 평범한 페이지 이동이라 리스크 없음. */
@view-transition { navigation: auto; }

/* 허브 그리드 ↔ 팀 헤더 사이 팀명 전환 매칭 (팀별 고유 이름 필요) */
[data-vt="team1"]  { view-transition-name: team1-name; }
[data-vt="team2"]  { view-transition-name: team2-name; }
[data-vt="team3"]  { view-transition-name: team3-name; }
[data-vt="team4"]  { view-transition-name: team4-name; }
[data-vt="team5"]  { view-transition-name: team5-name; }
[data-vt="team6"]  { view-transition-name: team6-name; }
[data-vt="team7"]  { view-transition-name: team7-name; }
[data-vt="team8"]  { view-transition-name: team8-name; }
[data-vt="team9"]  { view-transition-name: team9-name; }
[data-vt="team10"] { view-transition-name: team10-name; }
[data-vt="team11"] { view-transition-name: team11-name; }
[data-vt="nambu"]  { view-transition-name: nambu-name; }

/* 팀 페이지 안에서 해시로 탭을 넘길 때(site.js go → startViewTransition)는 이름 없는
   나머지가 root 스냅샷 하나로 크로스페이드된다. 삼성 인터넷은 이 root 스냅샷을 위로
   어긋나게 그렸다가 원위치시켜 헤더 아이콘·본문만 출렁인다(팀명은 이름이 있어 고정).
   움직이면 안 되는 덩어리에 각각 이름을 줘서 root 스냅샷 의존을 없앤다.
   패널은 옛/새 패널이 같은 이름을 이어받아 제자리에서 크로스페이드된다. */
header:not(.hub-header) { view-transition-name: site-header; }
.segbar { view-transition-name: segbar; }
#p1, .page:target { view-transition-name: page-panel; }
.page:not(#p1):target ~ #p1 { view-transition-name: none; }

/* ============================================================
   1. 공통 헤더/푸터
   ============================================================ */
header {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  position: sticky; top:0; background: var(--paper); z-index:10;
}
header nav a { color: var(--ink-mid); margin-left: 2rem; }
header nav a:hover, header nav a:focus-visible { color: var(--ink); }

/* 허브 헤더는 폭이 넓어 살짝 다른 톤 */
.hub-header { font-size: 1.35rem; padding: 1.75rem 3rem; position: static; }
.hub-header nav a { margin-left: 2.25rem; }

footer {
  padding: 2.5rem 3rem;
  display:flex; justify-content:space-between;
  font-size: 1.3rem;
  color: var(--ink-soft);
}

/* ============================================================
   2. 허브 페이지
   ============================================================ */
.hub-kicker {
  text-align: center;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  margin: 2.5rem 1.5rem 0.75rem;
}
.year-count { counter-reset: yr var(--yr, 2026); }
.year-count::before { content: counter(yr); }

.hub-title {
  text-align: center;
  margin: 0 1.5rem 2.25rem;
  font-size: clamp(1.6rem, 6.5vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* 글자 단위 리빌 — 그룹(단어) 사이는 space 문자에 기대지 않고 margin으로 확실히 띄운다 */
.hub-title .char-group.dim { color: var(--ink-soft); margin-left: 0.35em; }
.char { display: inline-block; overflow: hidden; vertical-align: top; }
.char-inner { display: inline-block; }

/* ===== 바둑판 그리드 (3열 x 4행) ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cell {
  position: relative;
  overflow: hidden;
  min-height: 9.5rem;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1rem;
  transition: background-color .2s ease;
}
.cell::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--mark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.cell:focus-visible { background: var(--paper-2); outline: 2px solid var(--mark); outline-offset: -2px; }
.cell:focus-visible::before { transform: scaleX(1); }
.cell:active { background: var(--paper-2); } /* 터치 즉시 반응 (hover 없는 기기 대응) */
@media (hover: hover) {
  .cell:hover { background: var(--paper-2); }
  .cell:hover::before { transform: scaleX(1); }
  .cell:hover .arrow { color: var(--ink); transform: translate(2px, -2px); }
  .cell:hover .name { transform: translateY(-2px); }
}
.cell .num {
  position: absolute;
  top: 0.7rem; left: 0.9rem;
  font-size: 1.2rem;
  color: var(--ink-soft);
}
.cell .name {
  font-size: clamp(1.2rem, 2.8vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
  transition: transform .25s var(--ease-out);
}
.cell.filler { pointer-events: none; }
.cell .arrow {
  position: absolute;
  bottom: 0.7rem; right: 0.9rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
  transition: color .25s ease, transform .25s ease;
}

/* ============================================================
   3. 팀 페이지 — 탭으로 넘기는 스토리형 4p
   (스크롤이 페이지 전환에 관여하지 않는다: 각 .page는 뷰포트 전체를
   덮는 고정 패널이고, 어느 패널을 보여줄지는 URL 해시(:target)가 정한다)
   ============================================================ */
header .team-tag { color: var(--ink-soft); }

/* 상단 세그먼트 바 — 지금 몇 p인지 보여주는 동시에 "탭하면 넘어간다"를 암시 */
.segbar {
  position: fixed; top: var(--header-h); left: 0; right: 0;
  display: flex; gap: 4px;
  padding: 0 1.25rem;
  z-index: 15;
}
.segbar .seg {
  flex: 1;
  height: 28px; /* 실제 막대(3px)보다 크게 잡아 터치 타깃 확보 */
  display: flex; align-items: center;
  position: relative;
}
.segbar .seg::before {
  content: "";
  width: 100%; height: 3px;
  border-radius: 2px;
  background: var(--rule);
}
.segbar .seg.current::before { background: var(--mark); }

/* :has() 지원 브라우저는 JS 없이도 현재 세그먼트가 채워진다 (progressive enhancement) */
@supports selector(:has(*)) {
  /* 팀마다 페이지 수가 다르다(4~6p). 해시가 없거나 #p1이면 p1이 현재. */
  body:not(:has(.page:not(#p1):target)) .segbar .seg[href="#p1"]::before,
  body:has(#p1:target) .segbar .seg[href="#p1"]::before,
  body:has(#p2:target) .segbar .seg[href="#p2"]::before,
  body:has(#p3:target) .segbar .seg[href="#p3"]::before,
  body:has(#p4:target) .segbar .seg[href="#p4"]::before,
  body:has(#p5:target) .segbar .seg[href="#p5"]::before,
  body:has(#p6:target) .segbar .seg[href="#p6"]::before {
    background: var(--mark);
  }
}

.pager { position: relative; }

/* 좌/우 탭 이동 단서 — 화면 양 끝 세로 중앙의 얇은 선 화살표.
   JS가 주입(site.js)하며 순수 장식이라 클릭은 통과시킨다. 배경·그림자 없이 선만. */
.edge-hint { position: fixed; inset: 0; pointer-events: none; z-index: 14; }
.edge {
  position: absolute; top: 50%;
  width: 10px; height: 20px;
  margin-top: -10px;
  color: var(--ink-soft);
  opacity: .55;
  transition: opacity .3s ease;
}
.edge svg {
  display: block; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--paper) 90%, transparent)); /* 사진 위에서도 읽히도록 */
}
.edge-prev { left: 4px; }
.edge-next { right: 4px; }
body[data-pos="first"] .edge-prev,
body[data-pos="last"] .edge-next { opacity: 0; animation: none; }

@media (min-width: 900px) {
  .edge { width: 14px; height: 28px; margin-top: -14px; }
  .edge-prev { left: 2rem; }
  .edge-next { right: 2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .edge-prev.is-nudge { animation: edge-nudge-l 1.1s ease-in-out 2; }
  .edge-next.is-nudge { animation: edge-nudge-r 1.1s ease-in-out 2; }
  .edge-prev.is-hit  { animation: edge-hit-l .4s var(--ease-out); }
  .edge-next.is-hit  { animation: edge-hit-r .4s var(--ease-out); }
}
@keyframes edge-nudge-l { 0%,100% { transform: translateX(0); opacity: .55; } 40% { transform: translateX(-4px); opacity: 1; color: var(--ink-mid); } }
@keyframes edge-nudge-r { 0%,100% { transform: translateX(0); opacity: .55; } 40% { transform: translateX(4px);  opacity: 1; color: var(--ink-mid); } }
@keyframes edge-hit-l { 0% { transform: translateX(0); } 35% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
@keyframes edge-hit-r { 0% { transform: translateX(0); } 35% { transform: translateX(5px); }  100% { transform: translateX(0); } }

/* 각 .page는 뷰포트 전체를 덮는 고정 패널. #p1은 해시가 없을 때의 기본값이고,
   :target이 걸린 패널이 z-index로 그 위를 덮는다.
   주의: HTML에서 #p1은 의도적으로 DOM상 맨 마지막에 온다 — 아래 형제 선택자가
   ":has() 없이 기본 페이지를 표현하는" 유일한 순수 CSS 방법이기 때문 (팀 페이지
   HTML 참고). visibility까지 함께 꺼야 숨겨진 패널이 탭 순서/스크린리더에서도
   실제로 제외된다 (opacity만으로는 안 보이는 요소가 계속 포커스/낭독됨). */
.page {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  overflow-y: auto;             /* 내용이 길면 그 페이지 안에서만 스크롤 */
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
#p1 { visibility: visible; opacity: 1; }
.page:target { visibility: visible; opacity: 1; z-index: 2; }
.page:not(#p1):target ~ #p1 { visibility: hidden; opacity: 0; }

.page-inner {
  padding: calc(var(--header-h) + 2.5rem) 1.75rem 3rem;
  max-width: 40rem;
  margin: 0 auto;
  width: 100%;
}
.page.outro .page-inner {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.page-label {
  display:flex; align-items:center; gap:.6rem;
  font-size: 1.5rem; letter-spacing: 0.12em; color: var(--ink-mid);
  margin-bottom: 1.5rem;
}
.page-label::before { content:""; width:2em; height:1px; background: var(--ink-soft); transform-origin: left; }

.media {
  aspect-ratio: 4 / 3;
  background: transparent;
  border: 1px solid transparent;
  margin-bottom: 1.75rem;
  overflow: hidden;
}
.media img { width:100%; height:100%; object-fit:contain; display:block; }
.media .ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: var(--ink-soft); font-size:.8rem; }

.lead {
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.lead .mark { color: var(--mark); }
/* 헤드라인 단어 단위 캐스케이드 — 짧은 문장이라 단어별 분리가 안전하다 */
.word-wrap { display: inline-block; overflow: hidden; vertical-align: top; }
.word-inner { display: inline-block; }

.body-text {
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--ink-mid);
  word-break: keep-all;
}
/* 본문은 문장 2~3덩어리로 나눠 페이드만 준다 (단어 단위로 밀어 올리면
   문단 전체를 한 번에 다 읽기까지 대기시간이 길어져 오히려 방해된다) */
.chunk { display: inline; }

/* ---------- outro — 글래스모피즘 ----------
   흐릿한 색 덩어리(블롭) 위에 반투명 유리 카드를 올린다. 유리가 번져 보이려면
   뒤에 색이 있어야 하므로 블롭은 필수. 색은 따뜻한 회색 계열만 쓴다(분홍·붉은 색은
   쓰지 않음 — 사용자 피드백). 흰 바탕·먹색 톤을 깨지 않게 한다.
   블롭은 ::before/::after 로 만들어 마크업이 바뀌지 않은 옛 팀 페이지에도 적용된다.
   .page.outro 가 hidden 일 때는 visibility 상속으로 블롭도 함께 사라진다. */
.page.outro { background: linear-gradient(165deg, var(--paper) 0%, var(--paper-2) 100%); }
.page.outro::before, .page.outro::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(48px);
}
.page.outro::before {
  width: 70vmax; height: 70vmax; top: -22vmax; left: -26vmax;
  background: radial-gradient(circle at 40% 40%, var(--blob-1) 0%, transparent 68%);
}
.page.outro::after {
  width: 64vmax; height: 64vmax; bottom: -24vmax; right: -24vmax;
  background: radial-gradient(circle at 55% 55%, var(--blob-2) 0%, transparent 68%);
}

.outro-inner { text-align: center; }
.outro-kicker { font-size: 1.2rem; letter-spacing: .16em; color: var(--ink-mid); margin-bottom: 1.25rem; }
.outro-links { position: relative; display: flex; flex-direction: column; align-items: center; gap: .85rem; }
/* 카드 바로 뒤의 색 덩어리 — 유리가 "번져 보이려면" 뒤에 색이 있어야 한다 */
.outro-links::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 15rem; height: 15rem; top: -4.5rem; right: -3rem; border-radius: 50%; filter: blur(34px);
  background: radial-gradient(circle, var(--blob-3) 0%, transparent 70%);
}
.outro-row { display: flex; gap: .85rem; width: min(100%, 26rem); }
.outro-row .outro-btn { flex: 1; justify-content: center; padding-left: 1rem; padding-right: 1rem; }

.outro-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 1.45rem; letter-spacing: -0.01em; white-space: nowrap;
  padding: .85rem 1.5rem;
  color: var(--ink);
  border-radius: 1.25rem;
  /* 유리: 반투명 흰색 + 뒤 배경 블러/채도 + 위쪽 안쪽 하이라이트 + 아주 옅은 그림자 */
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px -12px var(--glass-shadow);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* 포인터를 따라다니는 스포트라이트 (--mx/--my 는 site.js 가 갱신, 터치에서는 중앙 기본값) */
.outro-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.9), transparent 65%);
  transition: opacity .3s ease;
}
.outro-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.outro-btn:active { transform: scale(.97); }
.outro-btn:active::before { opacity: 1; }
@media (hover: hover) {
  .outro-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-hi-2), 0 16px 36px -14px var(--glass-shadow-2); }
  .outro-btn:hover::before { opacity: 1; }
}
.outro-btn-arrow { display: inline-block; transition: transform .25s var(--ease-out); }
.outro-btn.prev:hover .outro-btn-arrow, .outro-btn.prev:focus-visible .outro-btn-arrow { transform: translateX(-5px); }
.outro-btn.next:hover .outro-btn-arrow, .outro-btn.next:focus-visible .outro-btn-arrow { transform: translateX(5px); }

/* 다음 팀 = 가장 큰 카드 (팀 번호 + 팀 이름) */
.outro-btn.lg {
  flex-direction: column; align-items: flex-start; gap: .35rem;
  width: min(100%, 26rem); padding: 1.4rem 1.5rem 1.5rem; text-align: left; white-space: normal;
}
.outro-btn-meta { font-size: 1.15rem; letter-spacing: .08em; color: var(--ink-mid); }
.outro-btn-name { font-size: clamp(2rem, 7.5vw, 2.7rem); line-height: 1.2; letter-spacing: -.03em; word-break: keep-all; padding-right: 2.5rem; }
.outro-btn.lg .outro-btn-arrow { position: absolute; right: 1.4rem; bottom: 1.3rem; font-size: 1.9rem; }
/* 긴 팀명(9자 이상): 글자를 줄이고 화살표와 겹치지 않게 아래 여백을 확보. 그래도 넘치면 글자 단위로 줄바꿈 */
.outro-btn.lg.long { padding-bottom: 3.4rem; }
.outro-btn.lg.long .outro-btn-name { font-size: clamp(1.2rem, 4.8vw, 1.75rem); padding-right: 0; overflow-wrap: anywhere; }

/* 전체 팀 보기 = 어두운 유리 (허브로 가는 대표 동선이라 한 단계 강조) */
.outro-btn.hub {
  color: var(--paper);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  border-color: color-mix(in srgb, var(--ink) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px -12px rgba(20,17,15,.4);
}
.outro-btn.hub::before { background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.22), transparent 65%); }
.outro-btn.hub:focus-visible { outline-color: var(--ink); }

/* backdrop-filter 미지원 / 투명도 줄이기 설정 → 불투명 폴백 (글자 대비 확보) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .outro-btn { background: var(--glass-solid); }
  .outro-btn.hub { background: var(--ink); }
}
@media (prefers-reduced-transparency: reduce) {
  .outro-btn { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .outro-btn.hub { background: var(--ink); }
}

/* ---------- 새 팀 페이지 구성 요소 (scripts/build-pages.py 가 생성) ----------
   색은 기존 원칙대로 --mark를 한 화면에 한 지점만 쓴다:
   표지=팀명, 숫자=큰 숫자, 대표 이야기=인용 왼쪽 선. */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chips li {
  font-size: 1.2rem; color: var(--ink-mid);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .25rem .9rem;
}
.since { margin-top: 1rem; font-size: 1.2rem; color: var(--ink-soft); letter-spacing: .1em; }

.timeline { list-style: none; border-top: 1px solid var(--rule); }
.tl-item {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
.tl-year { font-size: 1.9rem; line-height: 1.2; letter-spacing: -.02em; }
.tl-text { font-size: 1.3rem; line-height: 1.7; color: var(--ink-mid); word-break: keep-all; }

.big-cap { font-size: 1.3rem; color: var(--ink-mid); margin-bottom: .4rem; }
.big-num {
  font-size: clamp(3.8rem, 17vw, 6rem); line-height: 1.05;
  letter-spacing: -.04em; color: var(--mark); margin-bottom: 2rem;
}
.big-num small { font-size: 1.6rem; color: var(--ink-mid); letter-spacing: 0; margin-left: .4rem; }
.bars { list-style: none; display: grid; gap: 1.25rem; }
.bar-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.3rem; margin-bottom: .4rem; }
.bar-label { color: var(--ink-mid); word-break: keep-all; }
.bar-track { height: 10px; background: var(--paper-2); border: 1px solid var(--rule); }
.bar-fill { width: var(--w, 0%); height: 100%; background: var(--ink); transform-origin: left; }

.story-title { font-size: 1.3rem; color: var(--ink-soft); letter-spacing: .04em; margin-bottom: .35rem; }
.story-headline {
  font-size: clamp(1.5rem, 5.5vw, 1.9rem); line-height: 1.35; letter-spacing: -.02em;
  word-break: keep-all; margin-bottom: 1.1rem; font-weight: 700;
}
.stats { list-style: none; margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.stat {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
}
.stat-val { flex: none; min-width: 5.6rem; font-size: 2.2rem; line-height: 1.1; letter-spacing: -.03em; }
.stat-val small { font-size: 1.2rem; color: var(--ink-mid); letter-spacing: 0; margin-left: .15rem; }
.stat-label { font-size: 1.2rem; line-height: 1.5; color: var(--ink-mid); word-break: keep-all; }
/* 인용 — 색 보더·박스 없이 헤어라인 + 작은 라벨 + 큰 본문만. 구분은 여백과 글자 대비로. */
.moment { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.moment-label { font-size: 1.1rem; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: .6rem; }
.moment-text { font-size: 1.45rem; line-height: 1.7; color: var(--ink); word-break: keep-all; letter-spacing: -.01em; }

/* ---------- 공통 페이지(/nambu) ---------- */
.stat-label b { color: var(--ink); font-weight: 700; }

/* 연도별 연인원 막대그래프: 40개 막대를 4개 시기(band)로 묶고 시기 이름을 아래에 단다 */
.chart { display: flex; gap: 8px; margin-top: 1.75rem; }
.band { min-width: 0; }
.cols { display: flex; align-items: flex-end; gap: 2px; height: 9.5rem; border-bottom: 1px solid var(--ink); }
.col { flex: 1; height: var(--h); background: var(--ink); transform-origin: bottom; display: block; }
.band-label { display: block; margin-top: .5rem; font-size: 1rem; letter-spacing: .02em; color: var(--ink-soft); white-space: nowrap; }

.period { margin-top: 2.25rem; }
.period:first-of-type { margin-top: 0; }
.period-range { font-size: 1.15rem; letter-spacing: .1em; color: var(--ink-soft); }
.period-title { font-size: 1.7rem; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; word-break: keep-all; margin: .2rem 0 .6rem; }
.period-sum { font-size: 1.25rem; line-height: 1.7; color: var(--ink-mid); word-break: keep-all; margin-bottom: 1rem; }

/* 응원 메시지 — 카드·따옴표 장식 없이 헤어라인으로만 구분 */
.msgs { list-style: none; margin-top: .6rem; border-top: 1px solid var(--rule); }
.msg { padding: 1rem 0; border-bottom: 1px solid var(--rule); font-size: 1.3rem; line-height: 1.75; color: var(--ink); word-break: keep-all; white-space: pre-line; } /* pre-line: 원문의 줄바꿈(4행시)을 살린다 */

.media picture { display: block; width: 100%; height: 100%; }
.count { display: inline-block; font-variant-numeric: tabular-nums; }

/* ============================================================
   4. 리빌 애니메이션 — prefers-reduced-motion으로 전체를 감싼다.
   기본값(이 미디어쿼리 바깥)은 항상 "완전히 보이는 상태"이며,
   동작을 허용하는 사용자 + JS가 붙은 경우에만 숨겼다가 드러낸다.
   ============================================================ */
@keyframes fade-in     { from{ opacity:0; } to{ opacity:1; } }
@keyframes line-draw   { from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
@keyframes media-reveal{ from{ clip-path: inset(100% 100% 0 0);} to{ clip-path: inset(0 0 0 0);} }
@keyframes media-zoom  { from{ transform: scale(1.08);} to{ transform: scale(1);} }
@keyframes text-rise   { from{ transform: translateY(115%);} to{ transform: translateY(0);} }
@keyframes countup     { from{ --yr: 1986; } to{ --yr: 2026; } }
@keyframes grid-wave   { from{ opacity:0; transform: translateY(16px);} to{ opacity:1; transform: translateY(0);} }
@keyframes col-grow    { from{ transform: scaleY(0);} to{ transform: scaleY(1);} }
@keyframes rv-in       { from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform: translateY(0);} }
@keyframes btn-in      { from{ opacity:0; transform: translateY(18px) scale(.96);} to{ opacity:1; transform: translateY(0) scale(1);} }

@property --yr {
  syntax: '<integer>';
  inherits: false;
  initial-value: 2026;
}

@media (prefers-reduced-motion: no-preference) {

  /* --- 연도 카운트업 (허브, JS 불필요 — 페이지 로드와 동시에 재생) --- */
  .year-count { animation: countup 1.4s .3s var(--ease-out) both; }

  /* --- 허브 타이틀 글자 단위 리빌 (JS 불필요, --i로 딜레이) --- */
  .hub-title .char-inner {
    transform: translateY(115%);
    animation: text-rise .55s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms + .1s);
  }

  /* --- 허브 그리드 대각선 웨이브 (JS 불필요, --i로 딜레이) --- */
  .cell {
    animation: grid-wave .6s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 60ms + .2s);
  }

  /* --- 팀 페이지 콘텐츠 캐스케이드: :target(또는 기본값 #p1)이 트리거, JS 불필요 ---
     스크롤이 아니라 "페이지가 지금 보이는가"가 트리거이므로 순수 CSS만으로
     완전히 동작한다 — JS가 없어도, 꺼져 있어도 탭/링크로 넘길 때마다 재생된다. */
  .page-label { opacity: 0; }
  .page-label::before { transform: scaleX(0); }
  .media { clip-path: inset(100% 100% 0 0); }
  .media img, .media .ph { transform: scale(1.08); }
  .word-inner { transform: translateY(115%); }
  .chunk { opacity: 0; }

  #p1 .page-label, .page:target .page-label {
    animation: fade-in .45s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  #p1 .page-label::before, .page:target .page-label::before {
    animation: line-draw .5s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms + .08s);
  }
  #p1 .media, .page:target .media {
    animation: media-reveal .8s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  #p1 .media img, #p1 .media .ph,
  .page:target .media img, .page:target .media .ph {
    animation: media-zoom .8s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  /* 헤드라인 단어 캐스케이드 — 라벨(0)·사진(1)에 이어 같은 --i 흐름을 그대로 이어받는다 */
  #p1 .word-inner, .page:target .word-inner {
    animation: text-rise .45s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  /* 본문 문장 덩어리 — 페이지가 눈에 보이자마자 읽어야 하므로 더 느긋한 간격 */
  #p1 .chunk, .page:target .chunk {
    animation: fade-in .5s ease-out both;
    animation-delay: calc(var(--i, 0) * 160ms);
  }

  /* p1은 "기본값"이라 위 트리거(#p1 ...)가 항상 매칭돼 있다 — 그래서 p2 등
     다른 페이지로 갔다가 되돌아와도 CSS 입장에선 "계속 매칭 중이던 애니메이션"
     이라 재생이 안 된다(p2~p4/outro는 순수 :target 토글이라 이 문제가 없다).
     다른 페이지가 :target인 동안만 이 트리거를 명시적으로 꺼서, p1로 돌아왔을
     때 :target 토글처럼 "안 걸려 있다가 다시 걸리는" 상태를 만들어 재생시킨다. */
  .page:not(#p1):target ~ #p1 .page-label { animation: none; opacity: 0; }
  .page:not(#p1):target ~ #p1 .page-label::before { animation: none; transform: scaleX(0); }
  .page:not(#p1):target ~ #p1 .media { animation: none; clip-path: inset(100% 100% 0 0); }
  .page:not(#p1):target ~ #p1 .media img,
  .page:not(#p1):target ~ #p1 .media .ph { animation: none; transform: scale(1.08); }
  .page:not(#p1):target ~ #p1 .word-inner { animation: none; transform: translateY(115%); }
  .page:not(#p1):target ~ #p1 .chunk { animation: none; opacity: 0; }
  .page:not(#p1):target ~ #p1 .rv { animation: none; opacity: 0; }
  .page:not(#p1):target ~ #p1 .bar-fill { animation: none; transform: scaleX(0); }

  /* --- 새 팀 페이지 구성용 요소 (타임라인·숫자 막대·대표 이야기 등) ---
     .rv = 아래에서 살짝 올라오며 페이드인, .bar-fill = 왼쪽에서 차오르는 막대.
     둘 다 위의 다른 요소들과 같은 --i 딜레이 흐름을 따른다. */
  .rv { opacity: 0; }
  .bar-fill { transform: scaleX(0); }
  .col { transform: scaleY(0); }
  #p1 .col, .page:target .col {
    animation: col-grow .7s var(--ease-out) both;
    animation-delay: calc(var(--c, 0) * 24ms + .4s);
  }
  #p1 .rv, .page:target .rv {
    animation: rv-in .55s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  #p1 .bar-fill, .page:target .bar-fill {
    animation: line-draw .9s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms + .15s);
  }

  /* --- outro 버튼 캐스케이드 ---
     fill-mode 는 backwards 만 쓴다: both 면 종료 후에도 keyframe 의 transform 이 남아
     hover/active 의 transform 이 덮어써지지 않는다. */
  .page:target .outro-btn {
    animation: btn-in .6s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + .1s);
  }

  /* --- outro 블롭: 아주 천천히 떠다닌다 (transform 만 → 모바일 GPU 부담 최소) --- */
  .page.outro::before { animation: blob-a 22s ease-in-out infinite alternate; }
  .page.outro::after  { animation: blob-b 26s ease-in-out infinite alternate; }
}
@keyframes blob-a { from { transform: translate3d(0,0,0) scale(1); }   to { transform: translate3d(9vmax,6vmax,0) scale(1.12); } }
@keyframes blob-b { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-8vmax,-7vmax,0) scale(.94); } }

/* ============================================================
   5. 모바일
   ============================================================ */
@media (max-width: 560px) {
  header { padding-left: 1.25rem; padding-right: 1.25rem; }
  header nav a { margin-left: 1.2rem; font-size: 1.35rem; }
  .hub-header, footer { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hub-kicker, .hub-title { margin-left: 1rem; margin-right: 1rem; }
  .cell { padding: 0.85rem; }
  .page-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* 360px 안팎 좁은 화면 — 3열이면 "최중증발달장애인통합돌봄팀" 같은 긴 팀명이
   칸 안에서 줄바꿈이 과도하게 일어난다. 2열로 전환해 칸당 가로폭을 확보. */
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .cell .name { font-size: clamp(1.35rem, 5.5vw, 1.65rem); } /* clamp가 vw 하한에 눌리지 않도록 상향 */
}

/* 헤더 nav 3링크(이전/전체/다음) 축약 — 실제 접근성 텍스트는 aria-label로 고정,
   화면에는 폭에 따라 풀 텍스트/축약 아이콘 중 하나만 보여준다 */
.nav-short { display: none; }
@media (max-width: 420px) {
  .nav-full { display: none; }
  .nav-short { display: inline; }
  header nav a { margin-left: .9rem; }
}

/* 인쇄 — 관람객이 페이지를 저장/인쇄할 가능성 대비.
   화면에서는 4p 중 1개만 고정 패널로 보이지만, 인쇄에서는 고정 패널 개념이
   무의미(대부분 브라우저가 fixed 요소를 한 페이지에만 찍거나 잘라먹는다)하므로
   전부 일반 흐름으로 풀어 4p를 순서대로 전부 인쇄되게 한다. */
@media print {
  .segbar, .edge-hint { display: none; }
  .page.outro::before, .page.outro::after { display: none; }
  .page {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    page-break-inside: avoid;
  }
  .page-inner { padding-top: 2rem; }
  * { animation: none !important; transition: none !important; }
}