/* reel.css — 진입면. 160작품이 이어진 하나의 띠.
 *
 * 왜 '띠' 인가
 *   페이지를 넘기는 구조는 넘길 때마다 하드 컷이 생긴다. 수상작들이
 *   공통으로 피하는 게 그것이다 — 상태가 툭 바뀌는 것. 그래서 여기엔
 *   슬라이드가 없다. 표면 하나 위를 이동할 뿐이고, 업종은 그 위의 지점이다.
 *
 * 정지 화면이 먼저다
 *   모션으로 가린 빈약한 화면이 가장 흔한 실패다. 어느 지점에서 멈춰
 *   세워도 편집된 컨택트 시트로 성립하도록 6행 리듬 그리드를 깔았다.
 *   열마다 두 장(반) · 세 장(삼분) 이 번갈아 오고, 칸은 썸네일과 같은 4:3 이다.
 *
 * 성능
 *   변형은 트랙 하나에만 건다. 160장은 lazy 로 두고 content-visibility 로
 *   화면 밖 렌더를 건너뛴다. rAF 는 움직이는 동안에만 돈다.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --rl-void: #08090c;
  --rl-ink: #f4f1ea;
  --rl-dim: #8b929d;
  --rl-line: rgb(255 255 255 / .12);
  --rl-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Pretendard Variable", Pretendard, monospace;
  --rl-accent: #36F958;
  --rl-top: 56px;
  --rl-bot: 96px;
  --rl-split: 0px;          /* 미리보기가 열리면 이만큼 오른쪽이 갈라진다 */
}

html.rl-on, html.rl-on body {
  width: 100%; height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--rl-void);
  color: var(--rl-ink);
  overscroll-behavior: none;
}

.rl {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(140% 100% at 8% 100%,
      color-mix(in oklab, var(--rl-accent) 11%, transparent), transparent 58%),
    var(--rl-void);
  transition: background 1.1s ease;
  cursor: grab;
}
.rl.is-drag { cursor: grabbing; }

/* ── 업종 활자 ──────────────────────────────────────────
   뒤에 깔았더니 아예 안 보였다. 띠가 영역을 꽉 채우면서 카드가
   글자를 100% 덮어버렸다 — 트랙을 620px 로 묶어 두었을 때만
   위아래 틈으로 겨우 보이던 것이었다.

   그래서 뒤가 아니라 '위' 로 올린다. 대신 섞어서 얹는다(screen).
   어두운 사진 위에서는 반드시 밝아지므로 어떤 작품이 지나가도 사라지지 않고,
   글자가 판을 덮는 게 아니라 인쇄된 것처럼 붙는다.
   두 겹을 겹쳐 두고 위치의 소수부로 투명도를 넘겨 하드 컷을 없앤다. */
.rl__type {
  position: absolute;
  left: clamp(14px, 2.6vw, 40px);
  bottom: calc(var(--rl-bot) + 4px);
  z-index: 4;                        /* 띠(2) 위, 머리·눈금자(6) 아래 */
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}
.rl__word {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  display: block;
  white-space: nowrap;
  font-size: clamp(74px, 15.5vw, 236px);
  line-height: .78;
  letter-spacing: -.06em;
  /* 속도에 반응한다. JS 가 --w(굵기)와 --tr(자간)만 갱신한다.
     라이브러리 없이 가변 폰트 축을 직접 흔드는 게 핵심이다. */
  font-variation-settings: "wght" var(--w, 620);
  letter-spacing: var(--tr, -.06em);
  color: color-mix(in oklab, var(--rl-ink) 22%, transparent);
  transition: opacity .18s linear;
  will-change: opacity, font-variation-settings;
}
.rl__word em {
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--rl-accent) 42%, transparent);
  font-style: normal;
}
/* 진행 게이지. 카드 위에 띄웠더니 사진과 겹쳐 하나도 안 읽혔다 —
   눈금자 띠 안, 오른쪽 위로 들여 놓는다. 거기는 바탕이 항상 어둡다. 글줄로만 두었더니 눈금자 옆에서 겉돌았다 —
   눈금자와 같은 어휘(선·눈금·모노)로 맞춘다. */
