From 363bb7e18eee7f692cefd3b29e0ab88ccdb51786 Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 3 Aug 2026 12:36:08 +0900
Subject: [PATCH] =?UTF-8?q?[style]=20=ED=99=94=EB=A9=B4=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=A0=95=EB=8F=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-authored-by: Codex
---
 styles.css | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/styles.css b/styles.css
index ae80143..a827194 100644
--- a/styles.css
+++ b/styles.css
@@ -568,14 +568,78 @@
   }
 
   details {
+    overflow: clip;
     border: 1px solid var(--color-border);
     border-radius: var(--radius-frame);
     padding: 14px 16px;
+    background-color: var(--color-surface);
+    transition:
+      border-color var(--motion-standard),
+      background-color var(--motion-standard),
+      box-shadow var(--motion-standard);
+  }
+
+  details:hover {
+    border-color: var(--color-border-strong);
+  }
+
+  details[open] {
+    border-color: color-mix(in srgb, var(--color-focus) 32%, var(--color-border));
+    background-color: color-mix(in srgb, var(--color-surface-selected) 42%, var(--color-surface));
+    box-shadow: inset 3px 0 0 var(--color-focus);
   }
 
   summary {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 24px;
+    align-items: center;
+    gap: 12px;
+    min-height: 24px;
     cursor: pointer;
     font-weight: 800;
+    list-style: none;
+  }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  summary::after {
+    width: 22px;
+    height: 22px;
+    border: 1px solid var(--color-border-strong);
+    border-radius: 50%;
+    background:
+      linear-gradient(currentcolor 0 0) center / 8px 2px no-repeat,
+      linear-gradient(currentcolor 0 0) center / 2px 8px no-repeat,
+      var(--color-surface-muted);
+    color: var(--color-muted);
+    content: '';
+    transition:
+      color var(--motion-standard),
+      background var(--motion-standard),
+      transform var(--motion-standard);
+  }
+
+  summary:hover::after {
+    color: var(--color-focus);
+  }
+
+  details[open] summary::after {
+    border-color: var(--color-focus);
+    background:
+      linear-gradient(currentcolor 0 0) center / 8px 2px no-repeat,
+      var(--color-focus);
+    color: var(--color-primary-ink);
+    transform: rotate(180deg);
+  }
+
+  details > p {
+    margin-bottom: 0;
+    border-top: 1px solid var(--color-border);
+    padding-top: 14px;
+    color: var(--color-muted);
+    line-height: 1.6;
   }
 
   dialog {