/* =========================================================================
   커뮤니티 메인(board.php?bo_table=community) 전용 디자인 — 허니타임 컬러
   - 모든 규칙을 .cm-portal / #latest_section 하위로 스코프 → 다른 페이지 무영향.
   - PC 2열 / 모바일(≤600px) 1열. 색: 골드 #F5B919, 브라운 #4A2A18,
     크림 #FDF6E6, 배경 #FAF7F0, 테두리 #E8DFD0.
   - 되살리려면 list.skin.php 의 이 파일 add_stylesheet 한 줄만 지우면 원복.
   ========================================================================= */

/* ── 상단 배너: "커뮤니티 _" 크림 띠+언더바 → 깔끔한 제목 + 브라운 밑줄 ── */
.community-wrap .top_banner_area { background: none !important; border-bottom: 0 !important; }
.community-wrap .top_banner_area .inner { padding: 18px 14px 10px !important; text-align: left !important; }
.community-wrap .top_banner_area .inner .head span {
    display: inline-block;
    color: #4A2A18 !important;
    font-size: 1.55em !important;
    font-weight: 800;
    letter-spacing: -0.3px;
    border-bottom: 3px solid #4A2A18;
    padding-bottom: 6px;
}
.community-wrap .top_banner_area .inner .head span::after { display: none !important; } /* 언더바 장식 제거 */

/* ── 포털 영역 배경 ── */
#latest_section.cm-portal { background: #FAF7F0; padding: 14px 12px 22px; }

/* 박스사이징 보정: 패딩으로 인한 모바일 가로 넘침 방지 */
#latest_section.cm-portal, .cm-portal .cm-grid, .cm-portal .cmb, .cm-portal .cmb * { box-sizing: border-box; }
#latest_section.cm-portal { width: 100%; overflow-x: hidden; }

