/* Cinema Diary Mobile — 검색 화면 + 컬렉션 뷰
   앱 토큰만 쓴다(theme.css). 새 색·새 폰트를 만들지 않는다. */

/* ── 검색 화면 ────────────────────────────────────────────────────────────── */
#searchView,#collectionView,#view-diary{--plain:#343943;}
[data-theme="light"] #searchView,[data-theme="light"] #collectionView,[data-theme="light"] #view-diary{--plain:#cfcac3;}
@media(prefers-color-scheme:light){
  [data-theme="system"] #searchView,[data-theme="system"] #collectionView,[data-theme="system"] #view-diary{--plain:#cfcac3;}}

/* 검색창은 함께 흐른다. sticky로 붙여 두면 iOS가 커서를 옮겨진 자리로 따라 그리지 않아
   내렸다 올라올 때 엉뚱한 데서 깜빡이고, 바닥에서는 붙었다 떨어졌다 하며 흔들린다.
   붙잡아 두려고 스크롤에서 포커스를 놓아 봤더니 이번엔 검색창을 눌러도 focus가 바로
   풀렸다(누르면 iOS가 스크롤을 하고, 그 스크롤이 포커스를 놓는다). 붙이지 않는 편이 낫다. */
.sx-bar{display:flex;align-items:center;gap:10px;
  padding:calc(6px + env(safe-area-inset-top)) 14px 11px;background:var(--bg);
  border-bottom:1px solid var(--border);}
.sx-field{flex:1;min-width:0;height:38px;display:flex;align-items:center;gap:8px;padding:0 10px;
  border-radius:11px;background:color-mix(in srgb,var(--text) 4%,transparent);
  border:1px solid transparent;transition:border-color .18s ease,box-shadow .18s ease;}
.sx-field:focus-within,.sx-field.on{border-color:color-mix(in srgb,var(--accent) 72%,var(--border));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 9%,transparent);}
.sx-field .mag{width:15px;height:15px;flex:0 0 auto;stroke:var(--text3);fill:none;stroke-width:1.9;}
.sx-field.on .mag{stroke:var(--accent);}
.sx-field input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);
  font-family:var(--font);font-size:15px;letter-spacing:-.2px;caret-color:var(--accent);}
.sx-field input:focus{outline:none;}
.sx-field input::placeholder{color:color-mix(in srgb,var(--text2) 74%,transparent);font-size:13.5px;}
#sxClear{width:18px;height:18px;flex:0 0 auto;border:0;padding:0;border-radius:50%;
  background:var(--text3);color:var(--bg);font-size:10px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
/* 상세 화면의 ✕(.cl-x)와 같은 32px 손가락 자리를 준다 — 글자 '취소'였을 때는 글자 폭이
   그 자리를 대신했는데, 기호 하나로 줄이면서 누를 데가 같이 좁아졌다. */
#sxCancel{flex:0 0 auto;width:32px;height:32px;border:0;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;margin-right:-6px;
  color:var(--accent);font-size:16px;line-height:1;cursor:pointer;}
/* 펼쳐 둔 갈래 — BROWSE 단추와 같은 색·글자·점의 문법을 그대로 줄여 검색창 옆에 둔다.
   영화관 브랜드는 아래 단추가 이미 말하므로 이 자리에는 THEATERS만 남긴다. */
#sxScope{display:none;align-items:center;gap:5px;flex:0 0 auto;padding:6px 8px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--cc,var(--accent)) 32%,var(--border));
  background:color-mix(in srgb,var(--cc,var(--accent)) 8%,var(--card));
  color:var(--cc,var(--accent));font-family:var(--font-display);font-size:12px;
  letter-spacing:1.2px;line-height:1;cursor:pointer;}
#sxScope i{width:6px;height:6px;border-radius:50%;background:var(--cc,var(--accent));display:block;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cc,var(--accent)) 18%,transparent);}
/* 닫기 ×가 기하학적 중앙을 보여 주므로 점과 Bebas 글자의 시각 중심도 그 축에 맞춘다. */
#sxScope > span{display:block;line-height:1;transform:translateY(1px);}
#sxScope b{margin-left:1px;color:color-mix(in srgb,var(--cc,var(--accent)) 48%,var(--text3));
  font-family:var(--font);font-size:9px;font-weight:600;letter-spacing:0;}

.sx-body{padding:6px 0 calc(28px + env(safe-area-inset-bottom));}
.sx-sec{font-family:var(--font-display);font-size:9.5px;letter-spacing:1.8px;color:var(--text3);
  padding:14px 15px 7px;}
.sx-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 15px;}
.sx-chip{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:16px;
  border:1px solid var(--border);background:var(--card);font-size:12px;color:var(--text2);
  letter-spacing:-.1px;cursor:pointer;}
.sx-chip:active{border-color:var(--accent2);}
.sx-chip i{width:5px;height:5px;border-radius:50%;background:var(--cc,var(--accent));display:block;}
.sx-chip.scope.on{border-color:var(--cc,var(--accent));color:var(--text);
  background:color-mix(in srgb,var(--cc,var(--accent)) 13%,var(--card));}
