/* orbit-seven (PULSAR — SEVEN SIGNALS) — 화면 규칙.
 * 색·서체·간격·그림자·이징은 전부 tokens.css 의 var() 다. 여기에는 raw 색이 없다.
 * 중단점: 45rem(720 — 팬클럽 탭 머리) · 48rem(768) · 64rem(1024 — 12열 · 가로 트랙 고정). 값의 정본은 tokens.css 의 --breakpoint-*.
 * 한 요소가 네 장의 뼈대다 — 신호선(.rail · .dots · .next__axis · .tl__rail).
 */

/* ── 0. 바탕 ─────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@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-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--font-weight-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

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

svg {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
}

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

.skip {
  position: fixed;
  left: var(--spacing-nav-offset);
  top: var(--spacing-nav-offset);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-tap);
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
  font-weight: var(--font-weight-strong);
  transform: translateY(-300%);
}

.skip:focus-visible {
  transform: none;
  outline-color: var(--color-ink);
}

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

.section {
  margin-top: var(--spacing-section);
}

.num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

main {
  display: block;
  padding-top: 0.5rem;
}

/* ── 1. 공통 조각 ────────────────────────────────────────────────────── */

/* Eyebrow — 알약 + 신호 점 · 영문 대문자(Unbounded) + 한글(Pretendard) 짝 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2rem;
  padding: 0.25rem 0.875rem 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-band);
  color: var(--color-accent-deep);
  line-height: var(--text-eyebrow--line-height);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.eyebrow--on-band {
  background: var(--color-surface);
}

.eyebrow__en {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  text-transform: uppercase;
}

.eyebrow__ko {
  padding-left: 0.625rem;
  border-left: 1px solid var(--color-line);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

/* 구간 제목 — 영문 Unbounded + 한글 Pretendard 800, 같은 줄 같은 크기 (HOO 레퍼런스) */
.shead {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 1.25rem;
}

.stitle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0.25rem;
  font-size: var(--text-display-2);
  line-height: var(--text-display-2--line-height);
}

.stitle__en {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.stitle__ko {
  font-family: var(--font-display-ko);
  font-weight: var(--font-weight-ko-title);
  letter-spacing: -0.02em;
}

/* 하위 장 H1 */
.page-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-hero);
  font-size: var(--text-display-1);
  line-height: var(--text-display-1--line-height);
  letter-spacing: var(--text-display-1--letter-spacing);
}

.page-title__line {
  display: block;
}

.page-title__line--accent {
  color: var(--color-accent);
}

.page-title__ko {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-display-ko);
  font-weight: var(--font-weight-ko-title);
  font-size: var(--text-display-2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink-muted);
}

/* 태그 · 종류 · 상태 — 색만으로 가르지 않는다(채움 / 외곽선 / 취소선 + 글자) */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-tag);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--solid {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
}

.tag--line {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

.tag--band {
  background: var(--color-band);
  color: var(--color-accent-deep);
}

.kind {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-tag);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
  line-height: 1.3;
  white-space: nowrap;
}

.kind--release {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
}

.kind--broadcast {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

.kind--fansign {
  background: var(--color-band);
  color: var(--color-accent-deep);
}

.kind--concert {
  background: var(--color-ink);
  color: var(--color-surface);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.625rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  white-space: nowrap;
}

.status__en {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.1em;
}

.status--on {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
}

.status--soon {
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.status--off {
  color: var(--color-ink-muted);
  box-shadow: inset 0 0 0 1px var(--color-line);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* 버튼 — 헤더 재설계(2026-10-09)로 알약·원 안 화살표를 걷었다. 탭과 같은 작은 모서리, ↗ 는 글자 옆에 맨몸으로 */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.5rem 1.25rem 0.5rem 1.5rem;
  border-radius: var(--radius-tab);
  font-weight: var(--font-weight-strong);
  font-size: var(--text-body);
  line-height: 1.2;
  white-space: nowrap;
  transition:
    transform 120ms var(--ease-press),
    background-color 280ms var(--ease-fluid),
    box-shadow 280ms var(--ease-fluid),
    color 280ms var(--ease-fluid);
}

.pill:active {
  transform: scale(0.97);
}

.pill__en {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  margin-right: 0.25rem;
}

.pill__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
}

.pill__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 280ms var(--ease-fluid);
}

.pill--primary {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-float);
}

.pill--primary .pill__icon {
  color: var(--color-on-accent);
}

.pill--ghost {
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.pill--ghost .pill__icon {
  color: var(--color-accent);
}

@media (hover: hover) {
  .pill--primary:hover {
    background: var(--color-accent-deep);
  }

  .pill--ghost:hover {
    color: var(--color-accent-deep);
    box-shadow: inset 0 0 0 1.5px var(--color-accent);
  }

  .pill:hover .pill__icon svg,
  .textlink:hover .pill__icon svg,
  .lineup__more:hover .pill__icon svg {
    transform: translate(2px, -2px);
  }
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  margin-top: 1.75rem;
  font-weight: var(--font-weight-strong);
  color: var(--color-accent);
  transition: color 280ms var(--ease-fluid);
}

.textlink__en {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  margin-left: 0.25rem;
}

.textlink:hover {
  color: var(--color-accent-deep);
}

/* DoubleBezel — 껍데기(band) + 안쪽 판(surface). 판을 바탕에 맨몸으로 두지 않는다 */
.bezel {
  position: relative;
  display: block;
  padding: var(--spacing-bezel);
  border-radius: var(--radius-shell);
  background: var(--color-band);
  box-shadow: var(--shadow-float);
}

.bezel--sm {
  border-radius: var(--radius-shell-sm);
}

/* 띠(band) 위에서는 껍데기와 판을 뒤집는다 — 껍데기가 바탕에 녹지 않게 */
.bezel--on-band {
  background: var(--color-surface);
}

/* 사진 판 — 비율은 상자가 잡는다(이미지가 늦게 와도 자리가 흔들리지 않는다). 판 색은 로딩 중에만 보인다.
   자리표시자(.ph)였던 자리 15곳 — 에셋 회차(2026-09-25)에 전부 <img> 로 바뀌었다 */
.render {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
}

.render[data-ratio="4:5"] {
  aspect-ratio: 4 / 5;
}

.render[data-ratio="1:1"] {
  aspect-ratio: 1;
}

.render[data-ratio="4:3"] {
  aspect-ratio: 4 / 3;
}

.render > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bezel > .render {
  border-radius: var(--radius-core);
}

.bezel--sm > .render {
  border-radius: var(--radius-core-sm);
}

.bezel--on-band > .render {
  background: var(--color-band);
}

/* ── 2. 머리 — FanclubTabs (팬클럽 탭, 헤더 재설계 2026-10-09) ──────────── */
/* 맨 위에 붙은 전폭 띠. 탭 넷이 아래 판(페이지 바탕)에 붙는다 — 지금 쪽 탭만 판과 같은 색으로 이어져 열려 있다.
   떠 있는 섬·알약·그림자 없음. 고정하지 않는다(가로 서사 쪽의 sticky 트랙을 덮지 않게). */

.nav {
  position: relative;
  z-index: 50;
  background: var(--color-band);
  border-bottom: 1px solid var(--color-line);
}

.nav__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: calc(var(--spacing-nav) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-left: max(var(--spacing-gutter), env(safe-area-inset-left));
  padding-right: max(var(--spacing-gutter), env(safe-area-inset-right));
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--spacing-tap);
  color: var(--color-ink);
}

