/* ==========================================================================
   디자인 토큰 — 시안 확정 전이라 전부 임시 값
   ========================================================================== */
:root {
  --color-bg: #ffffff; /* TBD */
  --color-surface: #f5f5f5; /* TBD */
  --color-surface-soft: #f8f8f8; /* TBD — 게시판 본문 상자. surface보다 살짝 연하게 */
  --color-placeholder: #fbfbfb; /* TBD — 사진·썸네일 빈 상태 바탕. noimage.webp는 바탕이 투명한 로고라 이 색 위에 얹힌다 */
  --color-border: #dddddd; /* TBD */
  --color-text: #111111; /* TBD */
  --color-text-muted: #555555; /* TBD */
  --color-accent: #111111; /* TBD */
  --color-on-media: #ffffff; /* TBD — 이미지 위 글자 */
  --color-scrim: rgb(0 0 0 / 0.6); /* TBD — 이미지 위 글자 대비용 그라데이션 */
  --color-dim: rgb(0 0 0 / 0.05); /* 썸네일 위에 까는 아주 옅은 검정 — 흰 바탕 사진도 테두리가 보이게 */

  --font-base: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* TBD */

  --fs-xs: 0.75rem; /* 12px — 읽을 수 있는 최소 크기. 휴대폰 라인업 아티스트명 */
  --fs-sm: 0.875rem; /* TBD */
  --fs-base: 1rem; /* TBD */
  --fs-md: 1.125rem; /* TBD — 소제목 */
  --fs-lg: 1.25rem; /* TBD */
  --fs-xl: clamp(1.5rem, 4vw, 2rem); /* TBD */
  --fs-hero: clamp(2rem, 6vw, 4rem); /* TBD */

  --space-2xs: 0.25rem; /* TBD */
  --space-xs: 0.5rem; /* TBD */
  --space-sm: 1rem; /* TBD */
  --space-md: 2rem; /* TBD */
  --space-lg: 4rem; /* TBD */

  --radius-sm: 4px; /* TBD */
  --radius-md: 8px; /* TBD */
  --radius-lg: 16px; /* TBD */
  --radius-pill: 999px;
  --radius-app-icon: 22.5%; /* 스마트폰 앱 아이콘과 같은 곡률(크기에 비례) */

  --z-section-tabs: 5; /* 모바일 섹션 탭(상단에 붙었을 때). 헤더보다 아래 */
  --z-header: 10;
  --z-app-banner: 20;
  --z-skip-link: 100;

  --container: 1600px; /* TBD — 2026-10-10 1200px에서 넓힘. 흔한 노트북 폭(1536px)을 꽉 채우고 1920px 모니터에선 양옆에 여유를 둔다 */
}

/* ==========================================================================
   기본
   ========================================================================== */
/* 메뉴 앵커로 이동할 때 고정 헤더(모바일은 헤더 밑에 붙은 섹션 탭 줄까지)에 섹션 첫머리가 가리지 않게 한다.
   값은 JS가 넣는다 — --app-banner-top: 휴대폰 상단 앱 배너, --header-height: 고정 헤더, --section-tabs-height: 섹션 탭 줄(탭을 쓸 때만).
   JS가 없을 때는 헤더 높이 대신 5rem(PC 헤더 높이)을 쓴다 */
html {
  scroll-padding-top: calc(var(--app-banner-top, 0px) + var(--header-height, calc(var(--space-lg) + var(--space-sm))) + var(--section-tabs-height, 0px));
}

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

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.6;
  /* 한글이 글자 중간에서 끊기지 않고 띄어쓰기(쉼표 뒤 공백 포함)에서 줄바꿈되게 한다.
     공백 없이 긴 문자열(URL·이메일)은 넘치지 않도록 그 안에서 끊는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: inherit;
}

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

/* ==========================================================================
   유틸리티
   ========================================================================== */
.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: var(--z-skip-link);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-bg);
  background: var(--color-text);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

/* ==========================================================================
   헤더
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-sm);
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
}

/* 로고 높이만 정하고 폭은 비율대로 — 모바일은 2.5rem의 80% */
.site-header__logo-img {
  width: auto;
  height: 2rem;
}

/* 언어 선택 — 알약 모양 버튼(언어 코드 + 화살표) + 같은 폭의 흰 드롭다운
   크기는 기본 글자·간격 토큰의 80%(× 0.8)로 줄여 쓴다 */
.lang-switch {
  position: relative;
  margin-left: auto;
  font-size: calc(var(--fs-base) * 0.8);
}

