/* 서울부인 공식 웹사이트. 기준은 DESIGN.md */

:root {
  --ink: #0a0908;
  --coal: #12100e;
  --paper: #e4ddcb;
  --paper-dim: #aca493;
  --blood: #c8251c;
  --blood-hot: #ef3c25;
  --blood-deep: #a3190f; /* 붉은 버튼 hover: 흰 글자 대비 7.7:1 */
  --line: #e4ddcb3d;
  --line-soft: #e4ddcb1f;

  --font-display: "Nanum Myeongjo", "Noto Serif KR", "AppleMyungjo", "Batang", serif;
  --font-body: "Gowun Batang", "Noto Serif KR", "AppleMyungjo", "Batang", serif;

  --gutter: clamp(20px, 5vw, 88px);
  --section: clamp(88px, 11vw, 160px);
  --bar-h: 76px;
  --xfade: .7s;

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 8px); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(17px, .5vw + 14px, 19px);
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: #3a342c var(--ink);
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
time, .tnum { font-variant-numeric: tabular-nums; }

::selection { background: var(--blood); color: #fff; }
:focus-visible { outline: 2px solid var(--blood-hot); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nw { white-space: nowrap; }
.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 60;
  padding: 10px 16px; background: var(--paper); color: var(--ink);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 2.4vw + .9rem, 3.25rem);
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  font: 700 15px/1.2 var(--font-body); letter-spacing: .04em;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s;
}
.btn--solid { background: var(--blood); color: #fff; border-color: var(--blood); }
.btn--line { background: #0a090880; border-color: var(--paper); color: var(--paper); }
/* 터치 기기에서는 누른 뒤 hover가 남으므로 마우스가 있는 환경에서만 hover 색을 바꾼다 */
@media (hover: hover) {
  .btn--solid:hover { background: var(--blood-deep); border-color: var(--blood-deep); }
  .btn--line:hover { background: var(--paper); color: var(--ink); }
}
.btn--sm { min-height: 48px; padding: 0 18px; font-size: 14px; }
/* 복사 결과 표시: hover 상태와 겹쳐도 글자가 보이도록 배경을 고정한다 */
.btn--line.is-done, .btn--line.is-done:hover,
.btn--line.is-fail, .btn--line.is-fail:hover { background: transparent; color: var(--paper); border-color: var(--blood-hot); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: none; border: 1px solid var(--line); border-radius: 0;
  color: var(--paper); cursor: pointer;
  transition: border-color .16s, background-color .16s;
}
.iconbtn:hover { border-color: var(--paper); background: #e4ddcb14; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 6px;
  transition: text-decoration-color .16s, color .16s;
}
.textlink:hover { text-decoration-color: var(--blood-hot); }

/* ---------- 상단 바 ---------- */

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--bar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 메뉴가 화면 정중앙에 오도록 */
  align-items: center;
  gap: 28px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color .16s, border-color .16s;
}
/* 완전히 불투명하게: 반투명(95%)이면 아래 글자·버튼이 비쳐 보인다 (2026-10-01 대표님 지시) */
.bar.is-solid { background: var(--ink); border-bottom-color: var(--line); }
.bar__brand { justify-self: start; }
.bar__brand img { width: 104px; }

.bar__nav { display: flex; justify-content: center; gap: clamp(20px, 2.4vw, 44px); }
.bar__nav a,
.sheet nav a {
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .16s;
}
.bar__nav a:hover { border-bottom-color: var(--paper); }
/* 영문 메뉴가 한글보다 넓어, 좁은 PC 폭에서 오른쪽 문의 버튼이 두 줄로 꺾이지 않게 간격을 줄인다 */
@media (max-width: 1320px) { .bar__nav { gap: 20px; } }

.bar__tools { display: flex; align-items: center; gap: 18px; justify-self: end; }

.lang { display: flex; align-items: center; gap: 0; }
.lang__btn {
  appearance: none; background: none; border: 0; padding: 0 6px;
  min-width: 44px; min-height: 44px;
  font: 700 14px/1 var(--font-body); letter-spacing: .04em;
  color: var(--paper-dim); cursor: pointer;
  transition: color .16s;
}
.lang__btn[aria-pressed="true"] { color: var(--blood-hot); }
.lang__btn:hover { color: var(--paper); }
.lang__sep { color: var(--paper-dim); }

.bar__cta {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  text-decoration: none;
  padding: 0 16px;
  white-space: nowrap;
  background: var(--blood); color: #fff;
  transition: background-color .16s;
}
@media (hover: hover) { .bar__cta:hover { background: var(--blood-deep); } }

.bar__menu {
  display: none;
  appearance: none; background: none; border: 1px solid var(--line);
  width: 44px; height: 44px; color: var(--paper); cursor: pointer;
  align-items: center; justify-content: center;
}

.sheet {
  position: absolute; inset: var(--bar-h) 0 auto 0;
  display: grid;
  max-height: calc(100svh - var(--bar-h));
  overflow-y: auto;
  padding: 4px var(--gutter) 20px;
  background: #0a0908fa;
  border-bottom: 1px solid var(--line);
}
.sheet nav { display: grid; }
.sheet nav a { font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lang--sheet { padding-top: 14px; }
.lang--sheet .lang__btn { font-size: 16px; padding: 12px 10px 12px 0; }

/* ---------- ① 첫 화면 ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(700px, 100svh);
  display: grid;
  grid-template-columns: auto minmax(0, 34rem) minmax(200px, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(28px, 3.4vw, 56px);
  padding: calc(var(--bar-h) + clamp(20px, 3.5vh, 44px)) var(--gutter) clamp(40px, 7vh, 84px);
}

.stage {
  position: absolute; inset: 0; z-index: -1;
  container-type: size;
  background: var(--ink);
  overflow: hidden;
}
.stage__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 60%;
  filter: brightness(.6) saturate(.85) contrast(1.05);
}
.stage__layer {
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--xfade) ease;
  filter: brightness(.82) saturate(.92) contrast(1.04);
  pointer-events: none;
}
/* 들어오는 구간만 위에서 서서히 나타나고, 나가는 구간은 끝까지 아래에 깔려 있어 사진이 비치지 않는다 */
.stage__layer.is-top { z-index: 2; }
.stage__layer.is-on { opacity: 1; }
.stage__layer iframe {
  position: absolute; top: 50%; left: var(--video-x, 58%);
  /* 컨테이너 단위를 모르는 브라우저를 위한 값을 먼저 둔다 */
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%) scale(1.22);
  border: 0;
  pointer-events: none;
}
/* 층 순서: 사진(0) < 영상(1·2) < 전환 가림막(3) < 어둡게 누르는 그라데이션(4) */
.stage__curtain {
  position: absolute; inset: 0;
  z-index: 3;
  background: var(--ink);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.stage.is-curtain .stage__curtain { opacity: .9; }
.stage__shade {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, #0a0908f2 0%, #0a0908eb 30%, #0a0908d9 42%, #0a0908a6 52%, #0a090838 66%, #0a090800 80%),
    linear-gradient(0deg, #0a0908 0%, #0a090800 24%),
    linear-gradient(180deg, #0a0908d9 0%, #0a090800 17%);
}

.hero__mark {
  grid-column: 1; grid-row: 1 / span 2;
  align-self: center;
  line-height: 0;
}
.hero__mark img {
  height: clamp(460px, calc(100svh - var(--bar-h) - 150px), 880px);
  width: auto;
  animation: mark-in 1.1s cubic-bezier(.16, 1, .3, 1) .1s both;
}
@keyframes mark-in {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.hero__copy {
  position: relative;
  grid-column: 2; grid-row: 2;
  align-self: end;
  padding-bottom: 4px;
}
/* 화면 폭이 좁아 문구가 그라데이션 밖으로 나가도, 문구 바로 뒤는 항상 어둡게 받친다 */
.hero__copy::before {
  content: "";
  position: absolute;
  inset: -48px -72px -40px -56px;
  z-index: -1;
  background: radial-gradient(closest-side, #0a0908d9 0%, #0a0908b3 55%, #0a090800 100%);
  pointer-events: none;
}
.hero__en {
  font-size: 14px; font-weight: 700;
  letter-spacing: .28em;
  color: var(--paper);
}
.hero__line {
  margin-top: 22px;
  display: grid; gap: 6px;
}
.hero__pre {
  font-size: clamp(16px, .5vw + 13px, 19px);
  color: var(--paper-dim);
  line-height: 1.6;
}
.hero__main {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 1.3vw + .9rem, 2.15rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__main em { font-style: normal; color: var(--blood-hot); }
.hero__actions {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* 배경 영상 조작부는 첫 화면 격자의 오른쪽 칸에 둔다. 절대 위치를 쓰지 않으므로 어느 폭에서도 섭외 버튼과 겹치지 않는다 */
.stage-ctl {
  grid-column: 3; grid-row: 2;
  justify-self: end; align-self: end;
  /* 장면 이름은 버튼 위에 쌓는다. 이름 길이가 바뀌어도 버튼은 섭외 버튼과 같은 아래선에 머문다 */
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px;
  max-width: 420px;
  padding-bottom: 5px;
}
.stage-ctl__btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px;
  background: #0a0908b3; border: 1px solid var(--line); border-radius: 0;
  font: 700 13px/1 var(--font-body); letter-spacing: .03em;
  white-space: nowrap;
  color: var(--paper); cursor: pointer;
  transition: border-color .16s, background-color .16s;
}
.stage-ctl__btn:hover { border-color: var(--paper); }
.stage-ctl__btn .stage-ctl__pause { display: none; }
.stage-ctl__btn[data-state="playing"] .stage-ctl__pause { display: block; }
.stage-ctl__btn[data-state="playing"] .stage-ctl__play { display: none; }
.stage-ctl__now {
  font-size: 13px; color: var(--paper);
  line-height: 1.5;
  text-align: right;
  text-shadow: 0 1px 8px #0a0908;
}
.stage[data-bg="fallback"] ~ .stage-ctl .stage-ctl__now,
.stage[data-bg="idle"] ~ .stage-ctl .stage-ctl__now { color: var(--paper-dim); }

/* ---------- ② 바로가기와 연락처 ---------- */

.links {
  padding: clamp(28px, 3.6vw, 48px) var(--gutter);
  background: var(--coal);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid; gap: 24px;
}
.links__list { display: flex; flex-wrap: wrap; gap: 10px; }
.links__list li { display: flex; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  flex: 1;
  min-height: 50px; padding: 0 18px;
  white-space: nowrap;
  border: 1px solid var(--line);
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
  transition: border-color .16s, background-color .16s;
}
.chip svg { color: var(--blood-hot); flex: none; }
.chip:hover { border-color: var(--paper); background: #e4ddcb0f; }

.booking-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.booking-strip__who { display: flex; align-items: baseline; gap: 12px; }
.booking-strip__label { font-size: 14px; font-weight: 700; color: var(--paper-dim); letter-spacing: .04em; }
.booking-strip__who strong { font-size: 20px; }
.booking-strip__item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.booking-strip__value {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: clamp(18px, .6vw + 15px, 21px); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px;
  font-variant-numeric: tabular-nums;
}
.booking-strip__value svg { color: var(--blood-hot); }
.booking-strip__value:hover { text-decoration-color: var(--blood-hot); }
.mini {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px;
  background: none; border: 1px solid var(--line); border-radius: 0;
  font: 700 13px/1 var(--font-body); color: var(--paper-dim);
  cursor: pointer;
  transition: color .16s, border-color .16s;
}
@media (hover: hover) { .mini:hover { color: var(--paper); border-color: var(--paper); } }
.mini.is-done, .mini.is-fail { border-color: var(--blood-hot); color: var(--paper); }

/* ---------- 공통 구획 ---------- */

.section { padding: var(--section) var(--gutter); }
.section + .section { border-top: 1px solid var(--line-soft); }
.section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section__note { font-size: 15px; color: var(--paper-dim); }

/* ---------- ③ 밴드 소개 ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 112px);
  row-gap: clamp(64px, 8vw, 112px);
}
.about__lead {
  margin-top: 28px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 1.2vw + .85rem, 2rem);
  line-height: 1.5;
}
.about__text { padding-top: 10px; max-width: 40em; }
.about__text p + p { margin-top: 1.1em; }
.about__text p { color: var(--paper-dim); }
.about__text p:first-child { color: var(--paper); font-size: 1.06em; }

.traits { grid-column: 1 / -1; }
.traits__title,
.members__title { font-size: clamp(1.35rem, .9vw + 1rem, 1.75rem); margin-bottom: 28px; }
.traits__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.traits__list li { border-top: 1px solid var(--line); padding-top: 22px; }
.traits__list h4 { font-size: 1.45rem; margin-bottom: 10px; }
.traits__list p { color: var(--paper-dim); font-size: .95em; }

.about__group { grid-column: 1 / -1; }
/* 단체 사진은 원본 비율(3:2)을 지켜 멤버 얼굴을 자르지 않는다 */
.about__group img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover; object-position: 50% 40%;
}
.members-wrap { grid-column: 1 / -1; }
.members {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
}
.member img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: brightness(.94) saturate(.92); }
.member__name {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.35rem; line-height: 1.3;
}
.member__part { margin-top: 4px; font-size: 15px; color: var(--paper); }

/* ---------- ④ 영상 ---------- */

.vthumb {
  position: relative; display: block;
  width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: 0;
  background: var(--coal);
  cursor: pointer; overflow: hidden;
}
.vthumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.8);
  transition: filter .16s;
}
@media (hover: hover) { .vthumb:hover img { filter: brightness(.95); } }
.vthumb__play {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--blood); color: #fff;
  transition: background-color .16s;
}
.vthumb:hover .vthumb__play { background: var(--blood-deep); }
.vthumb--feature .vthumb__play { width: 68px; height: 68px; left: 24px; bottom: 24px; }
.vframe { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.vfeature {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.vfeature__meta h3 { font-size: clamp(1.6rem, 1.4vw + 1rem, 2.4rem); margin: 6px 0 8px; }
.vmeta__kind { font-size: 14px; font-weight: 700; color: var(--blood-hot); letter-spacing: .03em; }
.vmeta__where { color: var(--paper-dim); font-size: 16px; font-variant-numeric: tabular-nums; }
.vfeature__desc { margin-top: 18px; }
.vfeature__lineup {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px; color: var(--paper-dim); line-height: 1.7;
}
.vfeature__actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

.vgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 32px);
}
.vgrid .vmeta__kind { margin-top: 14px; color: var(--paper-dim); font-size: 13px; }
.vgrid h3 { font-size: 1.4rem; margin-top: 2px; }

/* ---------- ⑤ 디스코그라피 ---------- */

.releases { border-top: 1px solid var(--line); }
.release {
  display: grid;
  grid-template-columns: clamp(140px, 17vw, 240px) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 56px);
  padding: clamp(28px, 3.4vw, 48px) 0;
  border-bottom: 1px solid var(--line);
}
.release__cover { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--coal); }
.release__body { max-width: 48em; }
.release__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 700; color: var(--paper-dim); letter-spacing: .03em; }
.release__meta time { color: var(--paper); }
.release h3 { font-size: clamp(1.5rem, 1.2vw + 1rem, 2.2rem); margin: 6px 0 10px; }
.release__flag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border: 1px solid var(--blood-hot);
  font-size: 14px; font-weight: 700; color: var(--blood-hot);
}
.release__about { color: var(--paper-dim); }
.release__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.release__links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 700; letter-spacing: .03em;
  text-decoration: none;
  transition: border-color .16s, background-color .16s;
}
.release__links a:hover { border-color: var(--paper); background: #e4ddcb0f; }

.more { margin-top: 18px; }
.more summary {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: ""; width: 10px; height: 10px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .16s;
}
.more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.more summary:hover { border-bottom-color: var(--paper); }
.more__body { padding-top: 20px; display: grid; gap: 20px; }
.more__note { font-size: 14px; color: var(--paper-dim); }

.tracks { list-style: decimal-leading-zero; padding-left: 2.4em; color: var(--paper); font-variant-numeric: tabular-nums; }
.tracks li { padding: 2px 0; }
.tracks li::marker { color: var(--paper-dim); }
.tracks--cols { columns: 2; column-gap: 40px; }
.tag { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--blood-hot); letter-spacing: .04em; }
.credits { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.credits > div { display: grid; grid-template-columns: minmax(10em, 16em) 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.credits dt { color: var(--paper-dim); }

/* ---------- ⑥ 주요 활동 ---------- */

.hl { border-top: 1px solid var(--line); }
.hl li {
  display: grid;
  grid-template-columns: minmax(7.5em, 11em) minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.hl time { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--blood-hot); }
.hl p { font-size: clamp(1.05rem, .5vw + .9rem, 1.3rem); line-height: 1.6; }

.more--history { margin-top: 32px; }
.timeline li {
  display: grid;
  grid-template-columns: minmax(7.5em, 11em) minmax(0, 1fr);
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
}
.timeline time { color: var(--paper-dim); }

/* ---------- ⑦ 갤러리 ---------- */

.gallery__group { font-size: 1.45rem; margin: 0 0 20px; }
.shots + .gallery__group { margin-top: clamp(48px, 6vw, 80px); }
.shots { columns: 3 280px; column-gap: 12px; }
.shots li { break-inside: avoid; margin-bottom: 12px; }
.shots a { display: block; position: relative; overflow: hidden; background: var(--coal); }
.shots img { width: 100%; filter: brightness(.86) saturate(.92); transition: filter .2s; }
@media (hover: hover) { .shots a:hover img { filter: brightness(1) saturate(1); } }
/* 프로필 3장: 세로 사진 한 장 옆에 가로 사진 두 장을 쌓아 빈 칸 없이 맞춘다 (높이 비율 2:3 ↔ 3:2 두 장) */
.shots--profile {
  columns: auto;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 9fr);
  grid-template-rows: auto auto;
  gap: 12px;
}
.shots--profile li { margin: 0; }
.shots--profile li:first-child { grid-row: 1 / span 2; }
.shots--profile a { height: 100%; }
.shots--profile img { height: 100%; object-fit: cover; }

/* ---------- ⑧ 팬 자료 ---------- */

.score {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line);
  background: var(--coal);
}
.score h3 { font-size: clamp(1.5rem, 1vw + 1.1rem, 2.1rem); }
.score__text > p { margin-top: 12px; color: var(--paper-dim); }
.score__text > .score__parts { margin-top: 20px; font-weight: 700; color: var(--paper); }
.score__text > .score__file { margin-top: 4px; margin-bottom: 24px; font-size: 14px; color: var(--paper-dim); }
.score__pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.score__pages img { width: 100%; aspect-ratio: 283 / 400; object-fit: cover; background: #fff; opacity: .92; }

.fanlinks {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(16px, 2vw, 32px);
}
.fanlinks a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "icon icon" "name out" "desc desc";
  gap: 6px 10px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .16s;
}
@media (hover: hover) { .fanlinks a:hover { border-top-color: var(--blood-hot); } }
.fanlinks a > svg:first-child { grid-area: icon; color: var(--blood-hot); margin-bottom: 6px; }
.fanlinks__name { grid-area: name; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }
.fanlinks__out { grid-area: out; align-self: center; color: var(--paper-dim); }
.fanlinks__desc { grid-area: desc; font-size: 14px; color: var(--paper-dim); line-height: 1.6; }

