/*
 * toonrail — 스타일
 * 값은 tokens.css 의 var() 만 쓴다(색 raw 0). 모바일 먼저 → 640(태블릿) → 1024(12열).
 * 칸 = .panel(흰 · 먹선) · 칸새 = 격자 gap(주홍 바탕이 드러난다) · 그림 자리 = .ph(연필 콘티).
 * 그림자는 한 화면에 하나 — 홈은 켜진 요일 탭, 작품은 "첫 화 보기". 나머지 깊이는 망점.
 */

/* ── 바탕 ─────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--color-ink) var(--color-bg);
}

::selection {
  background: var(--color-band);
  color: var(--color-white);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-body);
  line-height: var(--text-body--line-height);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

svg {
  display: block;
}

b {
  font-weight: var(--font-weight-strong);
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--spacing-rule) solid var(--color-focus);
  outline-offset: var(--spacing-rule-thin);
}

.panel--band :focus-visible,
.vbar :focus-visible,
.reader__head :focus-visible {
  outline-color: var(--color-white);
}

/* 칸 전체가 눌리는 링크(::after 가 칸을 덮는다) — 포커스 링도 칸 전체에 */
.card__link:focus-visible,
.rank__title:focus-visible,
.rank__name:focus-visible,
.new__title:focus-visible,
.same__title:focus-visible,
.next__title:focus-visible {
  outline: none;
}

.card__link:focus-visible::after,
.rank__title:focus-visible::after,
.rank__name:focus-visible::after,
.new__title:focus-visible::after,
.same__title:focus-visible::after,
.next__title:focus-visible::after {
  outline: var(--spacing-rule) solid var(--color-focus);
  outline-offset: calc(var(--spacing-rule) + 2px);
}

.panel--band .rank__title:focus-visible::after {
  outline-color: var(--color-white);
}

.rank__name:focus-visible::after {
  outline-offset: calc(var(--spacing-rule) * -1);
}

.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 화면에 안 보이는 구간 머리도 제 크기로 — 보조기술과 위계 검사가 같은 문서 구조를 읽게 */
h2.sr {
  font-size: var(--text-h2);
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.skip {
  position: fixed;
  z-index: 60;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--color-ink);
  color: var(--color-white);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* 연필 콘티 심벌 — 한 페이지에 한 벌, <use> 로 부른다 */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── 틀 ───────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: calc(var(--container-page) + var(--spacing-page) * 2);
  margin-inline: auto;
  padding-left: max(var(--spacing-page-sm), env(safe-area-inset-left));
  padding-right: max(var(--spacing-page-sm), env(safe-area-inset-right));
}

/* 구간 사이 = 칸새 × 2 */
.sheet {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-gutter-sm) * 2);
  padding-top: var(--spacing-gutter-sm);
}

/* ── 칸 ───────────────────────────────────────────────────────────────── */

.panel {
  position: relative;
  min-width: 0;
  padding: var(--spacing-panel-sm);
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink);
}

.panel--band {
  background: var(--color-band);
  color: var(--color-white);
}

/* 칸 번호 — 왼쪽 위 모서리에 선과 겹쳐 붙는다. 글자는 CSS 가 쓴다(데스크톱·모바일 번호가 다르다) */
.tag {
  position: absolute;
  z-index: 4;
  top: calc(var(--spacing-rule-thin) * -1);
  left: calc(var(--spacing-rule-thin) * -1);
  display: grid;
  padding: 0.3125rem 0.5rem 0.25rem;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-strong);
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--tracking-micro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.tag > * {
  grid-area: 1 / 1;
}

.tag__n::before {
  content: attr(data-n);
}

.tag__go {
  opacity: 0;
}

@media (max-width: 1023.98px) {
  .tag__n[data-m]::before {
    content: attr(data-m);
  }
}

/* ── 부품 ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--spacing-tap);
  padding: 0 1rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 90ms var(--ease-press),
    box-shadow 90ms var(--ease-press),
    background-color 90ms var(--ease-press);
}

.btn:active {
  transform: translate(2px, 2px);
}

.btn--bar {
  font-size: var(--text-small);
}

/* 스탬프 버튼 — 화면에 하나. 누르면 그림자 쪽으로 "찍힌다" */
.btn--stamp {
  min-height: 3.5rem;
  border-width: var(--spacing-rule);
  background: var(--color-band);
  color: var(--color-white);
  font-size: 1.125rem;
  box-shadow: var(--shadow-stamp);
}

.btn--stamp:focus-visible {
  outline-color: var(--color-ink);
}

.btn--stamp:active {
  transform: translate(var(--spacing-stamp), var(--spacing-stamp));
  box-shadow: var(--shadow-stamp-pressed);
}

.btn--toggle[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-white);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-strong);
  line-height: var(--text-micro--line-height);
  white-space: nowrap;
}

/* 스탬프 배지 UP · NEW · BEST · 1위 — ±4° 기울기는 배지만 */
.stamp {
  display: inline-block;
  flex: none;
  padding: 0.1875rem 0.3125rem 0.125rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--text-micro);
  font-weight: 800;
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--tracking-micro);
  rotate: -4deg;
}

.stamp--new {
  rotate: 4deg;
}

.age {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.3125rem 0.375rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  font-size: var(--text-small);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.age--19 {
  background: var(--color-ink);
  color: var(--color-white);
}

/* 별 — 기호 글자(★) 대신 도형 */
.star {
  display: inline-block;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  clip-path: polygon(50% 0%, 61.8% 35.3%, 98.1% 35.3%, 68.7% 57.1%, 79.4% 91.2%, 50% 70%, 20.6% 91.2%, 31.3% 57.1%, 1.9% 35.3%, 38.2% 35.3%);
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-weight: var(--font-weight-meta);
  white-space: nowrap;
}

.rating .star {
  color: var(--color-accent);
}

/* 탭·정렬 — 밑줄 대신 칸 채움 */
.tabs,
.seg {
  display: inline-flex;
}

.tabs__tab,
.seg__btn {
  min-height: var(--spacing-tap);
  padding: 0 0.875rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
  transition:
    transform 90ms var(--ease-press),
    background-color 90ms var(--ease-press);
}

.tabs__tab + .tabs__tab,
.seg__btn + .seg__btn {
  margin-left: calc(var(--spacing-rule-thin) * -1);
}

.tabs__tab[aria-selected="true"],
.seg__btn[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-white);
}

