/* Cinema Diary Mobile — ALL-TIME Films per Month */
.month-history-card{cursor:default;}
.month-history-card:active{border-color:var(--border);}
.mh-card-title{appearance:none;border:0;background:transparent;text-align:left;line-height:normal;}
.mh-bars{margin-top:11px;}
/* 막대를 누르면 그 달만 남는다 — 고른 표시·흐림은 .cl-bars가 이미 갖고 있다
   (RATINGS 막대와 같은 문법). 축 줄만 누를 것이 없다. */
.mh-bars .cl-bar.cl-axrow{cursor:default;}
/* 'MAY 2024'는 한 덩어리다 — 연도도 그 막대의 '그 해 색'을 같은 진하기로 입는다.
   회색으로 떼어 놓으면 색이 연도를 뜻하는 이 카드에서 정작 연도만 색이 없었다.
   물러서는 일은 크기(9.5 대 10.5)만으로 충분하다. */
.mh-bars .bl u{text-decoration:none;font-family:var(--font-mono);font-size:9.5px;font-weight:600;
  color:inherit;margin-left:5px;}

/* ── 전체화면 껍데기 ────────────────────────────────────────────────────────
   이 화면은 .pace-view를 쓰지 않는다. 겹쳐 뜨는 상자(position:fixed·inset:0·
   z-index:190·overscroll-behavior:none)를 물려받은 채로 '문서가 스크롤하게'
   바꾸려다 세 번 실패했다(v1.33.46~49) — 데스크톱 두 엔진에서는 멀쩡한데
   실기기에서만 안 움직였고, 물려받은 값 중 무엇이 걸리는지 못 짚었다.
   그래서 껍데기부터 새로 세운다: HALL OF FAME처럼 본문 자리를 차지하는 평범한
   블록이고, 물려받는 규칙이 하나도 없다. */
.month-doc{--mhHead:34px;display:none;}
body.month-open{padding-top:0;padding-bottom:0;}
body.month-open > .header,
body.month-open > .gauge-strip,
body.month-open > main,
body.month-open > .safe-cap,
body.month-open > .app-footer{display:none;}
body.month-open > .month-doc{display:block;background:var(--bg);min-height:100dvh;
  padding:calc(var(--mhHead) + env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom));}
/* ✕는 늘 손 닿아야 하므로 헤더만 fixed (HOF와 같은 이유·같은 치수 규칙) */
body.month-open > .month-doc > .month-doc-head{position:fixed;top:0;left:0;right:0;z-index:20;
  background:var(--bg);display:flex;align-items:center;
  height:calc(var(--mhHead) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 10px 0 12px;}
.month-doc-head{display:flex;align-items:center;padding:2px 10px 0 12px;}
.month-doc-title{font-family:var(--font-display);font-size:12px;letter-spacing:2.2px;color:var(--text3);}
.month-doc-head #monthCloseBtn{margin-left:auto;width:30px;min-width:30px;height:30px;}
.month-history-body{padding:2px 11px 0;}

/* ── 되돌림 모드 — 문서가 안 움직이는 기기 ───────────────────────────────────
   열자마자 실제로 스크롤되는지 재고, 안 되면 JS가 이 클래스를 붙인다.
   다시 겹쳐 뜨는 상자가 되고 안쪽 본문이 스크롤을 쥔다. 상태바 탭은 못 받지만
   '아예 안 내려가는' 일만은 없다 — 그게 v1.33.46~49에서 실제로 났던 일이다. */
body.month-open.month-inner > .month-doc{position:fixed;inset:0;z-index:190;
  display:flex;flex-direction:column;min-height:0;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);}
body.month-open.month-inner > .month-doc > .month-doc-head{position:static;flex:0 0 auto;
  height:auto;padding:2px 10px 0 12px;}
body.month-open.month-inner > .month-doc > .month-history-body{flex:1;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));}

.mh-axis,.mh-row{display:grid;grid-template-columns:56px minmax(0,1fr) 20px;align-items:center;gap:5px;}
.mh-axis{position:sticky;top:-2px;z-index:3;height:13px;background:var(--bg);}
.mh-axis-track{position:relative;height:11px;}
.mh-axis-track i{position:absolute;bottom:0;transform:translateX(-50%);font-style:normal;
  font-family:var(--font-mono);font-size:7px;color:var(--text3);}
.mh-rows{display:flex;flex-direction:column;gap:0;}
.mh-row{appearance:none;width:100%;min-height:15px;padding:1px 0;border:0;border-radius:3px;background:transparent;color:var(--text);cursor:pointer;text-align:left;}
.mh-row:active:not(:disabled){background:var(--card);}
.mh-row:disabled{cursor:default;}
.mh-row.is-year-start{margin-top:4px;padding-top:5px;border-top:1px solid var(--border);}
.mh-label{min-width:0;display:grid;grid-template-columns:29px 1fr;align-items:baseline;gap:4px;text-align:right;white-space:nowrap;}
.mh-label b{font-family:var(--font-mono);font-size:9.5px;font-weight:600;color:var(--text2);}
.mh-label em{font-family:var(--font-mono);font-size:8.5px;font-style:normal;font-weight:700;}
.mh-track{position:relative;height:8px;border-radius:2px;background:var(--bg2);overflow:hidden;}
.mh-grid{position:absolute;z-index:1;top:0;bottom:0;width:1px;background:var(--border);opacity:.58;}
.mh-fill{position:relative;z-index:2;display:block;height:100%;min-width:2px;border-radius:2px;}
.mh-row strong{font-family:var(--font-mono);font-size:8.5px;font-weight:700;text-align:left;}
.mh-row.is-empty .mh-label em,.mh-row.is-empty .mh-track,.mh-row.is-empty strong{opacity:.28;}

/* 고정 축은 문서 모드에선 뷰포트 기준(고정 헤더 바로 밑), 되돌림 모드에선 본문 기준 */
body.month-open .mh-axis{top:calc(var(--mhHead) + env(safe-area-inset-top) - 2px);}
body.month-open.month-inner .mh-axis{top:-2px;}

@media (orientation:landscape) and (max-height:520px){
  /* 가로에선 제목을 접고 ✕만 모서리에 띄우므로 헤더가 자리를 차지하지 않는다 */
  .month-doc{--mhHead:0px;}
  body.month-open > .month-doc{padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);}
  body.month-open > .month-doc > .month-doc-head,
  body.month-open.month-inner > .month-doc > .month-doc-head{position:fixed;z-index:20;
    top:calc(5px + env(safe-area-inset-top));left:auto;
    right:calc(8px + env(safe-area-inset-right));height:auto;padding:0;background:transparent;}
  .month-doc-title{display:none;}
  body.month-open.month-inner > .month-doc{padding:env(safe-area-inset-top)
    env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
  body.month-open.month-inner .mh-axis{top:-2px;}
}