/* ── 뷰 머리띠 ────────────────────────────────────────────────────────────────
   iOS 26/27은 홈 화면에 설치된 웹앱의 상태바 자리(iPhone 18 Pro에서 62pt)를
   시스템이 칠하고, 웹은 거기에 아무것도 못 그린다 — theme-color나 배경색을
   런타임에 바꿔도 그 띠는 안 따라온다. 사진을 화면 끝까지 올리던 옛 문법은
   그래서 '위가 잘린 사진'으로 보인다.

   그 자리를 되찾을 수 없으니 이어 붙인다. 시스템 띠와 **같은 색**(--bg)의
   단색 머리띠를 웹뷰 맨 위에 두면 62+40pt가 한 덩어리로 읽혀, 잘린 자리가
   아니라 헤더가 된다. 창 이름·재생·닫기가 전부 여기 산다. 스크롤해도 붙어
   있으므로 어느 창에 있는지가 늘 보인다.

   이 파일은 맨 마지막에 실린다 — 각 화면이 저마다 쓰던 절대배치 상단 바를
   같은 특정도로 덮어써야 하기 때문이다(.fl-htr · .md-htr · .cl-htr …).
   카드 안의 상단 바는 그대로다. 머리띠는 전체화면에서만 쓴다. */
:root{ --vhdr-h:40px; }

.vhdr{position:sticky;top:0;left:0;right:0;z-index:20;
  height:var(--vhdr-h);min-height:var(--vhdr-h);padding:0 15px;
  display:flex;align-items:center;gap:8px;
  background:var(--bg);}

/* 색은 앱이 원래 쓰던 머리글 문법을 그대로 따른다 — 레이스판·HALL OF FAME 같은
   그래프 상세창의 그 회색이다: 이름은 --text3, 조작 아이콘은 --text2, 누르면 --accent.
   사진 위에 얹힐 때 쓰던 흰색과 그림자는 여기서 전부 걷어낸다(단색 위이므로). */
.vhdr .sb-title,.vhdr .cl-kind{color:var(--text3);text-shadow:none;}
.vhdr .sb-title:active,.vhdr .cl-kind:active{color:var(--accent);}
.vhdr .sb-date{color:var(--text2);text-shadow:none;}
.vhdr .sb-play,.vhdr .sb-ff{color:var(--text3);filter:none;}
.vhdr .sb-play:active,.vhdr .sb-ff:active{color:var(--accent);opacity:1;}
.vhdr .fl-x,.vhdr .md-x,.vhdr .rt-x,.vhdr .wk-x,.vhdr .cl-x,.vhdr .cl-back,
.vhdr .ms-x,.vhdr .ms-gear,.vhdr .cl-gear,.vhdr #sxCancel{
  color:var(--text2);text-shadow:none;filter:none;}
.vhdr .fl-x:active,.vhdr .md-x:active,.vhdr .rt-x:active,.vhdr .wk-x:active,.vhdr .cl-x:active,.vhdr .cl-back:active,
.vhdr .ms-x:active,.vhdr .ms-gear:active,.vhdr .cl-gear:active,.vhdr #sxCancel:active{
  color:var(--accent);}

/* 오른쪽 끝으로 모는 규칙 — 화면마다 컨트롤 묶음 이름이 다르다.
   ⚙는 제목 옆이 아니라 오른쪽 버튼 무리의 맨 앞(2026-09-27 사용자 결정 — 앱 머리와 같은 규칙: ‹ 왼쪽, 할 일 오른쪽, ✕ 끝) */
.vhdr .ms-ttl{flex:1;}
.vhdr .ms-gear{margin-left:auto;}
.vhdr .md-ctl{margin-left:auto;margin-right:0;}
.vhdr .cl-gear,.vhdr .ms-x,.vhdr .rt-x,.vhdr .wk-x{margin-left:auto;}
.vhdr .cl-gear + .cl-x{margin-left:0;}

/* 히어로 쪽 높이는 각 화면의 파일에서 고친다 — 거기 선택자가 더 세다 */

/* ── iOS 앱: 머리띠를 유리 막대로(Liquid Glass, 2026-09-27 사용자 제안) ─────────────────
   붙어서 따라 내려오는 머리띠는 어차피 본문을 가리는 자리라 막대 전체를 유리로 한다 — 본문이 그 밑으로
   흐릿하게 비쳐 지나간다. 가만히 있을 때는 지금처럼 상태바 띠와 한 덩어리로 보인다: 바탕색(--bg) 64%라
   앱이 상태바 띠 색을 읽을 때(반투명 50% 이상만 읽음) 같은 --bg가 나온다.
   막대 안의 조작(사진 톱니·재생)도 유리 알약으로 — 앱이 그리는 ‹ · ✕ 유리 원판(30pt)과 같은 높이·결.
   재생은 멈춰 있으면 ▶ 하나라 원판, 재생 중에는 날짜·⏸·⏩를 담아 알약으로 늘어난다. 웹 클립은 그대로. */
