/* ==============================================
   메인 페이지 / 카테고리 리스트 공통
   ============================================== */

/* ── 섹션 헤더 ── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #2b3a52;
    padding: 12px;
    border-bottom:3px solid #36619c;
}
.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-h2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.section-more { font-size: .82rem; color: var(--primary); }
.section-more:hover { text-decoration: underline; }

/* ── 목록형 2컬럼 (홈·카테고리·태그): primary(본문) | 사이드바 — sticky 대상은 .side-col 직계 자식만 ── */
.layout-two-col {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}
.layout-two-col__primary {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}
.main-col {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
.layout-two-col > .side-col {
    flex: 0 0 300px;
    width: 300px;
    max-width: min(300px, 100%);
    min-width: 0;
}

/* ── 포스트 리스트 ── */
.post-list {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.post-item {
    display: flex;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    transition: background .1s;
    text-decoration: none;
    color: inherit;
}
.post-item:last-child { border-bottom: none; }
.post-item:hover { background: #fafafa; }

/* ── 썸네일 (메인·카테고리·태그 목록 공통) ── */
.post-thumb {
    flex-shrink: 0;
    width: 150px;
    height: 100px;
    overflow: hidden;
    background: #ebebeb;
    display: block;
}
.post-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.post-item:hover .post-thumb img { transform: scale(1.04); }
.post-thumb-placeholder {
    width: 100%; height: 100%;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #bbb;
}

/* ── 본문 정보 ── */
.post-body { flex: 1; min-width: 0; padding: 1px 0; }
.post-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: .76rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.post-title {
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
    transition: color .12s;
}
.post-title a { color: inherit; }
.post-item:hover .post-title,
.post-item:hover .post-title a { color: var(--primary); }
.post-summary {
    font-size: .82rem;
    color: var(--text-sub);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    margin-bottom: 4px;
}
.post-date { color: var(--text-muted); font-size: .76rem; }

/* ── 더보기 버튼 (연한 그레이, 메인 목록 전용) ── */
.load-more-btn {
    display: block;
    width: 100%;
    padding: 12px 14px;
    text-align: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--text-sub);
    font-size: .9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.load-more-btn:hover {
    background: #e8edf4;
    border-color: #cbd5e1;
    color: var(--text);
}
.load-more-btn:active {
    background: #e2e8f0;
}

/* ── 카테고리 탭 ── */
.cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-tab {
    padding: 4px 12px;
    font-size: .83rem;
    color: var(--text-sub);
    border: 1px solid var(--border);
    background: #fff;
    transition: all .12s;
    cursor: pointer;
    font-family: inherit;
}
.cat-tab:hover, .cat-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ── 사이드바 sticky (목록: .layout-two-col / 글: .view-layout)
   열 높이를 본문과 맞춘 뒤(.side-col stretch), sticky는 내부 .side-col-inner에만 둠
   (sticky를 aside에 직접 주면 grid/flex에서 열이 짧아져 뷰에 붙은 것처럼 보일 수 있음)
   max-height/overflow-y on aside 금지(iframe 이중 스크롤 방지) */
@media (min-width: 901px) {
    .layout-two-col {
        align-items: stretch;
    }
    .layout-two-col > .side-col,
    .view-layout > .side-col {
        align-self: stretch;
        min-height: 0;
    }
    .layout-two-col > .side-col .side-col-inner,
    .view-layout > .side-col .side-col-inner {
        position: -webkit-sticky;
        position: sticky;
        top: var(--sidebar-sticky-top);
        z-index: 1;
    }
}
@media (max-width: 900px) {
    .layout-two-col > .side-col .side-col-inner,
    .view-layout > .side-col .side-col-inner {
        position: static;
        top: auto;
        z-index: auto;
    }
}
.side-col {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}
.side-col-inner {
    background: #fff;
    padding: 0px 10px 10px 10px;
    box-sizing: border-box;
    overflow: visible;
}
.widget {    
    border: 1px solid var(--border);
    margin-bottom: 14px;
    overflow: hidden;
}
.widget-title {
    font-size: .85rem;
    font-weight: 700;
    padding: 10px 16px;
    background: #f2f2f2;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    letter-spacing: .01em;
}
/* 위젯 본문 패딩 wrapper */
.widget-body {
    background: #fff;
    padding: 12px 0;
}

/* 사이드바 최신글 (제목만) */
.side-latest { list-style: none; }
.side-latest li { border-bottom: 1px solid #f0f0f0; }
.side-latest li:last-child { border-bottom: none; }
.side-latest a {
    display: block;
    padding: 9px 20px;
    font-size: .83rem;
    color: var(--text);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .12s, background .12s;
}
.side-latest a:hover { color: var(--primary); background: #f7f9ff; }

/* 사이드바 카테고리 (flex between) */
.side-latest a.cat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: normal;
}
.side-cat-count {
    font-size: .74rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 8px;
}

/* 사이드바 추천글 (썸네일+제목 웹진형) */
.side-rec-item {
    display: flex;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    transition: background .1s;
}
.side-rec-item:last-child { border-bottom: none; }
.side-rec-item:hover { background: #f7f9ff; }
.side-rec-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 50px;
    overflow: hidden;
    background: #e8e8e8;
}
.side-rec-thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-rec-title {
    flex: 1;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .12s;
}
.side-rec-item:hover .side-rec-title { color: var(--primary); }

/* 광고 위젯 — 세로 overflow:hidden 은 큰 반응형 단위(430 등)를 잘라 보이게 함 → visible */
.widget-ad {
    padding: 0;
    border: none;
    background: none;
    margin-bottom: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    line-height: 0;
    text-align: center;
}
.widget-ad .ad-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}
.widget-ad ins.adsbygoogle {
    display: block !important;
    position: relative;
    z-index: 1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    line-height: 0 !important;
    overflow: visible !important;
    vertical-align: top !important;
}
.widget-ad ins.adsbygoogle div[id^="aswift_"] {
    display: block !important;
    line-height: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
    min-width: 0 !important;
    vertical-align: top !important;
}
.widget-ad iframe {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0;
    vertical-align: top !important;
}
.widget-ad ins {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* ── 반응형 ── */
@media (max-width: 900px) {
    .layout-two-col {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        gap: 16px;
        box-sizing: border-box;
    }
    .layout-two-col__primary {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }
    .layout-two-col > .side-col {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    /* 리스트·섹션 제목·본문 요약 (현재값 × 1.15) */
    .section-title { font-size: calc(1rem * 1.15); }
    .section-more { font-size: calc(.82rem * 1.15); }
    .post-title { font-size: calc(.96rem * 1.15); }
    .post-summary { font-size: calc(.82rem * 1.15); }
    .post-meta { font-size: calc(.76rem * 1.15); }
    .post-date { font-size: calc(.76rem * 1.15); }
    .cat-tab { font-size: calc(.83rem * 1.15); }
    .load-more-btn { font-size: calc(.9rem * 1.15); }
}
@media (max-width: 600px) {
    .post-thumb { width: 150px; height: 100px; }
    .post-title { font-size: calc(.9rem * 1.15); }
    .post-summary { display: none; }
    .post-item { padding: 10px 12px; gap: 10px; }
    .post-thumb-placeholder { font-size: calc(1.3rem * 1.15); }
}