.diag-pdf-btn { display: block; min-height: 44px; margin-top: 16px; padding: 10px 18px; border: 1px solid #245b43; border-radius: 6px; background: #245b43; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.diag-pdf-btn:hover { background: #194531; }
.diag-pdf-btn:focus-visible, .diagnosis-report a:focus-visible { outline: 3px solid #245b43; outline-offset: 4px; }
.diag-pdf-btn:disabled { opacity: .6; cursor: wait; }
.diag-pdf-status { display: block; margin-top: 8px; font-size: 14px; color: #526259; }
.diag-action { min-height: 44px; padding: 10px 16px; border: 1px solid #245b43; border-radius: 6px; background: #fff; color: #245b43; font: inherit; font-weight: 600; cursor: pointer; }
.diag-action:disabled { opacity: .6; cursor: wait; }
.diag-action:focus-visible, .diag-answer-details summary:focus-visible, .diag-review select:focus-visible { outline: 3px solid #245b43; outline-offset: 3px; }
.diag-report-status { padding: 14px 16px; background: #faf5ed; color: #80521d; line-height: 1.7; }
.diag-retry { margin-bottom: 16px; }
.diag-answer-details { margin-top: 28px; border-top: 1px solid #d7e1db; }
.diag-answer-details summary { padding: 16px 0; font-weight: 700; cursor: pointer; }
.diag-review { display: grid; gap: 16px; }
.diag-review label { display: grid; gap: 8px; font-size: 14px; }
.diag-review select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid #a9bfb1; border-radius: 4px; background: #fff; color: #243d33; font: inherit; }
.diagnosis-report .report-priority { padding: 14px 16px; background: #faf5ed; color: #80521d; font-size: 14px; font-weight: 600; }
.diag-card .report-score-box:has(.report-ind) { display: flex; flex-direction: column; }
.diagnosis-export-host { position: absolute; left: -12000px; top: 0; width: 688px; pointer-events: none; }
.diagnosis-report {
  --report-ink: #243d33; --report-muted: #526259; --report-green: #245b43;
  --report-soft: #f0f5f2; --report-line: #d7e1db; --report-caution: #80521d;
  width: 100%; padding: 20px; background: #fff; color: var(--report-ink);
  font: 14px/1.7 'Pretendard Variable', 'Malgun Gothic', sans-serif; overflow-wrap: anywhere;
}
.diagnosis-report * { box-sizing: border-box; }
.report-pdf-group { display: flow-root; }
.diagnosis-report .report-cover { margin: -20px -20px 0; padding: 28px 22px 16px; background: #f2f6f3; }
.diagnosis-report header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 8px 8px 14px; }
.diagnosis-report .report-brand { font-weight: 700; color: #174b3a; }
.diagnosis-report .report-date, .diagnosis-report .report-caption { color: var(--report-muted); font-size: 13px; }
.diagnosis-report .report-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 22px; align-items: center; padding: 24px 24px 38px; border-radius: 12px; background: linear-gradient(120deg, #1d493b, #285943); color: #fff; }
.diagnosis-report .report-hero-copy { flex: 1; min-width: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
/* html2canvas는 inline-flex 배지의 배경을 글자 위에 그리므로 inline-block을 사용한다. */
.diagnosis-report .report-kicker { display: inline-block; padding: 5px 12px; border: 1px solid #5b806c; border-radius: 24px; background: #3e6956; color: #f0f6f1; font-size: 11px; }
.diagnosis-report .report-kicker > span { vertical-align: middle; }
.diagnosis-report .report-kicker > span:first-child { margin-right: 7px; color: #e0eba0; font-size: 16px; line-height: 1; }
.diagnosis-report h1 { font-size: 25px; line-height: 1.4; letter-spacing: -.65px; margin: 14px 0 10px; word-break: keep-all; }
.diagnosis-report h1 strong { color: #e4eea0; font-weight: inherit; }
.diagnosis-report .report-hero-description { margin: 0; max-width: 38em; color: #dfebe1; font-size: 12px; }
.diagnosis-report .report-stages { display: flex; gap: 16px; width: max-content; max-width: 100%; padding: 0; margin: 20px 0 0; list-style: none; }
.diagnosis-report .report-stages li { position: relative; text-align: center; border: 1px solid #698d76; border-radius: 24px; background: #446f59; padding: 5px 12px; margin: 0; color: #f0f6f1; font-size: 11px; white-space: nowrap; }
.diagnosis-report .report-stages li + li::before { content: ''; position: absolute; top: 50%; left: -12px; width: 7px; height: 1px; background: #a1b887; }
.diagnosis-report .report-stages .active { border-color: #eef5cb; background: #f1f7d8; color: #214e3d; font-weight: 700; }
.diagnosis-report .report-score-box { z-index: 1; flex-shrink: 0; width: 156px; padding: 12px 14px; text-align: center; border: 1px solid #648872; border-radius: 14px; background: rgba(87, 128, 100, .25); }
.diagnosis-report .report-ring { position: relative; width: 120px; height: 120px; margin: 0 auto 8px; }
.diagnosis-report .report-ring img { display: block; width: 100%; height: 100%; }
.diagnosis-report .report-ring strong { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-variant-numeric: tabular-nums; color: #fff; }
.diagnosis-report .report-score-box > span { display: block; font-size: 13px; font-weight: 700; color: #fff; }
.diagnosis-report .report-score-box small { display: block; margin-top: 2px; font-size: 11px; color: #e1ede3; }
.diagnosis-report .report-landscape { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; z-index: 0; }
.diagnosis-report .report-motto { margin-top: 14px; z-index: 1; color: #abc6ab; white-space: pre-line; font: italic 11px/1.5 'Nanum Pen Script', 'Malgun Gothic', cursive; transform: rotate(-6deg); width: fit-content; }
.diagnosis-report .report-motto::after { content: ''; display: block; width: 70px; height: 1px; margin-top: 5px; background: #8eae92; transform: rotate(-4deg); }
.diagnosis-report h2 { font-size: 20px; margin: 28px 0 12px; line-height: 1.45; letter-spacing: -.3px; }
.diagnosis-report h3, .diagnosis-report h4 { font-size: 15px; margin: 0 0 8px; }
.diagnosis-report p { margin: 8px 0; }
.diagnosis-report .report-card { background: #fff; border: 1px solid var(--report-line); border-radius: 6px; padding: 18px; break-inside: avoid; }
.diagnosis-report .report-profile { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 18px; border-radius: 10px; background: #fcfdfb; color: #416359; font-size: 12px; box-shadow: 0 3px 14px rgba(35, 75, 51, .04); }
.diagnosis-report .report-profile::after { content: ''; flex: 1; height: 1px; background: #dfe8e0; }
.diagnosis-report .report-profile strong { color: #174b3a; white-space: nowrap; }
.diagnosis-report .report-profile-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #eaf2ed; color: #174b3a; }
.diagnosis-report .report-disclaimer { margin: 6px 0 0; color: #526259; font-size: 10px; }
.diagnosis-report .report-key-columns { display: flex; gap: 16px; }
.diagnosis-report .report-krow { flex: 1; min-width: 0; padding: 16px; background: var(--report-soft); border-top: 2px solid var(--report-green); break-inside: avoid; }
.diagnosis-report .report-krow.bad { background: #faf5ed; border-color: var(--report-caution); }
.diagnosis-report .report-klabel { font-size: 15px; color: var(--report-green); }
.diagnosis-report .bad .report-klabel { color: var(--report-caution); }
.diagnosis-report .report-key-list { margin: 0; padding-left: 18px; }
.diagnosis-report .report-key-list li { margin: 6px 0; }
.diagnosis-report .report-top3 { margin-top: 28px; border: 1px solid #a9bfb1; border-radius: 6px; padding: 20px; }
.diagnosis-report .report-top3 h2 { margin: 0 0 12px; }
.diagnosis-report .report-actions > ol, .diagnosis-report .report-actions > ul { list-style: none; counter-reset: action; padding: 0; margin: 0; }
.diagnosis-report .report-actions > ol > li, .diagnosis-report .report-actions > ul > li { position: relative; counter-increment: action; padding: 16px 0 16px 42px; margin: 0; border-top: 1px solid var(--report-line); break-inside: avoid; }
.diagnosis-report .report-actions > ol > li::before, .diagnosis-report .report-actions > ul > li::before { content: counter(action); position: absolute; top: 16px; left: 0; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: var(--report-green); color: #fff; font-weight: 700; }
.diagnosis-report .report-actions li > strong:first-child, .diagnosis-report .report-actions li > b:first-child { font-size: 16px; color: var(--report-green); }
.diagnosis-report .report-radar { display: block; width: 430px; max-width: 100%; margin: 6px auto 14px; }
.diagnosis-report .report-domain-row { display: flex; gap: 12px; margin-bottom: 12px; break-inside: avoid; }
.diagnosis-report .report-domain { width: calc(50% - 6px); padding: 16px; }
.diagnosis-report .report-domain-note { margin-top: 10px; color: var(--report-muted); font-size: 13px; }
.diagnosis-report .report-gate { padding: 12px 16px; background: #faf5ed; color: var(--report-caution); font-size: 13px; }
.diagnosis-report .report-domain > strong { color: var(--report-green); font-size: 22px; }
.diagnosis-report .report-track { height: 6px; background: #e8ede9; border-radius: 3px; margin: 10px 0; }
.diagnosis-report .report-track span { display: block; height: 6px; background: #4c8b67; border-radius: 3px; }
.diagnosis-report .report-badge { display: inline-block; background: var(--report-soft); color: var(--report-green); font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.diagnosis-report .caution { background: #faf5ed; color: var(--report-caution); }
.diagnosis-report .report-pair { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.diagnosis-report .report-pair > section { width: calc(50% - 6px); }
.diagnosis-report .report-pair h2 { margin: 0 0 14px; font-size: 16px; }
.diagnosis-report .report-pair > section:last-child h2 { color: var(--report-caution); }
.diagnosis-report ul, .diagnosis-report ol { padding-left: 20px; margin: 8px 0; }
.diagnosis-report li { margin-bottom: 12px; }
.diagnosis-report .report-analysis li > ul { list-style: none; padding-left: 0; margin-top: 8px; font-size: 13px; }
.diagnosis-report .report-analysis li > ul > li { padding: 6px 10px; margin-bottom: 4px; border-left: 2px solid var(--report-line); background: var(--report-soft); }
.diagnosis-report a { color: var(--report-green); text-decoration: underline; text-underline-offset: 3px; }
.diagnosis-report .report-service { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--report-line); }
.diagnosis-report .report-service:last-child { border-bottom: 0; }
.diagnosis-report .report-service-reason { font-size: 13px; color: var(--report-muted); }
.diagnosis-report .report-service-arrow { color: var(--report-muted); }
.diagnosis-report .report-answers { padding-top: 1px; }
.diagnosis-report table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 13px; background: #fff; }
.diagnosis-report th, .diagnosis-report td { text-align: left; border: 1px solid var(--report-line); padding: 8px 12px; }
.diagnosis-report th { width: 55%; background: var(--report-soft); font-weight: 500; }
.diagnosis-report footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--report-line); font-size: 12px; color: var(--report-muted); }
/* 채팅 요약은 화면 폭에 맞추고 PDF는 기존 A4 너비를 유지한다. */
.diag-card { container-type: inline-size; background: #fff; padding: 20px; scroll-margin-top: 20px; }
.diag-card > .diagnosis-report { padding: 0; font-size: 16px; }
.diag-card .report-cover { margin: 0; padding: 24px; }
.diag-card .report-hero { padding: 28px 28px 44px; }
.diag-card .report-hero h1 { font-size: clamp(25px, 3.6cqw, 42px); }
.diag-card .report-kicker, .diag-card .report-stages li, .diag-card .report-profile { font-size: 14px; }
.diag-card .report-hero-description { font-size: 16px; }
.diag-card .report-score-box { width: 24%; padding: 18px; }
.diag-card .report-ring { width: 100%; height: auto; aspect-ratio: 1; }
.diag-card .report-ring strong { font-size: clamp(28px, 3.6cqw, 42px); }
.diag-card .report-score-box > span { font-size: 16px; }
.diag-card .report-motto { font-size: 14px; margin-top: 18px; }
.diag-card .report-actions > ol, .diag-card .report-actions > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.diag-card .report-actions > ol > li, .diag-card .report-actions > ul > li { padding: 56px 0 0; }
.diag-card > .diag-radar { margin-top: 28px; }
.diagnosis-export-host .diagnosis-report { width: 688px; font-size: 13px; }
/* PDF 캔버스의 글꼴 기준선 차이만 보정한다. 화면용 overview에는 적용하지 않는다. */
.report-pdf .report-ring strong { transform: translateY(-.28em); }
.report-pdf .report-kicker > span, .report-pdf .report-stages li > span { display: inline-block; transform: translateY(-.32em); }
.report-pdf .report-stages li > span:first-child { margin-right: .3em; }
.report-pdf .report-radar { width: 260px; margin: -6px auto 2px; }
@container (max-width: 700px) {
  .diag-card .report-actions > ol, .diag-card .report-actions > ul { grid-template-columns: 1fr; gap: 0; }
  .diag-card .report-actions > ol > li, .diag-card .report-actions > ul > li { padding: 16px 0 16px 36px; }
}
@container (max-width: 800px) {
  .diag-card .report-motto { display: none; }
  .diag-card .report-hero-description { font-size: 13px; }
}
@container (max-width: 540px) {
  .diag-card .report-cover { padding: 16px 12px; }
  .diag-card .report-hero { flex-direction: column; align-items: stretch; padding: 20px 16px 36px; gap: 16px; }
  .diag-card .report-hero h1 { font-size: 23px; }
  .diag-card .report-stages { gap: 12px; width: 100%; }
  .diag-card .report-stages li { flex: 1; padding: 5px; font-size: 11px; }
  .diag-card .report-stages li + li::before { left: -9px; width: 5px; }
  .diag-card .report-kicker { font-size: 11px; }
  .diag-card .report-score-box { padding: 10px 14px; }
  .diag-card .report-profile { flex-wrap: wrap; gap: 6px; padding: 10px; font-size: 12px; }
  .diag-card .report-profile > span:last-child { flex-basis: 100%; }
  .diag-card .report-profile::after { display: none; }
  .diag-card .report-ring { width: 88px; height: 88px; }
  .diag-card .report-ring strong { font-size: 24px; }
  .diagnosis-report h1 { font-size: 25px; }
  .diag-card .report-score-box { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; width: 100%; text-align: left; }
  .diag-card .diagnosis-report .report-score-box:has(.report-ind) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; }
  .diag-card .report-score-box .report-ind { flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; text-align: center; }
  .diag-card .report-score-box .report-ind strong { font-size: 20px; }
  .diag-card .report-score-box:has(.report-ind) small { grid-column: 1 / -1; text-align: center; }
  .diagnosis-report .report-ring { grid-row: span 2; width: 88px; height: 88px; margin: 0; }
  .diagnosis-report .report-ring strong { font-size: 24px; }
  .diagnosis-report .report-score-box > span { align-self: end; }
  .diagnosis-report .report-score-box small { align-self: start; }
  .diagnosis-report .report-key-columns, .diagnosis-report .report-domain-row, .diagnosis-report .report-pair { flex-direction: column; }
  .diagnosis-report .report-domain, .diagnosis-report .report-pair > section { width: 100%; }
  .diagnosis-report .report-top3 { padding: 16px 12px; }
  .diagnosis-report .report-actions > ol > li, .diagnosis-report .report-actions > ul > li { padding-left: 36px; }
  .diagnosis-report h2 { font-size: 19px; }
  .diag-pdf-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-row:has(.diag-card) { animation: none; }
}
.diag-scores-title { margin: 28px 0 12px; color: #243d33; font-size: 20px; }
.diag-card .diag-bar-label { width: 132px; font-size: 14px; }
.diag-card .diag-bar-label small { display: block; color: #526259; font-size: 12px; font-weight: 400; }
.diag-card .diag-bar-row { margin: 12px 0; }
.diag-card .diag-bar-pct { color: #526259; font-size: 14px; }
@media (max-width: 600px) {
  .diag-card { padding: 14px; }
  .diag-card .report-krow { padding: 12px; }
  .diag-card .report-key-columns { gap: 12px; }
}

/* 3지표(마음/정착/실행) 스코어박스 — 링 대신 3행 */
.diagnosis-report .report-ind { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 10px; background: #3e6955; border-radius: 8px; }
.diagnosis-report .report-ind span { font-size: 11px; color: #dce9df; white-space: nowrap; }
.diagnosis-report .report-ind strong { font-size: 20px; color: #f3faef; white-space: nowrap; }
.report-pdf .report-score-box:has(.report-ind) { width: 184px; }
.diagnosis-report .report-score-box:has(.report-ind) { display: flex; flex-direction: column; gap: 6px; justify-content: center; }

/* 유형별 행동 힌트·상태 고지 */
.diagnosis-report .report-type-actions { margin: 12px 0 0; padding: 14px 16px; background: white; border: 1px solid #dce7df; border-radius: 12px; }
.diagnosis-report .report-type-actions h3 { margin: 0 0 8px; font-size: 13px; color: #285f46; }
.diagnosis-report .report-type-actions ol { margin: 0; padding-left: 20px; font-size: 13px; }
.diagnosis-report .report-type-actions li { margin: 4px 0; }
.diagnosis-report .report-type-note { margin-top: 8px; font-size: 10.5px; color: #69776f; }

/* 페이지 배치(2026-09-15) — 레이더 전용 페이지(대형) + 카드 전용 페이지(컴팩트) */
.diagnosis-report .report-scores .report-radar { width: 560px; }
.diagnosis-report .report-cards .report-domain { padding: 12px; }
.diagnosis-report .report-cards .report-domain-note { margin-top: 6px; font-size: 12px; line-height: 1.55; }
.diagnosis-report .report-cards .report-domain-row { gap: 10px; margin-bottom: 10px; }

/* 맞춤 정보 추천 — 행 높이 축소(불필요한 세로 여백 제거, 2026-09-15) */
.diagnosis-report .report-services .report-card { padding: 10px 16px; }
.diagnosis-report .report-service { padding: 6px 0; line-height: 1.45; }

/* 레이더 페이지 간격 축소(2026-09-16) — 제목·캡션·도형 사이 여백 절반 */
.diagnosis-report .report-scores h2 { margin: 14px 0 6px; }
.diagnosis-report .report-scores .report-caption { margin: 0 0 4px; }
.diagnosis-report .report-scores .report-radar { margin: 2px auto 4px; }