.tabs__tab:active,
.seg__btn:active {
  transform: translate(2px, 2px);
}

.tabs--band .tabs__tab {
  background: var(--color-band);
  color: var(--color-white);
}

.tabs--band .tabs__tab[aria-selected="true"] {
  background: var(--color-ink);
}

/* 말풍선 — 둥근 것은 이것뿐. 꼬리 = 먹 삼각 위에 흰 삼각 */
.balloon {
  position: relative;
  display: inline-block;
  padding: 0.85em 1.4em;
  border: var(--spacing-rule) solid var(--color-ink);
  border-radius: var(--radius-balloon);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-balloon);
  font-weight: var(--font-weight-strong);
  line-height: var(--text-balloon--line-height);
  text-align: center;
}

.balloon::before,
.balloon::after {
  content: "";
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 18% 100%);
}

.balloon::before {
  left: 28%;
  top: calc(100% - 0.625rem);
  width: 1.625rem;
  height: 1.75rem;
  background: var(--color-ink);
}

.balloon::after {
  left: calc(28% + 0.3125rem);
  top: calc(100% - 0.9375rem);
  width: 1rem;
  height: 1.5rem;
  background: var(--color-surface);
}

.balloon--r::before,
.balloon--r::after {
  left: auto;
  clip-path: polygon(0 0, 100% 0, 82% 100%);
}

.balloon--r::before {
  right: 28%;
}

.balloon--r::after {
  right: calc(28% + 0.3125rem);
}

/* ── 연필 콘티 자리표시자 ─────────────────────────────────────────────── */

.ph {
  position: relative;
  display: block;
  container-type: inline-size;
  aspect-ratio: var(--aspect-cover);
  overflow: hidden;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-surface);
  color: var(--color-pencil);
}

.ph__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--spacing-rule-thin);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 표지 로고 자리 — 먹 레터링(연필색 글자 금지). 읽히는 작품명은 표지 아래 캡션이다 */
.ph__title {
  position: absolute;
  top: 7cqi;
  left: 7cqi;
  right: 7cqi;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 11cqi, 2.75rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* 비율·용도 캡션 — 오른쪽 아래. 오른쪽·아래 선은 .ph 선과 겹쳐 잘린다 */
.ph__cap {
  position: absolute;
  right: calc(var(--spacing-rule-thin) * -1);
  bottom: calc(var(--spacing-rule-thin) * -1);
  max-width: calc(100% + var(--spacing-rule-thin));
  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-meta);
  line-height: var(--text-micro--line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 상단바 ───────────────────────────────────────────────────────────── */

.bar {
  position: relative;
  z-index: 30;
}

.bar__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--spacing-bar-sm);
}

.bar__mark {
  padding-block: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
}

.bar__nav,
.bar__find {
  display: none;
}

.bar__menu {
  margin-left: auto;
  min-width: 4rem;
}

@media (max-width: 1023.98px) {
  .bar.is-open .bar__nav {
    position: absolute;
    top: calc(100% - var(--spacing-rule-thin));
    left: max(var(--spacing-page-sm), env(safe-area-inset-left));
    right: max(var(--spacing-page-sm), env(safe-area-inset-right));
    display: block;
    border: var(--spacing-rule-thin) solid var(--color-ink);
    background: var(--color-surface);
  }

  .bar.is-open .bar__nav a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0 1rem;
    border-top: var(--spacing-rule-thin) solid var(--color-ink);
    font-weight: var(--font-weight-strong);
    text-decoration: none;
  }

  .bar.is-open .bar__nav li:first-child a {
    border-top: 0;
  }
}

/* ── 홈: 요일 띠(레일) ────────────────────────────────────────────────── */

/* 모바일: 가로로 밀리는 띠. 위 여백은 "오늘!" 버스트 자리, 아래는 스탬프 그림자 자리 */
.rail {
  margin: -0.75rem calc(var(--spacing-page-sm) * -1) calc(var(--spacing-gutter-sm) * -1);
  padding: 1.875rem var(--spacing-page-sm) 0.625rem 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--spacing-page-sm);
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail__tabs {
  display: flex;
  width: max-content;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-surface);
}

.rail__tab {
  position: relative;
  flex: 0 0 4rem;
  height: 3.25rem;
  border-right: var(--spacing-rule-thin) solid var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  scroll-snap-align: center;
  transition:
    transform 90ms var(--ease-press),
    box-shadow 90ms var(--ease-press);
}

.rail__tab:last-child {
  border-right: 0;
}

.rail__tab--end {
  font-size: 1.125rem;
}

/* 켜진 요일 — 띠에서 떠올라 스탬프 그림자를 받는다(페이지에 하나뿐인 그림자) */
.rail__tab[aria-selected="true"] {
  z-index: 2;
  background: var(--color-band);
  color: var(--color-white);
  transform: translate(-0.25rem, -0.25rem);
  box-shadow:
    0 0 0 var(--spacing-rule-thin) var(--color-ink),
    var(--shadow-stamp);
}

.rail__tab[aria-selected="true"]:active {
  transform: none;
  box-shadow:
    0 0 0 var(--spacing-rule-thin) var(--color-ink),
    var(--shadow-stamp-pressed);
}

.rail__tab:focus-visible {
  z-index: 3;
  outline-offset: calc(var(--spacing-rule) * -2);
}

.rail__tab[aria-selected="true"]:focus-visible {
  outline-color: var(--color-white);
}

