/* Site ads: affiliate creatives and third-party banner placements */

/* 공통 링크 */
.mootoon-affiliate-link {
  display: block;
  width: 100%;
  overflow: hidden;

  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);

  line-height: 0;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.mootoon-affiliate-link:hover,
.mootoon-affiliate-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  outline: none;
}

/* 공통 이미지 */
.mootoon-affiliate-image {
  display: block;
  width: 100%;
  height: auto;
}

/* 채팅 화면 인라인 배너 */
.mootoon-affiliate-inline {
  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 900px;
  margin: 10px auto;
  padding: 6px 2px;

  overflow: hidden;
  box-sizing: border-box;

  background-color: #ffffff;
  border-radius: 8px;
}

/* PC 좌우 빈 공간에 현재 광고 이미지를 흐리게 표시 */
.mootoon-affiliate-inline::before {
  content: "";

  position: absolute;
  inset: -30px;
  z-index: 0;

  background-image: var(--mootoon-banner-bg);
  background-position: center;
  background-size: cover;

  filter: blur(25px);
  opacity: 0.2;
  transform: scale(1.08);

  pointer-events: none;
}

/* 실제 640x240 배너는 흐린 배경 위에 표시 */
.mootoon-affiliate-inline .mootoon-affiliate-link {
  position: relative;
  z-index: 1;

  width: min(100%, 640px);
  margin: 0 auto;
}

/* 방채팅 목록 최하단 배너 */
.mootoon-affiliate-inline--custom-chat {
  clear: both;
}

/* 커뮤니티 피드 배너 */
.community-feed-ad-slot {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  border-bottom: 1px solid #edf1f3;
  background: var(--hf-color-surface-soft);
}

.mootoon-affiliate-feed {
  width: 100%;
  max-width: 640px;
  margin: 16px auto;

  overflow: hidden;
  box-sizing: border-box;
}

.mootoon-affiliate-feed .mootoon-affiliate-link {
  width: 100%;
  margin: 0 auto;
}

/* 모바일 */
@media (max-width: 768px) {
  .mootoon-affiliate-inline {
    max-width: 640px;
    padding: 0;

    background: transparent;
    border: none;
  }

  /* 모바일은 좌우 여백이 없으므로 흐린 배경 제거 */
  .mootoon-affiliate-inline::before {
    display: none;
  }

  .mootoon-affiliate-inline .mootoon-affiliate-link {
    width: 100%;
  }

  .community-feed-ad-slot {
    padding: 0 calc(var(--hf-site-inline-space) / 2);
  }

  .mootoon-affiliate-feed {
    margin: 14px auto;
  }

  .mootoon-affiliate-link {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
  }

  .mootoon-affiliate-link:hover,
  .mootoon-affiliate-link:focus {
    transform: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
  }
}

/* Mobisense / Mobon iframe units */
.mobon-banner {
  background: #f2f2f2;
}

.mobon-banner::before {
  display: none;
}

.mobon-banner-frame {
  display: block;
  margin: 0 auto;
  overflow: hidden;
  border: 0;
}

.mobon-banner--horizontal {
  min-height: 107px;
}

.mobon-banner-frame--horizontal {
  width: 100%;
  max-width: 640px;
  height: 107px;
}

.mobon-banner--chat-sidebar,
.mobon-banner-frame--chat-sidebar {
  width: 200px;
  max-width: 200px;
  height: 200px;
}

.mobon-banner--mobile-random-ended,
.mobon-banner-frame--mobile-random-ended {
  width: 320px;
  max-width: 320px;
  height: 100px;
}

.mobon-banner--mobile-random-ended {
  margin: 8px 0 !important;
}

.mobon-banner--guide-sidebar,
.mobon-banner-frame--guide-sidebar {
  width: 300px;
  max-width: 300px;
  height: 250px;
}

.site-ad-slot {
  box-sizing: border-box;
}

.site-ad-slot--chat-sidebar {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;

  margin: 10px auto 0;
  padding: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  overflow: hidden;

  background: #f2f4f5;
  border: 1px solid #e5eaed;
  border-radius: 12px;
}

.site-ad-guide-stack {
  position: sticky;
  top: 78px;
  display: grid;
  gap: 16px;
}

.site-ad-guide-shell {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  background: #f2f4f5;
  border: 1px solid #e5eaed;
  border-radius: 16px;
}

.site-ad-slot--guide-sidebar {
  width: 300px;
  height: 250px;
  flex: 0 0 300px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .site-ad-slot--chat-sidebar {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .site-ad-guide-stack,
  .site-ad-guide-shell,
  .site-ad-slot--guide-sidebar {
    display: none !important;
  }
}

/* Mobile room-list feed ads. Placement is owned by site-ads.js. */
.room-list-ad-slot {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background: var(--hf-color-surface-soft);
  border-bottom: 1px solid var(--hf-color-line);
  overflow-anchor: none;
}

.room-list-ad-slot[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .room-list-ad-slot {
    padding: 0 calc(var(--hf-site-inline-space) / 2);
  }

  .room-list-ad-slot .mootoon-affiliate-feed {
    margin: 14px auto;
  }
}