:root{
  --max-width:1400px;
  --pad-base:24px;
}
body{
  margin:0;
  padding-top:64px;      /* 헤더 높이 */
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  color:#f2f2f5;
  background:#0e0e11;
}
.container{              /* 모든 섹션 공통 컨테이너 */
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--pad-base);
}
@media (max-width:768px){
  :root{--pad-base:14px;}
  body{padding-top:56px;}
}
/* ↓ 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;
}

/* ===== 게임 커뮤니티형 Hero ===== */
.hero-block{
  position:relative;
  width:100%;
  height:420px;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.6);
}
.hero-block .hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.4);
}
.hero-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#fff;
  z-index:2;
}
.hero-title{
  font-family:'Orbitron', sans-serif;   /* 게이머 감성 폰트 */
  font-size:2.4rem;
  letter-spacing:1px;
  text-shadow:0 0 12px rgba(30,200,255,.8);
}
.hero-sub{
  margin:18px 0 28px;
  font-size:1.05rem;
  color:#e0e5ff;
}
.cta-btn{
  display:inline-block;
  padding:12px 28px;
  font-weight:700;
  background:linear-gradient(45deg,#1ec8ff 0%,#ff006a 100%);
  color:#fff;
  border-radius:50px;
  box-shadow:0 0 12px rgba(255,0,106,.6);
  transition:transform .2s;
}
.cta-btn:hover{transform:scale(1.05);}
@media (min-width:768px){
  .hero-block{height:480px;}
  .hero-title{font-size:3rem;}
}
/* ===== Hero Block (Landing) ===== */
.hero-block{
  position:relative;
  width:100%;
  height:520px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.55);
  margin-bottom:60px;
}
/* 비디오 / 이미지 배경 */
.hero-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.35) saturate(1.2);
}
/* 배경 위 그Radial 그라디언트 글로우 */
.hero-block::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%,rgba(30,200,255,.35),transparent 60%);
  pointer-events:none;
}
/* 콘텐츠 컨테이너 : 최대 1400 */
.hero-inner{
  position:relative;z-index:2;
  max-width:1400px;width:100%;
  padding:0 5%;display:flex;gap:60px;
}
/* 2단 레이아웃 : 모바일 단일열 */
.hero-left{flex:1 1 55%;}
.hero-features{flex:1 1 45%;display:grid;gap:24px;}
@media (max-width:1024px){
  .hero-inner{flex-direction:column;align-items:center;text-align:center;}
  .hero-features{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
}
/* 타이틀 & 서브 */
.hero-title{
  font-family:'Orbitron',sans-serif;
  font-size:2.6rem;line-height:1.25;margin-bottom:18px;
}
.hero-title .accent{color:#1ec8ff;text-shadow:0 0 12px rgba(30,200,255,.8);}
.hero-sub{font-size:1.1rem;color:#e2e8ff;margin-bottom:32px;}
/* CTA 버튼 */
.cta-group{display:flex;gap:16px;flex-wrap:wrap;}
.cta-primary,.cta-secondary{
  display:inline-block;padding:14px 32px;font-weight:700;border-radius:50px;
  transition:transform .2s,box-shadow .2s;
}
.cta-primary{
  background:linear-gradient(45deg,#1ec8ff 0%,#ff006a 100%);
  box-shadow:0 0 12px rgba(255,0,106,.5);
}
.cta-secondary{
  background:rgba(255,255,255,.12);border:2px solid #fff;
}
.cta-primary:hover,.cta-secondary:hover{transform:translateY(-2px);}
.hero-features li{
  background:rgba(255,255,255,.08);border-radius:12px;padding:24px 20px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  backdrop-filter:blur(4px);transition:transform .2s;
}
.hero-features li:hover{transform:translateY(-4px);}
.hero-features i{font-size:2rem;margin-bottom:12px;color:#1ec8ff;}
.hero-features strong{font-size:1.05rem;margin-bottom:4px;}
.hero-features span{font-size:.85rem;color:#d1d8ff;}
/* 스크롤 유도 */
.scroll-down{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  font-size:1.6rem;color:#fff;opacity:.8;animation:bounce 2s infinite;
}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translate(-50%,0);}
  40%{transform:translate(-50%,8px);}
  60%{transform:translate(-50%,4px);}
}

/* ===== Header : Neon Dark ===== */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(14,14,17,.85);backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.header-inner{
  max-width:1400px;margin:0 auto;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
}
.logo img{height:108px;filter:drop-shadow(0 0 4px rgba(30,200,255,.7));}

.main-nav ul{
  display:flex;gap:28px;font-weight:600;letter-spacing:.3px;
}
.main-nav a{
  color:#f2f2f5;padding:6px 0;position:relative;transition:color .2s;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:linear-gradient(90deg,#1ec8ff 0%,#ff006a 100%);transition:width .25s;
}
.main-nav a:hover{color:#1ec8ff;}
.main-nav a:hover::after{width:100%;}

.header-tools{display:flex;gap:14px;align-items:center;}
.icon-btn{
  background:none;border:none;color:#fff;font-size:1.15rem;cursor:pointer;
  transition:transform .2s;
}
.icon-btn:hover{transform:translateY(-2px);color:#1ec8ff;}

@media (max-width:1024px){
  .main-nav{position:fixed;top:64px;right:-100%;width:240px;height:calc(100vh - 64px);
            background:#1a1b21;flex-direction:column;padding:32px 24px;gap:20px;
            transition:right .3s;}
  body.nav-open .main-nav{right:0;}
  .mobile-toggle{display:inline-block;}
}
@media (min-width:1025px){
  .mobile-toggle{display:none;}
}

/* 검색 레이어 */
.search-layer{
  position:fixed;top:-100%;left:0;width:100%;background:rgba(14,14,17,.95);
  padding:80px 24px;display:flex;justify-content:center;transition:top .3s;
}
body.search-open .search-layer{top:0;}
.search-layer form{
  width:100%;max-width:600px;display:flex;
}
.search-layer input{
  flex:1;border:none;border-radius:6px 0 0 6px;padding:16px;font-size:1rem;
}
.search-layer button[type="submit"]{
  padding:0 24px;border:none;border-radius:0 6px 6px 0;
  background:#1ec8ff;font-size:1.2rem;color:#fff;cursor:pointer;
}
.search-close{
  position:absolute;top:24px;right:24px;background:none;border:none;
  font-size:1.6rem;color:#fff;cursor:pointer;
}

/* 본문이 헤더 높이만큼 밀리도록 */
body{padding-top:64px;}

/* ===== 최신글 스킨(pic_block) 사이트 맞춤 ===== */
.latest_wr .pic-block{                 /* 전체 그리드 */
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); /* 카드 폭 ↓ */
  gap:20px;                            /* 카드 간격 증가 */
}

.latest_wr .pic-block .pic_li{
  background:var(--bg-soft);           /* 다크 테마 변수 */
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .25s;
}
.latest_wr .pic-block .pic_li:hover{transform:translateY(-6px);}

.latest_wr .pic-block img{             /* 썸네일 크기 */
  width:100%;
  height:150px;                        /* 원하는 높이로 조절 */
  object-fit:cover;
}

.latest_wr .pic-block .pic_tit{        /* 제목 폰트·색상 */
  padding:14px 16px;
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  font-weight:500;
  font-size:.9rem;                     /* 14~15px 정도 */
  line-height:1.45;
  color:#f2f2f5;
  text-align:left;                     /* 좌측 정렬 */
  display:-webkit-box;                 /* 두 줄 말줄임 */
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:768px){              /* 모바일 2열 */
  .latest_wr .pic-block{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .latest_wr .pic-block img{height:120px;}
}
@media (max-width:768px){
  .header-inner{height:56px;}
  .main-nav{display:none;}   /* 모바일에서는 햄버거 메뉴 사용 */
}
@media (max-width:768px){
  .hero-block{height:420px;}
  .hero-title{font-size:1.8rem;}
}
@media (max-width:768px){
  .latest_wr .pic-block{grid-template-columns:repeat(2,1fr);gap:14px;}
  .latest_wr .pic-block img{height:120px;}
}

/* ===== Hero : 기본(PC) ===== */
.hero-block{position:relative;height:520px;margin-bottom:60px;overflow:hidden;}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-inner{position:relative;z-index:2;max-width:1400px;margin:0 auto;
            padding:0 5%;display:flex;gap:60px;align-items:center;height:100%;}
.hero-left{flex:1 1 55%;}
.hero-features{flex:1 1 45%;display:grid;gap:24px;}
.hero-features li{background:rgba(255,255,255,.08);padding:24px 20px;
                  border-radius:12px;text-align:center;backdrop-filter:blur(4px);}
.hero-title{font-family:'Orbitron',sans-serif;font-size:2.6rem;line-height:1.25;}
.hero-sub{font-size:1.1rem;color:#e2e8ff;margin:18px 0 32px;}
.cta-group{display:flex;gap:16px;flex-wrap:wrap;}
.cta-primary,.cta-secondary{display:inline-block;padding:14px 32px;font-weight:700;border-radius:50px;}
.cta-primary{background:linear-gradient(45deg,#1ec8ff 0%,#ff006a 100%);color:#fff;}
.cta-secondary{background:rgba(255,255,255,.12);border:2px solid #fff;color:#fff;}
.scroll-down{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
             font-size:1.6rem;color:#fff;opacity:.8;animation:bounce 2s infinite;}

@keyframes bounce{0%,20%,50%,80%,100%{transform:translate(-50%,0);}
                  40%{transform:translate(-50%,8px);}60%{transform:translate(-50%,4px);}}

/* ===== 모바일(≤768px) ===== */
@media (max-width:768px){
  .hero-block{height:420px;margin-bottom:40px;}
  .hero-inner{flex-direction:column;gap:32px;text-align:center;}
  .hero-left{flex:none;}
  .hero-title{font-size:1.8rem;}
  .hero-sub{font-size:.95rem;margin:14px 0 24px;}
  .hero-features{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;}
  .hero-features li{padding:16px 12px;font-size:.85rem;}
  .cta-group{justify-content:center;}
}
  	
.rhymix_content img{max-width:100% !important;height:auto !important;display:block;margin:0 auto;}

@media (max-width:768px){
  .main-nav{
    height:calc(100vh - 56px);   /* 헤더 높이(56px) 제외한 전체 높이 */
    overflow-y:auto;             /* 메뉴가 길어지면 세로 스크롤 */
  }

  /* 우측 아이콘 간격 & 겹침 방지 */
  .header-tools{gap:18px;}       /* 기존 14px → 18px */
  .header-tools .icon-btn{font-size:1.25rem;}  /* 모두 같은 크기로 */
  .search-open{order:1;}
  .icon-btn.mobile-toggle{order:3;}            /* 햄버거를 맨 오른쪽으로 */
}
.hd_opener:not(.icon-btn){display:none;} /* 기존(좌측) hd_opener가 남아있어도 강제 숨김 */
.header-tools{
  margin-left:auto;        /* 로고·메뉴 다음, 오른쪽 끝으로 밀기 */
  display:flex;
  gap:18px;
  align-items:center;
}

/* 모바일 슬라이드 메뉴 (#gnb) */
@media (max-width:768px){
  #gnb{
    position:fixed;
    top:56px;                /* 헤더 높이만큼 */
    right:-260px;            /* 화면 밖으로 */
    width:240px;
    height:calc(100vh - 56px);
    background:#1a1b21;
    overflow-y:auto;
    transition:right .3s;
    z-index:999;
  }
  #gnb.open{right:0;}        /* 클래스 붙으면 안으로 슬라이드 */
}

/*  /theme/basic/css/mobile.css  */
@media (max-width:768px){

  /* 헤더 높이 & 정렬 */
  .header-inner{display:flex;justify-content:space-between;align-items:center;
                height:56px;padding:0 16px;}
  .header-tools{margin-left:auto;display:flex;gap:18px;}

  /* 햄버거 ☰ 메뉴 (id="gnb") */
  #gnb{
    position:fixed;top:56px;right:-260px;width:240px;
    height:calc(100vh - 56px);background:#1a1b21;overflow-y:auto;
    transition:right .3s ease;z-index:999;
  }
  body.nav-open #gnb{right:0;}   /* JS에서 body.nav-open 토글 */

  /* 메인 내비게이션은 햄버거 열기 전 숨김 */

@media (max-width:768px){
  #gnb{right:-260px;transition:right .3s;}
  body.nav-open #gnb{right:0;}
}
/* ===== 모바일 슬라이드 메뉴 ===== */
@media (max-width:768px){

  /* 백드롭(화면 어둡게) */
  body.nav-open::before{
    content:"";
    position:fixed;inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
    z-index:998;
  }

  /* 사이드바 */
  #gnb{
    position:fixed;top:0;right:-260px;   /* 처음엔 화면 밖 */
    width:240px;height:100vh;
    background:#11151d;color:#f2f2f5;
    padding:72px 20px 40px;              /* 상단 여백 = 닫기버튼 공간 */
    box-shadow:-4px 0 12px rgba(0,0,0,.4);
    transition:right .3s ease;
    z-index:999;
  }
  body.nav-open #gnb{right:0;}           /* 토글 시 들어옴 */

  /* 닫기(X) 버튼 */
  .gnb-close{
    position:absolute;top:18px;right:18px;
    background:none;border:none;
    font-size:1.6rem;color:#f2f2f5;
  }

  /* 메뉴 리스트 */
  .gnb-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;}
  .gnb-nav a{
    font-size:1rem;font-weight:600;
    color:#f2f2f5;text-decoration:none;
    transition:color .2s;
  }
  .gnb-nav a:hover{color:#1ec8ff;}
}

/* 게시글 보기(#bo_v) 흰 배경 → 블랙 */
#bo_v,
#bo_v #bo_v_atc,
#bo_v #bo_v_con,
#bo_v .wr_content {
  background:#000 !important;
  color:#e6e6e6 !important;
}
#bo_v .wr_content table,
#bo_v .wr_content pre,
#bo_v .wr_content code,
#bo_v .wr_content blockquote {
  background:#111 !important;
  color:#e6e6e6 !important;
  border-color:#333 !important;
}
#bo_v .wr_content a { color:#9ac6ff !important; }
#bo_v .wr_content a:hover { color:#cfe2ff !important; }

/* 스킨에 따라 쓰는 래퍼까지 커버 */
.gall_view article,
.view-wrap .view-content { background:#000 !important; color:#e6e6e6 !important; }
#bo_v .container, #bo_v .at-container { background:#000 !important; }