/* Fine Ludens — 기업소개서 전용 — 화면 단위 카탈로그
   규칙: 섹션 배경색·경계선 없음(기업소개서 제외), 인라인 스타일 유지, data-r 훅 보존
*/

@font-face { font-family: 'Giants-Inline'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Inline.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/fontbee/font@main/LOTTE/Giants-Inline.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
/* 스냅 해제 — 스냅은 전환 구간을 건너뛰어서 스크롤이 크로스페이드를 몰 수 없다.
   대신 패널을 같은 자리에 쌓고(sticky) 문서 스크롤이 직접 페이드를 진행시킨다. */
html { scroll-behavior: auto; }
html, body { margin: 0; padding: 0; }
/* 패널은 흐름 높이를 0으로 만들어(margin-bottom: -100svh) 처음부터 전부 같은 자리에 겹친다.
   흐름에 남겨두면 자기 차례가 오기 전 아래에서 위로 올라온 뒤에야 고정되어,
   그 올라오는 구간이 그대로 보인다. 스크롤 거리는 [data-r="runway"] 가 전담한다. */
[data-r="page"] { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; overflow: clip; will-change: opacity, filter, transform; view-timeline-name: --panel; view-timeline-axis: block; }
[data-r="pad"] { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 4.5vh 40px !important; }
[data-r="rail"] { padding: 4.5vh 22px !important; }
body { background: #f5f0e8; word-break: keep-all; line-break: strict; text-wrap: pretty; font-family: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: #f26a00; }
@keyframes rise {
  0%   { opacity: 0; transform: translateY(52px); }
  72%  { opacity: 1; transform: translateY(-5px); }
  100% { opacity: 1; transform: none; }
}
@keyframes zoomout { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* 라벨은 잉크/뮤티드, 강조는 눈금이 가져간다.
   소형 텍스트에 #f26a00 을 쓰면 종이 배경 대비 2.71:1 로 기준 미달이고,
   비활성 #a8a49a 는 2.2:1 이라 읽히지 않았다. */
@keyframes navOn {
  0%, 8%    { color: #65685f; }
  22%, 78%  { color: #151812; }
  92%, 100% { color: #65685f; }
}
@keyframes navTickSub {
  0%, 8%    { transform: scaleX(0.20); background: #b9b3a7; }
  22%, 78%  { transform: scaleX(0.65); background: #f26a00; }
  92%, 100% { transform: scaleX(0.20); background: #b9b3a7; }
}
@keyframes navTick {
  0%, 8%    { transform: scaleX(0.30); background: #b9b3a7; }
  22%, 78%  { transform: scaleX(1);    background: #f26a00; }
  92%, 100% { transform: scaleX(0.30); background: #b9b3a7; }
}
/* 적층 구조라 아직 등장하지 않은 패널도 위에 겹쳐 있다.
   opacity: 0 만으로는 클릭을 가로채므로 visibility 로 상호작용에서 빼둔다.
   0.1% 지점에서 바로 켜지므로 페이드 인 자체는 온전히 보인다. */
@keyframes enterSlide {
  0%    { opacity: 0; filter: blur(12px); visibility: hidden; }
  0.1%  { visibility: visible; }
  100%  { opacity: 1; filter: blur(0);  visibility: visible; }
}
@keyframes wipeUp {
  0%   { opacity: 0; transform: translateY(56px); clip-path: inset(0 0 100% 0); }
  70%  { opacity: 1; transform: translateY(-5px); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 -12% 0); }
}
@keyframes slideL {
  0%   { opacity: 0; transform: translateX(-44px); }
  74%  { opacity: 1; transform: translateX(4px); }
  100% { opacity: 1; transform: none; }
}
/* techIn 은 profile/index.html 이 참조하는데 정의가 없어 죽어 있던 것을 복원 */
@keyframes techIn {
  0%   { opacity: 0; transform: translateY(48px) scale(0.968); filter: blur(17px); }
  56%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
[data-h="tile"] { transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease; }
[data-h="tile"]:hover { transform: translateY(-5px); box-shadow: 0 18px 34px -22px rgba(21,24,18,0.45); }
[data-h="cta"] { transition: transform 200ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease; }
[data-h="cta"]:hover { transform: translateY(-2px); opacity: 0.92; }
[data-h="navitem"] { transition: color 200ms ease, letter-spacing 200ms ease; }
[data-h="navitem"]:hover { color: #151812 !important; letter-spacing: 0.14em; }
[data-h="navitem"]:hover > span:first-child { background: #151812 !important; }
@media (min-width: 901px) { [data-r="rail"] > span { display: none !important; } }
[data-h="logo"] { transition: transform 240ms ease, background 240ms ease; }
[data-h="logo"]:hover { transform: scale(1.04); }
@media (min-width: 901px) and (max-height: 780px) { [data-r="pad"] { zoom: 0.88; } }
@media (min-width: 901px) and (max-height: 640px) { [data-r="pad"] { zoom: 0.76; } }
@media (max-width: 900px) {
  [data-r="index"] { display: none; }
  [data-r="rail"] { display: none; }
  html { scroll-snap-type: none; }
  [data-r="page"] { grid-template-columns: 1fr !important; overflow: clip !important; }
  /* static 이면 inset:0 인 커버 사진·워터마크의 기준이 패널이 아니라 문서가
     되어 자기 패널 밖에 놓인다. sticky 만 풀고 위치 기준은 남긴다.
     장식 마크가 음수 좌표로 삐져나오므로 데스크톱과 같이 clip 으로 자른다
     (hidden 은 스크롤 컨테이너를 만들어 타임라인을 죽인다 — 쓰지 말 것). */
  [data-r="pad"] { padding: 40px 20px !important; }
  [data-r="two"], [data-r="three"] { grid-template-columns: 1fr !important; gap: 30px !important; }
  [data-r="logos"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r="pad"] { padding: 52px 20px !important; }
  /* 커버 사진은 패널 전체 배경이다(position:absolute; inset:0). 여기에 높이
     220px 를 걸면 화면 위쪽 띠로 쪼그라들어, 배경이 아니라 본문 위에 얹힌
     작은 그림이 된다. 폭이 좁아질수록 더 어색해진다. 덮는 상태를 유지한다. */
  [data-r="hero"] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  [data-r="tall"] { min-height: 260px !important; height: 260px !important; }
  [data-r="mid"] { height: 210px !important; }
  [data-r="navlinks"] { gap: 14px !important; font-size: 10px !important; }
  [data-r="head"] { padding: 11px 16px !important; }
  [data-r="foot"] { padding: 20px 16px !important; }
}
@media (max-width: 560px) {
  [data-r="navlinks"] > span { display: none; }
  [data-r="pad"] { padding: 40px 16px !important; }
}

@media (max-width: 900px) {
  [data-r="head"] { flex-wrap: wrap; row-gap: 8px; }
  [data-r="navlinks"] { flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px !important; width: 100%; }
  [data-r="navlinks"] > a { min-height: 40px; display: inline-flex; align-items: center; }
  [data-r="navlinks"] > label { order: 9; }
}
@media (max-width: 560px) {
  [data-r="navlinks"] { font-size: 10px !important; letter-spacing: 0.1em !important; gap: 2px 12px !important; }
  [data-r="navlinks"] > a:last-of-type { padding: 10px 14px !important; }
}

[data-r="page"] { overflow-x: clip; }

@media (max-width: 900px) {
  [data-r="index"], [data-r="rail"] { display: none !important; }
  [data-r="page"] img[src*="mark-cream"], [data-r="page"] img[src*="mark-black"], [data-r="page"] img[src*="mark-orange"] { max-width: 56vw !important; right: 0 !important; }
}

/* ── 커버 진입 연출 — 홈·제품·회사 3면과 동일한 방식 ────────────────
   배경은 흐리고 옅은 상태에서 초점을 잡으며 진해지고,
   콘텐츠는 300ms 늦게 올라온다. 두 트랙이 2200ms 에 동시 착지한다.
   패널 전환(--panel/enterSlide)과 충돌하지 않도록 시간 타임라인만 쓴다.
─────────────────────────────────────────────────────────────────── */
@keyframes heroFocus {
  from { filter: blur(16px) saturate(0.62); opacity: 0.30; }
  to   { filter: blur(0)    saturate(1);    opacity: 1; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translate3d(0, 44px, 0) scale(0.984); filter: blur(9px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1);        filter: blur(0); }
}
/* 이 규칙들이 #ch01 을 가리키고 있었는데, 챕터 재구성 이후 #ch01 은 활주로
   안의 위치 지정 <span> 이다. 커버 패널이 아니므로 아무것도 걸리지 않았고,
   그 결과 커버의 워드마크·타이틀이 scroll(root) 2.54% 부터 시작하는 wipeUp
   하나에만 의존해 "로드 직후에는 제목이 없는 화면"이 되어 있었다.
   커버 진입은 인라인 시간 기반 애니메이션으로 되돌렸다(#main 패널). */


/* ── 브라우저가 그리는 표면 ─────────────────────────────────────────
   선택 영역, 캐럿, 포커스 링, 스크롤바는 손대지 않으면 어떤 디자인에도
   속하지 않는 기본값으로 남는다. 팔레트에서 끌어와 페이지에 편입시킨다.
─────────────────────────────────────────────────────────────────── */
::selection { background: #f26a00; color: #fff6ed; }
html { caret-color: #151812; accent-color: #f26a00; scrollbar-color: #cec7ba #f5f0e8; }
:focus-visible { outline: 2px solid #f26a00; outline-offset: 3px; }

/* ── 스크롤 활주로 ────────────────────────────────────────────────
   패널은 margin-bottom: -100svh 로 흐름 높이가 0이므로 스크롤 거리를 만들지 못한다.
   이 요소가 전체 스크롤 거리를 전담한다.
   패널 8개 = 전환 구간 7개, 슬롯당 300svh -> 2400svh (2026-08-18 200→250→300: 컴포넌트가 다 나온 뒤 여유가 30svh 뿐이라 플릭 한 번에 다음 패널로 건너뛰었다. 250 에서도 빠르다는 피드백으로 300).
   짧게 잡으면 한 번 굴릴 때 패널이 통째로 지나가 내용을 읽을 수 없다.
─────────────────────────────────────────────────────────────── */
[data-r="runway"] { display: block; position: relative; height: 2400svh; pointer-events: none; }
@media (max-width: 900px) {
  /* 적층은 스크롤 구동 애니메이션이 있어야 성립한다. 지원하지 않는 브라우저
     에서만 활주로를 걷고 평범한 문서로 되돌린다(아래 @supports not 참조). */
  @supports not (animation-timeline: scroll(root)) {
    [data-r="runway"] { display: none; }
    [data-r="page"] { position: relative !important; height: auto !important; margin-bottom: 0 !important; animation-name: none !important; filter: none !important; opacity: 1 !important; }
  }
}

/* 모바일에서는 적층을 풀고 일반 문서 흐름으로 돌아가므로 활주로가 없다.
   패널 안의 챕터 페이저(#앵커 링크)는 갈 곳이 사라지니 함께 숨긴다.
   좌측 인덱스도 이미 숨겨져 있어, 모바일은 단순 세로 스크롤 문서가 된다. */
@media (max-width: 900px) {
  [data-r="page"] a[href^="#"] { display: none !important; }
}

/* ── 좌측 챕터 인덱스 ──────────────────────────────────────────────
   성격은 지표다. 읽히되 앞으로 나서지 않는다.
   눈금이 세로 헤어라인 위를 오른쪽 끝에 맞춰 늘어나며 현재 위치를 가리킨다.
   본문 여백(--gutter 40px)과 같은 선에 세워 페이지 판면에 편입시킨다.
─────────────────────────────────────────────────────────────── */
/* 폭 계산: 인덱스는 레일 컬럼(0~200px) 안에 머물러야 한다. 본문은 레일 뒤
   40px 여백 다음, 즉 x=240 에서 시작한다. 가장 긴 항목 "04 TECHNOLOGY" 가
   250px 까지 뻗어 본문 첫 열과 10px 겹쳐 있었다(고정 배치라 밀려나지도 않는다).
   왼쪽 기준선(40px)은 본문 여백과 맞춘 선이므로 그대로 두고, 눈금·자간·크기를
   줄여 오른쪽 끝을 끌어당긴다. 지금은 205px 근처에서 끝나 35px 이 남는다. */
[data-r="index"] {
  left: 40px !important;
  gap: 11px !important;
  width: 150px !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  padding-left: 28px;
}
/* 눈금들을 잇는 세로 기준선 */
[data-r="index"]::before {
  content: ""; position: absolute; left: 28px; top: -2px; bottom: -2px;
  width: 1px; background: rgba(21,24,18,0.12);
}
[data-r="index"] > a { position: relative; grid-template-columns: 26px 1fr !important; gap: 9px !important; }
[data-h="navtick"] { width: 26px !important; transform-origin: right center; will-change: transform; }
[data-h="navitem"]:hover [data-h="navtick"] { background: #151812 !important; }

/* ── 모바일 보정 ────────────────────────────────────────────────────
   데스크톱은 활주로(1600svh)가 스크롤을 만들고 모든 애니메이션이 그 위에
   절대 퍼센트로 배치되어 있다. 모바일은 활주로를 숨기므로 문서 길이가
   완전히 달라지고, 같은 퍼센트가 엉뚱한 지점을 가리킨다.
   패널뿐 아니라 '패널 안의 모든 요소'까지 애니메이션을 꺼야 한다.
   끄면 fill-mode 가 적용되지 않아 각 요소는 자기 정지 상태로 렌더된다.
   (인라인 opacity:0 은 이 페이지에 없음을 확인함)
─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 적층을 푸는 경우에만 해당한다. 적층이 살아 있으면 문서 길이가 데스크톱과
     같은 활주로 기준이므로 절대 퍼센트가 그대로 맞는다. */
  @supports not (animation-timeline: scroll(root)) {
    [data-r="page"], [data-r="page"] * { animation-name: none !important; }
    [data-r="page"] * { filter: none !important; }

    /* 로고 열은 자동 흐름이 멈추면 clip 에 잘려 앞쪽 몇 개만 보인다.
       그때는 손가락으로 미는 가로 스크롤 띠로 바꾼다. */
    [data-r="marqueewrap"] { overflow-x: auto !important; mask-image: none !important; -webkit-overflow-scrolling: touch; }
    [data-r="marqueewrap"]::-webkit-scrollbar { height: 0; }
  }
}

/* 제목 줄바꿈 균형.
   본문에는 text-wrap: pretty 가 걸려 있는데 제목에는 아무것도 없었다.
   이 사이트는 한글이라 word-break: keep-all 이 필수인데, 단어 중간을 끊지 않으므로
   줄 길이 편차가 오히려 커진다. 마지막 줄에 한 단어만 떨어지는 현상이 그래서 생긴다.
   balance 는 각 줄 길이를 고르게 맞춰 그 편차를 줄인다. keep-all 과 짝을 이루는 규칙이다. */
h1, h2, h3, h4 { text-wrap: balance; }

/* 적층 구조의 포커스 함정 제거.
   패널은 도착 전에는 enterSlide 의 visibility:hidden 으로 탭 순서에서 빠지지만,
   도착 후 다음 패널에 덮인 뒤에는 visible 로 남아 '보이지 않는데 탭이 들어가는'
   상태가 된다. 다음 패널이 완전히 덮는 시점(그 패널 fade 종료)에 숨긴다.
   fill-mode: forwards 라서 구간 이전에는 관여하지 않고 enterSlide 가 그대로 산다. */
@keyframes panelPast {
  from { visibility: visible; }
  to   { visibility: hidden; }
}
@media (max-width: 900px) {
  @supports not (animation-timeline: scroll(root)) {
    /* 적층을 풀면 panelPast 의 visibility:hidden 이 남아 패널이 통째로
       사라진다. 적층이 살아 있을 때는 그대로 두어야 한다 — 덮인 패널을
       탭 순서에서 빼는 장치다. */
    [data-r="page"] { visibility: visible !important; }
  }
}

/* 건너뛰기 링크 — 헤더 내비를 지나쳐 본문으로. 키보드 포커스를 받을 때만 나타난다.
   display:none 이나 visibility:hidden 은 포커스 자체를 막으므로 쓰면 안 된다. */
.skip-main {
  position: absolute; left: 8px; top: -60px; z-index: 99;
  padding: 12px 18px;
  background: #151812; color: #f5f0e8;
  font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: top 160ms cubic-bezier(.2,.7,.2,1);
}
.skip-main:focus { top: 8px; color: #f5f0e8; }

/* ── 지표 실측선, 어두운 패널용 (data-r="measure-dark") ──────────────
   88.5 라는 숫자만으로는 몇 점 만점인지 알 수 없다. mAP·Precision·Recall 은
   정의상 0-100 이므로 눈금 역할의 실선 위에 값만큼의 막대를 얹는다.
   이 파일에 두는 이유: profile 은 site.css 를 읽지 않는다.
   등장 애니메이션을 붙이지 않는 이유: sticky 패널 안에서는 리빌 관찰자가
   발화하지 않을 수 있고, 그러면 막대가 보이지 않는 채로 남는다.
─────────────────────────────────────────────────────────────── */
[data-r="measure-dark"] { position: relative; height: 2px; margin-top: 18px; background: rgba(245,240,232,0.22); }
[data-r="measure-dark"] > i { display: block; height: 100%; width: var(--v, 0%); background: #f26a00; }

/* ── 좌측 세로선 중복 해소 ───────────────────────────────────────
   인덱스(고정)가 레일 컬럼(0~200px) 안에 통째로 겹쳐 있었다. 그래서
   세로선이 둘이었다 - 인덱스 자기 선(x=80)과 레일 테두리(x=200).
   그 사이에 라벨이 끼어 답답했다.
   인덱스가 보이는 폭에서는 레일 테두리를 없애고, 인덱스의 선 하나만
   구조선으로 남긴다. 인덱스가 숨는 900px 이하에서는 레일 테두리를 살린다.
──────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  [data-r="rail"] { border-right: 0 !important; }
}

/* ── 첫 진입 드래그 안내 (data-r="draghint") ──────────────────────
   이 면은 일반 페이지가 아니라 스크롤로 넘기는 슬라이드다. 상호작용
   방식이 표준이 아니어서 처음 들어온 사람은 무엇을 해야 할지 모른다.
   그래서 스크롤 유도 문구를 예외로 둔다(다른 면에는 두지 마십시오).

   스크롤이 시작되면 곧바로 사라진다. scroll(root) 타임라인이라 JS 가
   필요 없고, 한 번 지나가면 fill-mode 로 사라진 상태를 유지한다.

   가운데 아래에 두었더니 커버의 하단 캡션과 겹쳤다. 비어 있는 우측
   하단으로 옮기고 가로로 눕힌다.
──────────────────────────────────────────────────────────── */
[data-r="draghint"] {
  position: fixed; right: 40px; bottom: 34px; z-index: 7;
  display: flex; align-items: center; gap: 14px;
  pointer-events: none;
  animation-name: hintOut; animation-duration: auto; animation-timing-function: linear;
  animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 0% 2.2%;
}
@keyframes hintOut { from { opacity: 1; } to { opacity: 0; } }

[data-r="draghint"] figure { margin: 0; position: relative; width: 34px; height: 56px; flex: none; }
/* 손가락이 아래로 끌어내리는 반복 동작 */
[data-r="draghint"] svg {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  animation: dragFinger 2.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes dragFinger {
  0%, 8%   { transform: translateY(0);    opacity: 0; }
  18%      { opacity: 1; }
  62%      { transform: translateY(22px); opacity: 1; }
  82%, 100%{ transform: translateY(22px); opacity: 0; }
}
/* 끌린 자국 */
[data-r="draghint"] figure::after {
  content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 30px;
  background: linear-gradient(180deg, rgba(21,24,18,0.32), rgba(21,24,18,0));
  transform: translateX(-50%) scaleY(0); transform-origin: top center;
  animation: dragTrail 2.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes dragTrail {
  0%, 18%  { transform: translateX(-50%) scaleY(0); }
  62%      { transform: translateX(-50%) scaleY(1); }
  82%,100% { transform: translateX(-50%) scaleY(1); opacity: 0; }
}
[data-r="draghint"] span {
  font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #65685f; white-space: nowrap;
}
/* 모바일은 적층을 풀어 평범한 문서로 굴러가므로 "끌어 보기" 안내가 거짓이 된다 */
@media (max-width: 900px) {
  @supports not (animation-timeline: scroll(root)) {
    /* 적층이 풀린 곳에서는 "끌어 보기" 가 거짓 안내가 된다 */
    [data-r="draghint"] { display: none !important; }
  }
}

/* ── 파트너 로고 흐름 (data-r="marquee") ─────────────────────────
   이 규칙이 site.css 에만 있었다. profile 은 site.css 를 읽지 않으므로
   로고 24장이 가로로 흐르지 않고 세로로 쌓여 1920px 가 되어 패널
   밖으로 잘려 있었다. 앞의 몇 장만 보이던 원인이다.
   패널 높이가 100svh 로 고정이므로 여기서는 로고를 더 작게 잡는다.
──────────────────────────────────────────────────────────── */
@keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* max-content 인 마퀴가 부모를 밀어 넓히면 형제(지표·푸터)까지 화면 밖으로
   나간다. 감싸개를 100% 로 가두고 min-width:0 으로 축소를 허용한다. */
[data-r="marqueewrap"] { overflow: clip; width: 100%; min-width: 0; max-width: 100%; }
[data-r="page"] > [data-r="pad"] { min-width: 0; }
[data-r="marquee"] { display: flex; gap: 10px; width: max-content; animation: marqueeX 34s linear infinite; }
[data-r="marquee"] > div { flex: none; width: 168px; }
[data-r="marquee"] > [data-r="logowide"] { width: 200px; }
[data-r="marqueewrap"]:hover [data-r="marquee"] { animation-play-state: paused; }
/* prefers-reduced-motion 게이트는 두지 않는다 — 모션은 항상 재생(2026-08-13 사용자 지시, site.css 와 동일 정책) */

/* ── 한 패널을 두 박자로 (data-r="beats" / data-r="beat") ────────
   패널 하나가 화면 하나여서, 넣고 싶은 것을 다 넣으면 활자가 min(1vw,1.5vh)
   = 10px 까지 내려갔다. "어거지로 꽉 찬" 느낌의 원인이다.
   그런데 슬롯 하나(12.5% = 200svh)는 원래 화면 두 개 분량의 스크롤이다.
   그 절반씩을 두 박자에 나눠 주면 각 박자가 화면을 통째로 쓴다.
   같은 섹션 안에서 순서대로 나오므로 스토리는 끊기지 않고, 활자는 두 배가 된다.

   두 박자는 같은 그리드 칸(1/1)에 겹친다. 흐름에 나란히 두면 첫 박자가
   사라져도 그 자리가 남아 두 번째가 화면 아래로 밀린다.
──────────────────────────────────────────────────────────── */
[data-r="beats"] { display: grid; flex: 1 1 auto; align-content: center; min-height: 0; width: 100%; }
[data-r="beats"] > [data-r="beat"] { grid-area: 1 / 1; align-self: center; min-width: 0; }
/* 페이저는 두 박자 내내 같은 자리에 남는다 */
[data-r="pager"] { flex: none; }

@keyframes beatOut {
  0%   { opacity: 1; transform: none; filter: blur(0); visibility: visible; }
  99%  { visibility: visible; }
  100% { opacity: 0; transform: translateY(-42px); filter: blur(9px); visibility: hidden; }
}
@keyframes beatIn {
  0%   { opacity: 0; transform: translateY(50px); filter: blur(11px); visibility: hidden; }
  1%   { visibility: visible; }
  100% { opacity: 1; transform: none; filter: blur(0); visibility: visible; }
}
/* 두 번째 박자 안의 항목은 순서대로 도착한다(범위를 조금씩 늦춘다) */
@keyframes beatItem {
  0%   { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  @supports not (animation-timeline: scroll(root)) {
    /* 적층을 풀었을 때만 두 박자를 위아래로 잇는다 */
    [data-r="beats"] { display: block; }
    [data-r="beats"] > [data-r="beat"] {
      animation: none !important; opacity: 1 !important; visibility: visible !important;
      filter: none !important; transform: none !important;
    }
    [data-r="beats"] > [data-r="beat"] + [data-r="beat"] { margin-top: 30px; padding-top: 26px; border-top: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); }
    [data-r="beat"] [data-r="rows"] > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  }
}

/* ── 번호 목록 (data-r="rows") ───────────────────────────────────
   같은 크기 카드 3개를 나란히 놓고 그 안에 11px 짜리 01/02/03 을 얹는 구성은
   이 사이트의 언어가 아니다(디자인 방향 절). 카드를 걷어내고 가로 한 줄씩
   쌓는다. 번호는 작은 라벨이 아니라 큰 고스트 숫자로 두어 장식이 되게 하고,
   읽어야 할 것은 제목이 가져간다.
──────────────────────────────────────────────────────────── */
[data-r="rows"] > * { display: grid; grid-template-columns: minmax(72px, 8%) minmax(0, 1fr) minmax(0, 1.15fr); gap: min(3vw, 40px); align-items: baseline; padding: min(2.4vh, 26px) 0; border-top: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); }
[data-r="rows"] > *:first-child { border-top: 0; }
@media (max-width: 900px) {
  /* 행마다 인라인으로 열 구성을 다르게 주므로 모바일 접힘은 !important 가 필요하다 */
  [data-r="rows"] > * { grid-template-columns: 1fr !important; gap: 10px; padding: 22px 0; }
}

/* 모바일은 적층을 풀어 문서가 짧아지므로, 문서 스크롤 절대 퍼센트로 잡힌
   scroll(root) 범위가 엉뚱한 지점에 대응한다(내용이 늦게 나타나거나 안 나타남).
   ≤900px 에서는 스크롤 구동 연출을 통째로 끄고 정적으로 보여준다. */
@media (max-width: 900px) {
  @supports not (animation-timeline: scroll(root)) {
    [data-r="page"] [style*="scroll(root)"] {
      animation: none !important; opacity: 1 !important; transform: none !important;
      filter: none !important; visibility: visible !important;
    }
    [data-r="page"] h2[style*="scroll(root)"], [data-r="page"] figure[style*="scroll(root)"] { clip-path: none !important; }
    #main [style*="animation-name: heroFocus"], #main [style*="animation-name: wipeUp"] { animation: none !important; }
  }
}

/* ── 좁은 데스크톱(901–1180px) ──────────────────────────────────
   고정 인덱스는 left: 18px 에 폭 168px 이라 항상 x=18~250 을 차지하는데,
   본문은 레일 200px 뒤 x=240 에서 시작한다. 폭이 넓을 때는 본문이 오른쪽으로
   충분히 밀려 문제가 없지만, 1180px 아래에서는 인덱스 라벨과 본문 첫 열이
   같은 자리를 놓고 겹친다. 이 구간에서는 인덱스를 접고, 대신 900px 위에서
   숨겨 두었던 레일의 챕터 라벨을 되살린다. 레일도 200px → 132px 로 좁힌다.
   (모바일 전환 직전에 "순서가 이상해 보이던" 구간이 여기다.)
──────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1180px) {
  [data-r="index"] { display: none !important; }
  [data-r="rail"] > span { display: inline-block !important; }
  /* 아래쪽 "03 / 07" 은 페이저가 이미 같은 것을 보여준다 */
  [data-r="rail"] > span:last-of-type { display: none !important; }
  [data-r="page"] { grid-template-columns: 132px 1fr !important; }
  [data-r="rail"] {
    border-right: 1px solid !important;
    border-color: color-mix(in srgb, currentColor 24%, transparent) !important;
    /* 패널은 top: 0 에 붙는데 헤더가 그 위를 덮는다. 레일 첫 항목이
       헤더 밑으로 들어가지 않도록 위쪽만 헤더 높이만큼 더 준다. */
    padding: calc(4.5vh + 58px) 16px 4.5vh !important;
    font-size: 10px !important;
  }
  [data-r="pad"] { padding: 4.5vh 32px !important; }
  [data-r="draghint"] { right: 24px; }
}

/* ── 모바일 활자 (≤900px) ───────────────────────────────────────
   이 면의 활자는 전부 min(Xvw, Yvh) 로 짜여 있다. 데스크톱에서는 화면
   비율이 어떻든 한 화면에 들어맞게 해 주는 방식이지만, 폭이 좁아지면
   vw 항이 그대로 무너진다. 390px 에서 본문이 4.9~6.6px 였다.
   적층이 풀리는 폭부터는 높이에 맞출 이유가 없으므로(문서가 세로로 길게
   흐른다) 폭 기준 clamp 로 갈아끼운다. 사실상 이 블록이 모바일 전용 조판이다.
──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  [data-r="page"] [style*="font-size: min("] { font-size: clamp(15px, 4vw, 17.5px) !important; line-height: 1.72 !important; }

  [data-r="page"] h1[style*="font-size: min("] { font-size: clamp(34px, 9.5vw, 56px) !important; line-height: 1 !important; }
  [data-r="page"] h2[style*="font-size: min("] { font-size: clamp(26px, 7.2vw, 40px) !important; line-height: 1.2 !important; }
  [data-r="page"] h3[style*="font-size: min("] { font-size: clamp(18px, 4.8vw, 24px) !important; line-height: 1.35 !important; }
  [data-r="page"] h4[style*="font-size: min("] { font-size: clamp(17px, 4.6vw, 22px) !important; line-height: 1.4 !important; }
  /* 박자 안의 큰 문장(리드·인용) 과 셋째 단 제목은 한 단계 위 */
  [data-r="page"] h3[style*="min(3vw"], [data-r="page"] h3[style*="min(3.6vw"] { font-size: clamp(23px, 6.2vw, 32px) !important; line-height: 1.28 !important; }
  [data-r="page"] p[style*="min(2.7vw"], [data-r="page"] p[style*="min(2.8vw"], [data-r="page"] p[style*="min(2.9vw"] { font-size: clamp(20px, 5.4vw, 30px) !important; line-height: 1.45 !important; }
  [data-r="page"] p[style*="min(1.7vw"] { font-size: clamp(16px, 4.4vw, 20px) !important; }

  [data-r="page"] span[style*="font-size: min("] { font-size: clamp(13.5px, 3.6vw, 16px) !important; }
  [data-r="page"] span[style*="min(3.4vw"] { font-size: clamp(26px, 7vw, 38px) !important; }   /* 고스트 번호 */
  [data-r="page"] span[style*="min(1.9vw"] { font-size: clamp(15px, 4vw, 18px) !important; }   /* 연도 */
  [data-r="page"] strong[style*="font-size: min("] { font-size: clamp(34px, 9vw, 48px) !important; }

  /* 커버 워드마크도 min(20vw, 22vh) 라 390px 에서 78px 로 쪼그라든다 */
  [data-r="pad"] img[style*="width: min("] { width: clamp(130px, 36vw, 190px) !important; }
}
/* 모바일에서는 사업자 정보를 한 줄씩 쌓는다. space-between 이 남으면
   "대표이사 / 이용근" 이 좌우로 벌어져 표처럼 읽힌다. */
@media (max-width: 900px) {
  /* column + wrap 이면 flex-basis:100% 인 저작권 줄이 두 번째 "열"로 넘어간다 */
  [data-r="foot"] { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; margin: 0 !important; row-gap: 14px !important; }
  [data-r="foot"] > p { flex-basis: auto !important; width: 100%; }
}
/* 지표 4개는 좁은 폭에서 2×2 로. 390px 4열이면 한 칸이 75px 이라
   "공공 파트너 기관" 같은 라벨이 세 줄로 접힌다. */
@media (max-width: 900px) {
  [data-r="metrics"] { grid-template-columns: repeat(2, 1fr) !important; row-gap: 30px !important; }
}
@media (max-width: 420px) {
  [data-r="metrics"] { column-gap: 20px !important; }
}

/* ── 모바일 적층 (≤900px, 스크롤 구동 지원 시) ──────────────────
   여기가 "모바일에서도 웹과 같은 화면 전환" 이다. 적층 자체는 폭과 무관한
   구조이므로 풀 이유가 없었다. 다만 좁은 화면에서는 레일·인덱스가 들어갈
   자리가 없고, 한 화면에 담아야 할 것이 그대로면 넘친다. 그 두 가지만 조정한다.
──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  @supports (animation-timeline: scroll(root)) {
    [data-r="page"] { position: sticky !important; top: 0 !important; height: 100svh !important; margin-bottom: -100svh !important; }
    /* 헤더는 ≤900px 에서 두 줄로 접혀 104px 이다. 패널이 top:0 에 붙으므로
       그만큼 위를 비우지 않으면 첫 줄(아이브로)이 헤더 밑으로 들어간다. */
    [data-r="pad"] { padding: calc(1.6vh + 104px) 20px 2vh !important; }
    [data-r="two"], [data-r="three"] { gap: 2.4vh !important; }
    [data-r="beats"] { display: grid; }
    /* 한 화면 안에 들어가야 하므로 데스크톱보다 한 단계 눌러 잡는다 */
    [data-r="page"] h1[style*="font-size: min("] { font-size: clamp(30px, 8.4vw, 46px) !important; }
    [data-r="page"] h2[style*="font-size: min("] { font-size: clamp(23px, 6.4vw, 34px) !important; }
    [data-r="page"] h3[style*="min(3vw"], [data-r="page"] h3[style*="min(3.6vw"] { font-size: clamp(20px, 5.4vw, 27px) !important; }
    [data-r="page"] p[style*="min(2.7vw"], [data-r="page"] p[style*="min(2.8vw"], [data-r="page"] p[style*="min(2.9vw"] { font-size: clamp(18px, 4.8vw, 25px) !important; }
    [data-r="page"] [style*="font-size: min("] { font-size: clamp(13.5px, 3.5vw, 15.5px) !important; line-height: 1.6 !important; }
    [data-r="page"] h3[style*="font-size: min("] { font-size: clamp(16px, 4.2vw, 20px) !important; }
    [data-r="page"] h4[style*="font-size: min("] { font-size: clamp(15.5px, 4vw, 19px) !important; }
    [data-r="page"] strong[style*="font-size: min("] { font-size: clamp(28px, 7.4vw, 38px) !important; }
    [data-r="page"] span[style*="min(3.4vw"] { font-size: clamp(20px, 5.4vw, 28px) !important; }
    /* 사진은 세로를 많이 먹는다 */
    [data-r="mid"] { height: 16vh !important; }
    [data-r="tall"] { min-height: 0 !important; height: 17vh !important; }
    /* 지표 타일 안쪽 여백도 세로를 먹는다 */
    [data-r="three"] > div[style*="border-top: 3px solid #f26a00"] { padding: 1.2vh 14px 1.4vh !important; }
    [data-r="beat"] img[style*="aspect-ratio"] { max-height: 13vh !important; }
    [data-r="rows"] > * { padding: 1.5vh 0 !important; }
    [data-r="pager"] { font-size: 9.5px !important; }
    [data-r="foot"] { row-gap: 8px !important; }
    [data-r="foot"] span, [data-r="foot"] a { font-size: 11px !important; }
    [data-r="draghint"] { right: 18px; bottom: 18px; }
    /* 로고 칸이 168px 이면 390px 화면에 두 장밖에 걸리지 않는다 */
    [data-r="marquee"] > div { width: 116px !important; }
    [data-r="marquee"] > [data-r="logowide"] { width: 140px !important; }
    [data-r="marquee"] img { height: 42px !important; }
    [data-r="marquee"] > div { padding: 0 8px !important; }
  }
}

/* 세로가 짧은 폰(≈667px 이하)에서는 한 화면에 들어갈 자리가 더 없다.
   데스크톱에서 쓰던 방식(zoom)을 그대로 쓰되, 헤더를 비우는 위쪽 패딩은
   zoom 으로 같이 줄어들므로 나눠서 되돌린다. */
@media (max-width: 900px) and (max-height: 740px) {
  @supports (animation-timeline: scroll(root)) {
    [data-r="pad"] { zoom: 0.86; padding: calc(114px / 0.86) calc(18px / 0.86) calc(14px / 0.86) !important; }
  }
}
@media (max-width: 900px) and (max-height: 620px) {
  @supports (animation-timeline: scroll(root)) {
    [data-r="pad"] { zoom: 0.76; padding: calc(110px / 0.76) calc(16px / 0.76) calc(12px / 0.76) !important; }
  }
}