feat(ui): /digest 웜 클레이 → 세이지 재톤 (앱 톤 통일)

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hyungi
2026-06-07 19:41:21 +09:00
parent 73d7683eda
commit 058183d3ff
+62 -62
View File
@@ -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,