From 2f5e79e30078b0668906f754bf17fda3c6a112b3 Mon Sep 17 00:00:00 2001
From: copecone <controld3785@gmail.com>
Date: Mon, 4 May 2026 13:44:41 +0900
Subject: [PATCH] Fix Level Card Buttons Selection Outline

---
 src/app/components/level-card/level-card.scss | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/components/level-card/level-card.scss b/src/app/components/level-card/level-card.scss
index 7d009a1..5f12d22 100644
--- a/src/app/components/level-card/level-card.scss
+++ b/src/app/components/level-card/level-card.scss
@@ -19,7 +19,7 @@ $default_animation_duration: 0.2s;
 
   border-radius: 8px;
   outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 2px solid;
-  overflow: hidden;
+  // overflow: hidden;
 
   &:focus-visible {
     outline-offset: 0;
@@ -35,7 +35,9 @@ $default_animation_duration: 0.2s;
     z-index: 1;
     background-color: light-dark(white, black);
 
-    outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 1px solid;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    // outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 1px solid;
 
     .soundtrack {
       display: flex;
@@ -113,6 +115,7 @@ $default_animation_duration: 0.2s;
       flex-direction: row;
       justify-content: flex-end;
       align-items: center;
+      z-index: 10;
 
       width: 100%;
       height: 50%;
@@ -130,8 +133,13 @@ $default_animation_duration: 0.2s;
         --hover-state: 1;
       }
 
+      &:not(:focus-visible) {
+        box-shadow: -1px 0 0 0 light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%));
+      }
+
       &:focus-visible {
-        outline-offset: -2px;
+        z-index: 11;
+        outline-offset: 0;
       }
 
       div.button-icon {