/* "오늘!" 버스트 — 톱니 별 두 겹(먹 겹 + 주홍 겹). 켜진 칸이 아니라 오늘(목)에 붙어 있다 */
.burst,
.burst__in {
  clip-path: polygon(50% 0%, 57% 14.7%, 69.1% 3.8%, 70% 20.1%, 85.4% 14.6%, 79.9% 30%, 96.2% 30.9%, 85.3% 43%, 100% 50%, 85.3% 57%, 96.2% 69.1%, 79.9% 70%, 85.4% 85.4%, 70% 79.9%, 69.1% 96.2%, 57% 85.3%, 50% 100%, 43% 85.3%, 30.9% 96.2%, 30% 79.9%, 14.6% 85.4%, 20.1% 70%, 3.8% 69.1%, 14.7% 57%, 0% 50%, 14.7% 43%, 3.8% 30.9%, 20.1% 30%, 14.6% 14.6%, 30% 20.1%, 30.9% 3.8%, 43% 14.7%);
}

.burst {
  position: absolute;
  z-index: 3;
  bottom: calc(100% - 0.5rem);
  left: 50%;
  width: 3.75rem;
  height: 2.125rem;
  background: var(--color-ink);
  translate: -50% 0;
  rotate: -8deg;
  pointer-events: none;
  animation: var(--animate-pop-in);
}

.burst__in {
  position: absolute;
  inset: var(--spacing-rule);
  display: grid;
  place-items: center;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1;
}

/* ── 홈: 오늘 페이지(벤토) ────────────────────────────────────────────── */

.today {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gutter-sm);
}

/* 효과음 칸 — 파랑 + 집중선(가운데는 비운다) + 거대 글자. 오늘 칸과 정보 칸이 같이 쓴다 */
.sfx {
  --fx: 50%;
  --fy: 50%;
  --fr: 4rem;
  overflow: hidden;
}

.sfx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at var(--fx) var(--fy), var(--color-band-deep) 0deg 3deg, transparent 3deg 10deg);
  mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent var(--fr), black calc(var(--fr) + 1px));
}

.sfx__glyph {
  position: relative;
  color: var(--color-white);
  font-family: var(--font-display);
  line-height: var(--text-sfx--line-height);
  text-align: center;
  -webkit-text-stroke: var(--spacing-rule) var(--color-ink);
  paint-order: stroke fill;
}

/* 모바일 오늘 칸 = 한 줄 띠. 왼쪽은 칸 번호 자리, 집중선은 글자 둘레에만 */
.today .sfx {
  --fx: 4.5rem;
  --fr: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 3rem;
}

.today .sfx::before {
  right: auto;
  width: 7.5rem;
}

.today .sfx__glyph {
  flex: none;
  min-width: 3rem;
  font-size: 3rem;
}

.sfx__text {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.625rem;
}

.sfx__h {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--tracking-display);
}

.sfx__count {
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.sfx__date {
  display: none;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

/* 모바일: 표지 6을 한 칸 안에 3×2 — 칸 안을 먹선 2px 로 나눈다(바탕 먹 + gap 2px) */
.today__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-rule-thin);
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-ink);
}

.card {
  display: flex;
  flex-direction: column;
  transition: transform 90ms var(--ease-press);
}

/* 탭 하이라이트를 껐으니 누름은 칸이 2px 눌리는 것으로 보인다 */
.card:active,
.rank__item:active,
.new__item:active,
.same__item:active,
.next__item:active,
.genre:active,
.today__all:active,
a.step:active {
  transform: translate(2px, 2px);
}

.today__grid .card {
  padding: 0;
  border: 0;
}

.today__grid .card .ph {
  border-width: 0 0 var(--spacing-rule-thin);
}

.today__grid .card .ph__title {
  top: 2rem;
}

.card__title {
  padding: 0.375rem 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-strong);
  line-height: var(--text-title--line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 칸 전체가 눌린다(::after). 글자 링크 자체도 세로 여백으로 44px — 인라인이라 줄 배치는 그대로 */
.card__link {
  padding-block: 0.875rem;
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.125rem 0.5rem 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.card__by {
  display: none;
  color: var(--color-ink-soft);
}

.card__balloon {
  display: none;
}

/* 모바일 "1위" — 표지 왼쪽 아래(데스크톱은 말풍선이 대신한다) */
.card__first {
  position: absolute;
  z-index: 3;
  bottom: 0.5rem;
  left: 0.5rem;
}

.today__grid .ph__cap-long {
  display: none;
}

.today__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.5rem;
  text-decoration: none;
}

/* 한 줄 칸일 때 왼쪽은 칸 번호 자리(.panel 여백보다 우선) */
.today .today__all {
  padding-left: 3.25rem;
}

.today__all-t {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: var(--text-h2--line-height);
}

.today__all-go {
  font-weight: var(--font-weight-strong);
}

/* 전부 보기 칸의 연필 스케치 — 겹쳐 쌓인 표지 셋 (데스크톱만) */
.today__sketch {
  display: none;
}

/* ── 홈: 순위 + 신작 ──────────────────────────────────────────────────── */

.duo {
  display: grid;
  gap: var(--spacing-gutter-sm);
}

.rank {
  overflow: hidden;
}

/* 망점 가장자리 — 오른쪽 아래 삼각. 글자 칸(목록)은 흰 바탕이 덮는다 */
.rank::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60%;
  height: 55%;
  background-image: radial-gradient(var(--color-band-deep) 1.5px, transparent 1.6px);
  background-size: 8px 8px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.rank > :not(.tag) {
  position: relative;
}

.rank__head,
.talk__head,
.eps__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.rank__h,
.new__h,
.eps__h,
.same__h,
.rate__h,
.talk__h,
.next__h,
.made__h,
.how__h {
  padding-top: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--tracking-display);
}

.rank__top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-gutter-sm);
  margin-top: 1.75rem;
}

