/* publish.css — Obsidian Publish: H1 접기/펼치기 */

/* ── 왼쪽 사이드바 배경 (데스크톱 + 모바일) ──
   모바일에서는 사이드바 컨테이너가 다를 수 있으므로 여러 셀렉터로 커버 */
.site-body-left-column,
.site-body-left-column-inner,
.site-body-left-column-site-name,
.site-body-left-column-tree,
.mobile-pusher,
.mobile-sidebar,
.is-mobile .site-body-left-column,
.is-mobile aside,
body .site-body-left-column {
  background-color: #3b4252;
  --nav-item-color: #aab8d3;
  --nav-item-color-hover: #aab8d3;
  --nav-item-color-active: #ffffff;
  --nav-item-background-hover: #454d60;
  --nav-item-background-active: #454d60;
  --nav-collapse-icon-color: #aab8d3;
  --text-normal: #aab8d3;
  --text-muted: #aab8d3;
  --background-modifier-hover: #454d60;
  --background-secondary-alt: #454d60;
}

/* 사이드바 텍스트 — 사이드바 컨테이너 의존 없이 nav 항목 자체에 직접 */
.nav-folder-title,
.nav-folder-title-content,
.nav-file-title,
.nav-file-title-content,
.tree-item-self,
.tree-item-inner {
  color: #aab8d3 !important;
}
/* 검색창 — 흰 배경 + 검정 글씨 */
.site-body-left-column input,
.site-body-left-column input[type="text"],
.site-body-left-column input[type="search"],
.site-body-left-column .search-input,
.site-body-left-column .search-input-container input {
  color: #000000 !important;
  background-color: #ffffff !important;
  border: 1px solid #525c70 !important;
  border-radius: 6px;
}
.site-body-left-column input::placeholder,
.site-body-left-column .search-input::placeholder {
  color: #888888 !important;
}

/* 검색 결과 드롭다운 — 검정 글씨 */
.search-result,
.search-result-file-title,
.search-result-file-matches,
.suggestion-item,
.suggestion-content {
  color: #000000 !important;
}

/* 확장자 라벨 (JPG, CSS, BASE 등) */
.site-body-left-column .nav-file-tag {
  color: #50586b;
}

