/* ↓ 0 ~ 767 px 구간에서 강제폭 해제 */
@media (max-width:767px){
  #hd,
  #wrapper,
  #ft{
    min-width:0 !important;   /* ← 핵심! */
    width:100%   !important;  /* 혹시 width 고정도 있으면 같이 해제 */
  }

  /* 래퍼들도 폭 100 % */
  #container_wr,
  #hd_wrapper,
  #ft_wr{
    width:100% !important;
    max-width:none !important;
  }
}
/* ===== 0 ~ 1499 px 구간에서 ‘고정 1400 px’ 규칙 끄기 ===== */
@media (max-width:1499px){

  /* 1) 문서 전체 래퍼들 – min-width / width 해제 */
  #hd,
  #wrapper,
  #ft{
    min-width:0 !important;
    width:100% !important;
  }

  /* 2) 내부 래퍼도 100 % 로 */
  #container_wr,
  #hd_wrapper,
  #ft_wr{
    width:100% !important;
    max-width:none !important;
  }

  /* 3) 본문(#container)은 화면폭에 맞춰 늘었다 줄었다 */
  #container{
    width:100% !important;
    max-width:none !important;
  }
}
/* ───────── 0 ~ 1499 px 에서는 푸터를 100 % 로 반응형 ───────── */
@media (max-width:1499px){

  /* ① 최상위 푸터 박스 */
  #ft{
    min-width:0  !important;   /* 고정폭 해제 */
    width:100%   !important;
  }

  /* ② 내부 래퍼 – 좌우 여백만 주고 폭은 100 % */
  #ft_wr{
    width:100%   !important;
    max-width:none !important;
    padding:0 16px;            /* 원하는 좌우 여백 */
    box-sizing:border-box;
  }

  /* ③ 카피라이트 줄 역시 자동 폭 */
  #ft_copy{
    width:100%   !important;
    max-width:none !important;
    text-align:center;
  }
}
/* ───────────────────────────────────────
   ① 0 – 1199 px : 폭 100 %  /  오버플로 차단
   ───────────────────────────────────────*/
@media (max-width:1199px){

  /* 페이지를 구성하는 모든 래퍼 */
  #hd, #wrapper, #ft,
  #hd_wrapper, #container_wr, #ft_wr,
  #container{
      min-width:0 !important;
      width:100%  !important;
      max-width:none !important;
      overflow-x:hidden;        /* 혹시 내부에서 밀려 나오는 것 방지 */
  }

  /* 네비게이션 메뉴가 강제로 한 줄을 넘어가도록 */
  #gnb_1dul.custom_gnb{
      flex-wrap:wrap;
      gap:20px;                 /* 좁을 때 간격 줄이기 */
  }

  /* 기본 latest(32%)·pic_block(25%) 컬럼 → 1열 */
  .lt_wr,
  .pic_lt li{
      width:100% !important;
  }
}

/* ───────────────────────────────────────
   ② ≥ 1200 px : ‘최대폭 + 가운데 정렬’만 남김
   ───────────────────────────────────────*/
@media (min-width:1200px){

  /* “width:1400px !important;” 같은 고정폭을 지우고
     대신 max-width 로 제한 */
  #hd_wrapper, #container_wr, #ft_wr{
      max-width:1500px;      /* ← 원하는 숫자로 조정 */
      margin:0 auto;
      width:auto !important; /* 고정폭 무효화 */
  }

  /* 본문도 고정폭 대신 max-width */
  #container{
      max-width:1500px;
      margin:0 auto;
      width:auto !important;
  }
}

/* ───────────────────────────────────────
   ③ 스크롤 디버깅용(옵션)
   ───────────────────────────────────────*/
/* 개발할 때만 켜 두세요. 화면을 벗어나는 요소에
   빨간 outline 이 생겨 어떤 놈이 튀어나오는지 바로 보입니다 */