.sx-chip.scope.on i{box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 22%,transparent);}
/* 브랜드 단추 — BROWSE의 작은 색 판을 그대로 이어 쓴다. 선택된 하나는 색만 더하는 데서
   멈추지 않고 두꺼운 선·진한 채움·체크를 함께 줘 작은 화면에서도 눌린 상태가 분명하다. */
.sx-brands{padding-top:10px;padding-bottom:10px;flex-wrap:nowrap;}
.sx-brands .sx-chip{position:relative;gap:6px;padding:7px 10px;
  border-color:color-mix(in srgb,var(--cc) 28%,var(--border));
  background:color-mix(in srgb,var(--cc) 7%,var(--card));
  color:var(--cc);font-weight:500;transition:background .16s ease,border-color .16s ease,
  box-shadow .16s ease,transform .16s ease;}
.sx-brands .sx-chip i{box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 15%,transparent);
  transform:translateY(-1px);}
.sx-brands .sx-chip.on{padding:6px 9px;border:2px solid var(--cc);
  background:color-mix(in srgb,var(--cc) 21%,var(--card));color:var(--cc);font-weight:700;
  box-shadow:0 2px 8px color-mix(in srgb,var(--cc) 18%,transparent);}
.sx-brands .sx-chip.on::after{content:'\2713';font-size:10px;font-weight:800;line-height:1;color:var(--cc);}
.sx-brands .sx-chip.on i{box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 28%,transparent);}
.sx-brands .sx-chip:active{transform:scale(.97);}
/* BROWSE는 알약이 아니라 단추다. RECENT의 알약과 같은 모양이면 둘이 같은 종류로 읽히는데,
   하나는 '눌러 보던 것'이고 하나는 '갈래로 넘어가는 입구'라 하는 일이 다르다.
   점을 위에 얹고 이름을 밑에 두는 네 칸짜리 판으로 갈라 둔다. */
.sx-chips.sx-browse{display:grid;grid-template-columns:.85fr 1.15fr 1.1fr .85fr;
  gap:8px;flex-wrap:nowrap;}
.sx-chips.sx-browse .sx-chip{justify-content:center;gap:5px;min-width:0;
  padding:10px 4px;border-radius:12px;color:var(--cc);
  font-family:var(--font-display);font-size:12px;letter-spacing:1.2px;
  line-height:1;
  background:color-mix(in srgb,var(--cc) 8%,var(--card));
  border-color:color-mix(in srgb,var(--cc) 26%,var(--border));}
/* 점과 글자끼리의 중심뿐 아니라 둘을 한 묶음으로 본 시각 중심도 단추 중앙에 맞춘다. */
.sx-chips.sx-browse .sx-chip i{width:6px;height:6px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 18%,transparent);}
.sx-chips.sx-browse .sx-chip > span{display:block;line-height:1;transform:translateY(1px);}
.sx-chips.sx-browse .sx-chip:active{background:color-mix(in srgb,var(--cc) 18%,var(--card));}
.sx-card{margin:0 15px;border:1px solid var(--border);border-radius:13px;background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;}
.sx-card > :last-child{border-bottom:0;}
/* 그림은 카드 왼쪽 끝에 붙고 줄 높이를 그대로 쓴다 — 카드 안에 또 액자를 두르면
   그림만 작아진다. 바깥 모서리는 카드의 반지름이 대신 깎아 준다(overflow:hidden). */
.sx-srow{position:relative;display:flex;align-items:center;gap:12px;padding:0 13px 0 0;cursor:pointer;}
.sx-srow:active{background:var(--card-hover);}
/* 선을 줄 전체에 그으면 왼쪽 타일까지 가로질러서, 열 줄이면 회색 자가 열 개 놓인 꼴이 된다.
   글자 쪽에만 긋고 양 끝에서 스러지게 둔다 — 타일은 서로 맞닿아 그 자체로 줄을 가른다.
   (회차 목록에서 쓰던 그 문법 그대로다.) */
.sx-row::after,.sx-srow::after{content:'';position:absolute;left:110px;right:13px;bottom:0;height:1px;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--border) 78%,transparent) 18px,
    color-mix(in srgb,var(--border) 78%,transparent) calc(100% - 34px),transparent);}
.sx-row:last-child::after,.sx-srow:last-child::after,
.sx-card > :last-child::after{display:none;}


.sx-grp{padding:0 0 4px;}
.sx-grph{display:flex;align-items:center;gap:9px;padding:12px 15px 6px;}
.sx-grph .gt{font-family:var(--font-display);font-size:10.5px;letter-spacing:2.4px;color:var(--text3);flex:0 0 auto;}
.sx-grph .gr{flex:1;height:1px;background:var(--border);}
.sx-grph .gn{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--text3);flex:0 0 auto;}
.sx-grp.hot .gt,.sx-grp.hot .gn{color:var(--accent);}

/* 결과도 SHORTCUTS와 같은 한 장의 카드다 — 줄마다 좌우 여백을 두면 그 폭이
   전부 빈자리가 되고, 카드 하나로 묶으면 그 폭이 그림과 제목으로 간다. */
