/* 광고 슬롯 공통 스타일.
   - 실제 광고 코드가 들어오기 전엔 .ad-placeholder 가 "광고 자리"를 보여준다.
   - 광고망(애드센스/애드핏)이 들어오면 .ad-slot 안에 그 코드가 그려진다. */

.ad-slot {
  margin: 0 0 20px;
}

/* 사이드바 광고는 위젯과 같은 폭에 맞춘다 */
.sidebar .ad-slot { width: 100%; }

.ad-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* 자리표시 (실제 광고 전) */
/* 광고 자리: 흰색 네모 블럭 (실제 광고 들어오기 전) */
.ad-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 250px;            /* 사이드바 표준 광고 크기(300x250) 기준 */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}
.ad-placeholder strong { font-weight: 900; color: var(--g-700); font-size: 0.95rem; }
.ad-placeholder span { font-size: 0.75rem; }

/* 실제 광고가 들어오면 가운데 정렬만 맞춰 둔다 */
.ad-slot ins,
.ad-slot iframe { display: block; margin: 0 auto; max-width: 100%; }

/* 사이드바 광고 위젯: 스크롤 시 화면을 따라오도록 상단에 고정(sticky) */
.ad-widget { display: block; position: sticky; top: 80px; }
@media (max-width: 860px) { .ad-widget { position: static; } } /* 모바일 단일 컬럼에서는 고정 해제 */

/* 홈 왼쪽 세로 광고 레일
   본문(최신 패치 노트 등)은 폭을 그대로 두고, 광고는 본문 왼쪽 바깥 여백에 고정 배치한다.
   여백이 충분한 넓은 화면에서만 보이고, 좁으면 숨겨 본문이 원래 크기를 유지한다. */
.home-wrap { position: relative; }            /* 스팀 배너~본문 전체를 감싸 레일의 기준 박스가 된다 */
.home-layout { display: block; }               /* 본문 전체 폭 유지 */
.home-main { min-width: 0; }
.home-rail { display: none; }                 /* 기본(좁은 화면)엔 숨김 */
.ad-slot-vertical .ad-placeholder { min-height: 540px; }  /* 세로로 긴 흰색 직사각형 (600→540, 10%↓) */
@media (min-width: 1500px) {
  /* 레일은 스팀 배너 상단(밤색 바 아래)부터 본문 끝까지를 차지 → 위는 밤색 상단, 아래는 푸터를 넘지 않는다 */
  .home-rail {
    display: block;
    position: absolute; top: 0; bottom: 0;
    left: calc((100vw - 1140px) / 2 - 176px);  /* 1140px 컨테이너 왼쪽 바깥 여백 */
    width: 160px;
  }
  /* 안쪽 광고는 sticky 로 스크롤을 따라오되, 레일 끝(본문 끝)에서 멈춰 푸터를 가리지 않는다 */
  .home-rail-inner { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 6px; }
}