/* ── Diary cards (데스크톱 .card 계열 이식 — hover 제거, 터치 최적화) ── */
.diary-count{
  font-family:var(--font-mono);font-size:12px;color:var(--text3);
  margin:0 2px 10px;
}
/* ── 연도 배경 히어로 (데스크톱 dash-hero 이식) ── */
.year-hero{
  /* 풀블리드 2.5:1 — 연도 칩 바로 아래부터 화면 양끝까지, 위·아래는 배경으로 은은하게 소멸.
     (높이·여백은 월 차트 12월+범례가 한 화면에 들어오는 한도로 조정) */
  position:relative;aspect-ratio:2.62/1;overflow:hidden;
  margin:-14px -14px 3px;
}
.year-hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-repeat:no-repeat;
  /* 페더: 위·아래 동일 ~2px (사실상 날 것만 무딤) */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 1%, #000 99%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 1%, #000 99%, transparent 100%);
}
.year-hero--plain{
  aspect-ratio:auto;height:64px;background:var(--card);
  margin:2px 0 12px;border:1px solid var(--border);border-radius:13px;
}
.year-hero-year{
  position:absolute;top:12px;left:16px;
  font-family:var(--font-display);font-size:44px;line-height:1;letter-spacing:2px;
}
.year-hero--plain .year-hero-year{color:var(--accent);top:12px;}
.year-hero-btn{
  position:absolute;top:8px;right:8px;width:32px;height:32px;
  border:none;border-radius:9px;cursor:pointer;font-size:16px;
  background:transparent;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.65);
  display:flex;align-items:center;justify-content:center;
}
.year-hero--plain .year-hero-btn{background:transparent;color:var(--text3);}

/* ── 연도 배경 스틸 편집기 ──────────────────────────────────────────────────
   MOST WATCHED DIRECTORS의 포스터 시트와 같은 제목·상태 필드·카드 문법을 쓴다.
   차이는 포스터 한 장 대신 연도 히어로의 실제 크롭을 바로 확인한다는 점뿐이다. */
#bgSheet{padding-bottom:calc(22px + env(safe-area-inset-bottom));}
#bgSheet h2{margin:0 0 2px;font-family:var(--font);font-size:18px;font-weight:650;
  letter-spacing:-.25px;line-height:1.25;color:var(--text);}
.bg-sheet-sub{font-size:10.5px;color:var(--text3);margin:0 0 13px;letter-spacing:.1px;}
.bg-sheet-sub b{font-family:var(--font-mono);color:var(--accent);font-weight:700;}
.bg-form{display:flex;flex-direction:column;gap:10px;padding-bottom:2px;}

/* 히어로와 동일한 비율·크롭. 빈 상태도 장식 아이콘 대신 조용한 프레임으로 둔다. */
.bg-preview{--bg-preview-pos:50%;position:relative;aspect-ratio:2.62/1;overflow:hidden;
  border-radius:13px;background:var(--card);border:1px solid var(--border);
  box-shadow:0 1px 0 color-mix(in srgb,var(--text) 3%,transparent);isolation:isolate;}
.bg-preview img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
  object-position:center var(--bg-preview-pos);opacity:0;transform:scale(1.015);
  transition:opacity .22s ease,object-position .16s ease;}
.bg-preview.has-image img{opacity:1;}
.bg-preview.loading img{opacity:.45;}
.bg-preview.is-broken{border-color:color-mix(in srgb,var(--red) 48%,var(--border));}
.bg-preview-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;color:var(--text3);background:
  linear-gradient(135deg,color-mix(in srgb,var(--text) 2%,transparent),transparent 55%);}
