/* ========================================================
   1. 기본 레이아웃 및 다크 모드 설정
   ======================================================== */
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important; 
    overflow-x: hidden !important; 
    background-color: #191919 !important; 
    color: #ffffff !important; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 본문을 감싸는 틀의 기본 공통 속성 (위쪽 여백 중복 제거) */
.layout-wrapper, 
.main-content, 
.page-body, 
article.page {
    margin: 0 auto !important; 
    padding-left: 20px !important; 
    padding-right: 20px !important; 
    padding-top: 0 !important; /* ★중복으로 들어갔던 여백 강제 제거★ */
    max-width: 900px !important; 
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important; 
    float: none !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* 고정된 상단 헤더 공간만큼의 여백은 가장 바깥 껍데기에 딱 한 번만 줍니다 */
.layout-wrapper {
    padding-top: 130px !important; /* 제목과 본문 사이의 적당한 간격 유지 */
}

/* ========================================================
   2. 상단 전체 제목 영역 (상단 고정 및 부제목 추가)
   ======================================================== */
.top-header {
    position: fixed !important; /* ★스크롤을 내려도 화면 맨 위에 고정★ */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    text-align: center !important; 
    padding: 30px 0 20px 0 !important; 
    background-color: rgba(25, 25, 25, 0.95) !important; /* 스크롤 시 글씨가 가독성 있게 비치도록 살짝 반투명 블랙 처리 */
    border-bottom: 1px solid #333 !important; 
    z-index: 9000 !important; /* 햄버거 메뉴나 사이드바보다는 아래, 본문보다는 위에 위치 */
}

.top-header .page-title,
.page-title {
    margin: 0 !important; 
    padding: 0 !important;
    font-size: 2.5rem;
    color: #ffffff; 
    display: block;
    line-height: 1.2 !important; 
}

/* 새로 추가된 Written by Cafe 부제목 스타일 */
.author-subtitle {
    margin: 10px 0 0 0 !important;
    font-size: 1rem !important;
    color: #a0a0a0 !important; /* 메인 제목을 해치지 않는 세련된 연한 회색 */
    font-weight: 500;
}

/* ========================================================
   3. 햄버거 메뉴 버튼
   ======================================================== */
.menu-btn {
    position: fixed !important;
    top: 25px !important;
    left: 25px !important;
    width: 45px !important;
    height: 45px !important;
    background-color: #2c2c2c !important; 
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 24px !important;
    cursor: pointer !important;
    z-index: 10000 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.menu-btn:hover {
    background-color: #444 !important;
    color: #ff6b6b !important;
}

/* 사이드바가 열렸을 때 햄버거 버튼 투명하게 숨기기 */
body:has(.sidebar.active) .menu-btn {
    opacity: 0 !important; 
    pointer-events: none !important; 
}

/* ========================================================
   4. 사이드바 (목차 영역 - 숨김 및 애니메이션 처리)
   ======================================================== */
.sidebar {
    position: fixed !important; 
    top: 0 !important;
    left: -400px !important; /* 평소엔 왼쪽 밖으로 숨김 */
    height: 100vh !important;
    width: 350px !important; /* 사이드바 가로 너비 확장 상태 유지 */
    background-color: #222222 !important; 
    z-index: 9999 !important; 
    transition: left 0.3s ease-in-out !important; 
    box-shadow: 5px 0 15px rgba(0,0,0,0.5) !important; 
    padding-top: 80px !important; 
    padding-bottom: 50px !important; /* 바닥에 딱 안 붙게 여백 */
    transform: none !important; 
    overflow-y: auto !important; /* 세로 스크롤 활성화 */
    box-sizing: border-box !important; 
    border-right: 1px solid #333; 
}

.sidebar.active {
    left: 0 !important; /* 버튼 누르면 나타남 */
}

/* 목차 내부 글씨체 및 간격 설정 */
.sidebar-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 0;
    padding-left: 20px;
    color: #ffffff; 
}

.sidebar ol {
    list-style-type: decimal !important; /* 1, 2, 3 번호 복구 */
    padding-left: 45px !important; /* 숫자가 안 잘리게 안쪽 여백 추가 */
    margin: 5px 0;
}

.sidebar ol ol {
    list-style-type: lower-alpha !important; /* a, b, c 알파벳 복구 */
    padding-left: 20px !important; 
}

.sidebar li {
    margin-bottom: 8px;
    font-size: 0.9em;
}

.sidebar a {
    text-decoration: none;
    color: #a0a0a0; 
    transition: color 0.2s;
}

.sidebar a:hover {
    color: #ffffff; 
    text-decoration: underline;
}

/* 사이드바 스크롤바 디자인 (다크모드 커스텀) */
.sidebar { scrollbar-width: thin; scrollbar-color: #444 #191919; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: #191919; }
.sidebar::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #555; }

/* ========================================================
   5. 메인 콘텐츠 세부 디자인
   ======================================================== */
.main-content {
    padding: 30px 0; /* 위아래 여백 */
}

/* 텍스트 띄어쓰기 렌더링 정상화 */
.main-content p, 
.main-content td, 
.main-content th,
.main-content li {
    white-space: normal !important; 
    word-break: keep-all; 
    line-height: 1.6 !important; 
}

.main-content h1, 
.main-content h2, 
.main-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #ffffff; 
}

/* 이미지 및 캡션 왼쪽 정렬 */
.main-content figure.image {
    margin: 15px 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

.main-content figure.image img {
    margin-left: 0 !important;
    display: block; 
    max-width: 100% !important; 
    height: auto !important; 
}

.main-content figcaption {
    font-size: 0.85rem !important; 
    opacity: 0.6 !important; 
    margin-top: 0.5em !important; 
    text-align: left !important; 
    padding-left: 0 !important;
    color: #ffffff; 
}

/* 이미지 2x2, 3x3 그리드 배열 */
.image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    margin-top: 15px;
    width: 100%;
}

.image-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 20px; 
    margin-top: 15px;
    width: 100%;
}