.logo {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
}

.nav__word {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-logo);
}

.nav__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

/* 모바일 — 지금 쪽 탭 이름 */
.nav__here {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-line);
  font-weight: var(--font-weight-strong);
  font-size: var(--text-small);
  word-break: keep-all;
  white-space: nowrap;
}

.nav__here .nav__num {
  color: var(--color-accent);
}

/* D-12 — 알약이 아니라 카운트다운 칸. 강조색은 글자로만 */
.dcount {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--spacing-tap);
  color: var(--color-accent);
  transition: color 200ms var(--ease-fluid);
}

.dcount__label {
  display: none;
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.dcount__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dcount:hover {
  color: var(--color-accent-deep);
}

.nav__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-tab);
  background: var(--color-bg);
  color: var(--color-ink);
}

.nav__burger {
  width: 18px;
  height: 8px;
  border-block: 2px solid currentColor;
}

/* 모바일 메뉴 — popover(스크립트 없이 열리고 Esc 로 닫힌다). 머리 바로 아래 전폭 판에 탭 넷이 세로로 */
.nav__menu {
  position: fixed;
  inset: auto;
  top: calc(var(--spacing-nav) + 1px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  width: auto;
  margin: 0;
  padding: 0 max(var(--spacing-gutter), env(safe-area-inset-right)) 0.75rem max(var(--spacing-gutter), env(safe-area-inset-left));
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-band);
  color: var(--color-ink);
}

.nav__menu::backdrop {
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .nav__menu {
    opacity: 0;
    translate: 0 -0.5rem;
    transition:
      opacity 180ms var(--ease-fluid),
      translate 240ms var(--ease-fluid),
      overlay 240ms allow-discrete,
      display 240ms allow-discrete;
  }

  .nav__menu:popover-open {
    opacity: 1;
    translate: none;
  }

  @starting-style {
    .nav__menu:popover-open {
      opacity: 0;
      translate: 0 -0.5rem;
    }
  }
}

.nav__list {
  display: grid;
}

.nav__link {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid var(--color-line);
  word-break: keep-all;
  transition:
    background-color 200ms var(--ease-fluid),
    color 200ms var(--ease-fluid);
}

.nav__en {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 0.9375rem;
}

.nav__ko {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.nav__link[aria-current="page"] .nav__num,
.nav__link[aria-current="page"] .nav__en {
  color: var(--color-accent);
}

.nav__link[aria-current="page"]::after {
  content: "지금";
  margin-left: auto;
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
  color: var(--color-accent);
}

.nav__note {
  padding: 0.75rem 0.25rem 0;
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

/* 720 이상 — 탭 넷이 머리에 붙는다 */
@media (min-width: 45rem) {
  .nav__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 1.5rem;
    min-height: 0;
    padding-top: calc(0.625rem + env(safe-area-inset-top));
  }

  .nav__brand {
    align-self: center;
    padding-bottom: 0.625rem;
  }

  .nav__here,
  .nav__toggle,
  .nav__note {
    display: none;
  }

  .nav__menu,
  .nav__menu:popover-open {
    position: static;
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    opacity: 1;
    translate: none;
    transition: none;
  }

  .nav__list {
    display: flex;
    gap: 0.25rem;
    /* 탭 바닥이 머리의 아래 선 위에 겹친다 — 열린 탭이 그 선을 지운다 */
    margin-bottom: -1px;
  }

  .nav__link {
    align-items: baseline;
    gap: 0.5rem;
    min-height: var(--spacing-tap);
    padding: 0.75rem 1rem 0.6875rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-tab) var(--radius-tab) 0 0;
    background: var(--color-band);
    white-space: nowrap;
  }

  .nav__link:hover {
    background: var(--color-surface);
  }

  .nav__link[aria-current="page"] {
    background: var(--color-bg);
    border-top: 2px solid var(--color-accent);
    padding-top: calc(0.75rem - 1px);
    border-bottom-color: var(--color-bg);
  }

  .nav__link[aria-current="page"]::after {
    content: none;
  }

  /* 720~1023 — 번호 + 한글만 */
  .nav__en {
    display: none;
  }

  .dcount {
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.125rem;
    margin-left: 0;
    padding: 0.25rem 0 0.625rem 1.25rem;
    border-left: 1px solid var(--color-line);
  }

  .dcount__label {
    display: block;
  }

  .dcount__num {
    font-size: 1.25rem;
    line-height: 1.1;
  }
}

@media (min-width: 64rem) {
  main {
    padding-top: 1.5rem;
  }

  .nav__en {
    display: inline;
  }

  .nav__ko--home {
    display: none;
  }

  .nav__link {
    padding-inline: 1.25rem;
  }
}

/* ── 3. 홈 H1 — 컴백 히어로 ──────────────────────────────────────────── */

/* 1열: 제목 → 발매 → D-day 띠 → 멤버 요약 줄 → 키비주얼 → 버튼. 두 묶음을 display: contents 로 풀어 순서만 바꾼다
   (포커스가 가는 것은 버튼뿐이라 읽는 순서와 보이는 순서가 어긋나지 않는다) */
.hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero__copy,
.hero__stage {
  display: contents;
}

.hero__eyebrow {
  order: 1;
  align-self: flex-start;
}

.hero__title {
  order: 2;
}

.hero__release {
  order: 3;
}

.dday {
  order: 4;
}

.mini {
  order: 5;
}

.hero__visual {
  order: 6;
}

.hero__cta {
  order: 7;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-hero);
  font-size: var(--text-hero);
  line-height: var(--text-hero--line-height);
  letter-spacing: var(--text-hero--letter-spacing);
}

.hero__line {
  display: block;
}

.hero__line + .hero__line {
  color: var(--color-accent);
}

.hero__release {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: clamp(1.0625rem, 0.85rem + 0.7vw, 1.5rem);
  line-height: 1.2;
}