.lang-switch__toggle {
  display: flex;
  align-items: center;
  gap: calc(var(--space-xs) * 0.8);
  min-width: 5.2rem;
  padding: calc(var(--space-xs) * 0.8) calc(var(--space-sm) * 0.8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: var(--color-bg);
  cursor: pointer;
  list-style: none;
}

/* Safari는 list-style로 기본 삼각형이 사라지지 않는다 */
.lang-switch__toggle::-webkit-details-marker {
  display: none;
}

.lang-switch__globe {
  flex-shrink: 0;
}

/* 지구본·언어 코드는 왼쪽에 붙이고 화살표만 오른쪽 끝으로 민다 */
.lang-switch__chevron {
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.15s ease-out;
}

.lang-switch[open] .lang-switch__chevron {
  transform: rotate(180deg);
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + var(--space-xs) * 0.8);
  right: 0;
  /* 버튼과 같은 폭이 기본이고, 언어 이름이 길면 왼쪽으로 넓어진다 */
  min-width: 100%;
  white-space: nowrap;
  padding: calc(var(--space-sm) * 0.8) calc(var(--space-xs) * 0.8);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) * 0.8);
  color: var(--color-text);
  background: var(--color-bg);
}

.lang-switch[open] .lang-switch__menu {
  animation: lang-switch-in 0.15s ease-out;
}

@keyframes lang-switch-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-2xs) * -1));
  }
}

/* 언어 버튼 — 회차 선택(.episode-picker__option)처럼 버튼 기본 테두리·배경을 지운다 */
.lang-switch__link {
  display: block;
  width: 100%;
  padding: calc(var(--space-xs) * 0.8);
  border: 0;
  border-radius: calc(var(--radius-md) * 0.8);
  text-align: center;
  color: inherit;
  background: none;
}

/* 색만으로 구분하지 않도록 굵기로 현재 언어를 표시한다 */
.lang-switch__link.is-active {
  font-weight: 700;
}

/* 주 메뉴 — 모바일·태블릿에서는 숨기고 1024px 이상에서 가로로 보인다 */
.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  gap: var(--space-md);
}

.site-nav__link {
  display: block;
  padding-block: var(--space-xs);
  text-decoration: none;
}

/* 메인: 헤더를 히어로 이미지 위에 겹치고 화면 상단에 고정한다.
   스크롤하면 JS가 is-scrolled를 붙여 흰 배경으로 바꾼다 */
.site-header--overlay {
  position: fixed;
  top: var(--app-banner-top, 0px);
  right: 0;
  left: 0;
  z-index: var(--z-header);
  border-bottom: 0;
  color: var(--color-on-media);
  background-color: transparent;
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

/* 이미지 위 글자 대비용 그라데이션 */
.site-header--overlay::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: calc(var(--space-lg) * 2);
  background: linear-gradient(to bottom, var(--color-scrim), transparent);
  pointer-events: none;
  transition: opacity 0.2s;
}

.site-header--overlay.is-scrolled {
  color: var(--color-text);
  background-color: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-border);
}

.site-header--overlay.is-scrolled::before {
  opacity: 0;
}

.site-header--overlay :focus-visible {
  outline-color: currentColor;
}

/* ==========================================================================
   섹션 공통
   ========================================================================== */
.section {
  padding-block: var(--space-md);
}

/* 섹션 사이 간격 = 위 섹션 아래 여백 + 아래 섹션 위 여백(2배).
   마지막에 보이는 섹션(모바일은 탭으로 고른 섹션)도 푸터까지 같은 간격이 되도록 본문 끝에 한 번 더 더한다 */
.site-main {
  padding-bottom: var(--space-md);
}

/* 모바일 섹션 탭 — 가로로 넘겨 볼 수 있는 탭 줄, 고른 탭에 밑줄.
   스크롤해 탭 줄이 헤더 밑에 닿으면 그 자리(헤더 바로 아래)에 붙어 따라오고, 다시 위로 올리면 제자리로 돌아간다(sticky).
   --header-height: 고정 헤더 높이(JS가 넣는다), --app-banner-top: 휴대폰 상단 앱 배너 높이 */
.section-tabs {
  position: sticky;
  top: calc(var(--app-banner-top, 0px) + var(--header-height, 0px));
  z-index: var(--z-section-tabs);
  display: flex;
  gap: var(--space-sm);
  margin-inline: auto;
  max-width: var(--container);
  padding: 0 var(--space-sm);
  /* 가로로만 넘긴다. overflow-x만 주면 세로도 스크롤 가능해져 탭 줄이 위아래로 밀리므로 막는다 */
  overflow-x: auto;
  overflow-y: hidden;
  /* 바닥 선은 border 대신 안쪽 그림자로 그린다 — 고른 탭 밑줄이 이 선 위에 겹쳐도 넘치지 않는다 */
  box-shadow: inset 0 -1px 0 var(--color-border);
  /* 상단에 붙었을 때 아래 내용이 비치지 않게 */
  background: var(--color-bg);
  scrollbar-width: none;
}

.section-tabs::-webkit-scrollbar {
  display: none;
}

.section-tabs[hidden] {
  display: none;
}