.sx-row{position:relative;display:flex;align-items:center;gap:12px;padding:0 13px 0 0;cursor:pointer;}
.sx-row:active{background:color-mix(in srgb,var(--accent) 8%,transparent);}
/* 기록의 이미지는 전부 16:9 스틸이다 — 리드 타일도 전부 같은 비율로 통일해
   영화·감독·영화관·개봉년도가 한 줄에서 정확히 같은 왼쪽 선을 갖는다.
   타일은 줄 높이를 거의 다 쓴다. 넉넉한 줄 안에 작은 타일을 놓으면 남는 건 여백뿐이고,
   정작 알아보게 해 줄 그림이 작아진다 — 줄의 크기를 그림이 정하게 뒀다. */
.sx-lead{flex:0 0 auto;width:98px;aspect-ratio:16/9;overflow:hidden;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;}
.sx-lead img{width:100%;height:100%;object-fit:cover;display:block;}
.sx-no-img{font-size:13px;color:var(--text3);}
.sx-lead.ico{background:color-mix(in srgb,var(--ic,var(--accent)) 13%,transparent);
  flex-direction:column;gap:2px;padding:4px 5px;}
.sx-lead.ico svg{width:24px;height:24px;stroke:var(--ic,var(--accent));fill:none;stroke-width:1.7;flex:0 0 auto;}
.sx-lead.ico b{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:-.25px;
  color:var(--ic,var(--accent));line-height:1;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.sx-lead.ico b.ko{font-family:var(--font);letter-spacing:-.4px;}
/* 감독 의자는 획이 다섯이라 이름표까지 넣으면 덩어리가 된다 — 칸을 조금 더 준다 */
.sx-lead.ico.dir{gap:0;padding:3px 5px 3.5px;}
.sx-lead.ico.dir svg{width:28px;height:32px;}
.sx-lead.ico.dir b{margin-top:2.5px;font-size:8px;letter-spacing:-.1px;}

.sx-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sx-t1{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.25px;line-height:1.28;
  display:flex;align-items:center;gap:6px;min-width:0;}
.sx-t1 .sx-lane{flex:0 1 auto;}
.sx-t1 mark{background:transparent;color:var(--accent);font-weight:700;}
.sx-t2{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;
  display:flex;align-items:center;gap:5px;letter-spacing:-.1px;}
.sx-t2 .dot{color:var(--text3);}
/* 넘치면 말줄임 대신 왕복 — 별점이 반쪽만 남지 않게 (ON THIS DAY의 그 규칙) */
.sx-lane{min-width:0;overflow:hidden;flex:1 1 auto;}
/* 제목 레인은 flex가 아니라 인라인이다 — flex 상자 안에서는 텍스트 조각의 앞뒤 공백이
   지워져서, 검색어가 한 단어를 통째로 덮는 순간 그 뒤의 띄어쓰기가 같이 사라진다
   ('Paul'을 다 치면 'PaulThomas Anderson'이 됐다). */
.sx-lane.tt > i{display:inline-block;}
.sx-lane > i{font-style:normal;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  will-change:transform;}
/* RATINGS 머리의 ★ 3.80과 같은 활자·간격·별 보정값을 그대로 쓴다. */
.sx-st{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:-.2px;
  display:inline-flex;align-items:center;gap:3px;}
.sx-st > i{font-style:normal;font-size:10px;line-height:1;position:relative;top:-1.5px;}
/* HALL OF FAME 자리 — 이름 옆 배지. 금색은 검색어 하이라이트가 이미 쓰고 있어서
   같은 줄에서 섞인다. 붉은 계열로 갈라 두고, 얕은 칩을 깔아 글자보다 한 겹 뒤에 둔다. */
.sx-hof{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--red);
  letter-spacing:-.3px;flex:0 0 auto;padding:1.5px 5px;border-radius:5px;line-height:1.15;
  background:color-mix(in srgb,var(--red) 15%,transparent);}
.sx-hof sup{font-size:7px;vertical-align:super;line-height:0;margin-left:.5px;opacity:.85;}
.sx-t2 .glyph{font-size:10px;letter-spacing:.4px;}
.sx-stat{flex:0 0 auto;display:flex;align-items:center;gap:9px;}
.sx-n{font-family:var(--font-mono);font-size:15px;font-weight:700;line-height:1;min-width:26px;
  text-align:right;letter-spacing:-.6px;}
.sx-more{display:flex;align-items:center;gap:7px;padding:11px 13px 11px 110px;font-size:11.5px;
  color:var(--text3);cursor:pointer;}
.sx-more b{font-family:var(--font-mono);font-weight:700;color:var(--text2);}
.sx-none{padding:40px 22px;color:var(--text2);font-size:13px;line-height:1.8;text-align:center;}
.sx-none b{color:var(--accent);}
.sx-none span{display:block;margin-top:8px;font-size:11.5px;color:var(--text3);}

/* ── 컬렉션 뷰 ────────────────────────────────────────────────────────────── */
/* 히어로 — 앱 HALL OF FAME의 .hof-feature-hero 문법. 스틸이 상태바 밑까지 올라간다. */
.cl-hero{position:relative;overflow:hidden;background:#090909;
  height:calc(56.25vw + env(safe-area-inset-top) + 44px);min-height:230px;}
.cl-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.cl-hero.no-img{background:linear-gradient(145deg,#202229,#08090c 70%);}
.cl-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,
  rgba(0,0,0,.5) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.92) 100%);}