.hero__release time {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.hero__when {
  color: var(--color-ink-muted);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.hero__release-ko {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
  color: var(--color-accent);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.hero__cta {
  display: grid;
  gap: 0.625rem;
}

/* DdayBadge — 파란 판. 1열에서는 전폭 띠 */
.dday {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "num clock"
    "num at";
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  align-items: end;
  padding: 1rem 1.25rem 1.125rem;
  border-radius: var(--radius-shell-sm);
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-float);
}

.dday__label {
  grid-area: label;
  margin-bottom: 0.25rem;
  color: var(--color-on-accent-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.dday__en {
  margin-right: 0.375rem;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  text-transform: uppercase;
}

.dday__num {
  grid-area: num;
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-dday);
  line-height: var(--text-dday--line-height);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.dday__clock {
  grid-area: clock;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.dday__at {
  grid-area: at;
  color: var(--color-on-accent-muted);
  font-size: var(--text-small);
  line-height: 1.3;
}

.dday__at .num {
  font-weight: 500;
}

/* 390 첫 화면 요약 줄 — 번호만 */
.mini {
  display: grid;
  gap: 0.625rem;
  padding-top: 0.25rem;
}

.mini__rail {
  position: relative;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-rail-track);
}

.mini__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--p, 0.9409));
}

.mini__tiles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
  align-items: end;
}

.mini__tiles li {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: var(--color-band);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  font-variant-numeric: tabular-nums;
}

.mini__tiles .mini__center {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
  translate: 0 -6px;
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
  .hero__cta {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64rem) {
  .hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
    align-items: start;
  }

  .hero__copy {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding-top: 0.5rem;
  }

  .hero__stage {
    grid-column: 7 / 13;
    display: block;
    position: relative;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  /* 키비주얼 왼쪽 아래 모서리에 걸친다 — 제목 칼럼(1–6열)의 SIGNALS 끝까지는 닿지 않는다 */
  .dday {
    position: absolute;
    left: 1.5rem;
    bottom: -2.75rem;
    z-index: 2;
    grid-template-columns: auto;
    grid-template-areas:
      "label"
      "num"
      "clock"
      "at";
    row-gap: 0.375rem;
    align-items: start;
    min-width: 15.5rem;
    padding: 1.25rem 1.75rem 1.375rem;
    border-radius: var(--radius-shell);
    box-shadow: var(--shadow-lift);
  }

  .dday__label {
    margin-bottom: 0;
  }

  .mini {
    display: none;
  }
}

/* 1440 이상에서만 키비주얼 왼쪽 모서리에 걸친다 — 그 아래 폭에서는 SIGNALS 끝 글자와 겹친다(1024·1280 실측) */
@media (min-width: 90rem) {
  .dday {
    left: -3rem;
  }
}

/* ── 4. 신호선 — SignalRail ─────────────────────────────────────────── */

.rail {
  --p: 0.9409;
  position: relative;
  padding-top: 1.875rem;
}

.rail__track {
  position: relative;
  height: var(--spacing-rail);
  border-radius: var(--radius-pill);
  background: var(--color-rail-track);
}

.rail__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--p));
}

.rail__cap {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  translate: 0 -50%;
}

.rail__cap--start {
  left: 0;
  background: var(--color-accent);
}

.rail__cap--end {
  right: 0;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.rail__today {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 100%);
  width: var(--spacing-rail-dot);
  height: var(--spacing-rail-dot);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-bg);
  translate: -50% -50%;
}

.rail__label {
  position: absolute;
  top: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--text-small);
  line-height: 1.2;
  white-space: nowrap;
}

.rail__label .num {
  font-size: 0.9375rem;
}

.rail__name {
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.12em;
}

.rail__label--from {
  left: 0;
}

.rail__label--to {
  right: 0;
}

/* TODAY 는 선 아래 — 모바일은 점에서 끝나게, 데스크톱은 멤버 띠 오른쪽 빈 칸 위 가운데 */
.rail__label--today {
  top: calc(1.875rem + var(--spacing-rail) + 0.75rem);
  left: calc(var(--p) * 100%);
  translate: calc(-100% + 8px) 0;
  color: var(--color-accent);
  font-weight: var(--font-weight-strong);
}

.rail__today-en {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: no-preference) {
  .rail__fill,
  .mini__fill {
    animation: rail-fill 1200ms var(--ease-out-expo) 200ms both;
  }

  .rail__today {
    animation: pop-dot 320ms var(--ease-pop) 1000ms both;
  }
}

@keyframes rail-fill {
  from {
    transform: scaleX(0);
  }
}

@keyframes pop-dot {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* ── 5. 홈 H2 — 멤버 띠 ─────────────────────────────────────────────── */

.lineup {
  margin-top: var(--spacing-block);
}

.lineup__row {
  margin-top: 2.5rem;
}

.tiles {
  display: flex;
  gap: 0.75rem;
  margin-inline: calc(-1 * var(--spacing-gutter));
  padding: 0.5rem var(--spacing-gutter) 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--spacing-gutter);
  scrollbar-width: none;
}

.tile {
  position: relative;
  flex: 0 0 min(40vw, 13rem);
  scroll-snap-align: start;
}

.tile__link {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  transition: transform 280ms var(--ease-fluid);
}

.tile__bezel {
  margin-bottom: 0.625rem;
  transition: box-shadow 280ms var(--ease-fluid);
}

.tile__tag {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  translate: -50% 0;
}

.tile__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: 0.01em;
}

.tile__pos {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.tile__dot {
  display: none;
}

.lineup__more {
  display: none;
}

@media (hover: hover) {
  .tile__link:hover {
    transform: translateY(-8px);
  }

  .tile__link:hover .tile__bezel {
    box-shadow: var(--shadow-lift);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tile {
    animation: tile-in 480ms var(--ease-fluid) both;
    animation-delay: calc(var(--i) * 60ms + 120ms);
  }
}

@keyframes tile-in {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

@media (min-width: 64rem) {
  .lineup {
    margin-top: 4rem;
  }

  .rail__label--today {
    translate: -50% 0;
  }

  .lineup__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9.5rem;
    column-gap: var(--spacing-grid-gap);
    margin-top: 1.75rem;
  }

  .tiles {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--spacing-grid-gap);
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  /* 신호선에 매달린 조명 — 점은 선 위에 머물고, 판만 떠오른다 */
  .tile::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1.75rem;
    width: 1px;
    height: 1.75rem;
    background: var(--color-line);
  }

  .tile::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1.75rem - var(--spacing-rail) / 2);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 2px var(--color-accent);
    translate: -50% -50%;
    transition: background-color 200ms var(--ease-fluid), scale 320ms var(--ease-pop);
  }

  .tile:hover::after,
  .tile:focus-within::after {
    background: var(--color-accent);
    scale: 1.3;
  }

  .tile--center .tile__link {
    top: -16px;
  }

  /* 7칸이 좁아지는 1024–1279 에서도 CASTOR 가 칸 안에 선다 */
  .tile__name {
    font-size: clamp(0.875rem, 1.5vw, var(--text-title));
  }

  .lineup__more {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 4rem 0 0.75rem;
    color: var(--color-accent);
    transition: color 280ms var(--ease-fluid);
  }

  .lineup__more:hover {
    color: var(--color-accent-deep);
  }

  .lineup__more-en {
    font-family: var(--font-display);
    font-weight: var(--font-weight-display);
    font-size: var(--text-title);
    line-height: 1.15;
  }

  .lineup__more-ko {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    font-weight: var(--font-weight-strong);
  }

  .lineup__more .pill__icon {
    margin-top: 0.75rem;
    color: var(--color-accent);
  }
}

