/*
  CLIIP V3 — Layout
  ==================================================================
  모든 라우트가 공유하는 셸 골격.
  페이지별로 이 수치를 다시 정의하지 말 것 — 이 파일만 수정한다.
*/

body {
  background: var(--paper);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 기준선 하나 ----------
   헤더 · 본문 · 풋터가 전부 이걸 쓴다. 값이 갈라지면 정렬이 무너진다. */
.shell-width {
  width: min(100% - var(--gutter) * 2, var(--layout-wide));
  margin-inline: auto;
}

/* ---------- 셸 골격 ----------
   레이아웃 시프트 방지: JS가 채우기 전에도 CSS가 공간을 예약한다.
   구 cliip.kr·cliipmusic에서 "풋터가 본문보다 먼저 보이던" 결함의 대응.
   (docs/12 처방 2) */
.page-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* 전역 플레이어가 콘텐츠를 가리지 않도록 높이만큼 예약 */
  padding-bottom: calc(var(--player-height) + env(safe-area-inset-bottom, 0px));
}

[data-site-header] { min-height: var(--header-height); }

.page-shell__main { flex: 1; }

[data-site-footer] { margin-top: auto; }

/* ---------- 라우트 뷰 컨테이너 ---------- */
[data-view] { display: block; }

[data-view][data-router-state="loading"] { opacity: 0.55; }

/* ---------- PageHero ----------
   모든 개별 라우트 상단의 공통 배너.
   min-height로 데이터가 늦게 와도 아래가 밀려 올라가지 않는다. */
.page-hero {
  min-height: var(--hero-min-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--space-6);
}

.page-hero__eyebrow {
  font-size: var(--type-meta);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-hero__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

.page-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-section);
  line-height: var(--leading-tight);
  color: var(--ink);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

/* 한글 제목은 본명조 계열로. Georgia에는 한글 글리프가 없다. */
.page-hero__title:lang(ko),
.page-hero__title--ko { font-family: var(--font-serif-ko); }

.page-hero__desc {
  color: var(--text-sub);
  max-width: 62ch;
}

/* ---------- 다크 히어로 변형 ----------
   Home / Radio 히어로 "섹션 안에서만".
   헤더 · 풋터 · 본문 · 모달에는 적용하지 않는다. (docs/02 §1-3)
   액센트는 반전하지 않는다. */
.hero--dark {
  background: var(--dark-surface);
  color: var(--dark-ink);
  border-bottom-color: var(--dark-line);
}
.hero--dark .page-hero__title { color: var(--dark-ink); }
.hero--dark .page-hero__desc { color: var(--dark-text-sub); }

/* ---------- 페이지 콘텐츠 ---------- */
.page-content { padding-bottom: var(--space-8); }

.page-content--placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  color: var(--muted);
}
.page-content--placeholder strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  margin-bottom: var(--space-2);
}

/* ---------- 미디어 슬롯 ----------
   로딩 중에는 더미 이미지가 아니라 같은 비율의 빈 서피스를 보여준다.
   placeholder는 실자산이 "실패했을 때만" 보인다. (docs/02 §5) */
.media {
  background: var(--surface-2);
  border-radius: var(--radius-media);
  overflow: hidden;
  position: relative;
}
.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media.is-failed img,
.media.is-failed video { display: none; }
.media.is-failed::after {
  content: attr(data-media-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--type-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 모바일 ----------
   완전 1열. 별도 목업만 1열이고 공통 규칙은 2열인 모순을 만들지 않는다. */
@media (max-width: 760px) {
  .page-hero { padding: var(--space-6) 0 var(--space-5); }
}