hyungi
2d6d1b8e8a
본문 $$수식$$가 raw로 노출되던 문제: marked-katex 토크나이저가 개요 anchor splice/런타임 환경 영향으로 미발화 → marked 이전에 katex.renderToString 으로 직접 렌더 후 placeholder 복원(위치·인접 무관). TL;DR(ai_tldr)도 plain-text 보간이라 마크다운 미렌더 → renderDocMarkdown 경유로 교체(+summary-md 스타일). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
227 lines
8.4 KiB
CSS
227 lines
8.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Tailwind v4 theme tokens — 모든 color/radius/z/spacing은 여기서 노출 */
|
|
/* 이후 컴포넌트는 bg-surface, text-dim, border-default, bg-success/10, */
|
|
/* bg-domain-engineering, rounded-card, z-modal, w-rail 형태로 작성한다. */
|
|
/* 새 코드에서 bg-[var(--*)] 작성 금지 (lint:tokens 으로 차단). */
|
|
/* 2026-06-04 UI 개선: 다크블루 → 세이지 그린(라이트) 통일. 토큰 값만 교체. */
|
|
@theme {
|
|
--color-bg: #e7ebe4;
|
|
--color-surface: #f4f7f1;
|
|
--color-surface-hover: #ecf0e8;
|
|
--color-surface-active: #e3ebdf;
|
|
--color-sidebar: #f4f7f1;
|
|
--color-default: #dde3d6;
|
|
--color-border-strong: #cfd7c6;
|
|
--color-text: #23291f;
|
|
--color-dim: #697061;
|
|
--color-faint: #9aa090;
|
|
--color-accent: #4f8a6b;
|
|
--color-accent-hover: #3d7256;
|
|
--color-accent-ring: #4f8a6b55;
|
|
--color-error: #c0392b;
|
|
--color-success: #1f9d6b;
|
|
--color-warning: #b5840a;
|
|
--color-scrim: rgba(35, 41, 31, 0.45);
|
|
|
|
--color-domain-philosophy: #7a6a9b;
|
|
--color-domain-language: #b5567a;
|
|
--color-domain-engineering: #2f7d8f;
|
|
--color-domain-safety: #b5840a;
|
|
--color-domain-programming: #3d7256;
|
|
--color-domain-general: #7a8b3f;
|
|
--color-domain-reference: #8a6a3f;
|
|
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 10px;
|
|
--radius-card: 12px;
|
|
|
|
--z-dropdown: 30;
|
|
--z-drawer: 40;
|
|
--z-modal: 50;
|
|
--z-toast: 60;
|
|
|
|
--spacing-sidebar: 320px;
|
|
--spacing-rail: 320px;
|
|
}
|
|
|
|
/* Tailwind v4 는 --z-* 를 utility namespace 로 인식하지 않으므로
|
|
@utility 로 명시적으로 등록해야 z-drawer / z-dropdown / z-toast 가
|
|
실제 클래스로 생성된다. --z-modal 은 Modal.svelte 가 inline style 로
|
|
var() 참조해서 이미 보존되고 있지만, z-modal 클래스도 일관성 차원에서
|
|
함께 등록한다. var() 참조 덕분에 Tailwind v4 가 --z-* 변수도 tree-shaking
|
|
에서 제외하고 :root 에 emit 한다. */
|
|
@utility z-dropdown {
|
|
z-index: var(--z-dropdown);
|
|
}
|
|
@utility z-drawer {
|
|
z-index: var(--z-drawer);
|
|
}
|
|
@utility z-modal {
|
|
z-index: var(--z-modal);
|
|
}
|
|
@utility z-toast {
|
|
z-index: var(--z-toast);
|
|
}
|
|
|
|
/* 기존 :root 변수는 .markdown-body와의 호환을 위해 유지 (공존 layer). */
|
|
/* 2026-06-04: 세이지 라이트로 값 동기화. */
|
|
:root {
|
|
--bg: #e7ebe4;
|
|
--surface: #f4f7f1;
|
|
--border: #dde3d6;
|
|
--text: #23291f;
|
|
--text-dim: #697061;
|
|
--accent: #4f8a6b;
|
|
--accent-hover: #3d7256;
|
|
--error: #c0392b;
|
|
--success: #1f9d6b;
|
|
--warning: #b5840a;
|
|
|
|
/* domain 색상 (세이지 조화) */
|
|
--domain-philosophy: #7a6a9b;
|
|
--domain-language: #b5567a;
|
|
--domain-engineering: #2f7d8f;
|
|
--domain-safety: #b5840a;
|
|
--domain-programming: #3d7256;
|
|
--domain-general: #7a8b3f;
|
|
--domain-reference: #8a6a3f;
|
|
|
|
/* sidebar */
|
|
--sidebar-w: 320px;
|
|
--sidebar-bg: #f4f7f1;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 스크롤바 */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--bg); }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
|
|
/* Markdown 렌더링 (세이지 라이트 스타일) */
|
|
.markdown-body {
|
|
color: var(--text);
|
|
line-height: 1.7;
|
|
font-size: 14px;
|
|
}
|
|
.markdown-body h1 { font-size: 1.6em; font-weight: 700; margin: 1.5em 0 0.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
|
|
.markdown-body h2 { font-size: 1.3em; font-weight: 600; margin: 1.3em 0 0.4em; padding-bottom: 0.2em; border-bottom: 1px solid var(--border); }
|
|
.markdown-body h3 { font-size: 1.1em; font-weight: 600; margin: 1.2em 0 0.3em; }
|
|
.markdown-body h4 { font-size: 1em; font-weight: 600; margin: 1em 0 0.2em; }
|
|
.markdown-body p { margin: 0.6em 0; }
|
|
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: 0.5em 0; }
|
|
.markdown-body li { margin: 0.2em 0; }
|
|
.markdown-body li > ul, .markdown-body li > ol { margin: 0.1em 0; }
|
|
.markdown-body blockquote { border-left: 3px solid var(--accent); padding: 0.5em 1em; margin: 0.8em 0; color: var(--text-dim); background: var(--surface); border-radius: 0 4px 4px 0; }
|
|
.markdown-body code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; font-family: 'SF Mono', Menlo, monospace; }
|
|
.markdown-body pre { background: var(--surface); padding: 1em; border-radius: 6px; overflow-x: auto; margin: 0.8em 0; border: 1px solid var(--border); }
|
|
.markdown-body pre code { background: none; padding: 0; }
|
|
.markdown-body table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
|
|
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 0.5em 0.8em; text-align: left; font-size: 0.9em; }
|
|
.markdown-body th { background: var(--surface); font-weight: 600; }
|
|
.markdown-body tr:nth-child(even) { background: rgba(35,41,31,0.03); }
|
|
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
|
|
.markdown-body a { color: var(--accent); text-decoration: none; }
|
|
.markdown-body a:hover { text-decoration: underline; }
|
|
.markdown-body strong { font-weight: 600; }
|
|
.markdown-body img { max-width: 100%; border-radius: 4px; }
|
|
|
|
/* PR-7: KaTeX 수식 — 모바일에서 긴 수식이 레이아웃을 밀지 않도록 가로 스크롤 허용 */
|
|
.math-area { overflow-wrap: anywhere; }
|
|
.math-area .katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.25em 0; }
|
|
.math-area .katex { white-space: nowrap; }
|
|
.math-area p { margin: 0.5em 0; }
|
|
.math-area p:first-child { margin-top: 0; }
|
|
.math-area p:last-child { margin-bottom: 0; }
|
|
|
|
/* Phase 1C: MarkdownDoc — heading anchor / figure caption / KaTeX 가로 스크롤 */
|
|
.markdown-doc { overflow-wrap: anywhere; }
|
|
.markdown-doc h1, .markdown-doc h2, .markdown-doc h3,
|
|
.markdown-doc h4, .markdown-doc h5, .markdown-doc h6 {
|
|
scroll-margin-top: 80px;
|
|
position: relative;
|
|
}
|
|
.markdown-doc .heading-anchor {
|
|
display: inline-block;
|
|
margin-right: 0.35em;
|
|
color: var(--text-dim);
|
|
font-weight: 400;
|
|
text-decoration: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
font-family: 'SF Mono', Menlo, monospace;
|
|
}
|
|
.markdown-doc h1:hover .heading-anchor,
|
|
.markdown-doc h2:hover .heading-anchor,
|
|
.markdown-doc h3:hover .heading-anchor,
|
|
.markdown-doc h4:hover .heading-anchor,
|
|
.markdown-doc h5:hover .heading-anchor,
|
|
.markdown-doc h6:hover .heading-anchor,
|
|
.markdown-doc .heading-anchor:focus { opacity: 1; }
|
|
.markdown-doc .heading-anchor:hover { color: var(--accent); }
|
|
|
|
.markdown-doc .md-figure {
|
|
margin: 1em 0;
|
|
text-align: center;
|
|
}
|
|
.markdown-doc .md-figure img { display: inline-block; max-width: 100%; }
|
|
.markdown-doc .md-figure figcaption {
|
|
margin-top: 0.4em;
|
|
font-size: 0.85em;
|
|
color: var(--text-dim);
|
|
font-style: italic;
|
|
}
|
|
.markdown-doc .katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.25em 0; }
|
|
.markdown-doc .katex-display > .katex { white-space: nowrap; }
|
|
|
|
/* Phase 1C: image placeholder — asset serving (1B.5) 도착 전까지 깨진 아이콘 회피.
|
|
원본 src 는 figure 의 data-md-image-src 에 보존되어 1B.5 selector 로 복원 가능. */
|
|
.markdown-doc .md-image-placeholder {
|
|
margin: 1em 0;
|
|
text-align: left;
|
|
}
|
|
.markdown-doc .md-image-placeholder-card {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.5em 0.75em;
|
|
border: 1px dashed var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
color: var(--text-dim);
|
|
font-size: 0.85em;
|
|
font-style: italic;
|
|
}
|
|
.markdown-doc .md-image-placeholder-icon { font-style: normal; opacity: 0.7; }
|
|
|
|
/* Phase 1B.5: ImgAuth selector 가 placeholder figure 안에 삽입하는 실제 <img>.
|
|
selector 가 figure 의 자식만 교체하므로 figure 의 margin 은 유지 — 별도 wrapper 불필요. */
|
|
.markdown-doc .md-image-placeholder > .md-image {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 6px;
|
|
/* placeholder card 의 dashed 테두리는 swap 시 children 만 교체되어 자연 제거됨. */
|
|
}
|
|
|
|
/* Phase 1C: frontmatter 박스 — 본문 위 메타 표시 */
|
|
.md-frontmatter dt { font-weight: 500; }
|
|
|
|
/* AI 요약(TL;DR 등) 마크다운 렌더 — 좁은 카드에 맞게 문단/리스트 마진 압축 */
|
|
.summary-md > :first-child { margin-top: 0; }
|
|
.summary-md > :last-child { margin-bottom: 0; }
|
|
.summary-md p { margin: 0 0 0.45em; }
|
|
.summary-md ul, .summary-md ol { margin: 0.25em 0; padding-left: 1.2em; }
|
|
.summary-md ul { list-style: disc; }
|
|
.summary-md ol { list-style: decimal; }
|
|
.summary-md li { margin: 0.1em 0; }
|
|
.summary-md strong { font-weight: 700; }
|
|
.summary-md code { background: rgba(0, 0, 0, 0.05); padding: 0 0.3em; border-radius: 3px; }
|