/* ── 7. 홈 H4 — 최신 앨범 · TrackRow ────────────────────────────────── */

.feature__grid {
  display: grid;
  gap: var(--spacing-block);
  margin-top: 1.5rem;
}

.feature__kind {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.feature__kind-en {
  margin-right: 0.5rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  text-transform: uppercase;
}

.feature__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: var(--font-weight-hero);
  font-size: var(--text-display-1);
  line-height: var(--text-display-1--line-height);
  letter-spacing: var(--text-display-1--letter-spacing);
}

.feature__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-strong);
}

.feature__meta .num {
  color: var(--color-ink);
}

.feature__sep {
  width: 24px;
  height: 1px;
  background: var(--color-line);
}

.tracks {
  margin-top: 2rem;
  border-top: 1px solid var(--color-line);
}

.track {
  display: grid;
  grid-template-columns: var(--spacing-tap) 2rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  min-height: 4.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-line);
}

.track__play {
  display: grid;
  place-items: center;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  border-radius: 50%;
  background: var(--color-band);
  color: var(--color-accent);
  transition:
    background-color 200ms var(--ease-fluid),
    color 200ms var(--ease-fluid),
    transform 120ms var(--ease-press);
}

.track__play:active {
  transform: scale(0.94);
}

.track__play:hover,
.track__play[aria-pressed="true"] {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
}

.track__play:focus-visible {
  outline-offset: 2px;
}

.track__icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.track__bars {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.track__bars i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
  transform: scaleY(0.6);
}

.track__play[aria-pressed="true"] .track__icon {
  display: none;
}

.track__play[aria-pressed="true"] .track__bars {
  display: flex;
}

@media (prefers-reduced-motion: no-preference) {
  .track__play[aria-pressed="true"] .track__bars i {
    animation: bar 900ms var(--ease-fluid) infinite alternate;
  }

  .track__bars i:nth-child(2) {
    animation-delay: -300ms;
  }

  .track__bars i:nth-child(3) {
    animation-delay: -600ms;
  }
}

@keyframes bar {
  from {
    transform: scaleY(0.3);
  }

  to {
    transform: scaleY(1);
  }
}

.track__no {
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.track__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
}

.track__sub {
  color: var(--color-ink-muted);
  font-weight: 500;
  font-size: 0.8em;
}

.track__len {
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 64rem) {
  .feature__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
    align-items: center;
  }

  .feature__cover {
    grid-column: 1 / 6;
  }

  .feature__info {
    grid-column: 7 / 13;
  }
}

/* ── 8. 홈 H5 — 다가오는 일정 3 (EventNode) ─────────────────────────── */

.next__board {
  margin-top: var(--spacing-block);
}

.next__axis {
  display: none;
}

.events {
  position: relative;
  display: grid;
  gap: 2.25rem;
  padding-left: 2rem;
}

/* 1열 — 선을 세워 왼쪽에 둔다 */
.events::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 1rem;
  bottom: 1rem;
  width: var(--spacing-rail);
  border-radius: var(--radius-pill);
  background: var(--color-rail-track);
}

.event {
  position: relative;
}

.event__dot {
  position: absolute;
  left: calc(-2rem + 9px);
  top: 1rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px var(--color-bg);
  translate: -50% -50%;
}

.event--release .event__dot {
  background: var(--color-bg);
  box-shadow:
    inset 0 0 0 5px var(--color-accent),
    0 0 0 5px var(--color-bg);
}

.event__date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
}

.event__day {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-display-2);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.event__dow {
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.06em;
}

.event__kind {
  margin-top: 0.875rem;
}

.event__title {
  margin-top: 0.625rem;
  font-family: var(--font-display-ko);
  font-weight: var(--font-weight-ko-title);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
}

.event__meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.375rem;
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-strong);
}

.event__d {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 64rem) {
  .next__axis {
    position: relative;
    display: block;
    height: 2rem;
  }

  .next__axis-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--spacing-rail);
    border-radius: var(--radius-pill);
    background: var(--color-rail-track);
  }

  .next__axis-start,
  .next__axis-end {
    position: absolute;
    top: 0;
    color: var(--color-ink-muted);
    font-family: var(--font-display);
    font-weight: var(--font-weight-numeral);
    font-size: var(--text-eyebrow);
    letter-spacing: 0.12em;
  }

  .next__axis-start {
    left: 0;
    color: var(--color-accent);
  }

  .next__axis-end {
    right: 0;
  }

  /* 가로 위치 = 날짜 거리. 30칸 = 09.25 → 10.25 */
  .events {
    grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 0;
    padding-left: 0;
  }

  .events::before {
    display: none;
  }

  .event {
    grid-row: 1;
    grid-column: var(--col) / span 8;
    padding: 2.25rem 1rem 0 0;
  }

  .event__dot {
    left: 0;
    top: calc(-1 * var(--spacing-rail) / 2);
  }
}

/* ── 9. 홈 H6 — 팬클럽 BEACON ───────────────────────────────────────── */

.beacon {
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
  background: var(--color-band);
}

.beacon__grid {
  display: grid;
  gap: var(--spacing-block);
}

.beacon__title {
  margin-top: 1.25rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--font-weight-hero);
  font-size: var(--text-display-1);
  line-height: var(--text-display-1--line-height);
  letter-spacing: var(--text-display-1--letter-spacing);
}

.beacon__period {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-top: 1rem;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-ko-title);
}

.beacon__period .num {
  color: var(--color-accent-deep);
  font-size: 1rem;
}

.beacon__kit {
  margin-top: var(--spacing-block);
}

.benefit {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-top: 1.375rem;
  padding-bottom: 1.375rem;
  border-top: 1px solid var(--color-line);
}

.benefit:last-child {
  border-bottom: 1px solid var(--color-line);
}

.benefit__no {
  padding-top: 3px;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.benefit__title {
  font-family: var(--font-display-ko);
  font-weight: var(--font-weight-ko-title);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
}

.benefit__text {
  margin-top: 0.375rem;
  color: var(--color-ink-muted);
}

.beacon__join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2rem;
}

.beacon__price .num {
  font-size: var(--text-display-2);
  letter-spacing: -0.02em;
}

.beacon__per {
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-strong);
}

@media (max-width: 63.999rem) {
  .beacon__join .pill {
    flex: 1 1 100%;
  }
}

@media (min-width: 64rem) {
  .beacon__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
    align-items: end;
  }

  .beacon__lead {
    grid-column: 1 / 7;
  }

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

/* ── 10. 고지 · 꼬리 ────────────────────────────────────────────────── */

