body {
    font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    
}

/* Tabular numbers for consistent digit width */
body,
textarea,
.cm-editor,
.cm-content,
.markdown-body {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Editor Font Settings */
textarea {
    font-family: 'CloudSansCode', Consolas, monospace !important;
    line-height: 1.6;
    tab-size: 2;
}

.dark textarea {
    caret-color: #8be9fd;
}

.dark textarea::placeholder {
    color: #6272a4;
}

/* CodeMirror Background Override */
.dark .cm-editor {
    background-color: #282a36 !important;
}

.cm-editor {
    font-family: 'Pretendard', Consolas, monospace !important;
    touch-action: auto !important;
    -webkit-touch-callout: text !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

.cm-scroller {
    touch-action: auto !important;
    -webkit-touch-callout: text !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-user-drag: auto !important;
}

.cm-content {
    font-family: 'Pretendard', Consolas, monospace !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-touch-callout: text !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-user-drag: auto !important;
    -webkit-tap-highlight-color: transparent !important;
}

.cm-scroller {
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-x: contain;
    overflow-x: auto;
}

.cm-editor {
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior: contain;
}

/* Custom Cursor Colors for Better Visibility */
.cm-content {
    caret-color: #000000;
}

/* CodeMirror Custom Cursor (PC/Mac) */
.cm-cursor {
    border-left-width: 2px !important;
    border-left-color: #000000 !important;
}

.dark .cm-content {
    caret-color: #8be9fd;
}

.dark .cm-cursor {
    border-left-color: #8be9fd !important;
}

/* -------------------------------------------------------------------------- */
/* Markdown Preview Styling (GitHub Flavored)                                 */
/* -------------------------------------------------------------------------- */

.markdown-body {
    font-family: 'Pretendard', sans-serif !important;
    box-sizing: border-box;
    min-width: 200px;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
    width: 100% !important;
    background-color: transparent !important;
    tab-size: 4;
    -moz-tab-size: 4;
}

@media (max-width: 767px) {
    .markdown-body {
        padding: 12px !important;
    }
}

/* Code Blocks & Inline Code Font */
.markdown-body pre,
.markdown-body code {
    font-family: 'CloudSansCode', monospace !important;
}

.markdown-body pre {
    margin: 16px 0 !important;
    padding: 16px !important;
    overflow: auto !important;
    background-color: #f6f8fa !important;
    border-radius: 6px !important;
    border: 1px solid #d0d7de !important;
}

.markdown-body pre code {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.markdown-body :not(pre)>code {
    background-color: #f1f3f4 !important;
    color: #24292e !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-size: 0.9em !important;
}

/* Responsive Images */
.markdown-body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px;
    margin: 8px 0;
}

/* Base element spacing - Let them collapse naturally */
.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    line-height: 1.7;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 600 !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
    line-height: 1.25;
}

/* List handling */
.markdown-body ul { list-style-type: disc !important; padding-left: 1.5em !important; }
.markdown-body ol { list-style-type: decimal !important; padding-left: 1.5em !important; }

.markdown-body li {
    margin-bottom: 4px !important;
}

/* Reset margins for elements inside list items to prevent double spacing */
.markdown-body li > p { margin-top: 8px !important; margin-bottom: 0 !important; }
.markdown-body li > p:first-child { margin-top: 0 !important; }
.markdown-body li > ul, .markdown-body li > ol { margin-top: 4px !important; margin-bottom: 0 !important; }

/* Empty list items height */
.markdown-body li:empty::after { content: "\00a0"; }

/* Task Lists (Checkboxes) */
.markdown-body .task-list-item { list-style-type: none !important; padding-left: 0 !important; }
.markdown-body li.task-list-item input[type="checkbox"] {
    margin: 0 0.4em 0.25em -1.4em !important;
    vertical-align: middle;
}

/* Tables */
.markdown-body table {
    display: table !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    border-collapse: collapse !important;
}

/* -------------------------------------------------------------------------- */
/* Dark Mode Overrides                                                        */
/* -------------------------------------------------------------------------- */

.dark .markdown-body {
    color-scheme: dark;
    --color-canvas-default: #282a36;
    --color-canvas-subtle: #2f3242;
    --color-border-default: #44475a;
    --color-border-muted: #44475a;
    --color-fg-default: #f8f8f2;
    --color-fg-muted: #cfcfe8;
    --color-accent-fg: #8be9fd;
    --color-canvas-overlay: #2f3242;
    --color-prettylights-syntax-comment: #6272a4;
}

.dark .markdown-body a { color: #8be9fd !important; text-decoration: none; }
.dark .markdown-body a:hover { text-decoration: underline; }

.dark .markdown-body h1, .dark .markdown-body h2, .dark .markdown-body h3,
.dark .markdown-body h4, .dark .markdown-body h5, .dark .markdown-body h6 {
    color: #f8f8f2 !important;
    border-bottom-color: #44475a !important;
}

.dark .markdown-body hr { background-color: #44475a !important; height: 1px !important; border: none !important; }

.dark .markdown-body blockquote {
    color: #f8f8f2 !important;
    border-left-color: #bd93f9 !important;
    background-color: rgba(68, 71, 90, 0.4) !important;
    padding: 0.5em 1em !important;
}

.dark .markdown-body table tr { background-color: #282a36 !important; border-top-color: #44475a !important; }
.dark .markdown-body table tr:nth-child(2n) { background-color: #2f3242 !important; }
.dark .markdown-body table th, .dark .markdown-body table td { border-color: #44475a !important; color: #f8f8f2 !important; }

.dark .markdown-body pre { background-color: #2f3242 !important; border: 1px solid #44475a !important; }
.dark .markdown-body pre code { background-color: transparent !important; color: #f8f8f2 !important; }
.dark .markdown-body :not(pre)>code { background-color: #44475a !important; color: #f8f8f2 !important; }

.dark .markdown-body ul, .dark .markdown-body ol { color: #f8f8f2 !important; }
.dark .markdown-body li::marker { color: #8be9fd !important; }

/* Global Utilities */
:root { --vh: 1vh; }
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

html, body { min-height: 100%; height: 100%; }
@media screen and (max-width: 767px) {
    body { height: calc(var(--vh, 1vh) * 100); min-height: calc(var(--vh, 1vh) * 100); touch-action: manipulation; }
    #app { height: 100%; overflow: hidden; }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.2s ease-out forwards; }

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* YAML Frontmatter */
.frontmatter-container { margin-bottom: 24px; border-bottom: 1px solid #d0d7de; padding-bottom: 16px; font-family: monospace; }
.dark .frontmatter-container { border-bottom-color: #44475a; }
.frontmatter-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.frontmatter-table tr { background: transparent !important; border: none !important; }
.frontmatter-table td { padding: 2px 8px 2px 0 !important; border: none !important; vertical-align: top; }
.fm-key { font-weight: 600; color: #57606a; width: 100px; white-space: nowrap; }
.dark .fm-key { color: #8be9fd; }
.fm-val { color: #24292F; }
.dark .fm-val { color: #f8f8f2; }

/* Scrollbars */
.thin-scrollbar::-webkit-scrollbar { height: 2px; }
.thin-scrollbar::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 10px; }
.thin-scrollbar:hover::-webkit-scrollbar-thumb { background-color: #cbd5e1; }
.dark .thin-scrollbar:hover::-webkit-scrollbar-thumb { background-color: #44475a; }

.cm-scroller::-webkit-scrollbar,
.layout-container .sidebar::-webkit-scrollbar, .notes-list::-webkit-scrollbar { width: 10px; height: 10px; }
.cm-scroller::-webkit-scrollbar-thumb,
.layout-container .sidebar::-webkit-scrollbar-thumb, .notes-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1); border: 3px solid transparent; background-clip: content-box; border-radius: 99px;
}
.dark .cm-scroller::-webkit-scrollbar-thumb,
.dark .layout-container .sidebar::-webkit-scrollbar-thumb, .dark .notes-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark .cm-editor .cm-selectionBackground, .dark .cm-editor ::selection { background-color: rgba(139, 233, 253, 0.28) !important; }
.search-highlight { background-color: rgba(255, 235, 59, 0.5); border-radius: 2px; }
.dark .search-highlight { background-color: rgba(241, 250, 140, 0.45); color: #282a36; }

body.zen-mode #app-sidebar { display: none !important; width: 0 !important; }
.markdown-body table td, .markdown-body table th { min-width: 1.5em; }
body.zen-mode .flex.h-14.items-center, body.zen-mode .h-12.border-b { display: none !important; }
body.zen-mode .cm-editor { height: 100vh !important; }

.cm-backlink { color: #0969da; text-decoration: underline; cursor: pointer; background-color: rgba(9, 105, 218, 0.1); border-radius: 2px; padding: 0 2px; }
.dark .cm-backlink { color: #8be9fd; background-color: rgba(139, 233, 253, 0.18); }
.markdown-body .backlink { color: #0969da; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.dark .markdown-body .backlink { color: #8be9fd; }

.cm-tooltip-autocomplete { z-index: 9999 !important; }
.cm-tooltip-autocomplete ul { max-height: 300px !important; overflow-y: auto !important; }
.cm-tooltip-autocomplete li { cursor: pointer !important; padding: 4px 8px !important; border-radius: 4px !important; }
.cm-tooltip-autocomplete li:hover, .cm-tooltip-autocomplete li.cm-focused { background-color: rgba(9, 105, 218, 0.1) !important; }
.dark .cm-tooltip-autocomplete li:hover, .dark .cm-tooltip-autocomplete li.cm-focused { background-color: rgba(139, 233, 253, 0.2) !important; }

.safe-area-top { height: calc(1.75rem + env(safe-area-inset-top)) !important; padding-top: env(safe-area-inset-top) !important; }
@media (min-width: 768px) { .safe-area-top { height: 1.75rem !important; padding-top: 0 !important; } }

/* Activity Bar Customizations */
.cursor-col-resize {
    cursor: col-resize;
}

/* Tooltip or hover effect for activity bar icons */
.group\/sidebar button {
    position: relative;
}

/* Ensure smooth sidebar transition */
#app-sidebar {
    will-change: width;
    backface-visibility: hidden;
}

/* Highlight for active section in Activity Bar */
.activity-item-active {
    color: #8be9fd !important;
}

.dark .activity-item-active {
    color: #8be9fd !important;
}