/*
  ========================================
  Code Editor Blog - 커스텀 스타일시트
  ========================================

  이 파일은 Tailwind CSS로 처리하지 못하는
  티스토리 전용 스타일과 특수 컴포넌트를 정의합니다.

  목차:
  1. 전역 스타일
  2. 타이포그래피
  3. 코드 블록
  4. 티스토리 카테고리 스타일
  5. 티스토리 최근 글 스타일
  6. 댓글 스타일
  7. 이미지 스타일
  8. 유틸리티
*/

/* ========================================
   1. 전역 스타일
   ======================================== */

/*
  루트 CSS 변수 정의
  index.xml에서 설정한 값들을 CSS 변수로 변환
*/
:root {
    --color-accent: #007acc;
    --color-sidebar: #252526;
    --color-main: #1e1e1e;
    --color-text: #d4d4d4;
    --font-code: 'JetBrains Mono', monospace;
  }
  
  /* 다크 모드 기본 설정 */
  .dark {
    color-scheme: dark;
  }

  /* 페이지네이션: 비어있으면 숨김, 내용 있으면 여백+구분선 */
  .pagination-wrap { margin: 0; padding: 0; }
  .pagination-wrap:has(a) {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #374151;
  }
  
  /* 라이트 모드 색상 (선택적) */
  .light {
    --color-sidebar: #f3f4f6;
    --color-main: #ffffff;
    --color-text: #1f2937;
  }
  
  /* Accent 색상 유틸리티 클래스 */
  .bg-accent {
    background-color: var(--color-accent) !important;
  }
  
  .text-accent {
    color: var(--color-accent) !important;
  }
  
  .border-accent {
    border-color: var(--color-accent) !important;
  }
  
  .hover\:bg-accent:hover {
    background-color: var(--color-accent) !important;
  }
  
  .hover\:text-accent:hover {
    color: var(--color-accent) !important;
  }
  
  /* 스크롤바 스타일 (다크 모드용) */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background: #1e1e1e;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #3e3e42;
    border-radius: 5px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #4e4e52;
  }
  
  /* 선택 영역 색상 */
  ::selection {
    background: var(--color-accent);
    color: white;
  }
  
  /* ========================================
     2. 타이포그래피
     ======================================== */
  
  /*
    본문 글꼴 설정
    - 코드: JetBrains Mono (모노스페이스)
    - 본문: 시스템 폰트 (빠른 로딩)
  */
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /*
    제목 스타일링
    SEO를 위해 제목 계층 구조 유지 (H1 > H2 > H3...)
  */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 1.25em;
    /* 제목 아래 간격 증가 */
  }
  
  h1 {
    font-size: 2rem;
  }
  
  /* 32px */
  h2 {
    font-size: 1.625rem;
  }
  
  /* 26px */
  h3 {
    font-size: 1.375rem;
  }
  
  /* 22px */
  h4 {
    font-size: 1.125rem;
  }
  
  /* 18px */
  h5 {
    font-size: 1rem;
  }
  
  /* 16px */
  h6 {
    font-size: 0.875rem;
  }
  
  /* 14px */
  
  /* 본문 텍스트 */
  p {
    line-height: 1.7;
    margin-bottom: 1em;
  }
  
  /* 링크 스타일 */
  a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  /* 인용 블록 스타일 */
  blockquote {
    margin: 1.5em 0;
    padding: 0.875rem 1.25rem;
    border-left: 4px solid var(--color-accent);
    background-color: rgba(45, 45, 48, 0.5);
    color: #a8a8a8;
    /* 밝은 회색 */
    border-radius: 4px;
    font-size: 0.9375rem;
    text-align: left;
    /* 좌측 정렬 */
  }
  
  /* 인용 블록 자동 텍스트 제거 (따옴표 아이콘 제거) */
  blockquote::before,
  blockquote::after {
    content: none !important;
    display: none !important;
  }
  
  /* 인용 블록 내 볼드 텍스트는 밝게 유지 */
  blockquote strong,
  blockquote b {
    color: #e0e0e0;
  }
  
  /* 인용 블록 내 링크 */
  blockquote a {
    color: var(--color-accent);
  }
  
  /* 인용 블록 내 코드 */
  blockquote code {
    background: rgba(30, 30, 30, 0.6);
    color: #ce9178;
  }
  
  /* ========================================
     3. 코드 블록 스타일
     ======================================== */
  
  /*
    인라인 코드
    `code` 형태의 텍스트
  */
  code {
    font-family: var(--font-code);
    font-size: 0.875em;
    background: #2d2d30;
    color: #ce9178;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-weight: 400;
  }
  
  /*
    코드 블록
    ```code``` 형태의 여러 줄 코드
  */
  pre {
    font-family: var(--font-code);
    background: #1e1e1e;
    border: 1px solid #3e3e42;
    border-radius: 6px;
    padding: 1.25rem;
    overflow-x: auto;
    margin: 1.5em 0;
    line-height: 1.6;
    font-size: 0.875rem;
  }
  
  /* 코드 블록 안의 코드 (중복 스타일 제거) */
  pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
    border-radius: 0;
  }
  
  /* 코드 줄번호 (선택적) */
  .line-numbers {
    position: relative;
    padding-left: 3.5em;
    counter-reset: linenumber;
  }
  
  .line-numbers>code {
    position: relative;
    white-space: inherit;
  }
  
  .line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #3e3e42;
    user-select: none;
  }
  
  /* ========================================
     4. 티스토리 카테고리 스타일
     ======================================== */
  
  /*
    티스토리에서 자동 생성되는 카테고리 리스트를
    파일 트리 스타일로 변환
  
    티스토리는 여러 클래스명을 사용할 수 있으므로 범용 셀렉터 사용
  */
  #category,
  .tt_category,
  .category {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  #category li,
  .tt_category li,
  .category li {
    margin: 0;
  }
  
  /* 최상위 카테고리 및 전체보기 */
  #category>li>a,
  .tt_category>li>a,
  .category>li>a,
  .category-link {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    color: #d4d4d4;
    font-size: 0.875rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    white-space: normal;
    overflow-wrap: break-word;
  }
  
  #category>li>a:hover,
  .tt_category>li>a:hover,
  .category>li>a:hover,
  .category-link:hover {
    background-color: #3e3e42;
    text-decoration: none;
  }
  
  /* 상위 카테고리 들여쓰기 */
  #category ul,
  .tt_category ul,
  .category ul {
    list-style: none !important;
    padding-left: 25px !important;
    margin-top: 0.25rem;
    margin-left: 0 !important;
  }
  
  #category ul li a:hover,
  .tt_category ul li a:hover,
  .category ul li a:hover {
    background-color: #3e3e42;
    color: #d4d4d4;
    text-decoration: none;
  }
  
  /* 카테고리 글 개수 */
  #category .cnt,
  .tt_category .cnt,
  .category .cnt,
  .link_item .cnt,
  .link_sub_item .cnt {
    display: inline !important;
    /* 강제 표시 */
    margin-left: auto;
    font-size: 0.75rem;
    color: #6a9955 !important;
    font-weight: 500;
    flex-shrink: 0;
    /* 크기 고정 (줄바꿈 방지) */
    white-space: nowrap;
    /* 줄바꿈 방지 */
  }
  
  /* 3단계 이상 깊은 하위 카테고리 (BookClub 스타일) */
  #category ul ul,
  .tt_category ul ul,
  .category ul ul {
    padding-left: 0 !important;
    margin-left: 0;
  }
  
  #category ul ul ul,
  .tt_category ul ul ul,
  .category ul ul ul {
    padding-left: 0 !important;
    margin-left: 0;
  }
  
  /* 티스토리 자동 생성 "전체보기" 링크 숨김 (독립적으로 추가했으므로) */
  .tt_category .link_tit,
  .category .link_tit {
    display: none !important;
  }
  
  /* 카테고리 토글 화살표 (모든 레벨) */
  .tt_category a,
  .category a {
    position: relative;
    cursor: pointer;
  }
  
  /*카테고리 열고 닫기 */
  .tt_category a.has-children::before,
  .category a.has-children::before {
    content: '>';
    position: absolute;
    left: -0.5rem;
    /* Cursor 스타일에 맞춰 조정 */
    font-size: 0.75rem;
    color: #858585;
    transition: transform 0.2s;
    font-weight: normal;
  }
  
  .tt_category a.has-children:not(.collapsed)::before,
  .category a.has-children:not(.collapsed)::before {
    transform: rotate(90deg);
  }
  
  /* 접힌 하위 카테고리 숨기기 (모든 레벨) */
  .tt_category ul.collapsed,
  .category ul.collapsed {
    display: none;
  }
  
  /* 티스토리 자동 생성 클래스 (link_item, link_sub_item) */
  .tt_category a.link_item,
  .category a.link_item {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    color: #9d9d9d;
    left: -0.5rem;
    /* Cursor 스타일에 맞춰 조정 */
    font-size: 0.8125rem;
    border-radius: 4px;
    transition: all 0.2s;
  }
  
  /* 더 강력한 선택자로 link_sub_item 스타일 적용 */
  a.link_sub_item,
  .tt_category a.link_sub_item,
  .category a.link_sub_item,
  ul.sub_category_list a.link_sub_item,
  .sub_category_list a.link_sub_item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-top: 0.25rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.5rem !important;
    color: #858585 !important;
    font-size: 0.8125rem !important;
    border-radius: 4px !important;
    transition: all 0.2s !important;
  }
  
  /* ========================================
     5. 티스토리 최근 글 스타일
     ======================================== */
  
  /*
    최근 글 리스트를 파일 리스트처럼 표시
  */
  #recent_article {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  #recent_article li {
    margin-bottom: 0.5rem;
  }
  
  #recent_article a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    color: #d4d4d4;
    font-size: 0.8125rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    text-decoration: none;
  }
  
  #recent_article a:hover {
    background-color: #3e3e42;
  }
  
  /* 파일 아이콘 */
  #recent_article a::before {
    content: '📄';
    font-size: 0.875rem;
    flex-shrink: 0;
  }
  
  /* 글 제목이 너무 길 때 말줄임 */
  #recent_article a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* ========================================
     6. 댓글 스타일
     ======================================== */
  
  /*
    티스토리 기본 댓글 시스템 스타일 조정
  */
  .guestbook {
    margin-top: 2rem;
  }
  
  .guestbook .comment {
    background: #2d2d30;
    border: 1px solid #3e3e42;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .guestbook .comment .author {
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
  }
  
  .guestbook .comment .date {
    font-size: 0.75rem;
    color: #9d9d9d;
    margin-left: 0.5rem;
  }
  
  .guestbook .comment .content {
    color: #FFFFFF;
    line-height: 1.6;
  }
  
  /* 댓글 입력 폼 */
  .guestbook textarea,
  .guestbook input[type="text"],
  .guestbook input[type="password"] {
    width: 100%;
    background: #1e1e1e;
    border: 1px solid #3e3e42;
    border-radius: 4px;
    padding: 0.75rem;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.875rem;
  }
  
  .guestbook textarea:focus,
  .guestbook input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
  }
  
  .guestbook button {
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  
  .guestbook button:hover {
    opacity: 0.9;
  }
  
  /* ========================================
     7. 이미지 스타일
     ======================================== */
  
  /*
    본문 이미지 반응형 처리
  */
  .article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
    border: 1px solid #3e3e42;
  }
  
  /*
    이미지 지연 로딩
    loading="lazy" 속성이 추가된 이미지는
    뷰포트에 들어올 때 로드됨
  */
  img.lazy {
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  img.lazy.loaded {
    opacity: 1;
  }
  
  /* 이미지 캡션 */
  .article-content figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: #9d9d9d;
    margin-top: 0.5rem;
    font-style: italic;
  }
  
  /* ========================================
     8. 유틸리티 클래스
     ======================================== */
  
  /*
    Tailwind로 처리하기 어려운 유틸리티들
  */
  
  /* 텍스트 말줄임 (3줄) */
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 프로즈 스타일 (글 본문용) */
  .prose {
    max-width: 65ch;
  }
  
  .prose-invert {
    color: #d4d4d4;
  }
  
  /* Prose 제목 크기 및 스타일 재정의 (Cursor AI 테마) */
  .prose h1,
  .prose-invert h1 {
    font-size: 2.25rem !important;
    /* 36px */
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-top: 2em !important;
    margin-bottom: 1.5em !important;
    line-height: 1.2;
  }
  
  .prose h2,
  .prose-invert h2 {
    font-size: 1.75rem !important;
    /* 28px */
    color: #61afef;
    /* Light Blue (Code Highlight) */
    font-weight: 600;
    margin-top: 2em !important;
    margin-bottom: 1em !important;
  
    /* Cursor 스타일: 왼쪽 수직 바 */
    border-left: 4px solid #3794ff;
    /* Cursor Blue */
    padding-left: 0.8rem;
    line-height: 1.3;
  }
  
  .prose h3,
  .prose-invert h3 {
    font-size: 1.4rem !important;
    /* 22.4px */
    color: #9cdcfe;
    /* Lighter Blue */
    font-weight: 600;
    margin-top: 1.75em !important;
    margin-bottom: 1em !important;
  
    /* 아이콘 느낌의 접두사 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* H3 앞에 샵(#) 기호 추가 (CSS 가상 요소) */
  .prose h3::before,
  .prose-invert h3::before {
    content: '#';
    color: #569cd6;
    /* Darker Blue */
    font-weight: 400;
    opacity: 0.8;
  }
  
  .prose h4,
  .prose-invert h4 {
    font-size: 1.15rem !important;
    /* 18.4px */
    color: #dcdcaa;
    /* Light Yellow/Green (Function color) */
    font-weight: 600;
    margin-top: 1.5em !important;
    margin-bottom: 1em !important;
  }
  
  .prose-invert a {
    color: var(--color-accent);
  }
  
  .prose-invert strong {
    color: #f0f0f0;
  }
  
  /* Prose 인용 블록 스타일 재정의 */
  .prose blockquote,
  .prose-invert blockquote {
    margin: 1.5em 0 !important;
    padding: 0.875rem 1.25rem !important;
    border-left: 4px solid var(--color-accent) !important;
    background-color: rgba(45, 45, 48, 0.5) !important;
    color: #a8a8a8 !important;
    /* 밝은 회색 */
    border-radius: 4px !important;
    font-size: 0.9375rem !important;
    font-style: normal !important;
    text-align: left !important;
    /* 좌측 정렬 */
  }
  
  /* Prose 인용 블록 자동 텍스트 제거 */
  .prose blockquote::before,
  .prose blockquote::after,
  .prose-invert blockquote::before,
  .prose-invert blockquote::after {
    content: none !important;
  }
  
  /* 인용 블록 내 볼드 */
  .prose blockquote strong,
  .prose blockquote b,
  .prose-invert blockquote strong,
  .prose-invert blockquote b {
    color: #e0e0e0 !important;
  }
  
  /* 인용 블록 내 링크 */
  .prose blockquote a,
  .prose-invert blockquote a {
    color: var(--color-accent) !important;
  }
  
  /* 인용 블록 내 코드 */
  .prose blockquote code,
  .prose-invert blockquote code {
    background: rgba(30, 30, 30, 0.6) !important;
    color: #ce9178 !important;
  }
  
  /* 테이블 스타일 */
  .prose-invert table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
  }
  
  .prose-invert th,
  .prose-invert td {
    border: 1px solid #3e3e42;
    padding: 0.75rem;
    text-align: left;
  }
  
  .prose-invert th {
    background: #2d2d30;
    font-weight: 600;
  }
  
  .prose-invert tr:nth-child(even) {
    background: #252526;
  }
  
  /* 수평선 */
  .prose-invert hr {
    border: none;
    border-top: 1px solid #3e3e42;
    margin: 2rem 0;
  }
  
  /* 리스트 스타일 */
  .prose-invert ul {
    list-style: none;
    /* 기본 마커 제거 */
    padding-left: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .prose-invert ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .prose-invert li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
  }
  
  /* ul 직속 자식 li에 ○ 마커 추가 */
  .prose-invert ul>li {
    position: relative;
    padding-left: 0.5rem;
  }
  
  .prose-invert ul>li::before {
    content: '○';
    position: absolute;
    left: -1rem;
    top: 0.05em;
    color: #9ca3af;
    /* gray-400 */
    font-weight: 400;
    font-size: 0.875rem;
    line-height: inherit;
  }
  
  /* 중첩 리스트 (1단계) */
  .prose-invert ul ul>li::before {
    content: '▫';
    /* 작은 사각형 */
    font-size: 0.75rem;
  }
  
  /* 중첩 리스트 (2단계 이상) */
  .prose-invert ul ul ul>li::before {
    content: '○';
    font-size: 0.75rem;
    opacity: 0.8;
  }
  
  /* 체크박스 리스트 예외 처리 */
  .prose-invert ul li:has(input[type="checkbox"])::before {
    content: none;
  }
  
  .prose-invert ul li:has(input[type="checkbox"]) {
    padding-left: 0;
  }
  
  .prose-invert input[type="checkbox"] {
    margin-right: 0.5rem;
  }
  
  /* ========================================
     9. 독립 스크롤 (사이드바 + 메인)
     ======================================== */
  
  /*
    데스크톱에서 사이드바를 고정하고 독립 스크롤 구현
  */
  @media (min-width: 768px) {
  
    /* 사이드바 고정 및 독립 스크롤 */
    #sidebar {
      position: fixed !important;
      top: 3rem;
      /* header 높이 (48px) */
      left: 0;
      bottom: 4rem;
      /* footer 높이만큼 여백 */
      width: 18.75rem;
      /* 300px */
      overflow-y: auto !important;
      transform: translateX(0) !important;
    }
  
    /* 메인 콘텐츠에 왼쪽 여백 및 하단 여백 추가 */
    main {
      margin-left: 18.75rem;
      /* 300px */
      padding-bottom: 5rem;
      /* footer 높이보다 약간 더 */
    }
  }
  
  /* ========================================
     10. 반응형 조정
     ======================================== */
  
  /*
    모바일 (768px 이하)
  */
  @media (max-width: 768px) {
  
    /* 제목 크기 축소 */
    h1 {
      font-size: 1.75rem;
    }
  
    /* 28px */
    h2 {
      font-size: 1.375rem;
    }
  
    /* 22px */
    h3 {
      font-size: 1.125rem;
    }
  
    /* 18px */
    h4 {
      font-size: 1rem;
    }
  
    /* 16px */
  
    /* 코드 블록 패딩 축소 */
    pre {
      padding: 1rem;
      font-size: 0.8125rem;
    }
  
    /* 이미지 여백 축소 */
    .article-content img {
      margin: 1rem 0;
    }
  
    /* 메인 콘텐츠 하단 여백 (footer 고정 대응) */
    main {
      padding-bottom: 5rem;
    }
  }
  
  /*
    태블릿 (768px ~ 1024px)
  */
  @media (min-width: 768px) and (max-width: 1024px) {
  
    /* 사이드바 너비 조정 */
    #sidebar {
      width: 12.5rem !important;
      /* 200px */
    }
  
    /* 메인 콘텐츠 여백도 조정 */
    main {
      margin-left: 12.5rem !important;
      /* 200px */
      padding-bottom: 5rem !important;
      /* footer 높이보다 약간 더 */
    }
  }
  
  /* ========================================
     11. 인쇄 스타일
     ======================================== */
  
  /*
    글을 인쇄할 때 최적화
  */
  @media print {
  
    /* 사이드바, 헤더, 푸터 숨김 */
    header,
    aside,
    footer,
    #sidebar,
    #theme-toggle,
    #mobile-menu-btn,
    #search-input {
      display: none !important;
    }
  
    /* 본문만 표시 */
    body {
      background: white;
      color: black;
    }
  
    /* 링크 URL 표시 */
    a::after {
      content: " (" attr(href) ")";
      font-size: 0.8em;
    }
  
    /* 페이지 여백 */
    @page {
      margin: 2cm;
    }
  }
  
  /* ========================================
     12. 애니메이션
     ======================================== */
  
  /*
    페이드 인 애니메이션
  */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
  }
  
  /*
    스켈레톤 로딩 애니메이션
  */
  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
  
    100% {
      background-position: 1000px 0;
    }
  }
  
  .skeleton {
    background: linear-gradient(to right, #252526 4%, #2d2d30 25%, #252526 36%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
  }
  
  /* ========================================
     끝
     ======================================== */
  
  /* 티스토리 자동 생성 요소 숨기기 */
  .tt_vox_namecard,
  .tt_box_namecard {
    display: none !important;
  }
  
  /* 댓글 관련 요소들의 폰트 색상을 흰색으로 변경 */
  .tt-box-meta,
  .tt-box-meta *,
  .tt_desc,
  .tt_desc *,
  .tt-cmt,
  .tt-cmt *,
  .tt_txt_user,
  .tt_txt_user *,
  .guestbook label,
  .guestbook input[type="text"],
  .guestbook input[type="password"],
  .guestbook textarea,
  .guestbook input::placeholder,
  .guestbook textarea::placeholder {
    color: #FFFFFF !important;
  }
  
  /* 입력 필드의 실제 입력값도 흰색으로 */
  .guestbook input[type="text"]:not(:placeholder-shown),
  .guestbook input[type="password"]:not(:placeholder-shown),
  .guestbook textarea:not(:placeholder-shown) {
    color: #FFFFFF !important;
  }
  
  /* 댓글 등록 버튼 비활성화 상태 스타일 */
  .tt-btn_register:disabled,
  .tt-btn_register[disabled],
  button.tt-btn_register:disabled,
  button.tt-btn_register[disabled] {
    background-color: #3a3a3a !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
  }
  
  /* ===== CODE: highlight.js (GitHub Dark) ===== */
  .hljs, pre code.hljs {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
  }
  .hljs * { background: transparent !important; }
  
  .hljs-comment { color: #6e7681 !important; opacity: 0.9 !important; }
  .hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #ff7b72 !important; }
  .hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-built_in { color: #d2a8ff !important; }
  .hljs-string { color: #a5d6ff !important; }
  .hljs-number { color: #79c0ff !important; }
  .hljs-attr, .hljs-name, .hljs-variable { color: #ffa657 !important; }
  
  /* ===== TABLE: dark theme ===== */
  .article-content table, .prose table, .prose-invert table, table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
  }
  
  .article-content th, .article-content td,
  .prose th, .prose td,
  .prose-invert th, .prose-invert td,
  th, td {
    border: 1px solid #3e3e42 !important;
    padding: 10px 12px !important;
    color: #d4d4d4 !important;
    background: #1e1e1e !important;
  }
  
  .article-content thead th,
  .prose thead th,
  .prose-invert thead th,
  thead th {
    background: #252526 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }
  
  .article-content tbody tr:nth-child(even) td,
  .prose tbody tr:nth-child(even) td,
  .prose-invert tbody tr:nth-child(even) td {
    background: #202124 !important;
  }
  
  /* ===== TABLE highlight: tr background only (final) =====
  .article-content tr[style*="background-color"] td,
  .prose tr[style*="background-color"] td,
  .prose-invert tr[style*="background-color"] td {
    background: transparent !important;
  } */
  
  /* yellow highlight -> dark yellow */
  .article-content tr[style*="#ffffcc"],
  .article-content tr[style*="#fff7cc"],
  .prose tr[style*="#ffffcc"],
  .prose tr[style*="#fff7cc"],
  .prose-invert tr[style*="#ffffcc"],
  .prose-invert tr[style*="#fff7cc"] {
    background: #2b2a14 !important;
  }
  
  
  /* 기본: tr background는 td가 가려서 안 보이니 td에 칠한다 */
  .article-content tr[style*="#fff7cc"] td,
  .article-content tr[style*="#ffffcc"] td,
  .prose tr[style*="#fff7cc"] td,
  .prose tr[style*="#ffffcc"] td,
  .prose-invert tr[style*="#fff7cc"] td,
  .prose-invert tr[style*="#ffffcc"] td {
    background: #2b2a14 !important;   /* 다크 옐로우 */
  }
  
  /* === FORCE highlight rows === */
  .article-content table tr.hl-yl > td,
  .prose table tr.hl-yl > td,
  .prose-invert table tr.hl-yl > td,
  table tr.hl-yl > td {
    background-color: #2b2a14 !important; /* 다크 옐로 */
  }
  
/* 검색 페이지가 아닐 때 검색 결과 섹션 숨김 */
body:not(#tt-body-search) #search-results-section {
  display: none !important;
}