/* ============================================================================
   film-reel.css — /film 전시면 조판 (2026-08-04)

   왜 새 파일인가: `sections.css` 에 `/film` 상세 6면과 `/home` 이 걸려 있고
   `work.css` 에 `/work` 목록이 걸려 있다. 확정 전까지 둘 다 건드리지 않는다.
   프리픽스는 `fr-` 로 통일해 어느 파일 소관인지 선택자만 봐도 알게 했다.

   ── 이 면이 무엇인가 ────────────────────────────────────────────────
   2026-08-04 Seal 지시: "기존에는 이 세션을 장편과 단편을 나누는 페이지로 가려했다면
   난 그냥 바로 film 작품들을 전시해놓은 페이지로 가고싶어. 대신 work와는 차별되는
   레이아웃으로 (...) 한 화면 전체를 풀브리드로 쓰고 스크롤로 다음 작품을 넘어가게."
   레퍼런스 = depoluxe.xyz/archive.

   ── 레퍼런스 실측 (CDP 로 직접 재 봤다. 원장 = scratchpad/ref/) ──────
   `body{overflow:hidden}` + `scrollHeight === innerHeight` 였다. 네이티브 스크롤이
   아니라 GSAP 가상 스크롤이다. `window.scrollTo` 로는 아무 일도 안 일어난다.
   진짜 휠 이벤트를 넣고서야 값이 움직였다. 거기서 나온 원리 셋:
     ① `li{flex:1 0 100%}`  — 한 항목이 정확히 한 화면이다
     ② `.visor-videos`      — 화면 전체를 덮는 절대배치 레이어. figure 마다 100vw×100vh,
                              `object-fit:cover`. 항목이 바뀌면 이 레이어가 교차된다
     ③ 한 제스처에 한 칸    — 인덱스가 0 → 1 → 2 로 또박또박 올라갔다

   ── 우리 스택으로 옮긴 방식 ─────────────────────────────────────────
   원리는 같게, 구현은 우리 것으로. 남의 가상 스크롤을 들여오지 않는다.
     · 바탕      = 네이티브 CSS `scroll-snap`. JS 가 죽어도 한 장씩 걸린다
     · 한 제스처 = `site.js §9` 가 휠·키·터치를 한 칸으로 묶는다(레퍼런스의 ③)
     · 교차      = 판마다 제 미디어를 갖고, 들어올 때 스케일이 내려앉는다(레퍼런스의 ②)
   ★가상 스크롤을 쓰지 않은 이유: 스크롤을 뺏으면 키보드·접근성·no-JS 가 전부 우리 책임이
   된다. 네이티브를 바탕에 두면 JS 는 "느낌"만 얹으면 된다.

   ⚠ 이 면에서는 Lenis 를 켜지 않는다. 스무스 스크롤과 스크롤 스냅은 같은 스크롤 위치를
   두 주인이 나눠 갖는 구조라 서로를 되돌린다. (인계서 §7 "transform 을 두 곳에서 쓰지
   않는다" 와 같은 종류의 함정이다.) 현재 어느 면도 Lenis 를 로드하지 않으므로 지금은
   문제가 없고, 나중에 켤 때 이 면만 빼야 한다.

   ⚠ CSS 주석에 별표 강조를 쓰지 않는다 — 별표 둘 뒤 슬래시가 주석 종료 기호가 되고
   뒤따르는 @media 블록이 통째로 삼켜진다. `docs/solutions/tool-usage/sol-20260803-004.md`
   ============================================================================ */

/* ══ 0. 지면 · 스냅 ══════════════════════════════════════════════════
   지면은 `body` 한 곳에서만 칠한다(2026-08-03 확정 + 겹침 조판 함정).
   판에는 배경을 주지 않는다 — 판마다 제 미디어가 이미 화면을 덮는다.        */
html.fr{ scroll-snap-type:y mandatory; }
html.fr, html.fr body{ height:auto; }

