@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* ASR 브랜드 컬러 정의 */
    --color-terracotta: 192, 86, 77; /* #C0564D */
    --color-stone-50: 250, 249, 246;
    --color-stone-900: 28, 25, 23;    
  }

  .dark {
    --color-stone-50: 28, 25, 23;
    --color-stone-900: 250, 249, 246;
  }

  body {
    @apply bg-[rgb(var(--color-stone-50))] text-[rgb(var(--color-stone-900))] transition-colors duration-300;
    font-variant-numeric: tabular-nums;
  }
}

@layer components {
  /* 중복되는 UI 요소들을 클래스로 정의 (추후 HTML이 깔끔해짐) */
  .asr-nav-link {
    @apply text-stone-500 hover:text-terracotta transition-colors duration-200 font-medium;
  }
  
  .btn-terracotta {
    @apply bg-terracotta text-white px-6 py-3 rounded-full hover:bg-opacity-90 transition-all shadow-sm;
  }

  /* 프로그레스 바 스타일 */
  #scroll-progress {
    @apply fixed top-0 left-0 h-1 bg-terracotta z-[100] transition-all duration-150;
  }
}

/* index 특화 로직 */
/* 기본 스타일 및 폰트 크기 설정 */
body {
    background-color: #F5F2EB; 
    color: #2D2A26; 
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}
h1, h2, h3, .serif {
    font-family: 'Noto Serif KR', serif;
}
.text-accent { color: '#C17F59'; } 
.border-accent { border-color: #C17F59; }
.bg-accent { background-color: #C17F59; }

/* 본문 글씨색 진하게 수정: 기본 모드에서 텍스트 가독성 향상 */
.article-text-element:not(h1):not(h2):not(h3):not(h4) {
        color: #2D2A26 !important; 
}

/* 다크 모드 스타일 */
.dark body {
    background-color: #1a1a1a; 
    color: #e0e0e0;
}
.dark .bg-\[\#F5F2EB\] {
    background-color: #2a2a2a; 
}
.dark .bg-white, 
.dark .bg-slate-100,
.dark .bg-stone-50 {
    background-color: #242424;
}
.dark .text-dark-text, .dark h1, .dark h2, .dark h3, .dark .text-stone-900 {
        color: #f0f0f0;
}
.dark .lang-link {
    color: #e0e0e0 !important; /* 다크 모드에서 언어 링크를 밝게 유지 */
}

.dark .lang-link:hover {
    background-color: #404040 !important; /* 호버 시 배경색 변경 */
    color: #C17F59 !important; /* 브랜드 컬러로 강조 */
}

/* 다크 모드일 때 p, li 등의 본문 텍스트 색상 */
.dark .article-text-element:not(h1):not(h2):not(h3):not(h4) {
        color: #e0e0e0 !important;
}
.dark .border, .dark .border-stone-200 {
    border-color: #404040 !important;
}
.dark .text-stone-500, .dark .text-stone-600, .dark .text-slate-600 {
    color: #a0a0a0 !important;
}

/* --- GNB 요소: 글씨 크기 및 레이아웃 고정 (px 단위 사용) --- */
.gnb-title { font-size: 20px !important; } 
.gnb-menu-text { font-size: 14px !important; }
.gnb-menu-text span { font-size: 14px !important; }

.font-resize-btn {
    font-size: 24px !important; 
    width: 32px !important; 
    height: 32px !important; 
    padding: 0 !important; 
    margin: 0 8px 0 0 !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #C17F59;
    color: #C17F59;
    background-color: #fff;
    border-radius: 0.5rem;
    transition: all 0.15s;
    line-height: 1; 
}
.font-resize-btn:hover {
    background-color: #C17F59;
    color: #F5F2EB;
}

/* 다크 모드에서 버튼 스타일 반전 */
.dark .font-resize-btn {
    background-color: #2D2A26; 
    color: #C17F59;
    border-color: #C17F59;
}
.dark .font-resize-btn:hover {
    background-color: #C17F59;
    color: #2D2A26;
}

/* --- 본문 레이아웃 요소 고정 (px 단위 사용) --- */
/* ✅ 1. 타이틀바 레이아웃 정렬 개선 (max-w-7xl에 맞춤) */
nav .container {
    max-width: 80rem; /* max-w-7xl에 해당하는 1280px */
}

main.grid {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        gap: 32px !important;
        max-width: 80rem !important; /* 본문 영역도 max-w-7xl로 명시 */
        margin-left: auto !important;
        margin-right: auto !important;
}

aside {
    padding-left: 1rem; /* left padding for consistency with main content area on desktop */
}
section.lg\:col-span-3 {
    padding-right: 1rem; /* right padding for consistency with main content area on desktop */
}
@media (max-width: 1023px) {
    aside, section.lg\:col-span-3 {
        padding-left: 0;
        padding-right: 0;
    }
}
/* ---------------------------------------------------- */


.toc-box {
    padding: 24px !important; 
}
.toc-link {
    padding-top: 8px !important;    
    padding-bottom: 8px !important; 
    padding-left: 12px !important;  
    padding-right: 12px !important; 
}
.space-y-6 > * + * {
    margin-top: 24px !important; 
}

.document-content {
    padding: 24px !important; 
}
@media (min-width: 768px) {
    .document-content {
        padding: 40px !important; 
    }
}
.chapter-header-button {
    padding: 24px !important; 
}
.abstract-inner-box {
    padding: 24px !important;
}

/* --- 부록 박스 넘침 해결 (줄바꿈 강제 및 폴백) --- */
.chapter-content {
        overflow-x: auto;
}

/* 원본 pre 태그 스타일을 대체하는 부록 텍스트 컨테이너 스타일 */
.appendix-text-container {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.6;
    color: #2D2A26 !important;
    padding: 0;
    margin-top: 0 !important;
}

/* ✅ 8. 부록 메인 제목 디자인 변경 (고딕, 볼드, 28px, 테라코타) */
.appendix-main-title {
        font-family: 'Pretendard', sans-serif !important; 
        font-weight: 700 !important; 
        font-size: 28px !important; 
        margin-top: 2rem !important;
        margin-bottom: 1rem !important;
        color: #C17F59 !important; /* Terracotta Color */
        line-height: 1.2 !important; 
}
.dark .appendix-main-title {
        color: #C17F59 !important; /* Dark mode에서도 색상 유지 */
}

/* ✅ 부록 소제목 (h3) 디자인 변경 (고딕, 볼드, 26px) */
.appendix-text-container h3 {
        font-family: 'Pretendard', sans-serif !important; 
        font-weight: 700 !important; 
        font-size: 26px !important; 
        margin-top: 2rem !important;
        margin-bottom: 1rem !important;
        color: #2D2A26 !important;
        line-height: 1.2 !important; 
}
.dark .appendix-text-container h3 {
        color: #f0f0f0 !important;
}

/* ✅ 4. 본문 리스트 (ul > li)의 글머리 기호 크기 조절 (0.75em 적용) */
.document-content ul.list-disc {
    list-style-type: none; /* 기본 마커 제거 */
    padding-left: 1.5em; /* 들여쓰기 유지 */
}
.document-content ul.list-disc > li {
    position: relative;
}
.document-content ul.list-disc > li::before {
    content: '·'; 
    position: absolute;
    left: -1.5em;
    top: 0; 
    color: #C17F59; /* Accent color */
    font-size: 0.75em !important; /* 작은 점으로 조정 (약 12px) - !important 추가 */
    line-height: 1.6;
    font-weight: 700;
}

/* ✅ 부록 참고자료 간격 (참고 자료 목록) */
.appendix-references li {
    margin-bottom: 1rem !important; /* 항목 간 간격 띄우기 */
    line-height: 1.4;
}

/* 기존 테이블 스타일 유지 */
.uniform-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 2rem 0;
    text-align: center;
    font-size: 0.9rem;
}
.uniform-table th, .uniform-table td {
    width: 25%;
    border: 1px solid #ddd;
    padding: 12px 8px;
    vertical-align: middle;
    line-height: 1.4;
    font-family: 'Pretendard', sans-serif;
}

/* ✅ 7. Table1, Table2의 첫 번째 행 배경 적용 (기존 코드 수정) */
.uniform-table thead th {
    background-color: #efefef !important; /* 약간 어두운 톤의 배경 */
    font-weight: 600;
    color: #2D2A26; /* 라이트 모드 텍스트 색상 */
}
.dark .uniform-table thead th {
     background-color: #383838 !important; 
     color: #f0f0f0; /* 다크 모드 텍스트 색상 (이미 정의되어 있으나 위 코드와 통일) */
}

/* ✅ 다크 모드에서 테이블 셀(td) 및 헤더(th)의 텍스트 색상 수정 */
.dark .uniform-table th, 
.dark .uniform-table td {
     color: #f0f0f0 !important; /* 다크 모드에서 밝은 색상으로 강제 지정 */
}
        
/* --- 본문 콘텐츠 폰트 크기: JS가 인라인 스타일로 !important를 직접 적용합니다. --- */
.document-content p, .document-content li, .document-content table td,
.document-content h1, .document-content h2, .document-content h3, .document-content h4 {
        line-height: inherit !important; 
        transition: font-size 0.2s;
}

/* 챕터 아이콘 접힌 상태 CSS */
.chapter-icon-rotate {
        transform: rotate(0deg); 
        transition: transform 0.3s ease;
}
.rotate-180 {
        transform: rotate(180deg) !important;
}

/* 기타 테이블 스타일 유지 */
.analysis-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.analysis-table th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
    padding: 12px 15px;
    text-align: center;
    border: 1px solid #ddd;
    width: 25%;
}
.analysis-table td {
    padding: 10px 15px;
    text-align: left;
    border: 1px solid #ddd;
    width: 25%;
    vertical-align: top;
}
.analysis-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.analysis-table tr:nth-child(2) td {
    border-top: 2px solid #aaa;
}

