/* 폰트 크기 조절 CSS 변수 시스템 */
:root {
    --base-font-size: 16px;
}

/* 마크다운 기본 텍스트 스타일 (Tailwind reset 복구) */
#question-text strong, #answer-text strong, #content-text strong,
#question-text b, #answer-text b, #content-text b,
.markdown-content strong, .markdown-content b {
    font-weight: 700 !important;
}

#question-text em, #answer-text em, #content-text em,
#question-text i, #answer-text i, #content-text i,
.markdown-content em, .markdown-content i {
    font-style: italic !important;
}

#question-text code, #answer-text code, #content-text code,
.markdown-content code {
    background-color: #f3f4f6 !important;
    padding: 0.1em 0.3em !important;
    border-radius: 3px !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.9em !important;
}

/* 텍스트 컨테이너에 기본 폰트 크기 적용 */
#question-text, #answer-text, #content-text {
    font-size: var(--base-font-size) !important;
}

/* 마크다운 헤딩을 상대 크기로 변환 (em 단위) - 높은 우선순위 */
div#question-text h1, div#answer-text h1, div#content-text h1 {
    font-size: 2em !important;
    margin-top: 0.67em !important;
    margin-bottom: 0.67em !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}
div#question-text h2, div#answer-text h2, div#content-text h2 {
    font-size: 1.5em !important;
    margin-top: 0.83em !important;
    margin-bottom: 0.83em !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}
div#question-text h3, div#answer-text h3, div#content-text h3 {
    font-size: 1.17em !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}
div#question-text h4, div#answer-text h4, div#content-text h4 {
    font-size: 1em !important;
    margin-top: 1.33em !important;
    margin-bottom: 1.33em !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}
div#question-text h5, div#answer-text h5, div#content-text h5 {
    font-size: 0.83em !important;
    margin-top: 1.67em !important;
    margin-bottom: 1.67em !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}
div#question-text h6, div#answer-text h6, div#content-text h6 {
    font-size: 0.67em !important;
    margin-top: 2.33em !important;
    margin-bottom: 2.33em !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}

/* KaTeX 수식도 상대 크기 적용 */
#question-text .katex, #answer-text .katex, #content-text .katex {
    font-size: 1em !important;
}

/* KaTeX display 수식 왼쪽 정렬 + 마크다운 리스트 스타일 (Tailwind + 강제 적용) */
.katex-display {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important;
}
.katex-display > .katex {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
/* 마크다운 리스트 스타일 - 단계별 마커 */
#question-text ul, #answer-text ul, #content-text ul,
.bg-gray-50 ul, .markdown-content ul, #rendered-preview ul {
    margin-left: 1.2em !important;
    list-style: disc !important;
    padding-left: 0.5em !important;
}
#question-text ul ul, #answer-text ul ul, #content-text ul ul,
.bg-gray-50 ul ul, .markdown-content ul ul, #rendered-preview ul ul {
    list-style: circle !important;
}
#question-text ul ul ul, #answer-text ul ul ul, #content-text ul ul ul,
.bg-gray-50 ul ul ul, .markdown-content ul ul ul, #rendered-preview ul ul ul {
    list-style: square !important;
}
#question-text ol, #answer-text ol, #content-text ol,
.bg-gray-50 ol, .markdown-content ol, #rendered-preview ol {
    margin-left: 1.2em !important;
    list-style: decimal !important;
    padding-left: 0.5em !important;
}
#question-text li, #answer-text li, #content-text li,
.bg-gray-50 li, .markdown-content li, #rendered-preview li {
    margin-bottom: 0.25em !important;
}
/* Tailwind CSS reset 무시하고 리스트 스타일 강제 적용 */
ul, ol {
    list-style: revert !important;
    margin-left: 1.2em !important;
    padding-left: 0.5em !important;
}
li {
    margin-bottom: 0.25em !important;
}

