/* ============================================================
   layout.global.css
   - index + bm-page + search_links 공통 레이아웃
   - 좌/우 전역바(330px) + 중앙 컨테이너(최대 1200px)
   - 1860px 이하 구간: clamp(320px, 100vw - 692px, 1200px)이 핵심
   - search-links 그리드: 컨테이너쿼리 기반 4 → 3 → 2 → 1
   ============================================================ */

/* 전역 변수 */
:root{
  --side-gap:24px;      /* 좌/우 전역바 화면 안쪽 여백 */
  --center-max:1200px;  /* 중앙 컨테이너 최대 폭 */
  --center-w:100%;      /* 중앙 컨테이너 기본 폭 */
}

/* ------------------------------------------------------------
   0. 헤더와 겹침 방지: padding-top 기준 로그인해야됨
   ------------------------------------------------------------ */
#wrapper{
  margin-top:0 !important;
}
#container{
  margin-top:8px !important;
  padding-top:var(--content-top, 90px); /* 헤더(70) + 여백(≈20) */
}




/* ------------------------------------------------------------
   1. PC 대형(>1860px) — 1860 고정 + 컨테이너 1200
   ------------------------------------------------------------ */
@media (min-width:1024px){
  body.index-1860 #index-wrap{
    max-width:1860px;
    margin:0 auto;
    padding:0;
  }

  /* 공통 본문 폭: 1200px 상한 (index / bm-page 공용) */
  #container,
  .bm-page{
    max-width:var(--center-max);  /* 1200px */
    margin:0 auto;
    margin-top:-5px !important;

 /*   padding-left:15px;
    padding-right:15px; */
    box-sizing:border-box;
  }

  /* 전역바 위치: index-wrap 기준 */
  #side-left-fixed{
    left:calc((100% - 1860px)/2);
  }
  #side-right-fixed{
    left:calc((100% - 1860px)/2 + 1860px - 330px - 16px); /* 오른쪽 16px 안쪽 */
    right:auto;
  }
}

/* ------------------------------------------------------------
   2. 1860px 이하 — 센터 유동 + 전역바 화면 안쪽 고정
   ------------------------------------------------------------ */
@media (max-width:1860px){
  body.index-1860 #index-wrap{
    max-width:100%;
    width:100%;
    padding:0;
  }

  /* 좌/우 전역바: 항상 보이되, 화면 안쪽으로 핀 고정 */
  #side-left-fixed{
    left:var(--side-gap);
    right:auto;
  }
  #side-right-fixed{
    right:var(--side-gap);
    left:auto;
  }

  /* ★ 핵심: 본문 폭 = 전체폭 - (전역바 330*2 + 여백 16*2 = 692) */
  #container,
  .bm-page{
    max-width:clamp(320px, calc(100vw - 692px), var(--center-max));
    margin:0 auto;
    padding-left:15px;
    padding-right:15px;
    box-sizing:border-box;
  }
}

/* ------------------------------------------------------------
   3. 태블릿/모바일(≤1024px) — 전역바 숨기고 1컬럼
   ------------------------------------------------------------ */
@media (max-width:1024px){

  /* 3-1) 좌/우 전역바 완전히 숨기기 */
  #side-left-fixed,
  #side-right-fixed{
    display:none !important;
  }

  /* 3-2) index 레이아웃을 뷰포트 기준으로 */
  body.index-1860 #index-wrap{
    display:block;
    width:100%;
    max-width:none;
    padding-top:var(--content-top);
  }

  .index-center{
    width:100%;
    max-width:none;
    margin:0 auto;
    padding:0 12px;
    box-sizing:border-box;
  }

  /* 3-3) 컨테이너 / bm-page 100% 폭 사용 */
  #container,
  .bm-page{
    max-width:none;
    width:100%;
    margin:0 auto;
    padding-left:5px;
    padding-right:5px;
	background-color:#020202;
  }

  /* 3-4) index 하단 2컬럼(dl-col) → 1컬럼 */
  .dl-col{
    flex:0 0 100%;
    max-width:100%;
  }
}

/* ------------------------------------------------------------
   4. 전역바 z-index 안전 스택
   ------------------------------------------------------------ */
#side-left-fixed,
#side-right-fixed{
  z-index:10050;
}

/* ------------------------------------------------------------
   5. Search page 레이아웃 (search_links.php)
   ------------------------------------------------------------ */

/* 컨테이너: 중앙 컨테이너 규칙과 정렬 일치 + 컨테이너 쿼리 활성화 */
.search-links-wrap{
  max-width:var(--center-max);  /* 1200px 상한 */
  width:var(--center-w);        /* 기본 100% */
  margin:0 auto;
  padding:0 15px;
  box-sizing:border-box;

  /* 컨테이너 쿼리를 위한 설정 (가로폭 기준) */
  container-type:inline-size;
}

/* 기본 4열 그리드 (데스크탑 기준) */
.search-links-wrap .dl-links-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}

/* 컨테이너 폭 기준 스냅 (4 → 3 → 2 → 1) */
@container (max-width:1180px){
  .search-links-wrap .dl-links-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}
@container (max-width:820px){
  .search-links-wrap .dl-links-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@container (max-width:520px){
  .search-links-wrap .dl-links-grid{
    grid-template-columns:1fr;
  }
}

/* ------------------------------------------------------------
   6. (선택) container-query 미지원 브라우저 fallback
   ------------------------------------------------------------ */
@supports not (container-type:inline-size){
  /* 데스크탑 4, 태블릿 2, 모바일 1 */
  @media (max-width:1024px){
    .search-links-wrap .dl-links-grid{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
  }
  @media (max-width:640px){
    .search-links-wrap .dl-links-grid{
      grid-template-columns:1fr;
    }
  }
}


/* ------------------------------------------------------------
스크롤바 스타일(유튜브뮤직 스타일)
   ------------------------------------------------------------ */

@media (min-width:1px){
  html, body, *{scrollbar-width:thin;scrollbar-color:transparent transparent;}
  html:hover, body:hover, *:hover{scrollbar-color:#444 transparent;}
  ::-webkit-scrollbar{width:6px;height:6px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:transparent;border-radius:999px;}
  *:hover::-webkit-scrollbar-thumb{background:#444;}
}


/* ------------------------------------------------------------
전체 배경색 101012
   ------------------------------------------------------------ */
html{
  background:#101012;
}

#wrapper,
#container,
#content{
  background:transparent !important;
}

/* 배경: 스크롤 따라가지만 늘어나지 않음 */
body{
  background:url('/theme/community/img/background.png') center top no-repeat !important;
  background-size:100% 100vh !important;
  background-attachment:scroll;
}