/* ===================================================

   bandi-gallery-mobile.css (정리본)

   - 공통: 가로 스크롤 방지 + 이미지 정비율

   - title_box 폭 해제 (가로 스크롤 원인 제거)

   - board_10(반디아로새길) 목록: 행은 table-row 유지, 셀만 정리

   - board_6(갤러리) 목록: 3열 카드 레이아웃

   =================================================== */




/* ───────── 공통 안전망 ───────── */

@media (max-width:768px){

  html, body,

  #wrap, #sub_content, #sub_content .content_box, #sub_content .right {

    max-width:100% !important;

    overflow-x:hidden !important;

    box-sizing:border-box;

  }




  .text_box img, .post_area img {           /* 상세/목록 공통 이미지 안전망 */

    max-width:100% !important;

    height:auto !important;

  }




  /* title_box 폭 고정 해제 (가로 스크롤 방지) */

  #sub_content .title_box,

  #sub_content .title_box img {

    width:100% !important;

    max-width:100% !important;

    height:auto !important;

    display:block !important;

  }




  /* 푸터 위 여백 살짝 축소(공통) */

  .right .text_box{ margin-bottom:12px !important; }

  #footer_text{ margin-top:8px !important; }

}




/* ───────── board_10 (반디아로새길) &#8211; 목록만 셀 폭 조정 ─────────

   ※ 행(tr)은 table-row로 유지: 상세에 영향 없음 */

@media (max-width:768px){

  .right .text_box table.board { width:100% !important; border-collapse:separate !important; }

  .right .text_box table.board > tbody { width:100% !important; }




  /* 왼쪽 썸네일 칸(기존 width="60") */

  .right .text_box table.board > tbody > tr > td[width="60"] {

    width:20% !important;                 /* 필요시 35~45% 사이 조절 */

    padding:10px 0 !important;

    vertical-align:top;

  }

  .right .text_box table.board > tbody > tr > td[width="60"] img{

    width:100% !important;

    height:auto !important;

    display:block !important;

    border:0 !important;

  }




  /* 오른쪽 텍스트 칸: 링크 제목만 남기고 보조 텍스트/줄바꿈 숨김 */

  .right .text_box table.board > tbody > tr > td.bbsnewf5 {

    width:75% !important;

    padding:10px 0 10px 14px !important;

    vertical-align:middle;

    font-size:0 !important;      /* 내부 잔여 텍스트/BR 숨김 트릭 */

    line-height:0 !important;

    word-break:keep-all;

  }

  .right .text_box table.board > tbody > tr > td.bbsnewf5 a{

    display:inline-block !important;

    font-size:16px !important;   /* 실제 보여줄 제목 */

    line-height:1.35 !important;

    color:#111 !important;

    text-decoration:none !important;

  }

  .right .text_box table.board > tbody > tr > td.bbsnewf5 br{ display:none !important; }

  .right .text_box .news_title,

  .right .text_box .div_news_title{ display:none !important; }  /* 중복 제목 숨김 */

}




/* ───────── board_6 (갤러리) &#8211; 목록 3열 카드 레이아웃 ─────────

   - 상세는 이 구조가 아니므로 영향 없음

   - ‘한 줄(tr)’을 래퍼로 만들고, 아이템 td(20%)만 카드로 */

@media (max-width:768px){




  /* 목록 테이블만 블록화 */

  #sub_content .right .text_box > table.board {

    display:block !important;

    width:100% !important;

    border-collapse:separate !important;

    border-spacing:0 !important;

    table-layout:auto !important;

  }

  #sub_content .right .text_box > table.board > tbody {

    display:block !important;

    width:100% !important;

  }




  /* 한 줄을 플렉스 래퍼로 → 카드가 줄바꿈되며 3열 배치 */

  #sub_content .right .text_box > table.board > tbody {

    display:flex !important;

    flex-wrap:wrap !important;

    justify-content:space-between !important;

    gap:10px !important;

}

#sub_content .right .text_box > table.board > tbody > tr {

  display:contents !important;  /* tr는 래퍼 역할만 */

}




  /* 기본 td 초기화 */

  #sub_content .right .text_box > table.board > tbody > tr > td {

    padding:0 !important;

    border:0 !important;

    width:auto !important;

    height:auto !important;

    box-sizing:border-box !important;

  }




  /* 스페이서/빈 td 숨기기 */

  #sub_content .right .text_box td[width="5"],

  #sub_content .right .text_box td[width="10"],

  #sub_content .right .text_box td[width="15"],

  #sub_content .right .text_box td[width="30"],

  #sub_content .right .text_box td:empty {

    display:none !important;

  }




  /* 아이템 셀(썸네일+제목이 같이 들어있는 20% 셀)만 카드로 노출 → 3열 */

  #sub_content .right .text_box > table.board > tbody > tr > td[width="20%"],

  #sub_content .right .text_box > table.board > tbody > tr > td[style*="width:20%"]{

    display:block !important;                       /* 테이블셀 → 블록(플렉스 아이템) */

    flex:0 0 calc(33.333% - 7px) !important;       /* 3열 고정 */

    background:#fff;

    border:1px solid #eee;

    border-radius:10px;

    overflow:hidden;

    text-align:center;

  }




  /* 카드 내부(중첩 테이블/셀) 폭 고정 해제 */

  #sub_content .right .text_box tr > td[width="20%"] table,

  #sub_content .right .text_box tr > td[style*="width:20%"] table {

    width:100% !important;

    border-collapse:separate !important;

    border-spacing:0 !important;

    table-layout:auto !important;

  }




  /* 썸네일: 정비율 + 가득 채움 */

  #sub_content .right .text_box tr > td[width="20%"] img,

  #sub_content .right .text_box tr > td[style*="width:20%"] img {

    width:100% !important;

    height:auto !important;

    display:block !important;

    border:0 !important;

  }




  /* 제목: 중앙 정렬 + 2줄 말줄임 */

  #sub_content .right .text_box tr > td[width="20%"] a,

  #sub_content .right .text_box tr > td[style*="width:20%"] a {

    display:block !important;

    padding:8px 6px 12px !important;

    font-size:14px !important;

    line-height:1.4 !important;

    color:#111 !important;

    text-decoration:none !important;

    overflow:hidden !important;

    display:-webkit-box !important;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    word-break:keep-all;

  }

}