/* ---------- ⑨ 문의 ---------- */

.contact {
  background: var(--coal);
  border-top: 1px solid var(--blood) !important;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 112px);
  row-gap: 40px;
}
.contact__lead { margin-top: 20px; color: var(--paper-dim); max-width: 26em; }
.contact__who { margin-top: 28px; display: flex; align-items: baseline; gap: 12px; font-size: 16px; color: var(--paper-dim); font-weight: 700; }
.contact__who strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--paper); }

.contact__list { border-top: 1px solid var(--line); }
.contact__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-areas: "label actions" "value actions";
  gap: 6px 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.contact__label { grid-area: label; font-size: 15px; font-weight: 700; color: var(--paper-dim); letter-spacing: .04em; }
.contact__value {
  grid-area: value;
  font-size: clamp(1.6rem, 1.6vw + 1rem, 2.4rem); font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact__value:hover { color: #fff; }
.contact__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }

/* ---------- 하단 ---------- */

.foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px 40px;
  padding: 48px var(--gutter);
  border-top: 1px solid var(--line);
}
.foot__logo { width: 150px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; font-size: 14px; font-weight: 700; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot__links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.foot__copy { font-size: 13px; color: var(--paper-dim); }

/* ---------- 대화상자 ---------- */

dialog { color: var(--paper); }
dialog::backdrop { background: #0a0908eb; }

.vdialog {
  width: min(1120px, 94vw);
  max-width: none;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ink);
}
.vdialog__inner { padding: 16px 16px 20px; display: grid; gap: 14px; }
.vdialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vdialog__title { font-weight: 700; font-size: 16px; }
.vdialog__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vdialog__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lb {
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: #0a0908f7;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom; /* 가로 밀기는 사진 넘기기에 쓴다 */
}
.lb[open] { display: grid; place-items: center; }
.lb__fig { box-sizing: border-box; width: 100%; display: grid; justify-items: center; gap: 12px; padding: 64px 72px 20px; }
.lb__img { max-width: min(100%, 1600px); max-height: calc(100svh - 150px); width: auto; height: auto; object-fit: contain; }
.lb__cap { display: flex; gap: 16px; font-size: 14px; color: var(--paper-dim); }
.lb__count { font-variant-numeric: tabular-nums; }
.lb__close { position: absolute; top: 16px; right: 16px; }
.lb__prev, .lb__next { position: absolute; top: 50%; transform: translateY(-50%); background: #0a0908b3; }
.lb__prev { left: 16px; }
.lb__next { right: 16px; }

/* ---------- 넓은 태블릿 이하 ---------- */

@media (max-width: 1180px) {
  .bar { grid-template-columns: auto 1fr; }
  .bar__nav { display: none; }
  .bar__menu { display: inline-flex; }
  .bar__tools { justify-self: end; gap: 12px; }
  .bar__tools .lang { display: none; }

  .about, .contact { grid-template-columns: 1fr; }
  .traits__list { grid-template-columns: 1fr; gap: 0; }
  .traits__list li { padding: 22px 0; }
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vfeature { grid-template-columns: 1fr; }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score { grid-template-columns: 1fr; }
  .fanlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) and (min-width: 761px) {
  .hero { grid-template-columns: auto minmax(0, 1fr); }
  .hero__copy { grid-column: 2; }
  .stage-ctl { grid-column: 1 / -1; grid-row: 3; justify-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 28px; max-width: none; }
  .stage-ctl__now { text-align: left; }
}

/* ---------- 모바일 ---------- */

@media (max-width: 760px) {
  :root { --bar-h: 64px; --panel: clamp(320px, 46svh, 400px); }

  .bar__brand img { width: 84px; }
  .bar__cta { padding: 0 12px; font-size: 13px; }

  /* 로고 열과 영상 창을 나란히: 로고가 영상 속 얼굴을 가리지 않는다 */
  .hero {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    padding: calc(var(--bar-h) + 14px) var(--gutter) 40px;
  }
  .stage {
    position: relative; inset: auto; z-index: 0;
    grid-column: 2; grid-row: 1;
    height: var(--panel);
  }
  .stage__photo img { object-position: 50% 50%; }
  /* 좁은 창에서는 구간마다 지정한 구도(--fx·--fy 지점을 가운데로, --fz 배율)로 맞춘다 */
  .stage__layer iframe {
    left: 50%;
    width: max(100%, calc(var(--panel) * 1.7778));
    height: 100%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    transform: translate(calc(-50% + (50 - var(--fx, 50)) * 1%), calc(-50% + (50 - var(--fy, 50)) * 1%)) scale(var(--fz, 1.08));
  }
  .stage__shade { background: linear-gradient(0deg, #0a090866 0%, #0a090800 30%); }
  .hero__mark { grid-column: 1; grid-row: 1; align-self: start; }
  .hero__mark img { height: var(--panel); }

  /* 배경 영상 버튼은 영상 창 오른쪽 아래 모서리에 작게 둔다. 문구와 섭외 버튼이 첫 화면 안에 들어온다 */
  .stage-ctl {
    grid-column: 2; grid-row: 1;
    align-self: end; justify-self: end;
    z-index: 2;
    margin: 0 8px 8px 0;
    padding: 0;
    max-width: none;
  }
  .stage-ctl__btn { width: 44px; padding: 0; justify-content: center; }
  .stage-ctl__btn [data-bg-label] {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .stage-ctl__now { display: none; }
  .hero__copy::before { display: none; } /* 모바일은 문구가 영상 아래 검정 바탕에 있다 */

  .hero__copy { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; }
  .hero__en { font-size: 13px; letter-spacing: .22em; }
  .hero__actions { display: grid; grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }

  .links__list li { flex: 1 1 150px; }
  .chip { width: 100%; justify-content: flex-start; }
  .booking-strip { gap: 14px; }
  .booking-strip__item { width: 100%; justify-content: space-between; }

  .vgrid { grid-template-columns: 1fr; }
  .release { grid-template-columns: 1fr; gap: 18px; }
  .release__cover { width: 140px; }
  .release__links a { padding: 0 14px; }
  .tracks--cols { columns: 1; }
  .credits > div { grid-template-columns: 1fr; gap: 0; }

  .hl li, .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .shots { columns: 2; column-gap: 8px; }
  .shots li { margin-bottom: 8px; }
  .shots--profile { columns: auto; gap: 8px; }
  .shots--profile li { margin: 0; }
  .score { padding: 24px 20px; }
  .fanlinks { grid-template-columns: 1fr; }

  .contact__list li { grid-template-columns: 1fr; grid-template-areas: "label" "value" "actions"; }
  .contact__actions { justify-content: flex-start; margin-top: 10px; }
  .contact__actions .btn { flex: 1 1 140px; }

  .foot { grid-template-columns: 1fr; justify-items: start; }
  .foot__links { justify-content: flex-start; }

  .lb__fig { padding: 64px 12px 80px; }
  .lb__img { max-width: 100%; max-height: calc(100svh - 170px); }
  .lb__prev, .lb__next { top: auto; bottom: 16px; transform: none; }
  .lb__prev { left: 12px; }
  .lb__next { right: 12px; }
}

@media (max-width: 380px) {
  .bar__cta { font-size: 12px; padding: 0 10px; }
  .bar__brand img { width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__mark img { animation: none; }
  .stage__layer { transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* =========================================================
   A안 최종 (2026-09-30 확정)
   아래 규칙은 비교 시안(site/variants/variants.css) 중 공통·A 규칙이다.
   A안 규칙은 body.v-a 에 묶여 있어 위 기본 규칙보다 우선한다.
   ========================================================= */
/* =========================================================
   공통 1. 첫 화면 묶음: 로고 → SEOUL BUSAN INCHEON → 소개 문구 → 버튼
   로고 높이는 기준본(약 674px @1440×900)의 약 57%에서 시작한다.
   ========================================================= */
:root { --logo-h: clamp(240px, 43svh, 400px); }

.hero__group {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 34rem;
}
.hero__mark { position: relative; margin: 0; line-height: 0; align-self: center; }
.hero__mark img { height: var(--logo-h); width: auto; }
/* 기준본의 격자용 정렬(align-self:end)을 풀어 글·버튼이 로고와 같은 축에 오게 한다 */
.hero__copy { position: relative; align-self: stretch; margin-top: clamp(18px, 2.6vh, 30px); padding: 0; }
.hero__copy::before { display: none; }
.hero__line { justify-items: center; margin-top: 16px; }
.hero__actions { justify-content: center; margin-top: 26px; }
/* 영상 위에서도 묶음이 읽히도록 뒤를 둥글게 받친다 */
.hero__group::before {
  content: "";
  position: absolute; inset: -10% -34%;
  z-index: -1;
  background: radial-gradient(closest-side, #0a0908cc 0%, #0a090899 55%, #0a090800 100%);
  pointer-events: none;
}
.contact__lead { text-wrap: balance; }

/* =========================================================
   공통 2. 핵심 성과: 붉은 큰 숫자 · 미색 설명 · 얇은 구분선
   ========================================================= */
.stats {
  padding: clamp(48px, 6vw, 88px) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.stats__title {
  font-size: clamp(1.35rem, .9vw + 1rem, 1.75rem);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 4px clamp(16px, 2.2vw, 36px); border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 3.4vw + 1rem, 4.4rem);
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--blood-hot);
  font-variant-numeric: tabular-nums;
}
.stat__num abbr { text-decoration: none; cursor: help; }
.stat__desc { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--paper); max-width: 19em; text-wrap: pretty; }

/* 공통 3. 초반 연락처를 더 크게 */
.booking-strip__who strong { font-size: 22px; }
.booking-strip__value { font-size: clamp(20px, .9vw + 14px, 26px); }

@media (max-width: 760px) {
  :root { --logo-h: clamp(120px, 18svh, 160px); }
  .hero__group::before { display: none; }
  .hero__actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero__group { max-width: none; width: 100%; }
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat, .v-a .stat, .v-a .stat:first-child { padding: 18px 0 18px 16px; }
  .stat:nth-child(odd), .v-a .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .stat__num { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .stat__desc { font-size: 14px; }
}
/* 키가 작은 휴대폰: 로고·간격을 줄여 문구와 버튼이 첫 화면에 들어오게 한다 */
@media (max-width: 760px) and (max-height: 720px) {
  :root { --logo-h: clamp(88px, 14svh, 116px); }
  .hero__copy { margin-top: 12px; }
  .hero__line { margin-top: 10px; }
  .hero__actions { margin-top: 16px; }
}

/* =========================================================
   A안 첫 화면과 아래 영역
   ========================================================= */
.v-a .hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  justify-items: center;
  min-height: max(720px, 100svh);
  padding: calc(var(--bar-h) + clamp(16px, 2.5vh, 32px)) var(--gutter) clamp(20px, 3vh, 36px);
}
.v-a .hero__group { grid-column: 1; grid-row: 1; align-self: center; }
.v-a .stage__layer iframe { left: 50%; }
.v-a .stage__shade {
  background:
    radial-gradient(ellipse 46% 62% at 50% 50%, #0a0908a6 0%, #0a090800 100%),
    linear-gradient(180deg, #0a0908cc 0%, #0a090800 18%),
    linear-gradient(0deg, #0a0908 0%, #0a090800 26%);
}
.v-a .stage-ctl {
  grid-column: 1; grid-row: 2; justify-self: end; align-self: end;
  flex-direction: row-reverse; align-items: center; gap: 12px;
  max-width: none; margin: 0; padding: 0;
}
.v-a .stage-ctl__now { text-align: right; }

/* A 아래 영역: 가운데 축, 넓은 여백, 가운데 정렬된 카드와 정사각 사진 */
.v-a .links { justify-items: center; text-align: center; }
.v-a .links__list { justify-content: center; }
.v-a .booking-strip { justify-content: center; }
.v-a .stats__title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.v-a .stats { padding-block: clamp(64px, 7vw, 104px); }
.v-a .stat { text-align: center; }
.v-a .stat:first-child { padding-left: clamp(16px, 2.2vw, 36px); }
.v-a .stat__desc { margin-inline: auto; }
.v-a .section { --section: clamp(96px, 11vw, 168px); }
.v-a .section__head { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.v-a .about { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: clamp(40px, 5vw, 72px); }
.v-a .about__head { text-align: center; }
.v-a .about__text { max-width: 38em; }
.v-a .about__group, .v-a .members-wrap { width: 100%; }
.v-a .members__title { text-align: center; }
.v-a .vfeature { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.v-a .vfeature__meta { max-width: 40em; }
.v-a .vfeature__actions { justify-content: center; }
/* 음반: 3개씩, 마지막 줄은 가운데 정렬 */
.v-a .releases {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(40px, 4vw, 64px) clamp(20px, 2.4vw, 40px);
  border-top: 0;
}
.v-a .release {
  flex: 0 1 calc((100% - 2 * clamp(20px, 2.4vw, 40px)) / 3);
  grid-template-columns: 1fr; gap: 20px; padding: 0; border: 0; align-content: start;
}
.v-a .release__cover { width: 100%; }
.v-a .history .hl, .v-a .history .more--history { max-width: 900px; margin-inline: auto; }
/* 갤러리: 정사각 4열, 마지막 줄은 가운데 정렬 */
.v-a .shots { columns: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.v-a .shots li { margin: 0; flex: 0 1 calc((100% - 30px) / 4); }
.v-a .shots a { height: 100%; }
.v-a .shots img { aspect-ratio: 1; height: 100%; object-fit: cover; }
.v-a .shots--profile li { flex-basis: calc((100% - 20px) / 3); }
.v-a .shots--profile img { aspect-ratio: 4 / 5; }
.v-a .gallery__group { text-align: center; }
.v-a .score { text-align: center; justify-items: center; }
.v-a .contact { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.v-a .contact__who { justify-content: center; }
.v-a .contact__list { width: min(100%, 820px); text-align: left; }
/* 구획 제목 규칙: 한국어·영어 화면 모두 같은 영문 대문자 제목을 쓴다(밴드 소개만 '서울부인').
   한글 제목용 좁은 자간(-0.03em)은 대문자를 붙여 보이게 하므로 영문 제목은 자간을 조금 연다. */
h2[lang="en"] { letter-spacing: .04em; }

/* 첫 화면 영상 시작: 영상을 불러오는 동안에는 공연 사진을 띄우지 않고, 영상이 실제로 움직이면 바로 드러낸다.
   사진은 자동 재생이 막히거나 실패했을 때, 사용자가 멈췄을 때, 동작 줄이기 설정일 때만 보인다. */
.stage__photo img { transition: opacity .5s ease; }
.bg-autostart .stage[data-bg="idle"] .stage__photo img,
.bg-autostart .stage[data-bg="loading"] .stage__photo img { opacity: 0; }
/* 첫 영상이 서서히 드러나는 동안(0.7초) 사진이 비치지 않게, 영상이 다 덮은 뒤에 사진을 아래에 깔아 둔다(멈춤·끊김 대비) */
.stage[data-bg="playing"] .stage__photo img { transition: opacity 0s linear calc(var(--xfade) + 50ms); }
/* 자동 재생이 막히거나 실패하면 재생 버튼을 분명하게 보여 준다 */
.stage[data-bg="fallback"] ~ .stage-ctl .stage-ctl__btn { background: var(--blood); border-color: var(--blood); color: #fff; }
@media (hover: hover) {
  .stage[data-bg="fallback"] ~ .stage-ctl .stage-ctl__btn:hover { background: var(--blood-deep); border-color: var(--blood-deep); }
}
@media (max-width: 760px) {
  .stage[data-bg="fallback"] ~ .stage-ctl .stage-ctl__btn { width: auto; padding: 0 16px; }
  .stage[data-bg="fallback"] ~ .stage-ctl .stage-ctl__btn [data-bg-label] { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* =========================================================
   넓은 태블릿 (761–1180px)
   ========================================================= */
@media (max-width: 1180px) and (min-width: 761px) {
  .v-a .release { flex-basis: calc((100% - clamp(20px, 2.4vw, 40px)) / 2); }
  .v-a .shots li { flex-basis: calc((100% - 20px) / 3); }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .v-a .stage-ctl { margin-top: 0; }
}

/* =========================================================
   모바일 (≤760px): PC를 줄이지 않고 따로 짠다
   ========================================================= */
@media (max-width: 760px) {
  /* A: 핵심 성과는 가운데 정렬이므로 칸 안 좌우 여백을 같게 둔다. 한쪽 여백만 있으면 숫자가 칸마다 다르게 밀린다 */
  .v-a .stat, .v-a .stat:first-child, .v-a .stat:nth-child(odd) { padding: 18px 12px; }
  /* A: 화면 전체 영상, 묶음은 아래 가운데. 영상은 조금 올려 인물이 위쪽 빈 곳에 오게 한다 */
  .v-a .hero {
    display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr;
    min-height: 100svh;
    padding: calc(var(--bar-h) + 12px) var(--gutter) 28px;
  }
  /* 격자 칸 지정을 풀어야 영상이 첫 화면 전체(여백 포함)를 기준으로 깔린다 */
  .v-a .stage { position: absolute; inset: 0; height: auto; z-index: -1; grid-column: auto; grid-row: auto; }
  .v-a .stage__layer iframe {
    transform: translate(calc(-50% + (50 - var(--fx, 50)) * 1%), calc(-50% + clamp(-14%, (50 - var(--fy, 50)) * 1% - 10%, 14%))) scale(1.3);
  }
  .v-a .stage__shade {
    background:
      linear-gradient(0deg, #0a0908 0%, #0a0908f0 36%, #0a0908a6 52%, #0a090800 68%),
      linear-gradient(180deg, #0a0908b3 0%, #0a090800 14%);
  }
  .v-a .hero__group { grid-row: 1; align-self: end; }
  /* 붉은 로고 뒤를 살짝 받쳐 붉은 장면에서도 획이 보이게 */
  .v-a .hero__mark::before {
    content: ""; position: absolute; inset: -14% -130%; z-index: -1;
    background: radial-gradient(closest-side, #0a0908d9 0%, #0a090800 100%);
  }
  .v-a .stage-ctl {
    grid-column: 1; grid-row: 1; align-self: start; justify-self: end;
    flex-direction: row; margin: 0;
  }
  .v-a .release { flex-basis: 100%; }
  .v-a .release__cover { width: 64%; }
  .v-a .shots li { flex-basis: calc((100% - 10px) / 2); }
  .v-a .shots--profile li { flex-basis: calc((100% - 10px) / 2); }
  .v-a .shots--profile li:first-child { flex-basis: 100%; }
  .v-a .shots--profile li:first-child img { aspect-ratio: 4 / 3; }
}