.cl-htr{position:absolute;left:6px;right:6px;top:calc(6px + env(safe-area-inset-top));z-index:3;
  display:flex;align-items:center;gap:8px;}
.cl-htr .cl-rank{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:-.3px;
  color:#F0C24B;padding:1.5px 6px;border-radius:6px;line-height:1.2;flex:0 0 auto;
  background:rgba(0,0,0,.34);text-shadow:0 1px 2px rgba(0,0,0,.5);}
.cl-htr .cl-rank sup{font-size:7.5px;vertical-align:super;line-height:0;margin-left:.5px;opacity:.85;}
.cl-htr .cl-kind{font-family:var(--font-display);font-size:12.5px;letter-spacing:2.4px;
  color:rgba(255,255,255,.78);text-shadow:0 1px 8px rgba(0,0,0,.7);}
.cl-gear{width:30px;height:30px;border:0;background:none;padding:0;cursor:pointer;margin-left:auto;
  color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.7));}
.cl-gear svg{width:15px;height:15px;display:block;}
.cl-gear:active{color:#fff;}
.cl-gear + .cl-x{margin-left:0;}
.cl-back,.cl-x{width:32px;height:32px;border:0;background:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-shadow:0 1px 8px rgba(0,0,0,.7);}
.cl-back{font-size:22px;line-height:1;}
.cl-x{font-size:16px;margin-left:auto;}
.cl-foot{position:absolute;left:14px;right:14px;bottom:9px;z-index:2;color:#fff;
  display:flex;flex-direction:column;gap:5px;min-width:0;}
.cl-foot-top{display:flex;align-items:baseline;gap:10px;min-width:0;position:relative;}
.cl-foot h2{min-width:0;max-width:74%;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-display);font-size:29px;font-weight:400;line-height:.92;letter-spacing:1.5px;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.82);}
.cl-foot h2.ko{font-family:var(--font);font-size:20px;font-weight:700;letter-spacing:-.5px;line-height:1.05;}
.cl-foot .rule{flex:1;min-width:8px;height:1px;background:rgba(255,255,255,.32);transform:translateY(-6px);}
/* 긴 제목 — 말줄임 대신 두 줄로 내린다. HALL OF FAME 히어로가 쓰는 그 문법 그대로,
   제목 칸은 격자로 못박고(제목 | 선 14px | 수치) 글자는 두 줄에 맞게 _clFitTitle이 줄인다. */
.cl-hero.is-title-long .cl-foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:0 10px;}
.cl-hero.is-title-long .cl-foot h2{max-width:none;overflow:visible;text-overflow:clip;white-space:normal;
  overflow-wrap:anywhere;text-wrap:balance;line-height:.9;letter-spacing:1.1px;}
/* 선의 자리는 _clFitTitle이 마지막 줄 끝을 재서 인라인으로 넣는다(격자 밖으로 나간다) */
.cl-hero.is-title-long .cl-foot .rule{min-width:0;}
.cl-foot .stat{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;color:#fff;
  transform:translateY(-2px);text-shadow:0 2px 14px rgba(0,0,0,.82);}
/* 점수는 HALL OF FAME 히어로와 같은 크기로 — 날짜와 달리 이건 이 화면의 결론이다 */
.cl-foot .stat.big{transform:none;}
.cl-foot .stat.big b{font-size:25px;line-height:.85;letter-spacing:0;}
.cl-foot .stat.big em{font-size:9px;letter-spacing:2px;opacity:.88;}
.cl-foot .stat b{font-family:var(--font-mono);font-size:13px;font-weight:700;line-height:1;
  letter-spacing:.3px;white-space:nowrap;}
.cl-foot .stat em{font-style:normal;font-family:var(--font-display);font-size:6.5px;line-height:1;
  letter-spacing:.9px;opacity:.88;}
/* 이 스틸이 어느 기록에서 왔는지 — 네 화면 공통. 누르면 그 회차의 상세가 열린다.
   테두리나 알약은 두지 않는다. 사진 위에 상자를 하나 더 얹으면 히어로가 그만큼 시끄러워진다. */
