/* ── FILMS PER WEEK(views-weeks.js) — 연도 탭 카드 · 연도 창 · WEEK STREAK의 LEADERBOARD 창 ──
   창의 칸 · 랭킹 · 기록 · SEE ALL은 FILMS PER MONTH 창(app-months.css)의 것을 그대로 쓴다 — 여기는 주 단위에만 있는 것 */
.wk-card-svg{display:block;width:calc(100% + 16px);margin:6px -8px 0;overflow:visible;}

#weekView,#weekBoard{padding:0;background:var(--bg);}
.wk-body{background:var(--bg);}
.wk-wrap{padding:6px 16px calc(28px + env(safe-area-inset-bottom));}
.wk-bleed{margin:0 -16px;}   /* 잔디 · 그래프는 화면 끝까지(FILMS PER MONTH 그래프와 같다) */
.wk-bleed svg{display:block;}
.wk-hit{cursor:pointer;-webkit-tap-highlight-color:transparent;}

/* 잔디 밑 하루 칸 범례 — GitHub 잔디처럼 오른쪽 끝에 작게, 등급 범례는 원래 한 줄 그대로(두 줄을 나란히 두면 안 예뻤다 — 사용자) */
.wk-dleg{display:flex;justify-content:flex-end;align-items:center;gap:3px;margin:5px 2px 0;font:400 7.5px var(--font-mono);letter-spacing:.06em;color:var(--text3);}
.wk-dleg i{width:8px;height:8px;border-radius:2px;}
.wk-dleg span:first-child{margin-right:3px;}
.wk-dleg span:last-child{margin-left:3px;}

/* 고른 주만 또렷 — 나머지는 FILMS PER MONTH 창처럼 확 흐린다 */
.wkg-w,.wkc-b{transition:opacity .25s;}
.wkg.has-sel .wkg-w:not(.on){opacity:.22;}
.wkc.has-sel .wkc-b:not(.on){opacity:.18;}
.wkc-wn{transition:opacity .25s;}
.wkc.has-sel .wkc-wn:not(.on){opacity:.18;}
.wkc.has-sel .wkc-band{opacity:.5;}
/* 고른 주의 막대 — 흐리게 깔린 5편 미만 막대도 제 색으로, 숨겨 둔 편수(0편이면 바닥에 0)도 띄운다 */
.wkc .sn{opacity:0;transition:opacity .25s;}
.wkc.has-sel .wkc-b.on .bar{opacity:1;}
.wkc.has-sel .wkc-b.on .sn{opacity:1;}

/* RANKING · LONGEST STREAKS 줄 */
.wk-rrow{grid-template-columns:34px 118px 1fr 26px;}
.wk-rrow.y{grid-template-columns:34px 142px 1fr 26px;}
.wk-rl{color:var(--text);}
.wk-rl em{font-style:normal;font-weight:400;font-size:9px;color:var(--text3);margin-left:5px;}
.wk-srow{grid-template-columns:34px 150px 1fr 26px;}   /* 누르면 그 연속 주 전체(2.0.142) */
.wkb{transition:opacity .25s;}
.wkb.off{opacity:.12;}
.wkb.lit{opacity:1;}
.wkt2.run-sel .wkg-w.on .cv{transform:none;}   /* 연속 주 — 이어진 칸을 키우면 서로 겹친다 */
.wk-sl{font-size:9.5px;font-weight:400;color:var(--text2);}
.wk-sl b{font-weight:700;}