.rank__item,
.new__item,
.same__item,
.next__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* 순위 숫자 — 표지 왼쪽 위 모서리에 걸친다 */
.rank__n {
  position: absolute;
  z-index: 3;
  top: -1.25rem;
  left: -0.25rem;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-rank);
  line-height: var(--text-rank--line-height);
  -webkit-text-stroke: var(--spacing-rule) var(--color-ink);
  paint-order: stroke fill;
  pointer-events: none;
}

.rank__title,
.new__title,
.same__title,
.next__title {
  margin: -0.25rem 0 -0.75rem;
  padding-block: 0.75rem;
  font-weight: var(--font-weight-strong);
  line-height: var(--text-title--line-height);
  text-decoration: none;
}

.rank__title::after,
.new__title::after,
.same__title::after,
.next__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* 순위 숫자가 걸친 자리 아래로 레터링을 내린다 */
.rank__item .ph__title {
  top: 34cqi;
}

.rank__item .rank__by {
  font-size: var(--text-small);
}

.rank__rest {
  margin-top: var(--spacing-gutter);
  padding: 0.25rem 0.75rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink);
}

.rank__row {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  min-height: 3rem;
  border-top: var(--spacing-rule-thin) solid var(--color-ink);
}

.rank__row:first-child {
  border-top: 0;
}

.rank__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.rank__name {
  overflow: hidden;
  line-height: var(--spacing-tap);
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.rank__name::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rank__row .rank__by {
  display: none;
  color: var(--color-ink-soft);
  font-size: var(--text-small);
}

.delta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  min-width: 2.5rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.delta__mark {
  width: 0.75rem;
  height: 0.625rem;
  background: var(--color-ink);
}

.delta--up .delta__mark {
  background: var(--color-bg);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.delta--down .delta__mark {
  background: var(--color-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.delta--same .delta__mark {
  height: var(--spacing-rule);
}

.new__grid,
.same__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-gutter-sm);
  margin-top: 1rem;
}

/* NEW — 표지 왼쪽 아래(위는 레터링, 오른쪽 아래는 비율 캡션 자리) */
.new__stamp {
  position: absolute;
  z-index: 2;
  bottom: 0.5rem;
  left: 0.5rem;
}

.new__meta,
.same__by {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
}

/* ── 홈: 장르 ─────────────────────────────────────────────────────────── */

.genres__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-gutter-sm);
}

.genre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: end;
  column-gap: 0.5rem;
  min-height: 9rem;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
}

.genre__sfx {
  grid-column: 1 / -1;
  align-self: start;
  justify-self: start;
  margin-top: 0.875rem;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: var(--text-genre--line-height);
  -webkit-text-stroke: var(--spacing-rule) var(--color-ink);
  paint-order: stroke fill;
  transition: transform 140ms var(--ease-snap);
}

.genre--a .genre__sfx {
  color: var(--color-sfx);
}

.genre--b .genre__sfx {
  color: var(--color-accent);
}

.genre__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}

.genre__n {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  font-weight: var(--font-weight-meta);
  font-variant-numeric: tabular-nums;
}

/* ── 작품 ─────────────────────────────────────────────────────────────── */

.whead {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--spacing-gutter-sm);
}

.whead__cover {
  grid-column: 1;
  grid-row: 1;
}

.whead__title {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.whead__act {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem 0.5rem;
  align-content: start;
}

.whead__act .btn--stamp {
  grid-column: 1 / -1;
}

.whead__story {
  grid-column: 1 / -1;
  grid-row: 3;
}

.whead__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-top: 1rem;
}

.whead__h {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: var(--text-display--line-height);
  letter-spacing: var(--tracking-display);
}

.whead__by {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  font-weight: var(--font-weight-meta);
}

.whead__score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
}

.whead__score .star {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
}

.whead__num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
}

.whead__fans {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  font-weight: var(--font-weight-meta);
}

.whead__line {
  margin: 0.75rem 0 1.25rem;
  font-size: 1.0625rem;
}

.whead__syn {
  max-width: 36em;
}