.cl-src{align-self:flex-start;max-width:100%;display:flex;align-items:center;gap:5px;cursor:pointer;
  font-family:var(--font-mono);font-size:7.5px;letter-spacing:-.2px;color:rgba(255,255,255,.8);
  text-shadow:0 1px 3px rgba(0,0,0,1),0 1px 9px rgba(0,0,0,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.cl-src i{font-style:normal;font-size:8.5px;opacity:.9;flex:0 0 auto;}
/* 캡션은 한 줄을 넘기면 다음 줄로 흘려 쓴다(두 줄까지). 감독이 셋인 영화는 한 줄에
   담기지 않는데, 거기서 말줄임하면 정작 마지막 감독이 사라진다. */
.cl-src{align-items:flex-start;white-space:normal;}
.cl-src > span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal;overflow-wrap:anywhere;line-height:1.4;}
.cl-src:active{color:#fff;}

.cl-wid{padding:13px 15px 12px;border-bottom:1px solid var(--border);}
.cl-wid.last{border-bottom:0;padding-bottom:calc(24px + env(safe-area-inset-bottom));}
.cl-widh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}
/* SESSIONS 머리글은 필터 칩이 붙는 자리다. 칩이 생길 때만 키가 커지면 목록이
   손가락 밑에서 밀린다 — 칩이 없을 때도 그 높이를 비워 둔다. */
.cl-wid.last .cl-widh{min-height:24px;}
.cl-widh .wt{font-family:var(--font-display);font-size:10.5px;letter-spacing:2.2px;color:var(--text3);}
.cl-widh .wn{font-family:var(--font-mono);font-size:9px;color:var(--text3);}
/* 그 대상을 몇 번 만났는지 — 히어로에서 내려온 숫자라 헤더에서 또렷하게 선다 */
.cl-widh .wn.count{display:flex;align-items:baseline;gap:4px;}
.cl-widh .wn.count b{font-family:var(--font-mono);font-size:15px;font-weight:700;line-height:1;
  letter-spacing:-.6px;color:var(--cc,var(--accent));}
.cl-widh .wn.count em{font-style:normal;font-family:var(--font-display);font-size:8.5px;
  letter-spacing:1.8px;color:var(--text3);}

.cl-stamps{display:flex;flex-wrap:wrap;gap:4px;align-items:stretch;}
/* 가로 막대 — 라벨 칸은 그리드가 '가장 긴 이름'에 맞춰 잡는다(고정 폭이면 이름이 잘린다) */
.cl-bars{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;column-gap:9px;row-gap:9px;}
.cl-bar{display:contents;}
/* 누를 자리는 눈에 보이는 것보다 넓다 — 이름 칸도 막대 칸도 행 높이를 꽉 채우고,
   ::after가 위아래로 4px씩 더 물러나 손가락이 줄 사이를 짚어도 그 줄이 잡힌다. */
.cl-bar .bl{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--text2);
  white-space:nowrap;display:flex;align-items:center;justify-content:flex-end;position:relative;}
.cl-bar .bl.ko{font-family:var(--font);font-size:10.5px;letter-spacing:-.3px;}
.cl-bar .bl::after,.cl-bar .bt::after{content:'';position:absolute;inset:-4px 0;}
.cl-bar .bt{height:21px;background:var(--bg2);border-radius:5px;position:relative;
  display:flex;align-items:center;}
/* 축 숫자 — 눈금과 같은 x에 작게. 막대 줄과 같은 껍데기(.cl-bar)를 써서 정렬이 저절로 맞는다 */
.cl-bar.cl-axrow{cursor:default;padding-top:0;padding-bottom:0;}
.cl-bar.cl-axrow .ax{position:relative;height:9px;margin-bottom:-2px;}
.cl-bar.cl-axrow .ax span{position:absolute;bottom:0;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:8.5px;line-height:1;color:var(--text3);}
.cl-bars.has-sel .cl-bar.cl-axrow .bl{opacity:1;}
/* 눈금선 — 연도탭 월간 막대의 그 선. 막대 길이를 눈으로 견주게 해 준다 */
.cl-bar .bt .grid-line{position:absolute;top:0;bottom:0;width:1px;background:var(--border);opacity:.6;}
.cl-bar .bf{height:100%;border-radius:5px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:6px;background:var(--bc,var(--accent));position:relative;z-index:1;}
.cl-bar .bv{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);}
/* 막대가 짧아 숫자가 안 들어가면 밖에 낸다 — 앱 .mbar-val-out과 같은 규칙 */
.cl-bar .bvo{margin-left:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;
  white-space:nowrap;flex:0 0 auto;position:relative;z-index:1;}
.cl-bar .bf{flex:0 0 auto;min-width:3px;}
/* 사이에 빈 해 — 자리는 지키되 아무 말도 하지 않는다. 누를 것도 없다.
   앱의 빈 달과 같은 처리다: 줄 전체가 물러나고, 트랙과 눈금은 그대로 남는다. */
.cl-bar.is-zero{cursor:default;}
.cl-bar.is-zero .bl,.cl-bar.is-zero .bt{opacity:.3;}
.cl-bar.is-zero .bvo.z{color:var(--text3);}

/* 고른 줄 — 앱의 월간 막대와 같다: 나머지가 물러나고, 고른 줄은 제 색으로 한 겹 두른다.
   목록에서 고르는 손짓은 필모그래피·MOST WATCHED와 같은 문법으로 답해야 한다
   (조각을 고르는 BRANDS·PREMIUM FORMATS만 다르다 — 붙어 있는 색면에 선까지 그으면 시끄럽다).

   줄을 두르려면 줄이 상자여야 하는데, 이 격자는 '가장 긴 이름'에 맞춰 라벨 칸을 잡느라
   .cl-bar를 display:contents로 흘려 보내고 있었다. subgrid면 줄이 상자가 되면서도
   라벨 칸은 부모 격자가 계속 잡아 준다. 없는 브라우저에선 예전처럼 대비만으로 간다. */
