From eb6e12f4a645e69ca673b3bb825df1651bbf37c3 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:53:23 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=B0=8F=20=EC=9D=B8=ED=84=B0=EB=9E=99=ED=8B=B0?=
 =?UTF-8?q?=EB=B8=8C=20=EC=9A=94=EC=86=8C=EC=97=90=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1(active=20=EC=83=81=ED=83=9C)=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .Jules/palette.md |  4 ++++
 styles.css        | 12 ++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8a7cf4c..4932cf1 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -21,3 +21,7 @@
 ## 2024-07-15 - Expand clickable area of project cards
 **Learning:** Using an anchor tag to wrap an entire card (block-level element) can result in verbose and confusing screen reader output. However, restricting the clickable area to just the title makes the UI harder to interact with (violating Fitts's Law).
 **Action:** Apply `position: relative` to the card container and use a `::after` pseudo-element with `position: absolute; inset: 0;` on the title's anchor tag. This expands the clickable area to the whole card while keeping semantic and accessible HTML structure.
+
+## 2026-08-07 - Add active state feedback to interactive elements
+**Learning:** Users often lack immediate visual confirmation when clicking buttons or controls if there is only a hover state but no active state. This can make the interface feel unresponsive or lead to double-clicks.
+**Action:** Always include an `:active` state (e.g., `transform: scale(0.98)`) for key interactive elements like buttons and toggles to provide immediate, satisfying tactile feedback.
diff --git a/styles.css b/styles.css
index e3de699..a3af03f 100644
--- a/styles.css
+++ b/styles.css
@@ -108,13 +108,17 @@ a {
   font-size: 13px;
   font-weight: 850;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
 }
 
 .language-switch button:not([aria-pressed="true"]):hover {
   opacity: 0.8;
 }
 
+.language-switch button:active {
+  transform: scale(0.95);
+}
+
 .language-switch button[aria-pressed="true"] {
   background: var(--ink);
   color: var(--white);
@@ -218,13 +222,17 @@ h1 {
   text-decoration: none;
   font-size: 15px;
   font-weight: 800;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
 }
 
 .button:hover {
   opacity: 0.8;
 }
 
+.button:active {
+  transform: scale(0.98);
+}
+
 .button.primary {
   background: var(--ink);
   color: var(--white);

From f0ffcfaebcd6a1a72a76fbaac16f92d72b3ae502 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 7 Aug 2026 14:24:51 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=B0=8F=20=EC=9D=B8=ED=84=B0=EB=9E=99=ED=8B=B0?=
 =?UTF-8?q?=EB=B8=8C=20=EC=9A=94=EC=86=8C=EC=97=90=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1(active=20=EC=83=81=ED=83=9C)=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit