설계툴 검토

ui_template/ui_template_theme.css

@@ -170,6 +170,12 @@
   --card-padding: 24px;
   --element-gap: 8px;
 
+  /* Scrollbar */
+  --color-scrollbar-track: color-mix(in srgb, var(--color-text) 9%, transparent);
+  --color-scrollbar-thumb: color-mix(in srgb, var(--color-text) 38%, transparent);
+  --color-scrollbar-thumb-hover: color-mix(in srgb, var(--color-text) 56%, transparent);
+  --color-scrollbar-thumb-active: color-mix(in srgb, var(--color-text) 72%, transparent);
+
   /* 워크플로우 3단 레이아웃 (frontend.md §2) */
   --wf-header-height: 56px; /* 상단: 타이틀 + 진행 단계 */
   --wf-left-panel-width: 320px; /* 좌측: 입력 폼 (너비 고정) */
@@ -271,6 +277,44 @@
   box-sizing: border-box;
 }
 
+/* Keep the platform scrollbar footprint while giving every scroll container a
+ * consistent translucent treatment. Width/height are intentionally untouched. */
+* {
+  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
+  scrollbar-width: auto;
+}
+
+@supports selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-color: auto;
+  }
+
+  *::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-track);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: var(--radius-pills);
+    background-color: var(--color-scrollbar-thumb);
+    background-clip: padding-box;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+  }
+
+  *::-webkit-scrollbar-thumb:active {
+    background-color: var(--color-scrollbar-thumb-active);
+  }
+}
+
+@media (forced-colors: active) {
+  * {
+    scrollbar-color: auto;
+  }
+}
+
 html,
 body {
   margin: 0;