/* 앱은 상태바 띠 색을 맨 윗점 요소의 background-color에서 rgb()/rgba()로만 읽는다 — color-mix()는 못 읽어
   그 밑(사진 등)의 색으로 띠를 칠했다(9/27 실기기, 밝은 테마 마일스톤). 그래서 바탕색을 rgb 숫자로 따로 둔다. */
html.in-app{--glass-rgb:15,17,21;}
html.in-app[data-theme="light"]{--glass-rgb:245,243,240;}
@media(prefers-color-scheme:light){html.in-app[data-theme="system"]{--glass-rgb:245,243,240;}}
/* 위는 상태바 띠와 같은 색으로 꽉 차 있다가 아래로 갈수록 비친다(위 100% → 가운데 85% → 아래 50%) —
   고른 반투명이면 사진 위에서 단색 상태바 띠와 막대 사이에 이음새가 보였다. background-color(50%)는
   앱이 띠 색을 읽는 몫, 그라데이션이 그 위에 얹힌다. */
html.in-app .vhdr{
  background-color:rgba(var(--glass-rgb),.5);
  background-image:linear-gradient(rgba(var(--glass-rgb),1),rgba(var(--glass-rgb),.7) 50%,rgba(var(--glass-rgb),0));
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 -.5px 0 rgba(255,255,255,.09);}
html.in-app .vhdr .sb-ctl,
html.in-app .vhdr .hof-dirimg,html.in-app .vhdr .cl-gear,html.in-app .vhdr .ms-gear{
  height:30px;border-radius:15px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.16),0 1px 3px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);}
html.in-app .vhdr .hof-dirimg,html.in-app .vhdr .cl-gear,html.in-app .vhdr .ms-gear{
  width:30px;flex:0 0 30px;display:inline-grid;place-items:center;}
html.in-app .vhdr .ms-gear{margin-left:0;padding:0;}   /* 원판이 되면 글자 옆으로 당겨 붙이던 -9px이 제목을 덮는다 */
html.in-app .vhdr .sb-ctl{margin-top:0;margin-right:0;margin-bottom:0;padding:0 3px 0 11px;}   /* 왼쪽 여백(auto)은 그대로 — 오른쪽으로 모는 규칙 */
html.in-app .vhdr .sb-ctl[data-st="idle"]{width:30px;padding:0;justify-content:center;}
html.in-app .vhdr .sb-ctl[data-st="idle"] .sb-play{padding:6px;}
html.in-app[data-theme="light"] .vhdr{box-shadow:inset 0 -.5px 0 rgba(0,0,0,.08);}
html.in-app[data-theme="light"] .vhdr .sb-ctl,html.in-app[data-theme="light"] .vhdr .hof-dirimg,
html.in-app[data-theme="light"] .vhdr .cl-gear,html.in-app[data-theme="light"] .vhdr .ms-gear{
  background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.08);}
@media(prefers-color-scheme:light){
  html.in-app[data-theme="system"] .vhdr{box-shadow:inset 0 -.5px 0 rgba(0,0,0,.08);}
  html.in-app[data-theme="system"] .vhdr .sb-ctl,html.in-app[data-theme="system"] .vhdr .hof-dirimg,
  html.in-app[data-theme="system"] .vhdr .cl-gear,html.in-app[data-theme="system"] .vhdr .ms-gear{
    background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.08);}}

/* ── iOS 앱 머리(shell-header.js · 앱 caps 'header', 2026-09-27 사용자 결정) ──────────────────────
   앱이 창을 화면 맨 위(상태바 밑)까지 그리고 머리를 유리로 직접 그린다: ‹ ··· [타일] ✕, 제목 없음.
   여기서는 원래 머리 줄을 자리만 지키게 비우고(내용은 숨김 — 누르는 건 앱이 대신), 붙는 막대를 풀어
   본문이 상태바 밑까지 올라가게 한다. 사진 창(컬렉션·마일스톤)은 사진이 맨 위까지 차고 그 위에 앱 머리가 얹힌다.
   상태바 밑 흐림은 iOS 기본 가장자리 효과(앱)가 한다. 웹 클립·옛 앱은 이 클래스가 없다. */
