@font-face {
    font-family: 'RIDIBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'S-CoreDream';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.1/S-CoreDream-4Regular.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'S-CoreDream';
    font-style: normal;
    font-weight: 500;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.1/S-CoreDream-5Medium.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'S-CoreDream';
    font-style: normal;
    font-weight: 700;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.1/S-CoreDream-7ExtraBold.woff') format('woff');
    font-display: swap;
}

:root body {
    --font-text-theme: 'RIDIBatang', serif;
    --font-title: 'S-CoreDream', sans-serif;
    --color-dark: #3e3831;
    --color-background: #EEEDEA;
    --color-accent: #C16E41;
    --color-accent-1: #C16E41;
    --color-accent-2: #C16E41;
    --color-accent-rgb: 193, 110, 65;
    --color-accent-light: #E8C4B4;
    --text-underline-color: var(--color-accent);
    --text-selection: #E8C4B4;
    --text-highlight-bg: #F6E7D6;
    --interactive-accent: #C16E41;
    --interactive-accent-hover: #A85A34;
    --code-background: #E3E1DD;
    --code-text: #3e3831;
    --code-size: 0.9rem;
    --graph-node: var(--color-accent);
    --graph-node-focused: var(--color-accent);
    --graph-node-hover: var(--interactive-accent-hover);
    --graph-node-unresolved: rgba(var(--color-accent-rgb), 0.55);
    --graph-node-tag: var(--color-accent-light);
    --graph-node-attachment: var(--color-accent-light);
    --graph-line: rgba(var(--color-accent-rgb), 0.25);
    --graph-line-highlight: rgba(var(--color-accent-rgb), 0.45);
    --h1-weight: 700;
    --h2-weight: 600;
    --h3-weight: 500;
    --h4-weight: 400;
    --body-background: linear-gradient(to right, #FCFCFB, #EEEDEA 50%);
}

/* 다크 모드일 때 실제 다크 팔레트 적용 */
body.theme-dark,
.theme-dark body {
    --color-dark: #ece5dc;
    --color-background: #171411;
    --color-accent: #d6956f;
    --color-accent-1: #d6956f;
    --color-accent-2: #d6956f;
    --color-accent-rgb: 214, 149, 111;
    --color-accent-light: #3a2a22;
    --text-selection: #3a2a22;
    --text-highlight-bg: #3a2a22;
    --interactive-accent: #d6956f;
    --interactive-accent-hover: #e2a885;
    --code-background: #26211c;
    --code-text: #efe7dd;
    --body-background: linear-gradient(to right, #14110f, #1d1814 55%);
}

/* 로고도 다크 배경에서 밝게 보이도록 처리 */
.site-body-left-column-site-logo img,
.site-header-logo img {
    transition: filter 0.2s ease;
}

body.theme-dark .site-body-left-column-site-logo img,
body.theme-dark .site-header-logo img,
.theme-dark .site-body-left-column-site-logo img,
.theme-dark .site-header-logo img {
    filter: brightness(0) invert(1);
}

.published-container {
    font-family: var(--font-text-theme);
    --sidebar-left-background: transparent;
    --sidebar-right-background: var(--color-background);
    --sidebar-left-border-width: 0;
    --sidebar-left-border-color: transparent;
    --sidebar-right-border-width: 0;
    --sidebar-right-border-color: transparent;
}

/* 다크 모드에서는 오른쪽 패널 배경을 투명하게 맞춰 단차 제거 */
body.theme-dark .published-container,
.theme-dark .published-container {
    --sidebar-right-background: transparent;
    --sidebar-right-border-color: transparent;
}

/* 모바일에서는 사이드바 배경을 불투명하게 */
@media screen and (max-width: 768px) {
    .published-container {
        --sidebar-left-background: var(--color-background);
    }
}

.published-container .markdown-rendered strong,
.published-container .markdown-rendered b {
    color: var(--color-accent);
}

body {
    background: var(--body-background);
    background-attachment: fixed;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    font-size: 18px !important;
    hyphens: manual !important;
}

.published-container .markdown-rendered {
    font-size: 1.1rem !important; 
    line-height: 1.7 !important;  
    letter-spacing: 0rem;
    padding: 0px 40px 20px 40px;
}

.published-container .markdown-rendered p,
.published-container .markdown-rendered ul,
.published-container .markdown-rendered ol {
    margin-bottom: 1.8rem;
}

.published-container .markdown-rendered h1,
.published-container .markdown-rendered h2,
.published-container .markdown-rendered h3 {
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-family: var(--font-title);
    border: none;
    letter-spacing: -0.05em !important;
    color: var(--color-dark);
}

.published-container .markdown-rendered h4,
.published-container .markdown-rendered h5,
.published-container .markdown-rendered h6 {
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-family: var(--font-text-theme);
    border: none;
    letter-spacing: -0.05em !important;
    color: var(--color-dark);
}

.published-container .markdown-rendered .callout {
    margin-bottom: 4rem !important; 
}

.published-container .markdown-rendered h1 {
    font-size: 2.5rem;
    line-height: 2.75rem;
    font-weight: var(--h1-weight);
}

.published-container .markdown-rendered h2 {
    font-size: 1.9rem;
    line-height: 2.1rem;
    font-weight: var(--h2-weight);
}

.published-container .markdown-rendered h3 {
    font-size: 1.6rem;
    line-height: 1.8rem;
    font-weight: var(--h3-weight);
}


.published-container .markdown-rendered a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.published-container .markdown-rendered a:hover {
    border-bottom-color: currentColor;
}

.published-container .markdown-rendered a.internal-link:hover {
    border-bottom-color: transparent;
}

/* 내부 링크도 외부 링크처럼 연결 표시를 보이게 함 */
.published-container .markdown-rendered a.internal-link:not(.tag):not(.footnote-link)::after {
    content: "↪";
    display: inline-block;
    margin-left: 0.16em;
    font-size: 0.72em;
    line-height: 1;
    vertical-align: super;
    color: currentColor;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.published-container .markdown-rendered a.internal-link:not(.tag):not(.footnote-link):hover::after {
    opacity: 1;
}

/* 밑줄(u 태그) 색상 */
.published-container .markdown-rendered u {
    text-decoration-color: var(--text-underline-color);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.1em;
    text-decoration-skip-ink: none;
}

.published-container .markdown-rendered hr {
    border: none;
    background-color: #d1cdc7;
    height: 1px;
    opacity: 0.6;

    width: 90%;
    margin-left: auto;
    margin-right: auto;

    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

body.theme-dark .published-container .markdown-rendered hr,
.theme-dark .published-container .markdown-rendered hr {
    background-color: #4a4138;
    opacity: 0.8;
}

.published-container .markdown-rendered blockquote {
    margin-top: 0;
    margin-bottom: 1.8rem;
}

.published-container .markdown-rendered .el-p:has(+ .el-blockquote) p {
    margin-bottom: 0.5rem;
}

/* 오른쪽 정렬 Callout 
   사용법: 
   > [!right]
   > ![[이미지.png]]
*/

/* [!right] 콜아웃 스타일 */
.published-container .markdown-rendered .callout[data-callout="right"] {
    float: right;
    width: 40%;
    max-width: 400px;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    clear: right;
}

/* 콜아웃 제목 숨기기 */
.published-container .markdown-rendered .callout[data-callout="right"] .callout-title {
    display: none !important;
}

/* 내부 콘텐츠 여백 제거 */
.published-container .markdown-rendered .callout[data-callout="right"] .callout-content {
    padding: 0 !important;
}

/* 모바일 대응: 화면이 좁을 때는 전체 너비로 */
@media screen and (max-width: 768px) {
    .published-container .markdown-rendered .callout[data-callout="right"] {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
}


.graph-view-wrapper {
    border: none !important;
    box-shadow: none !important;
    background: var(--color-background) !important;
}
  
.graph-view-container {
    border: none !important;
    background: var(--color-background) !important;
}
  
.graph-view-outer > span,
.list-item.published-section-header {
    display: none !important;
}
  
.graph-icon.graph-expand,
.graph-icon.graph-global,
div[class*="graph-icon"] {
    display: none !important;
}

.site-body-left-column {
    background: transparent !important;
    border-right: none;
}

/* 사이트 이름 "기묘인재" */
.site-body-left-column-site-name {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 4px !important;
    margin-left: 22px !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
    margin-top: 10px !important;
    text-decoration: none !important;
    color: var(--color-dark) !important;
    font-weight: 600 !important;
}

.search-view-outer {
    padding-top: 4px !important;
}

.site-body-right-column {
    background: var(--color-background);
    border-left: none;
}

body.theme-dark .site-body-right-column,
.theme-dark .site-body-right-column,
body.theme-dark .graph-view-wrapper,
.theme-dark .graph-view-wrapper,
body.theme-dark .graph-view-container,
.theme-dark .graph-view-container,
body.theme-dark .outline-view-outer,
.theme-dark .outline-view-outer {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 텍스트 선택(드래그) 색상 */
::selection {
    background-color: var(--color-accent-light) !important;
    color: var(--color-dark);
}

::-moz-selection {
    background-color: var(--color-accent-light) !important;
    color: var(--color-dark);
}

/* 하이라이트(==텍스트==) 색상 */
.published-container .markdown-rendered mark {
    background-color: var(--text-highlight-bg) !important;
    color: var(--color-dark);
    padding: 0.1em 0.2em;
    border-radius: 3px;
}

/* 네비게이션 활성 항목 - 배경색 변경 없이 유지 */
.nav-view-outer .tree-item-self.mod-active {
    background-color: transparent;
}

/* 아웃라인(목차) 활성 항목 */
.outline-view-outer .tree-item-self.mod-active {
    color: var(--color-accent);
}

/* 체크박스 */
.published-container input[type="checkbox"]:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

/* 코드 블록 스타일 */
.published-container .markdown-rendered pre {
    background-color: var(--code-background) !important;
    color: var(--code-text) !important;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 1rem;
    font-size: var(--code-size) !important;
}

body.theme-dark .published-container .markdown-rendered pre,
.theme-dark .published-container .markdown-rendered pre {
    border-color: rgba(255, 255, 255, 0.08);
}

.published-container .markdown-rendered code {
    font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
    background-color: var(--code-background) !important;
    color: var(--code-text) !important;
    border-radius: 3px;
    font-size: var(--code-size) !important;
}

/* 코드 블록 내의 code 태그는 배경색 중복 방지 */
.published-container .markdown-rendered pre code {
    background-color: transparent !important;
    padding: 0;
    border: none;
}

/* ========================================
   모바일 UX 개선
   ======================================== */

/* 모바일 미디어 쿼리 (768px 이하) */
@media screen and (max-width: 768px) {
    /* ===== 1. 모바일 상단 바: 로고 이미지(버섯) 숨기기 ===== */
    
    /* 모바일에서는 배경 그라데이션 제거하고 단색 유지 */
    body {
        background: var(--color-background) !important;
        background-attachment: scroll !important;
    }

    /* 모바일 헤더(상단 바)에서 로고 이미지 제거 */
    .site-header-logo,
    .site-header-logo img {
        display: none !important;
    }
    
    /* 좌측 고정 로고 섹션도 숨김 */
    .site-body-left-column-site-logo {
        display: none !important;
    }

    /* 상단 바 배경을 본문과 동일한 색으로 맞추고 경계선 제거 */
    .site-header {
        background: var(--color-background) !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* 헤더 내부 요소 정렬 보정 */
    .site-header .site-header-text {
        margin-left: 4px;
    }
    
    /* ===== 2. Nav Bar (사이드바) 배경색 본문과 동일하게 ===== */
    
    /* 왼쪽 사이드바 컬럼 전체 - 배경색 통일 */
    .site-body-left-column {
        background-color: var(--color-background) !important;
        background: var(--color-background) !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* 사이드바 내부 네비게이션 영역 */
    .nav-view-outer {
        background-color: var(--color-background) !important;
        background: var(--color-background) !important;
    }
    
    /* 검색창 영역 */
    .search-view-outer {
        background-color: var(--color-background) !important;
        background: var(--color-background) !important;
    }
    
    /* 사이드바 열렸을 때 전체 컨테이너 */
    .published-container.is-left-sidebar-open .site-body-left-column {
        background-color: var(--color-background) !important;
        background: var(--color-background) !important;
    }
    
    /* 사이드바 내부 콘텐츠 영역 */
    .site-body-left-column > * {
        background-color: var(--color-background) !important;
    }
    
    /* ===== 3. Nav Bar와 본문 사이 경계선 제거 ===== */
    
    /* 사이드바 오른쪽 경계선 제거 */
    .site-body-left-column {
        border-right: none !important;
    }
    
    /* 본문 왼쪽 경계선 제거 */
    .site-body-right-column {
        border-left: none !important;
    }
    
    /* 사이드바와 본문 사이 구분선 제거 */
    .site-body {
        border: none !important;
    }
    
    /* 모든 구분선/그림자 효과 제거 */
    .site-body-left-column,
    .site-body-right-column,
    .nav-view-outer,
    .search-view-outer {
        border: none !important;
        box-shadow: none !important;
    }
}