/* 마크다운 리스트(ul, ol) 좌측 여백 모바일에서 절반 이하로 줄이기 */
#question-text ul, #answer-text ul, #content-text ul,
#question-text ol, #answer-text ol, #content-text ol {
  margin-left: 1.2em;
  padding-left: 0.5em;
}
#question-text li, #answer-text li, #content-text li {
  margin-bottom: 0.25em;
}
@media (max-width: 640px) {
  #question-text ul, #answer-text ul, #content-text ul,
  #question-text ol, #answer-text ol, #content-text ol {
    margin-left: 0.3em;
    padding-left: 0.1em;
  }
}

/* ========== 마크다운 표(table) 스타일 - 구분선 명확화 ========== */
/* 표 기본 스타일 - 깔끔한 테두리와 여백 */
#question-text table, 
#answer-text table, 
#content-text table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 1em 0 !important;
    border: 2px solid #9ca3af !important;
    background-color: #ffffff !important;
}

/* 헤더(thead) 스타일 - 배경색으로 명확히 구분 */
#question-text th, 
#answer-text th, 
#content-text th {
    border: 1px solid #d1d5db !important;
    padding: 0.6em 0.8em !important;
    background-color: #e5e7eb !important;
    font-weight: 700 !important;
    color: #374151 !important;
}

/* 데이터 셀(td) 스타일 - 명확한 구분선 */
#question-text td, 
#answer-text td, 
#content-text td {
    border: 1px solid #d1d5db !important;
    padding: 0.5em 0.8em !important;
}

/* 스트라이프 효과 - 짝수 행 배경색으로 행 구분 명확화 */
#question-text tbody tr:nth-child(even),
#answer-text tbody tr:nth-child(even),
#content-text tbody tr:nth-child(even) {
    background-color: #f9fafb !important;
}

/* 호버 효과 - 마우스 오버 시 현재 행 강조 (데스크톱) */
@media (min-width: 768px) {
    #question-text tbody tr:hover,
    #answer-text tbody tr:hover,
    #content-text tbody tr:hover {
        background-color: #f3f4f6 !important;
        transition: background-color 0.15s ease !important;
    }
}

/* 모바일 최적화 - 작은 화면에서 패딩 축소 */
@media (max-width: 640px) {
    #question-text th, #answer-text th, #content-text th,
    #question-text td, #answer-text td, #content-text td {
        padding: 0.4em 0.5em !important;
        font-size: 0.9em !important;
    }
}
/* ========== 마크다운 표 스타일 끝 ========== */

/* doc-item 기본 툴팁 완전 비활성화 */
.doc-item {
    position: relative;
}
.doc-item[title]:hover::before,
.doc-item[title]:hover::after {
    display: none !important;
}
/* 전역 title 툴팁 비활성화 (doc-item 전용) */
.doc-item[title] {
    overflow: visible;
}
.doc-item[title]:hover {
    cursor: pointer;
}
/* 기본 브라우저 툴팁 스타일 재정의 */
.doc-item::before,
.doc-item::after {
    content: none !important;
    display: none !important;
}

/* 모든 브라우저에서 기본 select 보장 - 커스텀 모달 비활성화 */
.force-native-select {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
}

/* 크롬 모바일에서 커스텀 모달 비활성화 */
select.force-native-select::-webkit-clear-button,
select.force-native-select::-webkit-inner-spin-button,
select.force-native-select::-webkit-search-cancel-button,
select.force-native-select::-webkit-search-decoration {
    display: none !important;
}

/* select 요소가 기본 동작을 유지하도록 */
select.force-native-select:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* 크롬 모바일의 커스텀 UI 완전 차단 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select.force-native-select {
        -webkit-appearance: menulist !important;
        appearance: menulist !important;
    }
}

/* 모바일 터치 최적화 - 태그 추가 버튼 */
#add-tag-btn {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    cursor: pointer !important;
}

