@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

:root {
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --text-color: #1f2937;
    --bg-color: #f9f9f9;
    --card-bg: #ffffff;
    --border-color: #e5e7eb;
    --header-height: 60px; /* 헤더 높이 변수 */
}

body { 
    font-family: "Pretendard Variable", Pretendard, sans-serif; 
    margin: 0; background-color: var(--bg-color); 
    color: var(--text-color); line-height: 1.6; 
    overflow-x: hidden; /* 가로 스크롤 방지 */
    -webkit-tap-highlight-color: transparent; /* 모바일 터치 하이라이트 제거 */
}

* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; transition: 0.2s; }
ul { list-style: none; padding: 0; margin: 0; }
button { cursor: pointer; font-family: inherit; }

/* 컨테이너 - 모바일 여백 16px 확보 */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 16px; 
}
.hidden { display: none !important; }

/* === 헤더 스타일 (Sticky & Mobile Optimized) === */
header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: var(--header-height);
    padding: 0 16px; 
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.95); /* 흰색 배경 반투명 */
    backdrop-filter: blur(8px); 
    
    /* 상단 고정 (Sticky) */
    position: sticky;
    top: 0;
    z-index: 1000; 
    width: 100%;
}

/* 광고 간섭 방지 (헤더 내부 광고 숨김) */
header .adsbygoogle, 
header .google-auto-placed,
nav .adsbygoogle {
    display: none !important;
}

/* 헤더 왼쪽 (로고 + 메뉴) */
.header-left { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
    height: 100%;
}

/* 로고 */
.logo { margin: 0; line-height: 1; display: flex; align-items: center; }
.logo-text { 
    font-weight: 900; font-size: 22px; letter-spacing: -0.5px; 
    color: #111; text-transform: uppercase; 
    white-space: nowrap; 
}
@media (min-width: 768px) { .logo-text { font-size: 26px; } }

/* 네비게이션 메뉴 (데스크탑 기본) */
nav ul { 
    display: flex; 
    gap: 20px; 
    align-items: center;
    height: 100%;
}
nav a { 
    font-weight: 600; font-size: 15px; color: #555; 
    white-space: nowrap; cursor: pointer;
    padding: 5px 0;
}
nav a:hover { color: var(--primary-color); }

/* 모바일 메뉴 버튼 */
.mobile-menu-btn { 
    display: none; 
    font-size: 22px; 
    background: none; 
    border: none; 
    padding: 8px; 
    color: #333; 
    margin-right: -8px; 
}

/* 검색창 */
.search-box { position: relative; }
.search-box input { 
    padding: 8px 35px 8px 15px; border: 1px solid #eee; 
    background: #fff; border-radius: 20px; font-size: 14px; width: 180px; 
    outline: none; transition: 0.2s;
}
.search-box input:focus { border-color: var(--primary-color); }
.search-box i { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; }

/* === 반응형 헤더 (모바일) === */
@media (max-width: 768px) {
    .header-left { width: 100%; justify-content: flex-start; }
    .mobile-menu-btn { display: block; margin-left: auto; }
    .search-box { display: none; }

    /* 모바일 네비게이션 메뉴 */
    nav ul { 
        display: none !important; /* 기본 숨김 */
        flex-direction: column; 
        gap: 0; 
        position: absolute; 
        top: var(--header-height); 
        left: 0; width: 100%; 
        background-color: #ffffff; 
        border-bottom: 1px solid #eee;
        padding: 0; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
        z-index: 9999; 
    }
    
    /* 메뉴 활성화 시 표시 */
    nav ul.active { display: flex !important; animation: slideDown 0.3s ease; }
    
    nav ul li { width: 100%; text-align: center; }
    nav a { 
        display: block; 
        padding: 15px 0; 
        font-size: 16px; 
        color: #333;
        background-color: #fff; 
        border-bottom: 1px solid #f0f0f0; 
    }
    nav ul li:last-child a { border-bottom: none; }
    nav a:active { background-color: #f9f9f9; color: var(--primary-color); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === 메인 콘텐츠 레이아웃 === */
main { padding: 20px 0; }

h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 18px; } p { font-size: 15px; }
@media (min-width: 768px) {
    h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 20px; } p { font-size: 16px; }
}

/* 글 상세 보기 레이아웃 (본문 찌그러짐 방지) */
.article-wrapper {
    display: flex;
    gap: 40px;
    justify-content: center;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1100px) {
    .article-wrapper {
        display: block; /* 모바일에서 가로 배치 해제 */
    }
}

/* 글 상세 내용 */
.view-content { 
    line-height: 1.75; 
    color: #333; 
    font-size: 16px; 
    word-break: break-word; 
    padding: 0 4px; /* 모바일에서 벽에 붙지 않게 최소 여백 */
}
@media (min-width: 768px) { .view-content { font-size: 17px; line-height: 1.8; padding: 0; } }