/* 회차 목록 */
.eps__h {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.eps__count {
  font-variant-numeric: tabular-nums;
}

.eps__list {
  margin-top: 1rem;
  border-top: var(--spacing-rule-thin) solid var(--color-ink);
}

.ep {
  border-bottom: var(--spacing-rule-thin) solid var(--color-ink);
}

.ep__link {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb no up"
    "thumb t t"
    "thumb date rate";
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.625rem 0;
  text-decoration: none;
}

.ph--thumb {
  grid-area: thumb;
  aspect-ratio: var(--aspect-thumb);
}

.ph--thumb .ph__cap {
  padding-inline: 0.25rem;
}

.ep__no {
  grid-area: no;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ep__t {
  grid-area: t;
  overflow: hidden;
  font-weight: var(--font-weight-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ep__date {
  grid-area: date;
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.ep__rate {
  grid-area: rate;
  justify-self: end;
  font-size: var(--text-small);
}

.ep__up {
  grid-area: up;
  justify-self: end;
}

.eps__foot {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.eps__note {
  padding: 0.625rem 0;
  font-weight: var(--font-weight-meta);
}

/* ── 뷰어 ─────────────────────────────────────────────────────────────── */

.vbar {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top);
  background: var(--color-bg-night);
  color: var(--color-white);
  transition: translate 200ms var(--ease-out);
}

.vbar.is-hidden {
  translate: 0 -100%;
}

.vbar__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem;
  height: var(--spacing-viewer-bar);
  padding-left: max(0.25rem, env(safe-area-inset-left));
  padding-right: max(0.25rem, env(safe-area-inset-right));
}

.vbar__back,
.vbar__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: var(--spacing-tap);
  min-height: var(--spacing-tap);
  padding: 0 0.625rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-meta);
  text-decoration: none;
}

.vbar__work,
.vbar__lbl {
  display: none;
}

.vbar__step.is-off {
  color: var(--color-ink-night);
  cursor: default;
}

.vbar__ep {
  overflow: hidden;
  font-size: var(--text-small);
  font-weight: var(--font-weight-meta);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vbar__no {
  margin-right: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
}

.vbar__nav {
  display: flex;
}

/* 읽기 진행 막대 — 스크롤 연동 애니메이션이 되면 CSS, 아니면(또는 동작 줄이기) main.js 가 --p 로 */
.vbar__prog {
  position: absolute;
  right: 0;
  bottom: calc(var(--spacing-rule) * -1);
  left: 0;
  height: var(--spacing-rule);
}

.vbar__fill {
  display: block;
  height: 100%;
  background: var(--color-sfx);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .vbar__fill {
      animation: tr-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes tr-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* 읽는 동안만 밤 둘레 */
.reader {
  padding: calc(var(--spacing-viewer-bar) + 2rem) 0 4rem;
  background: var(--color-bg-night);
  color: var(--color-white);
}

.reader__head {
  padding: 0 var(--spacing-page-sm) 2rem;
  text-align: center;
}

.reader__work {
  color: var(--color-ink-night);
  font-size: var(--text-small);
  font-weight: var(--font-weight-meta);
}

.reader__h {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.reader__no {
  color: var(--color-sfx);
}

.reader__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.625rem;
  color: var(--color-ink-night);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.reader__meta .star {
  color: var(--color-sfx);
}

/* 컷 스트립 — 웹툰 원고 폭. 컷 사이 간격은 연출(--gap, 컷마다 다르다) */
.strip {
  width: min(100%, var(--spacing-strip));
  margin-inline: auto;
  padding: 1.5rem 0.75rem 3rem;
  background: var(--color-surface);
  color: var(--color-ink);
}

.cut {
  margin-bottom: var(--gap, 4rem);
}

.ph--cut {
  border-width: var(--spacing-rule);
}

.cut--02 .ph {
  aspect-ratio: var(--aspect-cut-land);
}

.cut--03 .ph {
  aspect-ratio: var(--aspect-cut-tall);
}

.cut--04 .ph {
  aspect-ratio: var(--aspect-cut-wide);
}

.cut--05 .ph {
  aspect-ratio: var(--aspect-cut-square);
}

.cut--06 .ph {
  aspect-ratio: var(--aspect-cut-portrait);
}

.cut--07 .ph {
  aspect-ratio: var(--aspect-cut-band);
  border-style: dashed;
  border-color: var(--color-pencil);
}

.cut__no {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  padding: 0.3125rem 0.5rem 0.25rem;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-strong);
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--tracking-micro);
}

.cut__letter {
  position: absolute;
  top: 12cqi;
  left: 8cqi;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 11cqi, 4.5rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
}

/* 간판 — k-02 의 간판 사각(110,50 ~ 580,150 / 690×460)에 맞춘다 */
.cut__sign {
  position: absolute;
  top: 10.9%;
  left: 15.9%;
  width: 68.1%;
  height: 21.7%;
  display: grid;
  place-items: center;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 6.5cqi, 2.75rem);
  line-height: 1;
}

.sfx-t {
  color: var(--color-sfx);
  font-family: var(--font-display);
  line-height: 0.9;
  -webkit-text-stroke: var(--spacing-rule) var(--color-ink);
  paint-order: stroke fill;
}

.cut__sfx {
  position: absolute;
  font-size: clamp(2rem, 12cqi, 5.5rem);
}

.cut__sfx--drip {
  right: 6%;
  bottom: 9%;
  font-size: clamp(2rem, 8cqi, 3.5rem);
  rotate: -6deg;
}

.cut__sfx--whoosh {
  top: 44%;
  right: 12%;
  font-size: clamp(3rem, 22cqi, 9rem);
}

.cut__sfx--click {
  bottom: 10%;
  left: 7%;
  rotate: -8deg;
}

.cut__sfx--swish {
  top: 6%;
  left: 50%;
  font-size: clamp(3rem, 20cqi, 8rem);
  translate: -50% 0;
}

.cut__b {
  position: absolute;
  max-width: 62%;
}

.cut__b--l {
  top: 7%;
  left: 5%;
}

.cut__b--r {
  top: 12%;
  right: 4%;
}

.cut__b--last {
  top: 7%;
  left: 6%;
}

.cut__box {
  position: absolute;
  padding: 0.5rem 0.875rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-balloon);
  font-weight: var(--font-weight-meta);
  line-height: var(--text-balloon--line-height);
}

.cut__box--mid {
  top: 50%;
  left: 50%;
  white-space: nowrap;
  translate: -50% -50%;
}

.cut__box--end {
  right: 5%;
  bottom: 12%;
}

/* "끝" 칸 — 스트립 안의 먹 칸 */
.fin {
  margin-top: 6rem;
  padding: 2rem 1rem;
  background: var(--color-bg-night);
  color: var(--color-white);
  text-align: center;
}

.fin__sfx {
  color: var(--color-sfx);
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 5.5rem);
  line-height: 0.9;
}

.fin__next {
  margin-top: 0.75rem;
  color: var(--color-ink-night);
  font-weight: var(--font-weight-meta);
}

/* 다 읽은 뒤 — 주홍·흰 칸으로 돌아온다 */
.after {
  display: grid;
  gap: var(--spacing-gutter-sm);
  max-width: calc(57.5rem + var(--spacing-page) * 2);
  padding-top: calc(var(--spacing-gutter-sm) * 2);
}

.after__steps {
  display: grid;
  gap: var(--spacing-gutter-sm);
}

.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-height: 5.5rem;
  padding-top: 1.75rem;
  text-decoration: none;
}

.step__dir {
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.step__t {
  font-size: 1.125rem;
  font-weight: var(--font-weight-strong);
}

.step__no {
  margin-right: 0.375rem;
  font-family: var(--font-display);
  font-weight: 400;
}

.step--off {
  border-style: dashed;
  color: var(--color-ink-soft);
}

.rate__cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 36rem;
  margin-top: 1rem;
}