.rl__sub {
  margin: 0;
  position: absolute;
  right: clamp(14px, 2.6vw, 40px);
  top: 8px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8a919b;
  font: 700 9.5px var(--rl-mono);
  letter-spacing: .12em;
  white-space: nowrap;
  pointer-events: none;
}
.rl__sub .g {                       /* 자대 */
  width: clamp(80px, 9vw, 130px);
  height: 3px;
  position: relative;
  background: rgb(255 255 255 / .14);
  overflow: hidden;
}
.rl__sub .g s {                     /* 지나온 만큼 */
  position: absolute;
  inset: 0;
  background: var(--rl-accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  box-shadow: 0 0 10px var(--rl-accent);
}
.rl__sub .g::after {                /* 4등분 눈금 — 자와 같은 말투 */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1px), rgb(8 9 12 / .9) calc(25% - 1px) 25%);
}
.rl__sub b {                        /* 퍼센트 */
  min-width: 3.4em;
  color: var(--rl-ink);
  font-size: 13px;
  font-weight: 640;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.rl__sub em {                       /* 몇 번째 / 전체 */
  font-style: normal;
  opacity: .82;
  font-variant-numeric: tabular-nums;
}

/* ── 띠 ────────────────────────────────────────────────── */
.rl__view {
  position: absolute;
  inset: var(--rl-top) 0 var(--rl-bot) 0;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.rl__track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-columns: max-content;
  gap: 10px;
  /* 높이를 620px 로 묶어 두었더니 띠 영역(720px) 위아래로 100px 이 비었다.
     빈자리는 여백이 아니라 그냥 구멍이다 — 영역을 꽉 채운다. */
  height: 100%;
  padding-block: 14px;
  padding-inline: 12vw;                  /* 양 끝에서도 가운데에 놓인다 */
  will-change: transform;
}

.rl__item {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--rl-line);
  background: #101318;
  color: inherit;
  text-decoration: none;
  content-visibility: auto;
  contain-intrinsic-size: 320px 240px;   /* 4:3 — 칸 비율과 맞춰야 스크롤이 안 튄다 */
  transition: border-color .3s, transform .45s cubic-bezier(.2, .8, .25, 1);
}
/* 높이는 그리드(6행)가 정한다. 폭을 clamp 로 따로 주면 화면 크기마다
   비율이 달라져 썸네일이 잘린다 — 비율을 고정하고 폭이 따라오게 한다.
   썸네일 원본이 4:3 이므로 칸도 4:3 이어야 잘리는 데가 없다. */
.rl__item[data-span="3"] { grid-row: span 3; }
.rl__item[data-span="2"] { grid-row: span 2; }
.rl__item[data-span="3"],
.rl__item[data-span="2"] { width: auto; aspect-ratio: 4 / 3; }

.rl__item img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(.42) contrast(1.06) brightness(.86);
  transition: filter .45s ease, transform .6s cubic-bezier(.2, .8, .25, 1);
}
/* 색은 만졌을 때만 돌아온다 — 흑백 컨택트 시트에서 한 장만 살아난다 */
.rl__item:hover img,
.rl__item:focus-visible img { filter: none; transform: scale(1.045); }
.rl__item:hover,
.rl__item:focus-visible { border-color: var(--rl-accent); }

