/* ── MOST WATCHED FILMS — 도장 카드 (목업 확정본) ────────────────────────────
   관람 1회 = 도장 1개. 색은 PACE의 그 해 색, 모양은 SEASONS 챔피언 칩, 각인은 위 연도·아래 달.
   도장 폭은 '열 개가 한 줄을 딱 채우는' 크기로 고정 — 빈 칸을 미리 두진 않고 줄은 찍힌 데서 끝난다.
   그래서 줄 길이가 곧 편수다. ── */
.fl-box{padding:0;overflow:hidden;}
/* 히어로 — 1위 작품 스틸 풀블리드 + 아래로 짙어지는 스크림(글자 자리만 눌러주고 하늘은 살린다) */
.fl-hero{position:relative;aspect-ratio:16/9;background:var(--bg2);overflow:hidden;}
.fl-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;}
.fl-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,6,20,.30) 0%, rgba(10,6,20,0) 36%, rgba(10,6,20,.5) 70%, rgba(10,6,20,.9) 100%);}
.fl-htr{position:absolute;top:8px;left:13px;right:9px;display:flex;justify-content:space-between;align-items:center;z-index:2;}
.fl-htr .sb-title{color:rgba(255,255,255,.84);text-shadow:0 1px 6px rgba(0,0,0,.5);}
.fl-htr .sb-title:active{color:#fff;}
.fl-htr .sb-ctl{color:rgba(255,255,255,.84);}
.fl-htr .sb-date{color:rgba(255,255,255,.8);text-shadow:0 1px 6px rgba(0,0,0,.5);}
.fl-htr .sb-play{color:rgba(255,255,255,.84);filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));}
.fl-foot{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;display:flex;align-items:baseline;gap:10px;}
.fl-t{font-family:var(--font-display);font-size:30px;letter-spacing:1.6px;font-weight:400;margin:0;color:#fff;
  line-height:.92;text-shadow:0 2px 14px rgba(0,0,0,.7);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fl-rule{flex:1;height:1px;background:rgba(255,255,255,.32);transform:translateY(-6px);min-width:10px;}
/* 상세에서 히어로가 뜨면 선이 왼쪽부터 그어진다 — 숫자만 굴리면 얌전하다.
   HALL OF FAME이 '게이지가 차오르는 동안 숫자가 구른다'라서 챠라락한 거였다.
   여기서 게이지에 해당하는 게 이 선이라, 같은 곡선·같은 길이(.55s)로 맞춘다. */
.fl-body .fl-rule,.md-body .md-rule{
  transform-origin:left center;transition:transform .55s cubic-bezier(.22,.61,.36,1);}
.fl-body .fl-rule.rw,.md-body .md-rule.rw{transform:translateY(-6px) scaleX(0);transition:none;}

/* 편수 — 숫자를 TIMES 가운데 위에 얹는다(오른쪽 정렬이면 한 자리 숫자가 구석으로 밀려 허전하다) */
.fl-cnt{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7);flex-shrink:0;}
.fl-cnt b{font-family:var(--font-mono);font-size:26px;font-weight:700;line-height:.85;}
.fl-cnt em{font-style:normal;font-family:var(--font-display);font-size:9px;letter-spacing:2.2px;opacity:.88;}
/* 목록 */
.fl-list{padding:4px 13px 13px;display:flex;flex-direction:column;gap:2px;}
.fl-row{display:flex;flex-direction:column;gap:5px;padding:7px 0 8px;border-bottom:1px solid var(--border);}
.fl-row:last-child{border-bottom:0;}
.fl-rn{font-size:10.5px;color:var(--text);display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0;}
.fl-rn i{font-style:normal;font-family:var(--font-mono);font-weight:700;color:var(--text2);flex-shrink:0;} /* 색은 인라인(viewingColor) */
.fl-row.bold .fl-rn{font-weight:700;}
.fl-strip{display:flex;flex-wrap:wrap;gap:4px;align-items:stretch;}
/* 도장 — 열 개가 한 줄. 넘치면(11회 이상) 다음 줄로 넘어간다. */
.fl-st{flex:0 0 calc((100% - 36px) / 10);min-width:0;aspect-ratio:31/28;border-radius:8px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--sc);color:#fff;font-family:var(--font-mono);line-height:1;position:relative;
  transform:rotate(var(--tilt));}
