/* ==========================================================================
   i-mobile 広告ユニット共通スタイル
   - CLS (Cumulative Layout Shift) 防止
   - レスポンシブ対応
   ========================================================================== */

/* 共通ラッパー */
.imobile-ad-wrapper {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}

/* 広告ラベル */
.imobile-ad-label {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 10px;
  color: #999;
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
}

/* 広告スロット（CLS防止用の固定領域） */
.imobile-ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ------------------------------------
   バナー (468x60)
   ------------------------------------ */
.imobile-ad--banner .imobile-ad-slot {
  min-height: 60px;
  max-width: 100%;
  padding: 8px;
}

/* 468px以下の画面ではバナーを縮小表示 */
@media (max-width: 500px) {
  .imobile-ad--banner .imobile-ad-slot {
    min-height: 50px;
  }
  .imobile-ad--banner .imobile-ad-slot > div {
    transform: scale(0.85);
    transform-origin: center center;
  }
}

@media (max-width: 380px) {
  .imobile-ad--banner .imobile-ad-slot > div {
    transform: scale(0.7);
    transform-origin: center center;
  }
}

/* ------------------------------------
   レクタングル (300x250)
   ------------------------------------ */
.imobile-ad--rectangle .imobile-ad-slot {
  min-height: 250px;
  min-width: 300px;
  padding: 8px;
}

/* サイドバー内レクタングルのレスポンシブ */
@media (max-width: 768px) {
  .imobile-ad--rectangle .imobile-ad-slot {
    min-width: 250px;
  }
}

/* ------------------------------------
   スカイスクレイパー (160x600)
   ------------------------------------ */
.imobile-ad--skyscraper .imobile-ad-slot {
  min-height: 600px;
  min-width: 160px;
  padding: 4px;
}

/* 1024px未満では非表示 */
@media (max-width: 1023px) {
  .imobile-ad--skyscraper {
    display: none !important;
  }
}

/* ------------------------------------
   ページ別の追加スタイル
   ------------------------------------ */

/* Index: メインバナー下 */
.imobile-ad--index-main {
  margin: 12px auto 16px;
  max-width: 500px;
}

/* Index: 右サイドバー (スカイスクレイパー 160x600) */
.imobile-ad--index-sidebar {
  padding: 4px;
}

/* Index: 右サイドバーは768px未満で非表示 */
@media (max-width: 767px) {
  .imobile-ad--index-sidebar {
    display: none !important;
  }
}

/* Archive: トップバナー */
.imobile-ad--archive-top {
  margin-bottom: 6px;
  border-radius: 16px;
}

/* Archive: サイドバー */
.imobile-ad--archive-sidebar {
  margin-top: 20px;
}

/* Archive: カード間インフィード */
.imobile-ad--archive-infeed {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* Chat: AI回答直下 */
.imobile-ad--chat-inline {
  margin: 16px auto;
  max-width: 500px;
}

/* Chat: 左サイドバー固定 */
.imobile-ad--chat-sidebar {
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

.imobile-ad--chat-sidebar .imobile-ad-label {
  position: static;
  display: block;
  text-align: center;
  margin-bottom: 4px;
  background: none;
  padding: 0;
}