/* LEADERBOARD 창 위 — 모든 해 × 53주, 해마다 두 줄(1~26주 · 27~53주) 칸마다 편수(PWA 2.0.121). 칸은 톡으로 고른다 */
.wkt2-w{margin-top:4px;}
.wkt2{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
/* 꾹 눌러 훑기 — 누른 반년 줄이 그 자리에서 맥 Dock처럼 부푼다(표 전체는 흐려진다 — 칸마다가 아니라 표 하나를 흐려 첫 장면이 늦지 않게) */
.wkt2{transition:opacity .15s;}
.wkt2.exploring{opacity:.3;}
.wb-dock{position:fixed;z-index:400;pointer-events:none;display:none;flex-direction:column;justify-content:center;gap:3px;padding:4px 0;border-radius:8px;
  background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 .5px rgba(127,127,127,.25);}
.wb-dock .r{display:flex;align-items:center;gap:1.2px;}
.wb-dock .r:not(.act) span{opacity:.6;}   /* 짚지 않은 줄 — 낮고 좁고 옅게 */
.wb-dock span{flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;color:#fff;}
.wb-dock span.z{color:var(--text3);}
.wb-dock span.on{box-shadow:0 3px 8px rgba(0,0,0,.28);}
[data-theme="light"] .wb-dock span.n{color:var(--text);}
@media(prefers-color-scheme:light){[data-theme="system"] .wb-dock span.n{color:var(--text);}}
/* EVERY DAY 잔디 — 세로줄이 옆으로만 넓어지는 판(높이 그대로, 잔디 칸 안으로 잘린다) */
#wbGrass .wkg{transition:opacity .15s;}
.wkg:not(.wkt2).exploring .wkg-w{opacity:.3;}   /* 칸만 흐린다 — 달 · 해 이름 줄은 또렷하게(훑는 중에도 해가 보이게) */
.wb-gdock{position:fixed;z-index:400;pointer-events:none;display:none;overflow:hidden;background:var(--bg);}
.wb-gdock > div{position:absolute;top:0;bottom:0;display:flex;padding:13px 0 5px;}
.wb-gdock b{flex:none;display:flex;flex-direction:column;align-items:center;}
.wb-gdock i{flex:none;height:11.8px;margin-bottom:1.7px;display:flex;align-items:center;justify-content:center;font:700 8px var(--font-mono);font-style:normal;color:#fff;}
.wb-gdock i u{text-decoration:none;}
.wb-gdock i.c{margin:3px 0 0;}   /* 그 주 편수 — 잔디처럼 요일 칸과 조금 떨어져 */
.wb-gdock i.z{color:var(--text3);}
.wb-gdock b.on{filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));}
[data-theme="light"] .wb-gdock i.d,[data-theme="light"] .wb-gdock i.n{color:var(--text);}
@media(prefers-color-scheme:light){[data-theme="system"] .wb-gdock i.d,[data-theme="system"] .wb-gdock i.n{color:var(--text);}}
/* 7+ WEEKS 그래프 — 막대가 옆으로만 넓어지는 판(높이는 편수 그대로, 그래프 칸 안으로 잘린다) */
#wbChart .wkc .wkc-b{transition:opacity .15s;}
.wkc.exploring :is(.wkc-b,.wkc-wn){opacity:.25;}
.wb-cdock{position:fixed;z-index:400;pointer-events:none;display:none;overflow:hidden;background:var(--bg);}
.wb-cdock > div{position:absolute;top:0;bottom:0;display:flex;align-items:flex-end;}
.wb-cdock b{flex:none;position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;}
.wb-cdock i{flex:none;display:block;}
.wb-cdock s{position:absolute;left:0;right:0;text-align:center;text-decoration:none;font:700 9px/1 var(--font-mono);white-space:nowrap;}
.wb-cdock b.on i{box-shadow:0 3px 8px rgba(0,0,0,.35);}
.wb-cdock > div{padding-bottom:16px;}   /* 밑 — 눈금 줄(높이는 JS가 연속 주 띠만큼) */
.wb-cdock .ax{position:absolute;left:0;right:0;bottom:0;height:16px;}
.wb-gdock .ax{position:absolute;left:0;right:0;top:0;height:13px;}   /* 잔디 — 판 맨 위 이름 줄 */
/* 이름 줄의 글자 — 바로 아래 칸(> span)만. ’25의 둥근 ’(.yq, 안쪽 span)까지 absolute로 잡혀 ’가 사라졌다(2.0.137) */
:is(.wb-cdock,.wb-gdock) .ax > span{position:absolute;font:400 7.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--text3);white-space:nowrap;}
.wb-gdock .ax > span{bottom:2px;}   /* 잔디 — 판 맨 위 이름 줄, 글자 밑을 맞춘다(W23이 달 이름보다 낮게 처졌다 — 사용자) */
.wb-cdock .ax > span{top:5px;}   /* 그래프 — 막대 바로 밑에(띠 자리를 덮는 줄의 위쪽) */
:is(.wb-cdock,.wb-gdock) .ax > span.on{transform:translateX(-50%);font:700 9px/1 var(--font-mono);z-index:2;}   /* 짚은 주 W8(그해 색) */
:is(.wb-cdock,.wb-gdock) .ax > span.yr{font:700 8.5px/1 var(--font-mono);}
:is(.wb-cdock,.wb-gdock) .ax > span.pin{z-index:1;padding-right:6px;background:linear-gradient(90deg,var(--bg) 75%,transparent);}
.wb-dlab{position:fixed;z-index:401;pointer-events:none;display:none;transform:translateX(-50%);font:700 9px var(--font-mono);letter-spacing:.04em;white-space:nowrap;}
/* 고른 주 — 나머지는 흐려지고(.wkg.has-sel) 그 칸만 살짝 커진다(검은 테 없이) */
.wkt2 .cv{transition:transform .2s;}   /* 기준점은 칸마다 style의 transform-origin(칸 가운데, SVG 좌표) */
.wkt2 .wkg-w.on .cv{transform:scale(1.18);}
/* 칸 숫자는 테마마다 한 색 — 라이트는 진한 글자(FILMS PER MONTH 표와 같다: 흰 글자는 연한 칸에서 안 읽힌다). 표 · 잔디 맨 밑 편수 네모 모두.
   0편인 주는 --text3의 연한 0(빈 네모만 두면 기록이 없는 건지 0인지 헷갈렸다) */