/* 다크모드 저자 프로필 가독성 고정 */
.dark #author-profile-content,
.dark #author-profile-content p,
.dark #author-profile-content span,
.dark #author-profile-content li {
    color: #f0f0f0 !important;
}

/* GNB 아래 메뉴 스타일 추가 */
.sub-menu-bar {
    background-color: #e8e2d6;
    border-bottom: 1px solid #d1c9b8;
    padding: 0.75rem 0;
}

.sub-menu-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.sub-menu-nav {
    display: flex;
    gap: 2rem;
}

.sub-menu-link {
    color: #2D2A26;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.2s;
}

.sub-menu-link:hover {
    color: #C17F59;
}

.sub-menu-link.active {
    color: #C17F59;
}

.sub-menu-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #C17F59;
}

.dark .sub-menu-bar {
    background-color: #2a2a2a;
    border-bottom-color: #404040;
}

.dark .sub-menu-link {
    color: #e0e0e0;
}

.dark .sub-menu-link:hover {
    color: #C17F59;
}

.dark .sub-menu-link.active {
    color: #C17F59;
}

.dark .relative.group button {
    /* 배경이 어두우므로 글자는 밝은 색으로 강제 지정 */
    color: #f0f0f0 !important; 
    /* 테두리도 배경에 맞춰 적절히 어둡게 조정 */
    border-color: #4b5563 !important;
}

