feat(ui/ux): unify typography to Pretendard and enforce read-only view mode as default

- Set global font-family to Pretendard and letter-spacing to -0.02em.
- Standardized table header font-size to var(--fs-sm).
- Fixed table clipping and sticky header behavior at 1920x1080.
- Implemented dynamic select options in search filters.
- Enforced 'view' mode as default for all asset modals (PC, Server, SW, etc.).
- Improved Modal logic to ensure all fields (including dynamic rows) are correctly locked.
- Updated Location View detail button from 'Edit' to 'View'.
- Updated design_rule.md to reflect new typography standards.

src/styles/common.css

@@ -52,12 +52,8 @@
   letter-spacing: -0.02em;
 }
 
-h1, h2, h3, .stat-value {
-  letter-spacing: -0.05em;
-}
-
 body {
-  font-family: 'Inter', 'Geist', 'Pretendard Variable', -apple-system, sans-serif;
+  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
   color: var(--text-main);
   background-color: var(--bg-color);
   line-height: 1.5;
@@ -140,6 +136,14 @@ input, textarea {
   overflow: hidden;
 }
 
+.view-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+}
+
 /* --- View Toggle (Vercel Tab Style) --- */
 .view-toggle {
   display: inline-flex;
@@ -499,7 +503,7 @@ input:checked + .role-slider:before {
   font-weight: 600;
   color: var(--mute);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }
 
 .search-item input, 
@@ -591,7 +595,7 @@ input:checked + .role-slider:before {
   font-size: var(--fs-md);
   font-weight: 600;
   color: var(--primary);
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
   line-height: 1;
 }
 
@@ -626,6 +630,6 @@ input:checked + .role-slider:before {
 
 .main-footer p {
   margin: 0;
-  letter-spacing: 0.02em;
+  letter-spacing: -0.02em;
 }
 

src/styles/dashboard.css

@@ -4,7 +4,7 @@
   font-size: var(--fs-lg);
   font-weight: 600;
   color: var(--primary);
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
   margin-bottom: clamp(0.5rem, 1.5vmin, 1.5rem);
   line-height: 1;
 }
@@ -38,7 +38,7 @@
   font-weight: 500;
   color: var(--mute);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: -0.02em;
   margin-bottom: 0.5rem;
 }
 
@@ -140,10 +140,28 @@
   overflow: hidden;
 }
 
+.location-filter-bar {
+  /* Inherit from .search-bar in common.css */
+}
+
+.filter-group label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .location-main-content {
   flex: 1;
   display: grid;
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
   background: var(--canvas);
   gap: 0;
   padding: 0;
@@ -249,7 +267,7 @@
   font-size: var(--fs-md);
   font-weight: 600;
   color: var(--primary);
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
   line-height: 1; /* Reset line-height to prevent baseline shifts */
 }
 
@@ -290,7 +308,7 @@
   padding-bottom: 8px;
   margin-bottom: 1rem;
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: -0.02em;
 }
 
 .detail-grid-2col {
@@ -353,7 +371,7 @@
   font-weight: 600;
   color: var(--mute);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }
 
 .dashboard-card .stat-value {
@@ -484,3 +502,4 @@
     border-bottom: 1px solid var(--hairline);
   }
 }
+}

src/styles/modal.css

@@ -162,7 +162,7 @@
   display: flex;
   align-items: center;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }
 
 .form-section-title:first-child {

src/styles/table.css

@@ -17,7 +17,7 @@
   align-items: center;
   margin: 0;
   line-height: 1.1;
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
 }
 
 .page-description {
@@ -31,14 +31,17 @@
 .table-container {
   flex: 1;
   background-color: var(--canvas);
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: auto;
   position: relative;
+  max-width: 100%;
 }
 
 table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
+  table-layout: auto;
 }
 
 th, td {
@@ -56,11 +59,11 @@ thead {
 
 th {
   background-color: var(--canvas-soft) !important;
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
   font-weight: 600;
   color: var(--mute);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
   box-shadow: inset 0 -1px 0 var(--hairline);
   text-align: center; /* Set default header alignment to center */
 }
@@ -124,13 +127,13 @@ th.sortable.desc::after { content: '▼'; opacity: 1; color: var(--primary); }
 
 .compact-table th {
   padding: 0.75rem 0.5rem;
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
   font-weight: 600;
   color: var(--mute);
   border-bottom: 1px solid var(--hairline);
   background: var(--canvas-soft);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }
 
 .compact-table td {