[data-theme="light"] .wkg text.n{fill:var(--text);}
@media(prefers-color-scheme:light){[data-theme="system"] .wkg text.n{fill:var(--text);}}
/* EVERY DAY — 모든 해가 이어진 잔디(LEADERBOARD, PWA 2.0.125): 요일 이름은 왼쪽에 서 있고 잔디만 옆으로 민다(최근 쪽부터 열린다) */
.wbg{display:flex;margin:0 -16px;position:relative;}
/* 왼쪽 끝 해 이름 — 지금 왼쪽 끝 주의 해(잔디 이름 줄과 같은 자리 · 글꼴). 뒤의 달 이름은 바탕색으로 가린다 */
.wbg-yr{position:absolute;left:20px;top:0;z-index:2;height:12px;padding:0 6px 0 4px;font:700 8.5px/12px var(--font-mono);pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 75%,transparent);}   /* 바로 숨고 바로 나타난다 — 빨리 흐를 때 진짜 ’25와 겹쳐 보였다 */
.wbg-yr.off{opacity:0;}
.wbg-l{flex:none;width:20px;}
.wbg-l svg,.wbg-s svg{display:block;}
/* 왼쪽 끝을 흐리는 가림은 없다 — 맨 왼쪽 세로줄이 잘 안 보였다(2.0.125~2.0.126, 사용자) */
.wbg-s{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;}
.wbg-s::-webkit-scrollbar{display:none;}
.wbg-s{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
#wbGt{transition:color .25s;}   /* FILMS PER DAY — 잔디를 밀면 그해 색으로 */
#wbDleg i{transition:background .25s;}   /* 하루 칸 범례 — 잔디 밑 오른쪽, 가운데 보이는 해의 색 */

/* WEEK STREAK 시트 머리 — 제목 오른쪽 LEADERBOARD. 웹은 유리처럼 보이는 알약(앱은 진짜 유리를 위에 그린다) */
.wk-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 5px;}
.sheet .wk-sheet-head h2.wk-sheet-title{margin:0;}
.wk-lb-btn{flex:none;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 11px;border-radius:99px;cursor:pointer;
  border:.5px solid rgba(255,255,255,.9);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);
  box-shadow:0 6px 18px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.04);
  color:#3DC9B0;font:700 9.5px var(--font-mono);letter-spacing:1.3px;-webkit-tap-highlight-color:transparent;transition:transform .15s;}
.wk-lb-btn:active{transform:scale(.96);}
/* 앱이 진짜 유리를 그 자리에 띄운 동안 — 자리 · 누름만 지키고 바로 투명하게(유리가 시트와 함께 움직이니 바꿔 끼우는 순간이 없다) */
html.in-app .wk-lb-btn.sg-on{color:transparent;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none;}
.wk-lb-btn svg{display:block;}
[data-theme="dark"] .wk-lb-btn{color:#4FE0C5;border-color:rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.2);}
@media(prefers-color-scheme:dark){[data-theme="system"] .wk-lb-btn{color:#4FE0C5;border-color:rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.2);}}