/* 템플릿 4 — 가로 마키 & 바텀 오버레이.
 *
 * 애니메이션은 CSS 로만 돌린다. requestAnimationFrame 루프는 배터리를 먹고,
 * 탭이 백그라운드로 갔다 오면 위치가 튄다. 여기서 필요한 것은 '일정한 속도로
 * 계속 흐르는 것' 뿐이라 @keyframes 로 충분하다.
 *
 * 레인은 목록을 두 번 이어 붙인 뒤 -50% 만큼 움직인다. 그래서 이음매가 없다.
 */

.t4 {
  position: fixed; inset: 0; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body);
  --mq-dur: 60s;
  --lane-h: 46vh;
  --pad: 1.1rem;
}

/* ── 상단바 ─────────────────────────────────────────────────────────── */
.t4-top, .t4-foot {
  position: absolute; left: 0; right: 0; z-index: 10;
  padding: var(--pad);
  font-size: .72rem; letter-spacing: -.01em;
}
.t4-top {
  top: 0; display: flex; align-items: baseline; gap: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
}
.t4-name { font-family: var(--font-head); font-weight: 700; }

/* ── 마키 ───────────────────────────────────────────────────────────── */
.t4-stage {
  position: absolute; inset: 0;
  /* 사진의 아래선을 한 줄로 맞춘다. 높낮이를 흩으면 콜라주처럼 보이지만
     작품마다 기준선이 달라져 '걸려 있다' 는 느낌이 사라진다. */
  display: flex; align-items: flex-end;
  /* 아래선이 푸터에 가리면 맞춘 의미가 없다. 푸터 실제 높이를 JS 가 재서
     --foot-h 로 알려준다(글자 수·화면 폭에 따라 푸터 높이가 달라진다). */
  padding-bottom: calc(var(--foot-h, 12vh) + 3vh);
  z-index: 1;
}
.t4-lane {
  display: flex; align-items: flex-end; gap: 3vw;
  padding-left: 3vw;
  width: max-content;
  animation: t4-flow var(--mq-dur) linear infinite;
  will-change: transform;
}
.t4[data-dir="right"] .t4-lane { animation-direction: reverse; }
@keyframes t4-flow {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.t4-item {
  flex: none;
  height: calc(var(--lane-h) * var(--s, 1));
}
/* 'line' 은 크기까지 똑같이 맞춘 한 줄. */
.t4[data-collage="line"] .t4-item { height: var(--lane-h); }
.t4-item img {
  display: block; height: 100%; width: auto; object-fit: contain;
  /* 외곽선은 최대한 흐리게. 어두운 작품이 배경에 완전히 묻히지 않을 만큼만
     남긴다 — 선이 보이라고 두는 게 아니라 가장자리를 잃지 않으려고 둔다. */
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  /* 아직 로드되지 않은 이미지가 폭 0 으로 접혀 선처럼 보이지 않게. */
  min-width: 8vw;
}
/* 못 불러온 이미지는 빈 액자를 남기지 않고 빠진다(JS 가 표시한다). */
.t4-item.dead { display: none; }

/* 글이 이미지 위에 얹히므로 위아래에 옅은 그라디언트를 깐다. */
.t4-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--bg), transparent 18%),
    linear-gradient(transparent 62%, var(--bg));
}

/* ── 하단 푸터 ──────────────────────────────────────────────────────── */
.t4-foot {
  bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem;
  align-items: end;
  border-top: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
}
.t4-foot p { line-height: 1.55; }
.t4-foot .muted { opacity: .55; }
.t4-foot a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.t4-index {
  margin-left: auto;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: .2em;
}

