/* 반응형 스타일 */

/* 태블릿 (768px - 1024px) */
@media (max-width: 1024px) {
    .navbar-content {
        gap: var(--spacing-md);
    }
    
    .document-container {
        gap: var(--spacing-lg);
    }
    
    /* 문서 정보 섹션은 반응형에서도 전체 너비 유지 */
    
    .compare-header {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: stretch;
    }
    
    .compare-modes {
        align-items: center;
    }
    
    .version-selectors {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .changes-sidebar {
        width: 250px;
    }
    
    .statistics-bar {
        /*flex-direction: column;*/
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    
    .stat-item.version-count {
        /*align-self: flex-end;*/
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    :root {
        --font-size-base: 14px;
        --font-size-lg: 16px;
        --font-size-xl: 18px;
        --font-size-xxl: 20px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
        --spacing-xxl: 32px;
        --header-height: auto;
    }
    
    /* 헤더 */
    .navbar {
        flex-direction: column;
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
        min-height: auto;
    }
    
    .navbar-upper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-md);
    }
    
    .navbar-brand {
        font-size: var(--font-size-base);
    }
    
    .logo {
       /* height: 32px;*/
    }
    
    .navbar-content {
        flex-direction: row;
        gap: var(--spacing-md);
        width: 100%;
        margin-left: 0;
        justify-content: space-between; /* 모바일에서도 양쪽 정렬 */
    }
    
    .document-info {
        margin-left: 0; /* 모바일에서 들여쓰기 제거 */
    }
    
    .version-selector {
        justify-content: flex-end; /* 모바일에서도 오른쪽에 위치 */
    }
    
    .version-dropdown {
        /*min-width: 200px;*/
		font-size: var(--font-size-xs);
    }
    
    .action-buttons {
        justify-content: flex-end; /* 오른쪽 정렬 */
        flex-wrap: wrap;
    }
    
    /* 메인 컨텐츠 */
    .main-content {
        padding: var(--spacing-md);
    }
    
    .document-container {
        flex-direction: row;
        gap: var(--spacing-lg);
    }
    
    /* 문서 정보 섹션은 markdown-content 내부에 위치 (모바일 최적화) */
    .document-info-section {
        display: block; /* 모바일에서는 전체 너비 사용 */
        min-width: auto; /* 최소 너비 제한 해제 */
        max-width: 100%; /* 모바일에서는 전체 너비까지 허용 */
        margin-bottom: var(--spacing-lg);
    }
    
    .document-info-content {
        padding: var(--spacing-sm);
    }
    
    .document-info-content h3 {
        margin-bottom: var(--spacing-sm);
        font-size: var(--font-size-base);
        color: var(--text-color);
    }
    
    /* 모바일에서 목차 컨테이너 조정 */
    #table-of-contents {
        /*max-height: 300px;*/
        padding: var(--spacing-sm);
        border: none;
        background-color: transparent;
    }
    
    /* 모바일에서 목차 들여쓰기 조정 (더 컴팩트하게) *//*
    #table-of-contents .toc-h2 a {
        margin-left: var(--spacing-sm);
        font-size: calc(var(--font-size-sm) - 1px);
    }
    
    #table-of-contents .toc-h3 a {
        margin-left: calc(var(--spacing-sm) * 2);
        font-size: calc(var(--font-size-sm) - 1px);
    }
    
    #table-of-contents .toc-h4 a {
        margin-left: calc(var(--spacing-sm) * 3);
        font-size: calc(var(--font-size-sm) - 2px);
    }
    
    #table-of-contents .toc-h5 a {
        margin-left: calc(var(--spacing-sm) * 4);
        font-size: calc(var(--font-size-sm) - 2px);
    }
    
    #table-of-contents .toc-h6 a {
        margin-left: calc(var(--spacing-sm) * 5);
        font-size: calc(var(--font-size-sm) - 2px);
    }
    */
    /* 모바일에서 목차 링크 패딩 축소 */
    #table-of-contents a {
        padding: calc(var(--spacing-xs) / 2) var(--spacing-xs);
        margin-bottom: 1px;
    }
    
    .document-content {
        order: 2;
    }
    
    /* 비교 페이지 */
    .compare-header {
        text-align: center;
    }
    
    .compare-versions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .version-separator {
        transform: rotate(90deg);
        font-size: var(--font-size-base);
    }
    
    .mode-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .mode-btn {
        width: 100%;
    }
    
    /* Diff 뷰 */
    .side-by-side-diff {
        overflow-x: auto;
    }
    
    .diff-line {
        /*min-width: 600px;*/ /* 최소 너비 보장 */
    }
    
    .diff-column {
        min-width: 280px;
    }
    
    .changes-sidebar {
        width: 100%;
        margin-left: 0;
        margin-top: var(--spacing-lg);
        position: static;
        max-height: 300px;
    }
    
    /* 버전 목록 */
    .revisions-header .header-content {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: center;
        text-align: center;
    }
    
    .statistics-bar {
        /*flex-direction: column;*/
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .stat-item.version-count {
        /*align-self: flex-end;*/
    }
    
    .versions-list {
        padding: var(--spacing-sm);
    }
    
    .version-line {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
    }
    
    .badge-placeholder {
        display: none;
    }
    
    .version-date {
        min-width: auto;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .btn-sm {
        padding: var(--spacing-xs);
        font-size: var(--font-size-sm);
    }
    
    /* 비교 도구 */
    .version-selectors {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .selector-group select {
        padding: var(--spacing-sm);
        font-size: var(--font-size-base);
    }
    
    
    /* 푸터 */
    .footer-content {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .document-stats {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    /* 마크다운 콘텐츠 */
    .markdown-content {
        /*font-size: var(--font-size-sm);*/
    }
    
    .markdown-content pre {
        padding: var(--spacing-sm);
        padding-bottom: calc(var(--spacing-sm) + 40px); /* 복사 버튼을 위한 추가 공간 유지 */
        overflow-x: visible; /* pre 태그 자체는 스크롤하지 않음 */
        font-size: 12px;
    }
    
    .markdown-content table {
        font-size: var(--font-size-sm);
        min-width: 100%;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }
    
    .markdown-content th,
    .markdown-content td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    /* 에러 페이지 */
    .error-container {
        padding: var(--spacing-lg);
    }
    
    .error-icon {
        font-size: 48px;
    }
    
    .nav-buttons {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .debug-details {
        font-size: 12px;
        padding: var(--spacing-sm);
    }
}

/* 소형 모바일 (480px 이하) */
@media (max-width: 480px) {
    :root {/*
        --font-size-base: 13px;
        --font-size-sm: 12px;
        --font-size-lg: 15px;
        --font-size-xl: 17px;
        --font-size-xxl: 19px;
        --spacing-sm: 6px;
        --spacing-md: 10px;
        --spacing-lg: 14px;
        --spacing-xl: 20px;
        --spacing-xxl: 28px;*/
    }
    
    .navbar {
        padding: var(--spacing-lg);
    }
    
    .main-content {
        padding: var(--spacing-lg);
    }
    
    .document-header {
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
    }
    
    .document-summary {
        font-size: var(--font-size-base);
    }
    
    .version-badge {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    .btn-sm {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 11px;
    }
    
    .version-line {
        flex-wrap: wrap;
        gap: calc(var(--spacing-xs) / 2);
    }
    
    .version-reason {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        font-style: italic;
        margin-top: calc(var(--spacing-xs) / 2);
    }
    
    .diff-line {
        /*min-width: 500px;*/
    }
    
    .diff-column {
        min-width: 220px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .line-number {
        min-width: 40px;
        /*font-size: 11px;*/
    }
    
    /* 스택형 diff 모바일 최적화 */
    .stacked-diff .diff-line {
        margin-bottom: 0px;
    }
    
    .stacked-diff .line-number {
        min-width: 50px;
        width: 50px;
        /*font-size: 11px;*/
        padding: 4px;
    }
    
    .stacked-diff .line-content {
        padding: 4px 8px;
        font-size: var(--font-size-sm);
    }
    
    .stacked-diff .line-content pre {
        /*font-size: 12px;*/
        line-height: 1.3;
    }
    
    .compare-versions {
        gap: var(--spacing-xs);
    }
    
    .version-info {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .statistics-bar {
        padding: var(--spacing-sm);
    }
    
    .markdown-content pre {
        /*font-size: 11px;*/
        padding: var(--spacing-xs);
        padding-bottom: calc(var(--spacing-xs) + 40px); /* 복사 버튼을 위한 추가 공간 유지 */
        overflow-x: visible; /* pre 태그 자체는 스크롤하지 않음 */
    }
    
    .markdown-content code {
        /*font-size: 11px;*/
    }
    
    .markdown-content pre code {
        overflow-x: auto; /* 모바일에서도 code 태그에만 스크롤 적용 */
        white-space: pre;
    }
    
    /* 모바일에서 복사 버튼 크기 조정 */
    .copy-code-btn {
        /*font-size: 11px;*/
        padding: calc(var(--spacing-xs) / 2) var(--spacing-xs);
        min-width: 40px;
    }
}

/* 고해상도 디스플레이 */
/*
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}
*/
.logo {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
	transform: translateZ(0);
	backface-visibility:hidden;
}

/* 다크모드 지원 (추후 구현 시) */
@media (prefers-color-scheme: dark) {
    /* 다크모드 변수들을 여기에 정의 */
    /*
    :root {
        --text-color: #FFFFFF;
        --background-color: #121212;
        --background-light: #1E1E1E;
        --border-color: #333333;
    }
    */
}

/* 접근성 - 모션 줄이기 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 접근성 - 고대비 모드 */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-light: #000000;
        --shadow-light: rgba(0, 0, 0, 0.3);
        --shadow-medium: rgba(0, 0, 0, 0.4);
    }
}