/* ═══════════════════════════════════════════════════════════════════════
   시네마 테마(2026-10-06 전면 개편) — body.theme-cinema 아래에만 걸립니다.
   넷플릭스 · 티빙처럼 어두운 영화관 분위기. 공개 화면과 내 메뉴가 씁니다
   (업무포털 · 관리자 콘솔은 밝은 바탕 그대로 — body 에 theme-cinema 가 없습니다).

   색은 여기서 정하지 않습니다. tokens.css 의 .theme-cinema 가 같은 변수 이름을 어두운 값으로
   다시 정하므로(specs/design-tokens.yaml cinema), 이 파일은 "모양" 만 다룹니다.
     · 머리말: 로고 옆에 메뉴를 붙이고, 지금 있는 메뉴는 알약 대신 굵은 흰 글자로.
     · 제목: 크고 굵게, 자간은 촘촘하게.
     · 작품 카드: 올리면 살짝 커지고 그림자가 생깁니다.
     · 단추: 채운 단추는 밝힌 인디고 바탕 + 검은 글자, 두 번째 단추는 반투명 흰 면.
   이 파일은 site.css 뒤에 읽힙니다(파일 이름 순서) — 같은 무게의 규칙이면 여기가 이깁니다.
   ═══════════════════════════════════════════════════════════════════════ */

.theme-cinema {
  /* 입력창 · 스크롤 막대 같은 브라우저 기본 부품도 어두운 모양으로 그리게 합니다. */
  color-scheme: dark;
}

.theme-cinema ::selection {
  background: var(--color-indigo-300);
  color: var(--color-grey-900);
}

/* ── 머리말: 왼쪽에 로고 + 메뉴, 오른쪽에 단추 ─────────────────────── */
.theme-cinema .site-header,
.theme-cinema .site-header:has(~ main.home-page) {
  justify-content: flex-start;
  gap: var(--space-8);
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--color-background) 80%, transparent);
}

.theme-cinema .site-header__actions {
  margin-left: auto;
}

.theme-cinema .site-header__nav a,
.theme-cinema .site-header:has(~ main.home-page) .site-header__nav a {
  padding: 0 var(--space-3);
  background: transparent;
  color: var(--color-grey-700);
}

.theme-cinema .site-header__nav a:hover {
  background: transparent;
  color: var(--color-grey-900);
}

.theme-cinema .site-header__nav a[aria-current="page"],
.theme-cinema .site-header:has(~ main.home-page) .site-header__nav a[aria-current="page"] {
  background: transparent;
  color: var(--color-grey-900);
  font-weight: var(--font-weight-bold);
}

/* 글자 로고(워드마크 파일 · 마스크)는 어느 화면에서나 흰색 — 이 글자색이 마스크의 색이 됩니다(색은 심볼에만 — 코랄 뒤 날개 · 인디고 앞 날개) */
.theme-cinema .site-header__logo,
.theme-cinema .site-header:has(~ main.home-page) .site-header__logo {
  color: var(--color-grey-900);
}

/* ── 제목: 크고 굵게 ─────────────────────────────────────────────── */
.theme-cinema main h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
}

.theme-cinema main h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
}

/* ── 홈: 작품 줄 ─────────────────────────────────────────────────── */
/* 카드에 올리면 살짝 커집니다. 옆 카드에 가리지 않게 올린 카드를 위로 올립니다. */
.theme-cinema .home-track__item {
  transition: transform 0.18s ease;
}

.theme-cinema .home-track__item:hover,
.theme-cinema .home-track__item:focus-within {
  transform: scale(1.04);
  z-index: 1;
}

.theme-cinema .home-track__nav {
  border-color: var(--color-grey-300);
  background: color-mix(in srgb, var(--color-background) 72%, transparent);
  color: var(--color-grey-900);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-cinema .home-category-section__more-link {
  color: var(--color-grey-700);
}

.theme-cinema .home-category-section__more-link:hover {
  color: var(--color-primary);
}

/* ── 팝업 가림막: 글자색(밝음)을 섞던 자리라 어두운 바탕색으로 바꿉니다 ─── */
.theme-cinema .content-popup__backdrop,
.theme-cinema .esg-company-popup__backdrop {
  background: color-mix(in srgb, var(--color-background) 80%, transparent);
}

/* 팝업 창은 바탕보다 한 단계 밝은 면 + 옅은 테두리로 띄웁니다. */
.theme-cinema .content-popup__dialog,
.theme-cinema .esg-company-popup__dialog {
  border: 1px solid var(--color-grey-200);
  box-shadow: var(--shadow-lg);
}

/* ── 로그인 · 가입: 위쪽 옅은 색 띠 대신 바탕 그대로 ─────────────────── */
.theme-cinema .auth-page {
  background: transparent;
}

/* ── 폼 보내기 단추(따로 모양이 없던 것): 채운 단추로 ────────────────── */
.theme-cinema .feedback-form__submit,
.theme-cinema .search-filter-bar__submit {
  height: 48px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

/* 묶음 칸(fieldset) 테두리 — 브라우저 기본 밝은 선 대신 옅은 선 */
.theme-cinema fieldset {
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-card);
}

/* 폰 폭 — 카테고리 탭이 두 줄로 꺾이지 않게 한 줄로 두고 옆으로 밉니다(2차 확장 때 탭이 9개로 늘어납니다). */
@media (max-width: 640px) {
  .theme-cinema .explore-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .theme-cinema .explore-tabs::-webkit-scrollbar {
    display: none;
  }

  .theme-cinema .explore-tabs__tab {
    flex-shrink: 0;
  }
}