.rate__cell {
  min-height: var(--spacing-tap);
  border: var(--spacing-rule-thin) solid var(--color-ink);
  background: var(--color-surface);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
  transition:
    transform 90ms var(--ease-press),
    background-color 90ms var(--ease-press);
}

.rate__cell:active {
  transform: translate(2px, 2px);
}

.rate__cell.is-on {
  background: var(--color-band);
  color: var(--color-white);
}

.rate__cell.is-pop {
  animation: var(--animate-star-in);
  animation-delay: calc(var(--i, 0) * 20ms);
}

.rate__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: 1rem;
  font-size: var(--text-small);
}

.rate__n {
  color: var(--color-ink-soft);
}

.rate__mine {
  color: var(--color-accent);
  font-weight: var(--font-weight-strong);
}

.talk__note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--font-weight-meta);
}

.talk__list {
  margin-top: 0.5rem;
}

.talk__item {
  padding: 1rem 0;
  border-bottom: var(--spacing-rule-thin) solid var(--color-ink);
}

.talk__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.talk__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
}

.talk__when {
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

.talk__text {
  margin-top: 0.25rem;
}

.talk__votes {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.vote {
  min-height: var(--spacing-tap);
  padding: 0 0.75rem;
  border: var(--spacing-rule-thin) solid var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--font-weight-meta);
  transition: transform 90ms var(--ease-press);
}

.vote:active {
  transform: translate(2px, 2px);
}

.vote[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-white);
}

.next__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-gutter-sm);
  margin-top: 1rem;
}

.next__title {
  font-size: var(--text-small);
}

/* ── 정보 ─────────────────────────────────────────────────────────────── */

.ihead,
.howto {
  display: grid;
  gap: var(--spacing-gutter-sm);
}

.ihead__h {
  padding-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: var(--text-display--line-height);
  letter-spacing: var(--tracking-display);
}

.ihead__note {
  max-width: 36em;
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: var(--font-weight-strong);
}

.ihead__more {
  max-width: 40em;
  margin-top: 0.75rem;
}

.sfx--info {
  display: grid;
  place-items: center;
  min-height: 11rem;
  container-type: inline-size;
}

.sfx--info .sfx__glyph {
  font-size: clamp(3.5rem, 26cqi, 8rem);
}

.how {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.how__demo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.5rem;
}

.how__day {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-right: calc(var(--spacing-rule-thin) * -1 - 0.5rem);
  border: var(--spacing-rule-thin) solid var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.how__day--on {
  position: relative;
  z-index: 1;
  background: var(--color-band);
  color: var(--color-white);
}

.how__demo--score .star {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-accent);
}

.how__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
}

.how__p .stamp {
  vertical-align: 0.1em;
}

.made__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1rem;
}

.made__t {
  font-size: 1.125rem;
  font-weight: var(--font-weight-strong);
}

.made__item p {
  margin-top: 0.375rem;
}

.made__bhs {
  font-family: var(--font-display);
  font-weight: 400;
}

.made__item--ph .ph {
  max-width: 9rem;
}

/* ── 꼬리 ─────────────────────────────────────────────────────────────── */

.foot {
  padding-top: calc(var(--spacing-gutter-sm) * 2);
  padding-bottom: max(var(--spacing-page-sm), env(safe-area-inset-bottom));
}

.tail {
  display: grid;
  gap: 0.5rem;
  padding-top: 1.75rem;
}

.tail__note {
  max-width: 40em;
  font-weight: var(--font-weight-strong);
}

.tail__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tail__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-tap);
  min-height: var(--spacing-tap);
  padding: 0 0.25rem;
  font-weight: var(--font-weight-meta);
}

.tail__meta {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
}