/* 폴더/파일 호버 — 배경 강조 + 글씨 흰색으로 밝게 */
.site-body-left-column .nav-file-title:hover,
.site-body-left-column .nav-folder-title:hover,
.site-body-left-column .tree-item-self:hover,
.site-body-left-column .tree-item-self.is-clickable:hover {
  background-color: #454d60 !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* 호버 시 안쪽 텍스트도 흰색으로 밝게 */
.site-body-left-column .nav-file-title:hover,
.site-body-left-column .nav-folder-title:hover,
.site-body-left-column .tree-item-self:hover,
.site-body-left-column .nav-file-title:hover .nav-file-title-content,
.site-body-left-column .nav-folder-title:hover .nav-folder-title-content,
.site-body-left-column .tree-item-self:hover .tree-item-inner {
  color: #ffffff !important;
}

/* ── 현재 열린 파일 — 호버 효과 지속 ── */
/* Obsidian Publish의 활성 클래스가 어떤 형태든 잡히도록 광범위하게 처리 */
.site-body-left-column .is-active,
.site-body-left-column .nav-file-title.is-active,
.site-body-left-column .tree-item-self.is-active,
.site-body-left-column a.is-active,
.site-body-left-column .has-active-menu,
.site-body-left-column .is-selected,
.site-body-left-column .mod-active,
.site-body-left-column .is-active > .nav-file-title,
.site-body-left-column .is-active > .tree-item-self,
.site-body-left-column .nav-file:has(.is-active),
.site-body-left-column .tree-item:has(.is-active) > .tree-item-self {
  background-color: #454d60 !important;
  color: #ffffff !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* 활성 파일 안의 텍스트도 흰색 */
.site-body-left-column .is-active *,
.site-body-left-column .has-active-menu *,
.site-body-left-column .mod-active *,
.site-body-left-column .nav-file-title.is-active .nav-file-title-content,
.site-body-left-column .tree-item-self.is-active .tree-item-inner {
  color: #ffffff !important;
}

/* ── '경제' 폴더만 초록색 (호버 시에도 유지) ── */
.site-body-left-column .nav-folder-title[data-path="경제"],
.site-body-left-column .nav-folder-title[data-path="경제"] .nav-folder-title-content,
.site-body-left-column .nav-folder-title[data-path="경제"]:hover,
.site-body-left-column .nav-folder-title[data-path="경제"]:hover .nav-folder-title-content,
.site-body-left-column .tree-item-self[data-path="경제"],
.site-body-left-column .tree-item-self[data-path="경제"] .tree-item-inner,
.site-body-left-column .tree-item-self[data-path="경제"]:hover,
.site-body-left-column .tree-item-self[data-path="경제"]:hover .tree-item-inner,
.site-body-left-column [data-path="경제"],
.site-body-left-column [data-path="경제"] .nav-folder-title-content,
.site-body-left-column [data-path="경제"] .tree-item-inner,
.site-body-left-column [data-path="경제"]:hover,
.site-body-left-column [data-path="경제"]:hover .nav-folder-title-content,
.site-body-left-column [data-path="경제"]:hover .tree-item-inner,
.site-body-left-column [data-path*="경제"] .nav-folder-title,
.site-body-left-column [data-path*="경제"] .nav-folder-title .nav-folder-title-content,
.site-body-left-column [data-path*="경제"] .nav-folder-title:hover,
.site-body-left-column [data-path*="경제"] .nav-folder-title:hover .nav-folder-title-content {
  color: #3ba97a !important;
}

/* ── '1. 전공' 폴더만 크림슨 (호버 시에도 유지) ── */
.site-body-left-column .nav-folder-title[data-path="1. 전공"],
.site-body-left-column .nav-folder-title[data-path="1. 전공"] .nav-folder-title-content,
.site-body-left-column .nav-folder-title[data-path="1. 전공"]:hover,
.site-body-left-column .nav-folder-title[data-path="1. 전공"]:hover .nav-folder-title-content,
.site-body-left-column .tree-item-self[data-path="1. 전공"],
.site-body-left-column .tree-item-self[data-path="1. 전공"] .tree-item-inner,
.site-body-left-column .tree-item-self[data-path="1. 전공"]:hover,
.site-body-left-column .tree-item-self[data-path="1. 전공"]:hover .tree-item-inner,
.site-body-left-column [data-path="1. 전공"],
.site-body-left-column [data-path="1. 전공"] .nav-folder-title-content,
.site-body-left-column [data-path="1. 전공"] .tree-item-inner,
.site-body-left-column [data-path="1. 전공"]:hover,
.site-body-left-column [data-path="1. 전공"]:hover .nav-folder-title-content,
.site-body-left-column [data-path="1. 전공"]:hover .tree-item-inner,
.site-body-left-column [data-path*="1. 전공"] .nav-folder-title,
.site-body-left-column [data-path*="1. 전공"] .nav-folder-title .nav-folder-title-content,
.site-body-left-column [data-path*="1. 전공"] .nav-folder-title:hover,
.site-body-left-column [data-path*="1. 전공"] .nav-folder-title:hover .nav-folder-title-content {
  color: #d63a5e !important;
}

/* ── '영상' 폴더만 크림슨 (호버 시에도 유지) ── */
.site-body-left-column .nav-folder-title[data-path="영상"],
.site-body-left-column .nav-folder-title[data-path="영상"] .nav-folder-title-content,
.site-body-left-column .nav-folder-title[data-path="영상"]:hover,
.site-body-left-column .nav-folder-title[data-path="영상"]:hover .nav-folder-title-content,
.site-body-left-column .tree-item-self[data-path="영상"],
.site-body-left-column .tree-item-self[data-path="영상"] .tree-item-inner,
.site-body-left-column .tree-item-self[data-path="영상"]:hover,
.site-body-left-column .tree-item-self[data-path="영상"]:hover .tree-item-inner,
.site-body-left-column [data-path="영상"],
.site-body-left-column [data-path="영상"] .nav-folder-title-content,
.site-body-left-column [data-path="영상"] .tree-item-inner,
.site-body-left-column [data-path="영상"]:hover,
.site-body-left-column [data-path="영상"]:hover .nav-folder-title-content,
.site-body-left-column [data-path="영상"]:hover .tree-item-inner,
.site-body-left-column [data-path*="영상"] .nav-folder-title,
.site-body-left-column [data-path*="영상"] .nav-folder-title .nav-folder-title-content,
.site-body-left-column [data-path*="영상"] .nav-folder-title:hover,
.site-body-left-column [data-path*="영상"] .nav-folder-title:hover .nav-folder-title-content {
  color: #9f7aea !important;
}

/* 사이드바 모든 항목의 좌측 줄/인디케이터 제거 (기본/호버/활성 모두) */
.site-body-left-column .nav-file-title,
.site-body-left-column .nav-folder-title,
.site-body-left-column .tree-item-self,
.site-body-left-column .nav-file,
.site-body-left-column .nav-folder,
.site-body-left-column .tree-item {
  border-left: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

/* 항목을 전체 너비로 — 호버/활성 강조 막대가 좌우 대칭이 되도록
   margin 없이 컨테이너 너비를 꽉 채워서 좌우 비대칭 방지 */
.site-body-left-column .nav-file-title,
.site-body-left-column .nav-folder-title,
.site-body-left-column .tree-item-self {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  border-radius: 4px !important;
}

/* 가상요소(::before, ::after)로 그리는 인디케이터 줄 완전 제거 */
.site-body-left-column .nav-file-title::before,
.site-body-left-column .nav-folder-title::before,
.site-body-left-column .tree-item-self::before,
.site-body-left-column .nav-file::before,
.site-body-left-column .nav-folder::before,
.site-body-left-column .tree-item::before,
.site-body-left-column .nav-file-title::after,
.site-body-left-column .nav-folder-title::after,
.site-body-left-column .tree-item-self::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ── 폴더와 그 직속 자식 사이에 좌측 가이드 줄 (최상위 제외) ──
   다른 자식 컨테이너 내부에 중첩된 경우만 매칭 → 자동으로 vault 최상위 제외
   margin-left로 화살표 위치에 맞춰 정렬 */
.site-body-left-column .nav-folder-children .nav-folder-title + .nav-folder-children,
.site-body-left-column .tree-item-children .tree-item-self + .tree-item-children {
  border-left: 1px solid rgba(170, 184, 211, 0.2);
  margin-left: 8px;
}

/* ── 표: 페이지 너비 꽉 채우기 ── */
.markdown-preview-view table {
  width: 100%;
  table-layout: fixed;
}

/* ── H1 기본: 커서 + 사용자 드래그 방지 ── */
.markdown-preview-view h1 {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* ── 토글 화살표 아이콘 ── */
.h1-toggle-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3L5 7L8 3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3L5 7L8 3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: rotate(0deg);
}

/* ── H1 호버 시 아이콘 강조 ── */
.markdown-preview-view h1:hover .h1-toggle-icon {
  opacity: 1;
}

/* ── 접힌 상태: 아이콘 회전 ── */
.markdown-preview-view h1.h1-collapsed .h1-toggle-icon {
  transform: rotate(-90deg);
}

/* ── 콘텐츠 컨테이너 ── */
.h1-collapsible-content {
  overflow: hidden;
  transition: opacity 0.2s ease;
  opacity: 1;
}

/* ── 콘텐츠 숨김 ── */
.h1-collapsible-content.h1-content-hidden {
  display: none;
}