Full responsive: pie charts scale, table scrollable, breakpoints

- Pie chart size adapts to container width (max 200px)
- Project table wrapped in scrollable container (no overflow)
- Table min-width ensures columns don't collapse
- Added breakpoints for 900/768/560/480px
- Stats, tools grid, and fonts scale down progressively

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: atsumitanaka

links/index.html

@@ -327,10 +327,17 @@
 
 
         /* ======== Project Table ======== */
+        .table-wrap {
+            width: 100%;
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch;
+            margin-top: 32px;
+        }
+
         .project-table {
             width: 100%;
+            min-width: 580px;
             border-collapse: collapse;
-            margin-top: 32px;
         }
 
         .project-table th {
@@ -342,6 +349,7 @@
             color: #64748b;
             padding: 10px 16px;
             border-bottom: 1px solid rgba(148, 163, 184, 0.15);
+            white-space: nowrap;
         }
 
         .project-table th.num {
@@ -352,6 +360,7 @@
             padding: 12px 16px;
             font-size: 14px;
             border-bottom: 1px solid rgba(148, 163, 184, 0.07);
+            white-space: nowrap;
         }
 
         .project-table tr:hover td {
@@ -401,11 +410,26 @@
             .tools-grid {
                 grid-template-columns: repeat(3, 1fr);
             }
+
+            .pie-charts-grid {
+                gap: 16px;
+            }
         }
 
         @media (max-width: 900px) {
             .pie-charts-grid {
                 grid-template-columns: repeat(2, 1fr);
+                gap: 16px;
+            }
+
+            .main-img-wrap {
+                width: 300px;
+            }
+
+            .project-table th,
+            .project-table td {
+                padding: 10px 10px;
+                font-size: 13px;
             }
         }
 
@@ -435,11 +459,28 @@
             .stat-number {
                 font-size: 20px;
             }
+
+            .project-table th,
+            .project-table td {
+                padding: 8px 8px;
+                font-size: 12px;
+            }
+        }
+
+        @media (max-width: 560px) {
+            .pie-charts-grid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 12px;
+            }
+
+            .pie-chart-card h4 {
+                font-size: 12px;
+            }
         }
 
         @media (max-width: 480px) {
             body {
-                padding: 24px 12px 48px;
+                padding: 24px 10px 48px;
             }
 
             .tools-grid {
@@ -448,16 +489,24 @@
             }
 
             .stats-row {
-                gap: 10px;
+                gap: 8px;
             }
 
             .stat-item {
-                min-width: 80px;
-                padding: 10px 8px;
+                min-width: 60px;
+                padding: 10px 6px;
             }
 
             .stat-number {
-                font-size: 18px;
+                font-size: 16px;
+            }
+
+            .stat-label {
+                font-size: 9px;
+            }
+
+            .project-table {
+                min-width: 480px;
             }
         }
     </style>
@@ -512,20 +561,22 @@ <h2>Starrydata2 Web System</h2>
             <div class="pie-charts-grid" id="pie-charts">
                 <div style="grid-column:1/-1;text-align:center;color:#64748b;padding:24px;">Loading...</div>
             </div>
-            <table class="project-table">
-                <thead>
-                    <tr>
-                        <th>Project</th>
-                        <th class="num">Papers</th>
-                        <th class="num">Figures</th>
-                        <th class="num">Samples</th>
-                        <th class="num">Curves</th>
-                    </tr>
-                </thead>
-                <tbody id="project-tbody">
-                    <tr><td colspan="5" style="color:#64748b; text-align:center; padding:24px;">Loading...</td></tr>
-                </tbody>
-            </table>
+            <div class="table-wrap">
+                <table class="project-table">
+                    <thead>
+                        <tr>
+                            <th>Project</th>
+                            <th class="num">Papers</th>
+                            <th class="num">Figures</th>
+                            <th class="num">Samples</th>
+                            <th class="num">Curves</th>
+                        </tr>
+                    </thead>
+                    <tbody id="project-tbody">
+                        <tr><td colspan="5" style="color:#64748b; text-align:center; padding:24px;">Loading...</td></tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
 
         <!-- ===== Tools ===== -->
@@ -874,7 +925,8 @@ <h3>Debye-Scherrer XRD Plots</h3>
             const canvas = document.getElementById(canvasId);
             if (!canvas) return;
             const ctx = canvas.getContext('2d');
-            const size = 200;
+            const container = canvas.parentElement;
+            const size = Math.min(200, container.clientWidth - 20);
             const dpr = window.devicePixelRatio || 1;
             canvas.width = size * dpr;
             canvas.height = size * dpr;
@@ -904,7 +956,7 @@ <h3>Debye-Scherrer XRD Plots</h3>
 
             // Total in center
             ctx.fillStyle = '#e2e8f0';
-            ctx.font = `bold ${size * 0.11}px -apple-system, sans-serif`;
+            ctx.font = `bold ${Math.max(10, size * 0.11)}px -apple-system, sans-serif`;
             ctx.textAlign = 'center';
             ctx.textBaseline = 'middle';
             ctx.fillText(total.toLocaleString(), cx, cy);