/* ============================================================
   ads.css — TimeSave 광고 슬롯 스타일
   ------------------------------------------------------------
   · ads.js 가 <div data-ad="KEY"> 를 찾아 내부에 광고를 주입.
   · 핵심 목표: CLS(레이아웃 시프트) 방지 → 모든 슬롯에 고정 높이 예약.
   · ENABLED=false 일 때는 점선 placeholder 박스만 표시.

   [정책 안전장치]
   · 도구 작업 버튼/드롭존 근처에는 광고를 절대 두지 않음(오클릭 유도 방지).
   · 데스크톱 사이드 세로 광고는 카드 옆에 자리가 있을 때만 노출.
   · 사이드 광고는 "오른쪽" 한 곳만 운영(UX 우선 — 본문 집중 방해 최소화).
   ============================================================ */

/* 공통 컨테이너 */
.ts-ad {
  display: block;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

/* AdSense ins 요소가 컨테이너를 채우도록 */
.ts-ad ins.adsbygoogle {
  display: block;
  width: 100%;
}

/* 개발/심사 전 placeholder (ENABLED=false 또는 미로드 시) */
.ts-ad.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(0, 0, 0, 0.14);
  border-radius: 10px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.015),
      rgba(0,0,0,0.015) 10px,
      rgba(0,0,0,0.04) 10px,
      rgba(0,0,0,0.04) 20px
    );
  color: rgba(0, 0, 0, 0.30);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

/* ── 가로 배너 (랜딩 중간/하단, 도구 하단) ──
   반응형: 모바일~데스크톱 가로형. 높이 예약으로 CLS 방지.
   ★ flex 컨테이너(main) 안에서도 세로로 늘어나지 않도록
     높이를 height 로 못박고 align-self:center 로 고정. */
.ts-ad--horizontal {
  width: 100%;
  max-width: 728px;
  height: 90px;          /* min-height 아님 → flex 자식 세로 stretch 방지 */
  flex: 0 0 auto;        /* main flex 안에서 늘어나지 않게 */
  align-self: center;
}

/* 랜딩 중간 배너: hero와 tools 사이 여백에 자연스럽게 */
.ts-ad--landing-mid {
  margin: 8px auto 40px;
}
/* 랜딩 하단 배너: 그리드 다 본 뒤 */
.ts-ad--landing-bottom {
  margin: 16px auto 64px;
}

/* 도구 페이지 하단 배너: tool-card 아래, footer 위.
   ★ main flex 밖(별도 블록)에 배치 권장. 높이/flex 규칙으로 이중 방어. */
.ts-ad--tool-bottom {
  margin: 28px auto 48px;
}

/* ── 데스크톱 우측 sticky 세로 광고 (160x600) ──
   기본 숨김. 카드(860px) 오른쪽에 160px 광고 + 여백이 들어갈
   공간이 실제로 있을 때만 노출.
   필요폭 ≈ 860(카드) + (160+24 여백)*양쪽여유 → 1280px 기준.
   ★ 좌표는 "카드 오른쪽 가장자리 + 간격" 으로 계산하되,
     화면이 아무리 넓어도 카드를 침범하지 않도록 항상 카드 오른쪽 바깥. */
.ts-ad--side {
  display: none;
}
@media (min-width: 1280px) {
  .ts-ad--side {
    display: block;
    position: fixed;
    top: 130px;                /* nav(약 90px) 아래 */
    /* 카드 오른쪽 가장자리 = (100vw - 860)/2 (오른쪽 여백 시작점).
       광고는 그 오른쪽으로 24px 떨어진 곳에 둠.
       => right = (100vw - 860)/2 - 184  (= 광고폭160 + 간격24를 제한 위치)
       left:auto 로 좌측 기준 해제. */
    right: calc((100vw - 860px) / 2 - 184px);
    left: auto;
    width: 160px;
    height: 600px;
    z-index: 5;
  }
  .ts-ad--side.is-placeholder {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
}

/* 다크 환경 대비(향후 다크모드 대응 시) */
@media (prefers-color-scheme: dark) {
  .ts-ad.is-placeholder {
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.30);
  }
}