From 0c61e7a895dbc5a42bcd2d41a8f2a22ef9a22854 Mon Sep 17 00:00:00 2001
From: Johngreen <ramses203@naver.com>
Date: Tue, 10 Feb 2026 16:42:40 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Material=20Design=203=20redesign=20?=
 =?UTF-8?q?=E2=80=94=20elevation-based=20cards,=20M3=20color=20system,=20G?=
 =?UTF-8?q?oogle-style=20navigation,=20smooth=20transitions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/app/globals.css | 1123 ++++++++++++++++++++++---------------
 1 file changed, 658 insertions(+), 465 deletions(-)

diff --git a/dashboard/app/globals.css b/dashboard/app/globals.css
index 657749a..7b6371c 100644
--- a/dashboard/app/globals.css
+++ b/dashboard/app/globals.css
@@ -1,16 +1,54 @@
+/* ===== Material Design 3 — FactoryOps v2 ===== */
+
 :root {
+  /* Primary */
   --md-primary: #1a73e8;
   --md-primary-dark: #1557b0;
+  --md-on-primary: #ffffff;
+  --md-primary-container: #d3e3fd;
+  --md-on-primary-container: #041e49;
+
+  /* Surface Tones (M3) */
+  --md-surface: #ffffff;
+  --md-surface-dim: #ddd8d3;
+  --md-surface-bright: #fdf8f3;
+  --md-surface-container-lowest: #ffffff;
+  --md-surface-container-low: #f8f9fa;
+  --md-surface-container: #f1f3f4;
+  --md-surface-container-high: #e8eaed;
+  --md-surface-container-highest: #dadce0;
+  --md-surface-variant: #e1e3e1;
+  --md-on-surface: #1f1f1f;
+  --md-on-surface-secondary: #444746;
+  --md-on-surface-variant: #5f6368;
+
+  /* Outline */
+  --md-outline: #747775;
+  --md-outline-variant: #c4c7c5;
+
+  /* Semantic */
   --md-success: #1e8e3e;
   --md-error: #d93025;
   --md-warning: #f9ab00;
-  --md-surface: #ffffff;
-  --md-surface-variant: #f8f9fa;
-  --md-on-surface: #202124;
-  --md-on-surface-secondary: #5f6368;
-  --md-outline: #dadce0;
-  --md-radius: 8px;
-  --md-radius-lg: 12px;
+  --md-info: #1a73e8;
+
+  /* Elevation */
+  --md-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
+  --md-elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
+  --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
+
+  /* Shape */
+  --md-radius-xs: 4px;
+  --md-radius-sm: 8px;
+  --md-radius: 12px;
+  --md-radius-lg: 16px;
+  --md-radius-xl: 28px;
+  --md-radius-full: 9999px;
+
+  /* Motion */
+  --md-motion-standard: 300ms cubic-bezier(0.2, 0, 0, 1);
+  --md-motion-emphasized: 500ms cubic-bezier(0.2, 0, 0, 1);
+  --md-motion-quick: 150ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 * {
@@ -25,10 +63,13 @@ html, body {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
   color: var(--md-on-surface);
-  background: var(--md-surface-variant);
+  background: var(--md-surface-container-low);
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
+  letter-spacing: 0.01em;
 }
 
 a {
@@ -49,11 +90,12 @@ a {
   animation: spin 1s linear infinite;
 }
 
+/* ===== Loading States ===== */
 .loading {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 40px;
+  padding: 48px;
   color: var(--md-primary);
 }
 
@@ -66,7 +108,7 @@ a {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--md-surface-variant);
+  background: var(--md-surface-container-low);
 }
 
 .auth-loading .material-symbols-outlined {
@@ -74,22 +116,29 @@ a {
   color: var(--md-primary);
 }
 
+/* ===== Card ===== */
 .card {
   background: var(--md-surface);
   border-radius: var(--md-radius-lg);
-  border: 1px solid var(--md-outline);
+  box-shadow: var(--md-elevation-1);
   overflow: hidden;
+  transition: box-shadow var(--md-motion-standard);
+}
+
+.card:hover {
+  box-shadow: var(--md-elevation-2);
 }
 
 .card-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--md-outline);
+  padding: 16px 24px;
+  background: var(--md-surface-container-low);
   font-size: 14px;
   font-weight: 500;
   color: var(--md-on-surface);
+  justify-content: space-between;
 }
 
 .card-header .material-symbols-outlined {
@@ -98,52 +147,215 @@ a {
 }
 
 .card-body {
-  padding: 20px;
+  padding: 20px 24px;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
+/* ===== Buttons ===== */
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 24px;
+  background: var(--md-primary);
+  color: var(--md-on-primary);
+  border: none;
+  border-radius: var(--md-radius-xl);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--md-motion-quick), box-shadow var(--md-motion-quick);
+  position: relative;
+  overflow: hidden;
+  letter-spacing: 0.01em;
+}
+
+.btn-primary::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  opacity: 0;
+  transition: opacity var(--md-motion-quick);
+}
+
+.btn-primary:hover:not(:disabled)::after {
+  opacity: 0.08;
+}
+
+.btn-primary:hover:not(:disabled) {
+  box-shadow: var(--md-elevation-1);
+}
+
+.btn-primary:active:not(:disabled)::after {
+  opacity: 0.12;
+}
+
+.btn-primary:disabled {
+  background: var(--md-surface-container-high);
+  color: var(--md-on-surface);
+  opacity: 0.38;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.btn-primary .material-symbols-outlined {
+  font-size: 18px;
+}
+
 .btn-outline {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 8px 16px;
-  border: 1px solid var(--md-outline);
-  border-radius: 20px;
-  background: transparent;
-  color: var(--md-on-surface-secondary);
+  gap: 6px;
+  padding: 8px 20px;
+  border: none;
+  border-radius: var(--md-radius-xl);
+  background: var(--md-primary-container);
+  color: var(--md-on-primary-container);
   font-size: 13px;
+  font-weight: 500;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background var(--md-motion-quick), box-shadow var(--md-motion-quick);
+  position: relative;
+  overflow: hidden;
 }
 
-.btn-outline:hover {
-  background: var(--md-surface-variant);
+.btn-outline::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--md-on-primary-container);
+  opacity: 0;
+  transition: opacity var(--md-motion-quick);
+}
+
+.btn-outline:hover::after {
+  opacity: 0.08;
 }
 
 .btn-outline .material-symbols-outlined {
   font-size: 16px;
 }
 
