/* ── RELEASE YEARS(views-release.js) — ALL-TIME 카드와 창(PWA 2.0.223) ─────────────────────────────── */
/* 카드 — 그래프는 카드 안쪽 여백까지 넓혀 쓴다(FILMS PER MONTH 카드처럼) */
.ry-card-svg{display:block;width:calc(100% + 16px);margin:12px -8px 0;overflow:visible;}   /* 제목 밑 12pt — 연대 묶음이 제목에 붙어 보였다(사용자, 2.0.224; FILMS PER MONTH 카드는 10) */
/* 본 해 범례 — ’19와 숫자는 한 덩어리(flex 칸이 나뉘면 ’ 19로 벌어진다) */
.ry-leg{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;font:700 9.5px/1 var(--font-mono);}
.ry-leg > span{display:inline-flex;align-items:center;gap:4px;}
.ry-leg > span > i{width:7px;height:7px;border-radius:2px;display:block;}

/* 창 — RATINGS · DAY & TIME 창과 같은 문서형 */
#ryView{padding:0;background:var(--bg);}
#ryView .vhdr .sel-chip:not([hidden]) + .rt-x{margin-left:0;}   /* [알약][✕]는 .vhdr의 gap 8px로 */
.ry-sec1{margin-top:6px;}
/* DECADES — 잔디 기둥. 판은 좌우 8pt씩 넓혀(Y축 숫자를 맨 왼쪽에) */
.ry-dec{position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.ry-dsvg{display:block;width:calc(100% + 16px);margin:0 -8px;overflow:visible;cursor:pointer;}
.ry-dsvg g.col{transition:opacity .2s;-webkit-tap-highlight-color:transparent;}
.ry-dsvg.picked g.col{opacity:.22;}
.ry-dsvg.picked g.col.sel{opacity:1;}
.ry-dsvg.exploring g.col{opacity:.25;}
.ry-dsvg.exploring g.col.on{opacity:1;}
/* YEARS — 20+ MONTHS처럼 옆으로 민다(.mhc-wrap). 꾹 누르는 동안 그래프는 흐려지고 판이 덮는다 */
.ry-yrs{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.ry-ysvg{display:block;cursor:pointer;}
.ry-ysvg :is(g.ryb,g.ryg,.ry-tk){transition:opacity .2s;}
.ry-ysvg.picked g.ryb{opacity:.18;}
.ry-ysvg.picked g.ryb.sel{opacity:1;}
.ry-ysvg.picked g.ryg{opacity:.4;}
.ry-ysvg.picked g.ryg.sel{opacity:1;}
.ry-ysvg.exploring :is(g.ryb,g.ryg,.ry-tk){opacity:.25;}
/* 훑기 판 — 앱 판(.wb-cdock) 그대로에 막대만 본 해 색으로 쌓는다 */
.wb-cdock.ry-cdock i{display:flex;flex-direction:column-reverse;overflow:hidden;}
.wb-cdock.ry-cdock i u{display:block;width:100%;flex:none;}

/* 칸 수 말풍선 — 대상 바로 곁에, 작은 꼭지(WEEKDAY 말풍선 .whg-nt: 8pt 네모를 45도, 끝만 2pt 둥글게) */
.ry-hud{position:absolute;z-index:3;left:0;top:0;background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:7px 9px 8px;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none;}
.ry-hud.ry-fixed{position:fixed;z-index:401;display:block;}
.ry-hud[hidden]{display:none;}
[data-theme="light"] .ry-hud{box-shadow:0 6px 18px rgba(0,0,0,.13);}
@media(prefers-color-scheme:light){[data-theme="system"] .ry-hud{box-shadow:0 6px 18px rgba(0,0,0,.13);}}
.ry-nt{position:absolute;width:8px;height:8px;background:var(--card);border:1px solid var(--border);transform:rotate(45deg);}
.ry-nt.d{bottom:-4.5px;border-top-color:transparent;border-left-color:transparent;border-radius:0 0 2px 0;}
.ry-nt.r{right:-4.5px;border-bottom-color:transparent;border-left-color:transparent;border-radius:0 2px 0 0;}
.ry-nt.l{left:-4.5px;border-top-color:transparent;border-right-color:transparent;border-radius:0 0 0 2px;}
.ry-hh{display:flex;gap:10px;align-items:baseline;font:700 11px/1 var(--font-mono);}
.ry-hh em{font-style:normal;color:var(--text);margin-left:auto;}
.ry-hb{display:flex;gap:10px;align-items:flex-end;margin-top:6px;}
.ry-hg{display:grid;grid-template-columns:repeat(10,5px);gap:1px;}
.ry-hg i{width:5px;height:5px;border-radius:1px;display:block;}
.ry-hl{display:grid;grid-auto-flow:column;column-gap:11px;row-gap:2.5px;font:700 9px/1 var(--font-mono);}
.ry-hl > span{display:flex;gap:4px;align-items:center;white-space:nowrap;}
.ry-hl > span > i{width:6px;height:6px;border-radius:1.5px;display:block;flex:none;}
.ry-hl > span > u{text-decoration:none;}
.ry-hl > span > b{margin-left:auto;padding-left:7px;color:var(--text);}