.rl__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  background: linear-gradient(transparent, rgb(8 9 12 / .9) 42%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.rl__item:hover .rl__meta,
.rl__item:focus-visible .rl__meta { opacity: 1; transform: none; }
.rl__meta b { font-size: 15.5px; font-weight: 620; letter-spacing: -.025em; }
.rl__meta span { color: #a8aeb8; font: 700 9.5px var(--rl-mono); letter-spacing: .1em; }
.rl__meta .rl__prem { color: var(--rl-accent); }

/* 작품 번호는 늘 보인다. 아카이브라는 사실이 화면에 남아 있어야 한다. */
.rl__no {
  position: absolute;
  left: 11px; top: 9px;
  color: rgb(244 241 234 / .62);
  font: 700 9px var(--rl-mono);
  letter-spacing: .1em;
  text-shadow: 0 1px 3px rgb(0 0 0 / .7);
}

/* 업종이 바뀌는 자리에 세로 선을 세운다 — 그리드가 '전략적 지점' 에서만 깨진다 */
.rl__item[data-first="1"] { box-shadow: -11px 0 0 -10px var(--rl-accent); }

/* ── 머리 ──────────────────────────────────────────────── */
.rl__top {
  min-height: var(--rl-top);
  padding: 0 clamp(14px, 2.6vw, 40px);
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 6;
  display: grid;
  /* 브랜드 | 검색 | 링크. 가운데만 늘어난다 — 검색창이 화면을 따라 커진다. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 2vw, 28px);
  align-items: center;
  border-bottom: 1px solid var(--rl-line);
  background: linear-gradient(rgb(8 9 12 / .92), rgb(8 9 12 / .55));
  backdrop-filter: blur(8px);
}
.rl__brand { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 560; letter-spacing: -.03em; }
.rl__brand a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.rl__brand img {
  width: 24px; height: 24px;
  display: block;
  object-fit: contain;
}
.rl__ed { color: #8a919b; font: 640 10px var(--rl-mono); letter-spacing: .14em; text-align: center; }
.rl__dock { display: none; }
.rl__menu {
  min-height: 33px; padding: 0 12px;
  border: 1px solid rgb(255 255 255 / .16);
  background: transparent; color: inherit;
  font: 700 10px var(--rl-mono); letter-spacing: .12em;
}
.rl__acts { justify-self: end; display: flex; align-items: center; gap: 2px; }
.rl__acts a {
  position: relative;
  min-height: 28px;
  padding: 0 11px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 0;
  background: none;
  color: rgb(244 241 234 / .62);
  font: 500 12px/1 "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color .25s ease;
}
.rl__acts a:hover, .rl__acts a:focus-visible { color: #f4f1ea; }
.rl__acts a::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  opacity: .45;
}
.rl__acts a:hover::after, .rl__acts a:focus-visible::after { transform: scaleX(1); }
.rl__acts b { color: #7b838e; }
/* 좁은 화면에서는 라벨을 줄인다. 넷을 다 펴면 375px 에서 298px 이 되어
   앞쪽이 잘리는데, flex-end 로 밀어 둔 탓에 스크롤로도 못 간다. */
.rl__acts .sm { display: none; }

/* 실험실 — 기술 집합체로 나가는 문. 문의(채움)와 반대: 어두운 면 + 살아있는 점. */
.rl__acts .is-lab {
  color: #c8f5d2;
  letter-spacing: .04em;
}
.rl__acts .is-lab:hover,
.rl__acts .is-lab:focus-visible { color: #36F958; }
.rl__guide__touch { display: none; }
@media (pointer: coarse) {
  .rl__guide__desk { display: none; }
  .rl__guide__touch { display: block; }
}
.rl__guide__s.rl__guide__touch { display: none; }
@media (pointer: coarse) {
  .rl__guide__s.rl__guide__desk { display: none; }
  .rl__guide__s.rl__guide__touch { display: flex; }
}

/* 외주 문의. 이 포폴이 존재하는 이유라 유일하게 채워서 둔다. */
.rl__acts .is-cta {
  color: #36F958;
  font-weight: 500;
}
.rl__acts .is-cta:hover, .rl__acts .is-cta:focus-visible { color: #9dffb4; }
.rl__acts .is-cta::after { background: #36F958; opacity: .8; }

/* ── 눈금자 ────────────────────────────────────────────
   16업종이 띠 위 어디쯤인지를 연속으로 보여준다. 페이지 번호가 아니라 자다. */
.rl__ruler {
  height: var(--rl-bot);
  position: absolute;
  inset: auto 0 0 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--rl-line);
  background: linear-gradient(rgb(8 9 12 / .5), rgb(8 9 12 / .95));
  backdrop-filter: blur(14px);
}
/* 칸을 상자로 나눠 색을 채웠더니 막대그래프처럼 보였다 — 도형이지 자가 아니다.
   진짜 자로 만든다. 눈금 하나가 작품 하나다: 업종마다 10개, 전부 160개.
   경계선을 지우고 눈금과 글자만 남긴다. */
.rl__ruler button {
  min-width: 0;
  padding: 16px 10px 0;
  position: relative;
  display: grid;
  grid-template-rows: 10px auto;
  align-content: start;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #8a919b;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .32s;
}

/* 업종이 시작하는 자리의 긴 눈금 — 자에서 '10' 단위에 긋는 그 선 */
.rl__ruler button::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 20px;
  /* 칸마다 제 색을 칠했더니 열여섯 색이 나란히 서서 EQ 미터처럼 보였다.
     색은 '지금 보는 하나' 에만 준다. 나머지는 전부 같은 회색. */
  background: rgb(255 255 255 / .5);
  opacity: .38;
  transition: opacity .32s, background .32s, height .32s;
}

/* 작품 열 개 = 눈금 열 개. 요소를 열 개 만들지 않고 그라디언트로 긋는다. */
.rl__tk {
  height: 100%;
  position: relative;
  background: repeating-linear-gradient(90deg,
    rgb(255 255 255 / .55) 0 1px, transparent 1px 10%);
  opacity: .22;
  transition: opacity .32s;
}
/* 지나온 만큼 눈금이 밝아진다 — 그 업종 안에서 어디쯤인지가 자 위에 남는다 */
.rl__tk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    var(--c, var(--rl-accent)) 0 1px, transparent 1px 10%);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity .32s;
}

.rl__ruler button:hover { color: #cdd2d9; }
.rl__ruler button:hover .rl__tk { opacity: .6; }
.rl__ruler button:hover::before { opacity: .9; }

/* ★ 지금 보고 있는 업종.
   전에는 글자색만 밝아져서 hover 와 구별이 안 됐다 — 사실상 표시가 없었다.
   상자를 칠하지 않고, 눈금과 활자로만 구분한다. */
.rl__ruler button[aria-current="true"] { color: var(--rl-ink); }
.rl__ruler button[aria-current="true"]::before {
  opacity: 1;
  height: 32px;
  width: 2px;
  background: color-mix(in oklab, var(--c, var(--rl-accent)) 80%, #fff);
}
.rl__ruler button[aria-current="true"] .rl__tk { opacity: .5; }
.rl__ruler button[aria-current="true"] .rl__tk::after { opacity: 1; }
.rl__ruler button[aria-current="true"] em {
  opacity: 1;
  color: color-mix(in oklab, var(--c, var(--rl-accent)) 74%, #fff);
}
.rl__ruler button[aria-current="true"] b { font-weight: 700; }

.rl__ruler em {
  font: 700 10px var(--rl-mono);
  font-style: normal;
  letter-spacing: .12em;
  opacity: .66;
  transition: color .3s, opacity .3s;
}
.rl__ruler b {
  overflow: hidden;
  /* 한 줄로 묶으면 '부동산·건설·공간' 같은 이름이 칸에서 잘린다.
     글씨를 키운 이유가 읽으라는 것이므로 자르지 않고 두 줄로 푼다. */
  font-size: 13.5px; font-weight: 620; letter-spacing: -.02em;
  line-height: 1.22;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: font-weight .2s;
}
/* 눈금이 놓이는 바닥선. 자에는 자대가 있어야 한다. */
.rl__ruler::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 26px;
  height: 1px;
  background: rgb(255 255 255 / .14);
  pointer-events: none;
}

/* 현재 위치를 가리키는 바늘. 칸이 아니라 연속값이라 눈금자처럼 흐른다. */
.rl__needle {
  position: absolute;
  left: 0; top: 0;
  z-index: 7;
  width: 1px; height: 26px;
  background: var(--rl-accent);
  box-shadow: 0 0 14px var(--rl-accent);
  transform: translateX(var(--nx, 0px));
  pointer-events: none;
}
.rl__needle::before {                       /* 머리에 작은 표식 */
  content: "";
  position: absolute;
  left: 50%; top: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rl-accent);
  box-shadow: 0 0 14px var(--rl-accent);
  transform: translateX(-50%);
}
.rl__needle::after {                        /* 아래로 흐르는 꼬리 */
  content: "";
  position: absolute;
  left: 0; top: 26px;
  width: 1px; height: 22px;
  background: linear-gradient(var(--rl-accent), transparent);
}

/* 지금 보고 있는 업종을 글로도 한 번 더 — 눈금자 위에 얹는다 */
.rl__now {
  position: absolute;
  left: clamp(14px, 2.6vw, 40px);
  bottom: calc(var(--rl-bot) + 12px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.rl__now i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rl-accent);
  box-shadow: 0 0 14px var(--rl-accent);
  font-style: normal;
}
.rl__now b {
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -.025em;
}
.rl__now span {
  color: #a8aeb8;
  font: 700 10px var(--rl-mono);
  letter-spacing: .16em;
}

.rl__hint {
  position: absolute;
  right: clamp(14px, 2.6vw, 40px);
  bottom: calc(var(--rl-bot) + 14px);
  z-index: 5;
  color: #8a919b;
  font: 700 9.5px var(--rl-mono);
  letter-spacing: .16em;
  pointer-events: none;
}

/* ── 좁은 화면 ─────────────────────────────────────────
   띠는 그대로 두되 활자를 줄이고 눈금자를 스크롤 가능한 띠로 바꾼다. */
@media (max-width: 820px) {
  :root { --rl-bot: 84px; --rl-top: 92px; }

  /* 3열을 좁은 화면에 그대로 두면 검색이 세 번째 칸으로 밀려
     브랜드와 링크가 같은 자리에 겹친다(실측에서 둘 다 l:14 r:116 이었다).
     위 줄에 브랜드·링크, 아래 줄에 검색을 폭 전체로 눕힌다. */
  .rl__top {
    padding-block: 9px 0;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 8px clamp(8px, 2vw, 16px);
    align-items: center;
  }
  .rl__brand { grid-area: 1 / 1; }
  /* 링크가 넷이면 좁은 화면 한 줄에 안 들어간다. 줄바꿈으로 머리를 키우는
     대신 가로로 흐르게 둔다 — 문의 버튼이 먼저 보이도록 끝에서 시작한다. */
  .rl__dock {
    display: flex; align-items: center; gap: 6px;
    grid-area: 1 / 2; justify-self: end;
  }
  .rl__dock .is-cta { min-height: 30px; padding: 0 12px; font-size: 10px; }
  .rl__acts-cta { display: none; }
  .rl__acts {
    display: none;
    position: absolute; top: calc(100% - 1px); right: 10px;
    flex-direction: column; align-items: stretch;
    min-width: 168px; padding: 8px;
    background: rgb(8 9 12 / .96);
    border: 1px solid var(--rl-line);
    z-index: 8;
  }
  .rl__acts.is-open { display: flex; }
  .rl__acts a { flex: none; padding: 0 12px; font-size: 10px; min-height: 40px; }
  .rl__acts .lg { display: none; }
  .rl__acts .sm { display: inline; }
  .rl__find {
    grid-area: 2 / 1 / 3 / 3;
    height: auto;
    min-height: 44px;
    padding-inline: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--rl-line);
  }
  .rl__find input { font-size: 15px; }
  .rl__find svg { width: 16px; height: 16px; }
  .rl__find output { font-size: 9px; padding: 4px 8px; }
  .rl__track { height: 100%; padding-block: 10px; padding-inline: 8vw; gap: 8px; }
  .rl__word { font-size: clamp(46px, 17vw, 96px); }
  .rl__sub { bottom: calc(var(--rl-bot) + clamp(58px, 19vw, 104px)); font-size: 8px; }
  .rl__ruler { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 116px; overflow-x: auto; scrollbar-width: none; }
  .rl__ruler button { padding: 14px 9px 0; grid-template-rows: 13px auto; gap: 9px; }
  .rl__ruler::after { top: 27px; }
  .rl__needle { height: 27px; }
  .rl__needle::after { top: 27px; height: 20px; }
  .rl__ruler::-webkit-scrollbar { display: none; }
  .rl__ed { display: none; }
  .rl__top { grid-template-columns: 1fr auto; }
  .rl__hint { display: none; }
  .rl__meta { opacity: 1; transform: none; }      /* 손가락엔 hover 가 없다 */
  .rl__item img { filter: grayscale(.2) contrast(1.04) brightness(.92); }
}

/* ── 모션을 끈 사용자 ──────────────────────────────────
   띠는 남기되 관성과 활자 흔들림을 없앤다. 내용은 하나도 숨기지 않는다. */
@media (prefers-reduced-motion: reduce) {
  .rl *, .rl *::before, .rl *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
  .rl__view { overflow-x: auto; }                 /* 브라우저 기본 스크롤로 넘긴다 */
  .rl__track { transform: none !important; }
  .rl__item img { filter: none; }
  .rl__meta { opacity: 1; transform: none; }
}

.rl__noscript {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 20;
  padding: 16px;
  background: var(--rl-accent);
  color: #08090b;
  font-weight: 620;
  text-align: center;
}
.rl__noscript a { color: inherit; }

/* ══ 검색 ═══════════════════════════════════════════════
   띠에서 항목을 숨기면 안 된다. 6행 리듬 그리드는 2·3·6행 span 이
   정확히 맞물려 채워지는 구조라, 몇 장을 빼면 열에 구멍이 생기고
   업종 지점 좌표까지 어긋난다.
   그래서 거르지 않고 '죽인다' — 안 맞는 건 어둡게 눕히고,
   맞는 것만 살려 첫 결과로 띠를 밀어 준다. 컨택트 시트는 그대로 남는다. */
.rl__find {
  height: 100%;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(14px, 2vw, 26px);
  border: 0;
  border-left: 1px solid var(--rl-line);
  border-right: 1px solid var(--rl-line);
  background: none;
}
/* 밑줄이 곧 상태다. 평소엔 실선 하나, 집중하면 강조색이 좌우로 자란다. */
.rl__find::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--rl-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .42s cubic-bezier(.2, .8, .25, 1);
}
.rl__find:focus-within::after { transform: scaleX(1); }

.rl__find svg {
  width: 19px; height: 19px;
  flex: none;
  stroke: #8a919b;
  fill: none;
  stroke-width: 1.6;
  transition: stroke .3s;
}
.rl__find:focus-within svg { stroke: var(--rl-accent); }

.rl__find input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: none;
  color: var(--rl-ink);
  font-family: inherit;
  /* 눈에 띄어야 하지만 머리글은 아니다. 25px 까지 키워 놨더니 입력칸이
     줄어드는 속도를 글자가 못 따라가, 1100px 에서 벌써 문구가 잘렸다. */
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 560;
  letter-spacing: -.03em;
  /* 재는 게 어긋나도 글자가 반 토막 나진 않게 — 마지막 안전장치 */
  text-overflow: ellipsis;
}
.rl__find input::placeholder {
  color: #7b838e;
  font-weight: 420;
  letter-spacing: -.02em;
}
.rl__find input:focus { outline: none; }