/* 스냅 판. `100svh` 를 쓴다 — 모바일 주소창이 접히고 펴질 때 `vh` 는 판 높이를
   바꿔 스냅 지점을 흔든다. `svh` 는 가장 작은 상태로 고정이라 흔들리지 않는다 */
.fr-panel{
  position:relative; height:100svh; min-height:100svh;
  scroll-snap-align:start; scroll-snap-stop:always;   /* stop:always = 한 번에 두 칸을 못 넘어간다 */
  overflow:hidden;                                     /* 미디어 스케일이 가로로 넘치지 않게 */
  display:flex;
}

/* ══ 1. 미디어 — 화면을 덮는다 ══════════════════════════════════════
   ★풀폭 요소를 `scale(>1)` 로 "진입"시키면 가로 스크롤이 생긴다(인계서 §7).
   그래서 스케일은 판 안쪽 `.fr-med` 에만 걸고 판이 `overflow:hidden` 으로 받는다.  */
.fr-med{
  position:absolute; inset:0; z-index:0;
  transform:scale(1.08); transform-origin:50% 50%;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.fr-panel.is-on .fr-med{ transform:scale(1); }
/* ★밝은 프레임에서 흰 글자가 안 읽힌다. `The Journey of Yellow` 의 흑백 숲처럼
   화면 전체가 밝은 작품이 있고, 스크림만으로는 그 위에 글을 못 세운다.
   판을 깔지 않기로 한 이상 미디어 자체를 조금 눌러야 한다. 대비만 살짝 올려
   눌린 만큼 화면이 죽어 보이지 않게 했다 */
.fr-med video, .fr-med img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:brightness(.86) contrast(1.04);
}

/* 스크림 — 판을 깔지 않고 글자를 띄운다.
   `.hud` 가 판 없이 스크림+그림자로 푸는 것과 같은 결(site.css §HUD 주석).
   위는 내비가 앉을 자리, 아래는 글이 앉을 자리다 */
.fr-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.12) 26%, transparent 46%),
    linear-gradient(0deg,   rgba(0,0,0,.74) 0%, rgba(0,0,0,.30) 32%, transparent 62%);
}
/* 가장자리 어둠. 화면 네 귀가 눌리면 가운데가 스크린처럼 뜬다 */
.fr-vig{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 92% at 50% 46%, transparent 44%, rgba(0,0,0,.46) 100%);
}

/* 그레인 — 판정 대기 #3(시그니처)의 한쪽 답. 아주 얇게만 얹는다.
   SVG 노이즈를 데이터 URI 로 넣어 외부 요청이 없다. 끄려면 `.fr-grain` 를 지운다 */
.fr-grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.62'/></svg>");
  background-size:160px 160px;
}

/* ══ 2. 글 — 공통 얼굴 ═══════════════════════════════════════════════ */
.fr-body{ position:relative; z-index:3; width:100%; display:flex; }

/* 킥커 — 11px 은 146px 제목 옆에서 사라졌다. 12.5px 로 올리고 흰색 쪽으로 당긴다.
   번호만 강조색이라 네 편이 전부 "단편" 인 구간에서도 판이 구별된다 */
