/* ==========================================================================
   KWorks ENT · 메인 페이지 (배우 첫 화면 · SCHEDULE · NEWS · 밴드)
   ========================================================================== */
.home { padding-top: var(--hd-h); }

/* ---------- 첫 화면: 배우 ---------- */
/* 태블릿·모바일(959px 이하): 제목·이름 목록 없이 카드만. PC: 왼쪽 이름 목록 + 오른쪽 카드 3열 */
.cast { padding-top: clamp(20px, 3vw, 40px); scroll-margin-top: var(--hd-h); }
.cast__index { display: none; }
.cast .acard.is-hot .acard__frame { outline-color: var(--line-strong); }
.cast .acard.is-hot .acard__ko .u { border-bottom-color: var(--accent); }

/* PC: 이름 목록은 스크롤하는 동안 왼쪽에 고정, 카드는 페이지 스크롤로 흐른다 */
@media (min-width: 960px) {
  .cast { padding-top: clamp(28px, 3vw, 44px); }
  .cast__inner { display: grid; grid-template-columns: clamp(208px, 19vw, 272px) minmax(0, 1fr); gap: 0 clamp(32px, 4.5vw, 72px); align-items: start; }
  .cast__index { position: sticky; top: calc(var(--hd-h) + 28px); display: flex; flex-direction: column; max-height: calc(100svh - var(--hd-h) - 56px); }
  .cast__head { flex: 0 0 auto; display: flex; align-items: baseline; gap: 10px; }
  .cast__label { font-family: var(--font-en); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
  .cast__count { font-size: 1.125rem; line-height: 1; color: var(--muted); }
  .cast__nav { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 16px; }
  /* 배우가 늘어 목록이 화면보다 길어지면 목록 안에서만 스크롤. 스크롤바는 그때(is-scroll, main.js)만 보이고 평소에는 없다 */
  .cast__names { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: auto; border-top: 1px solid var(--line); scrollbar-width: none; }
  .cast__names::-webkit-scrollbar { display: none; }
  .lenis.lenis-smooth .cast__names[data-lenis-prevent] { overscroll-behavior: auto; }
  .cast__names.is-scroll { padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
  .cast__names.is-scroll::-webkit-scrollbar { display: block; width: 6px; }
  .cast__names.is-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
  .cast__names li { min-width: 0; border-bottom: 1px solid var(--line); }
  .cast__name { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 0; }
  .cast__thumb { display: block; width: 44px; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: var(--surface); outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .2s; }
  .cast__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
  .cast__ko { min-width: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; }
  .cast__ko .u { border-bottom: 2px solid transparent; transition: border-color .2s; }
  .cast__name:hover .cast__ko .u, .cast__name:focus-visible .cast__ko .u, .cast__name.is-hot .cast__ko .u { border-bottom-color: var(--accent); }
  .cast__name:hover .cast__thumb, .cast__name:focus-visible .cast__thumb, .cast__name.is-hot .cast__thumb { outline-color: var(--text-2); }
  .cast__all { flex: 0 0 auto; margin-top: 18px; }
}
/* 촘촘한 목록: 화면이 낮은 노트북이거나(미디어 쿼리) 배우가 늘어 목록이 넘칠 때(is-dense, main.js 가 붙임). 두 블록의 값은 같게 유지 */
@media (min-width: 960px) and (max-height: 820px) {
  .cast__index { top: calc(var(--hd-h) + 20px); max-height: calc(100svh - var(--hd-h) - 36px); }
  .cast__label { font-size: 1.5rem; }
  .cast__nav { margin-top: 12px; }
  .cast__name { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 5px 0; }
  .cast__thumb { width: 32px; }
  .cast__ko { font-size: 1rem; }
  .cast__all { margin-top: 14px; }
}
@media (min-width: 960px) {
  .cast__index.is-dense .cast__nav { margin-top: 12px; }
  .cast__index.is-dense .cast__name { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 5px 0; }
  .cast__index.is-dense .cast__thumb { width: 32px; }
  .cast__index.is-dense .cast__ko { font-size: 1rem; }
  .cast__index.is-dense .cast__all { margin-top: 14px; }
}
@media (min-width: 960px) and (max-height: 620px) { .cast__all { display: none; } }

/* 짝 강조: 이름이나 카드에 올리면 같은 배우만 밝게 */
@media (hover: hover) and (pointer: fine) {
  .cast__name, .cast .acard { transition: opacity .3s var(--ease-out); }
  .cast.is-hot .cast__name:not(.is-hot), .cast.is-hot .acard:not(.is-hot) { opacity: .4; }
  .js .cast__name:hover .cast__thumb { filter: none; }
}
/* 흑백에서 컬러로: 이름이나 카드 어느 쪽에 올려도 같은 배우의 카드와 작은 사진이 함께 컬러(카드 기본 규칙은 site.css).
   터치 기기의 스포트라이트(is-spot, site.js)도 켜진 카드의 이름 줄 작은 사진을 함께 켠다 */
.js .cast .acard.is-hot .acard__frame { filter: none; }
.js .cast__thumb { filter: grayscale(1); transition: outline-color .2s, filter .45s var(--ease-out); }
.js .cast__name:focus-visible .cast__thumb, .js .cast__name.is-hot .cast__thumb, .js .cast__name.is-spot .cast__thumb { filter: none; }
/* 들어올 때: 이름이 위에서부터 차례로 (화면 폭에 따라 display 가 바뀌는 요소에는 걸지 않는다. 바뀔 때마다 다시 재생되기 때문).
   목록의 줄은 자리 이동 없이 나타나기만 한다: 목록이 스크롤 상자라, 줄이 움직이는 동안 넘친 것으로 계산돼 새로고침 때 스크롤바가 깜빡였다 */
@media (prefers-reduced-motion: no-preference) {
  .cast__head { animation: castIn .7s var(--ease-quart) backwards; }
  .cast__names li { animation: castFade .7s var(--ease-quart) backwards; animation-delay: calc(var(--i, 0) * 40ms + 60ms); }
}
@keyframes castIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes castFade { from { opacity: 0; } }

/* ---------- 오디션 · 문의 밴드 (제니하우스 예약 섹션식 핀 스크롤) ---------- */
.band { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.band__pane { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: calc(var(--hd-h) + 40px) clamp(24px, 4vw, 64px) clamp(40px, 6vh, 72px); overflow: hidden; }
.band__pane + .band__pane { border-left: 1px solid var(--line); }
.band__pane--contact { background: var(--surface); }
.band__media { width: 100%; margin-bottom: clamp(28px, 4vh, 48px); border-radius: 2px; overflow: hidden; background: var(--card); }
.band__media img { width: 100%; height: auto; display: block; }
.band__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.band__text .h-display { font-size: clamp(3rem, 6.5vw, 5.5rem); }
.band__text .lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.band__text .roll-btn { margin-top: 16px; }
@media (max-width: 959px) {
  .band { grid-template-columns: 1fr; }
  .band__pane { min-height: 0; padding: 56px var(--gutter); }
  .band__pane + .band__pane { border-left: 0; border-top: 1px solid var(--line); }
}