From 1c9326ffb4c3f7ffd85b3c5d7cc86b2a032717d8 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sat, 21 Mar 2026 20:30:49 +0000
Subject: [PATCH] =?UTF-8?q?Minimal=20Moleskine=20polish=20=E2=80=94=20ligh?=
 =?UTF-8?q?ter=20cover,=20subtle=20elastic=20band,=20softer=20paper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cover: #F5EFE6 (very light cream) instead of dark accent
- Remove label band, center title in middle of cover
- Elastic band: 18% opacity, seamless with cover
- Genre/author text: use CSS vars instead of white
- Ruled paper: lighter lines, softer margin, reduced box-shadow

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/globals.css          |  8 ++++----
 src/components/StoryCard.tsx | 31 ++++++++++++-------------------
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 2dad150c..6c461865 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,9 +11,9 @@
   --accent-dim: #6B3410;
   --border: #D4C5B0;
   --error: #CC3333;
-  --paper-line: hsl(234, 62%, 86%);
-  --paper-margin: hsl(350, 100%, 91%);
-  --paper-bg: hsl(0, 15%, 95%);
+  --paper-line: hsl(234, 30%, 92%);
+  --paper-margin: hsl(350, 40%, 94%);
+  --paper-bg: hsl(30, 20%, 96%);
 }
 
 @theme inline {
@@ -72,7 +72,7 @@ h1, h2, h3, h4, h5, h6 {
       var(--paper-line) 1.6em,
       transparent 1.6em
     );
-  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.12);
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.05);
   border-radius: 4px;
 }
 
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index cc03c9f2..f3eece31 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -58,54 +58,47 @@ export function StoryCard({
           className="notebook-cover relative z-10 flex aspect-[2/3] flex-col overflow-hidden border border-[var(--border)]"
           style={{
             borderRadius: "5px 15px 15px 5px",
-            backgroundColor: "var(--accent)",
-            boxShadow: "2px 4px 12px rgba(44, 24, 16, 0.15)",
+            backgroundColor: "#F5EFE6",
+            boxShadow: "2px 4px 12px rgba(44, 24, 16, 0.1)",
           }}
         >
-          {/* Elastic band */}
+          {/* Elastic band — seamless, subtle */}
           <div
             className="pointer-events-none absolute inset-y-[-1px] right-[22px] z-20 w-[8px] rounded-[2px]"
             style={{
-              background:
-                "repeating-linear-gradient(to bottom, var(--accent-dim) 0px, var(--accent-dim) 2px, #5A2A0E 2px, #5A2A0E 4px)",
-              boxShadow: "1px 0 2px rgba(0,0,0,0.15), -1px 0 2px rgba(0,0,0,0.1)",
+              background: "rgba(139, 69, 19, 0.18)",
+              boxShadow: "1px 0 2px rgba(0,0,0,0.05), -1px 0 2px rgba(0,0,0,0.03)",
             }}
           />
 
           {/* Top area: genre badge */}
           <div className="relative z-10 px-4 pt-4">
             <div className="flex items-start justify-between gap-2">
-              <span className="rounded-sm bg-white/20 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-widest text-white/80">
+              <span className="rounded-sm bg-[var(--accent)]/10 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-widest text-[var(--accent)]">
                 {displayGenre || "Uncategorized"}
               </span>
               {storyline.sunset && (
-                <span className="rounded-sm border border-white/20 px-1.5 py-0.5 text-[9px] text-white/60">
+                <span className="rounded-sm border border-[var(--border)] px-1.5 py-0.5 text-[9px] text-[var(--text-muted)]">
                   complete
                 </span>
               )}
             </div>
           </div>
 
-          {/* Label band with title */}
-          <div
-            className="relative z-10 mx-0 mt-auto px-4 py-3"
-            style={{
-              backgroundColor: "#e8e8e0",
-              boxShadow: "0 1px 2px rgba(0,0,0,0.15)",
-            }}
-          >
-            <h3 className="font-heading text-center text-sm font-bold leading-tight tracking-tight text-[#2C1810] sm:text-base">
+          {/* Center: title */}
+          <div className="relative z-10 flex flex-1 flex-col items-center justify-center px-5 text-center">
+            <h3 className="font-heading text-sm font-bold leading-tight tracking-tight text-[var(--accent)] sm:text-base">
               {storyline.title}
             </h3>
             {storyline.language && storyline.language !== "English" && (
-              <span className="mt-1 block text-center text-[10px] text-[var(--text-muted)]">
+              <span className="mt-2 text-[10px] text-[var(--text-muted)]">
                 {storyline.language}
               </span>
             )}
           </div>
 
           {/* Bottom: author */}
-          <div className="relative z-10 flex items-center justify-center gap-1 px-4 py-3 text-xs text-white/70">
+          <div className="relative z-10 flex items-center justify-center gap-1 px-4 py-3 text-xs text-[var(--text-muted)]">
             <WriterIdentityClient address={storyline.writer_address} linkProfile={false} />
             {storyline.writer_type === 1 && <AgentBadge />}
           </div>