.view-content img { display: block; margin: 30px auto; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

/* 헤더 이동 시 가려짐 방지 */
.view-content h2, 
.view-content h3 { 
    scroll-margin-top: 100px; 
}

.view-content h2 { margin-top: 40px; border-bottom: 2px solid #eee; padding-bottom: 10px; font-size: 22px; }
.view-content p { margin-bottom: 1.2em; }

/* === 카드 리스트 그리드 (인덱스 페이지용) === */
.grid-container { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 20px; 
    margin-top: 20px; 
}
@media (min-width: 640px) { .grid-container { grid-template-columns: repeat(2, 1fr); } } 
@media (min-width: 1024px) { .grid-container { grid-template-columns: repeat(4, 1fr); } }

.card { 
    background: var(--card-bg); 
    border: 1px solid #eee; 
    border-radius: 12px; 
    overflow: hidden; 
    transition: transform 0.2s, box-shadow 0.2s; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    position: relative;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.card:active { transform: scale(0.98); }

.card-img { width: 100%; aspect-ratio: 16 / 16; object-fit: cover; background: #f0f0f0; }
.card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.card-title { 
    font-weight: 700; margin: 0 0 10px 0; font-size: 17px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { margin-top: auto; font-size: 13px; color: #888; display: flex; justify-content: space-between; align-items: center; }

/* === 웹 프로그램 영역 === */
.program-embed-wrapper {
    width: 100%; margin-top: 20px; background: #fff; border-radius: 8px; border: 1px solid #ddd; overflow: hidden;
}
.program-iframe { width: 100%; min-height: 600px; border: none; display: block; }
@media (min-width: 768px) { .program-iframe { min-height: 800px; } }

/* === 목차 (ToC) 스타일 === */
.sidebar-toc {
    width: 280px; flex-shrink: 0; display: block;
}

.toc-box {
    position: sticky; top: 100px; max-height: calc(100vh - 150px); overflow-y: auto;
    background: #ffffff; border: 1px solid #eef2f6; border-radius: 16px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.toc-title { font-weight: 800; font-size: 16px; margin-bottom: 12px; color: #1e293b; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f1f5f9; padding-bottom: 10px; }

#toc-list { list-style: none; padding: 0; margin: 0; }
#toc-list li { margin-bottom: 8px; line-height: 1.4; }
#toc-list li.toc-h2 { font-weight: 600; color: #1e293b; }
#toc-list li.toc-h3 { font-size: 14px; padding-left: 15px; color: #64748b; }
#toc-list a { color: #334155; text-decoration: none; transition: 0.2s; }
#toc-list a:hover { color: var(--primary-color); text-decoration: underline; }
@media (min-width: 1101px) {
    #mobile-toc-btn {
        display: none !important; /* PC에서는 무조건 숨김 */
    }
}
/* 모바일 목차 전용 (1100px 미만) */
@media (max-width: 1100px) {
    .sidebar-toc { 
        display: contents; /* 부모 레이아웃 영향만 제거 */
    }

#toc-container {
        display: none !important;
        /* 화면 중앙 배치 */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; 
        
        width: 85% !important; /* 모바일 화면에 맞춰 너비 조정 */
        max-width: 320px;
        max-height: 70vh; /* 너무 길어지지 않게 조절 */
        bottom: auto !important;
        right: auto !important;
        
        z-index: 10001; /* 버튼보다 위에 뜨도록 */
        background: #ffffff !important;
        padding: 25px;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.3);
        border: none;
        overflow-y: auto;
    }

    #toc-container.mobile-active {
        display: block !important;
        animation: modalFadeIn 0.3s ease;
    }

    /* 배경을 어둡게 만드는 가상 요소 (선택 사항) */
    .toc-backdrop {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.0);
        z-index: 10000;
    }
    .toc-backdrop.active { display: block; }

    #mobile-toc-btn {
        display: flex !important; position: fixed; bottom: 85px; right: 20px; 
        width: 50px; height: 50px; background: var(--primary-color); color: white; 
        border-radius: 50%; border: none; align-items: center; justify-content: center; 
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); z-index: 10000; cursor: pointer; font-size: 18px;
    }
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

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

/* === 기타 요소 === */
.share-container { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; color: white; flex-shrink: 0; }
.btn-fb { background: #1877f2; } .btn-tw { background: #000; } .btn-copy { background: #666; }

footer { margin-top: 60px; padding: 30px 0; border-top: 1px solid #eee; text-align: center; color: #888; font-size: 13px; }

/* 관리자 페이지 대응 */
.admin-header h2 { font-size: 20px; }
@media (max-width: 768px) {
    .admin-header { flex-direction: column; gap: 10px; align-items: flex-start; }
    .header-actions { width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
    .post-table th:nth-child(3), .post-table th:nth-child(4),
    .post-table td:nth-child(3), .post-table td:nth-child(4) { display: none; }
}