.fl-st em{font-style:normal;font-weight:700;font-size:10px;}
.fl-st b{font-weight:400;opacity:.92;font-size:6.5px;}
.fl-st.fl-pend{opacity:0;}
/* 쾅 — 위에서 크게 내려와 때리고, 잉크가 번지는 링이 퍼진다 */
@keyframes flSlam{
  0%{transform:rotate(calc(var(--tilt) * 2.4)) scale(2.7);opacity:0;}
  55%{opacity:1;}
  70%{transform:rotate(var(--tilt)) scale(.9);opacity:1;}
  85%{transform:rotate(var(--tilt)) scale(1.07);}
  100%{transform:rotate(var(--tilt)) scale(1);}
}
@keyframes flRing{0%{opacity:.5;transform:scale(.75);}100%{opacity:0;transform:scale(2.1);}}
.fl-st.fl-hit{animation:flSlam .42s cubic-bezier(.2,.8,.3,1.1);}
.fl-st.fl-hit::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--sc);
  animation:flRing .5s ease-out forwards;pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .fl-st.fl-hit{animation:none;}
  .fl-st.fl-hit::after{animation:none;opacity:0;}
}
/* 상세 — 카드를 그대로 펼친 모양. 히어로가 화면 위를 꽉 채우고(상단 인셋까지 이미지가 올라간다)
   제목·재생·닫기가 그 위에 얹힌다. 바닥은 카드색이라 목록이 흰 종이 위에 놓인다. */
#filmsView{padding:0;background:var(--card);}
.fl-body{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;background:var(--card);}
.fl-body .fl-hero{border-radius:0;aspect-ratio:auto;height:calc(56.25vw + env(safe-area-inset-top));min-height:200px;}
/* 위 바는 상태바를 피해 내려온다 — 이미지는 그 위까지 올라가 화면 끝에 닿는다.
   제목만 왼쪽에 남기고 재생·⏩는 닫기 옆으로 붙인다(가운데에 뜨면 갈 곳 없는 버튼처럼 보인다). */
