/* Jooming is coming — 에디토리얼 디자인.
   고객: 판도라 내부자(예비 주밍이). 무채색 눈밭 + 눈밭을 달려오는 설표.
   데이터(숫자+점밭) 먼저 → 가로 설표 영상 밴드. 캐릭터 모션은 app.js. */

:root {
  --bg: #fbfdfe;          /* 눈밭색(밝은 눈밭) — 설표 영상과 이음매 없이 */
  --ink: #23282d;         /* 차콜 */
  --muted: #6a7178;       /* 라벨·시각(가독성 위해 한 단계 진하게) */
  --faint: #6f767d;       /* 안내문·푸터 (AA 대비 4.51:1 — 교차검증 반영, 가장 연하면서 4.5↑) */
  --hair: #dbe0e4;        /* 헤어라인 */
  --leopard: rgba(35, 40, 45, 0.5); /* 점밭(투명도는 app.js에서 0.10~0.20로 — 눈밭 점묘 톤) */
  --gap: 40px;            /* 균등 세로 간격 */
  --colpad: 56px;         /* 컬럼 안쪽 패딩(모바일에선 0) */
  --sans: "Pretendard Variable", Pretendard, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 화면엔 숨기되 스크린리더엔 읽히는 텍스트 */
.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; }

html { scrollbar-gutter: stable; } /* Windows 스크롤바 거터 — 중앙정렬 가로 흔들림 방지 */

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 55%),
    var(--bg);
}

/* 단일 spine: 모든 콘텐츠가 이 컨테이너 좌우 가장자리에 정렬 */
.page { max-width: 1080px; margin: 0 auto; padding: 0 44px; }

/* ── 상단 바 ── */
header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 36px 0 0; }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: 0.01em; color: inherit; text-decoration: none; display: inline-block; cursor: pointer; }
.wordmark em { font-style: italic; }
.wordmark:focus-visible em { box-shadow: inset 0 -1px 0 currentColor; } /* 키보드 포커스 시 'coming' 밑줄 (마우스 hover는 아래 @media (hover:hover)) */
.updated { font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }
.updated b { font-weight: 500; color: var(--ink); }

/* ── 데이터(무리) 먼저 ── */
.data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--hair); margin-top: var(--gap); }
/* 2열 그리드 — 점밭 박스·열 너비는 모든 칸 동일 고정. 가로/세로 헤어라인으로만 분리(2~4칸 공통). */
.metric { padding: var(--gap) 0; min-width: 0; position: relative; } /* min-width:0 — grid item 팽창 방지(크로스브라우저) / position — 순위 배지 기준 */
.metric:nth-child(odd) { padding-right: var(--colpad); } /* 1열 */
.metric:nth-child(even) { padding-left: var(--colpad); border-left: 1px solid var(--hair); } /* 2열 — 세로 헤어라인 */
.metric:nth-child(n + 3) { border-top: 1px solid var(--hair); } /* 2행부터 — 가로 헤어라인 */
.label { font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
/* 데이터 제목 = 도착지 링크(평소 명패, hover 시에만 ↗) */
.label-link { color: inherit; text-decoration: none; transition: color 0.2s; }
.label-link .ar { display: inline-block; margin-left: 3px; opacity: 0; transform: translateX(-3px); transition: opacity 0.2s, transform 0.2s; }
.label-link:focus-visible { color: var(--ink); }
.label-link:focus-visible .ar { opacity: 1; transform: translateX(0); }
/* 순위 배지(교보 전용) — 우상단 절대배치라 본문 높이·점밭에 영향 없음(스페셜 표식) */
.metric--ranked .label { padding-right: 104px; } /* 배지 실폭(~90px)+여유 — 더 긴 제목/순위에도 겹침 방지 */
.badge { position: absolute; top: var(--gap); right: var(--colpad); padding: 4px 9px; font-size: 11px; letter-spacing: 0.06em; line-height: 1; color: var(--muted); background: var(--bg); border: 1px solid var(--hair); border-radius: 3px; white-space: nowrap; }
.badge b { color: var(--ink); font-weight: 500; }
.badge--stale { opacity: 0.55; }
/* 숫자 = 주인공. tabular-nums 안 씀(좁은 숫자 앞 공백 방지). */
.count { font-family: var(--serif); font-weight: 300; font-size: 78px; line-height: 1; margin: 16px 0 0; letter-spacing: -0.01em; }
.count .unit { font-family: var(--sans); font-size: 15px; color: var(--faint); letter-spacing: 0.05em; margin-left: 9px; }
/* 점밭 = 컬럼 안쪽 너비(숫자·라벨과 동일). 바깥은 라인에 맞고 안쪽엔 divider까지 여백. */
.field { position: relative; height: 118px; margin-top: 24px; overflow: hidden; }
.dot { position: absolute; border-radius: 50%; background: var(--leopard); }
.note { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--faint); max-width: 30em; }
/* 갱신 안 된 값(stale)의 실제 기준 시각만 조용히 */
.asof { margin-top: 12px; font-size: 12px; color: var(--faint); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }

/* ── 가로 설표 밴드 (16:9 전체 프레임). 두 영상 crossfade 루프(app.js). ── */
.beastwrap { border-top: 1px solid var(--hair); margin-top: var(--gap); padding-top: var(--gap); } /* 상단 마스트헤드 — 헤더와 동일 리듬으로 띄움 */
.beast { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--bg); }
.beast .v {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  /* 무채색 그레이딩 + 페이지 흰색에 맞춰 살짝 밝게. 파란 눈은 미세하게 남김. */
  filter: contrast(1.04) brightness(1.06) saturate(0.8); /* 디졸브는 파일에 구워짐 — CSS opacity 전환 불필요 */
}
/* 영상 일시정지 토글 — 우하단에 조용히 (무채색 SVG 아이콘은 app.js가 넣음) */
.beast-toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid var(--hair); background: rgba(251, 253, 254, 0.72);
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
  opacity: 0.55; transition: opacity 0.2s;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.beast-toggle:focus-visible { opacity: 1; }

/* ── 푸터 ── */
/* 하단 라인 = 그리드 닫는 선. margin 0이라 데이터 그리드 바로 아래(세로선 끝)에 붙어 세로선을 캡처.
   라인↔푸터내용 = padding-top(--gap)으로 행 구분선과 동일한 리듬(40/40). */
footer { border-top: 1px solid var(--hair); margin-top: 0; padding: var(--gap) 0 56px; }
/* 바로가기 — 평소 글자만, hover 시 밑줄이 왼→오로(에디토리얼). 아이콘 상시노출 X */
.footlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px; }
.footlink { font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted); text-decoration: none; padding-bottom: 2px; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0% 1px no-repeat; transition: background-size 0.25s ease, color 0.2s; }
.footlink:focus-visible { color: var(--ink); background-size: 100% 1px; } /* 키보드 포커스 (마우스 hover는 아래 @media (hover:hover)) */
.footlinks .sep { color: var(--hair); font-size: 12px; user-select: none; }

/* hover 효과는 진짜 마우스(hover 가능) 기기에서만 적용 —
   터치(iOS Safari)에선 탭 후 :hover가 '다음 탭까지' 끈끈하게 남아 활성화된 듯 보이는 버그가 있어,
   터치 기기엔 hover 효과 자체를 안 건다(:focus-visible 키보드 접근성은 위에서 별도 유지). */
@media (hover: hover) {
  .wordmark:hover em { box-shadow: inset 0 -1px 0 currentColor; }
  .label-link:hover { color: var(--ink); }
  .label-link:hover .ar { opacity: 1; transform: translateX(0); }
  .footlink:hover { color: var(--ink); background-size: 100% 1px; }
  .beast-toggle:hover { opacity: 1; }
}
.footnote { font-size: 12.5px; color: var(--faint); letter-spacing: 0.04em; }
.footnote .copy { margin-left: 6px; } /* 데스크탑: "비공식 팬 페이지 © anna" 한 줄(© 앞 간격) */
.footerror { margin-top: 12px; font-size: 12.5px; color: var(--faint); letter-spacing: 0.04em; } /* 로드 실패 — 면책문 아래 별도 줄(링크줄 간격과 동일 12px) */

/* ── 모바일 ── */
@media (max-width: 720px) {
  :root { --colpad: 0px; } /* 1열 → 컬럼 패딩 0 → 점밭 너비 = 영상 너비 */
  .page { padding: 0 22px; }
  header { flex-direction: column; align-items: flex-start; gap: 16px; } /* 워드마크·시각 간격 — 푸터 링크 행간(16px)과 통일 */
  .beast { aspect-ratio: 4 / 3; } /* 모바일은 4:3로 키워 설표 존재감 — 16:9 영상 양옆을 cover로 크롭(설표는 중앙이라 안전) */
  .data { grid-template-columns: minmax(0, 1fr); }
  .metric:nth-child(even) { border-left: 0; } /* 1열 스택 — 세로 헤어라인 제거 */
  .metric + .metric { border-top: 1px solid var(--hair); } /* 스택된 칸 사이 가로 헤어라인 */
  .count { font-size: 62px; }
  /* 푸터 바로가기 = 세로 스택(한 줄에 하나) — inline+wrap 시 구분자(·)가 줄 끝에 떠 깨져 보이던 문제 해결.
     탭 영역도 커져 손가락으로 누르기 쉬움. 구분자는 숨김(세로 배치엔 불필요). 행간 16px로 시원하게. */
  .footlinks { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 0; }
  .footlinks .sep { display: none; }
  /* 면책 = 둘째 섹션. 링크 묶음과 큰 여백 + 옅은 헤어라인으로 분리(색 대비 없이 위계로).
     © anna는 아래 줄에 더 작게·살짝 흐리게(보조 정보라 가라앉힘). */
  .footnote { display: flex; flex-direction: column; gap: 5px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); }
  .footnote .copy { margin-left: 0; font-size: 11px; opacity: 0.8; }
}

/* 움직임 줄이기(OS 설정) — 영상은 app.js가 자동재생 안 함(poster 유지), 점밭·트랜지션 정지 */
@media (prefers-reduced-motion: reduce) {
  .beast .v { transition: none; }
  .label-link, .label-link .ar, .footlink, .wordmark em, .beast-toggle { transition: none; }
  .dot { transition: none !important; transform: none !important; }
}