.image-grid figure.image,
.image-grid2 figure.image {
    margin: 0 !important; 
    width: 100% !important; 
}

/* ========================================================
   6. 표(Table) 스타일 적용
   ======================================================== */
table {
    border-collapse: collapse; 
    margin: 1.5em 0; 
    font-size: 0.9rem;
    width: auto;
    color: #ffffff; 
}

table th, 
table td {
    border: 1px solid #444 !important; 
    padding: 10px 14px !important; 
    text-align: left;
    vertical-align: middle;
}

.simple-table-header-color {
    background-color: #2c2c2c !important; 
    font-weight: 600;
}

/* ========================================================
   7. 노션 텍스트 하이라이트 (형광펜 색상)
   ======================================================== */
mark { background-color: transparent !important; }

.highlight-red    { color: #ff6b6b !important; } 
.highlight-blue   { color: #5c9df5 !important; }
.highlight-purple { color: #b78ced !important; }
.highlight-yellow { color: #eacc54 !important; }
.highlight-gray   { color: #9b9a97 !important; }
.highlight-green  { color: #00f020 !important; }
.highlight-teal   { color: #4daba9 !important; }
.highlight-pink   { color: #f06292 !important; }

/* ========================================================
   8. 최상단 이동 (TOP) 버튼
   ======================================================== */
.top-btn {
    position: fixed !important;
    bottom: 30px !important; /* 화면 아래에서 30px 띄움 */
    right: 30px !important;  /* 화면 오른쪽에서 30px 띄움 */
    width: 45px !important;
    height: 45px !important;
    background-color: #2c2c2c !important; 
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 20px !important;
    cursor: pointer !important;
    z-index: 10000 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    
    /* 기본적으로 화면 맨 위에서는 투명하게 숨김 처리 */
    opacity: 0; 
    pointer-events: none; 
}

.top-btn:hover {
    background-color: #444 !important;
    color: #ff6b6b !important;
}

/* 스크롤을 내렸을 때 스르륵 나타나게 하는 클래스 */
.top-btn.show {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ========================================================
   9. 모바일(스마트폰) 최적화 반응형 코드
   ======================================================== */
@media screen and (max-width: 768px) {
    /* 모바일에서는 사이드바 너비를 스마트폰 화면에 맞게 축소 */
    .sidebar { width: 280px !important; }

    /* 상단 제목 글씨 크기 모바일에 맞게 축소 */
    .top-header .page-title, .page-title { font-size: 1.8rem !important; }

    /* 본문 좌우 여백 모바일에 맞게 축소 */
    .layout-wrapper, .main-content, article.page {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ★중요: 표(Table) 내용이 길면 가로로 스와이프해서 볼 수 있게 설정 */
    .main-content table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    /* 2칸, 3칸짜리 이미지 그리드를 모바일에서는 세로 1줄로 크게 배치 */
    .image-grid, .image-grid2 {
        grid-template-columns: 1fr !important;
    }
}