.notice {
  display: grid;
  justify-items: start;
  gap: 0.875rem;
  max-width: 55rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-shell);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-line);
}

.notice__ko {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-strong);
  line-height: var(--text-body-lg--line-height);
}

.notice__en {
  color: var(--color-ink-muted);
}

.notice--sm {
  gap: 0.375rem;
  max-width: none;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-shell-sm);
}

.notice--sm .notice__ko,
.notice--sm .notice__en {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.foot {
  margin-top: var(--spacing-section);
  padding-top: var(--spacing-block);
  border-top: 1px solid var(--color-line);
  overflow: hidden;
}

.foot__inner {
  display: grid;
  gap: 1.75rem;
}

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

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-tap);
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
  transition:
    color 200ms var(--ease-fluid),
    box-shadow 200ms var(--ease-fluid);
}

.foot__links a:hover {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

.foot__links a[aria-current="page"] {
  background: var(--color-band);
  color: var(--color-accent-deep);
  box-shadow: none;
}

/* 잘린 거대 워드마크 — 장식. 폭에 꽉 차게(Unbounded 900 PULSAR ≈ 5.3em) */
.foot__word {
  --fs: min(var(--text-mega), calc((100vw - 2 * var(--spacing-gutter)) / 5.45));
  height: calc(var(--fs) * 0.6);
  margin-top: var(--spacing-block);
  overflow: hidden;
}

.foot__word span {
  display: block;
  color: var(--color-line);
  font-family: var(--font-display);
  font-weight: var(--font-weight-hero);
  font-size: var(--fs);
  line-height: var(--text-mega--line-height);
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}

.foot__copy {
  padding-top: 1.25rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

@media (min-width: 64rem) {
  .foot__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
    align-items: start;
  }

  .foot__inner .notice--sm {
    grid-column: 1 / 6;
  }

  .foot__links {
    grid-column: 7 / 13;
    justify-content: flex-end;
  }
}

/* Toast — 아래에서 올라오는 흰 판 */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  max-width: min(28rem, calc(100vw - 2 * var(--spacing-gutter)));
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-shell-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--color-line);
  font-weight: var(--font-weight-strong);
  line-height: 1.5;
  translate: -50% 0;
  transform: translateY(calc(100% + 3rem));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 240ms var(--ease-fluid),
    opacity 240ms var(--ease-fluid),
    visibility 0s linear 240ms;
}

.toast::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.toast.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition:
    transform 360ms var(--ease-fluid),
    opacity 360ms var(--ease-fluid),
    visibility 0s;
}

.toast:empty {
  display: none;
}

/* Scroll reveal — main.js 가 화면 아래에 있는 것에만 .is-pre 를 붙인다(이미 보이는 것은 깜빡이지 않게) */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    transition:
      opacity 560ms var(--ease-fluid),
      transform 560ms var(--ease-fluid);
  }

  [data-reveal].is-pre {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* ── 11. 멤버 ───────────────────────────────────────────────────────── */

.intro {
  display: grid;
  gap: var(--spacing-block);
}

.intro__head {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 1.25rem;
}

.intro__body {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.intro__text {
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.intro__body .notice {
  margin: 0;
  max-width: none;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-top: 0.75rem;
}

.stat {
  display: grid;
  gap: 0.25rem;
}

.stat__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-display-2);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.stat__label-en {
  margin-right: 0.375rem;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (min-width: 64rem) {
  .intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
  }

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

  .intro__body {
    grid-column: 8 / 13;
    padding-top: 3rem;
  }
}

/* M2 — 목차 칩 */
.chips {
  display: flex;
  gap: 0.5rem;
  margin: var(--spacing-block) calc(-1 * var(--spacing-gutter)) 0;
  padding: 0.25rem var(--spacing-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--spacing-tap);
  padding: 0 1.125rem 0 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 0.875rem;
  white-space: nowrap;
  transition:
    background-color 200ms var(--ease-fluid),
    color 200ms var(--ease-fluid),
    box-shadow 200ms var(--ease-fluid),
    transform 120ms var(--ease-press);
}

.chip:active {
  transform: scale(0.97);
}

.chip:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

.chip__no {
  color: var(--color-accent);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  font-variant-numeric: tabular-nums;
}

.chip[aria-current="true"] {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
  box-shadow: none;
}

.chip[aria-current="true"] .chip__no {
  color: var(--color-on-accent-muted);
}

@media (min-width: 64rem) {
  .chips {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }
}

/* M3 — 멤버 트랙. 기본은 네이티브 가로 스크롤 + scroll-snap. 향상(≥1024 · 움직임 허용 · animation-timeline)은 .is-pinned */
.mtrack {
  position: relative;
  margin-top: 2rem;
}

.mtrack__viewport {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--spacing-gutter), calc((100% - var(--spacing-container)) / 2));
  scrollbar-width: thin;
  scrollbar-color: var(--color-line) transparent;
}

.mtrack__viewport:focus-visible {
  outline-offset: -3px;
}

.mtrack__list {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.75rem, 0.2rem + 2.2vw, 2rem);
  width: max-content;
  padding: 0.5rem max(var(--spacing-gutter), calc((100vw - var(--spacing-container)) / 2)) 1rem;
}

.panel {
  --ph-w: 100%;
  position: relative;
  flex: none;
  width: min(84vw, var(--spacing-panel-s));
  padding-top: clamp(3.25rem, 1.5rem + 6vw, 5rem);
  scroll-snap-align: start;
}

.panel--l {
  width: min(84vw, var(--spacing-panel-l));
}

.panel--xl {
  width: min(84vw, var(--spacing-panel-xl));
}

.panel__num {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--font-weight-hero);
  font-size: var(--text-numeral-xl);
  line-height: var(--text-numeral-xl--line-height);
  letter-spacing: -0.04em;
  pointer-events: none;
  transition: color 400ms var(--ease-fluid);
}

.panel__photo {
  position: relative;
  z-index: 1;
  width: var(--ph-w);
}

.panel__body {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 0.375rem;
  margin-top: 1.25rem;
}

.panel__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display-2);
  line-height: 1;
  letter-spacing: 0.01em;
  transition: color 400ms var(--ease-fluid);
}

.panel__pos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  margin-top: 0.375rem;
  font-weight: var(--font-weight-ko-title);
}

