/* 추천 쇼츠 피드가 머리 바·하단 탭 높이를 빼고 쓰는 토큰 (vod-skin.md §5 「추천」). */
:root { --vod-header-h: 60px; --vod-tabbar-h: 0px; }
/* 추천 화면은 바닥글을 숨기고 본문 여백·최대 폭을 없앤다 — 쇼츠 피드가 화면 폭 가득 차고 높이를 깎지 않게. */
body:has(.vod-rec) > footer { display: none; }
body:has(.vod-rec) > main { max-width: none; padding: 0; }
body:has(.vod-rec) > main > article.gb-plugin-page.gb-plugin-page { max-width: none; }
body:has(.vod-rec) .gb-plugin-page > .gb-body { margin-top: 0; padding-top: 0; border-top: 0; }
body:has(.vod-rec) .gb-lang-offer { display: none; }

/* 본문: 좌우 --gb-gutter, 최대 폭 70rem(엔진 기본과 같은 지금 값), 위아래 숨. */
body > main {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(70rem + 2 * var(--gb-gutter));
  margin: 0 auto;
  padding: 18px var(--gb-gutter) 3rem;
}
#main-content { scroll-margin-top: calc(var(--gb-header-height, 60px) + 0.75rem); }
body:has(> header nav li.gb-current > ul) #main-content { scroll-margin-top: calc(var(--gb-header-height, 5.75rem) + 0.75rem); }

/* 회원의 읽지 않은 알림 띠(머리 위). */
.gb-notice-bar { border-bottom: 1px solid var(--gb-border); background: var(--gb-bg); font-size: 13px; }
.gb-notice-bar-line { display: flex; align-items: center; gap: 0.5rem; max-width: calc(70rem + 2 * var(--gb-gutter)); margin: 0 auto; padding: 0.4rem var(--gb-gutter); }
.gb-notice-bar-line + .gb-notice-bar-line { border-top: 1px solid var(--gb-border); }
.gb-notice-bar-line > a { flex: 1; min-width: 0; overflow: hidden; color: var(--gb-text); text-overflow: ellipsis; white-space: nowrap; }
.gb-notice-bar-close { flex: none; min-width: 2rem; min-height: 2rem; padding: 0; border: 0; background: none; color: var(--gb-text-dim); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.gb-notice-bar-close:hover { color: var(--gb-text); }

/* 머리 바: 브랜드 · 메뉴 · 글쓰기(설정) · 계정 메뉴 · 아이콘 행동. 검색 칸·테마 스위치가 없는
   열 배치(vod-skin.md §4). */
body > header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  /* 넓은 화면 오른쪽 순서: 검색 → 알림 → 계정 메뉴 (명세 21 §12). */
  grid-template-areas: "brand nav write vactions account";
  align-items: center;
  column-gap: 1.5rem;
  min-height: 60px;
  padding: 0 max(var(--gb-gutter), calc((100% - 70rem) / 2));
  background: var(--gb-bg);
}
body > header .vod-actions { grid-area: vactions; }
body > header .gb-header-write { grid-area: write; white-space: nowrap; }
body > header:has(nav li.gb-current > ul) { margin-bottom: 2.25rem; }

/* 머리 바 숨김(skin-api.md §3t): 런타임이 --gb-header-height 를 재고 data-gb-header 를 쓴다. */
:root[data-gb-header-scroll='hide'] body > header { transition: transform 0.2s ease; }
:root[data-gb-header='hidden'] body > header:not(:focus-within) { transform: translateY(calc(-1 * var(--gb-header-height, 100%) - 1px)); }
:root[data-gb-header-scroll='hide'] .gb-sidebar { transition: top 0.2s ease; }
.gb-sidebar { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--gb-header-offset, 3.5rem) + 0.75rem); }
/* 비어 있으면(배치된 위젯이 없는 면) 열을 잡지 않는다 — 잡으면 본문이 사이드바 폭만큼 줄어든다. */
.gb-sidebar:empty { display: none; }
main:has(> .gb-sidebar:not(:empty)) { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; column-gap: 2rem; row-gap: 1rem; align-items: start; align-content: start; }
main:has(> .gb-sidebar:not(:empty)) > * { grid-column: 1; }
main:has(> .gb-sidebar:not(:empty)) > .gb-sidebar { grid-column: 2; grid-row: 1 / -1; }

