From e0499d32314e40fb9213855c719a4dd976253949 Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 3 Aug 2026 15:32:26 +0900
Subject: [PATCH] =?UTF-8?q?[style]=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A0=95=EB=8F=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 변경 유형: style
- 주된 영역: src/
- 변경 의도: src/의 시각 표현, 레이아웃, 접근성을 더 읽기 좋게 다듬습니다.

Co-authored-by: Codex
---
 src/App.tsx   |  9 ++++++++-
 src/index.css | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 07350ea..230f098 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -161,7 +161,11 @@ export default function App() {
                 const share = getActivityShare(bucket, allActivityCount)
 
                 return (
-                  <li key={bucket.kind} className={bucket.kind === selectedKind ? 'selected' : ''}>
+                  <li
+                    key={bucket.kind}
+                    className={bucket.kind === selectedKind ? 'selected' : ''}
+                    data-visible={isVisible}
+                  >
                     <label className="bucket-toggle">
                       <input
                         type="checkbox"
@@ -175,6 +179,9 @@ export default function App() {
                         <small>{share}%</small>
                       </span>
                       <span className="bucket-count">{bucket.count}</span>
+                      <span className="bucket-share-meter" aria-hidden="true">
+                        <span style={{ width: `${share}%`, backgroundColor: bucket.color }} />
+                      </span>
                     </label>
                     <button
                       className="inspect-button"
diff --git a/src/index.css b/src/index.css
index 4205b65..efe7c83 100644
--- a/src/index.css
+++ b/src/index.css
@@ -284,13 +284,15 @@ input:focus-visible {
   min-width: 0;
   display: grid;
   grid-template-columns: 16px 9px minmax(0, 1fr) auto;
-  gap: 10px;
+  column-gap: 10px;
+  row-gap: 5px;
   align-items: center;
   padding: 8px 4px 8px 12px;
   cursor: pointer;
 }
 
 .bucket-toggle input {
+  grid-row: 1 / 3;
   width: 16px;
   height: 16px;
   margin: 0;
@@ -302,6 +304,7 @@ input:focus-visible {
 }
 
 .bucket-swatch {
+  grid-row: 1 / 3;
   width: 9px;
   height: 9px;
   border-radius: 50%;
@@ -334,6 +337,33 @@ input:focus-visible {
   font-variant-numeric: tabular-nums;
 }
 
+.bucket-share-meter {
+  grid-row: 2;
+  grid-column: 3 / 5;
+  height: 3px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--color-text) 8%, transparent);
+}
+
+.bucket-share-meter span {
+  display: block;
+  height: 100%;
+  min-width: 3px;
+  border-radius: inherit;
+  transition: opacity var(--motion-standard);
+}
+
+.bucket-list li[data-visible='false'] .bucket-swatch,
+.bucket-list li[data-visible='false'] .bucket-share-meter span {
+  opacity: 0.24;
+}
+
+.bucket-list li[data-visible='false'] .bucket-name,
+.bucket-list li[data-visible='false'] .bucket-count {
+  color: var(--color-subtle);
+}
+
 .inspect-button,
 .stage-actions button {
   display: inline-grid;