html *{
  outline:0 solid transparent;
}
@media (max-width:1199px){
  html *:where([style*="width"],[style*="left"],[style*="right"]){
    outline:1px solid red;
  }
}



/* theme/basic/css/custom.css 맨 아래에 추가 */

/* ① 카드 밑에 나오는 ‘제목 링크’ */
.pic_lt li a:not(.lt_img),   /* 카드 이미지 링크(.lt_img)는 제외 */
.galley_li > a:not(.lt_img){ /* 스킨에 따라 galley_li 클래스일 수도 있음 */
  font-size:1.05rem !important;   /* 기본 0.9~1.0rem → 더 크게 */
  line-height:1.45 !important;    /* 줄간 간격 살짝 */
  font-weight:600 !important;     /* 굵게(선택) */
  display:-webkit-box;            /* 2줄 말줄임 유지용 */
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ② ‘NEW’·‘HOT’ 배지도 글자 크기에 맞춰 조금만 키우고 싶다면 */
.pic_lt .new_icon,
.pic_lt .hot_icon{
  font-size:.75rem !important;
  line-height:16px  !important;
}





/* ========= 최신글 스킨 : 게시판명(h2.lat_title) 완전 오버라이드 ========= */

/* h2 자체 */
.lat .lat_title,
.pic_lt .lat_title{          /* ← ❶ 다른 최신글 스킨도 동시에 잡기 */
  font-size:2.2rem   !important;   /* 더 크게 */
  font-weight:700    !important;
  color:#000         !important;

  text-align:center  !important;   /* 가운데 정렬 */
  margin:100px auto 20px !important;/* 상단 100px / 하단 20px */
  padding:0          !important;

  border-bottom:3px solid #333 !important;   /* 밑줄 */
  width:fit-content  !important;   /* 밑줄 길이를 글자폭만큼 */
}

/* a 태그(스킨에 따라 h2 안에 a가 있을 수도 있음) */
.lat .lat_title > a,
.pic_lt .lat_title > a{
  display:block      !important;
  text-align:center  !important;
  color:inherit      !important;   /* 부모 색상 그대로 */
}

/* 상위 컨테이너가 ‘text-align:left’로 덮어써버릴 경우 대비 */
.lat,
.pic_lt{
  text-align:center !important;
}
/* ─── 갤러리(pic_lt) ▸ 작성자 · 날짜 숨기기 ─── */
.pic_lt .lt_info{ display:none !important; }
@media (max-width:767px){      /* 0 – 767 px 구간 */
  .pic_lt .lt_info{ display:none !important; }
}
/* custom.css 에 추가 */
.pic_lt .lt_info{display:none!important;}
@media (max-width:767px){         /* 가로 767 px 이하 */
  .pic_lt .lt_info{display:none!important;}
}
.lt .lt_date {
    display:none;
}



/* ─── latest/pic_block 전용 오버라이드 ────────────── */

/* 1. li 를 세로 플렉스(이미지 ↑ / 제목 ↓)로 재배치 */
.pic_lt li{
  display:flex          !important;   /* 가로 → 세로 */
  flex-direction:column !important;
}

/* 2. 썸네일(anchor.lt_img)은 맨 위 */
.pic_lt li .lt_img{
  order:0               !important;   /* 이미지 먼저 */
  display:block         !important;
  margin:0 0 6px;                     /* 이미지-제목 간격 */
}

/* 3. 제목(anchor) – 이미지 아래 */
.pic_lt li > a:not(.lt_img){
  order:1               !important;
  display:block         !important;
  font-size:1rem;                     /* 필요하면 조정 */
  line-height:1.4;
}

/* 4. 작성자·날짜 정보 숨기기 */
.pic_lt .lt_info{display:none !important;}

/* ─── Owl Carousel 가시성 보강(선택) ──────────────── */
.no-js .owl-carousel,
.owl-carousel.owl-loaded{display:block !important;} /* 자바스크립트 미동작 대비 */

/* 필요 없다면 위 3줄은 지워도 무방 */












/* ───── latest/basic : 이미지 ↑ / 제목 ↓ (작성자·날짜 유지) ───── */

/* 1) li 전체를 세로 플렉스 레이아웃으로 전환 */
.lt ul li{
  display:flex           !important; /* 가로 → 세로 */
  flex-direction:column  !important;
  padding:0 0 20px       !important; /* 아래 여백만 남김 */
  border-bottom:1px solid #e5ecee;   /* 기존 테두리 유지 */
}

/* 2) 썸네일( .lt_thumb )을 맨 위로, 가로폭 100% */
.lt .lt_thumb{
  float:none     !important;  /* 기존 float 해제 */
  margin:0 0 10px!important;  /* 제목과의 간격 */
  width:100%     !important;  /* 한 줄 꽉 */
}
.lt .lt_thumb img,
.lt .lt_thumb video{
  width:100% !important;
  height:auto!important;
}

/* 3) 제목(.lt_tit)은 이미지 아래 */
.lt .lt_tit{
  order:1;                    /* 플렉스 순서 */
  font-size:1rem;             /* 필요 시 조정 */
  padding-bottom:6px;
}

/* 4) 작성자·날짜 영역을 제목 바로 밑에 두고 싶다면 그대로,
      완전히 숨기려면 아래 주석을 해제하세요 */
/* .lt .lt_info{display:none!important;} */
/* ─── pic_lt 썸네일 Hover 확대 ───────────────────────── */

/* ① 썸네일 틀( .lt_img )을 넘치면 자르도록 */
.pic_lt li .lt_img{
  overflow:hidden;                 /* 확대된 부분 잘라내기 */
  display:block;                   /* 이미 선언돼 있지만 안전 차원 */
}

/* ② 이미지에 부드러운 확대 효과 */
.pic_lt li .lt_img img,
.pic_lt li .lt_img video{
  transition:transform .35s ease;  /* 확대 / 축소 애니메이션 */
}

/* ③ 호버 시 110 % 확대 */
.pic_lt li .lt_img:hover img,
.pic_lt li .lt_img:hover video{
  transform:scale(1.1);
}
/* ───────── header 공통 ───────── */
#hd{background:#20232a;color:#fff;font-size:15px}
#hd .inner, #hd_wrapper{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
#hd a{color:#fff;text-decoration:none}
#hd a:hover{color:#ffdf3c}

/* 로고(텍스트) */
#logo{
  font-size:1.3rem;font-weight:700;padding:12px 0;
}
#logo a{display:inline-block;color:#fff}