body > header > p { grid-area: brand; margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap; }
body > header > p a, body > header > p a:hover { color: var(--gb-text); text-decoration: none; }
body > header > nav:not(.gb-account) { grid-area: nav; min-width: 0; }
body > header nav ul { display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
body > header nav ul::-webkit-scrollbar { display: none; }
body > header nav ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.3rem 0; color: var(--gb-text-dim); font-weight: 400; }
body > header nav ul a:hover { color: var(--gb-text); text-decoration: none; }
body > header nav ul a[aria-current='page'], body > header nav li.gb-current > a { color: var(--gb-accent); font-weight: 600; }
body > header nav ul ul { display: none; }
body > header nav li.gb-current > ul { position: absolute; top: 100%; right: 0; left: 0; display: flex; align-items: center; gap: 1.125rem; min-height: 2.25rem; padding: 0 max(var(--gb-gutter), calc((100% - 70rem) / 2)); background: var(--gb-bg); border-bottom: 1px solid var(--gb-border); }
body > header nav ul ul a { min-height: 0; padding: 0.2rem 0; font-size: 13px; }

body > header nav.gb-account { grid-area: account; font-size: 14px; }
body > header nav.gb-account a.gb-sign-in { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: var(--vod-radius-md); background: var(--gb-surface-2); color: var(--gb-text); font-weight: 600; white-space: nowrap; }
body > header nav.gb-account a.gb-sign-in:hover { background: var(--gb-surface-hover); text-decoration: none; }
body > header .gb-account-menu > summary { max-width: 12rem; color: var(--gb-text); font-weight: 600; }
body > header .gb-account-menu > summary > svg:first-child { display: none; }
body > header .gb-account-menu > summary > .gb-avatar-initial { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--gb-surface-2); color: var(--gb-text-dim); font-size: 13px; font-weight: 600; }
body > header .gb-account-menu > summary > .gb-viewer-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body > header .gb-notifications-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--gb-text); }
body > header .gb-notifications-link:hover { background: var(--gb-surface-hover); text-decoration: none; }
body > header .gb-notifications-link .gb-badge { position: absolute; top: 4px; left: 50%; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 2px; padding: 0 4px; box-sizing: border-box; border: 0; border-radius: var(--gb-pill); background: var(--gb-accent); color: var(--gb-on-accent); font-size: 10px; font-weight: 700; line-height: 1; }

/* 머리 바 아이콘 단추는 바탕·테두리가 없다(vod-skin.md §4). 선택자를 머리 바 안으로 한정하고
   background·border 를 명시해, 같은 클래스 이름을 쓰는 플러그인 규칙과 어느 쪽이 먼저 끝나도 투명이다. */
body > header .vod-actions { display: flex; align-items: center; gap: 0.25rem; }
body > header .vod-action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--gb-radius); background: transparent; color: var(--gb-text); }
body > header .vod-action:hover, body > header .vod-action:active { background: var(--gb-surface-hover); }
body > header .vod-action:hover { color: var(--gb-text-dim); text-decoration: none; }
body > header .vod-action .vod-icon { width: 22px; height: 22px; }
body > header .vod-nav-count { position: absolute; top: 4px; left: 50%; display: flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 2px; padding: 0 4px; box-sizing: border-box; border-radius: var(--gb-pill); background: var(--gb-accent); color: var(--gb-on-accent); font-size: 10px; font-weight: 700; }
.vod-brand a { display: inline-flex; align-items: center; min-height: 44px; }
.vod-brand img { display: block; height: 28px; }
/* 글자 로고 속 점은 강조색 (gbun.vod → gbun·vod). */
.vod-brand-dot { color: var(--gb-accent); }

.vod-tabs { display: none; }

