From 058183d3ff28b78817cdbfe96e8f0db44423fd2b Mon Sep 17 00:00:00 2001
From: hyungi <hyun49196@gmail.com>
Date: Sun, 7 Jun 2026 19:41:21 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20/digest=20=EC=9B=9C=20=ED=81=B4?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=20=E2=86=92=20=EC=84=B8=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9E=AC=ED=86=A4=20(=EC=95=B1=20=ED=86=A4=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

편집형 digest 가 자체 웜 클레이 팔레트라 세이지 앱 속 '웜 섬'이었던 것을
세이지로 통일. 스코프 <style> 의 warm hex 14종 + clay rgba 틴트 2종을
세이지 등가로 치환(구조·기능 무변, 색만). 토큰 청결.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/routes/digest/+page.svelte | 124 ++++++++++++------------
 1 file changed, 62 insertions(+), 62 deletions(-)

diff --git a/frontend/src/routes/digest/+page.svelte b/frontend/src/routes/digest/+page.svelte
index c150f91..bf282af 100644
--- a/frontend/src/routes/digest/+page.svelte
+++ b/frontend/src/routes/digest/+page.svelte
@@ -410,20 +410,20 @@
 </div><!-- /.digest-page -->
 
 <style>
-  /* ── 웜 팔레트 로컬 재정의 ──
+  /* ── 세이지 팔레트 로컬 재정의 ──
      앱 :root 다크 토큰(--surface:#1a1d27, --accent:파랑 등)이 하위 var() 로 새지 않도록
-     이 subtree 에서 웜값으로 덮어쓴다. 하위 모든 var(--surface/--card/--line/--brand …)는
+     이 subtree 에서 세이지값으로 덮어쓴다. 하위 모든 var(--surface/--card/--line/--brand …)는
      여기서 해석된다. 검정(#000/#1f2024) 미사용. */
   .digest-page {
-    --brand: #d97757;
-    --brand-d: #c2603f;
-    --surface: #f0eee6;
+    --brand: #4f8a6b;
+    --brand-d: #3d7256;
+    --surface: #ecf0e8;
     --card: #fff;
-    --ink: #2e2420;
-    --muted: #6b6f76;
-    --line: #e3e0d6;
+    --ink: #23291f;
+    --muted: #697061;
+    --line: #dde3d6;
     font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
-    color: #3a322a;
+    color: #333a2d;
   }
 
   /* ── App shell ── */
@@ -437,14 +437,14 @@
 
   /* ── Masthead ── */
   header.bar {
-    background: #faf7f1;
+    background: #f4f7f1;
     border-bottom: 3px solid var(--brand);
     padding: 0 32px;
     display: flex;
     align-items: center;
     gap: 0;
     min-height: 56px;
-    box-shadow: 0 1px 0 #e3e0d6;
+    box-shadow: 0 1px 0 #dde3d6;
   }
   header.bar .mark {
     display: flex;
@@ -467,7 +467,7 @@
   header.bar h1 {
     font-size: 15px;
     font-weight: 700;
-    color: #3a322a;
+    color: #333a2d;
     margin: 0;
     letter-spacing: -0.01em;
     white-space: nowrap;
@@ -493,11 +493,11 @@
   header.bar .stat-val {
     font-size: 13px;
     font-weight: 700;
-    color: #3a322a;
+    color: #333a2d;
   }
   header.bar .stat-lbl {
     font-size: 10px;
-    color: #9a8e84;
+    color: #9aa090;
     letter-spacing: 0.04em;
   }
 
@@ -508,20 +508,20 @@
     gap: 4px;
   }
   .date-btn {
-    background: #f0eee6;
-    border: 1px solid #d8d3c8;
+    background: #ecf0e8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     width: 26px;
     height: 28px;
     font-size: 14px;
     font-weight: 700;
-    color: #5a4f46;
+    color: #4a5142;
     cursor: pointer;
     line-height: 1;
     transition: background 0.15s, color 0.15s;
   }
   .date-btn:hover:not(:disabled) {
-    background: #e7e2d6;
+    background: #e3ebdf;
     color: var(--brand-d);
   }
   .date-btn:disabled {
@@ -529,13 +529,13 @@
     cursor: not-allowed;
   }
   .date-select {
-    background: #f0eee6;
-    border: 1px solid #d8d3c8;
+    background: #ecf0e8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     padding: 4px 8px;
     font-size: 12px;
     font-weight: 600;
-    color: #5a4f46;
+    color: #4a5142;
     letter-spacing: 0.02em;
     max-width: 220px;
     cursor: pointer;
@@ -561,7 +561,7 @@
     padding: 10px 14px;
     font-size: 12px;
     font-weight: 600;
-    color: #7a6e64;
+    color: #697061;
     cursor: pointer;
     border: none;
     background: none;
@@ -571,8 +571,8 @@
     font-family: inherit;
   }
   .country-nav .nav-item:hover {
-    color: #3a322a;
-    border-bottom-color: #d8d3c8;
+    color: #333a2d;
+    border-bottom-color: #cfd7c6;
   }
   .country-nav .nav-item.active {
     color: var(--brand);
@@ -586,16 +586,16 @@
     border-radius: 2px;
     letter-spacing: 0.05em;
     background: var(--surface);
-    color: #7a6e64;
+    color: #697061;
   }
   .country-nav .nav-item.active .cc-chip {
-    background: rgba(217, 119, 87, 0.15);
+    background: rgba(79, 138, 107, 0.15);
     color: var(--brand);
   }
   .country-nav .topic-count {
     font-size: 10px;
     font-weight: 400;
-    color: #9a8e84;
+    color: #9aa090;
   }
 
   /* ── Body ── */
@@ -626,7 +626,7 @@
   .edition-line .edition-date {
     font-size: 12px;
     font-weight: 600;
-    color: #7a6e64;
+    color: #697061;
     letter-spacing: 0.04em;
   }
   .edition-line .edition-sep {
@@ -636,13 +636,13 @@
   }
   .edition-line .edition-sub {
     font-size: 11px;
-    color: #9a8e84;
+    color: #9aa090;
   }
 
   /* ── Lead story block ── */
   .lead-block {
     background: var(--card);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     border-top: 4px solid var(--brand);
     border-radius: 4px;
     padding: 28px 32px 24px;
@@ -657,7 +657,7 @@
     right: 0;
     width: 200px;
     height: 100%;
-    background: linear-gradient(to left, rgba(217, 119, 87, 0.05), transparent);
+    background: linear-gradient(to left, rgba(79, 138, 107, 0.05), transparent);
     pointer-events: none;
   }
   .lead-meta {
@@ -683,9 +683,9 @@
     gap: 5px;
     font-size: 11px;
     font-weight: 600;
-    color: #3a322a;
+    color: #333a2d;
     background: var(--surface);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     padding: 3px 8px;
     border-radius: 3px;
   }
@@ -700,27 +700,27 @@
   }
   .lead-meta .cnt-badge {
     font-size: 11px;
-    color: #7a6e64;
+    color: #697061;
     display: flex;
     align-items: center;
     gap: 4px;
   }
   .lead-meta .cnt-badge strong {
-    color: #3a322a;
+    color: #333a2d;
     font-weight: 700;
   }
   .lead-headline {
     font-size: 28px;
     font-weight: 800;
     line-height: 1.25;
-    color: #2e2420;
+    color: #23291f;
     letter-spacing: -0.02em;
     margin: 0 0 14px;
   }
   .lead-summary {
     font-size: 14px;
     line-height: 1.75;
-    color: #5a4f46;
+    color: #4a5142;
     margin: 0 0 20px;
     max-width: 680px;
   }
@@ -747,7 +747,7 @@
   .lead-articles a {
     font-size: 13px;
     font-weight: 600;
-    color: #3a322a;
+    color: #333a2d;
     text-decoration: none;
     line-height: 1.45;
   }
@@ -766,7 +766,7 @@
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    color: #9a8e84;
+    color: #9aa090;
     white-space: nowrap;
   }
   .lead-imp-bar .bar-track {
@@ -800,7 +800,7 @@
     font-weight: 800;
     letter-spacing: 0.12em;
     text-transform: uppercase;
-    color: #9a8e84;
+    color: #9aa090;
     white-space: nowrap;
   }
   .section-head .sh-line {
@@ -820,7 +820,7 @@
   /* ── Story card ── */
   .story-card {
     background: var(--card);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     padding: 18px 20px 16px;
     display: flex;
@@ -829,7 +829,7 @@
     transition: box-shadow 0.15s;
   }
   .story-card:hover {
-    box-shadow: 0 2px 12px rgba(90, 70, 55, 0.09);
+    box-shadow: 0 2px 12px rgba(74, 81, 66, 0.09);
   }
   .story-card.featured {
     border-top: 3px solid var(--brand-d);
@@ -846,9 +846,9 @@
     gap: 5px;
     font-size: 10px;
     font-weight: 600;
-    color: #3a322a;
+    color: #333a2d;
     background: var(--surface);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     padding: 2px 7px;
     border-radius: 3px;
   }
@@ -863,21 +863,21 @@
   }
   .card-meta .cnt-tag {
     font-size: 10px;
-    color: #9a8e84;
+    color: #9aa090;
     margin-left: auto;
   }
   .card-title {
     font-size: 15px;
     font-weight: 700;
     line-height: 1.35;
-    color: #2e2420;
+    color: #23291f;
     letter-spacing: -0.01em;
     margin: 0;
   }
   .card-summary {
     font-size: 12px;
     line-height: 1.65;
-    color: #5a4f46;
+    color: #4a5142;
     margin: 0;
     flex: 1;
   }
