/* ──────────────────────────────────────────────────────────────
   CoinSea Responsive Top Banner
   - TEXT/IMAGE 겸용
   - data-mode="text" | "image"
   - JS에서 이미지 모드일 때 --rb-banner-h / --rb-banner-w를 실제 값으로 세팅하면
     본문 밀림, 닫기 버튼 위치, 애니메이션이 정확히 맞습니다.
   ────────────────────────────────────────────────────────────── */

:root{
  --rb-banner-h: 48px;              /* [기본] 배너 높이 (text 모드) */
  --rb-banner-w: 100vw;             /* [기본] 배너 폭 (image 모드에서 JS가 갱신) */

  /* 닫기 버튼 미세 조정(원하면 바꾸세요) */
  --rb-close-top: 2px;
  --rb-close-right: 2px;

  /* [LIGHT] 팔레트 */
  --rb-bg-light:   #f7747a;
  --rb-fg-light:   #ffffff;
  --rb-border-l:   #cfd8d5;

  /* [DARK] 팔레트 */
  --rb-bg-dark:    #0b1220;
  --rb-fg-dark:    #9fd3ff;
  --rb-link-dark:  #b6e2ff;
  --rb-border-d:   #2a2f36;

  /* 이미지 모드용 */
  --rb-image-bg: transparent;
  --rb-image-pad: 0px;
}

/* ===== 공통 컨테이너 ===== */
.rb-top-banner{
  position: fixed; left:0; right:0;
  top: -100vh; /* ✅ 완전히 위로 올려 숨김 */
  z-index: 9999;

  display:flex; align-items:center; justify-content:center; gap:10px;
  background-clip: padding-box;
  box-shadow: none;
  transition: top .35s ease;

  padding-top: env(safe-area-inset-top, 0);
}
.rb-top-banner.show{ top: 0; }

/* ===== TEXT 모드 ===== */
.rb-top-banner[data-mode="text"]{
  height: var(--rb-banner-h);
  padding-left: 14px; padding-right: 14px;

  background: var(--rb-bg-light);
  color:      var(--rb-fg-light);
  border-bottom: 1px solid var(--rb-border-l);
}
.rb-top-banner .rb-link{
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.rb-top-banner .rb-link:hover{ text-decoration: underline; }

/* ===== 공통 닫기 버튼 (강제 리셋) ===== */
.rb-top-banner .rb-close{
  position:absolute !important;
  z-index: 2;
  top: var(--rb-close-top, 8px) !important;
  right: var(--rb-close-right, 8px) !important;
  transform: none !important;    /* ← 예전 translateY(-50%) 무력화 */
  background:transparent; border:0; cursor:pointer; line-height:1;
  font-size:22px; color: inherit;
  /* 터치 타겟 확대(선택) */
  width: 32px; height: 32px; display:inline-flex; align-items:center; justify-content:center;
}

/* PC에서는 이미지가 가운데 정렬이므로 이미지의 우측 안쪽에 정밀 배치 */
@media (min-width:768px){
  .rb-top-banner[data-mode="image"] .rb-close{
    right: calc((100vw - var(--rb-banner-w, 100vw)) / 2 + var(--rb-close-right, 8px)) !important;
    top: var(--rb-close-top, 8px) !important;
  }
}

/* ===== IMAGE 모드 ===== */
.rb-top-banner[data-mode="image"]{
  height: auto;
  background: var(--rb-image-bg);
  border-bottom: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0;
}
.rb-top-banner[data-mode="image"] .rb-media{
  display:block;
  width:100%;
  max-width:100%;
  line-height:0;
}
.rb-top-banner[data-mode="image"] picture,
.rb-top-banner[data-mode="image"] img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit: contain;
}
/* PC: 원본 픽셀 크기 유지 + 가운데 정렬 */
@media (min-width:768px){
  .rb-top-banner[data-mode="image"]{
    justify-content: center;
  }
  .rb-top-banner[data-mode="image"] .rb-media{
    width:auto;
    max-width:100%;
  }
  .rb-top-banner[data-mode="image"] picture,
  .rb-top-banner[data-mode="image"] img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:none;
  }
}

/* ===== 다크 모드 ===== */
.dark .rb-top-banner[data-mode="text"]{
  background:     var(--rb-bg-dark);
  color:          var(--rb-fg-dark);
  border-bottom:  1px solid var(--rb-border-d);
}
.dark .rb-top-banner .rb-link{
  color: var(--rb-link-dark);
}
.dark .rb-top-banner .rb-close{
  color: var(--rb-fg-dark);
}
.dark .rb-top-banner[data-mode="image"]{
  background: var(--rb-image-bg);
  border-bottom: none;
}

/* ===== 시스템 다크 자동 대응 ===== */
@media (prefers-color-scheme: dark){
  :root:not(.dark) .rb-top-banner[data-mode="text"]{
    background:     var(--rb-bg-dark);
    color:          var(--rb-fg-dark);
    border-bottom:  1px solid var(--rb-border-d);
  }
  :root:not(.dark) .rb-top-banner .rb-link{
    color: var(--rb-link-dark);
  }
  :root:not(.dark) .rb-top-banner .rb-close{
    color: var(--rb-fg-dark);
  }
  :root:not(.dark) .rb-top-banner[data-mode="image"]{
    background: var(--rb-image-bg);
    border-bottom: none;
  }
}

/* ===== 본문 밀림 ===== */
body.rb-has-top-banner{ padding-top: calc(var(--rb-banner-h) + 1px); }

/* ===== 포커스 접근성 ===== */
.rb-top-banner a:focus-visible,
.rb-top-banner button:focus-visible{
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 2px;
}
.dark .rb-top-banner a:focus-visible,
.dark .rb-top-banner button:focus-visible{
  outline: 2px solid rgba(180,220,255,.8);
}