.fl-body .fl-htr{top:calc(9px + env(safe-area-inset-top));left:15px;right:11px;}
.fl-body .fl-htr .fl-ctl{margin-left:auto;margin-right:0;}
.fl-body .fl-foot{left:15px;right:15px;bottom:13px;}
.fl-body .fl-list{padding:3px 15px calc(22px + env(safe-area-inset-bottom));}
/* 닫기 — 스틸 위라 흰색으로 */
.fl-x{color:rgba(255,255,255,.9);margin-left:2px;text-shadow:0 1px 6px rgba(0,0,0,.55);}
.fl-x:active{color:#fff;}
/* 상세의 도장은 눌러서 그 관람 기록으로 — 눌린 느낌은 기울기를 유지한 채 살짝 눌러앉기 */
.fl-st.tap{cursor:pointer;}
.fl-st.tap:active{transform:rotate(var(--tilt)) scale(.93);}
.fl-st.tap:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* 아직 안 찍힌 도장(재생 중)은 보이지도 눌리지도 않는다 */
.fl-st.fl-pend{pointer-events:none;}

/* ── MOST WATCHED DIRECTORS — 도장판 ────────────────────────────────────────
   영화 카드와 같은 도장(.fl-st)을 그대로 쓰되, 감독은 최다 29편이라 여러 줄로 쌓인다.
   히어로는 검은 인물 사진이라 스크림을 영화 카드보다 약하게 둔다. ── */
.md-box{padding:0;overflow:hidden;}
.md-hero{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;}
/* 3:2 인물 사진을 16:9로 — 위를 살려 머리가 안 잘리게 */
.md-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 24%;display:block;}
.md-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.42) 74%, rgba(0,0,0,.78) 100%);}
.md-htr{position:absolute;top:8px;left:13px;right:9px;display:flex;justify-content:space-between;align-items:center;z-index:2;}
.md-htr .sb-title{color:rgba(255,255,255,.84);text-shadow:0 1px 6px rgba(0,0,0,.6);}
.md-htr .sb-title:active{color:#fff;}
.md-htr .sb-ctl{color:rgba(255,255,255,.84);}
.md-htr .sb-date{color:rgba(255,255,255,.8);text-shadow:0 1px 6px rgba(0,0,0,.6);}
.md-htr .sb-play{color:rgba(255,255,255,.84);filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));}
.md-x{color:rgba(255,255,255,.9);margin-left:2px;text-shadow:0 1px 6px rgba(0,0,0,.55);}
.md-x:active{color:#fff;}
.md-foot{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;display:flex;align-items:baseline;gap:10px;color:#fff;}
.md-t{font-family:var(--font-display);font-size:29px;letter-spacing:1.5px;font-weight:400;margin:0;line-height:.92;
  text-shadow:0 2px 14px rgba(0,0,0,.75);min-width:0;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.md-rule{flex:1;height:1px;background:rgba(255,255,255,.32);transform:translateY(-6px);min-width:10px;}
.md-cnt{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;text-shadow:0 2px 14px rgba(0,0,0,.75);}
.md-cnt b{font-family:var(--font-mono);font-size:25px;font-weight:700;line-height:.85;}
.md-cnt em{font-style:normal;font-family:var(--font-display);font-size:9px;letter-spacing:2.2px;opacity:.88;margin-right:-2px;}
/* 목록 */
/* MOST WATCHED 두 카드는 히어로 밑이 바로 목록이라 기준(6px)보다 한 급 붙인다 */
.md-list{padding:4px 13px 13px;display:flex;flex-direction:column;gap:2px;}
.md-row{display:flex;flex-direction:column;gap:5px;padding:8px 0 10px;border-bottom:1px solid var(--border);}
.md-row:last-child{border-bottom:0;}
.md-rn{font-size:10.5px;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;}
.md-nm{display:flex;align-items:center;gap:3px;min-width:0;}
.md-rn i{font-style:normal;font-family:var(--font-mono);font-weight:700;flex-shrink:0;}
/* 설정 — 감독명 바로 오른쪽. 평소엔 조용하고 누를 때만 또렷해진다. */
.md-gi{width:12.5px;height:12.5px;display:block;}
.md-strip{display:flex;flex-wrap:wrap;gap:4px;align-items:stretch;}
/* 작품 줄 — 필모그래피 순. 막대 조각과 목록 숫자가 같은 색으로 이어진다. */
/* 감독 상세의 작품 목록 — 검색·컬렉션의 FILMOGRAPHY와 같은 줄(.cl-mwrow, app-search.css).
   여기서는 고르는 기능이 없으니 커서·선택 배경만 죽인다. */
.md-filmo{margin-top:4px;display:flex;flex-direction:column;}
/* 좌우 패딩은 컬렉션(.cl-mwrow 6px)을 그대로 둔다 — 컨테이너가 -6px 밖으로 빠져 있어서,
   그 6px이 곧 '선택 테두리와 내용 사이'다. 줄이면 테두리가 포스터에 달라붙는다. */
.md-filmo .cl-mwrow{padding:6px;}
/* 고른 작품의 도장만 제 색으로 남는다 — 나머지는 죽여서 어느 도장이 그 작품인지 바로 보이게 */
.fl-st{transition:opacity .2s ease,filter .2s ease;}
.md-strip .fl-st.fl-off{opacity:.22;filter:saturate(.3);}
/* 상세 — 카드를 그대로 펼친 모양(영화 상세와 동일) */
#mwdirView{padding:0;background:var(--card);}
.md-body{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;background:var(--card);}
.md-body .md-hero{border-radius:0;aspect-ratio:auto;height:calc(56.25vw + env(safe-area-inset-top));min-height:200px;}
/* 얼굴이 노치에 걸리지 않게 사진을 상단 인셋만큼 내린다 — 인셋 자리는 히어로의 검은 바탕이 채운다 */
.md-body .md-hero img{top:env(safe-area-inset-top);height:calc(100% - env(safe-area-inset-top));}
.md-body .md-htr{top:calc(9px + env(safe-area-inset-top));left:15px;right:11px;}
.md-body .md-htr .md-ctl{margin-left:auto;margin-right:0;}
.md-body .md-foot{left:15px;right:15px;bottom:13px;}
/* 감독 줄 크기는 '상세에서만' 키운다. 상세에는 밑에 작품 줄(제목 12.5 · 편수 14)이
   딸리는데 머리가 10.5px면 자식보다 작아져 위계가 뒤집힌다. 카드(왕관 탭)에는
   작품 줄이 없어 그 문제가 없고, 원래 크기가 도장판과 균형이 맞는다.
   Space Mono는 normal 행간이 1.5라 16px 숫자의 상자가 24px가 된다 — 그러면 헤더 줄이
   숫자에 끌려 커지고 가운데 정렬이라 이름 위아래로 빈칸이 생긴다. 상자를 글자에 붙인다. */
#mwdirView .md-rn{font-size:13.5px;line-height:1.15;}
#mwdirView .md-rn i{font-size:16px;line-height:1;}

/* 첫 감독만 아래로 처져 보이던 것 — 목록 위 패딩(12)에 행 자체의 위 패딩(8)이
   더해져 첫 이름만 20px 아래에서 시작했다(행 사이는 10px). 목록 쪽을 덜어 맞춘다. */
.md-body .md-list{padding:2px 15px calc(22px + env(safe-area-inset-bottom));}
/* ⚙ 포스터 지정 시트 — 왼쪽에 지정한 포스터가 그대로 보이고, 줄마다 그 자리에서 적용·지움.
   TMDB 주소를 넣는다는 건 이미 알고 하는 일이라 안내 문구는 두지 않는다. */
#mdPosterSheet{padding-bottom:0;}
#mdPosterSheet h2{margin-bottom:2px;font-family:var(--font);font-size:14px;font-weight:600;
  letter-spacing:0;line-height:1.28;color:var(--text);}
.mdp-sub{font-size:10.5px;color:var(--text3);margin:0 0 13px;letter-spacing:.1px;}
.mdp-sub b{font-family:var(--font-mono);color:var(--accent);font-weight:700;}
#mdPosterBody{max-height:calc(64dvh + 14px + env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;margin:0 -3px;padding:1px 3px 16px;}
/* 키보드가 열린 동안은 시트가 가용 화면 전체를 맡는다. 뒤 대시보드가 어중간하게
   드러나지 않고, 목록 자체가 포커스된 줄을 위해 스크롤되는 한 장의 표면이 된다. */
#mdPosterSheet:has(.mdp-in:focus){height:100dvh;max-height:100dvh;overflow:hidden;border-radius:0;
  display:flex;flex-direction:column;padding-top:calc(10px + env(safe-area-inset-top));}
#mdPosterSheet:has(.mdp-in:focus) #mdPosterBody{flex:1;min-height:0;max-height:none;padding-bottom:16px;}
.mdp-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;
  padding:9px 10px;margin-bottom:7px;border-radius:13px;background:var(--card);
  border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--text) 3%,transparent);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;}
