/* 리포트 그림 부품 모양 — components/report-kit.js 짝 (2026-09-28 리포트 개편 1단계).
   주간·라이벌·광고·리뷰 네 리포트 HTML 머리에서 report-navigation.css 바로 뒤에 싣는다.
   색: lib/design/blue-rules.js 목록 안의 값만 쓴다. 숫자 글자는 #191F28·#4E5968 만, 파란 글자는 누르는 것(.rk-btn)에만.
       상태색(초록·빨강·주황)은 ▲▼ 증감 알약(.rk-delta)에만.
       막대 두 벌: 지금·지난주·우리 = 채운 파랑 · 그 전·평소·상대 = 흰 면 + 파란 테두리(빈 막대).
       채운 파랑은 칸 배경이 아니라 칸 안 SVG 사각형(.rk-paint)의 fill 로 칠한다 — 누를 수 없는 칸의 파란 면은
       색 관문 ⑪-행동색면이 막고, SVG 도형은 그림으로 친다(지금 주간 리포트 .metric-bar 와 같은 방식).
       목록 밖 옅은 파랑을 새 파일에 적으면 색 관문 「적어 놓은 색」 자리가 화면마다 하나씩 늘고,
       그 기준선은 수집기가 그대로인 한 올릴 수 없다(scripts/make-baseline.mjs 적어놓은색). 흑백·색약에서도 채움과 빈 테두리로 갈린다.
   크기: 글자는 rem·em, 폭은 % 로만. nowrap·ellipsis·line-clamp 없음(큰 글씨 320px 에서 잘리지 않게).
   접기 기호는 여기서 그리지 않는다(::before·::after 글자 기호 금지 · 접힘 기호는 site-chrome 이 붙인다). */
:root {
  --rk-ink: #191F28;
  --rk-sub: #4E5968;
  --rk-action: #0B5BD3;
  --rk-mine: #EAF2FE;
  --rk-bg: #F2F4F6;
  --rk-line: #E5E8EB;
  --rk-card: #FFFFFF;
  --rk-good: #065F46;
  --rk-good-soft: #E7F5EE;
  --rk-bad: #9B1C22;
  --rk-bad-soft: #FDECEC;
  --rk-caution: #93400B;
  --rk-caution-soft: #FFF3E8;
}