.bg-preview-empty::before,.bg-preview-empty::after{content:"";position:absolute;background:var(--border);opacity:.45;}
.bg-preview-empty::before{width:1px;height:140%;transform:rotate(69deg);}
.bg-preview-empty::after{width:1px;height:140%;transform:rotate(-69deg);}
.bg-preview-empty i{position:relative;z-index:1;width:25px;height:25px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--bg2);font-style:normal;font-size:13px;}
.bg-preview-empty span{position:relative;z-index:1;font-family:var(--font-display);font-size:9px;letter-spacing:2px;}
.bg-preview.has-image .bg-preview-empty{opacity:0;}
.bg-preview-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.16) 44%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.4) 100%);}
.bg-preview-year{position:absolute;left:15px;top:13px;z-index:2;font-family:var(--font-display);
  font-size:40px;line-height:1;letter-spacing:2px;text-shadow:0 2px 12px rgba(0,0,0,.65);}
.bg-preview-badge{position:absolute;right:10px;bottom:9px;z-index:2;padding:4px 7px 3px;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.76);font-family:var(--font-display);font-size:7.5px;letter-spacing:1.5px;
  line-height:1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}

/* 입력과 조절부는 감독 포스터 행과 같은 얇은 금색 테두리·포커스 광택. */
.bg-editor-card{padding:11px;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);}
.bg-editor-card:focus-within{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
.bg-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 1px 8px;}
.bg-card-kicker,.bg-card-note,.bg-control-title{font-family:var(--font-display);}
.bg-card-kicker{font-size:10px;letter-spacing:1.6px;color:var(--text2);}
.bg-card-note{font-size:8px;letter-spacing:1.2px;color:var(--text3);}
.bg-url-field{position:relative;display:block;height:39px;overflow:hidden;border-radius:9px;
  background:color-mix(in srgb,var(--text) 3.5%,transparent);border:1px solid transparent;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.bg-input{display:block;width:100%;height:100%;padding:0 11px;border:0;background:transparent;
  color:var(--text2);caret-color:var(--accent);font-family:var(--font);font-weight:400;letter-spacing:0;}
.bg-input::placeholder{color:color-mix(in srgb,var(--text2) 76%,transparent);font-size:11px;}
.bg-input:focus{outline:none;}
.bg-url-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);}
.bg-url-state{position:absolute;inset:0;display:none;align-items:center;gap:7px;padding:0 10px;
  color:var(--text2);font-family:var(--font);font-size:10.5px;pointer-events:none;}
.bg-url-state i{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  font-family:var(--font-mono);font-size:8px;font-style:normal;font-weight:700;}
.bg-url-field.has-value:not(:focus-within) .bg-input{color:transparent;caret-color:transparent;}
.bg-url-field.has-value:not(:focus-within) .bg-url-state{display:flex;}
.bg-url-field.is-dirty .bg-url-state i{background:color-mix(in srgb,var(--accent) 22%,transparent);}
.bg-url-field.is-dirty .bg-url-state span{color:var(--accent);}

.bg-controls-card{padding:0 12px;}
.bg-control{min-height:58px;display:flex;align-items:center;gap:10px;}
.bg-control-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;}
.bg-control-title{font-size:10px;line-height:1;letter-spacing:1.6px;color:var(--text2);}
.bg-control-note{font-size:9.5px;line-height:1.15;color:var(--text3);}
.bg-control-divider{height:1px;background:var(--border);margin:0 -1px;}
.bg-color-pick{position:relative;display:flex;align-items:center;gap:7px;height:32px;padding:0 8px 0 5px;
  border:1px solid var(--border);border-radius:9px;background:var(--bg2);overflow:hidden;cursor:pointer;}
.bg-color-swatch{width:22px;height:22px;border-radius:6px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.bg-color-hex{font-family:var(--font-mono);font-size:9px;color:var(--text2);}
.bg-color-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.bg-position-control{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;padding:9px 0 10px;}
.bg-position-control .bg-control-copy{grid-column:1;grid-row:1;}
.bg-pos-val{grid-column:2;grid-row:1;align-self:center;min-width:40px;padding:4px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);
  font-family:var(--font-mono);font-size:9px;font-weight:700;text-align:center;}
.bg-position-control input[type="range"]{--bg-pos:50%;grid-column:1/-1;grid-row:2;width:100%;height:22px;
  margin:6px 0 -4px;padding:0;background:transparent;appearance:none;-webkit-appearance:none;}
