260707_1_대시보드정리 1차

B01_Dashboard/B01_Dashboard_UI_Style.css

@@ -105,30 +105,57 @@
 
 .b01-dashboard__metric-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--spacing-16);
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--spacing-8);
 }
 
 .b01-dashboard__metric {
-  padding: var(--spacing-16);
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  padding: var(--spacing-8) var(--spacing-16);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-cards);
   background: var(--color-surface);
 }
 
 .b01-dashboard__metric-label {
-  display: block;
   color: var(--color-text-secondary);
   font-size: var(--text-caption);
+  white-space: nowrap;
 }
 
 .b01-dashboard__metric-value {
-  display: block;
-  margin-top: var(--spacing-8);
   color: var(--color-text);
-  font-size: var(--text-subheading);
+  font-size: var(--text-body);
   font-family: var(--font-display);
   line-height: 1;
+  white-space: nowrap;
+}
+
+@media (max-width: 900px) {
+  .b01-dashboard__metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.b01-dashboard__resource-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+}
+
+.b01-dashboard__chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.b01-dashboard__chart-caption {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--text-caption);
 }
 
 .b01-dashboard__form-grid {
@@ -174,8 +201,7 @@
     margin-top: var(--spacing-24);
   }
 
-  .b01-dashboard__form-grid,
-  .b01-dashboard__metric-grid {
+  .b01-dashboard__form-grid {
     grid-template-columns: 1fr;
   }
 }