+.btn-sm {
+  padding: 6px 14px;
+  font-size: 12px;
+}
+
+.btn-sm .material-symbols-outlined {
+  font-size: 16px;
+}
+
+.btn-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: var(--md-primary);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: var(--md-radius-xl);
+  transition: background var(--md-motion-quick);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-text::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--md-primary);
+  opacity: 0;
+  transition: opacity var(--md-motion-quick);
+}
+
+.btn-text:hover::after {
+  opacity: 0.08;
+}
+
+.btn-text .material-symbols-outlined {
+  font-size: 18px;
+}
+
+.btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: none;
+  border-radius: var(--md-radius-full);
+  cursor: pointer;
+  color: var(--md-on-surface-variant);
+  transition: background var(--md-motion-quick), color var(--md-motion-quick);
+}
+
+.btn-icon:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--md-on-surface);
+}
+
+.btn-icon .material-symbols-outlined {
+  font-size: 20px;
+}
+
+.btn-icon-danger:hover {
+  background: rgba(217, 48, 37, 0.08);
+  color: var(--md-error);
+}
+
+.btn-danger {
+  color: var(--md-error);
+}
+
+.btn-danger:hover {
+  background: rgba(217, 48, 37, 0.08);
+}
+
+/* ===== Empty States ===== */
 .empty-message {
   text-align: center;
-  padding: 32px;
-  color: var(--md-on-surface-secondary);
+  padding: 40px;
+  color: var(--md-on-surface-variant);
   font-size: 14px;
 }
 
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 64px 24px;
+  color: var(--md-on-surface-variant);
+}
+
+.empty-state .material-symbols-outlined {
+  font-size: 56px;
+  opacity: 0.35;
+}
+
+.empty-state p {
+  font-size: 15px;
+}
+
+/* ===== Home / Tenant Selection ===== */
 .home-container {
   max-width: 960px;
   margin: 0 auto;
-  padding: 32px 20px;
+  padding: 40px 24px;
 }
 
 .home-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 32px;
