/* ============================================================
   THE CLE 커뮤니티 (theme/18) — 보조 CSS
   본문은 Tailwind utility 중심. 여기는 grid minmax 보정/게시판
   리스트/탭/스와이퍼 보정/스크롤 등 예외 보조만 둔다.
   ============================================================ */

html { scroll-behavior: smooth; }
body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
* { word-break: keep-all; }

/* ---- 메인 그리드 (콘텐츠 + 사이드바) : Tailwind4 CDN 단일 1fr 함정 회피 ---- */
.cle-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}
@media (min-width: 1024px) {
    .cle-main-grid {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 2.5rem;
    }
}

/* ---- 게시판 위젯 3분할 ---- */
.cle-board-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}
@media (min-width: 640px) {
    .cle-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .cle-board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 갤러리 그리드 ---- */
.cle-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 768px) {
    .cle-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 푸터 그리드 ---- */
.cle-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}
@media (min-width: 480px) {
    .cle-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .cle-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
}

/* ---- 게시판 리스트 한 줄 ---- */
.cle-post { border-bottom: 1px solid #F2F4F6; }
.cle-post:last-child { border-bottom: 0; }
.cle-post > a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 0;
    color: #374151;
    transition: color .15s ease;
    min-width: 0;
}
.cle-post > a:hover .cle-post-t { color: #1FB6A0; }
.cle-post-t {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cle-post-d { flex: 0 0 auto; font-size: 12px; color: #9AA3AD; }
.cle-post-q {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px;
    background: #EAF2FF; color: #2F44D6;
    font-size: 11px; font-weight: 800;
}

/* ---- 로그인 탭 ---- */
.cle-tab {
    background: #F4F6F8;
    color: #9AA3AD;
    border-bottom: 1px solid #E5E8EC;
    cursor: pointer;
    transition: all .15s ease;
}
.cle-tab.cle-tab-on {
    background: #fff;
    color: #1F2937;
    border-bottom: 1px solid transparent;
}

/* line-clamp helpers (CDN 보강) */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- Swiper 보정 ---- */
.mainVisual .swiper-slide { display: block; height: auto; }
.noticeTicker .swiper-slide { display: flex; }
.mainVisual .swiper-pagination-bullet { background: #fff; opacity: .5; }
.mainVisual .swiper-pagination-bullet-active { opacity: 1; width: 22px; border-radius: 4px; }

/* AOS 미로딩 대비 (콘텐츠 항상 보이게) */
[data-aos]:not(.aos-animate) { opacity: 1; }
.aos-init[data-aos]:not(.aos-animate) { opacity: 0; }