pdf done

Author: kanekoshoyu

src/components/interactive/PrintableReport.tsx

@@ -128,10 +128,12 @@ const PrintableReport = React.forwardRef<HTMLDivElement, PrintableReportProps>(
           <div className="rounded-lg bg-gray-50 p-3 text-center">
             <h2 className="font-semibold mb-1" style={{ fontSize: '14px' }}>Role Fit Index</h2>
             <p className="font-bold text-black" style={{ fontSize: '20px' }}>{report.index}/100</p>
+            <p className="text-gray-600 mt-1" style={{ fontSize: '9px' }}>40% Technical + 30% Domain + 20% Career + 10% Cultural</p>
           </div>
           <div className="rounded-lg bg-gray-50 p-3 text-center">
             <h2 className="font-semibold mb-1" style={{ fontSize: '14px' }}>Weighted Role Fit Index</h2>
             <p className="font-bold text-black" style={{ fontSize: '20px' }}>{report.weighted_index}/100</p>
+            <p className="text-gray-600 mt-0.5" style={{ fontSize: '9px' }}>40% Technical + 30% Domain + 20% Career + 10% Cultural<br />(each score × confidence)</p>
           </div>
         </div>
 
@@ -257,7 +259,7 @@ const PrintableReport = React.forwardRef<HTMLDivElement, PrintableReportProps>(
         <div className="mb-3 no-break">
           <h2 className="font-semibold mb-2" style={{ fontSize: '16px' }}>Candidate Advice</h2>
           <div className="bg-gray-50 rounded-lg px-5 py-3">
-            <ul className="space-y-1">
+            <ul className="space-y-0.5">
               {candidate_advices.length ? (
                 candidate_advices.map((c, i) => (
                   <li key={i} className="flex items-start gap-3">

src/components/interactive/ReportCard.tsx

@@ -281,10 +281,12 @@ export default function ReportCard() {
           <div className="rounded-lg bg-gray-50 p-5 text-center">
             <h2 className="text-lg font-semibold">Role Fit Index</h2>
             <p className="text-3xl font-bold">{report.index}/100</p>
+              <p className="text-xs text-gray-600 mt-2">40% Technical + 30% Domain + 20% Career + 10% Cultural</p>
           </div>
           <div className="rounded-lg bg-gray-50 p-5 text-center">
             <h2 className="text-lg font-semibold">Weighted Role Fit Index</h2>
             <p className="text-3xl font-bold">{report.weighted_index}/100</p>
+              <p className="text-xs text-gray-600 mt-0.5">40% Technical + 30% Domain + 20% Career + 10% Cultural<br />(each score × confidence)</p>
           </div>
         </div>
 

src/pages/role-fit-index/report.astro

@@ -8,7 +8,7 @@ import ReportCard from "@/components/interactive/ReportCard";
 <Layout title="Role Fit Index Report - Bounteer">
   <Header />
   <main class="py-16 bg-gray-50">
-    <div class="container-custom max-w-4xl mx-auto px-4 pb-8">
+    <div class="container-custom max-w-8xl mx-auto px-4 pb-8">
       <ReportCard client:only="react" />
       <div class="text-center mt-8 space-x-6">
         <a