/* ============================================================
   monthly.css — 월간 회고 개별 페이지 전용
   base.css → weekly.css → monthly.css 순으로 불러온다.
   주간과 구조·톤은 같고, 월간에만 있는 그래프 블록을 담는다.
   그래프 색은 base.css의 --g1~--g5 / --g-compare를 쓴다.
   호박(--amber)은 선·점 전용, 글자는 진테라코타(--terra).

   2026-09-06 · 나무🌳 종수 정리 — 반경 4종(14/3/10/12px)을 2종(--r-s/--r-m)으로,
   행간 4값을 4종 토큰으로 접었다.
   2026-09-12 · 「폭을 풀다」 전면 적용 — 그래프·고지·해설의 색면을 전부 걷고
   괘선으로 눕혔다. 이 파일에 남은 면은 0이고 반경도 0이다.
   ============================================================ */

/* ---------- 그래프 블록 ----------
   2026-09-12: 살구 면을 걷고 머리카락 괘선으로 눕혔다.
   그래프가 넷씩 이어지는 페이지라 면이 넷이면 그것만으로 벽이 된다
   (「목록은 카드로 쌓지 않는다」와 같은 이유). 그래프 자체가 이미
   색을 가진 그림이므로 뒤에 면을 더 깔 필요가 없다. */
.chart{
  background:transparent;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  padding:1.4rem 0 1.6rem;
  margin-bottom:0;
}
.chart .ct{
  font-family:var(--logo);
  font-weight:var(--w-bold);
  font-size:var(--fs-4);
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-lg);
  color:var(--ink);
  margin-bottom:.2rem;
}
.chart .cc{
  font-family:var(--gothic);
  font-size:var(--fs-7);
  line-height:var(--lh-normal);
  color:var(--ink-soft);        /* 살구 면 위 — faint(5.20) 대신 soft(8.24) */
  margin-bottom:.9rem;
}
.chart svg{display:block;width:100%;height:auto;}

/* 범례 조각(■) — 바랜 살구 #C7B49B 는 순백 위 2.01 이다. 글자였다면
   못 썼을 값이지만 이건 막대의 색을 그대로 가리키는 표식이라 색을
   바꿀 수 없다. 대신 가는 잉크 테를 둘러 형태가 보이게 한다. */
.chart .cc span{-webkit-text-stroke:.4px rgba(60,36,21,.55);}

/* 좁은 화면에서 그래프만 가로로 흐르게 — 본문은 절대 넘치지 않는다 */
.chart .scroll-x > svg{min-width:440px;}

/* 도넛 두 개는 예외 — 가로로 흘리지 않고 화면에 맞춰 줄인다.
   6월과 7월을 나란히 놓고 견주는 그림이라, 한쪽이 화면 밖으로
   밀려나면 비교라는 뜻 자체가 사라진다. (2026-08-04) */
.chart .donuts > svg{max-width:430px;margin:0 auto;}

/* ---------- 범례 ---------- */
.legend{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .95rem;
  font-family:var(--gothic);
  font-size:var(--fs-7);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
  margin-bottom:.75rem;
}
.legend span{display:flex;align-items:center;gap:.35rem;}
.legend i{width:18px;height:0;border-top:3px solid;display:inline-block;flex:none;}
.legend b{width:10px;height:10px;border-radius:var(--r-s);display:inline-block;flex:none;}

/* ---------- 그래프 밑 한 줄 읽기 ---------- */
.gnote{
  font-size:var(--fs-6);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
  background:transparent;
  border-radius:0;
  /* 그래프 계열 색(--g3 #D97E33)으로 둔다 — 2026-09-12.
     이 줄은 그래프 카드 바로 밑에 붙어서 범례의 --g2 #E9A33A 견본과 나란히 놓인다.
     형광 호박 #FFC61E 는 그 주황 곁에서 같은 계열로 뭉쳐 「어느 쪽이 그래프 색인가」를
     흐렸다. 그래프 단계 색 --g1~--g5 는 명도 단계라 한 칸도 건드리지 않고,
     부딪히는 쪽인 이 획만 그래프 계열로 옮긴다. 선이라 대비는 따지지 않는다. */
  border-left:2px solid var(--g3);
  padding:.1rem 0 .1rem 1.1rem;
  margin-top:1.1rem;
  max-width:var(--w-read);
}
/* 순백 바탕이라 terra(5.31)를 쓸 수 있다 */
.gnote b{color:var(--terra);font-weight:var(--w-reg);}

/* ---------- 범위 고지 ---------- */
.scope{
  font-family:var(--gothic);
  font-size:var(--fs-6);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
  background:transparent;
  border-radius:0;
  border-left:2px solid var(--line);
  padding:.1rem 0 .1rem 1.1rem;
  margin-bottom:var(--sp-3);
  max-width:var(--w-read);
}

/* ---------- 월간 타임라인 — 주차 라벨이 날짜보다 길어 한 톤 크게 ---------- */
.tl .wk{
  font-family:var(--gothic);
  font-size:var(--fs-8);
  letter-spacing:var(--ls-label);
  line-height:var(--lh-normal);
  color:var(--terra);
  margin-bottom:.35rem;
}
.tl .wk em{
  font-style:normal;
  color:var(--ink-soft);
  margin-left:.4rem;
}

@media(max-width:520px){
  .chart{padding:1.2rem 0 1.3rem;}
}