.cl-bars .bl,.cl-bars .bt{transition:opacity .2s ease,filter .2s ease;}
.cl-bar{cursor:pointer;}
.cl-bars.has-sel .cl-bar:not(.is-sel) .bl,
.cl-bars.has-sel .cl-bar:not(.is-sel) .bt{opacity:.26;}
.cl-bars.has-sel .cl-bar.is-zero .bl,
.cl-bars.has-sel .cl-bar.is-zero .bt{opacity:.14;}
.cl-bar.is-sel .bf{filter:saturate(1.12) brightness(1.06);}
@supports (grid-template-columns: subgrid) {
  .cl-bars{margin:0 -7px;row-gap:5px;}
  .cl-bar{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;
    padding:3px 7px;border-radius:9px;transition:background .18s ease,box-shadow .18s ease;}
  .cl-bar .bl::after,.cl-bar .bt::after{content:none;}
  .cl-bar.is-sel{background:color-mix(in srgb,var(--sel,var(--accent)) 13%,transparent);
    box-shadow:inset 0 0 0 1.5px var(--sel,var(--accent));}
}

/* 점유 막대 + 밖으로 빼는 콜아웃 (BRANDS · PREMIUM FORMATS 공용) */
.cl-top{display:flex;height:28px;border-radius:7px;overflow:hidden;}
.cl-top i{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;}
.cl-top i b{font-family:var(--font-mono);font-size:10px;font-weight:700;color:#fff;letter-spacing:-.4px;
  text-shadow:0 1px 2px rgba(0,0,0,.3);}
.cl-top i em{font-style:normal;font-family:var(--font-mono);font-size:8.5px;font-weight:700;
  color:rgba(255,255,255,.82);white-space:nowrap;letter-spacing:-.3px;}
.cl-top i.plain b{color:var(--text);text-shadow:none;}
.cl-top i.plain em{color:var(--text2);}
/* 점유 막대의 칸도 고를 수 있다 — 여기도 선 대신 대비로 말한다.
   위 덩어리와 아래 확대도는 한 선택을 나눠 갖는다: 무엇을 눌렀든 두 층이 함께 물러나고
   고른 것만 남는다. 한 층만 반응하면 눌러 놓고 다른 층을 다시 읽어야 한다. */
.cl-top i,.cl-grp .mini i{cursor:pointer;transition:opacity .2s ease,filter .2s ease;}
.cl-fmt .cl-grp,.cl-fmt .cl-elbow .eb,.cl-fmt .cl-up,.cl-fmt .cl-dn{transition:opacity .2s ease;}
.cl-top.has-sel i:not(.is-sel),
.cl-fmt.has-sel .cl-top i:not(.is-sel){opacity:.2;}
.cl-fmt.has-sel .cl-grp:not(.is-sel){opacity:.22;}
.cl-fmt.has-sel .cl-elbow .eb:not(.is-sel){opacity:.22;}
.cl-fmt.has-sel .cl-up,.cl-fmt.has-sel .cl-dn{opacity:.3;}
/* 조각을 골랐으면 그 계열 안에서도 그 조각만 남는다 */
.cl-fmt.seg-sel .cl-grp.is-sel .mini i:not(.is-sel){opacity:.22;}
.cl-top i.is-sel,.cl-grp .mini i.is-sel{filter:saturate(1.15) brightness(1.07);}

/* 콜아웃 — 한 벌(.co)이 세로선·가로선·칩을 들고 다닌다.
   .co 자체는 상자를 만들지 않으므로(display:contents) 세 조각은 띠를 기준으로 앉는다.
   앉는 자리는 CSS가 아니라 _clLayout이 실제 폭을 재서 인라인으로 넣는다. */
.cl-up,.cl-dn,.cl-grp .cos{position:relative;}
.cl-up .co,.cl-dn .co,.cl-grp .cos .co,.cl-elbow .eb{display:contents;}
.cl-up i,.cl-dn i,.cl-grp .cos i{position:absolute;width:0;border-left:1px dashed var(--sc);opacity:.75;}
/* 위층으로 올라가는 지시선은 아래층 칩 뒤로 지난다 — 뚫고 지나가면 글자를 못 읽는다 */
.cl-up i,.cl-dn i,.cl-grp .cos i,.cl-up u,.cl-dn u,.cl-grp .cos u{z-index:0;}
.cl-up b,.cl-dn b,.cl-grp .cos b{z-index:1;}
.cl-up u,.cl-dn u,.cl-grp .cos u{position:absolute;height:0;border-top:1px dashed var(--sc);
  opacity:.6;text-decoration:none;}
.cl-up b,.cl-dn b,.cl-grp .cos b{position:absolute;font-family:var(--font-mono);font-size:7.5px;
  font-weight:700;letter-spacing:-.35px;white-space:nowrap;color:var(--text2);border:1px solid var(--sc);
  border-radius:3px;padding:1px 5px;background:var(--card);line-height:1.3;}
/* 계열 구간에서만 꺾여 내려오는 점선 — 막대 전체를 가로지르지 않는다 */
.cl-elbow{position:relative;height:15px;}
.cl-elbow i{position:absolute;border-color:var(--fc);opacity:.72;}
.cl-elbow i.v{width:0;border-left:1px dashed var(--fc);}
.cl-elbow i.h{height:0;border-top:1px dashed var(--fc);}
/* 한 층에 좌우로 — IMAX는 왼쪽, Dolby는 오른쪽. 각자 절반을 써서 부딪치지 않는다 */
.cl-pair{display:flex;gap:11px;align-items:flex-start;}
.cl-grp{flex:1 1 0;min-width:0;display:flex;align-items:flex-start;gap:6px;}
.cl-grp .fam{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:-.3px;
  color:var(--fc);flex:0 0 auto;line-height:19px;}
