From 84bbe844803effe17683106e3205342d58f58de5 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sat, 21 Mar 2026 20:36:55 +0000
Subject: [PATCH] Fix ruled paper: light beige bg, lighter lines, fix mobile
 line alignment

- Paper bg: #F5F0E8 (light beige, blends with page)
- Lines: lighter (hsl 25% sat, 93% light), 1px thickness
- Margin line: subtler (hsl 35% sat, 93% light), 2px wide
- Line alignment: use fixed 26px line-height with matching
  background-position-y offset so text sits on lines
- Works consistently on both desktop and mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/globals.css | 47 +++++++++++++++++++--------------------------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index f3a655c7..456ba69a 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, 40%, 90%);
-  --paper-margin: hsl(350, 60%, 92%);
-  --paper-bg: #FFFCF7;
+  --paper-line: hsl(234, 25%, 93%);
+  --paper-margin: hsl(350, 35%, 93%);
+  --paper-bg: #F5F0E8;
 }
 
 @theme inline {
@@ -48,56 +48,49 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Ruled notebook paper */
 .ruled-paper {
+  --line-height: 26px;
   background: var(--paper-bg);
-  padding: 3.5rem 2rem 1rem 4.5rem;
+  padding: calc(var(--line-height) * 2) 2rem var(--line-height) 4.5rem;
   font-size: 1rem;
-  line-height: 1.6;
+  line-height: var(--line-height);
   color: var(--text);
   background-image:
     linear-gradient(
       90deg,
       transparent, transparent 3.5rem,
       var(--paper-margin) 3.5rem,
-      var(--paper-margin) 3.75rem,
-      transparent 3.75rem
-    ),
-    linear-gradient(
-      var(--paper-bg), var(--paper-bg) 2.5rem,
-      transparent 2.5rem
+      var(--paper-margin) calc(3.5rem + 2px),
+      transparent calc(3.5rem + 2px)
     ),
     repeating-linear-gradient(
       transparent,
-      transparent calc(1.6em - 2px),
-      var(--paper-line) calc(1.6em - 2px),
-      var(--paper-line) 1.6em,
-      transparent 1.6em
+      transparent calc(var(--line-height) - 1px),
+      var(--paper-line) calc(var(--line-height) - 1px),
+      var(--paper-line) var(--line-height)
     );
-  box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.08);
+  background-position-y: calc(var(--line-height) * 2);
+  box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.06);
   border-radius: 4px;
 }
 
 @media (max-width: 640px) {
   .ruled-paper {
-    padding: 2.5rem 1rem 1rem 2.5rem;
+    padding: calc(var(--line-height) * 2) 1rem var(--line-height) 2.5rem;
     background-image:
       linear-gradient(
         90deg,
         transparent, transparent 1.75rem,
         var(--paper-margin) 1.75rem,
-        var(--paper-margin) 2rem,
-        transparent 2rem
-      ),
-      linear-gradient(
-        var(--paper-bg), var(--paper-bg) 1.5rem,
-        transparent 1.5rem
+        var(--paper-margin) calc(1.75rem + 2px),
+        transparent calc(1.75rem + 2px)
       ),
       repeating-linear-gradient(
         transparent,
-        transparent calc(1.6em - 2px),
-        var(--paper-line) calc(1.6em - 2px),
-        var(--paper-line) 1.6em,
-        transparent 1.6em
+        transparent calc(var(--line-height) - 1px),
+        var(--paper-line) calc(var(--line-height) - 1px),
+        var(--paper-line) var(--line-height)
       );
+    background-position-y: calc(var(--line-height) * 2);
   }
 }