/* ── 카드 ───────────────────────────────────────────── */
.rk-card {
  box-sizing: border-box;
  min-width: 0;
  margin-top: 0.75rem;
  padding: 1.375rem 1.25rem;
  border-radius: 1.25rem;
  background: var(--rk-card);
  color: var(--rk-ink);
  font-size: 1.0625rem;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rk-hbars, .rk-vpair, .rk-ring-row, .rk-ladder, .rk-vs, .rk-range, .rk-dots, .rk-divider {
  box-sizing: border-box;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 결론 카드 */
.rk-hero { background-color: var(--rk-card); background-image: linear-gradient(180deg, var(--rk-mine) 0%, var(--rk-card) 7rem); }
.rk-shop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0; font-size: 0.94em; font-weight: 700; color: var(--rk-sub); }
.rk-title { margin: 0.625rem 0 0; font-size: 1.5em; line-height: 1.36; font-weight: 800; letter-spacing: -0.015em; color: var(--rk-ink); }
.rk-lead { margin: 0.375rem 0 0; color: var(--rk-sub); }
.rk-note { margin: 0.75rem 0 0; color: var(--rk-sub); font-size: 0.94em; }

/* 알약: 꼬리표(회색) · 「내 것」(옅은 파랑) */
.rk-pill { display: inline-block; padding: 0.0625rem 0.625rem; border: 1px solid var(--rk-line); border-radius: 999px; background: var(--rk-bg); color: var(--rk-sub); font-size: 0.875rem; font-weight: 700; line-height: 1.5; }
.rk-pill--mine { border-color: var(--rk-mine); background: var(--rk-mine); color: var(--rk-ink); }

/* 이번 주 할 일 카드 */
.rk-todo { border: 0.125rem solid var(--rk-action); }
.rk-todo__top { display: flex; align-items: center; gap: 0.625rem; }
.rk-todo__label { margin: 0; font-size: 1em; line-height: 1.4; font-weight: 800; color: var(--rk-ink); }
.rk-todo__text { margin: 0.75rem 0 0; font-size: 1.2em; line-height: 1.42; font-weight: 800; color: var(--rk-ink); }
.rk-why { margin: 0.625rem 0 0; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: var(--rk-bg); color: var(--rk-sub); font-size: 0.94em; }
.rk-btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.5rem; margin-top: 0.875rem; padding: 0.875rem 1rem; border: 0; border-radius: 0.875rem; background: var(--rk-action); color: #FFFFFF; font: inherit; font-size: 1.06em; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; }
.rk-btn:focus-visible { outline: 0.1875rem solid var(--rk-ink); outline-offset: 0.125rem; }
.rk-btn-note { margin: 0.5rem 0 0; text-align: center; font-size: 0.875rem; color: var(--rk-sub); }

/* 동그라미 아이콘 */
.rk-icon-dot { flex: 0 0 auto; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 999px; background: var(--rk-mine); color: var(--rk-ink); }
.rk-icon-dot--plain { background: var(--rk-bg); }
.rk-icon-dot svg { display: block; width: 1.3em; height: 1.3em; }

/* 자세히 아래 카드 머리 */
.rk-sec-head { display: flex; align-items: center; gap: 0.625rem; }
.rk-sec-head .rk-icon-dot { width: 2.1em; height: 2.1em; }
.rk-sec-head .rk-icon-dot svg { width: 1.15em; height: 1.15em; }
.rk-sec-title { margin: 0; font-size: 1.24em; line-height: 1.38; font-weight: 800; color: var(--rk-ink); }
.rk-sec-sub { margin: 0.375rem 0 0; font-size: 0.94em; color: var(--rk-sub); }

/* 「자세히」 구분선 — 선은 글자 기호가 아니라 빈 칸 두 개 */
.rk-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.875rem 0.25rem 0.125rem; color: var(--rk-sub); font-size: 1.0625rem; font-weight: 800; }
.rk-divider__line { flex: 1 1 0; height: 1px; background: var(--rk-line); }
.rk-divider__label { flex: 0 1 auto; }

/* ▲▼ 증감 알약 — 화살표와 숫자가 한 글자 마디 */
.rk-delta { display: inline-block; padding: 0.0625rem 0.5625rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.86em; font-weight: 800; line-height: 1.5; vertical-align: 0.08em; }
.rk-delta--good { border-color: var(--rk-good-soft); background: var(--rk-good-soft); color: var(--rk-good); }
.rk-delta--bad { border-color: var(--rk-bad-soft); background: var(--rk-bad-soft); color: var(--rk-bad); }
.rk-delta--caution { border-color: var(--rk-caution-soft); background: var(--rk-caution-soft); color: var(--rk-caution); }
.rk-delta--neutral { border-color: var(--rk-line); background: var(--rk-bg); color: var(--rk-sub); }

/* 가로 막대 비교 */
.rk-hbars { display: grid; gap: 0.75rem; margin-top: 1rem; }
.rk-hbar__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 0.625rem; margin: 0; font-weight: 700; color: var(--rk-ink); }
.rk-hbar__label { flex: 1 1 8em; min-width: 0; }
.rk-hbar__end { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.25rem 0.5rem; margin-left: auto; }
.rk-hbar__value { font-weight: 800; color: var(--rk-ink); }
.rk-hbar--prior .rk-hbar__label, .rk-hbar--prior .rk-hbar__value { color: var(--rk-sub); }
.rk-track { position: relative; height: 0.875rem; margin-top: 0.375rem; border-radius: 999px; background: var(--rk-bg); overflow: hidden; }
/* 채운 파랑 칠 — 칸 안을 꽉 채우는 SVG 사각형 */
.rk-paint { display: block; width: 100%; height: 100%; }
.rk-paint rect { fill: var(--rk-action); }
.rk-fill { position: absolute; top: 0; bottom: 0; left: 0; min-width: 0.5em; border-radius: 999px; overflow: hidden; }
.rk-fill--prior { box-sizing: border-box; border: 0.125rem solid var(--rk-action); background: var(--rk-card); }

