/* ──────────────────────────────────────────────────────────────
   CoinSea Responsive Top Banner
   - 색상은 전부 변수로 관리합니다.
   - [LIGHT] 주석: 라이트 모드에서 배경/텍스트 색상
   - [DARK]  주석:  다크  모드에서 배경/텍스트 색상
   ────────────────────────────────────────────────────────────── */
:root{
  --rb-banner-h: 48px;              /* 배너 높이 (44~56px 권장) */

  /* [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-top-banner{
  position: fixed; left:0; right:0; top: calc(-1 * var(--rb-banner-h));
  z-index: 9999;
  height: var(--rb-banner-h);
  display:flex; align-items:center; justify-content:center; gap:10px;

  /* [LIGHT] 기본(라이트) 색 적용 지점 */
  background: var(--rb-bg-light);   /* ← 라이트 배경 */
  color:      var(--rb-fg-light);   /* ← 라이트 텍스트 */
  border-bottom: 1px solid var(--rb-border-l);

  padding: 0 14px;                  /* 세로 패딩 0 → 정수 높이 고정 */
  background-clip: padding-box;
  box-shadow: none;
  transition: top .35s ease;        /* transform 대신 top 사용(경계선 2줄 방지) */
}
.rb-top-banner.show{ top: 0; }

.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; right:8px; top:50%; transform: translateY(-50%);
  background:transparent; border:0; cursor:pointer; line-height:1;
  font-size:22px; color: inherit;   /* 본문색 상속 */
}

/* ── .dark 클래스를 쓰는 페이지의 다크모드 ─────────────────── */
/* [DARK] 다크 배경/텍스트/링크/경계선 지정 지점 */
.dark .rb-top-banner{
  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 클래스를 안 쓰는 페이지: 시스템 다크 자동 대응 ──── */
@media (prefers-color-scheme: dark){
  :root:not(.dark) .rb-top-banner{
    /* [DARK] 시스템 다크 환경 기본색 */
    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);
  }
}

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