.rl__find output {
  flex: none;
  padding: 5px 10px;
  color: #08090c;
  background: var(--rl-accent);
  font: 700 10px var(--rl-mono);
  letter-spacing: .1em;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .25s, transform .25s;
}
.rl__find.has-q output { opacity: 1; transform: none; }
.rl__find output:empty { display: none; }

.rl__find button {
  flex: none;
  width: 26px; height: 26px;
  display: none;
  place-items: center;
  border: 1px solid var(--rl-line);
  border-radius: 50%;
  background: none;
  color: #8a919b;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .25s, color .25s;
}
.rl__find.has-q button { display: grid; }
.rl__find button:hover { border-color: var(--rl-accent); color: var(--rl-accent); }

/* 검색 중에는 띠를 한 겹 눌러 둔다 — 결과에 눈이 가게 */
.rl.is-peeking { --rl-split: min(42vw, 620px); }
/* 창이 열리면 업종 활자는 물러난다. 활자가 띠 위에 얹히는 구조라
   열린 창까지 덮어서 제목과 설명을 못 읽게 만들었다. */
.rl.is-peeking .rl__type { opacity: 0; }
.rl__type { transition: opacity .4s ease; }
.rl.is-finding .rl__view { opacity: .82; }
.rl__view { transition: opacity .35s ease; }