.section-tabs__tab {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-2xs);
  border: 0;
  /* 고른 탭 밑줄 자리를 미리 비워 두어 탭을 바꿔도 글자가 움직이지 않게 한다 */
  border-bottom: 2px solid transparent;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  white-space: nowrap;
  background: none;
}

/* 색만으로 구분하지 않도록 밑줄·굵기를 함께 쓴다 */
.section-tabs__tab[aria-selected="true"] {
  border-bottom-color: var(--color-text);
  font-weight: 700;
  color: var(--color-text);
}

/* 탭을 바꿀 때 섹션이 통째로 바뀌므로 크롬의 스크롤 고정(scroll anchoring)이 기준 요소를 잃고
   페이지를 엉뚱한 곳(맨 위 등)으로 옮기지 않게 끈다. 스크롤 위치는 JS가 직접 맞춘다 */
.site-main.is-tabbed {
  overflow-anchor: none;
}

/* 탭 섹션은 최소한 '화면 높이 − 고정 헤더(--header-height)·앱 배너 − 탭 줄(--section-tabs-height)'만큼 높게 둔다(값은 JS가 넣는다).
   탭 줄을 화면 맨 위에 올렸을 때 내용이 짧은 섹션(차트 등)도 화면을 채워, 탭을 바꿔도 푸터가 화면 안에서 오르내리지 않는다.
   가로로 미는 손짓(스와이프)은 JS가 받고 세로 스크롤·확대는 브라우저에 맡긴다 */
.is-tabbed .section {
  min-height: calc(100svh - var(--header-height, calc(var(--space-lg) + var(--space-sm))) - var(--app-banner-top, 0px) - var(--section-tabs-height, 0px));
  touch-action: pan-y pinch-zoom;
}

/* 미는 동안: 지금 섹션은 끌린 거리(--swipe-x)만큼, 옆 섹션은 그 옆(--swipe-side: 1 오른쪽·-1 왼쪽)에 붙어 함께 움직인다.
   옆 섹션은 --swipe-peek-top 높이에 겹쳐 띄운다. 본문은 미기 시작할 때 높이(--swipe-height)로 묶고 넘치는 부분을 잘라,
   옆 섹션이 더 길어도 푸터를 덮지 않고 가로 스크롤도 생기지 않게 한다 */
.site-main.is-swiping {
  position: relative;
  height: var(--swipe-height, auto);
  overflow: clip;
}

.section.is-swipe-current {
  transform: translateX(var(--swipe-x, 0px));
}

.section.is-swipe-peek {
  position: absolute;
  top: var(--swipe-peek-top, 0px);
  right: 0;
  left: 0;
  transform: translateX(calc(var(--swipe-x, 0px) + var(--swipe-side, 1) * 100%));
}