/* ═══ 640 — 태블릿 ═══════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  .wrap {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }

  .panel {
    padding: 1rem;
    border-width: var(--spacing-rule);
  }

  .tag {
    top: calc(var(--spacing-rule) * -1);
    left: calc(var(--spacing-rule) * -1);
  }

  .rail {
    margin: 0 0 calc(var(--spacing-gutter-sm) * -1);
    padding: 0;
    overflow: visible;
  }

  .rail__tabs {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: auto;
    border-width: var(--spacing-rule);
  }

  .rail__tab {
    height: 4.125rem;
    border-right-width: var(--spacing-rule);
    font-size: 1.75rem;
  }

  .rail__tab--end {
    font-size: 1.5rem;
  }

  .rail__tab[aria-selected="true"] {
    transform: translate(calc(var(--spacing-stamp) * -1), calc(var(--spacing-stamp) * -1));
    box-shadow:
      0 0 0 var(--spacing-rule) var(--color-ink),
      var(--shadow-stamp);
  }

  .rail__tab[aria-selected="true"]:active {
    box-shadow:
      0 0 0 var(--spacing-rule) var(--color-ink),
      var(--shadow-stamp-pressed);
  }

  .burst {
    width: 5rem;
    height: 3rem;
    bottom: calc(100% - 0.5rem);
  }

  .burst__in {
    font-size: 0.9375rem;
  }

  .today .sfx {
    --fr: 2.25rem;
    --fx: 5.25rem;
    padding-left: 3.25rem;
  }

  .today .sfx::before {
    width: 9.5rem;
  }

  .today .sfx__glyph {
    min-width: 4rem;
    font-size: 4rem;
  }

  .sfx__h {
    font-size: var(--text-h1);
  }

  .sfx__date {
    display: block;
  }

  .today__grid {
    gap: var(--spacing-gutter-sm);
    border: 0;
    background: none;
  }

  .today__grid .card {
    padding: 0.75rem;
    border: var(--spacing-rule) solid var(--color-ink);
  }

  .today__grid .card .ph {
    border-width: var(--spacing-rule-thin);
  }

  .today__grid .card .ph__title {
    top: 7cqi;
  }

  .card__title {
    padding: 0.625rem 0 0;
    font-size: var(--text-title);
    white-space: normal;
  }

  .card__meta {
    padding: 0.25rem 0 0;
    font-size: var(--text-small);
  }

  .card__by {
    display: inline;
  }

  .rank__top {
    gap: var(--spacing-gutter);
  }

  .rank__row {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto auto;
  }

  .rank__row .rank__by {
    display: inline;
  }

  .genres__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .genre__sfx {
    font-size: var(--text-genre);
  }

  .same__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .whead__h {
    font-size: 2.25rem;
  }

  .ep__link {
    grid-template-columns: 7.5rem 5rem minmax(0, 1fr) 6.5rem 4.5rem 3rem;
    grid-template-areas: "thumb no t date rate up";
  }

  .ep__up {
    justify-self: center;
  }

  .vbar__work,
  .vbar__lbl {
    display: inline;
  }

  .vbar__in {
    gap: 0.75rem;
    padding-inline: 0.75rem;
  }

  .vbar__work {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reader__h {
    font-size: 2.5rem;
  }

  .strip {
    padding: 2.5rem 1.5rem 4rem;
  }

  .after__steps {
    grid-template-columns: 1fr 1fr;
  }

  .step--off {
    text-align: right;
  }

  .rate__cells {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .made__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══ 1024 — 데스크톱 12열 ══════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .wrap {
    padding-inline: var(--spacing-page);
  }

  .sheet {
    gap: calc(var(--spacing-gutter) * 2);
    padding-top: var(--spacing-gutter);
  }

  .panel {
    padding: var(--spacing-panel);
  }

  .duo,
  .ihead,
  .howto,
  .genres__grid,
  .whead,
  .after,
  .after__steps {
    gap: var(--spacing-gutter);
  }

  /* 상단바 */
  .bar__in {
    gap: 1.5rem;
    height: var(--spacing-bar);
  }

  .bar__mark {
    font-size: 2rem;
  }

  .bar__nav {
    display: block;
  }

  .bar__nav ul {
    display: flex;
    gap: 0.25rem;
  }

  .bar__nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--spacing-tap);
    padding: 0 0.625rem;
    font-weight: var(--font-weight-meta);
    text-decoration: none;
  }

  .bar__find {
    display: inline-flex;
    margin-left: auto;
  }

  .bar__menu {
    display: none;
  }

  .rail {
    margin-bottom: calc(var(--spacing-gutter) * -1);
  }

  .rail__tab {
    font-size: 2rem;
  }

  /* 오늘 페이지 — 12열 × 2행. 표지 칸은 subgrid 로 같은 칸새를 쓴다 */
  .today {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: var(--spacing-gutter);
  }

  .today .sfx {
    --fx: 50%;
    --fy: 34%;
    --fr: 3.5rem;
    grid-column: 11 / 13;
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--spacing-panel);
    container-type: inline-size;
  }

  .today .sfx::before {
    right: 0;
    bottom: auto;
    width: auto;
    height: 64%;
  }

  .today .sfx__glyph {
    margin-top: 12cqi;
    font-size: min(var(--text-sfx), 78cqi);
  }

  .sfx__text {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.5rem;
  }

  .sfx__count {
    font-size: var(--text-body);
  }

  .today__grid {
    grid-column: 1 / 11;
    grid-row: 1 / 3;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    gap: var(--spacing-gutter);
  }

  .today__grid .card {
    grid-column: span 2;
    padding: 1rem;
  }

  .today__grid .card--big {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
    padding: var(--spacing-panel);
  }

  .card--big .card__title {
    margin-top: auto;
    padding-top: 1rem;
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 400;
    line-height: var(--text-h1--line-height);
    letter-spacing: var(--tracking-display);
  }

  .card--big .card__meta {
    padding-top: 0.5rem;
    font-size: var(--text-body);
  }

  .card__balloon {
    position: absolute;
    z-index: 3;
    top: 26%;
    right: -0.5rem;
    display: block;
  }

  .card__first {
    display: none;
  }

  .today__grid .ph__cap-long {
    display: inline;
  }

  .today .today__all {
    grid-column: 9 / 11;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    isolation: isolate;
  }

  .today__sketch {
    position: relative;
    display: block;
    flex: 1;
    min-height: 3rem;
    margin: 1.25rem 1.25rem 0.75rem 0;
    border: var(--spacing-rule-thin) solid var(--color-pencil);
    background: var(--color-surface);
  }

  .today__sketch::before,
  .today__sketch::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: var(--spacing-rule-thin) solid var(--color-pencil);
    background: var(--color-surface);
  }

  .today__sketch::before {
    translate: 0.625rem -0.625rem;
  }

  .today__sketch::after {
    translate: 1.25rem -1.25rem;
  }

  .today__all-t {
    font-size: var(--text-h2);
  }

  /* 순위 + 신작 */
  .duo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .rank {
    grid-column: 1 / 8;
  }

  .new {
    grid-column: 8 / 13;
  }

  .rank__n {
    top: -1.5rem;
    left: -0.5rem;
  }

  .rank__title {
    font-size: var(--text-title);
  }

  .genre {
    min-height: 12rem;
  }

  .genre__name {
    font-size: 2rem;
  }

  /* 작품 머리 — 12열 × 2행 */
  .whead {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .whead__cover {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
  }

  .whead__title {
    grid-column: 5 / 13;
    grid-row: 1;
    gap: 0.5rem;
  }

  .whead__story {
    grid-column: 5 / 10;
    grid-row: 2;
  }

  .whead__act {
    grid-column: 10 / 13;
    grid-row: 2;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    align-content: center;
  }

  .whead__h {
    font-size: var(--text-display);
  }

  .whead__score .star {
    width: 2.25rem;
    height: 2.25rem;
  }

  .whead__num {
    font-size: 3rem;
  }

  .whead__line {
    margin-top: 1rem;
  }

  .eps__h,
  .same__h {
    font-size: var(--text-h1);
  }

  /* 정보 */
  .ihead {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .ihead__t {
    grid-column: 1 / 9;
  }

  .sfx--info {
    grid-column: 9 / 13;
  }

  .howto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .made__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 10rem);
  }

  /* 꼬리 */
  .foot {
    padding-top: calc(var(--spacing-gutter) * 2);
    padding-bottom: var(--spacing-page);
  }

  .tail {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    column-gap: var(--spacing-gutter);
  }

  .tail__note {
    grid-row: 1 / 3;
    font-size: 1.125rem;
  }
}