/* ── 바텀 시트 ──────────────────────────────────────────────────────── */
.t4-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
  /* 시트가 화면을 다 덮으면 '뒤에서 계속 흐른다' 는 것이 보이지 않는다.
     위쪽 한 자락을 남겨 마키가 지나가는 것이 보이게 둔다. */
  height: 74vh; overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(101%);
  transition: transform .42s cubic-bezier(.22, .8, .28, 1);
  background: var(--sheet-bg); color: var(--sheet-fg);
  padding: 1.4rem var(--pad) 3rem;
}
/* 넓은 화면에서 목록이 가로로 늘어지면 번호와 [View…] 가 멀어져 한 줄로 안 읽힌다. */
.t4-sheet > * { max-width: 68rem; margin-inline: auto; }
.t4-sheet.open { transform: translateY(0); }
/* 자간을 크게 벌리면 한글이 '개 인 전' 처럼 흩어진다. 라틴 기준의 트래킹을
   한글 제목에 그대로 쓰지 않는다. */
.t4-sheet h2 { font-family: var(--font-head); font-size: .72rem; letter-spacing: .1em;
                opacity: .5; }
.t4-close { position: absolute; top: 1.2rem; right: var(--pad); z-index: 2;
            background: none; border: 0; font: inherit; color: inherit;
            cursor: pointer; opacity: .6; }
.t4-close:hover { opacity: 1; }

.t4-row {
  display: grid; grid-template-columns: 3rem 4.5rem 1fr auto; gap: 1rem;
  padding: .8rem 0; align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--sheet-fg) 18%, transparent);
}
.t4-row .thumb {
  width: 4.5rem; height: 3.2rem; object-fit: cover;
  background: color-mix(in srgb, var(--sheet-fg) 10%, transparent);
}
.t4-row .no { font-size: .68rem; opacity: .45; font-variant-numeric: tabular-nums; }
.t4-foot .more { cursor: pointer }
.t4-foot .more .cue { text-decoration: underline; text-underline-offset: .2em; opacity: .8 }
.t4-foot .more:hover .cue { opacity: 1 }
.t4-text { margin-top: .9rem; line-height: 1.8; white-space: pre-line; }
.t4-text.lit { background: color-mix(in srgb, var(--accent) 16%, transparent);
               border-radius: .4rem; transition: background .6s ease }
.t4-item { cursor: zoom-in }
.t4-row .cap .d { display: block; opacity: .55; font-size: .72rem; margin-top: .15rem;
                  white-space: pre-line; }
.t4-row .cap { font-size: .9rem; line-height: 1.5; }
.t4-row .view { font-size: .7rem; opacity: .5; background: none; border: 0;
                cursor: pointer; font-family: inherit; color: inherit; }
.t4-row .view:hover { opacity: 1; }

.t4-hist { margin-top: 2rem; }
.t4-hist .r { display: flex; gap: 1rem; padding: .55rem 0; font-size: .84rem;
              border-top: 1px solid color-mix(in srgb, var(--sheet-fg) 12%, transparent); }
.t4-hist .r .y { flex: 0 0 3.5rem; opacity: .5; font-size: .74rem; }

/* ── 작품 크게 보기 ─────────────────────────────────────────────────── */
.t4-lightbox {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(0, 0, 0, .92);
  align-items: center; justify-content: center; padding: 4vh 4vw;
}
.t4-lightbox.open { display: flex; }
.t4-lightbox img { max-width: 100%; max-height: 84vh; object-fit: contain; }
.t4-lightbox figcaption { position: absolute; left: 4vw; bottom: 4vh;
                          color: #fff; font-size: .76rem; opacity: .8; }

/* ── 모바일 ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .t4 { --lane-h: 34vh; }
  .t4-foot { padding-bottom: 4.2rem; }   /* 우하단 협업 버튼 자리 */
  .t4-row { grid-template-columns: 2.2rem 3.2rem 1fr auto; gap: .7rem; }
  .t4-row .thumb { width: 3.2rem; height: 2.4rem; }
  .t4-foot { grid-template-columns: 1fr; gap: .6rem; }
  .t4-sheet { height: 100vh; height: 100dvh; }
}

/* 움직임을 줄여달라고 한 사람에게는 멈춰서 보여준다. */
@media (prefers-reduced-motion: reduce) {
  .t4-lane { animation: none; }
  .t4-sheet { transition: none; }
}