/* 손을 뗀 뒤 넘어가거나 제자리로 돌아갈 때 — 처음엔 빠르게, 끝에서 천천히 멈춘다 */
.is-swipe-settling .is-swipe-current,
.is-swipe-settling .is-swipe-peek {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 넘어갈 때 본문 높이도 같은 속도로 새 섹션 높이에 맞춘다(푸터가 함께 미끄러진다) */
.site-main.is-swipe-settling {
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 탭 모드에서는 탭 이름이 제목 역할을 하므로 섹션 제목은 화면에서만 숨긴다(스크린 리더는 읽음) */
.is-tabbed .section__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* 섹션 제목(강) — 크고 굵게, 자간을 살짝 좁혀 덩어리감을 준다 */
.section__title {
  margin-bottom: calc(var(--space-md) * 0.8); /* 2026-10-11 20% 줄임 */
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* 소제목(약) — 본문보다 한 단계 크고, 제목보다는 작고 가볍게 */
.section__subtitle {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-md);
  font-weight: 700;
}

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

/* 버튼·목록 아래에 붙는 안내 문구 */
.section__note {
  margin-top: var(--space-sm);
}

/* 가운데 정렬한 링크 버튼 바로 아래 안내 문구도 가운데로 맞춘다 */
.link-buttons + .section__note {
  text-align: center;
}

.prose > * + * {
  margin-top: var(--space-sm);
}

/* 쉼표·마침표로 끝나는 구절 — 한 덩어리로 묶어 줄이 꽉 차면 구절째 다음 줄로 넘긴다.
   구절이 한 줄보다 길면 그 안에서는 평소처럼 어절 단위로 줄바꿈된다 */
.phrase {
  display: inline-block;
}

/* ==========================================================================
   메인
   ========================================================================== */
/* 대표 이미지 비율 — 휴대폰 4:3, 768px 이상 3.5:1 */
.hero__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 섹션과 같은 위아래 여백(.section과 함께 바꾼다) */
.hero__body {
  padding-block: var(--space-md);
}

/* 채널 로고 — 제목 글자 크기에 비례해 커지고 줄어든다.
   푸터 파트너사와 같은 파일(partner-arirang.svg)을 쓴다. 이 SVG는 높이 120 중 위아래 약 19.3씩이 빈 여백이라,
   글자 부분이 제목의 35% 높이가 되도록 전체를 키우고(0.35 × 120 ÷ 81.4 ≈ 0.516) 여백만큼 음수 마진으로 당겨 제목에 붙인다 */
.hero__channel {
  width: auto;
  height: calc(var(--fs-hero) * 0.516);
  margin-block: calc(var(--fs-hero) * -0.083);
}

/* 줄 높이를 1로 둬서 글자 위 빈 공간을 없애 로고와 맞붙인다 */
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1;
}

/* 방송 시간 문구는 제목 크기에 비례해 줄어든다(PC 비율: 제목의 약 31%).
   휴대폰에서 너무 작아지지 않도록 --fs-sm 아래로는 내려가지 않는다 */
.hero__lead {
  margin-top: var(--space-xs);
  font-size: max(var(--fs-sm), calc(var(--fs-hero) * 0.3125));
  color: var(--color-text-muted);
}

/* 첫 화면 SNS 위치 — 눌러지는 영역의 빈 여백만큼 당겨 로고 왼쪽 끝을 제목과 맞춘다 */
.hero__sns {
  margin: var(--space-sm) 0 0 calc(var(--space-xs) * -1 - 2px);
}

/* 푸터 SNS도 같은 방식으로 아래 연락처 글자와 왼쪽 끝을 맞추고, 아래 글자 줄과 한 칸 띄운다 */
.site-footer__sns {
  margin: 0 0 var(--space-xs) calc(var(--space-xs) * -1 - 2px);
}

/* 아티스트 카드 바로 위 회차 선택 줄 */
.lineup__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* 회차 선택 — 날짜(굵게) + 회차(흐리게) + 화살표 버튼과 아래로 펼쳐지는 목록 */
.episode-picker {
  position: relative;
}

/* 날짜와 회차는 같은 크기로 두고, 굵기·색으로만 구분한다 */
.episode-picker__toggle {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--fs-lg);
  cursor: pointer;
  list-style: none;
}

.episode-picker__toggle::-webkit-details-marker {
  display: none;
}

.episode-picker__date {
  font-weight: 700;
}

.episode-picker__no {
  color: var(--color-text-muted);
}

.episode-picker__chevron {
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.15s ease-out;
}

.episode-picker[open] .episode-picker__chevron {
  transform: rotate(180deg);
}

.episode-picker__menu {
  position: absolute;
  z-index: var(--z-header);
  top: calc(100% + var(--space-2xs));
  left: 0;
  min-width: 100%;
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  white-space: nowrap;
  background: var(--color-bg);
}

.episode-picker__option {
  display: block;
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  background: none;
}

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

/* 색만으로 구분하지 않도록 굵기로 현재 회차를 표시한다 */
.episode-picker__option.is-active {
  font-weight: 700;
}

/* 라인업·영상·투표 카드 사이 간격 — 세 섹션을 똑같이 맞춘다.
   휴대폰은 태블릿·PC 간격(위아래 32px, 좌우 16px)의 60%, 768px부터 원래 간격(미디어쿼리에서 함께 바꾼다) */
.artist-grid,
.video-grid,
.vote-steps {
  gap: calc(var(--space-md) * 0.6) calc(var(--space-sm) * 0.6);
}

/* 라인업 아티스트 카드 — 한 줄에 휴대폰 3장, 태블릿 5장, PC 8장.
   태블릿 5장은 PC 8장일 때와 카드 크기가 비슷해지도록 맞춘 값이다.
   휴대폰은 카드가 작아 간격도 좁게 둔다 */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* 회차 사이 간격(JS가 없어 모든 회차가 보일 때).
   앞에 '보이는' 회차가 있을 때만 띄운다 — 숨겨진 회차 뒤에도 간격이 붙으면 회차를 고를 때마다 카드 위치가 바뀐다 */
.artist-grid:not([hidden]) ~ .artist-grid:not([hidden]) {
  margin-top: var(--space-md);
}

.artist-grid[hidden] {
  display: none;
}

/* 사진 칸(라인업·MC 공용) — 아래 딤드(::after)를 사진 위에 겹치는 기준 */
.artist-card__media,
.mc-card__media {
  position: relative;
  border-radius: var(--radius-md);
}

/* 썸네일 딤드(라인업·영상·MC 공용) — 사진 위에 옅은 검정(--color-dim)을 깐다. 누르기는 아래 링크가 받는다 */
.artist-card__media::after,
.video-card__media::after,
.mc-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-dim);
  pointer-events: none;
}