.cl-grp .wrap{flex:1 1 0;min-width:0;position:relative;}
.cl-grp .mini{display:flex;height:19px;border-radius:4px;overflow:hidden;}
.cl-grp .mini i{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;}
/* 라벨은 줄어들지 않는다 — 줄어들면 '들어가는지'를 잴 수가 없다(_clPlaceMini) */
.cl-grp .mini i b{flex:0 0 auto;font-family:var(--font-mono);font-size:8px;font-weight:700;
  white-space:nowrap;letter-spacing:-.3px;}
.cl-grp .cos{position:absolute;left:0;right:0;top:19px;}

/* 필모그래피 — MOST WATCHED FILMS와 같은 줄을 쓴다(.cl-mwrow). 감독 화면이라
   감독명을 쓸 이유가 없으니 둘째 줄이 통째로 별점과 '그 해 색' 칩의 자리가 된다.
   한 줄에 제목·연도·별점·칩·횟수를 다 밀어 넣던 앞의 판은 여섯 번 본 영화에서 이미 빠듯했다. */
.cl-filmo .mwt{display:flex;align-items:center;gap:6px;min-width:0;}
.cl-filmo .mwt .sx-lane{flex:0 1 auto;}
.cl-filmo .mwt .sx-lane > i{font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-.25px;}
.cl-filmo .mwt u{text-decoration:none;font-family:var(--font-mono);font-size:9.5px;color:var(--text3);flex:0 0 auto;}
/* 별점은 제목 줄에 얹힌 딱지다 — 크기를 안 주면 제목의 12.5px 굵은 글씨를 그대로
   물려받는다. 게다가 별 글리프는 같은 크기에서도 라틴 글자보다 크게 보인다. */
.cl-filmo .mwt em{font-style:normal;font-weight:400;font-size:9px;letter-spacing:.3px;flex:0 0 auto;}
/* 별점 칸은 폭을 못박는다(별 다섯 = 50px). 3.5점이면 별이 짧아지는데, 그때마다 칩이
   앞으로 당겨지면 줄마다 칩이 시작하는 자리가 달라져서 세로로 훑을 수가 없다. */
.cl-filmo .mws{gap:0;}
/* 칩은 잘라내지 않고 다음 줄로 넘긴다 — 한 편을 아홉 번쯤 보면 한 줄로는 안 들어간다.
   그때 뒤를 감추면 '언제 봤는지'가 조용히 사라진다. 줄이 늘어나는 편이 정직하다. */