.mdp-row:last-child{margin-bottom:0;}
.mdp-row.has{border-color:color-mix(in srgb,var(--accent) 16%,var(--border));}
.mdp-row:focus-within{border-color:color-mix(in srgb,var(--accent) 62%,var(--border));
  box-shadow:0 3px 14px color-mix(in srgb,var(--text) 8%,transparent);}
.mdp-row.ok{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent);}
.mdp-row.busy{opacity:.5;pointer-events:none;}
/* 썸네일 — 포스터 2:3. 없으면 조용한 빈 판. 오른쪽 아래 점이 뽑힌 색. */
.mdp-thumb{position:relative;width:42px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--bg2);}
.mdp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.mdp-ph{position:absolute;inset:0;border:1px dashed color-mix(in srgb,var(--text3) 45%,transparent);border-radius:8px;opacity:.65;}
.mdp-dot{position:absolute;right:3px;bottom:3px;width:9px;height:9px;border-radius:50%;
  box-shadow:0 0 0 1.5px var(--card);}
/* 가로 그림을 고르는 시트(감독 이미지)는 미리보기도 가로다 — 고른 그대로 보여야 확인이 된다 */
.mdp-wide .mdp-row{grid-template-columns:78px minmax(0,1fr);}
.mdp-wide .mdp-thumb{width:78px;aspect-ratio:16/9;}
.mdp-main{min-width:0;display:flex;flex-direction:column;gap:6px;}
.mdp-nm{font-size:12px;font-weight:600;color:var(--text);line-height:1.28;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.mdp-nm u{text-decoration:none;color:var(--text3);font-weight:400;margin-left:5px;font-family:var(--font-mono);font-size:9.5px;}
.mdp-nm b{font-family:var(--font-mono);font-size:9.5px;color:var(--text2);margin-left:5px;}
/* 주소칸은 편집기보다 조용한 연결 슬롯처럼 보인다. 저장된 주소는 큰 placeholder 대신
   작은 상태 표시로 가리고, 칸을 잡았을 때만 실제 URL과 포커스 링이 나타난다. */
.mdp-inw{display:flex;align-items:center;gap:6px;}
.mdp-field{position:relative;flex:1;min-width:0;display:block;height:31px;overflow:hidden;
  background:color-mix(in srgb,var(--text) 3.5%,transparent);border:1px solid transparent;border-radius:9px;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;}
/* 실제 URL도 상태 문구와 같은 시스템 서체·보통 굵기·회색을 쓴다. 글자 크기만
   iOS 포커스 자동 확대를 막는 전역 16px을 유지해 입력 중 화면이 튀지 않게 한다. */
.mdp-in{display:block;width:100%;min-width:0;height:100%;padding:0 10px;border:0;background:transparent;
  color:var(--text2);caret-color:var(--accent);font-family:var(--font);font-weight:400;letter-spacing:0;line-height:1;}
.mdp-state,.mdp-empty{font-family:var(--font);font-size:10.5px;font-weight:400;letter-spacing:0;line-height:1;}
.mdp-in:focus{outline:none;}
.mdp-field:focus-within{background:color-mix(in srgb,var(--accent) 5%,var(--card));
  border-color:color-mix(in srgb,var(--accent) 78%,var(--border));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent);}