/* 검색어에 안 맞는 작품 — 지우지 않고 눕힌다 */
.rl__item.is-off {
  opacity: .13;
  pointer-events: none;
}
.rl__item.is-off img { filter: grayscale(1) brightness(.55); }
.rl__item.is-hit { border-color: var(--rl-accent); }

/* ══ 가운데 작품은 이름을 보여 준다 ═══════════════════════
   마우스를 올려야만 보이면, 무엇을 만들었는지 읽으려고 백 번 움직여야 한다.
   화면 가운데 밴드에 든 작품은 스스로 이름을 띄우고, 벗어나면 다시 접는다.
   JS 가 위치만 계산해 클래스를 붙인다(레이아웃 읽기 없음). */
.rl__item.is-near .rl__meta { opacity: 1; transform: none; }
.rl__item.is-near img { filter: grayscale(.1) contrast(1.04) brightness(.97); }
.rl__item.is-near { border-color: rgb(255 255 255 / .3); }

@media (prefers-reduced-motion: reduce) {
  .rl__item.is-near img { filter: none; }
}

/* 눈에는 안 보이되 화면낭독기에는 읽히는 라벨 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══ 미리보기 패널 ══════════════════════════════════════
   카드에 0.5초 머무르면 오른쪽에서 판이 들어오고, 그 안에서
   '진짜 그 사이트' 가 위에서 아래로 흘러간다.
   썸네일을 크게 띄우는 게 아니다 — 같은 출처라 iframe 을 그대로 태울 수 있고,
   포폴에서 보여줄 것은 완성된 화면이 실제로 움직이는 모습이다.

   흐름은 CSS transition 하나가 만든다. JS 루프를 돌리지 않으므로
   프레임을 잡아먹지 않고, 모션을 끈 사용자에겐 그냥 멈춰 선다. */
