Polish project detail modals and data flows

templates/annual_summary.html

@@ -61,6 +61,8 @@
         border-radius: 16px;
         padding: 18px 20px 20px;
         box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
+        content-visibility: auto;
+        contain-intrinsic-size: 620px;
     }
 
     .chart-legend {
@@ -92,6 +94,8 @@
         grid-template-rows: auto auto 1fr;
         gap: 14px;
         min-height: 100%;
+        content-visibility: auto;
+        contain-intrinsic-size: 760px;
     }
 
     .metric-grid {

templates/base.html

@@ -28,6 +28,16 @@
             padding: 0;
         }
 
+        ::selection {
+            background: rgba(59, 130, 246, 0.18);
+            color: var(--ink);
+        }
+
+        ::-moz-selection {
+            background: rgba(59, 130, 246, 0.18);
+            color: var(--ink);
+        }
+
         body {
             font-family: "SUIT", "Noto Sans KR", "Malgun Gothic", sans-serif;
             color: var(--ink);
@@ -241,6 +251,19 @@
             box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.03);
         }
 
+        select option {
+            color: var(--ink);
+            background: #ffffff;
+        }
+
+        select option:checked,
+        select option:hover,
+        select option:focus {
+            color: var(--ink);
+            background: #eef2f6;
+            box-shadow: inset 0 0 0 999px #eef2f6;
+        }
+
         textarea {
             min-height: 96px;
             resize: vertical;
@@ -293,6 +316,15 @@
             box-shadow: none;
         }
 
+        .button-secondary:hover,
+        .button-secondary:focus-visible {
+            background: #eef2f6;
+            color: #111827;
+            border-color: #d6dde5;
+            transform: none;
+            box-shadow: none;
+        }
+
         .button-icon {
             width: 38px;
             height: 38px;
@@ -646,6 +678,9 @@
         }
 
         async function pollHealth() {
+            if (document.hidden) {
+                return;
+            }
             try {
                 const response = await fetch(`/health?ts=${Date.now()}`, { cache: "no-store" });
                 if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -675,7 +710,11 @@
                 pollHealth();
             }
         });
-        window.setInterval(pollHealth, 15000);
+        window.setInterval(() => {
+            if (!document.hidden) {
+                pollHealth();
+            }
+        }, 15000);
     })();
 </script>
 </body>

templates/dashboard.html

@@ -106,6 +106,8 @@
     .chart-panel {
         display: grid;
         gap: 12px;
+        content-visibility: auto;
+        contain-intrinsic-size: 480px;
     }
 
     .chart-panel-header {
@@ -138,6 +140,8 @@
         box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
         display: grid;
         gap: 12px;
+        content-visibility: auto;
+        contain-intrinsic-size: 420px;
     }
 
     .legend-box {

templates/index.html

@@ -29,6 +29,16 @@
             padding: 0;
         }
 
+        ::selection {
+            background: rgba(11, 107, 99, 0.16);
+            color: var(--ink);
+        }
+
+        ::-moz-selection {
+            background: rgba(11, 107, 99, 0.16);
+            color: var(--ink);
+        }
+
         body {
             font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
             color: var(--ink);
@@ -138,6 +148,8 @@
             border: 1px dashed #a7d1c8;
             border-radius: 18px;
             padding: 18px;
+            content-visibility: auto;
+            contain-intrinsic-size: 240px;
         }
 
         .upload-box p {
@@ -182,6 +194,7 @@
         input[type="number"],
         input[type="date"],
         input[type="file"],
+        select,
         textarea {
             width: 100%;
             border: 1px solid var(--line);
@@ -197,12 +210,26 @@
         }
 
         input:focus,
+        select:focus,
         textarea:focus {
             outline: none;
             border-color: var(--accent);
             box-shadow: 0 0 0 4px rgba(11, 107, 99, 0.12);
         }
 
+        select option {
+            color: var(--ink);
+            background: var(--white);
+        }
+
+        select option:checked,
+        select option:hover,
+        select option:focus {
+            color: var(--ink);
+            background: #e7f0f5;
+            box-shadow: inset 0 0 0 999px #e7f0f5;
+        }
+
         .actions {
             display: flex;
             flex-wrap: wrap;
@@ -236,11 +263,19 @@
             color: #204257;
         }
 
+        .button-secondary:hover,
+        .button-secondary:focus-visible {
+            background: #dbeaf2;
+            color: #163345;
+        }
+
         .table-wrap {
             overflow: auto;
             border: 1px solid var(--line);
             border-radius: 18px;
             background: var(--white);
+            content-visibility: auto;
+            contain-intrinsic-size: 360px;
         }
 
         table {