/* 라인업 사진 — 칸은 정사각형, 사진은 자르지 않고 긴 쪽을 칸에 맞춰 전체를 보인다(2026-10-14).
   남는 위아래(가로 사진)나 양옆(세로 사진)은 빈 상태 바탕색으로 채운다 */
.artist-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-placeholder);
}

/* 빈 상태(사진·영상 없음) — 라인업·영상·MC 공용. 카드 크기와 상관없이 가운데 로고를 같은 크기(약 40px)로 보여 준다.
   대체 이미지를 잘라 채우면 카드가 클수록 로고도 커지므로, 이미지 자체는 상자 밖으로 밀어 숨기고
   같은 이미지를 고정 크기 배경으로 깐다(로고는 이미지 폭의 약 28%라 9rem → 약 40px) */
.artist-card__photo.is-empty,
.video-card__thumb.is-empty,
.mc-card__photo.is-empty {
  object-position: -9999px 0;
  background: var(--color-placeholder) url("../images/noimage.webp") center / 9rem no-repeat;
}

/* 휴대폰은 한 줄에 3장이라 칸이 좁으므로 이름을 최소 크기로 줄인다(2026-10-12). 768px 이상은 기본 크기 */
.artist-card__name {
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

/* 모든 화면에서 6개를 한 줄에, 왼쪽부터 붙여 둔다(위 푸터 글자와 왼쪽 끝을 맞춤).
   화면이 좁으면 로고가 비율대로 함께 작아진다 */
/* 휴대폰: 첫 줄 4개(아리랑~Qianyi), 둘째 줄 2개. 768px 이상은 한 줄.
   목록 끝의 ::after를 줄바꿈 칸(폭 100%)으로 쓰고, 순서(order)로 4번째와 5번째 사이에 끼운다 */
.partner-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 줄바꿈 칸(::after)도 한 줄로 쳐서 세로 간격이 두 번 들어가므로 세로 간격은 0으로 둔다.
     가로 간격은 2026-10-13 40% 축소 */
  gap: 0 calc(var(--space-sm) * 0.6);
}

.partner-list::after {
  content: "";
  flex-basis: 100%;
  order: 1;
}

.partner-list > li {
  min-width: 0;
}

.partner-list > li:nth-child(n + 5) {
  order: 2;
}

/* 휴대폰은 두 줄이 붙어 보이도록 칸 높이를 로고 높이에 맞춘다 */
.partner-list__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

/* 로고 원본은 높이 120 SVG(틱톡 LIVE만 PNG) — 칸이 좁으면 비율대로 작아진다.
   로고마다 글자 크기가 달라서, 글자 높이가 같아 보이도록 로고별 배율(--logo-scale)을 곱한다(2026-10-13).
   배율 = 뮤빗 글자 높이 ÷ 그 로고의 글자 높이 (원본 높이 120 기준 글자 높이: 뮤빗 37, 써클차트 39.3) */
.partner-list__logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(1.35rem * var(--logo-scale, 1)); /* 2026-10-13 40% 축소(2.25rem → 1.35rem) */
}

.partner-list__logo--circle-chart {
  --logo-scale: 0.941;
}

/* 틱톡 LIVE PNG(2973×552, 위아래 여백 없음, 2026-10-14 교체) — 대문자 T 높이 381(높이 120 기준 82.8),
   T의 세로 가운데가 로고 가운데보다 높이의 9.2% 아래에 있다.
   글자 크기·위치는 바꾸기 전 틱톡 로고(SVG, T 높이 39.6, 배율 1.15, 위로 2%)와 같게 맞췄다:
   배율 = 1.15 × 39.6 ÷ 82.8 ≈ 0.55, 위로 이동 = 9.2% + 이전 로고의 위로 2%를 새 로고 높이로 환산 ≈ 13.5% */
.partner-list__logo--tiktok {
  --logo-scale: 0.55;
  transform: translateY(-13.5%);
}

/* 뮤빗은 글자 기준 크기보다 10% 크게(2026-10-13 요청) */
.partner-list__logo--mubeat {
  --logo-scale: 1.1;
}

/* ==========================================================================
   게시판
   ========================================================================== */
.board-list {
  border-top: 1px solid var(--color-text);
}

.board-list__item {
  border-bottom: 1px solid var(--color-border);
}

.board-list__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  cursor: pointer;
  list-style: none;
}

/* Safari는 list-style 대신 이 가상 요소로 기본 삼각형을 그린다 */
.board-list__summary::-webkit-details-marker {
  display: none;
}

.board-list__title {
  flex: 1 1 12rem;
}