.panel__pos-en {
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel__birth {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.panel__birth .num {
  margin-left: 0.25rem;
  color: var(--color-ink);
  font-size: 0.8125rem;
}

.panel__line {
  max-width: 26rem;
}

.panel__center {
  margin-bottom: 0.25rem;
}

.tag__ko {
  margin-left: 0.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  letter-spacing: 0;
}

.panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.mtrack.is-live .panel:not(.is-current) .panel__name {
  color: var(--color-ink-muted);
}

.mtrack.is-live .panel.is-current .panel__num {
  color: var(--color-band);
}

.mtrack__foot {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.mtrack__count {
  flex: none;
  min-width: 5.25rem;
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.mtrack__count b {
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: var(--font-weight-numeral);
}

/* 7점 신호선 — 지금 판까지 채워진다 */
.dots {
  --f: 0;
  position: relative;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
}

.dots::before,
.dots__fill {
  content: "";
  position: absolute;
  left: calc(var(--spacing-tap) / 2);
  right: calc(var(--spacing-tap) / 2);
  top: 50%;
  height: var(--spacing-rail);
  border-radius: var(--radius-pill);
  translate: 0 -50%;
}

.dots::before {
  background: var(--color-rail-track);
}

.dots__fill {
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--f));
  transition: transform 600ms var(--ease-out-expo);
}

.dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  border-radius: 50%;
}

.dot::before {
  content: "";
  width: var(--spacing-rail-dot);
  height: var(--spacing-rail-dot);
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 2px var(--color-accent);
  transition:
    background-color 200ms var(--ease-fluid),
    scale 320ms var(--ease-pop);
}

.dot.is-past::before,
.dot[aria-current="true"]::before {
  background: var(--color-accent);
}

.dot[aria-current="true"]::before {
  scale: 1.35;
}

.mtrack__btns {
  flex: none;
  display: flex;
  gap: 0.5rem;
}

.navbtn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-line);
  transition:
    background-color 200ms var(--ease-fluid),
    color 200ms var(--ease-fluid),
    transform 120ms var(--ease-press),
    opacity 200ms var(--ease-fluid);
}

.navbtn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navbtn:hover:not(:disabled) {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
}

.navbtn:active:not(:disabled) {
  transform: scale(0.94);
}

.navbtn:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 47.999rem) {
  .mtrack__foot {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .dots {
    flex: 1 1 100%;
    margin-inline: -0.75rem;
  }

  .mtrack__btns {
    display: none;
  }
}

@media (min-width: 64rem) {
  /* 판 높이는 화면 높이에 맞춘다 — 고정된 트랙 안에서 판·이름·꼬리가 한 화면에 선다 */
  .panel {
    --ph-w: min(22rem, 38.4svh);
    padding-top: clamp(3.5rem, 2rem + 3vw, 5rem);
  }

  .panel--l {
    --ph-w: min(24rem, 41svh);
  }

  .panel--xl {
    --ph-w: min(28rem, 48svh);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.75rem;
    align-items: end;
  }

  .panel--xl .panel__body {
    margin-top: 0;
    padding-bottom: 0.5rem;
  }

  .panel--xl .panel__name {
    font-size: var(--text-display-1);
  }
}

@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .mtrack.is-pinned {
    height: calc(100vh + var(--mtrack-distance, 0px));
    view-timeline: --mtrack block;
  }

  .mtrack.is-pinned .mtrack__sticky {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100vh;
    padding: 1.75rem 0;
    overflow: clip;
  }

  .mtrack.is-pinned .mtrack__viewport {
    overflow: visible;
    scroll-snap-type: none;
  }

  .mtrack.is-pinned .mtrack__list {
    animation: mtrack-slide linear both;
    animation-timeline: --mtrack;
    animation-range: contain 0% contain 100%;
  }
}

@keyframes mtrack-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--mtrack-distance, 0px)));
  }
}

/* M4 — 라인 */
.lines {
  margin-top: var(--spacing-block);
  border-top: 1px solid var(--color-line);
}

.lines__row {
  display: grid;
  gap: 0.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
}

.lines__label {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.lines__label-en {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-title);
  letter-spacing: 0.04em;
}

.lines__label-ko {
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-strong);
}

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

.lines__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--spacing-tap);
  padding: 0 1.125rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 0.9375rem;
  transition:
    box-shadow 200ms var(--ease-fluid),
    color 200ms var(--ease-fluid);
}

.lines__name:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

.lines__name--main {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

.lines__main {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--font-weight-ko-title);
  color: var(--color-accent-deep);
}

@media (min-width: 64rem) {
  .lines__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
    align-items: center;
  }

  .lines__label {
    grid-column: 1 / 4;
  }

  .lines__names {
    grid-column: 4 / 13;
  }
}

/* ── 12. 디스코그래피 ────────────────────────────────────────────────── */

.dhead {
  display: grid;
  gap: 2rem;
}

.dhead__title {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 1.25rem;
}

@media (min-width: 64rem) {
  .dhead {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
    align-items: end;
  }

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

  .dhead .stats {
    grid-column: 8 / 13;
    flex-wrap: nowrap;
    justify-content: flex-end;
    column-gap: 2rem;
    margin-top: 0;
  }
}

/* D2 — 연도 축 타임라인. 가로 위치 = 첫 발매(2024.04.10)부터의 날 수 × --ppd */
.tl {
  margin-top: var(--spacing-block);
}

@media (min-width: 64rem) {
  .tl {
    margin-top: 3rem;
  }

  .tl__head {
    margin-bottom: 0.75rem;
  }
}

.tl__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.tl__bar {
  display: none;
}

.tl__scroller {
  padding-left: max(var(--spacing-gutter), env(safe-area-inset-left));
  padding-right: max(var(--spacing-gutter), env(safe-area-inset-right));
}

.tl__inner,
.tl__list {
  display: grid;
}

.tl__rail,
.tl__today {
  display: none;
}

.tl__year {
  margin-top: 1.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display-2);
  line-height: 1.1;
}

.tl__year:first-child {
  margin-top: 0;
}

.tl__link {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 1rem;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-line);
}

.tl__cover {
  grid-row: 1 / 4;
  align-self: start;
}

.tl__dot {
  display: none;
}

.tl__title {
  grid-row: 1;
}

.tl__date {
  grid-row: 2;
  color: var(--color-ink-muted);
  font-size: 0.8125rem;
}

.tl__kind {
  grid-row: 3;
}

.tl__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 1rem;
  line-height: 1.3;
}

.tl__kind {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.sticker {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 3rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-float);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.1em;
  rotate: -4deg;
}

.sticker--inline {
  position: static;
  display: inline-grid;
  vertical-align: middle;
  margin-left: 0.5rem;
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .tl .sticker {
    animation: pop 320ms var(--ease-pop) 600ms both;
  }
}

