From 037810be1febcb4169fd322ee0b4c9256fa0b5b8 Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 29 Jun 2026 17:22:34 +0900
Subject: [PATCH] =?UTF-8?q?[style]=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
 =?UTF-8?q?=EC=8A=A4=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
- 주된 영역: index.html 외 1개
- 변경 의도: index.html 외 1개의 시각 표현, 레이아웃, 접근성을 더 읽기 좋게 다듬습니다.

Co-authored-by: Codex
---
 index.html |  8 ++++----
 styles.css | 29 ++++++++++++++++++++++++++---
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 14d9d7b..b6e28fb 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@ <h1>스크롤만으로 장면을 여는 CSS 항해</h1>
 
       <section id="signal" class="chapter scene scene-a">
         <div class="scene-card">
-          <span>01</span>
+          <span aria-label="총 4개 장면 중 1번째 장면">01 / 04</span>
           <h2>신호 수집</h2>
           <p>view timeline이 지원되는 브라우저에서는 카드가 viewport 진입률에 맞춰 또렷해집니다.</p>
         </div>
@@ -44,7 +44,7 @@ <h2>신호 수집</h2>
 
       <section id="drift" class="chapter scene scene-b">
         <div class="scene-card">
-          <span>02</span>
+          <span aria-label="총 4개 장면 중 2번째 장면">02 / 04</span>
           <h2>궤도 이동</h2>
           <p>sticky 배치와 scroll snap이 JavaScript 없는 화면 전환 리듬을 만듭니다.</p>
         </div>
@@ -52,7 +52,7 @@ <h2>궤도 이동</h2>
 
       <section id="arrival" class="chapter scene scene-c">
         <div class="scene-card">
-          <span>03</span>
+          <span aria-label="총 4개 장면 중 3번째 장면">03 / 04</span>
           <h2>도착</h2>
           <p>중앙 maintainer bot이 다음 장면, 접근성, fallback 개선을 작은 PR로 제안합니다.</p>
         </div>
@@ -60,7 +60,7 @@ <h2>도착</h2>
 
       <section id="fallback" class="chapter scene scene-d">
         <div class="scene-card">
-          <span>04</span>
+          <span aria-label="총 4개 장면 중 4번째 장면">04 / 04</span>
           <h2>읽기 유지</h2>
           <p>
             scroll-driven animation이 꺼져도 장면 순서와 문장이 그대로 남아 여정을 끝까지 읽을 수
diff --git a/styles.css b/styles.css
index bdca214..9edb1c3 100644
--- a/styles.css
+++ b/styles.css
@@ -77,7 +77,9 @@
 
   .chapter {
     min-height: 100vh;
+    min-block-size: 100svh;
     scroll-snap-align: start;
+    scroll-snap-stop: always;
     position: relative;
     display: grid;
     place-items: center;
@@ -163,6 +165,7 @@
   .scene-a {
     --scene-accent: 0 127 140;
     --scene-glow-position: 28% 24%;
+    --scene-progress: 25%;
   }
 
   .scene::before {
@@ -179,6 +182,7 @@
     --scene-glow-position: 72% 22%;
     --scene-sweep-stop: 52%;
     --scene-bg: #fbfaff;
+    --scene-progress: 50%;
   }
 
   .scene-c {
@@ -188,6 +192,7 @@
     --scene-sweep-alpha: 8%;
     --scene-sweep-stop: 50%;
     --scene-bg: #fffdf7;
+    --scene-progress: 75%;
   }
 
   .scene-d {
@@ -197,6 +202,7 @@
     --scene-sweep-alpha: 8%;
     --scene-sweep-stop: 54%;
     --scene-bg: #f8fff9;
+    --scene-progress: 100%;
   }
 
   .scene-card {
@@ -214,12 +220,29 @@
     backdrop-filter: blur(16px);
   }
 
-  .scene-card::before {
+  .scene-card::before,
+  .scene-card::after {
     content: '';
     position: absolute;
-    inset: 0 0 auto;
+    top: 0;
+    left: 0;
     height: 6px;
-    background: linear-gradient(90deg, rgb(var(--scene-accent) / 86%), transparent 72%);
+    pointer-events: none;
+  }
+
+  .scene-card::before {
+    right: 0;
+    background: rgb(var(--scene-accent) / 13%);
+  }
+
+  .scene-card::after {
+    width: var(--scene-progress);
+    background: linear-gradient(
+      90deg,
+      rgb(var(--scene-accent) / 92%),
+      rgb(var(--scene-accent) / 54%)
+    );
+    box-shadow: 0 10px 28px rgb(var(--scene-accent) / 18%);
   }
 
   .scene-card span {