.board-list__date {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* 펼친 글의 제목은 굵게 — 아래 본문과 구분한다 */
details[open] > .board-list__summary .board-list__title {
  font-weight: 700;
}

/* 본문은 옅은 회색 상자 안에 진한 회색 글씨로 넣어 제목과 구분한다(2026-10-12).
   글자색 대비 #555 / #f8f8f8 ≈ 7.1 : 1 */
.board-list__body {
  margin: 0 var(--space-xs) var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* 본문 목록 — 기본 들여쓰기(약 40px)를 없애고 글머리 점을 소제목 왼쪽 끝에 맞춘다.
   두 줄로 넘어가도 글은 점 오른쪽에 맞춰 정렬된다 */
.board-list__body ul {
  padding-left: 0;
  list-style: none;
}

.board-list__body li {
  position: relative;
  padding-left: 1em;
}

.board-list__body li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* 본문 안 소제목(굵은 글씨)은 본문보다 진하게 */
.board-list__body strong {
  color: var(--color-text);
}

/* 본문 안 소제목과 바로 아래 내용 사이는 문단 간격의 60%로 좁혀 한 덩어리로 보이게 한다(2026-10-13) */
.board-list__subtitle + * {
  margin-top: calc(var(--space-sm) * 0.6);
}

/* ==========================================================================
   투표 방법 안내 이미지 — 모바일 1열, 태블릿 2열, PC 4개 가로 한 줄.
   이미지 안에 단계 번호가 있어 목록 번호는 따로 그리지 않는다
   ========================================================================== */
.vote-steps {
  display: grid;
  list-style: none;
}

/* 모바일은 이미지를 폭의 80%로 줄여 가운데에 둔다 */
.vote-steps__img {
  display: block;
  width: 80%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-md);
}

/* 이미지 아래 단계 설명 — 모든 화면에서 가운데 정렬 */
.vote-steps__caption {
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ==========================================================================
   유튜브 영상 목록 — 모바일·태블릿 한 줄 2개, PC 4개
   ========================================================================== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.video-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* 썸네일 — 유튜브 기본 썸네일(4:3, 위아래 검은 띠)을 16:9로 잘라 띠를 없앤다 */
.video-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-placeholder);
}

.video-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 제목은 두 줄까지, 넘치면 말줄임 */
.video-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* 투표 방법 이미지 아래 앱 받기 버튼 — 콘텐츠와의 간격 60px(2026-10-13) */
.vote-steps + .link-buttons {
  margin-top: calc(var(--space-sm) * 3.75);
}

/* ==========================================================================
   외부 링크 버튼 (투표앱) — 흰 바탕 카드: 왼쪽 아이콘, 오른쪽 작은 설명 + 큰 이름 두 줄.
   글자 길이만큼만 넓어지고 페이지 폭에 맞춰 늘어나지 않는다. 자리가 모자라면 다음 줄로 넘어간다
   ========================================================================== */
.link-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.link-buttons__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease-out, transform 0.15s ease-out;
}

.link-buttons__link:hover {
  border-color: var(--color-text);
}

.link-buttons__link:active {
  transform: scale(0.96);
}

/* 스토어 로고(애플·구글플레이) — 글자색을 따른다 */
.link-buttons__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.link-buttons__body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.link-buttons__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.link-buttons__name {
  font-size: var(--fs-md);
  font-weight: 700;
}

/* ==========================================================================
   프로그램
   ========================================================================== */
/* 인사말 | 만드는 사람들 | MC 소개 — 모바일·태블릿은 위아래, 1024px부터 가로
   세 덩어리 사이를 넉넉히 띄워 구분한다 */
.program-intro {
  display: grid;
  gap: var(--space-lg);
}

/* 인사말 — 세 가지 약속 */
.prose > .fold {
  margin-top: var(--space-md);
}

/* 접힌 상태(JS가 is-collapsed를 붙인다) — 윗부분만 보이고 아래로 갈수록 투명해진다 */
/* PC 두 칸에서는 JS가 --fold-max-height를 넣어, 버튼 아래 끝이 옆 칸(만드는 사람들) 끝과 맞게 한다 */
.fold.is-collapsed {
  max-height: var(--fold-max-height, 9rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); /* Chrome 120 미만 */
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}

/* 펼치기·접기 버튼 — 화살표 하나를 펼쳤을 때 뒤집어 위를 보게 한다 */
.fold-button {
  display: flex;
  margin: var(--space-sm) auto 0;
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
}

.fold-button:hover {
  border-color: var(--color-text);
}

.fold-button[hidden] {
  display: none;
}

/* 더보기(+)·목록 접기 버튼(게시판·영상 공용) — 인사말 접기 버튼과 같은 모양으로, 목록 아래 가운데에 조금 더 띄워 놓는다 */
.fold-button--more {
  margin-top: var(--space-md);
}

.fold-button__icon {
  transition: transform 0.2s ease-out;
}

.fold-button[aria-expanded="true"] .fold-button__icon {
  transform: rotate(180deg);
}

.promise__title {
  font-size: var(--fs-base);
  font-weight: 700;
}

.promise-list {
  display: grid;
  gap: var(--space-sm);
}

.promise-list__item {
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-border);
}

