/* 나 사용설명서 — 공용 스타일: 색 토큰 + A4 보고서(rp-*).
   개인 샘플(diagnosis_sample)과 전사 종합 보고서(aggregate_report)가 함께 씀 */
  /* 시안 C '컬러 타일' (260922 채택, 비교 시안 mockup/design_preview_260922.html)
     구성·문법 레퍼런스: ~/Downloads/레퍼런스_진단리포트_260922/ · 색 = Aside 색후보 3번. 팔레트 교체는 :root만 */
  :root {
    --navy: #2d4d83;
    --navy-2: #5b76a8;
    --t1: #b8c6de; --t2: #dbe3f0; --t3: #edf1f8; --t4: #f3f6fb;
    --ink: #1c2230;
    --g-text: #333; --g-sub: #7d8595; --g-line: #cfd5e0; --g-soft: #e6e9ef; --g-bg: #f4f6fa;
    --line: #eceef3;
    --page-bg: #f7f8fb;
  }

  /* ─── A4 보고서 공통 ─── */
  .rp-page {
    width: 794px; height: 1123px; margin: 0 auto 18px; background: #fff; color: #111;
    padding: 34px 40px 0; display: flex; flex-direction: column; overflow: hidden;
    font-size: 11.8px; line-height: 1.55; box-shadow: 0 2px 12px rgba(0,0,0,.14);
  }
  .rp-body { flex: 1; min-height: 0; overflow: hidden; }
  .rp-cover + .rp-body { overflow: visible; }   /* 1쪽: 정보표가 표지 위로 겹쳐 올라가야 함 */
  .rp-hd { display: flex; justify-content: space-between; white-space: nowrap; font-size: 11px; color: #333; padding-bottom: 7px; border-bottom: 1.5px solid var(--navy); }
  .rp-title { display: flex; align-items: center; justify-content: space-between; padding: 9px 0 8px; border-bottom: 1.5px solid var(--navy); margin-bottom: 12px; }
  .rp-title h2 { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.6px; }
  .rp-title h2 span { font-weight: 400; margin-left: 6px; }
  .rp-badge { background: var(--navy); color: #fff; border-radius: 999px; padding: 5px 18px; font-size: 13px; font-weight: 600; }
  .rp-cover { flex: 0 0 auto; margin: -34px -40px 0; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; padding: 30px 40px 50px; position: relative; overflow: hidden; }
  .rp-cover svg { position: absolute; right: -40px; top: -30px; opacity: .5; }
  .rp-cover .k { font-size: 13px; opacity: .85; letter-spacing: .5px; }
  .rp-cover h1 { font-size: 38px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.15; margin: 8px 0 6px; }
  .rp-cover .s { font-size: 16px; opacity: .92; }
  .rp-cover .pill { display: inline-block; margin-top: 12px; background: #fff; color: var(--navy); border-radius: 999px; padding: 4px 16px; font-size: 12.5px; font-weight: 700; }
  .rp-info { position: relative; z-index: 1; margin: -32px 30px 14px; background: #fff; border-top: 2px solid #111; border-bottom: 1.5px solid var(--navy); }
  .rp-info table { width: 100%; border-collapse: collapse; font-size: 11.8px; }
  .rp-info td { padding: 6px 14px; border-bottom: 1px solid var(--g-line); width: 33.3%; }
  .rp-info tr:last-child td { border-bottom: none; }
  .rp-info td em { font-style: normal; color: var(--g-sub); margin-right: 6px; }
  .rp-sec { border: 1px solid var(--g-line); border-radius: 12px; overflow: hidden; margin-bottom: 11px; }
  .rp-sec-h { display: flex; align-items: center; background: var(--t4); border-bottom: 1px solid var(--g-soft); }
  .rp-sec-h i { flex: 0 0 24px; height: 24px; margin-left: 12px; border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; }
  .rp-sec-h b { padding: 6px 10px; font-size: 13.5px; color: var(--navy); font-weight: 800; }
  .rp-sec-h b span { font-weight: 400; color: #444; font-size: 12px; margin-left: 4px; }
  .rp-sec-b { padding: 8px 16px; }
  .rp-sum { background: #fff; border: 2px solid var(--t2); border-radius: 12px; padding: 9px 14px; margin-bottom: 11px; }
  .rp-sum .sh { font-size: 11px; font-weight: 800; color: var(--navy); letter-spacing: .5px; margin-bottom: 2px; }
  .rp-sum .sh::before { content: "💡 "; }
  .rp-sum .one { font-size: 14.5px; font-weight: 800; line-height: 1.45; margin-bottom: 3px; }
  .rp-sum ul { list-style: none; font-size: 12px; color: #222; display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
  .rp-sum ul.one-col { grid-template-columns: 1fr; }
  .rp-sum li { position: relative; padding-left: 13px; margin-bottom: 2px; }
  .rp-sum li::before { content: "✔"; position: absolute; left: 0; color: var(--navy-2); font-size: 11px; }
  .rp-table { width: 100%; border-collapse: collapse; font-size: 11.8px; }
  .rp-table th { font-weight: 600; color: #333; border-bottom: 1px solid var(--g-line); padding: 5px 6px; text-align: center; background: #fff; }
  .rp-table td { border-bottom: 1px solid var(--g-soft); padding: 4px 6px; text-align: center; vertical-align: middle; }
  .rp-table tr:last-child td { border-bottom: none; }
  .rp-table td.l { text-align: left; }
  .rp-table td.grp { border-right: 1px solid var(--g-line); font-weight: 700; color: var(--navy); width: 72px; line-height: 1.35; }
  .rp-table .num { font-weight: 800; color: var(--navy); font-size: 13px; }
  .rp-table .dir { font-size: 10.5px; color: var(--g-sub); }
  .mbar { position: relative; height: 12px; background: var(--t3); border-radius: 6px; overflow: hidden; }
  .mbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--navy-2), var(--navy)); border-radius: 6px; }
  .mbar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to right, transparent 0 calc(25% - 1px), rgba(255,255,255,.9) calc(25% - 1px) 25%); }
  .mbar-axis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--g-sub); }
  .rp-notes { list-style: none; font-size: 10.5px; color: #333; margin-top: 6px; }
  .rp-notes li { padding-left: 11px; text-indent: -11px; }
  .rp-notes li::before { content: "* "; }
  .rp-code { display: flex; align-items: center; }
  .rp-code .big { flex: 0 0 220px; font-size: 17px; line-height: 1.45; color: var(--navy); padding-right: 18px; border-right: 1px solid var(--g-line); }
  .rp-code .big b { font-weight: 800; }
  .rp-code .circs { flex: 1; display: flex; justify-content: space-around; }
  .circ { text-align: center; font-size: 11px; color: #333; line-height: 1.4; }
  .circ .c { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; margin: 0 auto 4px; line-height: 1.15; padding: 3px; }
  .circ b { display: block; color: var(--navy); font-size: 12.5px; }
  .rp-box { position: relative; border: 1px solid var(--g-line); border-radius: 12px; padding: 13px 16px 6px; margin: 14px 0 4px; background: #fff; }
  .rp-box.good { background: #f2f8f4; border-color: #cfe3d6; } .rp-box.warn { background: #fdf6ee; border-color: #ecd9bd; }
  .rp-box > h4 { position: absolute; top: -10px; left: 14px; background: inherit; border-radius: 6px; padding: 0 8px; font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1.5; }
  .rp-box p { margin-bottom: 4px; }
  .rp-box ul { list-style: none; margin-bottom: 4px; }
  .rp-box ul li { padding-left: 13px; position: relative; margin-bottom: 2px; }
  .rp-box ul li::before { content: "•"; position: absolute; left: 2px; top: 0; color: var(--navy-2); font-weight: 800; }
  .rp-box .sub-h { font-weight: 800; color: #111; margin: 4px 0 2px; }
  .rp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .scale { display: grid; grid-template-columns: 118px 1fr 118px; align-items: center; column-gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--g-soft); }
  .scale:last-child { border-bottom: none; }
  .scale .hd { grid-column: 1 / 4; text-align: center; }
  .scale .hd b { font-size: 14.5px; color: var(--navy); font-weight: 800; }
  .scale .hd small { font-size: 10.5px; color: var(--g-sub); margin-left: 5px; }
  .scale .hd p { display: inline; font-size: 11px; color: #333; margin-left: 8px; }
  .scale .tg { font-size: 10.5px; line-height: 1.4; color: #333; }
  .scale .tg.l { text-align: right; } .scale .tg.r { text-align: left; }
  .scale .tg b { display: block; font-size: 11.5px; color: var(--navy-2); }
  .scale .band { position: relative; padding-top: 14px; }
  .band-track { display: flex; border-radius: 999px; overflow: hidden; }
  .band-track span { flex: 1; }
  .band-track span:nth-child(1) { background: var(--t3); } .band-track span:nth-child(2) { background: var(--t2); }
  .band-track span:nth-child(3) { background: var(--t1); } .band-track span:nth-child(4) { background: var(--navy-2); }
  .band-mark { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 2px solid var(--navy); color: var(--navy); font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
  .scale .band-mark { top: 19px; width: 36px; height: 36px; font-size: 13.5px; border-width: 2.5px; }
  .scale .band-track { height: 12px; }
  .band-res { text-align: center; font-size: 11px; font-weight: 700; color: var(--navy); margin-top: 12px; }
  .scale .ip { grid-column: 1 / 4; font-size: 11.3px; color: #222; margin-top: 3px; text-align: center; }
  .rp-subs { width: 100%; border-collapse: collapse; font-size: 11.3px; }
  .rp-subs td { padding: 3px 4px; border-bottom: 1px solid var(--g-soft); }
  .rp-subs td.n { width: 90px; } .rp-subs td.s { width: 30px; text-align: right; font-weight: 800; color: var(--navy); }
  .rp-subs td.g { width: 60px; color: var(--g-sub); font-size: 10.5px; }
  .rp-subs .bar { height: 8px; background: var(--t3); border-radius: 4px; overflow: hidden; }
  .rp-subs .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy-2), var(--navy)); }
  .bal { display: grid; grid-template-columns: 1fr 180px; gap: 18px; align-items: center; }
  .bal-row { display: grid; grid-template-columns: 70px 1fr 38px; align-items: center; gap: 10px; margin: 5px 0; font-size: 12px; }
  .bal-row b { color: var(--navy); }
  .bal-row .num { font-weight: 800; color: var(--navy); text-align: right; }
  .bal-res { border: 2px solid var(--navy); border-radius: 12px; text-align: center; padding: 8px 6px; }
  .bal-res small { display: block; font-size: 10.5px; color: var(--g-sub); }
  .bal-res b { display: block; font-size: 21px; color: var(--navy); font-weight: 800; }
  .bal-res em { font-style: normal; font-size: 11px; color: #333; }
  .flow { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; margin: 2px 0 6px; }
  .flow > div:not(.ar) { background: var(--t3); border-radius: 10px; text-align: center; padding: 7px 6px; }
  .flow .st { font-size: 10.5px; font-weight: 800; color: var(--g-sub); letter-spacing: .5px; }
  .flow .nm { font-size: 13px; font-weight: 800; color: var(--navy); margin: 1px 0; }
  .flow .ds { font-size: 10.8px; color: #333; }
  .flow .ar { display: flex; align-items: center; justify-content: center; color: var(--g-sub); }
  .plan { width: 100%; border-collapse: collapse; font-size: 11.6px; }
  .plan th { background: var(--navy); color: #fff; font-weight: 600; padding: 5px 8px; }
  .plan td { border: 1px solid var(--g-line); padding: 3px 8px; vertical-align: middle; }
  .plan td.w { width: 58px; text-align: center; font-weight: 700; color: var(--navy); background: var(--g-bg); }
  .plan td.a { width: 62px; text-align: center; }
  .plan td.ck { width: 136px; white-space: nowrap; }
  .plan td.ck span { display: inline-block; width: 12px; height: 12px; border: 1px solid #777; margin-right: 4px; vertical-align: -2px; }
  .rp-refs { list-style: none; font-size: 10px; color: #333; line-height: 1.4; }
  .rp-refs li { padding-left: 14px; text-indent: -14px; }
  .rp-ft { display: flex; align-items: center; gap: 14px; border-top: 1px solid #777; padding: 8px 0 16px; font-size: 10px; color: #444; line-height: 1.5; }
  .rp-ft .org { font-weight: 800; color: var(--navy); font-size: 11px; line-height: 1.3; padding-right: 14px; border-right: 1px solid var(--g-line); }
  .rp-ft .txt { flex: 1; }
  .rp-ft .pg { font-size: 11px; align-self: flex-start; }