@media (min-width: 64rem) {
  .tl__bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }

  .tl__hint {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    font-weight: var(--font-weight-strong);
  }

  .tl__scroller {
    padding-left: 0;
    padding-right: 0;
    --ppd: 2.6px;
    --c: 13.5rem;
    --x0: calc(max(var(--spacing-gutter), calc((100vw - var(--spacing-container)) / 2)) + var(--c) / 2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line) transparent;
  }

  .tl__scroller:focus-visible {
    outline-offset: -3px;
  }

  .tl__inner {
    position: relative;
    display: block;
    width: calc(2 * var(--x0) + 910 * var(--ppd));
    height: 25rem;
  }

  .tl__rail {
    position: absolute;
    top: 2.5rem;
    left: var(--x0);
    width: calc(910 * var(--ppd));
    display: block;
    height: var(--spacing-rail);
    border-radius: var(--radius-pill);
    background: var(--color-rail-track);
  }

  .tl__rail::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-accent);
    transform-origin: left center;
    transform: scaleX(calc(898 / 910));
  }

  .tl__today {
    position: absolute;
    top: 0;
    left: calc(var(--x0) + 898 * var(--ppd));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    translate: calc(-100% + 7px) 0;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-weight: var(--font-weight-numeral);
    font-size: var(--text-eyebrow);
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  .tl__today::after {
    content: "";
    width: var(--spacing-rail-dot);
    height: var(--spacing-rail-dot);
    margin-top: calc(2.5rem - 1.1rem - var(--spacing-rail-dot) / 2 + var(--spacing-rail) / 2);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-bg);
  }

  .tl__year {
    position: absolute;
    top: 0;
    left: calc(var(--x0) + var(--d) * var(--ppd));
    margin: 0;
    padding: 0 0 0 0.625rem;
    border: 0;
    border-left: 1px solid var(--color-line);
    height: 2.5rem;
    color: var(--color-ink);
    font-size: var(--text-title);
    line-height: 1.1;
  }

  .tl__item {
    position: absolute;
    top: 2.5rem;
    left: calc(var(--x0) + var(--d) * var(--ppd) - var(--c) / 2);
    width: var(--c);
  }

  .tl__item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 1.75rem;
    background: var(--color-line);
  }

  .tl__dot {
    position: absolute;
    left: 50%;
    top: calc(var(--spacing-rail) / 2);
    z-index: 2;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 2px var(--color-accent);
    translate: -50% -50%;
    transition:
      background-color 200ms var(--ease-fluid),
      scale 320ms var(--ease-pop);
  }

  .tl__item:hover .tl__dot,
  .tl__item:focus-within .tl__dot {
    background: var(--color-accent);
    scale: 1.3;
  }

  .tl__link {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 0.25rem;
    padding: 1.75rem 0 0;
    border: 0;
    transition: transform 280ms var(--ease-fluid);
  }

  .tl__cover {
    grid-row: auto;
    margin-bottom: 0.75rem;
    transition: box-shadow 280ms var(--ease-fluid);
  }

  .tl__title,
  .tl__date,
  .tl__kind {
    grid-row: auto;
  }

  .tl__date {
    font-size: 0.875rem;
  }

  .tl__title {
    font-size: 1.0625rem;
  }
}

@media (min-width: 64rem) and (hover: hover) {
  .tl__link:hover {
    transform: translateY(-8px);
  }

  .tl__link:hover .tl__cover {
    box-shadow: var(--shadow-lift);
  }
}

/* D3 — AlbumAccordion */
.albums {
  padding-top: 0.25rem;
  border-top: 1px solid var(--color-line);
}

.album {
  border-bottom: 1px solid var(--color-line);
  scroll-margin-top: 1rem;
}

.album__sum {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) var(--spacing-tap);
  grid-template-areas:
    "thumb title chev"
    "thumb meta chev";
  column-gap: 1rem;
  row-gap: 0.125rem;
  align-items: center;
  min-height: 5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.album__sum::-webkit-details-marker {
  display: none;
}

.album__sum:focus-visible {
  outline-offset: 2px;
  border-radius: var(--radius-tag);
}

.album__year,
.album__kind {
  display: none;
}

.album__thumb {
  grid-area: thumb;
  padding: 3px;
  border-radius: var(--radius-tag);
  box-shadow: none;
}

.album__thumb .render {
  border-radius: calc(var(--radius-tag) - 3px);
}

.album__title {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 1.0625rem;
  line-height: 1.25;
}

.album__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.album__meta .num {
  font-size: 0.8125rem;
  font-weight: 500;
}

.album__chev {
  grid-area: chev;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  border-radius: 50%;
  background: var(--color-band);
  color: var(--color-accent);
  transition:
    background-color 200ms var(--ease-fluid),
    color 200ms var(--ease-fluid);
}

.album__chev::before,
.album__chev::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: rotate 320ms var(--ease-fluid);
}

.album__chev::after {
  rotate: 90deg;
}

.album[open] .album__chev {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
}

.album[open] .album__chev::after {
  rotate: 0deg;
}

.album__sum:hover .album__title {
  color: var(--color-accent);
}

.album__body {
  display: grid;
  gap: var(--spacing-block);
  padding-top: 1rem;
  padding-bottom: var(--spacing-block);
}

.album__cover {
  align-self: start;
}

.album__detail {
  display: grid;
  align-content: start;
  gap: 1.25rem;
}

.album__lead {
  display: grid;
  gap: 0.5rem;
}

.album__lead-kind {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.album__lead-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-hero);
  font-size: var(--text-display-2);
  line-height: var(--text-display-2--line-height);
}

.tlist {
  border-top: 1px solid var(--color-line);
}

.tlist__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: center;
  min-height: 3.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-line);
}

.tlist__no {
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.tlist__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}

.tlist__len {
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.album__credit {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

@media (prefers-reduced-motion: no-preference) {
  .album {
    interpolate-size: allow-keywords;
  }

  .album::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size 420ms var(--ease-fluid),
      content-visibility 420ms allow-discrete;
  }

  .album[open]::details-content {
    block-size: auto;
  }
}

@media (min-width: 64rem) {
  .album__sum {
    grid-template-columns: 4.5rem 3.5rem minmax(0, 1fr) 15rem 7.5rem 4.5rem var(--spacing-tap);
    grid-template-areas: "year thumb title kind date count chev";
    column-gap: 1.25rem;
    min-height: 5.5rem;
  }

  .album__meta {
    display: contents;
  }

  .album__year {
    grid-area: year;
    display: block;
    color: var(--color-accent);
    font-size: 1rem;
  }

  .album__kind {
    grid-area: kind;
    display: block;
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    font-weight: var(--font-weight-strong);
  }

  .album__date {
    grid-area: date;
    color: var(--color-ink);
  }

  .album__count {
    grid-area: count;
  }

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

  .album__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
    padding-left: calc(4.5rem + 1.25rem);
  }

  .album__cover {
    grid-column: 1 / 5;
  }

  .album__detail {
    grid-column: 6 / 13;
  }
}

/* ── 13. 스케줄 ─────────────────────────────────────────────────────── */

.shead-grid {
  display: grid;
  gap: var(--spacing-block);
}

.shead-grid__title {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 1.25rem;
}

/* 다음 일정 판 — DdayBadge 확장 */
.nextpanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "title dday"
    "when dday";
  gap: 0.5rem 1.25rem;
  align-items: end;
  padding: 1.5rem 1.5rem 1.625rem;
  border-radius: var(--radius-shell);
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-float);
}