.mdp-state,.mdp-empty{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 9px;
  color:var(--text2);pointer-events:none;opacity:0;transform:translateY(1px);
  transition:opacity .14s ease;}
.mdp-state i,.mdp-empty i{width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:8px;font-style:normal;font-weight:700;}
.mdp-state i{
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
}
.mdp-empty{color:color-mix(in srgb,var(--text2) 82%,transparent);}
.mdp-empty i{background:color-mix(in srgb,var(--text3) 10%,transparent);color:var(--text3);font-size:9px;}
.mdp-row.has .mdp-state{opacity:1;}
.mdp-row:not(.has):not(.dirty) .mdp-empty{opacity:1;}
.mdp-field:focus-within .mdp-state,.mdp-field:focus-within .mdp-empty,
.mdp-row.dirty .mdp-state,.mdp-row.dirty .mdp-empty{display:none;}
.mdp-ok,.mdp-x{flex:0 0 auto;border:0;cursor:pointer;line-height:1;padding:0;display:none;
  align-items:center;justify-content:center;height:30px;border-radius:9px;}
/* '적용'은 저장된 값과 달라졌을 때만 — 누를 게 없으면 아예 안 보인다 */
.mdp-ok{padding:0 11px;background:var(--accent);color:#fff;font-family:var(--font);font-size:11px;font-weight:600;}
.mdp-ok:active{filter:brightness(.92);}
.mdp-row.dirty .mdp-ok{display:flex;}
.mdp-x{width:30px;border:1px solid var(--border);background:transparent;color:var(--text3);font-size:11px;border-radius:50%;}
.mdp-x:active{background:var(--bg2);color:var(--text);}
.mdp-row.has .mdp-x{display:flex;}
@media (prefers-reduced-motion: reduce){.mdp-row,.mdp-in,.mdp-state,.mdp-empty{transition:none;}}