.bg-position-control input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:999px;
  background:linear-gradient(to right,var(--accent) 0 var(--bg-pos),var(--border) var(--bg-pos) 100%);}
.bg-position-control input[type="range"]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px;
  border:2px solid var(--card);border-radius:50%;background:var(--accent);box-shadow:0 1px 5px rgba(0,0,0,.3);
  appearance:none;-webkit-appearance:none;}
.bg-position-control input[type="range"]::-moz-range-track{height:4px;border-radius:999px;background:var(--border);}
.bg-position-control input[type="range"]::-moz-range-progress{height:4px;border-radius:999px;background:var(--accent);}
.bg-position-control input[type="range"]::-moz-range-thumb{width:17px;height:17px;border:2px solid var(--card);
  border-radius:50%;background:var(--accent);box-shadow:0 1px 5px rgba(0,0,0,.3);}

.bg-status{height:20px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text3);
  font-size:9.5px;transition:color .18s ease;}
.bg-status i{width:5px;height:5px;border-radius:50%;background:var(--text3);opacity:.7;}
#bgSheet.is-dirty .bg-status{color:var(--accent);}
#bgSheet.is-dirty .bg-status i{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);}
.bg-actions{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:8px;}
.bg-action{height:44px;border-radius:11px;font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;
  transition:filter .16s ease,opacity .16s ease,transform .12s ease;}
.bg-action:active:not(:disabled){transform:scale(.985);}
.bg-action-clear{border:1px solid var(--border);background:transparent;color:var(--text2);}
.bg-action-clear:active:not(:disabled){background:var(--card);color:var(--text);}
.bg-action-save{border:1px solid var(--accent);background:var(--accent);color:#151515;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 17%,transparent);}
.bg-action-save:disabled{border-color:var(--border);background:var(--card);color:var(--text3);box-shadow:none;opacity:.62;cursor:default;}
.bg-action-clear:disabled{opacity:.36;cursor:default;}
@media (max-height:730px){.bg-preview{aspect-ratio:3.1/1}.bg-control{min-height:52px}.bg-sheet-sub{margin-bottom:9px}}
@media (prefers-reduced-motion:reduce){.bg-preview img,.bg-url-field,.bg-status,.bg-action{transition:none;}}

/* ── 별점 박스 (분포 막대 + 월/연도 평균, sbox 관례 재사용) ── */
.rating-box{
  background:var(--card);border:1px solid var(--border);border-radius:13px;
  padding:13px 15px 12px;margin:2px 0 14px;cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,0.08);
}
.rating-box:active{border-color:var(--accent2);}
.rating-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px;}
.rating-box .sb-title{cursor:default;padding:0;margin:0;}
.rating-box .sb-title:active{color:var(--text3);}
/* 숫자 연도의 네 통계는 한 카드다. 제목이 섹션을 나누므로 내부 테두리는 두지 않고,
   RATINGS와 같은 제목 크기와 넉넉한 수직 호흡만 남긴다. */
.year-stat-list .cl-wid{padding:0 0 27px;border-bottom:0;}
.year-stat-list .cl-wid:last-child{padding-bottom:0;}
.year-stat-list .cl-widh .wt{font-size:12px;letter-spacing:2.5px;}
/* 이 카드는 필터마다 새 DOM으로 교체된다. WebKit이 내부 항목을 자동 스크롤 앵커로
   고른 뒤 교체 순간 다른 요소로 기준을 옮기지 않게 하고, JS의 명시적 기준점만 쓴다. */
/* 통계 카드의 실제 높이가 처음 확정돼도 iOS 네이티브 맨 위 이동을 되감지 않는다.
   무한 카드 추가는 현재 위치 아래에서만 일어나므로 diary 전체에 꺼도 위치 보존 영향이 없다. */