.nextpanel__label {
  grid-area: label;
  color: var(--color-on-accent-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.nextpanel__label .dday__en {
  margin-right: 0.5rem;
}

.nextpanel__title {
  grid-area: title;
  font-family: var(--font-display-ko);
  font-weight: var(--font-weight-ko-title);
  font-size: var(--text-title);
  line-height: 1.3;
}

.nextpanel__title-en {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display-2);
  line-height: 1.05;
}

.nextpanel__when {
  grid-area: when;
  color: var(--color-on-accent-muted);
  font-size: 0.9375rem;
}

.nextpanel__dday {
  grid-area: dday;
  display: grid;
  justify-items: end;
  gap: 0.25rem;
}

.nextpanel__dday .dday__num,
.nextpanel__dday .dday__clock {
  grid-area: auto;
}

/* 옆의 H1(display-1)보다 한 단계 아래에 둔다 — --text-dday 를 그대로 쓰면 H1 과 같은 크기(1440 82 vs 78, 390 에선 40 > 36)가 돼
   두 요소가 경쟁한다. 1.3 은 홈 H1:D-day 비(106:82). H1 에서 나눠 390~1440 전 폭에서 같은 비를 지키고, 판 제목(display-2)보다는 크다 */
.nextpanel__dday .dday__num {
  font-size: calc(var(--text-display-1) / 1.3);
}

.nextpanel__dday .dday__clock {
  color: var(--color-on-accent-muted);
  font-size: 0.875rem;
}

@media (min-width: 64rem) {
  .shead-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
    align-items: end;
  }

  .shead-grid__title {
    grid-column: 1 / 7;
  }

  .nextpanel {
    grid-column: 7 / 13;
  }
}

/* S2 — 필터 */
.filter {
  display: grid;
  gap: 0.875rem;
  margin-top: var(--spacing-block);
}

.filter__group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.filter__label {
  flex: none;
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-ko-title);
}

.filter__chips {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
  margin-right: calc(-1 * var(--spacing-gutter));
  padding: 0.25rem var(--spacing-gutter) 0.25rem 0.125rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.fchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--spacing-tap);
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-ko-title);
  white-space: nowrap;
  transition:
    background-color 200ms var(--ease-fluid),
    color 200ms var(--ease-fluid),
    transform 120ms var(--ease-press);
}

.fchip__en {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.fchip:hover {
  background: var(--color-band);
}

.fchip:active {
  transform: scale(0.97);
}

.fchip[aria-pressed="true"] {
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .fchip.is-popped {
    animation: pop-chip 320ms var(--ease-pop);
  }
}

@keyframes pop-chip {
  from {
    scale: 0.88;
  }
}

.filter__count {
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-strong);
}

.filter__count .num {
  color: var(--color-accent);
  font-size: 1.125rem;
}

@media (min-width: 64rem) {
  .filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2rem;
  }

  .filter__chips {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .filter__count {
    margin-left: auto;
  }
}

/* S3 — 월 트랙 */
.months {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.mtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--spacing-tap);
  min-width: 4.5rem;
  padding: 0 1.125rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  transition:
    background-color 200ms var(--ease-fluid),
    color 200ms var(--ease-fluid);
}

.mtab__ko {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  letter-spacing: 0;
}

.mtab:hover {
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.mtab[aria-current="true"] {
  background: var(--color-ink);
  color: var(--color-surface);
  box-shadow: none;
}

.mscroll {
  position: relative;
  display: grid;
  gap: var(--spacing-block);
  margin-top: 1.5rem;
}

.month {
  display: grid;
  gap: 1.25rem;
  scroll-margin-top: 1.5rem;
}

.month__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-ink);
}

.month__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-hero);
  font-size: var(--text-display-2);
  line-height: 1;
}

.month__ko {
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-ko-title);
}

.month__n {
  margin-left: auto;
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.cal {
  display: none;
}

.agenda {
  display: grid;
  align-content: start;
}

.arow {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--color-line);
}

.arow[hidden] {
  display: none;
}

.arow__date {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 0.375rem;
}

.arow__day {
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.arow__dow {
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.12em;
}

.arow__main {
  display: grid;
  justify-items: start;
  gap: 0.375rem;
}

.arow__title {
  font-family: var(--font-display-ko);
  font-weight: var(--font-weight-ko-title);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.arow__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.arow__meta .num {
  font-size: 0.8125rem;
  font-weight: 500;
}

.agenda__empty {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-strong);
}

.agenda__empty[hidden] {
  display: none;
}

@media (min-width: 64rem) {
  .mscroll {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .month {
    flex: 0 0 100%;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid-gap);
    align-items: start;
    scroll-snap-align: start;
  }

  .month__head {
    grid-column: 1 / -1;
  }

  .cal {
    grid-column: 1 / 9;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
  }

  .agenda {
    grid-column: 9 / 13;
  }

  .agenda .arow:first-child {
    padding-top: 0;
  }

  /* 옆 칸의 달력(5–6줄)과 길이를 맞춘다 — 종류 태그와 제목을 한 줄에 */
  .arow {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .arow__main {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.625rem;
    row-gap: 0.25rem;
    align-items: center;
  }

  .arow__meta {
    grid-column: 1 / -1;
  }

  .cal .cal__day {
    min-height: 6.75rem;
  }
}

.cal__dow {
  padding: 0.625rem 0.75rem;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.14em;
}

.cal__day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-height: 5.25rem;
  padding: 0.5rem;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}

.cal__day--blank {
  background: transparent;
}

.cal__n {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.cal__day--today .cal__n {
  padding: 1px 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
  font-weight: var(--font-weight-numeral);
}

.cal__today {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.12em;
}

.cal__day .kind {
  min-height: 1.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.cal__day .kind[hidden] {
  display: none;
}

/* S4 — 투어 */
.tour__table {
  width: 100%;
  margin-top: var(--spacing-block);
  border-collapse: collapse;
  border-top: 1px solid var(--color-line);
}

.tour__table th {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.tour__table td {
  padding: 1.375rem 1rem 1.375rem 0;
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}

.tour__city {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-title);
}

.tour__city-ko {
  margin-left: 0.5rem;
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
}

.tour__date .num {
  font-size: 1.125rem;
}

.tour__time {
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-strong);
}

@media (max-width: 63.999rem) {
  .tour__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tour__table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-line);
  }

  .tour__table td {
    display: block;
    padding: 0;
    border: 0;
  }

  .tour__table td:nth-child(2) {
    grid-column: 1;
  }

  .tour__table td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .tour__table td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

/* ── 14. 동작 줄이기 — 도는 것 0. 등장은 최종 상태로 ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .track__bars i,
  .mtrack__list {
    animation: none !important;
  }
}

/* 좁은 폰에서만 빼는 낱말(홈 eyebrow 의 "PULSAR" — 바로 위 로고가 같은 말을 한다) */
@media (max-width: 29.999rem) {
  .hide-sm {
    display: none;
  }
}