),
so a wide 결산 table shoves the whole chat column sideways.
remark-gfm IS enabled (markdownConfig.ts:42), so `|---:|` alignment
works — but CSS cannot detect numeric content on its own:
THE PROMPT LAYER MUST EMIT `|---:|` FOR EVERY MONEY COLUMN.
--------------------------------------------------------------------- */
.markdown-table-wrapper {
overflow-x: auto;
overscroll-behavior-x: contain;
border-radius: var(--mora-radius-xs);
scrollbar-width: thin;
scrollbar-color: var(--gray-300) transparent;
}
.markdown-table-wrapper::-webkit-scrollbar { height: 8px; }
.markdown-table-wrapper::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: var(--mora-radius-xs);
}
.markdown table,
.markdown-table-wrapper table {
border-collapse: collapse;
width: auto;
min-width: 100%;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1, 'lnum' 1;
font-size: 13px;
}
.markdown th,
.markdown-table-wrapper th {
background: var(--mora-tint) !important;
border: 1px solid var(--gray-300) !important;
color: var(--text-primary);
font-weight: 700;
text-align: left;
padding: 7px 10px;
white-space: nowrap;
}
.markdown td,
.markdown-table-wrapper td {
border: 1px solid var(--gray-200) !important;
padding: 7px 10px;
vertical-align: top;
}
.markdown tbody tr:nth-child(even) td { background: var(--gray-50); }
/* Right-aligned = numeric. Covers both possible react-markdown outputs:
an align attribute and an inline text-align style. */
.markdown td[align='right'],
.markdown th[align='right'],
.markdown td[style*='right'],
.markdown th[style*='right'] {
text-align: right;
white-space: nowrap;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
/* Negative / 감액 figures — mora --off, never a saturated party red */
.markdown td[align='right'] .neg,
.markdown td .neg { color: var(--mora-off); }
/* ---------------------------------------------------------------------
6. BLOCKQUOTES (착안점 / 인용)
Two upstream defects break Korean:
style.css:1912-1918 .markdown blockquote { line-height: 1rem }
-> multi-line Korean collapses into itself
style.css:906-911 .prose blockquote p::before/::after
-> injects curly quotes around every quote
--------------------------------------------------------------------- */
.markdown blockquote,
.prose blockquote {
line-height: 1.7 !important;
margin: 1em 0;
padding: 12px 14px;
background: var(--mora-tint);
border-left: 3px solid var(--mora-green);
border-radius: 0 var(--mora-radius-xs) var(--mora-radius-xs) 0;
color: var(--text-secondary);
font-style: normal;
}
html.dark .markdown blockquote,
html.dark .prose blockquote { border-left-color: var(--mora-green-lift); }
.prose blockquote p::before,
.prose blockquote p::after,
.markdown blockquote p::before,
.markdown blockquote p::after { content: none !important; }
.markdown blockquote > :first-child { margin-top: 0; }
.markdown blockquote > :last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------
7. HEADINGS — h3 is the workhorse (section titles inside an answer)
--------------------------------------------------------------------- */
.markdown h1, .prose h1 {
font-size: 1.5rem; font-weight: 700; line-height: 1.4;
color: var(--text-primary); margin: 1.4em 0 0.5em;
letter-spacing: -0.01em;
}
.markdown h2, .prose h2 {
font-size: 1.22rem; font-weight: 700; line-height: 1.45;
color: var(--text-primary); margin: 1.3em 0 0.45em;
letter-spacing: -0.01em;
}
.markdown h3, .prose h3 {
font-size: 1.06rem;
font-weight: 700;
line-height: 1.5;
color: var(--mora-green);
margin: 1.2em 0 0.4em;
padding-left: 10px;
border-left: 3px solid var(--mora-green);
letter-spacing: -0.01em;
}
html.dark .markdown h3,
html.dark .prose h3 {
color: var(--mora-green-lift);
border-left-color: var(--mora-green-lift);
}
.markdown h4, .prose h4 {
font-size: 0.97rem; font-weight: 700;
color: var(--text-secondary); margin: 1.1em 0 0.35em;
}
.markdown p, .prose p { line-height: 1.75; }
.markdown li, .prose li { line-height: 1.7; }
/* ---------------------------------------------------------------------
8. CODE — fences and inline
The fence shell is (CodeBlock.tsx:104,121,126),
so its colours already follow the token layer; we only restyle shape.
style.css:1265-1272 sets `code,pre{font-family:... !important}`, so the
font override must also be !important.
Inline code uses the RAW --gray-200 (style.css:977) — covered by §1.
--------------------------------------------------------------------- */
code, pre, code.hljs, .markdown code {
font-family: 'JetBrains Mono', 'D2Coding', ui-monospace, SFMono-Regular,
Menlo, Consolas, monospace !important;
}
.markdown.prose pre > div,
.markdown pre > div {
border-radius: var(--mora-radius-xs) !important;
border: 1px solid var(--border-light) !important;
}
.markdown :not(pre) > code,
.prose :not(pre) > code {
background-color: var(--mora-tint) !important;
border: 1px solid var(--gray-200);
border-radius: var(--mora-radius-xs);
padding: 0.12em 0.36em;
font-size: 0.9em;
color: var(--text-primary);
}
.markdown :not(pre) > code::before,
.markdown :not(pre) > code::after,
.prose :not(pre) > code::before,
.prose :not(pre) > code::after { content: none !important; }
/* highlight.js — desaturated mora greens/neutrals only.
No saturated red/blue/yellow/green anywhere (political neutrality). */
code.hljs { background: transparent; color: var(--text-primary); }
.hljs-comment, .hljs-quote { color: var(--text-tertiary); font-style: normal; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag {
color: var(--mora-green-soft); font-weight: 700;
}
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition {
color: var(--mora-green-faint);
}
.hljs-number, .hljs-meta { color: var(--mora-retry); }
.hljs-title, .hljs-name, .hljs-type { color: var(--text-primary); font-weight: 700; }
.hljs-deletion { color: var(--mora-off); }
html.dark .hljs-keyword, html.dark .hljs-selector-tag,
html.dark .hljs-literal, html.dark .hljs-section { color: var(--mora-green-lift); }
html.dark .hljs-string, html.dark .hljs-attr { color: #a8cdbb; }
html.dark .hljs-number, html.dark .hljs-meta { color: #c6a25f; }
html.dark .hljs-deletion { color: #e09384; }
/* ---------------------------------------------------------------------
9. LINKS, HR
--------------------------------------------------------------------- */
.markdown a, .prose a {
color: var(--mora-green);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
html.dark .markdown a, html.dark .prose a { color: var(--mora-green-lift); }
.markdown hr, .prose hr { border-color: var(--gray-200); margin: 1.6em 0; }
/* ---------------------------------------------------------------------
10. SQUARE CHIPS — mora rule: badges/chips are 4px, never pill-shaped.
RISK: `rounded-full` appears ~220 times across client/src, including
avatars, spinners, progress bars and circular icon buttons. This rule
is narrowed to inline-flex BORDERED text chips, but it still needs a
visual QA pass. If anything circular goes square, DELETE THIS BLOCK —
it is cosmetic, nothing else depends on it.
--------------------------------------------------------------------- */
span.rounded-full.border,
div.rounded-full.border.inline-flex,
button.rounded-full.border.text-xs,
button.rounded-full.border.text-sm {
border-radius: var(--mora-radius-xs) !important;
}
/* ---------------------------------------------------------------------
11. Chat surface polish
--------------------------------------------------------------------- */
.rounded-3xl, .rounded-2xl { border-radius: var(--mora-radius); }
:focus-visible { outline: 2px solid var(--mora-green); outline-offset: 2px; }
html.dark :focus-visible { outline-color: var(--mora-green-lift); }
/* ---------------------------------------------------------------------
12. 문서 만들기 띠 (mora.js 가 입력창 위에 넣는다)
나이 있는 이용자가 주 사용자다. 본문 15px 이상, 단추 높이 44px 이상,
알약(pill) 모양과 가운뎃점 구분자는 쓰지 않는다.
--------------------------------------------------------------------- */
.mora-docbar {
/* 폭은 mora.js 가 입력창을 재서 인라인으로 맞춘다(fitWidth).
고정 max-width 로 두면 사이드바 상태·화면 폭에 따라 채팅창과 어긋난다. */
width: 100%;
margin: 0 auto 10px;
padding: 12px 14px;
border: 1px solid var(--gray-200);
border-radius: var(--mora-radius);
background: var(--gray-50);
box-sizing: border-box;
}
html.dark .mora-docbar { background: var(--gray-850); border-color: var(--gray-700); }
.mora-docbar-head { margin-bottom: 9px; }
.mora-docbar-title {
font-size: 0.9rem; font-weight: 700; color: var(--gray-500); letter-spacing: 0;
}
html.dark .mora-docbar-title { color: var(--gray-300); }
.mora-docbar-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mora-docbtn {
font-size: 0.95rem; line-height: 1.4; font-weight: 500;
min-height: 44px; padding: 10px 16px;
border: 1px solid var(--gray-300); border-radius: var(--mora-radius-xs);
background: #fff; color: var(--gray-800); cursor: pointer;
transition: background .12s, border-color .12s;
}
html.dark .mora-docbtn { background: var(--gray-900); color: var(--gray-100); border-color: var(--gray-600); }
.mora-docbtn:hover { background: var(--mora-tint); border-color: var(--mora-green-soft); }
html.dark .mora-docbtn:hover { background: rgba(127,183,155,.12); border-color: var(--mora-green-lift); }
.mora-docbtn[aria-pressed="true"] {
background: var(--mora-green); border-color: var(--mora-green); color: #fff; font-weight: 700;
}
html.dark .mora-docbtn[aria-pressed="true"] {
background: var(--mora-green-lift); border-color: var(--mora-green-lift); color: #0f1512;
}
.mora-docbtn.mora-solid { background: var(--mora-green); border-color: var(--mora-green); color: #fff; font-weight: 700; }
html.dark .mora-docbtn.mora-solid { background: var(--mora-green-lift); border-color: var(--mora-green-lift); color: #0f1512; }
.mora-docbtn.mora-ghost { border-style: dashed; color: var(--gray-500); }
.mora-docpane { margin-top: 11px; }
.mora-help {
margin-top: 11px; font-size: 0.88rem; line-height: 1.65; color: var(--gray-500);
display: flex; flex-direction: column; gap: 5px;
}
html.dark .mora-help { color: var(--gray-300); }
.mora-doclist {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
margin-bottom: 9px;
}
.mora-doccard {
text-align: left; padding: 12px 14px; min-height: 44px;
border: 1px solid var(--gray-300); border-radius: var(--mora-radius-xs);
background: #fff; color: var(--gray-800); cursor: pointer;
transition: background .12s, border-color .12s;
}
html.dark .mora-doccard { background: var(--gray-900); color: var(--gray-100); border-color: var(--gray-600); }
.mora-doccard:hover { background: var(--mora-tint); border-color: var(--mora-green-soft); }
html.dark .mora-doccard:hover { background: rgba(127,183,155,.12); border-color: var(--mora-green-lift); }
.mora-docname { display: block; font-size: 0.95rem; font-weight: 600; }
.mora-doccard small { display: block; margin-top: 3px; font-size: 0.85rem; color: var(--gray-400); font-weight: 400; }
/* 파일 떨구는 자리 — 단추 하나보다 "여기에 놓으면 된다"가 먼저 읽혀야 한다. */
.mora-drop {
border: 2px dashed var(--gray-300); border-radius: var(--mora-radius-xs);
background: #fff; padding: 22px 18px; text-align: center; cursor: pointer;
transition: background .12s, border-color .12s;
}
html.dark .mora-drop { background: var(--gray-900); border-color: var(--gray-600); }
.mora-drop:hover, .mora-drop.mora-drop-on {
background: var(--mora-tint); border-color: var(--mora-green);
}
html.dark .mora-drop:hover, html.dark .mora-drop.mora-drop-on {
background: rgba(127,183,155,.12); border-color: var(--mora-green-lift);
}
.mora-drop-err { border-color: var(--mora-off); }
.mora-drop-title { font-size: 1rem; font-weight: 700; color: var(--gray-800); }
html.dark .mora-drop-title { color: var(--gray-100); }
.mora-drop-sub { margin-top: 5px; font-size: 0.9rem; color: var(--gray-500); }
html.dark .mora-drop-sub { color: var(--gray-300); }
/* ---------------------------------------------------------------------
13. 오른쪽 문서 편집 패널 (mora.js)
--------------------------------------------------------------------- */
.mora-docpanel {
position: fixed; top: 0; right: 0; bottom: 0; width: 46vw; min-width: 380px; max-width: 780px;
z-index: 40; display: flex; flex-direction: column;
background: #fff; border-left: 1px solid var(--gray-200);
box-shadow: -8px 0 24px rgba(0,0,0,.06);
}
html.dark .mora-docpanel { background: var(--gray-900); border-left-color: var(--gray-700); }
.mora-docpanel.wide { width: 72vw; max-width: none; }
.mora-docpanel[hidden] { display: none; }
/* 패널이 열리면 대화 영역을 밀어 준다 — 글이 패널 밑에 깔리지 않게. */
body.mora-has-panel main { padding-right: 46vw; transition: padding-right .15s; }
@media (max-width: 900px) {
.mora-docpanel, .mora-docpanel.wide { width: 100vw; min-width: 0; max-width: none; }
body.mora-has-panel main { padding-right: 0; }
}
.mora-dp-bar {
display: flex; align-items: center; gap: 8px; padding: 10px 12px;
border-bottom: 1px solid var(--gray-200); background: var(--gray-50);
}
html.dark .mora-dp-bar { background: var(--gray-850); border-bottom-color: var(--gray-700); }
.mora-dp-title { font-weight: 700; font-size: .92rem; margin-right: auto; color: var(--gray-800); }
html.dark .mora-dp-title { color: var(--gray-100); }
.mora-dp-btn {
font-size: .88rem; min-height: 36px; padding: 6px 12px; cursor: pointer;
border: 1px solid var(--gray-300); border-radius: var(--mora-radius-xs);
background: #fff; color: var(--gray-800);
}
html.dark .mora-dp-btn { background: var(--gray-900); color: var(--gray-100); border-color: var(--gray-600); }
.mora-dp-btn:hover { background: var(--mora-tint); border-color: var(--mora-green-soft); }
.mora-dp-frame { flex: 1; width: 100%; border: 0; }
/* ---------------------------------------------------------------------
14. 답변 안의 목록 행간 — 근거·다음 행동이 지나치게 벌어지는 것 정리
LibreChat 은 Tailwind prose 를 쓰는데, 목록 항목마다 1em 가까운 여백이 붙어
'근거' 아래 서너 줄이 화면 절반을 먹었다(실측 지적). 본문 문단은 그대로 두고
**목록만** 좁힌다 — 읽기 밀도를 올리되 문단 호흡은 유지한다.
--------------------------------------------------------------------- */
.markdown ul, .markdown ol { margin-top: 0.35em; margin-bottom: 0.35em; }
.markdown li { margin-top: 0.15em; margin-bottom: 0.15em; }
.markdown li > p { margin: 0.1em 0; }
.markdown li > ul, .markdown li > ol { margin-top: 0.1em; margin-bottom: 0.1em; }
/* 구분선 위아래도 과하게 벌어져 있었다 */
.markdown hr { margin-top: 1em; margin-bottom: 0.7em; }
/* '근거' 같은 소제목 문단이 목록과 붙어 보이도록 */
.markdown hr + p { margin-bottom: 0.25em; }
/* 출처 각주 — 화면에서는 작게, 필요할 때만 읽게 */
.markdown sub {
font-size: 0.82em; color: var(--gray-400); line-height: 1.5;
}
html.dark .markdown sub { color: var(--gray-400); }
/* 근거 토글 — 서버가 로 감싼 RAG 출처. 기본은 접혀 있다. */
.markdown details { margin: 0.5em 0; }
.markdown details > summary {
cursor: pointer; font-size: 0.88rem; color: var(--gray-500);
list-style: none; padding: 2px 0;
}
.markdown details > summary::-webkit-details-marker { display: none; }
.markdown details > summary::before { content: 'ⓘ '; color: var(--mora-green); }
html.dark .markdown details > summary::before { color: var(--mora-green-lift); }
.markdown details[open] > summary { margin-bottom: 0.35em; }
.markdown details > summary:hover { color: var(--gray-700); }
html.dark .markdown details > summary { color: var(--gray-300); }