@@ -891,7 +891,7 @@
   .card-articles a {
     font-size: 11px;
     font-weight: 600;
-    color: #3a322a;
+    color: #333a2d;
     text-decoration: none;
     line-height: 1.4;
     display: flex;
@@ -904,7 +904,7 @@
     width: 3px;
     height: 3px;
     border-radius: 50%;
-    background: #b8a898;
+    background: #9aa090;
     flex-shrink: 0;
     margin-top: 5px;
   }
@@ -923,7 +923,7 @@
   .card-imp .imp-val {
     font-size: 10px;
     font-weight: 600;
-    color: #9a8e84;
+    color: #9aa090;
   }
 
   /* ── Sidebar stack ── */
@@ -934,7 +934,7 @@
   }
   .sidebar-card {
     background: var(--card);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     padding: 14px 16px;
     display: flex;
@@ -958,24 +958,24 @@
   .sidebar-card .cc-name {
     font-size: 10px;
     font-weight: 600;
-    color: #7a6e64;
+    color: #697061;
   }
   .sidebar-card .sc-cnt {
     font-size: 10px;
-    color: #9a8e84;
+    color: #9aa090;
     margin-left: auto;
   }
   .sidebar-card .s-title {
     font-size: 13px;
     font-weight: 700;
     line-height: 1.35;
-    color: #2e2420;
+    color: #23291f;
     margin: 0;
   }
   .sidebar-card .s-summary {
     font-size: 11px;
     line-height: 1.55;
-    color: #5a4f46;
+    color: #4a5142;
     margin: 0;
   }
   .sidebar-card .s-link {
@@ -995,7 +995,7 @@
   }
   .compact-card {
     background: var(--card);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     padding: 14px 16px;
     display: flex;
@@ -1019,24 +1019,24 @@
   .compact-card .c-ko {
     font-size: 10px;
     font-weight: 600;
-    color: #7a6e64;
+    color: #697061;
   }
   .compact-card .c-cnt {
     font-size: 10px;
-    color: #9a8e84;
+    color: #9aa090;
     margin-left: auto;
   }
   .compact-card .c-title {
     font-size: 13px;
     font-weight: 700;
     line-height: 1.35;
-    color: #2e2420;
+    color: #23291f;
     margin: 0;
   }
   .compact-card .c-summary {
     font-size: 11px;
     line-height: 1.55;
-    color: #5a4f46;
+    color: #4a5142;
     margin: 0;
     flex: 1;
   }
@@ -1056,11 +1056,11 @@
   .compact-card .c-imp-fill {
     height: 100%;
     border-radius: 1px;
-    background: rgba(217, 119, 87, 0.6);
+    background: rgba(79, 138, 107, 0.6);
   }
 
   /* ── Importance swatches ── */
-  .imp-high { background: rgba(217, 119, 87, 0.85); }
+  .imp-high { background: rgba(79, 138, 107, 0.85); }
 
   /* 극단적 긴 무공백 토큰(연속 CJK·URL) 가로 오버플로 방어 */
   .lead-headline, .lead-summary, .card-title, .card-summary,