.promise-list__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.promise-list__head {
  margin-block: var(--space-2xs);
  font-weight: 700;
}

.prose > .promise__closing {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.info-list {
  margin-top: var(--space-sm);
}

.info-list__row {
  display: flex;
  gap: var(--space-sm);
  padding-block: calc(var(--space-sm) * 0.9); /* 2026-10-12 위아래 여백 10% 줄임 */
  border-bottom: 1px solid var(--color-border);
}

.info-list__row dt {
  flex-shrink: 0;
  width: 5.5rem;
  font-weight: 700;
}

/* MC는 한 명 — 사진을 칸 폭에 맞춰 크게 보여 주되, 모바일 등 넓은 칸에서 너무 커지지 않게 20rem까지만 */
.mc-list {
  display: grid;
  grid-template-columns: minmax(0, 20rem);
  gap: var(--space-md) var(--space-sm);
}

.mc-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-placeholder);
}

.mc-card__name {
  margin-top: var(--space-xs);
  font-size: var(--fs-base);
}

.mc-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   푸터
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.site-footer__inner {
  display: grid;
  max-width: var(--container);
  margin-inline: auto;
  /* 위아래 여백은 섹션과 같게 둔다 */
  padding: var(--space-md) var(--space-sm);
}

/* 회사 정보 — 기울임꼴 기본값을 없앤다.
   푸터 글자 줄(회사 정보·문의·저작권, 주소가 두 줄로 넘어간 경우 포함)은 사이에 여백을 두지 않고
   줄 높이(line-height)만으로 띄워 모든 줄 간격을 똑같이 맞춘다 */
.footer-info {
  font-style: normal;
}

/* 항목 사이 세로 막대. 각 항목 왼쪽(간격 한가운데)에 그리고,
   줄 맨 앞에 오는 막대는 overflow로 잘라 숨긴다 — 줄이 바뀌어도 막대가 맨 앞에 남지 않는다 */
.footer-info__line {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-sm);
  overflow: hidden;
}

/* 항목 하나는 한 줄로 유지한다(예: '이메일:'과 주소가 갈라지지 않게). 좁으면 항목 단위로 다음 줄로 간다 */
.footer-info__item {
  position: relative;
  white-space: nowrap;
}

/* 주소처럼 긴 항목은 휴대폰 폭을 넘을 수 있어 안에서 줄바꿈을 허용한다 */
.footer-info__item--wrap {
  white-space: normal;
}

.footer-info__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--space-sm) / -2);
  width: 1px;
  height: 0.75em;
  background: var(--color-border);
  transform: translateY(-50%);
}

/* 푸터 글자는 모두 같은 크기·모양으로 맞춘다.
   <small>은 브라우저 기본값으로 한 단계 작아지고, <address>는 기울어지므로 되돌린다 */
.site-footer__copy small {
  font-size: inherit;
}

/* 푸터 맨 아래 파트너사 로고 — 위 연락처·저작권과 여백으로 나눈다 */
.site-footer__partners {
  margin-top: calc(var(--space-md) + var(--space-xs));
}

/* SNS 로고(첫 화면·푸터 공용) — 눌러지는 영역은 44px로 넉넉히, 로고는 24px */
.sns-icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.sns-icons__link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-text);
  transition: color 0.15s ease-out;
}

.sns-icons__link:hover {
  color: var(--color-text-muted);
}

/* ==========================================================================
   뮤빗 앱 배너 — 휴대폰·태블릿은 위, PC(1024px 이상)는 아래에 고정
   ========================================================================== */
.app-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-app-banner);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border);
}

/* 배너가 차지한 만큼 본문을 밀어 첫 화면이 가리지 않게 한다 */
.has-app-banner body {
  padding-top: var(--app-banner-top, 0px);
}

.app-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-2xs);
}

/* 눌러지는 영역은 44px로 넉넉히 */
.app-banner__close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  color: var(--color-text-muted);
  background: none;
}

.app-banner__icon {
  flex-shrink: 0;
  width: calc(2.75rem * 0.8);
  height: calc(2.75rem * 0.8);
  border-radius: var(--radius-app-icon);
}

.app-banner__text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.12; /* 두 줄일 때 줄 사이를 좁게 */
}

.app-banner__btn {
  flex-shrink: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-bg);
  background: var(--color-accent);
}