html.in-app.nhdr :is(.vhdr, .pace-view-head, .tr-head, .month-doc-head) > *{visibility:hidden!important;}
html.in-app.nhdr .vhdr{position:absolute;top:0;left:0;right:0;z-index:6;
  height:calc(env(safe-area-inset-top) + var(--vhdr-h));min-height:0;padding-top:env(safe-area-inset-top);
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;}
html.in-app.nhdr :is(#collectionView .cl-body, #filmsView .fl-body, #mwdirView .md-body, #ratingsView .rt-body, #whenView .rt-body, #ryView .rt-body, #weekView .wk-body, #weekBoard .wk-body, #searchView, .ms-view){position:relative;}
/* 목록 창은 머리 줄 자리만큼 비운다 — 첫 카드가 ‹ · ✕ 밑에 깔리지 않게 */
html.in-app.nhdr :is(#filmsView .fl-body, #mwdirView .md-body, #ratingsView .rt-body, #whenView .rt-body, #ryView .rt-body, #weekView .wk-body, #weekBoard .wk-body){padding-top:calc(env(safe-area-inset-top) + var(--vhdr-h));}
html.in-app.nhdr #searchView{padding-top:calc(env(safe-area-inset-top) + var(--vhdr-h))!important;}
/* 사진 창(컬렉션 · 마일스톤): 사진이 화면 맨 위까지 꽉 차고, 칸은 상태바 높이만큼 커진다(B안, 2026-09-27 사용자 선택).
   그만큼 사진이 아래로 내려오고 조금 커져 얼굴이 다이내믹 아일랜드와 ‹ ✕ 밑으로 내려온다 — 앱스토어의 큰 사진 머리처럼.
   (웹 클립 크기 그대로 올리면 머리가 아일랜드에 가렸고, 아일랜드 아래부터 시작 + 흐린 연장은 거절됐다.)
   맨 위 어둡게(::after)가 상태바 글자를 받쳐 준다. */
html.in-app.nhdr :is(#collectionView .cl-hero, .ms-view .ms-hero){box-sizing:content-box;padding-top:env(safe-area-inset-top);}
/* 고정 머리를 쓰던 창(HOF · 월별)은 머리를 문서에 얹는다 — 본문이 상태바 밑으로 흘러가게 */
html.in-app.nhdr #hofView .pace-view-head,
html.in-app.nhdr body.month-open > .month-doc > .month-doc-head{position:absolute;background:none;}
/* 컬렉션: 창 이름과 HALL OF FAME 순위는 사진 위 이름 윗줄로(HOF · MOST WATCHED 사진 머리의 제목 윗줄 문법) */
/* 컬렉션의 창 이름과 HALL OF FAME 순위는 사진 위 이름 윗줄에 — 웹 클립·앱 모두(2026-09-27 사용자 결정).
   웹 클립 머리띠에는 ‹ · ⚙ · ✕만 남는다. */
.cl-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;
  color:rgba(255,255,255,.82);font-family:var(--font-display);font-size:12.5px;letter-spacing:2.2px;line-height:1;
  text-shadow:0 1px 7px rgba(0,0,0,.9);}
.cl-meta .rank-pill{text-shadow:none;}
.cl-htr > :is(.cl-kind, .rank-pill){display:none;}
.cl-htr .cl-gear{margin-left:auto;}
/* 사진 창이 맨 위일 때 끌어내려 튕기면 드러나는 자리 — 밝은 테마의 흰 바탕 대신 사진 윗부분처럼 검게(shell-header.js). */
html.in-app.nhdr.bounce-dark{background-color:#000;transition:none;}

/* ── 문서형 창을 손가락으로 열 때의 눌림 끄기(shell-nav.js html.nav-calm, iOS 앱만) ─────────────────
   앱은 창을 열기 직전 화면을 그대로 찍어 두었다가 뒤로 갈 때 밑에 까는데, WebKit이 탭을 확정하며 그린 눌림 모양까지
   찍혀 돌아올 때 금색으로 남아 보였다(사용자, 2026-10-04). 찍기 전 두 프레임 동안 문서형 창을 여는 자리의 눌림을
   각자의 평소 모양으로 되돌린다 — 테두리는 --border, 줄 바탕은 투명, 제목 글자는 --text3(사진 위 머리는 흰 84%). */
html.nav-calm :is(.sbox,.pace-card,.rating-box,.card,.md-card,.hof-dir-card,.year-chip):active{border-color:var(--border);}
html.nav-calm :is(.sx-row,.hof-list-row):active{background:transparent;}
html.nav-calm :is(.sb-title,.pace-title,.vhdr .sb-title):active{color:var(--text3);}
html.nav-calm :is(.fl-htr,.md-htr) .sb-title:active{color:rgba(255,255,255,.84);}
html.nav-calm.in-app .year-chip:active{opacity:1;}