.fr-kick{
  display:flex; align-items:center; gap:.9em;      /* ★간격은 여기 한 곳에서만 준다.
     A안에만 flex 를 줬다가 B안에서 `01장편` 으로 붙어 나왔다 — 안마다 손으로 주면 한쪽이 빠진다 */
  font-family:var(--body-ko); font-size:12.5px; font-weight:600;
  letter-spacing:.22em; color:rgba(255,255,255,.74);
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.fr-kick > span:first-child{ color:var(--accent); letter-spacing:.14em; }

/* 제목은 라틴이다(작품명이 영문이다). `--display-en` = Anton — 홈 히어로와 같은 얼굴.
   ⚠ `:lang(ko)` 로 다국어 조각을 스타일하지 않는다(인계서 §7). 얼굴은 클래스로 박는다 */
.fr-title{
  font-family:var(--display-en); font-weight:400;
  line-height:.9; letter-spacing:-.015em; color:var(--ink);
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.fr-line{
  font-family:var(--body-ko); font-weight:400;
  color:rgba(255,255,255,.9); text-shadow:0 1px 14px rgba(0,0,0,.75);
}

/* 상세로 가는 자리. 판 전체가 링크라 이건 신호지 유일한 과녁이 아니다 */
.fr-go{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--body-en); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.fr-go i{
  display:block; width:34px; height:1px; background:var(--ink); opacity:.55;
  transition:width .5s cubic-bezier(.16,1,.3,1), background .3s, opacity .3s;
}
.fr-card:hover .fr-go i, .fr-card:focus-visible .fr-go i{
  width:58px; background:var(--accent); opacity:1;
}

/* 판 전체가 과녁이다 */
.fr-card{
  position:absolute; inset:0; z-index:4;
  display:block; text-decoration:none; color:inherit;
}
.fr-card:focus-visible{ outline:2px solid var(--accent); outline-offset:-6px; }

/* ══ 3. 진입 — 판이 자리잡을 때 글이 든다 ═════════════════════════════
   ★레이아웃을 건드리지 않는 값만 쓴다(transform·opacity·clip-path).
   높이를 건드리면 스냅 지점이 애니메이션 중에 움직여 스크롤이 떤다.          */
.fr-in{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.fr-panel.is-on .fr-in{ opacity:1; transform:none; }
.fr-panel.is-on .fr-in:nth-child(1){ transition-delay:.06s }
.fr-panel.is-on .fr-in:nth-child(2){ transition-delay:.14s }
.fr-panel.is-on .fr-in:nth-child(3){ transition-delay:.24s }
.fr-panel.is-on .fr-in:nth-child(4){ transition-delay:.34s }

/* 제목은 아래에서 열리며 선다. 타이틀 카드가 뜨는 결.
   ★디센더가 잘렸던 자리다 — `overflow:hidden` 은 마스크 리빌에 꼭 필요한데
   `line-height:.9` 는 통을 글자보다 짧게 만든다. `days`·`Journey`·`Yellow` 의 y 가
   실제로 잘려 나갔다. 여유는 **제목 자신**에 준다. 통에 `em` 을 쓰면 통의 서체 크기
   (본문 16px)가 기준이 되어 2px 밖에 안 붙는다 — `ch` 를 래퍼에 쓰면 안 되는 것과 같은 함정 */
.fr-titlewrap{ overflow:hidden; }
.fr-titlewrap .fr-title{
  display:block; padding-bottom:.13em; transform:translateY(104%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}
.fr-panel.is-on .fr-titlewrap .fr-title{ transform:none; transition-delay:.1s; }

/* 루프 순간이동 한 프레임 — 전이를 통째로 끈다.
   클론과 첫 작품은 같은 그림이라 자리를 바꿔도 화면은 그대로여야 하는데, 전이가 살아 있으면
   도착한 판의 진입 애니메이션이 **스크롤도 없이** 되살아나 그 순간만 글이 튄다.
   `site.js §9 teleport` 가 한 프레임 붙였다 뗀다. 범위를 넓히지 않으려고 요소를 지목한다 */
html.fr-jump .fr-in,
html.fr-jump .fr-titlewrap .fr-title,
html.fr-jump .fr-med,
html.fr-jump .fr-led a,
html.fr-jump .fr-rail b{ transition:none !important; }

/* ══ 4. 릴 표시기 — 지금 몇 번째인가 ══════════════════════════════════
   레퍼런스는 목록 자체가 표시기다. 우리는 A안에서 이걸 얇은 레일로 뽑았다.    */
.fr-rail{
  position:fixed; z-index:40; right:calc(var(--edge) * .8); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:11px;
  pointer-events:none;
}
.fr-rail b{
  display:block; width:16px; height:1px; background:rgba(255,255,255,.34);
  transition:width .55s cubic-bezier(.16,1,.3,1), background .4s;
}
.fr-rail b.on{ width:38px; background:var(--accent); }

/* 왼쪽 세로 표기 — 필름 가장자리의 각인 */
.fr-edge{
  position:fixed; z-index:40; left:calc(var(--edge) * .62); top:50%;
  transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-family:var(--body-en); font-size:11px; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.5);
  text-shadow:0 1px 10px rgba(0,0,0,.5); pointer-events:none;
}

/* 스크롤 안내 — 첫 판에서만 뜨고 한 번 움직이면 사라진다 */
.fr-hint{
  position:fixed; z-index:40; left:50%; bottom:22px; transform:translateX(-50%);
  font-family:var(--body-en); font-size:10px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.55);
  text-shadow:0 1px 10px rgba(0,0,0,.5); pointer-events:none;
  transition:opacity .6s; animation:fr-breathe 2.6s ease-in-out infinite;
}
/* ★`animation` 을 같이 꺼야 한다. 키프레임이 `opacity` 를 쥐고 있으면 일반 선언은 못 이긴다.
   `opacity:0` 만 걸어 놨더니 한 바퀴를 다 돌아도 `SCROLL` 이 계속 숨쉬고 있었다 */
html.fr-moved .fr-hint{ opacity:0; animation:none; }
@keyframes fr-breathe{ 0%,100%{opacity:.4} 50%{opacity:.9} }

/* ══════════════════════════════════════════════════════════════════════
   A안 — 타이틀 카드
   글이 화면 한가운데 선다. /work 는 글이 아래 모서리에 붙는 편집 조판이라,
   가운데로 올리는 것만으로 두 면이 확실히 갈린다. 극장에서 제목이 뜨는 자리다.
   ══════════════════════════════════════════════════════════════════════ */
.fr-a .fr-body{ align-items:center; justify-content:center; padding:0 var(--edge); }
.fr-a .fr-stack{
  width:100%; max-width:1080px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
/* 글이 화면 한가운데 서므로 어둠도 한가운데가 가장 깊어야 한다.
   `.fr-scrim` 은 위아래만 누른다 — 가운데는 이 한 겹이 맡는다 */
.fr-a .fr-body::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(78% 62% at 50% 50%, rgba(0,0,0,.46), rgba(0,0,0,.16) 66%, transparent 88%);
}
.fr-a .fr-kick{ margin-bottom:26px; justify-content:center; }
/* 킥커 양옆의 실선 — 제목을 한 번 끼워 넣는 프레임 */
.fr-a .fr-kick::before, .fr-a .fr-kick::after{
  content:""; display:block; width:clamp(22px,4vw,62px); height:1px;
  background:rgba(255,255,255,.42);
}
.fr-a .fr-title{ font-size:clamp(46px,8.4vw,146px); }
.fr-a .fr-titlewrap{ margin-bottom:14px; }
/* ★통의 폭은 픽셀·vw 로 잡는다. `ch` 는 그 요소 자신의 서체 기준이라
   글자 크기가 다른 자식을 감싸면 통이 엉뚱하게 좁아진다(인계서 §7) */
.fr-a .fr-line{ font-size:clamp(15px,1.28vw,18.5px); line-height:1.85; max-width:660px; }
.fr-a .fr-go{ margin-top:38px; }

/* ══════════════════════════════════════════════════════════════════════
   `fr-b` — 필름 원장 · ★2026-08-05 Seal 확정 = 이 면의 정본 문법
   (클래스 이름은 후보 시절의 `fr-b` 를 그대로 둔다. 정본은 `film-v1.html` 이고
    `fr-a` 는 반려 아닌 미채택 기록이다 — `film-a-v1.html` 이 계속 그걸 쓴다)
   레퍼런스의 원리를 그대로 옮긴 쪽이다: 목록이 곧 내비고, 현재 작품이 그 목록
   안에서 제자리에 부풀어 오른다. 옆의 작은 줄들은 앞뒤로 무엇이 있는지 말해 준다.
   ══════════════════════════════════════════════════════════════════════ */
/* ★원장이 밝은 프레임에서 사라진다. `Daily Life In Bangkok` 은 액션캠이 역 바닥을 찍은
   밝은 회색 화면이라 그 위에서 12.5px dim 글자가 통째로 날아갔다.
   `.fr-scrim` 은 위아래만 누르므로 원장이 앉는 오른쪽 기둥을 한 겹 더 눌러 준다.
   판을 깔지 않는 원칙 그대로 경계 없는 그라디언트다 */
.fr-b .fr-scrim::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(270deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 18%, transparent 36%);
}
.fr-b .fr-body{ align-items:center; justify-content:flex-start; padding:0 clamp(24px,7vw,110px); }
.fr-b .fr-stack{ width:100%; max-width:820px; }
.fr-b .fr-kick{ margin-bottom:20px; }
.fr-b .fr-title{ font-size:clamp(40px,6.6vw,112px); }
.fr-b .fr-titlewrap{ margin-bottom:10px; }
.fr-b .fr-line{ font-size:clamp(15px,1.2vw,17.5px); line-height:1.85; max-width:520px; }
.fr-b .fr-go{ margin-top:34px; }

/* 원장 — 전 작품이 오른쪽에 한 벌로 서 있고 현재 것만 살아난다 */
.fr-led{
  position:fixed; z-index:40; right:calc(var(--edge) * .9); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:2px; text-align:right;
  /* 위아래를 흐려 목록이 화면에 갇히지 않고 지나가는 것처럼 보이게 한다 */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
}
.fr-led a{
  display:flex; align-items:baseline; justify-content:flex-end; gap:.85em;
  padding:5px 0; text-decoration:none;
  font-family:var(--body-en); font-size:12.5px; font-weight:500; letter-spacing:.02em;
  color:rgba(255,255,255,.46); text-shadow:0 1px 12px rgba(0,0,0,.8);
  transition:color .45s cubic-bezier(.16,1,.3,1), opacity .45s;
}
.fr-led a em{
  font-style:normal; font-size:10px; letter-spacing:.16em;
  color:rgba(255,255,255,.36); transition:color .45s;
}
.fr-led a:hover{ color:rgba(255,255,255,.8); }
.fr-led a.on{ color:var(--ink); }
.fr-led a.on em{ color:var(--accent); }

/* ══ 5. 닫는 판 — 목록 한 장 + 푸터 ═══════════════════════════════════
   ★스냅 면의 끝을 푸터로 그냥 두면 마지막 스냅 지점이 화면보다 짧아 튄다.
   닫는 판을 `100svh` 로 세우고 그 안에 푸터를 앉히면 끝이 깨끗하다.            */
.fr-outro{
  height:auto; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; background:var(--void); overflow:visible;
}
.fr-outro .fr-index{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--edge) 60px; max-width:var(--max); margin:0 auto; width:100%;
}
.fr-outro .fr-index h2{
  font-family:var(--body-en); font-size:11px; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--dim); margin-bottom:34px;
}
.fr-ix{ display:flex; flex-direction:column; }
.fr-ix a{
  display:grid; grid-template-columns:44px 1fr auto; align-items:baseline; gap:18px;
  padding:16px 0; border-top:1px solid rgba(255,255,255,.14); text-decoration:none;
  transition:padding-left .45s cubic-bezier(.16,1,.3,1);
}
.fr-ix a:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.fr-ix a:hover{ padding-left:14px; }
.fr-ix .n{ font-family:var(--body-en); font-size:11px; letter-spacing:.16em; color:var(--accent); }
.fr-ix .t{ font-family:var(--display-en); font-size:clamp(20px,2.5vw,34px); line-height:1.1; color:var(--ink); }
.fr-ix .m{ font-family:var(--body-ko); font-size:12px; color:var(--dim); text-align:right; }
.fr-outro footer.site{ scroll-snap-align:none; }