/* 미리보기는 화면 끝에 뜨는 판이 아니다.
   띠 '안' 에 자리를 만들고, 그 뒤 작품들이 오른쪽으로 밀린다 —
   그래서 어느 작품의 자리에서 열렸는지가 눈에 남는다.
   그리드 항목이므로 밀어내는 건 브라우저가 알아서 한다. */
.rl__peek {
  grid-row: span 6;
  align-self: stretch;
  height: 100%;
  width: var(--rl-split);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #0b0c10;
  border: 1px solid rgb(255 255 255 / .2);
  visibility: hidden;
  transition: width .58s cubic-bezier(.16, .84, .28, 1), visibility 0s .58s;
}
.rl__peek.is-open { visibility: visible; transition-delay: 0s; }
/* 띠에서 떼어낸 자리라는 표시 — 위아래로 강조색 실선 */
.rl__peek.is-open::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 2px solid var(--rl-accent);
  border-bottom: 2px solid var(--rl-accent);
  pointer-events: none;
  z-index: 4;
}

.rl__peek__bar {
  height: 84px;
  padding: 0 0 0 clamp(18px, 2.4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(255 255 255 / .12);
}
.rl__peek__bar span {
  color: #a8aeb8;
  font: 700 11px var(--rl-mono);
  letter-spacing: .22em;
}
.rl__peek__bar button {
  width: 52px; height: 52px;
  margin-right: 16px;
  display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / .22);
  background: none;
  color: var(--rl-ink);
  font-size: 19px;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.rl__peek__bar button:hover { border-color: var(--rl-accent); color: var(--rl-accent); }

/* 흐르는 화면 */
.rl__peek__stage {
  position: relative;
  overflow: hidden;
  background: #0e1015;
}
.rl__peek__stage::after { display: none; }
.rl__peek__slide {
  position: absolute;
  inset: 0 0 auto 0;
  transform: translateY(0);
  will-change: transform;
}
.rl__peek__frame {
  /* 크기는 JS 가 1280x860 으로 고정한다. 문서 높이만큼 늘리면
     안쪽 페이지의 100vh 가 그 높이가 되어 히어로만 보인다. */
  width: 1280px;
  height: 860px;
  border: 0;
  display: block;
  transform-origin: 0 0;
  pointer-events: none;              /* 미리보기는 보는 것이지 조작하는 게 아니다 */
  background: #fff;
}
/* ── 끝에 서는 카드 ──────────────────────────────────────
   한 업종만 보는 중일 때 띠 맨 끝에 선다. 열 장을 다 본 사람에게
   다음 갈 곳을 준다 — 없으면 띠가 그냥 끊기고, 끊긴 자리에서
   사람은 뒤로가기를 누른다. 작품 카드와 같은 4:3 칸을 쓴다. */
.rl__more {
  grid-row: span 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  width: auto;
  aspect-ratio: 4 / 3;
  padding: 0 clamp(20px, 2.4vw, 34px);
  border: 1px solid color-mix(in oklab, var(--rl-accent) 34%, transparent);
  border-radius: 3px;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--rl-accent) 12%, transparent), transparent 62%),
    rgb(255 255 255 / .03);
  color: var(--rl-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}