.app-banner__stores {
  display: none;
  gap: var(--space-xs);
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (min-width: 768px) {
  .artist-card__name {
    font-size: var(--fs-base);
  }

  .vote-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .vote-steps__img {
    width: 100%;
  }

  .container,
  .site-header__inner,
  .site-footer__inner {
    padding-inline: var(--space-md);
  }

  .section,
  .hero__body,
  .site-footer__inner {
    padding-block: var(--space-lg);
  }

  .site-main {
    padding-bottom: var(--space-lg);
  }

  .artist-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* 태블릿·PC: 라인업·영상·투표 카드 사이 간격을 똑같이 맞춘다(위아래 32px, 좌우 16px) */
  .artist-grid,
  .video-grid,
  .vote-steps {
    gap: var(--space-md) var(--space-sm);
  }

  .partner-list {
    flex-wrap: nowrap;
    gap: calc(var(--space-lg) * 0.6); /* 2026-10-13 40% 축소 */
  }

  .partner-list::after {
    display: none;
  }

  .partner-list__link {
    min-height: 4rem;
  }

  .partner-list__logo {
    max-height: calc(2.25rem * var(--logo-scale, 1)); /* 2026-10-13 40% 축소(3.75rem → 2.25rem) */
  }

  .site-header__logo-img {
    height: 3rem;
  }

  .hero__image {
    aspect-ratio: 2 / 1; /* 태블릿 — bg-hero-tablet.webp */
  }

  .info-list__row dt {
    width: 12rem;
  }
}

@media (min-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .vote-steps {
    grid-template-columns: repeat(3, 1fr); /* 4단계를 숨겨 3개. 다시 보이면 4로 */
  }

  .site-nav {
    display: block;
    order: 2;
    margin-left: auto;
  }

  .lang-switch {
    order: 3;
    margin-left: var(--space-md);
  }

  .artist-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  /* 인사말 | 만드는 사람들 두 칸(폭 비율 6.5 : 3.5), MC 소개는 아래 줄 전체 폭(아이패드 프로 세로 등).
     넓은 PC·가로 화면에서는 아래 미디어쿼리에서 세 칸 한 줄로 바꾼다 */
  .program-intro {
    grid-template-columns: minmax(0, 6.5fr) minmax(0, 3.5fr);
    /* 위아래 구분선(PC만) — 게시판 목록과 같게 위는 진하게, 아래는 옅게.
       모바일·태블릿은 탭 줄 바로 아래라 선이 겹쳐 보이므로 두지 않는다 */
    padding-block: var(--space-md);
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-border);
  }

  .program-intro__col--mc {
    grid-column: 1 / -1;
  }

  /* 좁은 칸에 들어가므로 768px에서 넓힌 라벨 폭을 다시 줄인다 */
  .info-list__row dt {
    width: 5.5rem;
  }

  /* PC는 표가 프로그램 소개 아래 구분선 바로 위에 끝나므로 마지막 줄 선을 빼 겹쳐 보이지 않게 한다.
     모바일·태블릿은 표 아래에 MC 소개가 이어지므로 마지막 줄 선을 남겨 둔다 */
  .info-list__row:last-child {
    border-bottom: 0;
  }

  /* PC: 앱 배너를 화면 아래에 두고, 스토어 버튼 두 개를 보여 준다 */
  .app-banner {
    top: auto;
    bottom: 0;
    box-shadow: 0 -1px 0 var(--color-border);
  }

  .app-banner__inner {
    /* PC는 화면이 넓어 배너가 납작해 보이므로 위아래 여백을 늘린다 */
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
  }

  .app-banner__text {
    font-size: var(--fs-base);
  }

  /* PC는 한 줄로 보여 주므로 휴대폰용 줄바꿈을 없앤다 */
  .app-banner__br,
  .app-banner__btn--single {
    display: none;
  }

  .app-banner__stores {
    display: flex;
  }

  /* 아래 배너가 푸터 끝을 가리지 않게 한다 */
  .has-app-banner body {
    padding-top: 0;
    padding-bottom: var(--app-banner-bottom, 0px);
  }
}

/* 넓은 PC·가로 화면 — 1024px 이상이라도 세로로 긴 화면(아이패드 프로 세로 등)은 제외한다.
   index.html 히어로 <picture>의 PC <source> media와 같은 조건으로 맞춘다 */
@media (min-width: 1200px), (min-width: 1024px) and (orientation: landscape) {
  .hero__image {
    aspect-ratio: 3.5 / 1; /* PC — bg-hero-pc.webp */
  }

  /* 인사말 | 만드는 사람들 | MC 소개 세 칸 한 줄. 만드는 사람들은 전체의 95/300, MC는 사진 폭(20rem)만큼만 두고
     남는 폭은 모두 인사말에 준다(2026-10-13) */
  .program-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc((100% - 2 * var(--space-lg)) * 95 / 300)) 20rem;
  }

  .program-intro__col--mc {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fold-button__icon {
    transition: none;
  }

  .site-header--overlay,
  .site-header--overlay::before {
    transition: none;
  }

  .lang-switch[open] .lang-switch__menu {
    animation: none;
  }

  .lang-switch__chevron,
  .episode-picker__chevron {
    transition: none;
  }

  .link-buttons__link {
    transition: none;
  }

  .link-buttons__link:active {
    transform: none;
  }
}