#diaryContent{overflow-anchor:none;}
.year-stat-list{overflow-anchor:none;}
/* iOS 세그먼트 컨트롤 스타일 — 상세 레이스판의 순위 보기 전환에 사용. */
.rtog{position:relative;display:inline-flex;background:var(--bg2);border:1px solid var(--border);border-radius:13px;padding:2.5px;gap:2px;touch-action:pan-y;}
.rtog-pill{position:absolute;left:2.5px;top:2.5px;bottom:2.5px;width:calc(50% - 3.5px);pointer-events:none;transition:transform .3s cubic-bezier(.3,.9,.35,1);}
.rtog[data-mode="trend"] .rtog-pill{transform:translateX(calc(100% + 2px));}
/* 코어가 외형·부풀기 담당 — 이동(컨테이너)과 분리해 드래그 추적은 즉각, 부풀기는 스프링 */
.rtog-pill-core{position:absolute;inset:0;border-radius:10px;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,0.14);transition:transform .24s cubic-bezier(.34,1.35,.5,1),box-shadow .24s ease;}
.rtog-pill.grab .rtog-pill-core{transform:scale(1.28,1.24);box-shadow:0 3px 9px rgba(0,0,0,0.26);}
.rtog button{position:relative;z-index:1;border:none;background:transparent;padding:5px 13px;color:var(--text3);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s;}
.rtog button.on{color:var(--text);}
[data-theme="dark"] .rtog-pill-core{background:#303641;border:1px solid rgba(255,255,255,0.10);box-shadow:0 1px 4px rgba(0,0,0,0.35);}
@media(prefers-color-scheme:dark){[data-theme="system"] .rtog-pill-core{background:#303641;border:1px solid rgba(255,255,255,0.10);box-shadow:0 1px 4px rgba(0,0,0,0.35);}}
[data-theme="dark"] .rtog-pill.grab .rtog-pill-core{box-shadow:0 3px 12px rgba(0,0,0,0.55);}
@media(prefers-color-scheme:dark){[data-theme="system"] .rtog-pill.grab .rtog-pill-core{box-shadow:0 3px 12px rgba(0,0,0,0.55);}}
[data-theme="dark"] .rtog button{color:#838a96;}
@media(prefers-color-scheme:dark){[data-theme="system"] .rtog button{color:#838a96;}}
[data-theme="dark"] .rtog button.on{color:var(--text);}
@media(prefers-color-scheme:dark){[data-theme="system"] .rtog button.on{color:var(--text);}}
.rtog .rtog-i{width:15px;height:13px;display:block;fill:currentColor;}
/* 전역 복사/선택 차단 — 입력 필드만 예외 (선택·복사 콜아웃이 제스처를 가로채지 않게) */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
input,textarea{-webkit-user-select:text;user-select:text;}
.rbar-chart{display:flex;flex-direction:column;gap:5px;padding:2px;}
.rbar-row{
  display:grid;grid-template-columns:52px 1fr 32px;align-items:center;gap:9px;
  padding:2px 4px;border-radius:6px;outline:1.5px solid transparent;outline-offset:0;transition:opacity .18s;
}
.rbar-row[data-rating]{cursor:pointer;}
.rbar-row[data-rating]:active{opacity:.6;}
.rbar-row.is-dim{opacity:.32;}
.rbar-lab{font-size:10px;text-align:right;white-space:nowrap;line-height:1;letter-spacing:-.3px;}
.rbar-track{height:21px;background:var(--bg2);border-radius:4px;position:relative;overflow:hidden;display:flex;align-items:center;}
.rbar-fill{height:100%;border-radius:4px;display:flex;align-items:center;justify-content:flex-end;transition:width .5s cubic-bezier(.22,1,.36,1);}
.rbar-val{font-family:var(--font-mono);font-size:10px;font-weight:700;color:#fff;padding-right:5px;}
.rbar-val-out{font-family:var(--font-mono);font-size:10px;font-weight:700;padding-left:5px;}
.rbar-pct{font-family:var(--font-mono);font-size:9px;color:var(--text2);text-align:right;}
.rating-periods{margin:12px -6px 0;}
.rating-periods .cn-seasons{min-width:0;}
.rating-periods .rating-years{gap:3px;overflow-x:auto;scrollbar-width:none;}
.rating-periods .rating-years::-webkit-scrollbar{display:none;}
.rating-periods .rating-years .scap{flex:1 0 30px;padding:3.5px 0 3px;border-radius:7px;gap:1px;}
.rating-periods .rating-years.compact .scap{flex:1 1 20px;}
.rating-periods .rating-years .scap em{font-size:7px;letter-spacing:-.2px;}
.rating-periods .rating-years .scap b{font-size:8px;min-height:8px;}

/* ── ALL-TIME 통계 박스 (컨테이너·타이틀은 pace-card 관례) ── */
.sbox{
  background:var(--card);border:1px solid var(--border);border-radius:13px;
  padding:13px 15px 12px;margin:2px 0 14px;cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,0.08);
}
.sbox:active{border-color:var(--accent2);}
.sb-title{font-family:var(--font-display);font-size:12px;letter-spacing:2.5px;color:var(--text3);display:block;}
.sb-tr{display:flex;justify-content:space-between;align-items:center;}
/* 타이틀 = 상세 차트 진입 버튼 (통탭 진입 폐지: 스크럽 오탭 방지) */
.sb-title,.pace-title{cursor:pointer;padding:6px 6px 6px 0;margin:-6px 0;}
.sb-title:active,.pace-title:active{color:var(--accent);}
.sb-ctl{display:flex;align-items:center;margin:-6px -9px -6px 0;}
.sb-date{font-style:normal;font-family:var(--font-mono);font-size:9px;color:var(--text2);margin-right:3px;letter-spacing:0;}
.sb-play,.sb-ff{border:none;background:none;color:var(--text3);padding:6px 7px;display:flex;align-items:center;cursor:pointer;opacity:.85;}
.sb-play:active,.sb-ff:active{color:var(--accent);opacity:1;}
.sb-play-i{width:11px;height:13px;display:block;}
.sb-ff-i{width:13px;height:13px;display:block;}
.sb-play .i-pause{display:none;}
.sb-ctl[data-st="playing"] .sb-play .i-play{display:none;}
.sb-ctl[data-st="playing"] .sb-play .i-pause{display:block;}
.sb-ctl[data-st="idle"] .sb-date,.sb-ctl[data-st="idle"] .sb-ff{display:none;}
.sb-ctl[data-spd="2"] .sb-ff,.sb-ctl[data-spd="4"] .sb-ff{color:var(--accent);opacity:1;} /* 배속 켜짐 표시 */
.sb-ff::after{font-family:var(--font-mono);font-size:7.5px;font-weight:700;margin-left:1.5px;line-height:1;}
.sb-ctl[data-spd="2"] .sb-ff::after{content:'2\d7';}
.sb-ctl[data-spd="4"] .sb-ff::after{content:'4\d7';}
/* VS 정중앙(1fr 균등분할) + 이름 한 줄(nowrap 9.5px) — 왼쪽 절반에 긴 이름이
   그대로 들어가는 걸 실기기로 확인(사용자). 초협소 기기만 말줄임 폴백 */
.sb-duel{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:8px;margin:9px 0 3px;}
.sb-duel .nm{font-size:9.5px;color:var(--text2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;letter-spacing:-.1px;}
.sb-duel .nm.r{text-align:right;}
.sb-duel .n{font-family:var(--font-mono);font-weight:700;font-size:30px;line-height:1;}
.sb-duel .vs{font-family:var(--font-display);font-size:13px;letter-spacing:1px;color:var(--text3);display:flex;flex-direction:column;align-items:center;gap:2px;}
.sb-gap{font-style:normal;font-family:var(--font-gap);font-size:8.5px;font-weight:700;letter-spacing:0;line-height:1;border:1px solid currentColor;border-radius:999px;padding:2.5px 6.5px;} /* 테두리 = 글자색(currentColor) — 재생 중 리더 색 반전 시 같이 바뀜 */
.sb-chart{margin:3px 0 0;}
.sb-chart svg{display:block;width:100%;height:auto;}
.sb-rows{margin-top:10px;display:flex;flex-direction:column;gap:7px;}
.sb-row{display:grid;grid-template-columns:1fr 48px;align-items:center;gap:8px;}
.sb-row .nm{min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.sb-row .pct{font-size:9.5px;color:var(--text2);font-family:var(--font-mono);margin-left:5px;}
.sb-row .bar{height:3px;border-radius:2px;margin-top:3px;display:flex;overflow:hidden;}
.sb-row .bar i{height:100%;display:block;}
.sb-row .ct{font-family:var(--font-mono);font-weight:700;font-size:13px;text-align:right;}
.sb-row--fmt .nm{font-size:13px;}
.sb-row--fmt .ct{font-size:20px;}
.sb-row--fmt .bar{height:4px;margin-top:4px;}
/* CINEMAS 카드 레인 = 상세 cn-lane 디자인 재사용 (컨테이너만 카드 여백 유지) */
.sb-rows.cn-lanes{position:relative;display:block;}
/* BRANDS 상세 — SHARE 리본 + SEASONS 챔피언 스트립 */
.cn-sharewrap,.cn-seasonwrap{margin:0 14px;}
.cn-share{display:flex;height:14px;border-radius:7px;overflow:hidden;}
.cn-share i{display:flex;align-items:center;justify-content:center;min-width:0;transition:width .3s ease;}
.cn-share i b{font-family:var(--font-mono);font-size:7.5px;font-weight:700;color:#fff;white-space:nowrap;}
.cn-seasons{display:flex;gap:5px;}
.scap{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1.5px;padding:4px 0 3.5px;border-radius:9px;border:1px solid var(--border);opacity:.35;transition:opacity .25s ease;}
.scap em{font-style:normal;font-family:var(--font-mono);font-size:8.5px;font-weight:700;line-height:1;color:var(--text3);}
.scap b{font-family:var(--font-mono);font-size:10.5px;font-weight:700;line-height:1;color:var(--text3);min-height:10px;}
.scap.won{opacity:1;border-color:transparent;background:var(--sc);}
.scap.won em,.scap.won b{color:#fff;}
.scap.live{opacity:1;border-color:var(--sc);}
.scap.live em,.scap.live b{color:var(--sc);}
.scap.stamp{animation:scapPop .4s cubic-bezier(.3,1.5,.5,1);}
/* 연도별 MONTHS 스트립 — 12칩이라 조금 작게 */
.cn-seasons.m12{gap:3px;}
.cn-seasons.m12 .scap{padding:3.5px 0 3px;border-radius:7px;gap:1px;}
.cn-seasons.m12 .scap em{font-size:7.5px;}
.cn-seasons.m12 .scap b{font-size:8px;min-height:8px;}
.scap.won.tie{background:linear-gradient(90deg,var(--sc) 0 50%,var(--sc2) 50% 100%) border-box;}
/* FORMATS LEAD 마진 차트 — 0선 위=1번(IMAX) 리드, 아래=2번(Dolby) 리드 */
.cn-leadwrap .cn-laneh{margin:0 14px;}
.cn-lead{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;}
/* CINEMAS 순위 토글 스위치(타이틀 옆) + 접힘 요소 */
.cn-ranktog{margin-left:10px;flex:0 0 auto;touch-action:none;}
.cn-slidewrap{display:flex;flex-direction:column;gap:7px;will-change:transform;}
.cn-slidewrap > *{flex-shrink:0;}
.cn-slidewrap.cn-noanim *{transition:none !important;animation:none !important;}
.cn-hidden{display:none !important;}
/* FORMATS 세그 레인 — 순위 배지 + 세그 스택 바 + 서브라벨 (안팎 공용) */
.flane{position:absolute;left:0;right:0;height:40px;display:grid;grid-template-columns:30px 1fr 40px;align-items:center;gap:8px;
  transition:top .45s cubic-bezier(.3,.9,.35,1.08),opacity .3s ease;}
.flane .rk{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:#fff;background:var(--vc);border-radius:7px;padding:3px 0;text-align:center;line-height:1;}
.flane .fvn{min-width:0;display:flex;flex-direction:column;gap:3px;}
.flane .fnm{font-size:11.5px;font-weight:700;color:var(--text);line-height:1;}
.flane .fbar{height:7px;border-radius:4px;overflow:hidden;display:flex;transition:width .3s ease;}
.flane .fbar i{transition:width .3s ease;}
.flane .fsub{font-family:var(--font-mono);font-size:7.5px;color:var(--text3);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.flane .ct{font-family:var(--font-mono);font-weight:700;font-size:12.5px;text-align:right;color:var(--vc);}
@keyframes scapPop{0%{transform:scale(.65);}100%{transform:scale(1);}}
/* 트렌드 상세 — 라벨은 시스템 폰트, 숫자는 모노(데스크톱 chart-core 관례).
   .pv-panel-year 기본 규칙이 뒤에 와도 이기도록 복합 선택자 포함 */
.tv-lab, .pv-panel-year.tv-lab, .pv-chip .tv-lab{font-style:normal;font-family:var(--font);font-weight:600;letter-spacing:0;}

.sb-sub{font-size:9.5px;color:var(--text3);margin-top:3px;display:block;font-family:var(--font-mono);}

.cards-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
  gap:12px;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:13px;
  overflow:hidden;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,0.08);
  animation:fadeUp .22s ease both;display:flex;flex-direction:column;
  contain:layout style paint;content-visibility:auto;contain-intrinsic-size:0 300px;
}
.card:active{border-color:var(--accent2);}
.card-poster{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg2);position:relative;flex-shrink:0;}
.card-poster img{width:100%;height:100%;object-fit:cover;transition:opacity .15s ease;opacity:0;}
.card-poster img.loaded{opacity:1;}
.card-poster .no-img,
.no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:28px;}
.card-body{padding:13px 15px;display:flex;gap:11px;flex:1;}
.card-date{min-width:42px;text-align:center;flex-shrink:0;}
.card-date .mo{font-family:var(--font-display);font-size:12px;letter-spacing:1px;line-height:1;margin-bottom:1px;}
.card-date .day{font-family:var(--font-display);font-size:34px;line-height:1;color:var(--text);}
.card-date .dow{font-family:var(--font-display);font-size:11px;letter-spacing:1.5px;color:var(--text2);margin-top:2px;}
.card-date .stars-mini{margin-top:5px;font-size:10px;line-height:1;letter-spacing:0.5px;}
.stars-5{color:#d4a017}.stars-4-5{color:#b0b0b0}.stars-4{color:#9b59b6}.stars-3-5{color:#5b9bd5}.stars-3{color:#7ec87e}.stars-2{color:#e05555}.stars-1{color:#e05555}.stars-0{color:#555}
.card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.card-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;letter-spacing:-0.2px;}
.card-director{font-size:12px;color:var(--text2);display:flex;align-items:center;flex-wrap:wrap;row-gap:1px;}
.card-director .dir-dot{margin:0 5px;color:var(--text3);flex-shrink:0;}
.card-director .dir-year{color:var(--text3);font-size:11px;flex-shrink:0;}
.card-meta{font-size:11px;color:var(--text3);display:flex;flex-wrap:wrap;align-items:center;line-height:1.6;}
.card-meta .dot{margin:0 4px;color:var(--text3);flex-shrink:0;}
.card-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px;}
.tag{background:var(--tag-bg);color:var(--tag-text);padding:1px 7px;border-radius:20px;font-size:10px;white-space:nowrap;border:1px solid var(--border);}
.tag-imax{border-color:#00b4d8;color:#00b4d8;}
.tag-dolby{border-color:#a855f7;color:#a855f7;}
.card-count{min-width:52px;flex-shrink:0;border-left:1px solid var(--border);padding-left:11px;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:right;}
.card-count .cy{font-family:var(--font-mono);font-size:14px;color:var(--accent);line-height:1.2;}
.card-count .ct{font-family:var(--font-mono);font-size:12px;color:var(--text3);line-height:1.2;}
.diary-more{height:40px;}