.rl__more:hover, .rl__more:focus-visible {
  outline: none;
  border-color: var(--rl-accent);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--rl-accent) 20%, transparent), transparent 66%),
    rgb(255 255 255 / .05);
}
.rl__more__k {
  font-family: var(--rl-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: color-mix(in oklab, var(--rl-accent) 82%, white);
}
.rl__more b {
  font-family: var(--font-serif), var(--rl-mono);
  font-weight: 500;
  font-size: clamp(1.125rem, .96rem + .78vw, 1.625rem);
  line-height: 1.42;
  letter-spacing: -.01em;
  word-break: keep-all;
}
.rl__more__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  letter-spacing: -.004em;
  color: color-mix(in oklab, var(--rl-ink) 66%, transparent);
}
.rl__more__go i {
  font-style: normal;
  transition: transform .3s cubic-bezier(.2, .8, .25, 1);
}
.rl__more:hover .rl__more__go { color: var(--rl-ink); }
.rl__more:hover .rl__more__go i { transform: translateX(5px); }

/* 한 업종만 보는 중이면 나머지 눈금은 물러난다 —
   지금 어디를 보고 있는지가 자 위에서도 한눈에 보여야 한다. */
.rl__ruler button.is-dim { opacity: .34; }
.rl__ruler button.is-dim:hover { opacity: .8; }

.rl__peek__load {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  justify-items: center;
  color: #8a919b;
  font: 700 10px var(--rl-mono);
  letter-spacing: .18em;
  transition: opacity .4s;
  /* 표시일 뿐이다. 잡을 것이 없으니 손도 타지 않는다 —
     안 꺼 두면 투명해진 뒤에도 창 위를 덮고 앉아 있는다. */
  pointer-events: none;
}
.rl__peek__load i {
  width: 34px; height: 34px;
  border: 1px solid rgb(255 255 255 / .2);
  border-top-color: var(--rl-accent);
  border-radius: 50%;
  animation: rlspin 1s linear infinite;
}
@keyframes rlspin { to { transform: rotate(1turn); } }
.rl__peek.is-ready .rl__peek__load { opacity: 0; }
/* 다 뜬 뒤에도 계속 돌면 안 보이는 채로 매 프레임 값을 치른다.
   창이 준비되는 순간 멈춘다. */
.rl__peek.is-ready .rl__peek__load i { animation: none; }

/* 글 */
.rl__peek__body {
  position: relative;
  z-index: 3;
  padding: 16px clamp(18px, 2.4vw, 32px) 18px;
  display: grid;
  gap: 8px;
  background: #0b0c10;
  border-top: 1px solid rgb(255 255 255 / .12);
}
.rl__peek__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: #a8aeb8;
  font: 700 11px var(--rl-mono);
  letter-spacing: .16em;
}
.rl__peek__line b { color: var(--rl-accent); font-weight: 700; }
.rl__peek__t {
  margin: 0;
  font-family: var(--font-serif), var(--rl-mono);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
  word-break: keep-all;
}
.rl__peek__d {
  margin: 0;
  max-width: 46em;
  color: #b6bcc5;
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
}
.rl__peek__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / .12);
}
.rl__peek__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rl-ink);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
}
.rl__peek__go i { font-style: normal; font-size: 15px; transition: transform .3s; }
.rl__peek__go:hover { color: var(--rl-accent); }
.rl__peek__go:hover i { transform: translate(3px, -3px); }
.rl__peek__skin, .rl__peek__ask, .rl__peek__card {
  min-height: 32px; padding: 0;
  border: 0; background: none;
  color: #9aa1ab; font: 700 11px var(--rl-mono); letter-spacing: .08em;
  text-decoration: none; cursor: pointer;
}
.rl__peek__skin:hover, .rl__peek__ask:hover, .rl__peek__card:hover { color: var(--rl-accent); }