/* 재생 화면은 무대가 화면 전체를 덮는다 — 머리 바·하단 탭·바닥글을 모든 폭에서 숨긴다(vod-skin.md §4). */
body:has(.vod-player) > header, body:has(.vod-player) > footer, body:has(.vod-player) .vod-tabs { display: none; }

/* 바닥글 */
body > footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1.5rem max(var(--gb-gutter), calc((100% - 70rem) / 2)); border-top: 1px solid var(--gb-border); background: var(--gb-bg); color: var(--gb-text-dim); font-size: 13px; }
body > footer > nav { flex: 1 1 auto; }
body > footer nav ul { display: flex; flex-wrap: wrap; gap: 0.1rem 1.125rem; margin: 0; padding: 0; list-style: none; }
body > footer nav ul a { color: var(--gb-text-dim); }
body > footer nav ul ul { display: none; }
body > footer p { margin: 0; }
body > footer a { color: var(--gb-text-dim); }
body > footer a:hover { color: var(--gb-text); }
body > footer .gb-site-description { color: var(--gb-text-dim); }
.gb-footer-links { color: var(--gb-text-dim); }
.gb-lang-switch ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
.gb-lang-switch a, .gb-lang-switch span { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; }
.gb-lang-switch a { text-decoration: underline; text-underline-offset: 0.15em; }
.gb-lang-switch [aria-current="true"] { font-weight: 600; }

/* 다른 언어 제안 바: 바닥에 붙는 띠. 폰에서는 하단 탭에 가리지 않게 올린다. */
.gb-lang-offer { position: fixed; inset-inline: 0; bottom: 0; z-index: 101; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--gb-border); background: var(--gb-surface); color: var(--gb-text); }
.gb-lang-offer a { color: var(--gb-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.gb-lang-offer button { padding: 0; border: 0; background: none; color: var(--gb-text-dim); font: inherit; cursor: pointer; }

@media (max-width: 720px) {
  :root { --vod-header-h: 0px; --vod-tabbar-h: calc(64px + env(safe-area-inset-bottom)); }
  /* 추천 화면은 좁은 화면에서 사이트 머리 바를 숨긴다 (vod-skin.md §5 「추천」). */
  body:has(.vod-rec) > header { display: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* 시안은 머리 바 바로 아래부터 시작한다(명세 21 §14) — 화면별 위 여백은 그 화면 규칙이 준다. */
  body > main { padding-top: 0; }
  /* 머리 바는 시안 크기(vod-skin.md §4): 높이 60px, 아래 구분선 없음. */
  body > header { min-height: 60px; padding: 12px 6px 4px var(--gb-gutter); border-bottom: 0; }
  /* 폰에서는 헤더 메뉴·계정 메뉴·로그인 단추를 하단 탭이 대신한다. 계정 영역의 알림 종은 남긴다. */
  body > header > nav:not(.gb-account), body > header .gb-account-menu, body > header nav.gb-account a.gb-sign-in { display: none; }
  /* 남은 오른쪽 아이콘(검색·종)은 한 묶음처럼 붙이고 같은 크기로(시안 머리 바). */
  body > header { column-gap: 0.25rem; }
  body > header .gb-notifications-link svg { width: 22px; height: 22px; }
  /* VOD 화면의 큰 제목·뒤로 줄이 있는 화면은 사이트 머리 바를 숨긴다(vod-skin.md §4). */
  body:has(.vod-topbar, .vod-page-title, .vod-detail-media, .wallet-head) > header { display: none; }
  /* 좁은 화면에서 바닥글은 숨긴다 — 하단 탭이 대신한다(vod-skin.md §4). */
  body > footer { display: none; }
  .vod-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--gb-border); background: var(--gb-bg); }
  .vod-tabs a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; color: var(--vod-faint); font-size: 11px; }
  .vod-tabs a:hover { color: var(--gb-text); text-decoration: none; }
  .vod-tabs a[aria-current] { color: var(--gb-text); }
  .vod-tabs .vod-icon { width: 22px; height: 22px; }
  .gb-lang-offer { bottom: calc(64px + env(safe-area-inset-bottom)); }
}