/* 모바일에서 터치 영역 확보 */
@media (max-width: 768px) {
    #add-tag-btn {
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    /* 태그 입력창 패딩 조정 (버튼 크기 증가로 인한) */
    #tag-input {
        padding-right: 56px !important;
    }
}

/* ========== 학습 평점 버튼 애니메이션 ========== */
/* 증가 애니메이션 (초록 섬광) */
@keyframes rating-increase {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* 감소 애니메이션 (빨간 섬광) */
@keyframes rating-decrease {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% { 
        transform: scale(0.9);
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* 길게 누르기 진행 표시 */
@keyframes long-press-progress {
    0% { 
        box-shadow: inset 0 0 0 0 rgba(59, 130, 246, 0.3);
    }
    100% { 
        box-shadow: inset 0 0 0 100px rgba(59, 130, 246, 0.3);
    }
}

/* 애니메이션 적용 클래스 */
.rating-increase-animation {
    animation: rating-increase 0.4s ease-out !important;
}

.rating-decrease-animation {
    animation: rating-decrease 0.4s ease-out !important;
}

.long-press-animation {
    animation: long-press-progress 3s linear !important;
}
/* ========== 학습 평점 애니메이션 끝 ========== */

/* ========== 문서 리스트 스크롤 영역 ========== */
/* 페이지 전체 레이아웃 - 뷰포트 기반 높이 제한 */
#cate {
    max-height: 100vh !important;
    overflow-y: auto !important;
}

/* 문서 리스트 박스 - 독립적인 스크롤 영역 */
#doc_list {
    max-height: 600px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    position: relative !important;
}

/* 문서 리스트 내부 컨테이너 - 체크박스를 위한 공간 확보 */
#doc_list .doc-item,
#doc_list .space-y-2 > div {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding-left: 0.5rem !important;
}

/* 체크박스 위치 고정 및 스타일 개선 */
.doc-checkbox {
    flex-shrink: 0 !important;
    margin-top: 0.25rem !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 모바일 환경에서는 더 작은 영역 */
@media (max-width: 768px) {
    #doc_list {
        max-height: 400px !important;
    }
}

/* PC 환경에서 큰 화면일 때 더 넓은 영역 */
@media (min-width: 1024px) {
    #doc_list {
        max-height: 700px !important;
    }
}

/* 스크롤바 스타일링 (WebKit 브라우저) - 드래그 가능하도록 개선 */
#doc_list::-webkit-scrollbar {
    width: 12px !important;
    background: transparent !important;
}

#doc_list::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 6px !important;
    margin: 4px 0 !important;
}

#doc_list::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 6px !important;
    border: 2px solid #f1f1f1 !important;
    min-height: 40px !important;
}

#doc_list::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

#doc_list::-webkit-scrollbar-thumb:active {
    background: #333 !important;
}

/* Firefox 스크롤바 스타일링 */
#doc_list {
    scrollbar-width: auto !important;
    scrollbar-color: #888 #f1f1f1 !important;
}

/* #cate 컨테이너의 스크롤바 스타일링 */
#cate::-webkit-scrollbar {
    width: 10px;
}

#cate::-webkit-scrollbar-track {
    background: #e5e7eb;
}

#cate::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 5px;
}

#cate::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}
/* ========== 문서 리스트 스크롤 영역 끝 ========== */

/* ========== 클릭 미리보기 모달 애니메이션 ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Prose 스타일 (마크다운 콘텐츠용) */
.prose {
    max-width: none !important;
}

.prose img {
    max-width: 100%;
    height: auto;
}

.prose pre {
    overflow-x: auto;
    background-color: #f3f4f6;
    padding: 1rem;
    border-radius: 0.5rem;
}

.prose code {
    background-color: #f3f4f6;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.prose pre code {
    background-color: transparent;
    padding: 0;
}
/* ========== 클릭 미리보기 모달 애니메이션 끝 ========== */