+  margin-bottom: 36px;
 }
 
 .home-title {
@@ -160,6 +372,7 @@ a {
 .home-title h1 {
   font-size: 24px;
   font-weight: 500;
+  letter-spacing: -0.01em;
 }
 
 .home-user {
@@ -167,7 +380,7 @@ a {
   align-items: center;
   gap: 12px;
   font-size: 13px;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
 .tenant-grid {
@@ -180,18 +393,18 @@ a {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 24px 16px;
-  border: 1px solid var(--md-outline);
+  gap: 10px;
+  padding: 28px 20px;
   border-radius: var(--md-radius-lg);
   background: var(--md-surface);
+  box-shadow: var(--md-elevation-1);
   cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  transition: box-shadow var(--md-motion-standard), transform var(--md-motion-standard);
 }
 
 .tenant-card:hover {
-  border-color: var(--md-primary);
-  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.15);
+  box-shadow: var(--md-elevation-2);
+  transform: translateY(-2px);
 }
 
 .tenant-icon {
@@ -207,37 +420,37 @@ a {
 
 .tenant-id {
   font-size: 12px;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
+/* ===== Login ===== */
 .login-container {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--md-surface-variant);
+  background: var(--md-surface-container-low);
   padding: 20px;
 }
 
 .login-card {
   background: var(--md-surface);
   border-radius: var(--md-radius-lg);
-  padding: 40px;
+  padding: 48px 40px;
   width: 100%;
-  max-width: 400px;
-  border: 1px solid var(--md-outline);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
+  max-width: 420px;
+  box-shadow: var(--md-elevation-2);
 }
 
 .login-header {
   text-align: center;
-  margin-bottom: 32px;
+  margin-bottom: 36px;
 }
 
 .login-icon {
   font-size: 48px;
   color: var(--md-primary);
-  margin-bottom: 12px;
+  margin-bottom: 16px;
   display: block;
 }
 
@@ -245,18 +458,19 @@ a {
   font-size: 24px;
   font-weight: 500;
   margin: 0 0 8px 0;
+  letter-spacing: -0.01em;
 }
 
 .login-header p {
   font-size: 14px;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
   margin: 0;
 }
 
 .login-form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 24px;
 }
 
 .login-error {
@@ -264,7 +478,7 @@ a {
   align-items: center;
   gap: 8px;
   padding: 12px 16px;
-  background: #fce8e6;
+  background: rgba(217, 48, 37, 0.08);
   border-radius: var(--md-radius);
   color: var(--md-error);
   font-size: 14px;
@@ -274,44 +488,6 @@ a {
   font-size: 20px;
 }
 
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.form-field label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--md-on-surface-secondary);
-}
-
-.form-field input {
-  padding: 14px 16px;
-  border: 1px solid var(--md-outline);
-  border-radius: var(--md-radius);
-  background: var(--md-surface);
-  color: var(--md-on-surface);
-  font-size: 16px;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.form-field input:focus {
-  outline: none;
-  border-color: var(--md-primary);
-  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
-}
-
-.form-field input::placeholder {
-  color: #9aa0a6;
-}
-
-.form-field input:disabled {
-  background: #f1f3f4;
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
 .login-button {
   display: flex;
   align-items: center;
@@ -319,23 +495,25 @@ a {
   gap: 8px;
   padding: 14px 24px;
   background: var(--md-primary);
-  color: #ffffff;
+  color: var(--md-on-primary);
   border: none;
-  border-radius: 20px;
-  font-size: 14px;
+  border-radius: var(--md-radius-xl);
+  font-size: 15px;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.2s, box-shadow 0.2s;
-  margin-top: 8px;
+  transition: background var(--md-motion-quick), box-shadow var(--md-motion-quick);
+  margin-top: 4px;
+  letter-spacing: 0.01em;
 }
 
 .login-button:hover:not(:disabled) {
-  background: var(--md-primary-dark);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--md-elevation-1);
 }
 
 .login-button:disabled {
-  background: #a8c7fa;
+  background: var(--md-surface-container-high);
+  color: var(--md-on-surface);
+  opacity: 0.38;
   cursor: not-allowed;
 }
 
@@ -343,34 +521,37 @@ a {
   font-size: 18px;
 }
 
+/* ===== Toast / Snackbar ===== */
 .toast-container {
   position: fixed;
   bottom: 24px;
-  right: 24px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 1000;
   display: flex;
   flex-direction: column;
   gap: 8px;
+  align-items: center;
 }
 
 .toast {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px 16px;
-  border-radius: var(--md-radius);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  min-width: 300px;
-  max-width: 480px;
+  padding: 14px 20px;
+  border-radius: var(--md-radius-sm);
+  box-shadow: var(--md-elevation-3);
+  min-width: 320px;
+  max-width: 520px;
   animation: toast-in 0.3s ease;
 }
 
-.toast-success { background: #e6f4ea; color: var(--md-success); }
-.toast-error { background: #fce8e6; color: var(--md-error); }
-.toast-info { background: #e8f0fe; color: var(--md-primary); }
+.toast-success { background: #2d2d2d; color: #a8dab5; }
+.toast-error { background: #2d2d2d; color: #f9a8a1; }
+.toast-info { background: #2d2d2d; color: #a8c7fa; }
 
 .toast-icon { font-size: 20px; }
-.toast-message { flex: 1; font-size: 14px; }
+.toast-message { flex: 1; font-size: 14px; color: #e3e3e3; }
 
 .toast-close {
   background: none;
@@ -379,6 +560,8 @@ a {
   color: inherit;
   opacity: 0.6;
   padding: 4px;
+  border-radius: var(--md-radius-full);
+  transition: opacity var(--md-motion-quick);
 }
 
 .toast-close:hover { opacity: 1; }
@@ -388,13 +571,13 @@ a {
 }
 
 @keyframes toast-in {
-  from { transform: translateX(100%); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
+  from { transform: translateY(24px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
 }
 
 @keyframes toast-out {
-  from { transform: translateX(0); opacity: 1; }
-  to { transform: translateX(100%); opacity: 0; }
+  from { transform: translateY(0); opacity: 1; }
+  to { transform: translateY(24px); opacity: 0; }
 }
 
 /* ===== TopNav ===== */
@@ -403,13 +586,13 @@ a {
   top: 0;
   left: 0;
   right: 0;
-  height: 56px;
+  height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
+  padding: 0 24px;
   background: var(--md-surface);
-  border-bottom: 1px solid var(--md-outline);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   z-index: 100;
 }
 
@@ -426,14 +609,14 @@ a {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 4px;
-  border-radius: var(--md-radius);
+  padding: 6px 8px;
+  border-radius: var(--md-radius-sm);
   color: var(--md-primary);
-  transition: background 0.2s;
+  transition: background var(--md-motion-quick);
 }
 
 .topnav-brand:hover {
-  background: var(--md-surface-variant);
+  background: rgba(26, 115, 232, 0.06);
 }
 
 .topnav-brand .material-symbols-outlined {
@@ -441,21 +624,22 @@ a {
 }
 
 .topnav-app-name {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 18px;
+  font-weight: 500;
   color: var(--md-on-surface);
+  letter-spacing: -0.01em;
 }
 
 .topnav-divider {
   width: 1px;
   height: 24px;
-  background: var(--md-outline);
+  background: var(--md-outline-variant);
 }
 
 .topnav-tenant {
   font-size: 14px;
   font-weight: 500;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
 .topnav-center {
@@ -468,25 +652,43 @@ a {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 14px;
+  padding: 8px 16px;
   background: none;
   border: none;
-  border-radius: 20px;
+  border-radius: var(--md-radius-xl);
   cursor: pointer;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
-  color: var(--md-on-surface-secondary);
-  transition: background 0.2s, color 0.2s;
+  color: var(--md-on-surface-variant);
+  transition: background var(--md-motion-quick), color var(--md-motion-quick);
+  position: relative;
+  overflow: hidden;
+}
+
+.topnav-item::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  opacity: 0;
+  transition: opacity var(--md-motion-quick);
+}
+
+.topnav-item:hover::after {
+  opacity: 0.06;
 }
 
 .topnav-item:hover {
-  background: var(--md-surface-variant);
   color: var(--md-on-surface);
 }
 
 .topnav-item.active {
-  background: #e8f0fe;
-  color: var(--md-primary);
+  background: var(--md-primary-container);
+  color: var(--md-on-primary-container);
+}
+
+.topnav-item.active::after {
+  opacity: 0;
 }
 
 .topnav-item .material-symbols-outlined {
@@ -501,7 +703,7 @@ a {
 
 .topnav-user {
   font-size: 13px;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
 /* ===== Tenant Layout ===== */
@@ -510,14 +712,14 @@ a {
 }
 
 .tenant-main {
-  padding-top: 56px;
+  padding-top: 64px;
 }
 
 /* ===== Page Common ===== */
 .page-container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 24px 20px;
+  padding: 28px 24px;
 }
 
 .page-header {
@@ -531,8 +733,9 @@ a {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 500;
+  letter-spacing: -0.01em;
 }
 
 .page-title .material-symbols-outlined {
@@ -556,123 +759,109 @@ a {
 
 .page-error p {
   font-size: 16px;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
 .page-breadcrumb {
   margin-bottom: 16px;
 }
 
-/* ===== Buttons ===== */
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 20px;
-  background: var(--md-primary);
-  color: #ffffff;
-  border: none;
-  border-radius: 20px;
+/* ===== Form Fields ===== */
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-field label,
+.form-label {
   font-size: 14px;
   font-weight: 500;
-  cursor: pointer;
-  transition: background 0.2s, box-shadow 0.2s;
+  color: var(--md-on-surface-variant);
 }
 
-.btn-primary:hover:not(:disabled) {
-  background: var(--md-primary-dark);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+.form-field input {
+  padding: 14px 16px;
+  border: 1px solid var(--md-outline-variant);
+  border-radius: var(--md-radius);
+  background: var(--md-surface);
+  color: var(--md-on-surface);
+  font-size: 16px;
+  font-family: inherit;
+  transition: border-color var(--md-motion-quick);
+  outline: none;
 }
 
-.btn-primary:disabled {
+.form-field input:focus {
+  border-color: var(--md-primary);
+  border-width: 2px;
+  padding: 13px 15px;
+}
+
+.form-field input::placeholder {
+  color: var(--md-on-surface-variant);
   opacity: 0.6;
+}
+
+.form-field input:disabled {
+  background: var(--md-surface-container-high);
+  color: var(--md-on-surface);
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
-.btn-primary .material-symbols-outlined {
-  font-size: 18px;
-}
-
-.btn-sm {
-  padding: 6px 12px;
-  font-size: 12px;
-}
-
-.btn-sm .material-symbols-outlined {
-  font-size: 16px;
-}
-
-.btn-text {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: none;
-  border: none;
-  color: var(--md-on-surface-secondary);
-  font-size: 13px;
-  cursor: pointer;
-  padding: 6px 8px;
+.form-field select {
+  padding: 14px 16px;
+  border: 1px solid var(--md-outline-variant);
   border-radius: var(--md-radius);
-  transition: background 0.2s, color 0.2s;
-}
-
-.btn-text:hover {
-  background: var(--md-surface-variant);
+  background: var(--md-surface);
   color: var(--md-on-surface);
+  font-size: 16px;
+  font-family: inherit;
+  transition: border-color var(--md-motion-quick);
+  outline: none;
+  width: 100%;
 }
 
-.btn-text .material-symbols-outlined {
-  font-size: 18px;
+.form-field select:focus {
+  border-color: var(--md-primary);
+  border-width: 2px;
+  padding: 13px 15px;
 }
 
-.btn-icon {
+.form-field select:disabled {
+  background: var(--md-surface-container-high);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-field input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.form-field input[type="number"]::-webkit-outer-spin-button,
+.form-field input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.form-row {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: none;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  color: var(--md-on-surface-secondary);
-  transition: background 0.2s, color 0.2s;
+  gap: 16px;
+  align-items: flex-start;
 }
 
-.btn-icon:hover {
-  background: var(--md-surface-variant);
-  color: var(--md-on-surface);
+.form-row > .form-field {
+  flex: 1;
 }
 
-.btn-icon .material-symbols-outlined {
-  font-size: 18px;
-}
-
-.btn-icon-danger:hover {
-  background: #fce8e6;
-  color: var(--md-error);
-}
-
-/* ===== Empty State ===== */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 60px 20px;
-  color: var(--md-on-surface-secondary);
-}
-
-.empty-state .material-symbols-outlined {
-  font-size: 48px;
-  opacity: 0.4;
-}
-
-.empty-state p {
-  font-size: 15px;
-}
-
-/* ===== Machine Grid ===== */
+/* ===== Machine Grid (Dashboard) ===== */
 .machine-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -681,15 +870,15 @@ a {
 
 .machine-card {
   background: var(--md-surface);
-  border: 1px solid var(--md-outline);
   border-radius: var(--md-radius-lg);
   overflow: hidden;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  box-shadow: var(--md-elevation-1);
+  transition: box-shadow var(--md-motion-standard), transform var(--md-motion-standard);
 }
 
 .machine-card:hover {
-  border-color: var(--md-primary);
-  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.12);
+  box-shadow: var(--md-elevation-2);
+  transform: translateY(-1px);
 }
 
 .machine-card-body {
@@ -721,21 +910,21 @@ a {
 
 .machine-card-code {
   font-size: 13px;
-  color: var(--md-on-surface-secondary);
-  font-family: 'SF Mono', 'Menlo', monospace;
+  color: var(--md-on-surface-variant);
+  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
 }
 
 .machine-card-model {
   font-size: 12px;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
 .machine-card-meta {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding-top: 8px;
-  border-top: 1px solid var(--md-outline);
+  padding-top: 12px;
+  border-top: 1px solid var(--md-outline-variant);
 }
 
 .machine-card-parts {
@@ -743,7 +932,7 @@ a {
   align-items: center;
   gap: 4px;
   font-size: 12px;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
 .machine-card-parts .material-symbols-outlined {
@@ -755,9 +944,8 @@ a {
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
-  padding: 8px 12px;
-  border-top: 1px solid var(--md-outline);
-  background: var(--md-surface-variant);
+  padding: 8px 16px;
+  background: var(--md-surface-container-low);
 }
 
 /* ===== Detail Page ===== */
@@ -766,10 +954,10 @@ a {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
-  padding: 20px;
+  padding: 20px 24px;
   background: var(--md-surface);
-  border: 1px solid var(--md-outline);
   border-radius: var(--md-radius-lg);
+  box-shadow: var(--md-elevation-1);
 }
 
 .detail-header-left {
@@ -784,30 +972,31 @@ a {
 }
 
 .detail-title {
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 500;
   margin: 0;
+  letter-spacing: -0.01em;
 }
 
 .detail-subtitle {
   font-size: 14px;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
 /* ===== Section ===== */
 .section {
   background: var(--md-surface);
-  border: 1px solid var(--md-outline);
   border-radius: var(--md-radius-lg);
   overflow: hidden;
+  box-shadow: var(--md-elevation-1);
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--md-outline);
+  padding: 16px 24px;
+  background: var(--md-surface-container-low);
 }
 
 .section-title {
@@ -837,22 +1026,28 @@ a {
 
 .part-table th {
   text-align: left;
-  padding: 10px 16px;
+  padding: 12px 16px;
   font-weight: 500;
-  color: var(--md-on-surface-secondary);
-  background: var(--md-surface-variant);
-  border-bottom: 1px solid var(--md-outline);
+  color: var(--md-on-surface-variant);
+  background: var(--md-surface-container-low);
+  border-bottom: 1px solid var(--md-outline-variant);
   white-space: nowrap;
+  font-size: 12px;
+  letter-spacing: 0.02em;
 }
 
 .part-table td {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--md-outline);
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   vertical-align: middle;
 }
 
+.part-table tbody tr {
+  transition: background var(--md-motion-quick);
+}
+
 .part-table tbody tr:hover {
-  background: #f8f9fa;
+  background: rgba(0, 0, 0, 0.02);
 }
 
 .part-table tbody tr:last-child td {
@@ -860,7 +1055,7 @@ a {
 }
 
 .part-row-warning {
-  background: #fff8e1 !important;
+  background: rgba(249, 171, 0, 0.06) !important;
 }
 
 .part-name-cell {
@@ -875,8 +1070,8 @@ a {
 
 .part-number {
   font-size: 11px;
-  color: var(--md-on-surface-secondary);
-  font-family: 'SF Mono', 'Menlo', monospace;
+  color: var(--md-on-surface-variant);
+  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
 }
 
 .part-actions {
@@ -897,7 +1092,7 @@ a {
   height: 6px;
   background: var(--md-primary);
   border-radius: 3px;
-  transition: width 0.3s;
+  transition: width var(--md-motion-standard);
 }
 
 .pct-bar-warning {
@@ -911,10 +1106,15 @@ a {
 }
 
 /* ===== Modal ===== */
+@keyframes modal-fade-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.32);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -924,54 +1124,60 @@ a {
 
 .modal-content {
   background: var(--md-surface);
-  border-radius: var(--md-radius-lg);
+  border-radius: var(--md-radius-xl);
   width: 100%;
   max-width: 480px;
   max-height: 90vh;
   overflow-y: auto;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--md-elevation-3);
+  animation: modal-fade-in 200ms ease-out;
 }
 
 .modal-lg {
   max-width: 640px;
 }
 
+.modal-sm {
+  max-width: 480px;
+}
+
 .modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 24px 0;
+  padding: 24px 24px 0;
 }
 
 .modal-header h3 {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 500;
   margin: 0;
+  letter-spacing: -0.01em;
 }
 
 .modal-close {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   background: none;
   border: none;
-  border-radius: 50%;
+  border-radius: var(--md-radius-full);
   cursor: pointer;
-  color: var(--md-on-surface-secondary);
-  transition: background 0.2s;
+  color: var(--md-on-surface-variant);
+  transition: background var(--md-motion-quick);
 }
 
 .modal-close:hover {
-  background: var(--md-surface-variant);
+  background: rgba(0, 0, 0, 0.06);
 }
 
 .modal-content form {
-  padding: 20px 24px 24px;
+  padding: 24px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
 }
 
 .modal-actions {
@@ -979,91 +1185,51 @@ a {
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
-  padding: 16px 24px 20px;
+  padding: 16px 24px 24px;
 }
 
 .modal-body-form {
-  padding: 20px 24px 24px;
+  padding: 24px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-}
-
-/* ===== Form Grid ===== */
-.form-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-}
-
-.form-field select {
-  padding: 14px 16px;
-  border: 1px solid var(--md-outline);
-  border-radius: var(--md-radius);
-  background: var(--md-surface);
-  color: var(--md-on-surface);
-  font-size: 16px;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  width: 100%;
-}
-
-.form-field select:focus {
-  outline: none;
-  border-color: var(--md-primary);
-  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
-}
-
-.form-field select:disabled {
-  background: #f1f3f4;
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.form-field input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-.form-field input[type="number"]::-webkit-outer-spin-button,
-.form-field input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+  gap: 20px;
 }
 
 /* ===== Tab Bar ===== */
 .tab-bar {
   display: flex;
   gap: 4px;
-  margin-bottom: 20px;
+  margin-bottom: 24px;
   padding: 4px;
   background: var(--md-surface);
-  border: 1px solid var(--md-outline);
   border-radius: var(--md-radius-lg);
   width: fit-content;
+  box-shadow: var(--md-elevation-1);
 }
 
 .tab-item {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 16px;
+  padding: 10px 20px;
   border: none;
   border-radius: var(--md-radius);
   background: transparent;
-  color: var(--md-on-surface-secondary);
-  font-size: 13px;
+  color: var(--md-on-surface-variant);
+  font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.2s, color 0.2s;
+  transition: background var(--md-motion-quick), color var(--md-motion-quick);
 }
 
 .tab-item:hover {
-  background: var(--md-surface-variant);
+  background: rgba(0, 0, 0, 0.04);
   color: var(--md-on-surface);
 }
 
 .tab-item.active {
-  background: #e8f0fe;
-  color: var(--md-primary);
+  background: var(--md-primary-container);
+  color: var(--md-on-primary-container);
 }
 
 .tab-item .material-symbols-outlined {
@@ -1079,15 +1245,15 @@ a {
 
 .template-card {
   background: var(--md-surface);
-  border: 1px solid var(--md-outline);
   border-radius: var(--md-radius-lg);
   overflow: hidden;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  box-shadow: var(--md-elevation-1);
+  transition: box-shadow var(--md-motion-standard), transform var(--md-motion-standard);
 }
 
 .template-card:hover {
-  border-color: var(--md-primary);
-  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.12);
+  box-shadow: var(--md-elevation-2);
+  transform: translateY(-1px);
 }
 
 .template-card-body {
@@ -1118,20 +1284,21 @@ a {
 .badge {
   display: inline-flex;
   align-items: center;
-  padding: 2px 8px;
-  border-radius: 12px;
+  padding: 3px 10px;
+  border-radius: var(--md-radius-sm);
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap;
+  letter-spacing: 0.02em;
 }
 
 .badge-schedule {
-  background: #e8f0fe;
+  background: rgba(26, 115, 232, 0.08);
   color: var(--md-primary);
 }
 
 .badge-mode {
-  background: #e6f4ea;
+  background: rgba(30, 142, 62, 0.08);
   color: var(--md-success);
 }
 
@@ -1148,7 +1315,7 @@ a {
 
 .template-card-meta {
   font-size: 13px;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
 .template-card-actions {
@@ -1156,22 +1323,11 @@ a {
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
-  padding: 8px 12px;
-  border-top: 1px solid var(--md-outline);
-  background: var(--md-surface-variant);
-}
-
-/* ===== Form Row / Radio / Checkbox ===== */
-.form-row {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-}
-
-.form-row > .form-field {
-  flex: 1;
+  padding: 8px 16px;
+  background: var(--md-surface-container-low);
 }
 
+/* ===== Radio / Checkbox ===== */
 .radio-group {
   display: flex;
   gap: 16px;
@@ -1181,7 +1337,7 @@ a {
 .radio-label {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   font-size: 14px;
   color: var(--md-on-surface);
   cursor: pointer;
@@ -1189,12 +1345,14 @@ a {
 
 .radio-label input[type="radio"] {
   accent-color: var(--md-primary);
+  width: 18px;
+  height: 18px;
 }
 
 .checkbox-label {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   font-size: 14px;
   color: var(--md-on-surface);
   cursor: pointer;
@@ -1203,11 +1361,11 @@ a {
 
 .checkbox-label input[type="checkbox"] {
   accent-color: var(--md-primary);
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
 }
 
-/* ===== Items List (TemplateEditor) ===== */
+/* ===== Items List (Template Editor) ===== */
 .items-list {
   display: flex;
   flex-direction: column;
@@ -1218,10 +1376,10 @@ a {
   display: flex;
   align-items: flex-start;
   gap: 12px;
-  padding: 12px;
-  background: var(--md-surface-variant);
+  padding: 16px;
+  background: var(--md-surface-container-low);
   border-radius: var(--md-radius);
-  border: 1px solid var(--md-outline);
+  border: 1px solid var(--md-outline-variant);
 }
 
 .item-order {
@@ -1235,7 +1393,7 @@ a {
 .order-num {
   font-size: 12px;
   font-weight: 600;
-  color: var(--md-on-surface-secondary);
+  color: var(--md-on-surface-variant);
 }
 
 .item-fields {
@@ -1246,24 +1404,12 @@ a {
   min-width: 0;
 }
 
-.btn-danger {
-  color: var(--md-error);
-}
-
-.btn-danger:hover {
-  background: #fce8e6;
-}
-
 /* ===== Form Actions ===== */
 .form-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  padding-top: 8px;
-}
-
-.card-header {
-  justify-content: space-between;
+  padding-top: 12px;
 }
 
 /* ===== Inspection List ===== */
@@ -1279,15 +1425,15 @@ a {
   justify-content: space-between;
   padding: 16px 20px;
   background: var(--md-surface);
-  border: 1px solid var(--md-outline-variant);
-  border-radius: 12px;
+  border-radius: var(--md-radius);
   cursor: pointer;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  box-shadow: var(--md-elevation-1);
+  transition: box-shadow var(--md-motion-quick), transform var(--md-motion-quick);
 }
 
 .inspection-card:hover {
-  border-color: var(--md-primary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--md-elevation-2);
+  transform: translateY(-1px);
 }
 
 .inspection-card-left {
@@ -1331,28 +1477,28 @@ a {
 }
 
 .badge-draft {
-  background: var(--md-surface-variant);
+  background: var(--md-surface-container);
   color: var(--md-on-surface-variant);
 }
 
 .badge-progress {
-  background: #e3f2fd;
+  background: rgba(26, 115, 232, 0.08);
   color: #1565c0;
 }
 
 .badge-completed {
-  background: #e8f5e9;
+  background: rgba(30, 142, 62, 0.08);
   color: #2e7d32;
 }
 
 .badge-completed-lg {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   padding: 6px 16px;
-  background: #e8f5e9;
+  background: rgba(30, 142, 62, 0.08);
   color: #2e7d32;
-  border-radius: 20px;
+  border-radius: var(--md-radius-xl);
   font-weight: 500;
   font-size: 14px;
 }
@@ -1365,7 +1511,7 @@ a {
 .template-select-list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
 }
 
 .template-select-item {
@@ -1374,16 +1520,16 @@ a {
   justify-content: space-between;
   padding: 14px 16px;
   border: 1px solid var(--md-outline-variant);
-  border-radius: 10px;
+  border-radius: var(--md-radius);
   background: transparent;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
+  transition: background var(--md-motion-quick), border-color var(--md-motion-quick);
   width: 100%;
   text-align: left;
 }
 
 .template-select-item:hover {
-  background: var(--md-surface-variant);
+  background: rgba(26, 115, 232, 0.04);
   border-color: var(--md-primary);
 }
 
@@ -1435,10 +1581,10 @@ a {
 .inspection-notes {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
-  padding: 12px 16px;
-  background: #fff3e0;
-  border-radius: 10px;
+  gap: 10px;
+  padding: 14px 16px;
+  background: rgba(249, 171, 0, 0.08);
+  border-radius: var(--md-radius);
   font-size: 13px;
   color: #e65100;
   margin-bottom: 16px;
@@ -1457,10 +1603,10 @@ a {
 
 .inspection-item-card {
   border: 1px solid var(--md-outline-variant);
-  border-radius: 12px;
+  border-radius: var(--md-radius-lg);
   padding: 16px 20px;
   background: var(--md-surface);
-  transition: border-color 0.15s;
+  transition: border-color var(--md-motion-quick), box-shadow var(--md-motion-quick);
 }
 
 .inspection-item-card.pass {
@@ -1485,9 +1631,9 @@ a {
   justify-content: center;
   width: 28px;
   height: 28px;
-  border-radius: 50%;
+  border-radius: var(--md-radius-full);
   background: var(--md-primary);
-  color: white;
+  color: var(--md-on-primary);
   font-size: 13px;
   font-weight: 600;
   flex-shrink: 0;
@@ -1501,23 +1647,24 @@ a {
 .inspection-item-required {
   font-size: 11px;
   color: var(--md-error);
-  padding: 2px 6px;
-  border: 1px solid var(--md-error);
-  border-radius: 4px;
+  padding: 2px 8px;
+  border: 1px solid rgba(217, 48, 37, 0.3);
+  border-radius: var(--md-radius-xs);
+  font-weight: 500;
 }
 
 .badge-category {
-  background: #f3e5f5;
+  background: rgba(123, 31, 162, 0.08);
   color: #7b1fa2;
 }
 
 .badge-pass {
-  background: #e8f5e9;
+  background: rgba(46, 125, 50, 0.08);
   color: #2e7d32;
 }
 
 .badge-fail {
-  background: #fce8e6;
+  background: rgba(217, 48, 37, 0.08);
   color: var(--md-error);
 }
 
@@ -1552,13 +1699,13 @@ a {
 .warning-range {
   font-size: 12px;
   color: var(--md-on-surface-variant);
-  padding: 4px 8px;
-  background: var(--md-surface-variant);
-  border-radius: 6px;
+  padding: 4px 10px;
+  background: var(--md-surface-container-low);
+  border-radius: var(--md-radius-sm);
 }
 
 .warning-range {
-  background: #fff8e1;
+  background: rgba(249, 171, 0, 0.08);
   color: #f57f17;
 }
 
@@ -1570,22 +1717,23 @@ a {
 .toggle-btn {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 8px 20px;
+  gap: 6px;
+  padding: 8px 24px;
   border: 1px solid var(--md-outline-variant);
-  border-radius: 20px;
+  border-radius: var(--md-radius-xl);
   background: transparent;
   cursor: pointer;
   font-size: 14px;
-  transition: all 0.15s;
+  font-weight: 500;
+  transition: background var(--md-motion-quick), border-color var(--md-motion-quick), color var(--md-motion-quick);
 }
 
 .toggle-btn:hover:not(:disabled) {
-  background: var(--md-surface-variant);
+  background: rgba(0, 0, 0, 0.04);
 }
 
 .toggle-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.38;
   cursor: not-allowed;
 }
 
@@ -1594,59 +1742,90 @@ a {
 }
 
 .toggle-pass.active {
-  background: #e8f5e9;
+  background: rgba(76, 175, 80, 0.1);
   border-color: #4caf50;
   color: #2e7d32;
 }
 
 .toggle-fail.active {
-  background: #fce8e6;
+  background: rgba(217, 48, 37, 0.1);
   border-color: var(--md-error);
   color: var(--md-error);
 }
 
 .form-textarea {
   width: 100%;
-  min-height: 48px;
-  padding: 10px 14px;
+  min-height: 52px;
+  padding: 12px 16px;
   border: 1px solid var(--md-outline-variant);
-  border-radius: 8px;
+  border-radius: var(--md-radius);
   font-size: 14px;
   resize: vertical;
   font-family: inherit;
+  transition: border-color var(--md-motion-quick);
+  outline: none;
 }
 
 .form-textarea:focus {
-  outline: none;
   border-color: var(--md-primary);
+  border-width: 2px;
+  padding: 11px 15px;
 }
 
 .form-textarea:disabled {
-  background: var(--md-surface-variant);
+  background: var(--md-surface-container-high);
   cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .form-select {
   padding: 10px 14px;
   border: 1px solid var(--md-outline-variant);
-  border-radius: 8px;
+  border-radius: var(--md-radius);
   font-size: 14px;
   background: var(--md-surface);
   min-width: 200px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--md-motion-quick);
 }
 
 .form-select:focus {
-  outline: none;
   border-color: var(--md-primary);
+  border-width: 2px;
+  padding: 9px 13px;
 }
 
 .form-select:disabled {
-  background: var(--md-surface-variant);
+  background: var(--md-surface-container-high);
   cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.form-input {
+  padding: 10px 14px;
+  border: 1px solid var(--md-outline-variant);
+  border-radius: var(--md-radius);
+  font-size: 14px;
+  background: var(--md-surface);
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--md-motion-quick);
+}
+
+.form-input:focus {
+  border-color: var(--md-primary);
+  border-width: 2px;
+  padding: 9px 13px;
+}
+
+.form-input:disabled {
+  background: var(--md-surface-container-high);
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 /* ===== Custom Select (inspection form) ===== */
-
 .custom-select {
   position: relative;
   min-width: 200px;
@@ -1659,32 +1838,37 @@ a {
   width: 100%;
   padding: 10px 14px;
   border: 1px solid var(--md-outline-variant);
-  border-radius: 8px;
+  border-radius: var(--md-radius);
   font-size: 14px;
   background: var(--md-surface);
   cursor: pointer;
   text-align: left;
   gap: 8px;
-  transition: border-color 0.15s;
+  transition: border-color var(--md-motion-quick);
+  font-family: inherit;
 }
 
 .custom-select-trigger:hover:not(.disabled) {
-  border-color: var(--md-primary);
+  border-color: var(--md-on-surface);
 }
 
 .custom-select-trigger:focus {
   outline: none;
   border-color: var(--md-primary);
+  border-width: 2px;
+  padding: 9px 13px;
 }
 
 .custom-select-trigger.disabled {
-  background: var(--md-surface-variant);
+  background: var(--md-surface-container-high);
   cursor: not-allowed;
   color: var(--md-on-surface-variant);
+  opacity: 0.5;
 }
 
 .custom-select-trigger .placeholder {
   color: var(--md-on-surface-variant);
+  opacity: 0.6;
 }
 
 .custom-select-arrow {
@@ -1700,8 +1884,8 @@ a {
   right: 0;
   background: var(--md-surface);
   border: 1px solid var(--md-outline-variant);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  border-radius: var(--md-radius);
+  box-shadow: var(--md-elevation-2);
   z-index: 100;
   list-style: none;
   padding: 4px 0;
@@ -1714,39 +1898,35 @@ a {
   padding: 10px 14px;
   font-size: 14px;
   cursor: pointer;
-  transition: background 0.1s;
+  transition: background var(--md-motion-quick);
+  border-radius: 0;
 }
 
 .custom-select-option:hover {
-  background: var(--md-surface-variant);
+  background: rgba(0, 0, 0, 0.04);
 }
 
 .custom-select-option.selected {
   color: var(--md-primary);
   font-weight: 500;
-  background: rgba(26, 115, 232, 0.06);
+  background: rgba(26, 115, 232, 0.08);
 }
 
 .complete-summary {
   font-size: 16px;
   font-weight: 500;
   text-align: center;
-  padding: 12px;
-  background: var(--md-surface-variant);
-  border-radius: 10px;
+  padding: 16px;
+  background: var(--md-surface-container-low);
+  border-radius: var(--md-radius);
   margin-bottom: 16px;
 }
 
 /* ===== Phase 5: Counter / Replace / History ===== */
-
-.modal-sm {
-  max-width: 480px;
-}
-
 .counter-modal-info {
-  padding: 16px;
-  background: var(--md-surface-variant);
-  border-radius: 10px;
+  padding: 16px 20px;
+  background: var(--md-surface-container-low);
+  border-radius: var(--md-radius);
   margin-bottom: 16px;
 }
 
@@ -1774,9 +1954,9 @@ a {
   align-items: flex-start;
   gap: 12px;
   padding: 14px 16px;
-  background: #fff3e0;
-  border: 1px solid #ffb74d;
-  border-radius: 10px;
+  background: rgba(230, 81, 0, 0.06);
+  border: 1px solid rgba(255, 183, 77, 0.4);
+  border-radius: var(--md-radius);
   margin-bottom: 16px;
   font-size: 14px;
   color: #e65100;
@@ -1809,22 +1989,27 @@ a {
 
 .history-table th {
   text-align: left;
-  padding: 10px 14px;
-  background: var(--md-surface-variant);
-  font-weight: 600;
-  font-size: 13px;
+  padding: 12px 16px;
+  background: var(--md-surface-container-low);
+  font-weight: 500;
+  font-size: 12px;
   color: var(--md-on-surface-variant);
   border-bottom: 1px solid var(--md-outline-variant);
+  letter-spacing: 0.02em;
 }
 
 .history-table td {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--md-outline-variant);
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   color: var(--md-on-surface);
 }
 
+.history-table tbody tr {
+  transition: background var(--md-motion-quick);
+}
+
 .history-table tbody tr:hover {
-  background: var(--md-surface-variant);
+  background: rgba(0, 0, 0, 0.02);
 }
 
 .loading-sm {
@@ -1846,35 +2031,34 @@ a {
 
 .empty-state-sm .material-symbols-outlined {
   font-size: 40px;
-  opacity: 0.5;
+  opacity: 0.35;
 }
 
 /* ===== Phase 6: Alarms ===== */
-
 .alarm-summary-badges {
   display: flex;
   gap: 8px;
 }
 
 .alarm-badge {
-  padding: 4px 12px;
-  border-radius: 20px;
+  padding: 4px 14px;
+  border-radius: var(--md-radius-xl);
   font-size: 13px;
   font-weight: 600;
 }
 
 .alarm-badge-critical {
-  background: #fce8e6;
+  background: rgba(217, 48, 37, 0.08);
   color: var(--md-error);
 }
 
 .alarm-badge-warning {
-  background: #fff3e0;
+  background: rgba(230, 81, 0, 0.08);
   color: #e65100;
 }
 
 .alarm-badge-ok {
-  background: #e8f5e9;
+  background: rgba(46, 125, 50, 0.08);
   color: #2e7d32;
 }
 
@@ -1889,14 +2073,14 @@ a {
   align-items: flex-start;
   gap: 16px;
   padding: 16px 20px;
-  border-radius: 12px;
-  border: 1px solid var(--md-outline-variant);
+  border-radius: var(--md-radius-lg);
   background: var(--md-surface);
-  transition: box-shadow 0.15s;
+  box-shadow: var(--md-elevation-1);
+  transition: box-shadow var(--md-motion-quick);
 }
 
 .alarm-card:hover {
-  box-shadow: var(--md-shadow-1);
+  box-shadow: var(--md-elevation-2);
 }
 
 .alarm-card-warning {
@@ -1905,7 +2089,7 @@ a {
 
 .alarm-card-critical {
   border-left: 4px solid var(--md-error);
-  background: #fff8f7;
+  background: rgba(217, 48, 37, 0.02);
 }
 
 .alarm-card-icon {
@@ -1915,16 +2099,16 @@ a {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
+  border-radius: var(--md-radius-full);
 }
 
 .alarm-card-warning .alarm-card-icon {
-  background: #fff3e0;
+  background: rgba(230, 81, 0, 0.08);
   color: #e65100;
 }
 
 .alarm-card-critical .alarm-card-icon {
-  background: #fce8e6;
+  background: rgba(217, 48, 37, 0.08);
   color: var(--md-error);
 }
 
@@ -1942,18 +2126,18 @@ a {
 
 .alarm-severity-badge {
   padding: 2px 10px;
-  border-radius: 12px;
+  border-radius: var(--md-radius-sm);
   font-size: 12px;
   font-weight: 600;
 }
 
 .severity-warning {
-  background: #fff3e0;
+  background: rgba(230, 81, 0, 0.08);
   color: #e65100;
 }
 
 .severity-critical {
-  background: #fce8e6;
+  background: rgba(217, 48, 37, 0.08);
   color: var(--md-error);
 }
 
@@ -2004,6 +2188,7 @@ a {
   font-size: 18px;
 }
 
+/* ===== Spec Grid (Machine Detail) ===== */
 .spec-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -2025,6 +2210,7 @@ a {
   font-size: 12px;
   color: var(--md-on-surface-variant);
   font-weight: 500;
+  letter-spacing: 0.02em;
 }
 
 .spec-value {
@@ -2036,18 +2222,25 @@ a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  opacity: 0.4;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--md-radius-full);
+  opacity: 0.38;
   cursor: default;
 }
 
 .btn-icon-disabled .material-symbols-outlined {
-  font-size: 18px;
+  font-size: 20px;
   color: var(--md-on-surface-variant);
 }
 
+/* ===== Inspection Summary Grid ===== */
+.inspection-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+}
+
 /* ===== Responsive ===== */
 @media (max-width: 768px) {
   .topnav-center {
@@ -2094,7 +2287,7 @@ a {
 
   .part-table th,
   .part-table td {
-    padding: 8px 10px;
+    padding: 10px 12px;
   }
 
   .spec-grid {
@@ -2149,7 +2342,6 @@ a {
   .login-card {
     padding: 32px 24px;
     border-radius: 0;
-    border: none;
     box-shadow: none;
     max-width: none;
   }
@@ -2199,6 +2391,7 @@ a {
   .modal-content {
     margin: 8px;
     max-height: 95vh;
+    border-radius: var(--md-radius-lg);
   }
 
   .modal-content.modal-sm {