/* 검은 지면에서는 푸터도 검정에서 시작해야 이음매가 없다.
   `site.css` 기본 푸터는 `--ground` 회색에서 시작하는 그라디언트라 띠로 뜬다
   (`/work` 에서 이미 밟은 자리 — 인계서 §6-A-3) */
/* 지면·푸터 착지는 site.css 로 올라갔다 (2026-08-05) */

/* ══ 6. 모바일 ═══════════════════════════════════════════════════════
   구성을 접지 않는다. 한 화면 한 작품이 이 면의 전부라 접을 것이 없다.
   대신 얇은 표기(레일·세로 각인)를 걷고 글을 아래로 내린다 — 좁은 화면에서
   한가운데 큰 글자는 미디어의 인물과 정면으로 겹친다.
   ⚠ `/film` 8면의 모바일 원장은 아직 500px 기준이다(인계서 §7 헤드리스 함정).
      이 면은 원장 이식이 아니라 설계라 그 값에 기대지 않는다.                */
@media (max-width:760px){
  .fr-rail, .fr-edge{ display:none; }
  .fr-led{
    right:auto; left:0; right:0; top:auto; bottom:0; transform:none;
    flex-direction:row; gap:0; justify-content:center;
    padding:0 0 14px; mask-image:none; -webkit-mask-image:none;
  }
  .fr-led a{ padding:6px; font-size:0; gap:0; }
  .fr-led a em{ font-size:0; }
  /* 좁은 화면에서 제목 목록은 못 읽는다. 점으로 줄인다 */
  .fr-led a::after{
    content:""; display:block; width:5px; height:5px; border-radius:50%;
    background:rgba(255,255,255,.32); transition:background .4s, transform .4s;
  }
  .fr-led a.on::after{ background:var(--accent); transform:scale(1.5); }

  .fr-a .fr-body, .fr-b .fr-body{
    align-items:flex-end; justify-content:flex-start;
    padding:0 var(--edge) clamp(76px,15svh,132px);
  }
  .fr-a .fr-stack{ text-align:left; align-items:flex-start; max-width:none; }
  .fr-a .fr-kick::before, .fr-a .fr-kick::after{ display:none; }
  .fr-a .fr-kick{ margin-bottom:16px; }
  .fr-a .fr-title, .fr-b .fr-title{ font-size:clamp(34px,10.6vw,54px); }
  .fr-a .fr-titlewrap, .fr-b .fr-titlewrap{ margin-bottom:8px; }
  .fr-a .fr-line, .fr-b .fr-line{ font-size:14.5px; line-height:1.75; max-width:none; }
  .fr-a .fr-go, .fr-b .fr-go{ margin-top:24px; }
  .fr-hint{ display:none; }

  /* 아래쪽 스크림을 키운다 — 글이 내려온 만큼 바닥이 더 눌려야 읽힌다 */
  .fr-scrim{
    background:
      linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 22%, transparent 40%),
      linear-gradient(0deg,   rgba(0,0,0,.84) 0%, rgba(0,0,0,.44) 40%, transparent 72%);
  }
  .fr-outro .fr-index{ padding:96px var(--edge) 40px; }
  .fr-ix a{ grid-template-columns:30px 1fr; gap:12px; }
  .fr-ix .m{ display:none; }
}

/* ══ 7. 접근성 ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html.fr{ scroll-snap-type:none; }
  .fr-med{ transform:none; transition:none; }
  .fr-in, .fr-titlewrap .fr-title{ opacity:1; transform:none; transition:none; }
  .fr-hint{ animation:none; }
}

/* 상세면이 없는 작품의 목록 행. 링크가 아니라는 것이 눈에 보여야 한다 */
.fr-ix .no{
  display:grid; grid-template-columns:44px 1fr auto; align-items:baseline; gap:18px;
  padding:16px 0; border-top:1px solid rgba(255,255,255,.14); opacity:.42; cursor:default;
}
.fr-ix .no .n{ color:var(--dim); }
@media (max-width:760px){ .fr-ix .no{ grid-template-columns:30px 1fr; gap:12px; } }