/* ══ 처음 들어왔을 때의 안내 ═════════════════════════════
   설명서가 아니라 한 문장이다. 첫 손짓에 사라진다. */
.rl__guide {
  position: absolute;
  inset: var(--rl-top) 0 var(--rl-bot) 0;
  z-index: 12;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(16px, 2.4vh, 26px);
  background:
    radial-gradient(52% 46% at 50% 48%, rgb(8 9 12 / .9), rgb(8 9 12 / .62) 62%, rgb(8 9 12 / .12) 100%);
  backdrop-filter: blur(2px);
  pointer-events: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .25, 1);
}
.rl__guide.is-gone { opacity: 0; transform: scale(1.05); }
/* 요소마다 조금씩 늦게 들어온다 — 한꺼번에 뜨면 팝업처럼 보인다 */
.rl__guide > * { animation: rlrise .9s cubic-bezier(.16, .84, .28, 1) both; }
.rl__guide > *:nth-child(2) { animation-delay: .1s; }
.rl__guide > *:nth-child(3) { animation-delay: .2s; }
.rl__guide > *:nth-child(4) { animation-delay: .3s; }
@keyframes rlrise { from { opacity: 0; transform: translateY(14px); } }

.rl__guide__k {
  padding-bottom: 12px;
  position: relative;
  color: var(--rl-accent);
  font: 700 10px var(--rl-mono);
  letter-spacing: .34em;
}
.rl__guide__k::after {                    /* 머리 위 실선 대신 아래 짧은 획 */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 30px; height: 1px;
  background: var(--rl-accent);
  transform: translateX(-50%);
}
.rl__guide__h {
  margin: 0;
  max-width: 20em;
  font-family: var(--font-serif), var(--rl-mono);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.02em;
  text-align: center;
  word-break: keep-all;
}
.rl__guide__h em {
  position: relative;
  font-style: normal;
  color: var(--rl-accent);
  white-space: nowrap;
}
.rl__guide__h em::after {                 /* 강조어 아래 가는 획 */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.1em;
  height: 1px;
  background: color-mix(in oklab, var(--rl-accent) 55%, transparent);
}

/* 좌우로 오가는 커서 — 어느 쪽으로 움직이는 화면인지 손이 먼저 안다 */
.rl__guide__c {
  width: 210px; height: 40px;
  position: relative;
  display: block;
  border-top: 1px solid rgb(255 255 255 / .14);
}
.rl__guide__c i {
  width: 34px; height: 34px;
  position: absolute;
  top: -17px; left: 0;
  display: grid; place-items: center;
  border: 1px solid color-mix(in oklab, var(--rl-accent) 70%, transparent);
  border-radius: 50%;
  background: rgb(8 9 12 / .8);
  animation: rlswing 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
.rl__guide__c i::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rl-accent);
  box-shadow: 0 0 12px var(--rl-accent);
}
@keyframes rlswing {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(176px); }
}

.rl__guide__s {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  color: #a8aeb8;
  font: 700 10px var(--rl-mono);
  letter-spacing: .16em;
}
.rl__guide__s b { font-weight: 700; }
.rl__guide__s s { width: 14px; height: 1px; background: rgb(255 255 255 / .22); }

@media (max-width: 820px) {
  .rl.is-peeking { --rl-split: 84vw; }
  .rl__peek__bar { height: 66px; }
  .rl__peek__bar button { width: 44px; height: 44px; }
  .rl__guide { gap: 14px; padding-inline: 22px; }
  .rl__guide__c { width: 150px; }
  @keyframes rlswing { 0%,100% { transform: translateX(0); } 50% { transform: translateX(116px); } }
  .rl__guide__s { font-size: 9px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .rl__peek__slide { transition: none !important; transform: none !important; }
  .rl__guide__c i { animation: none; }
  .rl__guide > * { animation: none; }
}

/* 미리보기가 열린 그 카드. 어떤 걸 보고 있는지 띠에서도 알아야 한다. */
.rl__item.is-live {
  border-color: var(--rl-accent);
  box-shadow: 0 0 0 1px var(--rl-accent), 0 22px 60px rgb(0 0 0 / .5);
  z-index: 3;
}
.rl__item.is-live img { filter: none; }
.rl__item.is-live .rl__meta { opacity: 1; transform: none; }
.rl__item.is-live::after {
  content: "NOW PLAYING";
  position: absolute;
  left: 0; top: 0;
  padding: 5px 9px;
  background: var(--rl-accent);
  color: #08090c;
  font: 700 8.5px var(--rl-mono);
  letter-spacing: .14em;
}
.rl__item.is-live .rl__no { display: none; }
/* 판이 열려 있는 동안 나머지는 한 걸음 물러난다 */
.rl.is-peeking .rl__item:not(.is-live) { opacity: .42; }
.rl__item { transition: border-color .3s, opacity .45s ease, box-shadow .45s ease; }