/* 세로 막대 쌍 */
.rk-vpair { margin-top: 0.75rem; }
.rk-vpair__plot { display: flex; align-items: flex-end; gap: 0.625rem; padding: 0 0.25rem; border-bottom: 0.09375rem solid var(--rk-line); }
.rk-vpair__col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; }
.rk-vpair__value { margin-bottom: 0.25rem; text-align: center; font-size: 0.94em; font-weight: 800; line-height: 1.3; color: var(--rk-ink); }
.rk-vbar { width: 72%; max-width: 3.2em; min-height: 0.25em; border-radius: 0.5rem 0.5rem 0 0; overflow: hidden; }
.rk-vbar--prior { box-sizing: border-box; border: 0.125rem solid var(--rk-action); background: var(--rk-card); }
.rk-vpair__labels { display: flex; gap: 0.625rem; padding: 0.375rem 0.25rem 0; }
.rk-vpair__labels span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.86em; font-weight: 700; color: var(--rk-sub); }

/* 원 비율 */
.rk-ring-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1rem; }
.rk-ring { position: relative; flex: 0 0 auto; width: 7.2em; height: 7.2em; }
.rk-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.rk-ring__track { fill: none; stroke: var(--rk-bg); stroke-width: 12; }
.rk-ring__fill { fill: none; stroke: var(--rk-action); stroke-width: 12; }
.rk-ring__label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 1.5em; font-weight: 900; letter-spacing: -0.02em; color: var(--rk-ink); }
.rk-ring-side { flex: 1 1 9em; min-width: 0; }

/* 순위 사다리 — 1페이지·2페이지(10위 안)는 「내 것」 면, 그 밖은 회색 면, 100위 밖은 점선 */
.rk-ladder { display: grid; gap: 0.5rem; margin-top: 1rem; }
.rk-rung { padding: 0.75rem 0.875rem; border-radius: 1rem; background: var(--rk-bg); }
.rk-rung--top { background: var(--rk-mine); }
.rk-rung--outside { border: 0.125rem dashed var(--rk-line); background: var(--rk-card); }
.rk-rung__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.125rem 0.625rem; margin: 0; font-size: 0.9em; font-weight: 800; color: var(--rk-sub); }
.rk-rung--top .rk-rung__head { color: var(--rk-ink); }
.rk-kw { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.625rem; margin-top: 0.5rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: var(--rk-card); }
.rk-rung--outside .rk-kw { background: var(--rk-bg); }
.rk-kw__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; min-width: 0; font-weight: 800; color: var(--rk-ink); }
.rk-kw__star { display: inline-flex; color: var(--rk-ink); }
.rk-kw__star svg { display: block; width: 1em; height: 1em; }
.rk-kw__rank { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 1.12em; font-weight: 900; color: var(--rk-ink); }
.rk-kw__was { font-size: 0.8em; font-weight: 700; color: var(--rk-sub); }
.rk-ladder__band { display: flex; align-items: center; gap: 0.5rem; margin: 0.125rem 0 0; padding: 0.5rem 0.75rem; border: 1px solid var(--rk-line); border-radius: 0.75rem; background: var(--rk-card); color: var(--rk-ink); font-size: 0.94em; font-weight: 800; }
.rk-ladder__band svg { display: block; flex: 0 0 auto; width: 1.2em; height: 1.2em; }

/* 좌우 막대 (우리 · 상대) */
.rk-vs { margin-top: 1rem; }
.rk-vs__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; font-size: 0.86em; font-weight: 800; color: var(--rk-ink); }
.rk-vs__legend-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; min-width: 0; }
.rk-vs__legend-side--theirs { justify-content: flex-end; text-align: right; }
.rk-vs__who { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; }
.rk-swatch { display: inline-block; flex: 0 0 auto; width: 0.8em; height: 0.8em; border-radius: 0.1875rem; overflow: hidden; }
.rk-swatch--prior { box-sizing: border-box; border: 0.125rem solid var(--rk-action); background: var(--rk-card); }
.rk-vs__row { padding: 0.75rem 0 0.625rem; border-top: 1px solid var(--rk-line); }
.rk-vs__legend + .rk-vs__row { border-top: 0; }
.rk-vs__label { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 0.5rem; margin: 0; text-align: center; font-weight: 800; color: var(--rk-ink); }
.rk-vs__bars { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0 0.25rem; margin-top: 0.25rem; }
.rk-vs__side { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.rk-vs__value { margin: 0; font-size: 1.06em; font-weight: 700; line-height: 1.3; color: var(--rk-sub); }
.rk-vs__value--lead { font-weight: 900; color: var(--rk-ink); }
.rk-vs__side--theirs .rk-vs__value { text-align: right; }
.rk-vs__track { display: flex; height: 0.75rem; margin-top: 0.3125rem; background: var(--rk-bg); overflow: hidden; }
.rk-vs__side--mine .rk-vs__track { justify-content: flex-end; border-radius: 999px 0 0 999px; }
.rk-vs__side--theirs .rk-vs__track { border-radius: 0 999px 999px 0; }
.rk-vs__fill { flex: 0 0 auto; height: 100%; min-width: 0.5em; overflow: hidden; }
.rk-vs__fill--mine { border-radius: 999px 0 0 999px; }
.rk-vs__fill--theirs { box-sizing: border-box; border: 0.125rem solid var(--rk-action); border-radius: 0 999px 999px 0; background: var(--rk-card); }

/* 같은 축 범위 막대 */
.rk-range { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.rk-range__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.125rem 0.625rem; margin: 0; font-weight: 700; color: var(--rk-ink); }
.rk-range__value { font-weight: 800; color: var(--rk-ink); }
.rk-range__track { position: relative; height: 0.875rem; margin-top: 0.375rem; border-radius: 999px; background: var(--rk-bg); overflow: hidden; }
.rk-range__fill { position: absolute; top: 0; bottom: 0; min-width: 0.5em; border-radius: 999px; overflow: hidden; }
.rk-range__fill--theirs { box-sizing: border-box; border: 0.125rem solid var(--rk-action); background: var(--rk-card); }

/* 점 그림 */
.rk-dots { display: grid; gap: 0.625rem; margin-top: 0.875rem; }
.rk-dots__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.rk-dots__when { flex: 0 0 5.4em; font-size: 0.9em; font-weight: 700; color: var(--rk-sub); }
.rk-dots__set { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3125rem; }
.rk-dot { display: block; width: 0.95em; height: 0.95em; border-radius: 999px; overflow: hidden; }
.rk-dot--prior { box-sizing: border-box; border: 0.125rem solid var(--rk-action); background: var(--rk-card); }
.rk-dots__count { font-weight: 900; color: var(--rk-ink); }

/* 근거 한 줄 · 근거 더 보기 (넛지 9) · 다음 주에 다시 보여 드릴 것 (넛지 4) — 2026-09-28
   근거는 누를 수 없는 작은 회색 글이다(파란 글자 없음). 할 일 카드 단추 아래에 놓인다.
   접기는 평범한 details/summary — 접힘 기호는 site-chrome 이 summary 끝에 붙인다(여기서 기호를 그리지 않는다). */
.rk-evidence { margin: 0.625rem 0 0; color: var(--rk-sub); font-size: 0.875em; line-height: 1.55; }
.rk-evidence-more { margin-top: 0.25rem; color: var(--rk-sub); font-size: 0.875em; line-height: 1.55; }
.rk-evidence-more > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; list-style: none; cursor: pointer; font-weight: 800; color: var(--rk-ink); }
.rk-evidence-more__list { display: grid; gap: 0.375rem; margin: 0.125rem 0 0; padding: 0 0 0 1.125em; }
.rk-next-week { box-sizing: border-box; display: flex; align-items: center; gap: 0.625rem; min-width: 0; margin: 0.75rem 0 0; padding: 0.875rem 1rem; border: 1px solid var(--rk-line); border-radius: 1rem; background: var(--rk-card); color: var(--rk-ink); font-size: 1.0625rem; font-weight: 700; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.rk-next-week .rk-icon-dot { width: 2.1em; height: 2.1em; }
.rk-next-week .rk-icon-dot svg { width: 1.15em; height: 1.15em; }
.rk-next-week__text { flex: 1 1 0; min-width: 0; }