/* ───────── 검색창 숨기기 (필요없으면 주석 해제) ───────── */
.hd_sch_wr{display:none}

/* ───────── gnb 상단 메뉴 (고정 3개) ───────── */
#gnb_1dul.custom_gnb{
  display:flex;gap:32px;margin:0;padding:0;list-style:none;
}
#gnb_1dul.custom_gnb .gnb_1dli{position:relative}
#gnb_1dul.custom_gnb .gnb_1da{
  display:block;padding:18px 0;font-weight:600;
}
#gnb_1dul.custom_gnb .gnb_1da:hover::after{
  content:'';position:absolute;left:0;right:0;bottom:10px;height:2px;background:#ffdf3c;
}

/* ───────── 기존 메뉴·햄버거 버튼·“메뉴 준비중” 문구 제거 ───────── */
.gnb_mnal,
.gnb_empty,
#gnb_all,
#gnb_all_bg{display:none!important}

/* ───────── 반응형: 화면 768px 이하 ───────── */
@media (max-width:768px){
  #hd .inner{flex-direction:column;gap:6px}
  #logo{font-size:1.1rem}
  #gnb_1dul.custom_gnb{gap:18px;font-size:14px;flex-wrap:wrap;justify-content:center}
}
/* theme/pic_block/style.css 예시 */
.pic-block-wrap{
    display:grid;
    grid-template-columns:repeat(4,1fr); /* 4열 */
    gap:20px;
}