/* ═══ 그림 — 에셋 회차(2026-09-25). 콘티 대신 생성 그림이 칸을 꽉 채운다 ═══
 * 먹선 틀·비율·딱지(1위·NEW)·말풍선·효과음은 .ph 와 컷 규칙 그대로. 여기는 그림이 들어가며 필요한 것만. */

.ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 여백 컷(07)은 빈 칸이라 연필 점선이었다 — 그림이 들어왔으니 다른 컷과 같은 먹선 */
.cut--07 .ph {
  border-style: solid;
  border-color: var(--color-ink);
}

/* 컷 01 표제 — 밤 골목(파랑) 위에서도 읽히게 흰 외곽선. 효과음 .sfx-t 의 먹 외곽선을 뒤집은 것 */
.cut__letter {
  -webkit-text-stroke: calc(var(--spacing-rule) * 3) var(--color-surface);
  paint-order: stroke fill;
}

/* 컷 02 간판 — 콘티 k-02 의 간판 사각이 아니라 panel-02 의 빈 간판(1000×672 에서 534,88 ~ 750,180)에 맞춘다 */
.cut__sign {
  top: 13.6%;
  left: 54%;
  width: 20.6%;
  height: 12.8%;
  font-size: clamp(0.75rem, 3.6cqi, 1.5rem);
  line-height: 1.05;
  text-align: center;
}

/* 효과음 — 인물·손잡이를 덮지 않는 빈 자리로(휙: 비 내리는 오른쪽 위 · 철컥: 손 왼쪽 빗속) */
.cut__sfx--whoosh {
  top: 14%;
  right: 6%;
}

.cut__sfx--click {
  top: 40%;
  bottom: auto;
  left: 5%;
}

/* 컷 04 말풍선 — panel-04 의 두 얼굴(왼 x22~32% · 오 x65~80%, y 8~42%) 사이 빈 틈(x33~64%)으로.
 * 데스크톱은 한 줄로 틈 가운데, 640 미만은 15px 대사가 칸에 비해 커지니 두 줄로 접고 옆 여백을 조금 줄여 틈에 맞춘다 */
.cut__b--r {
  top: 3%;
  right: auto;
  left: 48.5%;
  max-width: 42%;
  translate: -50% 0;
}

@media (max-width: 639.98px) {
  .cut__b--l {
    top: 1%;
    left: 1%;
  }

  .cut__b--r {
    max-width: 37%;
    padding-inline: 0.8em;
  }
}

/* "전부 보기" 원고 더미 — 연필선은 자리표시자의 말이었다. 표지가 다 그림이 됐으니 먹선 원고 + 앞장 주홍 망점(인쇄된 장) */
@media (min-width: 1024px) {
  .today__sketch,
  .today__sketch::before,
  .today__sketch::after {
    border-color: var(--color-ink);
  }

  .today__sketch {
    background-image: radial-gradient(var(--color-bg-deep) 1.5px, transparent 1.6px);
    background-size: 8px 8px;
  }
}

/* ═══ 호버 — 마우스가 있는 기기만 ═══════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--color-bg-deep) 1.5px, transparent 1.6px);
    background-size: 8px 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms var(--ease-out);
  }

  .card:hover .ph::after,
  .rank__item:hover .ph::after,
  .new__item:hover .ph::after,
  .same__item:hover .ph::after,
  .next__item:hover .ph::after,
  .ep__link:hover .ph::after {
    opacity: 0.6;
  }

  .card .tag > * {
    transition: opacity 120ms var(--ease-out);
  }

  .card:hover .tag__n {
    opacity: 0;
  }

  .card:hover .tag__go {
    opacity: 1;
  }

  .genre:hover .genre__sfx {
    transform: skewX(-8deg);
  }

  .bar__nav a:hover,
  .tail__links a:hover,
  .reader__work a:hover {
    text-decoration: underline;
    text-decoration-thickness: var(--spacing-rule);
  }

  .btn--line:hover,
  .btn--bar:hover,
  .vote:hover,
  .rate__cell:not(.is-on):hover,
  .tabs__tab:not([aria-selected="true"]):hover,
  .seg__btn:not([aria-pressed="true"]):hover,
  .rail__tab:not([aria-selected="true"]):hover,
  .today__all:hover,
  a.step:hover {
    background-color: var(--color-bg);
    color: var(--color-ink);
  }

  .ep__link:hover .ep__t,
  .rank__row:hover .rank__name {
    text-decoration: underline;
  }
}

/* ── 모션 — 찍힘. 380ms 안에 끝난다 ───────────────────────────────────── */

.card.is-in {
  animation: var(--animate-cover-in);
  animation-delay: calc(var(--i, 0) * 40ms);
}

.sfx__glyph.is-in {
  animation: var(--animate-pop-in);
}

.rank__list.is-in,
.talk__list.is-in,
.eps__list.is-in {
  animation: tr-fade 150ms var(--ease-out) both;
}

.tick {
  display: inline-block;
  animation: tr-tick 160ms var(--ease-snap) both;
}

@keyframes tr-fade {
  from {
    opacity: 0;
  }
}

@keyframes tr-tick {
  from {
    opacity: 0;
    transform: translateY(-35%);
  }
}

/* 동작 줄이기 — 상태는 바뀌고 움직임은 0(토큰의 --animate-* 는 tokens.css 가 none 으로) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}