/* ── 2열 그리드 (모바일 1열) ── */
.cm-portal .cm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0;
    max-width: 1000px;
    margin-left: auto; margin-right: auto;
}
@media (max-width: 600px) {
    .cm-portal .cm-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ── 게시판 박스 ── */
.cm-portal .cmb {
    background: #fff;
    border: 1px solid #E8DFD0;
    border-radius: 8px;
    overflow: hidden;
}
.cm-portal .cmb-head {
    display: flex; align-items: center; justify-content: space-between;
    background: #FDF6E6;
    padding: 9px 12px;
    border-bottom: 1px solid #E8DFD0;
}
.cm-portal .cmb-title { color: #4A2A18; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.cm-portal .cmb-more  { color: #B08948; font-size: 12px; text-decoration: none; white-space: nowrap; }
.cm-portal .cmb-more:hover { color: #F5B919; }

.cm-portal .cmb-list { list-style: none; margin: 0; padding: 4px 0; }
.cm-portal .cmb-li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px dashed #f0e9db;
}
.cm-portal .cmb-li:last-child { border-bottom: 0; }

.cm-portal .cmb-subj {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    color: #333; font-size: 12.5px; text-decoration: none; flex: 1 1 auto;
}
.cm-portal .cmb-subj:hover .cmb-txt { color: #4A2A18; text-decoration: underline; }
/* 제목: 최대 2줄까지, 넘치면 …(2번째 줄 끝). line-height 넉넉히 → 줄 안 겹침 */
.cm-portal .cmb-txt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.4;
    word-break: break-all;
}

.cm-portal .cmb-hot {
    flex: none; background: #F5B919; color: #fff;
    font-size: 10px; font-weight: 800; line-height: 1;
    padding: 2px 5px; border-radius: 3px;
}
.cm-portal .cmb-cmt { flex: none; color: #F5B919; font-size: 11.5px; font-weight: 700; }

.cm-portal .cmb-date { flex: none; color: #a99b86; font-size: 11.5px; white-space: nowrap; }
.cm-portal .cmb-date.is-recent { color: #F08A00; font-weight: 700; }  /* 최신글 주황 강조 */

.cm-portal .cmb-empty { padding: 16px 12px; color: #b0a894; font-size: 12.5px; text-align: center; }

/* =========================================================================
   [PC 개선 2026-07-01] 제목 정렬 + 박스 콘텐츠폭 채움 + 크림 배경띠 제거 + 푸터 숨김
   - 모바일(≤600)은 위 기존 규칙 그대로. PC(≥601)만 아래 적용.
   ========================================================================= */
/* [2] 커뮤니티 페이지에서만 하단 푸터 숨김 (이 CSS는 커뮤니티 페이지에서만 로드됨) */
.foot { display: none !important; }

@media (min-width: 601px) {
  /* [1] 제목: 박스와 같은 시작선(콘텐츠 최대폭 1250 안으로 정렬) */
  .community-wrap .top_banner_area .inner {
    max-width: 1250px;
    margin: 0 auto;
    padding: 18px 4px 8px !important;   /* 아래 여백 축소(12→8) */
  }
  /* [간격] 제목~박스 사이 여백 축소 (붕 뜬 느낌 제거) */
  .community-wrap .top_banner_area {
    margin-bottom: 0 !important;   /* 기존 50px 제거 */
    height: auto !important;
    min-height: 0 !important;
  }
  /* [3] 크림 배경띠 제거 → 박스와 배경 자연스럽게 (박스는 흰색+테두리 유지) */
  #latest_section.cm-portal { background: transparent; padding: 10px 4px 30px; }
  /* [3] 박스 그리드: 콘텐츠 최대폭까지 꽉 채움 + 간격 시원하게 */
  .cm-portal .cm-grid { max-width: none; margin: 0; gap: 18px; }
  /* [3] 박스 살짝 크게 */
  .cm-portal .cmb-head  { padding: 11px 14px; }
  .cm-portal .cmb-li    { padding: 8px 14px; }
  .cm-portal .cmb-title { font-size: 15px; }
  .cm-portal .cmb-subj  { font-size: 13px; }
}

/* =========================================================================
   [1] 모바일 촘촘하게 (2026-07-02) — 박스 간격/패딩 축소. ≤600px 에만, PC 무영향.
       되돌리려면 이 블록만 삭제.
   ========================================================================= */
@media (max-width: 600px) {
    #latest_section.cm-portal { padding: 8px 4px 16px; }   /* [3] 좌우 최소화(꽉차게) */
    .cm-portal .cm-grid   { gap: 6px; }                    /* [3] 박스 사이 더 촘촘 */
    .cm-portal .cmb       { border-radius: 7px; }
    .cm-portal .cmb-head  { padding: 7px 11px; }
    .cm-portal .cmb-list  { padding: 2px 0; }
    .cm-portal .cmb-li    { padding: 5px 11px; }
    .cm-portal .cmb-title { font-size: 14px; }
    .cm-portal .cmb-subj  { font-size: 12px; }
    .cm-portal .cmb-empty { padding: 10px 11px; }
}

/* =========================================================================
   [1-수정 2026-07-02] 빈 게시판 박스: "숨기지 않고" 컴팩트하게.
       6개 박스 모두 표시하되, 글 없는 박스는 제목 줄(헤더)만 남기고
       '게시물 없음' 문구는 숨겨 자리는 차지하되 휑해 보이지 않게. — 모바일만.
   ========================================================================= */
@media (max-width: 600px) {
    .cm-portal .cmb--empty .cmb-list  { padding: 0; }
    .cm-portal .cmb--empty .cmb-empty { display: none; }
}

/* [3] 박스 화면폭 꽉 채우기 — 커뮤니티 스킨 컨테이너 좌우 패딩 제거(모바일만) */
@media (max-width: 600px) {
    .community-wrap .container,
    .community-wrap .wrapper { padding-left: 0 !important; padding-right: 0 !important; }
}

/* [1-추가] 모바일 제목~박스 큰 여백 축소 (banner margin-bottom 50px 등 제거) */
@media (max-width: 600px) {
    .community-wrap .top_banner_area { margin-bottom: 6px !important; height: auto !important; min-height: 0 !important; }
    .community-wrap .top_banner_area .inner { padding: 14px 14px 4px !important; }
    #latest_section.cm-portal { padding-top: 6px; }
}

/* [4] 상단 검색바는 사이트 공통(로고 밑)으로 이동 → app_header.css 의 .app-search 참고. */

/* =========================================================================
   [3-A] 모바일 하단 고정 탭바 (2026-07-02) — 커뮤니티 페이지 전용. PC 미표시.
       현재 탭(커뮤니티) 골드 강조. 되돌리려면 list.skin.php 의 nav.cm-tabbar 삭제.
   ========================================================================= */
.cm-tabbar { display: none; }
@media (max-width: 600px) {
    .cm-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 900;
        height: 56px;
        background: #fff;
        border-top: 1px solid #E8DFD0;
        box-shadow: 0 -2px 10px rgba(74,42,24,0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .cm-tabbar .cm-tab {
        flex: 1 1 0;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 3px;
        text-decoration: none; color: #a99b86;
    }
    .cm-tabbar .cm-tab i { font-size: 18px; line-height: 1; }
    .cm-tabbar .cm-tab span { font-size: 10.5px; font-weight: 600; }
    .cm-tabbar .cm-tab.is-active { color: #F5B919; }
    .cm-tabbar .cm-tab.is-active span { color: #4A2A18; font-weight: 700; }
    /* 탭바 높이만큼 하단 여백 확보(콘텐츠 안 가리게). 이 CSS는 커뮤니티 페이지만 로드 */
    body { padding-bottom: 64px !important; }
}