.cl-filmo .fchips{display:flex;gap:3px;flex-wrap:wrap;row-gap:3px;min-width:0;}
.cl-filmo .fchips i{display:block;flex:0 0 auto;background:var(--sc);color:var(--sk,#fff);border-radius:3px;
  padding:2px 3.5px 2px 2.5px;font-family:var(--font-mono);font-size:7.5px;font-weight:700;
  line-height:1;letter-spacing:-.2px;font-style:normal;}

/* MOST WATCHED FILMS */
.cl-mwf{display:flex;flex-direction:column;gap:5px;}
/* 줄을 위젯 왼쪽 선까지 당긴다 — 썸네일 앞의 여백은 아무 말도 하지 않으면서
   칩이 설 자리를 먹고 있었다. 테두리는 여백 쪽으로 나가 앉는다. */
.cl-mwf{margin:0 -6px;}
.cl-mwrow{display:flex;align-items:center;gap:11px;cursor:pointer;padding:6px 6px;border-radius:9px;
  transition:opacity .18s ease,background .18s ease;}
.cl-mwrow.is-sel{background:color-mix(in srgb,var(--sel,var(--accent)) 14%,transparent);
  box-shadow:inset 0 0 0 1.5px var(--sel,var(--accent));}
.cl-mwf.has-sel .cl-mwrow:not(.is-sel){opacity:.32;}
.cl-mwrow .mwp{width:54px;height:30px;flex:0 0 auto;border-radius:5px;overflow:hidden;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;}
.cl-mwrow .mwp img{width:100%;height:100%;object-fit:cover;display:block;}
.cl-mwrow .mwi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cl-mwrow .mwt{font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-.25px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cl-mwrow .mws{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text2);min-width:0;}
.cl-mwrow .mws span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-mwrow .mws u{text-decoration:none;font-family:var(--font-mono);font-size:9.5px;font-weight:600;color:var(--text3);flex:0 0 auto;}
.cl-mwrow .mws em{font-style:normal;font-size:9.5px;letter-spacing:.3px;flex:0 0 auto;}
.cl-mwrow .mwn{font-family:var(--font-mono);font-size:14px;font-weight:700;min-width:18px;
  text-align:right;flex:0 0 auto;color:var(--text3);}

/* SESSIONS — 앱 ON THIS DAY의 .otd-card 그대로. 날짜 줄만 '그 해 색'을 입는다. */
/* 무엇으로 좁혔는지 — 누르면 풀린다 */
.cl-fchip{display:flex;align-items:center;gap:5px;margin-left:auto;margin-right:8px;cursor:pointer;
  padding:3px 7px;border-radius:16px;border:1px solid var(--fc);background:var(--card);
  font-size:10px;color:var(--text2);letter-spacing:-.2px;max-width:60%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cl-fchip i{width:5px;height:5px;border-radius:50%;background:var(--fc);display:block;flex:0 0 auto;}
.cl-fchip b{color:var(--text3);font-weight:400;flex:0 0 auto;}
/* 별점으로 좁혔을 때는 별이 그 등급 색을 그대로 입는다 — 회색 별은 무엇으로 좁혔는지를
   반쯤 지운다. 위젯에서 고른 그 색이 칩에서도 이어져야 눈이 따라간다. */
.cl-fchip.rate{color:var(--fc);}
.cl-wid .rbar-row.is-sel{outline-color:var(--sel);}
/* 머리의 평균 별점 — 검색 컬렉션과 다이어리 RATINGS가 같은 표시를 공유한다 */
.cl-widh .wn.avg,.rating-head .wn.avg{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:-.2px;
  color:var(--ac,var(--text3));display:flex;align-items:center;gap:3px;}
/* 별 글리프는 기준선에 앉으면 숫자보다 아래로 처져 보인다 — 한 픽셀 반 올려 눈높이를 맞춘다 */
.cl-widh .wn.avg i,.rating-head .wn.avg i{font-style:normal;font-size:10px;line-height:1;position:relative;top:-1.5px;}

/* 회차 목록 — FILMOGRAPHY와 같은 줄이다. 카드도 구분선도 두르지 않고, 줄마다
   둥근 썸네일이 쏙 들어앉아 그 자체로 박자를 만든다.
   본문은 줄상자를 늘려 썸네일 키를 채우지 않는다 — 늘리면 세 줄이 서로 멀어져서
   덩어리로 안 읽힌다. 필모그래피가 깔끔한 건 글자가 빽빽하게 붙어 한 덩어리로 서고,
   그 덩어리가 썸네일 옆에 가운데로 앉기 때문이다. 여기도 그렇게 둔다(본문 49 / 썸네일 58.5).
   활자 위계도 같다: 제목이 주인공이고, 날짜·영화관과 별점·포맷은 그 위아래에 조용히 붙는다. */
.cl-slist{display:flex;flex-direction:column;gap:4px;margin:0 -6px;}
.cl-srow{display:flex;align-items:center;gap:11px;padding:5px 6px;border-radius:10px;cursor:pointer;
  transition:background .18s ease;}
/* 감출 때 쓰는 hidden은 UA 기본 규칙([hidden]{display:none})이라 위의 display:flex에 덮인다.
   명시해 두지 않으면 필터를 걸어도 줄이 그대로 남는다. */
.cl-srow[hidden]{display:none;}
.cl-srow:active{background:var(--card-hover);}
.cl-srow .sp{width:100px;aspect-ratio:16/9;flex:0 0 auto;border-radius:6px;overflow:hidden;
  background:var(--bg2);display:flex;align-items:center;justify-content:center;}
.cl-srow .sp img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.cl-srow .si{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;}
/* 언제 · 어디서 — 한 호흡이라 한 줄에 이어 쓴다. 긴 극장 이름만 줄어든다. */
.cl-srow .sd{display:flex;align-items:baseline;gap:5px;min-width:0;line-height:14px;}
.cl-srow .sd b{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;color:var(--yc,var(--text3));flex:0 0 auto;}
.cl-srow .sd i{font-style:normal;color:var(--text3);opacity:.6;flex:0 0 auto;font-size:9px;}
.cl-srow .sd u{text-decoration:none;font-size:10px;color:var(--text3);letter-spacing:-.1px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 둘째 줄은 무엇을 봤나(제목·개봉년도), 셋째 줄은 어떻게 봤나(별점·포맷).
   감독명을 셋째 줄에 넣어 봤다가 걷었다 — 년도가 제목 옆을 떠나야 했고, 감독 화면에서는
   되풀이인 줄 알면서도 줄이 무너져서 못 뺐다. 레이아웃을 받치려고 남기는 요소는 그 자리가
   아니라는 뜻이다. 감독은 한 번의 탭 거리에 자기 화면을 갖고 있다. */
.cl-srow .stt{display:flex;align-items:center;gap:7px;min-width:0;line-height:17px;}
.cl-srow .stt .sx-lane{flex:0 1 auto;}
.cl-srow .stt .sx-lane > i{font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-.25px;}
.cl-srow .stt em{font-style:normal;flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;
  font-weight:600;color:var(--text3);}
.cl-srow .stags{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;min-width:0;line-height:14px;}
/* 칩과 개봉년도는 줄어들지 않는다. 'Dolby CINEMA'가 'Dolby ...'가 되면 무슨 포맷이었는지
   알 수가 없다 — 이 줄에서 자리를 내주는 건 감독명뿐이고, 감독명은 잘리는 대신 왕복한다. */
.cl-srow .stags .tag{font-size:8.5px;line-height:12px;padding:0 6px;white-space:nowrap;
  flex:0 0 auto;margin-left:2px;}
.cl-srow .sg{font-size:10px;letter-spacing:.3px;flex:0 0 auto;}


@media (prefers-reduced-motion:reduce){
  .sx-field{transition:none;}
}