.dark .relative.group button i {
    /* 화살표 아이콘 색상도 함께 밝게 */
    color: #f0f0f0 !important;
}

/* asr-intro 특화 로직 */
.dialogue-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s cubic-bezier(0, 1, 0, 1);
}

.dialogue-content.expanded {
  max-height: 5000px; /* 대담 내용이 길 경우 대비 */
  transition: max-height 1s ease-in-out;
}

/* main.css 맨 하단 코드를 이걸로 교체 */
html.dark nav button.text-stone-800,
html.dark nav button.text-stone-800 i,
html.dark nav button.text-stone-800 span {
    color: #f5f4f0 !important;
    border-color: #57534e !important;
}

/* ===== GNB 고정 및 가시성 보장 ===== */
#nav-placeholder nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: #F5F2EB !important;
    border-bottom: 1px solid #d1c9b8 !important;
}

/* 다크 모드 대응도 함께 수정 */
.dark #nav-placeholder nav {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #404040 !important;
}

/* GNB 아래 서브 메뉴 바 */
nav > div:nth-child(2) {
    background-color: #E8E2D6 !important;
}

.dark nav > div:nth-child(2) {
    background-color: #2a2a2a !important;
}

/* ⚠️ 본문 여백 보정 (GNB + 서브메뉴 높이) */
body {
    padding-top: 140px !important; /* GNB(약 80px) + 서브메뉴(약 60px) */
    position: relative;
}

/* 프로그레스 바 위치 조정 */
#scroll-progress {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 4px !important;
    background-color: #C17F59 !important;
    z-index: 10000 !important; /* GNB보다도 높게 */
}

:root{
  --gnb-height: 80px; /* JS 로드 전 기본값 */
}

/* 모달이 GNB 아래로 숨어버리는 현상 방지 */
#author-modal,
#citation-modal{
  padding-top: calc(var(--gnb-height) + 20px) !important;
  z-index: 9999 !important;
}