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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user