/* RTP — Shared Component Styles */

/* ── Reset (scoped) ─────────────────────────────────── */
.rtp-page * { box-sizing: border-box; }
.rtp-page { font-family: var(--rtp-font-ko); -webkit-font-smoothing: antialiased; }

/* ── Layout ─────────────────────────────────────────── */
.rtp-shell {
  min-height: 100vh;
  background: var(--rtp-white);
  display: flex;
  flex-direction: column;
}
.rtp-container {
  width: 100%;
  max-width: 432px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--rtp-white);
  min-height: 100vh;
}
.rtp-page-bg {
  background: var(--rtp-bg);
  flex: 1;
}

/* ── Header ──────────────────────────────────────────── */
.rtp-header {
  padding: 50px 20px 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--rtp-white);
  position: relative;
  z-index: 5;
}
.rtp-header--dark { background: #0d0d0d; }
.rtp-header--hero-dark { background: #15171c; padding: 50px 20px 20px; }
.rtp-header--hero-dark .rtp-header__logo { color: #fff; }
.rtp-header__cta--orange {
  font-size: 14px; font-weight: 700; color: var(--rtp-orange);
  text-decoration: none; padding: 8px 4px;
  min-height: 44px; display: inline-flex; align-items: center;
}

.rtp-header__logo {
  font-family: var(--rtp-font-num);
  font-size: 20px;
  font-weight: 800;
  color: var(--rtp-orange);
  text-decoration: none;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  margin: -8px -4px;
}
img.rtp-header__logo {
  height: 28px;
  width: auto;
  display: block;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ── Tabs (PROFILE / STATS / GAMES) ─────────────────── */
.rtp-tabs {
  display: flex;
  border-bottom: 1px solid var(--rtp-line-soft);
  background: var(--rtp-white);
}
.rtp-tab {
  flex: 1;
  text-align: center;
  padding: 16px 0 12px;
  position: relative;
  font-family: var(--rtp-font-num);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--rtp-ink-4);
  text-decoration: none;
  transition: color var(--rtp-t-base) var(--rtp-ease-out);
}
.rtp-tab--active { color: var(--rtp-ink); }
.rtp-tab--active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--rtp-orange);
  border-radius: 2px;
  transition: left var(--rtp-t-base) var(--rtp-ease-out);
}
/* When shared indicator is used, suppress the pseudo-element bar */
.rtp-tabs[data-tabs] .rtp-tab--active::after { display: none; }
/* JS-managed active state mirrors CSS active state */
.rtp-tabs__btn--active { color: var(--rtp-ink); }

/* ── Buttons ─────────────────────────────────────────── */
.rtp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: var(--rtp-font-ko);
  font-weight: 700;
  border-radius: var(--rtp-radius-lg);
  transition: background var(--rtp-t-base) var(--rtp-ease-out),
              transform var(--rtp-t-base) var(--rtp-ease-out),
              box-shadow var(--rtp-t-base) var(--rtp-ease-out);
  text-decoration: none;
  min-height: 44px;
}
.rtp-btn--primary {
  background: var(--rtp-ink);
  color: var(--rtp-white);
  font-size: 15px;
  height: 48px;
  padding: 0 20px;
}
.rtp-btn--primary:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.rtp-btn--primary:active { transform: translateY(0); box-shadow: none; }

.rtp-btn--lg { height: 56px; font-size: 16px; padding: 0 24px; }
.rtp-btn--sm { height: 36px; font-size: 13px; padding: 0 14px; border-radius: var(--rtp-radius-sm); }
.rtp-btn--full { width: 100%; }

.rtp-btn--ghost {
  background: var(--rtp-bg);
  color: var(--rtp-ink);
  font-size: 14px;
  height: 48px;
  padding: 0 20px;
}
.rtp-btn--ghost:hover { background: var(--rtp-line); }

.rtp-btn--fab {
  background: var(--rtp-ink);
  color: var(--rtp-white);
  font-size: 15px;
  height: 56px;
  padding: 0 28px;
  border-radius: var(--rtp-radius-pill);
  font-weight: 800;
}

.rtp-btn--orange {
  background: var(--rtp-orange);
  color: var(--rtp-white);
}
.rtp-btn--orange:hover { filter: brightness(0.94); transform: translateY(-1px); box-shadow: var(--rtp-shadow-cta); }

/* ── Chips ───────────────────────────────────────────── */
.rtp-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--rtp-radius-pill);
  font-family: var(--rtp-font-ko);
  font-size: 13px;
  font-weight: 600;
  background: var(--rtp-bg);
  color: var(--rtp-ink-2);
  cursor: pointer;
  transition: background var(--rtp-t-fast);
}
.rtp-chip--active { background: var(--rtp-ink); color: var(--rtp-white); }
.rtp-chip--hero {
  height: 22px;
  padding: 0 9px;
  border-radius: var(--rtp-radius-sm);
  font-family: var(--rtp-font-num);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.rtp-chip--hero-pos { background: var(--rtp-orange); color: #fff; }
.rtp-chip--hero-num { background: rgba(255,255,255,0.08); color: #fff; }

/* ── Search Bar ─────────────────────────────────────── */
.rtp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--rtp-radius-lg);
  background: var(--rtp-bg);
  border: 1.5px solid transparent;
  transition: border-color var(--rtp-t-fast), background var(--rtp-t-fast);
}
.rtp-search:focus-within {
  border-color: var(--rtp-orange);
  background: var(--rtp-white);
}
.rtp-search input {
  flex: 1;
  min-width: 0; /* fix-list #23 — <input> 고유 폭(size=20, 글꼴 의존)보다 줄어들 수 있게. 없으면 좁은 화면에서 옆 버튼이 밀려나 문서가 넓어진다 */
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--rtp-font-ko);
  font-size: var(--bb-text-base); /* iOS focus 확대 방지 — R151 */
  font-weight: 500;
  color: var(--rtp-ink);
}
.rtp-search input::placeholder { color: var(--rtp-ink-3); }
.rtp-search__icon { color: var(--rtp-ink-3); flex-shrink: 0; }

/* ── Form Fields ─────────────────────────────────────── */
.rtp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
/* ⭐ [hidden] 가드 — 특정도(0,2,0)로 위 `display:flex`(0,1,0)를 이긴다.
   (선례: card-studio.css `.cs-card__placeholder[hidden]`)
   ⚠️ 이게 없으면 `el.hidden = true` 가 **아무 일도 안 한다**. UA 스타일시트의
   `[hidden]{display:none}` 은 특정도 (0,1,0) 이라 클래스의 display 에 진다.
   📏 2026-09-22 flow 테스트가 실제로 이걸로 잡았다: identity_form 의 보호자 관계
   칸(`.rtp-field[hidden]`)이 **만 14세 이상 사용자에게도 항상 보였다** — 서버
   테스트·캡처 판독 둘 다 초록이었다(캡처는 성인 생년을 입력하기 전 화면이었다). */
.rtp-field[hidden] { display: none; }
.rtp-field__label {
  font-family: var(--rtp-font-ko);
  font-size: 12px;
  font-weight: 600;
  color: var(--rtp-ink-2);
}
.rtp-field__input {
  height: 52px;
  padding: 0 16px;
  border-radius: var(--rtp-radius-lg);
  border: 1.5px solid var(--rtp-line);
  background: var(--rtp-white);
  font-family: var(--rtp-font-ko);
  font-size: var(--bb-text-base); /* iOS focus 확대 방지 — R151 */
  font-weight: 500;
  color: var(--rtp-ink);
  width: 100%;
  transition: border-color var(--rtp-t-fast);
}
.rtp-field__input:focus { outline: none; border-color: var(--rtp-ink); }
.rtp-field__input--valid { border-color: var(--rtp-orange); }
.rtp-field__input--error { border-color: var(--rtp-error); }
.rtp-field__hint { font-size: 11px; font-weight: 500; color: var(--rtp-ink-3); margin-left: 4px; }
.rtp-field__hint--ok { color: var(--rtp-orange); }
.rtp-field__hint--err { color: var(--rtp-error); }

/* ── Dark Hero Card (ProfileF / FlowOther) ───────────── */
.rtp-hero {
  border-radius: var(--rtp-radius-3xl);
  background: var(--rtp-hero-dark);
  border-top: 2px solid var(--rtp-orange);
  padding: 16px 18px 16px;
  position: relative;
  overflow: visible;
}
/* my_tab R3 — 게스트 데모 '예시 데이터' 배지(히어로 상단, .bb-badge 재사용) */
.rtp-hero__demo-badge { display: inline-flex; margin-bottom: 10px; }
.rtp-hero__body { display: flex; gap: 14px; align-items: stretch; }
.rtp-hero__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rtp-hero__team {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rtp-hero__team-bar { width: 3px; height: 11px; background: var(--rtp-orange); border-radius: 1px; flex-shrink: 0; }
.rtp-hero__team-name {
  font-family: var(--rtp-font-ko);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
}
.rtp-hero__name {
  margin-top: 10px;
  font-family: var(--rtp-font-ko);
  font-size: 30px;
  font-weight: 800;
  color: var(--rtp-orange);
  letter-spacing: -1px;
  line-height: 1;
}
.rtp-hero__chips { display: flex; gap: 6px; margin-top: 10px; align-items: center; }

/* ── Photo Slot ──────────────────────────────────────── */
.rtp-photo-slot {
  width: 116px;
  height: 116px;
  flex-shrink: 0;
  position: relative;
  border-radius: var(--rtp-radius-xl);
  overflow: hidden;
  background: var(--rtp-hero-inner);
  cursor: pointer;
}
.rtp-photo-slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.rtp-photo-slot__img--visible { display: block; }
.rtp-photo-slot__input { display: none; }
.rtp-photo-slot__svg { position: absolute; inset: 0; }

/* ── Hero Stats Row ──────────────────────────────────── */
.rtp-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.rtp-hero__stat { text-align: center; }
/* signup_claim_first — 득점 마스킹 캡션 등 다크 히어로 카드 위 보조 문구 */
.rtp-hero__caption {
  text-align: center;
  font-size: var(--bb-text-2xs);
  color: var(--rtp-hero-caption);
  margin: 6px 0 0;
}
/* claim_dock_visibility(2026-08-07) — 익명 전용 "로그인하고 내 평균 득점 보기".
   다크 히어로 카드 위 저강도 고스트 필(하단 dock 이 primary — CTA 위계 분리).
   탭타겟 44px 은 line-height 대신 padding 으로 확보. */
.rtp-hero__login-cta {
  display: block;
  margin: 10px auto 0;
  width: fit-content;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: var(--bb-text-xs);
  font-weight: 600;
  text-decoration: none;
  word-break: keep-all;
}
.rtp-hero__login-cta:active { background: rgba(255, 255, 255, 0.16); }
.rtp-hero__stat-label {
  font-family: var(--rtp-font-num);
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.rtp-hero__stat-value {
  font-family: var(--rtp-font-num);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.6px;
}

/* ── Inline Edit ─────────────────────────────────────── */
[data-editable] {
  outline: none;
  cursor: text;
  border-radius: 2px;
  transition: background var(--rtp-t-fast);
}
[data-editable]:focus { background: rgba(255,107,53,0.18); }

/* ── Game Card A ─────────────────────────────────────── */
.rtp-gamecard {
  background: var(--rtp-white);
  border-radius: 16px;
  border: 1px solid var(--rtp-line);
  padding: 16px 18px;
  width: 100%;
}
.rtp-gamecard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rtp-gamecard__meta { font-size: 11px; color: var(--rtp-ink-3); font-weight: 500; letter-spacing: 0.2px; }
.rtp-gamecard__meta span { font-family: var(--rtp-font-num); font-weight: 600; }
.rtp-gamecard__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 24px;
  padding: 0 8px;
  border-radius: 4px;
  font-family: var(--rtp-font-num);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.rtp-gamecard__badge--win { background: var(--rtp-orange-soft); color: var(--rtp-orange); }
.rtp-gamecard__badge--loss { background: var(--rtp-bg); color: var(--rtp-loss); }
.rtp-gamecard__badge--dnp { background: var(--rtp-line-soft); color: var(--rtp-ink-3); }
.rtp-gamecard__badge--tie { background: var(--rtp-bg); color: var(--rtp-ink-3); }
/* space-between 만 있고 gap 이 없어서, 팀명이 길면(예: 흥익사대부속고등학교) 남는 공간이
   0 이 되며 팀명이 스코어에 그대로 붙어버렸다("경복고등학교99 : 54흥익사대부속고등학교").
   gap 으로 최소 간격을 보장하고, 팀명은 줄어들 수 있게(min-width:0) 만들어 넘치면
   말줄임 처리한다. 스코어는 flex:none 이라 절대 줄어들지 않는다. */
.rtp-gamecard__score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.rtp-gamecard__team {
  font-size: 14px;
  font-weight: 700;
  color: var(--rtp-ink);
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rtp-gamecard__team:last-child { text-align: right; }
.rtp-gamecard__score-num {
  font-family: var(--rtp-font-num);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  flex: none;
}
.rtp-gamecard__score-sep { color: var(--rtp-ink-3); font-weight: 500; }
.rtp-gamecard__divider { height: 1px; background: var(--rtp-line-soft); margin: 12px -2px; }
.rtp-gamecard__stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.rtp-gamecard__stats--5col { grid-template-columns: repeat(5, 1fr); }
.rtp-gamecard__stats--6col { grid-template-columns: repeat(6, 1fr); }
.rtp-gamecard__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}
.rtp-gamecard__stat + .rtp-gamecard__stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--rtp-line-soft);
}
.rtp-gamecard__stat-val {
  font-family: var(--rtp-font-num);
  font-size: 18px;
  font-weight: 700;
  color: var(--rtp-ink);
  letter-spacing: -0.3px;
}
.rtp-gamecard__stat-val--accent { color: var(--rtp-orange); }
.rtp-gamecard__stat-key { font-size: 10px; color: var(--rtp-ink-3); font-weight: 500; }

/* ── Progress Bar (step) ─────────────────────────────── */
.rtp-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  margin: 0 8px;
}
.rtp-progress__track {
  flex: 1;
  height: 4px;
  background: var(--rtp-line-soft);
  border-radius: 2px;
}
.rtp-progress__fill {
  height: 4px;
  background: var(--rtp-ink);
  border-radius: 2px;
  transition: width var(--rtp-t-base) var(--rtp-ease-out);
}
.rtp-progress__label {
  font-family: var(--rtp-font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--rtp-ink-3);
  white-space: nowrap;
}

/* ── Step Header ─────────────────────────────────────── */
.rtp-step-header {
  padding: 50px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rtp-back-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--rtp-ink);
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

/* ── Section Label ───────────────────────────────────── */
.rtp-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rtp-section-label__title { font-family: var(--rtp-font-ko); font-size: 12px; font-weight: 700; color: var(--rtp-ink); }
.rtp-section-label__action { font-family: var(--rtp-font-ko); font-size: 11px; color: var(--rtp-ink-3); font-weight: 600; }

/* ── Season Avg Grid ─────────────────────────────────── */
.rtp-season-avg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 18px 14px;
  border: 1px solid var(--rtp-line);
  border-radius: var(--rtp-radius-xl);
  margin-bottom: 20px;
}
.rtp-season-avg__stat { text-align: center; }
.rtp-season-avg__val {
  font-family: var(--rtp-font-num);
  font-size: 22px;
  font-weight: 800;
  color: var(--rtp-ink);
  letter-spacing: -0.5px;
}
.rtp-season-avg__val--accent { color: var(--rtp-orange); }
.rtp-season-avg__key { font-size: 10px; color: var(--rtp-ink-3); font-weight: 600; margin-top: 2px; }

/* ── Lock/Blur overlay (FlowOther) ──────────────────── */
.rtp-blurred { filter: blur(6px); pointer-events: none; user-select: none; }
.rtp-lock-overlay {
  padding: 16px 18px;
  border-radius: var(--rtp-radius-xl);
  background: var(--rtp-white);
  box-shadow: var(--rtp-shadow-modal);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}
.rtp-lock-overlay__icon { font-size: 20px; flex-shrink: 0; }
.rtp-lock-overlay__text { font-size: 13px; color: var(--rtp-ink-2); flex: 1; line-height: 1.5; }

/* ── Modal close button ──────────────────────────────── */
.rtp-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--rtp-ink-2);
  border-radius: var(--rtp-radius-md);
  -webkit-tap-highlight-color: transparent;
}
.rtp-modal__close:hover { background: var(--rtp-line); }

/* ── Recent games viewall button ─────────────────────── */
.rtp-recent__viewall {
  font-size: 13px;
  color: var(--rtp-orange);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Compare CTA Banner ──────────────────────────────── */
.rtp-cta-banner {
  padding: 16px 18px;
  border-radius: var(--rtp-radius-xl);
  background: var(--rtp-white);
  border: 1px solid var(--rtp-line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rtp-cta-banner__copy { flex: 1; }
.rtp-cta-banner__title { font-size: 13px; font-weight: 700; color: var(--rtp-ink); }
.rtp-cta-banner__sub { font-size: 11px; color: var(--rtp-ink-3); margin-top: 2px; }

/* ── Error message ───────────────────────────────────── */
.rtp-error-msg {
  font-size: 13px;
  color: var(--rtp-error);
  background: rgba(255,66,66,0.08);
  padding: 10px 14px;
  border-radius: var(--rtp-radius-md);
  margin-bottom: 16px;
  /* fix-list #28: 한국어 단어 중간 줄바꿈 방지(어절 단위), 긴 영문·URL 은 넘치지 않게 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── Paywall bottom sheet ────────────────────────────── */
.rtp-paywall-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,18,24,0.42);
  z-index: 40;
}
.rtp-paywall-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 432px;
  margin: 0 auto;
  background: var(--rtp-white);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 28px 24px 36px;
  z-index: 50;
  animation: rtp-sheet-up var(--rtp-t-slow) var(--rtp-ease-out);
}
@keyframes rtp-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.rtp-paywall-handle {
  width: 40px; height: 4px;
  background: var(--rtp-line);
  border-radius: 2px;
  margin: 0 auto 18px;
}

/* ── Position Grid ───────────────────────────────────── */
.rtp-pos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.rtp-pos-btn {
  padding: 14px 0;
  border-radius: var(--rtp-radius-md);
  text-align: center;
  border: 1px solid var(--rtp-line);
  background: var(--rtp-white);
  font-family: var(--rtp-font-num);
  font-size: 14px;
  font-weight: 800;
  color: var(--rtp-ink-2);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background var(--rtp-t-fast), border-color var(--rtp-t-fast), color var(--rtp-t-fast);
  min-height: 44px;
}
.rtp-pos-btn--active {
  background: var(--rtp-ink);
  border-color: var(--rtp-ink);
  color: var(--rtp-white);
}

/* ── Player list row ─────────────────────────────────── */
.rtp-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rtp-line-soft);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.rtp-player-row:last-child { border-bottom: none; }
.rtp-player-row__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rtp-bg);
  flex-shrink: 0;
  overflow: hidden;
}
.rtp-player-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rtp-player-row__body { flex: 1; min-width: 0; }
.rtp-player-row__name { font-size: 15px; font-weight: 600; color: var(--rtp-ink); }
.rtp-player-row__meta { font-size: 12px; color: var(--rtp-ink-3); margin-top: 2px; }

/* ── Match card ──────────────────────────────────────── */
.rtp-match-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--rtp-line);
  border-radius: var(--rtp-radius-xl);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.rtp-match-card__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--rtp-bg);
  flex-shrink: 0;
}
.rtp-match-card__name { font-size: 17px; font-weight: 700; color: var(--rtp-ink); }
.rtp-match-card__meta { font-size: 12px; color: var(--rtp-ink-3); margin-top: 3px; }
.rtp-match-card__cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--rtp-blue-ink);
  white-space: nowrap;
  flex-shrink: 0;
}
/* probabilistic CTA: % 를 주 액션으로, 탭하면 프로필 둘러보기 */
.rtp-match-card__cta--prob {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.rtp-match-card__cta-pct {
  font-family: var(--rtp-font-num);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: var(--rtp-blue-ink);
}
.rtp-match-card__cta-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--rtp-ink-3);
}
/* form wrapper: strip default form/button chrome so card layout is identical */
.rtp-match-card-form {
  margin: 0;
  padding: 0;
}
/* button variant of match card */
button.rtp-match-card {
  width: 100%;
  background: var(--rtp-white);
  border: 1px solid var(--rtp-line);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
button.rtp-match-card--claim {
  border-color: var(--rtp-blue);
}
button.rtp-match-card--claim:hover,
button.rtp-match-card--claim:focus-visible {
  background: var(--rtp-blue-soft);
  outline: 2px solid var(--rtp-blue);
  outline-offset: 2px;
}

/* ── Stats chart toggle chips ────────────────────────── */
.rtp-stat-toggles {
  display: flex;
  gap: 8px;
  margin: 16px 0 8px;
}
.rtp-stat-toggle {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  border-radius: var(--rtp-radius-md);
  background: var(--rtp-bg);
  color: var(--rtp-ink-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  min-height: 44px;
  transition: background var(--rtp-t-fast), color var(--rtp-t-fast);
}
.rtp-stat-toggle--active { background: var(--rtp-ink); color: var(--rtp-white); }

/* ── SVG Chart ───────────────────────────────────────── */
.rtp-chart { width: 100%; overflow: visible; }
.rtp-chart__line {
  fill: none;
  stroke: var(--rtp-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rtp-chart__area { fill: rgba(49,130,246,0.08); }
.rtp-chart__dot { fill: var(--rtp-blue); }

/* ── CTA Hero Button ─────────────────────────────────── */
.rtp-cta--hero {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--rtp-cta-hero-start) 0%, var(--rtp-cta-hero-end) 100%);
  color: #fff; font-size: 18px; font-weight: 800; line-height: 1.2;
  padding: 14px 28px; border-radius: 14px;
  box-shadow: 0 10px 28px var(--rtp-cta-hero-shadow);
  border: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
  text-decoration: none;
}
.rtp-cta--hero:hover { transform: translateY(-2px); }
.rtp-cta--hero:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .rtp-cta--hero, .rtp-cta--hero:hover, .rtp-cta--hero:active {
    transform: none; transition: none;
  }
}

/* ── Tab indicator ───────────────────────────────────── */
.rtp-tabs { position: relative; }
.rtp-tabs[data-tabs] { display: flex; gap: 4px; }
.rtp-tabs__indicator {
  position: absolute; bottom: 0; left: 0; height: 3px; width: 100px;
  background: var(--rtp-orange); border-radius: 2px;
  transition: transform .2s cubic-bezier(.2,.7,.4,1);
  pointer-events: none;
}
.rtp-tabpanels { overflow: hidden; }
.rtp-tabpanels__wrapper { display: flex; width: 300%; transition: transform .2s; }
.rtp-tabpanel { width: 33.333%; }
@media (prefers-reduced-motion: reduce) {
  .rtp-tabs__indicator, .rtp-tabpanels__wrapper { transition: none; }
}

/* ── Button press feedback ───────────────────────────── */
.rtp-btn:active, button.rtp-cta--hero:active { transform: scale(.96); }

/* ── Season stats row (StatsC) ───────────────────────── */
.rtp-season-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
}
.rtp-season-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--rtp-radius-pill);
  background: var(--rtp-bg);
  font-family: var(--rtp-font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--rtp-ink);
}

/* ── User Menu (⋮ hamburger) ─────────────────────────── */
.rtp-user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.rtp-user-menu__trigger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--rtp-ink-2);
  border-radius: var(--rtp-radius-md);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--rtp-t-fast);
}
.rtp-user-menu__trigger:hover { background: var(--rtp-line-soft); }
.rtp-header--hero-dark .rtp-user-menu__trigger { color: rgba(255,255,255,0.6); }
.rtp-header--hero-dark .rtp-user-menu__trigger:hover { background: rgba(255,255,255,0.08); }

.rtp-user-menu__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 148px;
  background: var(--rtp-white);
  border: 1px solid var(--rtp-line);
  border-radius: var(--rtp-radius-xl);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;
  overflow: hidden;
}
.rtp-user-menu__dropdown[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .rtp-user-menu__dropdown--open {
    animation: rtp-menu-in 0.12s var(--rtp-ease-out) both;
  }
}
@keyframes rtp-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.rtp-user-menu__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  font-family: var(--rtp-font-ko);
  font-size: 14px;
  font-weight: 600;
  color: var(--rtp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rtp-line-soft);
  transition: background var(--rtp-t-fast);
  white-space: nowrap;
}
.rtp-user-menu__item:last-child { border-bottom: none; }
.rtp-user-menu__item:hover { background: var(--rtp-bg); }

.rtp-user-menu__item--btn {
  background: none;
  border: none;
  border-bottom: 1px solid var(--rtp-line-soft);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--rtp-font-ko);
  font-size: 14px;
  font-weight: 600;
  color: var(--rtp-error, #FF4242);
}
.rtp-user-menu__item--btn:last-child { border-bottom: none; }
.rtp-user-menu__item--btn:hover { background: var(--rtp-bg); }

.rtp-user-menu__logout-form { display: contents; }

/* ── no-link page body (my_profile_no_link) ─────────── */
.rtp-no-link-body {
  padding: 40px 24px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.rtp-no-link-emoji {
  font-size: 48px;
  margin-bottom: 16px;
}
.rtp-no-link-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--rtp-ink);
  margin: 0 0 8px;
}
.rtp-no-link-sub {
  font-size: 14px;
  color: var(--rtp-ink-2);
  line-height: 1.6;
  margin: 0 0 32px;
}
.rtp-no-link-home {
  margin-top: 12px;
}
/* 확인 중(identity_reviewing): 안내 문장이 본문 안에서 공 아이콘 바로 위에 붙는다(한 묶음, 빈 틈 없음). */
.rtp-no-link-body .rtp-no-link-tip {
  align-self: stretch;
  margin: 0 0 24px;
  text-align: center;
}

/* ── VOD button on game cards ────────────────────────── */
.rtp-gamecard__top-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rtp-gamecard__vod {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 4px;
  background: var(--rtp-line-soft, #F2F4F6);
  color: var(--rtp-ink-2);
  text-decoration: none;
  border: 1px solid var(--rtp-line, #E5E8EB);
  transition: background var(--rtp-t-fast), color var(--rtp-t-fast);
  -webkit-tap-highlight-color: transparent;
}
.rtp-gamecard__vod:hover {
  background: var(--rtp-orange-soft, rgba(255,107,53,0.1));
  color: var(--rtp-orange);
  border-color: var(--rtp-orange);
}

/* ── 카드 스튜디오 진입 버튼 (stat_card_studio R1) ───────
   시각 크기는 VOD 아이콘과 정렬(24px)하되, 의사요소로 44px 탭타겟을 확보한다
   (인접 배지/텍스트는 클릭 불가 요소라 히트 영역이 겹쳐도 안전). */
.rtp-gamecard__card-studio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 4px;
  background: var(--bb-primary-soft, #FFEEE6);
  color: var(--bb-primary, #FF6B35);
  text-decoration: none;
  border: 1px solid var(--bb-primary, #FF6B35);
  transition: background var(--rtp-t-fast), color var(--rtp-t-fast);
  -webkit-tap-highlight-color: transparent;
}
.rtp-gamecard__card-studio::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--bb-tap-target, 44px);
  height: var(--bb-tap-target, 44px);
  transform: translate(-50%, -50%);
}
.rtp-gamecard__card-studio:hover {
  background: var(--bb-primary, #FF6B35);
  color: #fff;
}
/* 2026-07-22 사용자 요청 — 카드 스튜디오(인스타 카드) 진입 버튼 임시 숨김.
   display:inline-flex 가 [hidden] UA 스타일을 이기므로 명시 규칙 필요. 기능·URL 은 유지. */
.rtp-gamecard__card-studio[hidden] { display: none; }

/* ── Incomplete inline banner (R21) ──────────────────── */
.rtp-incomplete-inline-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 12px 16px;
  border-radius: var(--rtp-radius-xl);
  background: var(--rtp-orange-soft, rgba(255,107,53,0.08));
  border: 1px solid rgba(255,107,53,0.2);
}
.rtp-incomplete-inline-banner__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--rtp-ink);
  flex: 1;
  line-height: 1.4;
}
.rtp-incomplete-inline-banner__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--rtp-orange);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.rtp-incomplete-inline-banner__link:hover { text-decoration: underline; }

/* ── Footer Nav (R33) ────────────────────────────────── */
.rtp-footer-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  background: var(--rtp-white);
  border-top: 1px solid var(--rtp-line);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* 높이는 내용이 아니라 토큰으로 고정(border-box: 위 border·safe-area padding 포함 → 총 62px + safe-area).
     내용 높이로 두면 실기기 iOS Safari 에서 62px 미만으로 그려져, bottom 을 같은 토큰으로 잡은
     본인인증 배너(.rtp-identity-banner, 메뉴 위 10px 에 뜨는 다크 카드)와 메뉴 사이 간격이 흔들렸다.
     (2026-10-05 이후 배너는 메뉴에 붙지 않고 10px 떠 있다 — 틈 = --bb-verify-banner-inset.) */
  box-sizing: border-box;
  height: calc(var(--rtp-footer-nav-h) + env(safe-area-inset-bottom, 0px));
}
.rtp-footer-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;                   /* 세로 여백은 nav 고정 높이 안에서 justify-content 로 가운데 — 폰트가 높이를 밀지 않게 */
  text-decoration: none;
  color: var(--rtp-ink-3);
  transition: color var(--rtp-t-fast) var(--rtp-ease-out);
}
.rtp-footer-nav__item--active { color: var(--rtp-orange); }
.rtp-footer-nav__icon { width: 24px; height: 24px; display: block; }
.rtp-footer-nav__label { font-size: 11px; font-weight: 600; letter-spacing: 0.2px; }
.rtp-footer-nav__item--active .rtp-footer-nav__icon { stroke-width: 2.2; }

/* ── Body bottom padding for footer (R33) ────────────── */
.rtp-container { padding-bottom: 64px; }

/* R150(goal_flow_v3 mini E) — 법적 푸터는 홈 탭에만 남았다. 그 전엔 푸터(`--has-nav` 88px)가 모든 화면의 하단 메뉴 여백을 맡았다.
   푸터가 없는 화면은 컨테이너가 맡는다: 메뉴 높이 + safe-area + 여유 26px(= 옛 88px 와 같은 값. 62+26).
   - 메뉴 유무 신호는 body.rtp-has-nav(_rtp_base 가 `user.is_authenticated or open_mode` 로 단다). 메뉴 없는 화면은 위 64px 그대로.
   - 홈은 body.rtp-has-legal-footer 로 제외 — 푸터 88px + 컨테이너 64px 그대로(이중 여백 방지).
   - ⚠️ 자체 padding-bottom 을 가진 `.rtp-container--acct`(14화면)·`.st-container`(설정 3화면)는 `:not()` 으로 제외 — 이 규칙의
     특이도가 더 높아 안 빼면 둘의 계산 값이 바뀐다(W10). claim dock 의 `--with-dock` 블록은 컨테이너 안쪽 자체 padding 이라 무관. */
body.rtp-has-nav:not(.rtp-has-legal-footer) .rtp-container:not(.rtp-container--acct):not(.st-container) {
  padding-bottom: calc(var(--rtp-footer-nav-h) + env(safe-area-inset-bottom, 0px) + 26px);
}
/* 본인인증 띠(fixed, 메뉴 바로 위)가 맨 아래 내용을 가리지 않게 띠 높이만큼 더한다 */
body.rtp-has-nav.rtp-has-identity-banner:not(.rtp-has-legal-footer) .rtp-container:not(.rtp-container--acct):not(.st-container) {
  padding-bottom: calc(var(--rtp-footer-nav-h) + env(safe-area-inset-bottom, 0px) + 26px + var(--rtp-identity-banner-h));
}

/* ── Photo Slot hidden (R35) ─────────────────────────── */
.rtp-photo-slot { display: none !important; }

/* ── 정책 푸터 (PG 심사: 이용약관/개인정보/환불/사업자정보 상시 노출) ── */
.rtp-legal-footer {
  border-top: 1px solid var(--rtp-line, #E5E8EB);
  padding: 22px 20px 28px;
  text-align: center;
  background: var(--rtp-white, #fff);
}
.rtp-legal-footer--has-nav { padding-bottom: 88px; } /* 로그인 시 하단 고정 nav 여백 */
.rtp-legal-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4px;
  margin-bottom: 4px;
}
/* 44×44 최소 탭타겟 (모바일 접근성 가드 — test_stat_detail_render flow) */
.rtp-legal-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rtp-ink-2, #4e5968);
  text-decoration: none;
  transition: color var(--rtp-t-fast, .15s) var(--rtp-ease-out, ease);
}
.rtp-legal-footer__links a:hover { color: var(--rtp-orange, #FF6B35); }
.rtp-legal-footer__copy {
  font-size: 12px;
  color: var(--rtp-ink-3, #8b95a1);
  margin: 0;
}

/* ══ V3 돋보기 페이드인 어포던스 (Search Affordance 4 정본 — open_access 3차, 2026-07-25) ══
   .bb-taprow 행 안의 돋보기(.bb-mg)가 상시 30% + translateX(-3px) 로 살짝 보이다가
   hover/press 에 100% + 제자리로 — hover 없는 모바일에서도 의도가 읽히는 버전.
   press 상태(.bb-press)는 rtp-taprow.js 가 pointerdown/up 으로 토글. 색은 --bb-* 매핑
   (#1b64da→--bb-accent-dark, blueSoft→--bb-accent-soft). 팀 탭 세그먼트에는 부착 금지. */
.bb-mg {
  flex-shrink: 0;
  display: block;
  opacity: .3;
  transform: translateX(-3px);
  transition: opacity var(--bb-t-base) var(--bb-ease), transform var(--bb-t-base) var(--bb-ease);
  line-height: 0;
  color: var(--bb-accent);
}
.bb-mg--end { margin-left: auto; }
.bb-mg--dim { color: inherit; opacity: .35; }   /* 다크 헤더 팀명용(10px) — 색 상속 */
.bb-taprow:hover .bb-mg, .bb-taprow.bb-press .bb-mg { opacity: 1; transform: translateX(0); }
.bb-taprow:hover { background: var(--bb-surface); }
.bb-taprow.bb-press { background: var(--bb-accent-soft); }
.bb-taprow:hover .bb-tapname, .bb-taprow.bb-press .bb-tapname,
.bb-taprow.bb-tapname:hover, .bb-taprow.bb-tapname.bb-press { color: var(--bb-accent-dark); }
/* bare 변형 — 다크 헤더 등 배경/색 변화 없이 돋보기 페이드만 */
.bb-taprow--bare:hover, .bb-taprow--bare.bb-press { background: transparent; }
.bb-taprow--bare.bb-tapname:hover, .bb-taprow--bare.bb-tapname.bb-press { color: inherit; }

/* ── 개인 득점 가림 (contracts/stat_privacy.py) ─────────────────────────────
   값은 서버가 안 내려주고, 여기서는 ••• 이 "빈 값"이 아니라 "잠긴 값"으로 읽히게만 한다.
   숫자 폰트를 그대로 쓰면 점 간격이 벌어져 깨져 보이므로 자간을 좁힌다. */
.sp-mask {
  color: var(--rtp-ink-3, #8b95a1);
  letter-spacing: -0.06em;
  font-family: inherit;
}

.sp-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--rtp-bg-soft, #f7f8fa);
  color: var(--rtp-ink-2, #4e5968);
  font-size: 12.5px;
  line-height: 1.55;
}
.sp-note__ico { flex: none; font-size: 13px; line-height: 1.4; }
.sp-note b { color: var(--rtp-ink, #191f28); font-weight: 700; }

/* ══ 1회성 온보딩 안내 배너 (공용, .bb-hint*) ══
   game_detail 의 검색 안내 배너(V4, 2026-07-25)를 공용 컴포넌트로 승격(2026-07-31) —
   "알겠어요" 로 localStorage 영구 닫기 패턴이 필요한 모든 안내 배너가 공유.
   다크 헤더/카드 아래 파란 말풍선(위쪽 꼬리). 색·간격은 --bb-* 토큰만 사용.
   사용법: 마크업은 .bb-hint(hidden 기본) 안에 아이콘/문구/[알겠어요] 버튼,
   JS 는 페이지별 localStorage 키로 hidden 토글(예: game_detail.html 281행~ 패턴). */
.bb-hint {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin: var(--bb-space-3) var(--bb-space-3) var(--bb-space-1);
  padding: var(--bb-space-3);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-accent);
  color: var(--bb-neutral-0);
}
.bb-hint[hidden] { display: none; }
/* 말풍선 꼬리 — 위 카드(헤더/카드 목록)를 가리킴 */
.bb-hint::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: var(--bb-accent);
  border-radius: 2px;
  transform: rotate(45deg);
}
.bb-hint__icon { flex-shrink: 0; opacity: .9; }
.bb-hint__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.bb-hint__ok {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 var(--bb-space-3);
  border: 0;
  border-radius: var(--bb-radius-8);
  background: var(--bb-neutral-0);
  color: var(--bb-accent);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--bb-t-fast) var(--bb-ease);
}
.bb-hint__ok:active { opacity: .75; }

/* ── .bb-hint--down — 아래쪽 카드를 직접 가리키는 꼬리 변형(2026-07-31) ──
   my_stats.html·signup_other.html 의 세부 스탯 안내 배너가 "바로 아래 첫 카드"를
   직접 지목하도록 아래쪽 꼬리(::after)만 남긴다 — 위쪽 꼬리(::before)가 같이 보이면
   양방향을 가리켜 지목 효과가 죽으므로 이 변형에선 끈다.
   game_detail.html 의 기존 검색 안내 배너는 기본형 .bb-hint 그대로 — 이 modifier 미적용. */
.bb-hint--down {
  margin-bottom: var(--bb-space-2);
}
.bb-hint--down::before {
  display: none;
}
.bb-hint--down::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: var(--bb-accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* ── Account recovery (account_find / account_reset) ─────────────
   재사용 우선 원칙에 따라 대부분 기존 .rtp-field/.rtp-btn/.rtp-chip/
   .rtp-no-match/.rtp-cta-banner/.rtp-done__icon 를 그대로 쓰고,
   여기선 그 컴포넌트들이 커버하지 못하는 것만 최소 추가한다. */

/* 버튼 disabled 상태 — 기존 .rtp-btn 계열엔 정의가 없어 최초 추가 */
.rtp-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 계정 목록(found) — .rtp-confirm-banner 는 화면 바깥 margin 을 갖고 있어
   .rtp-step-body 안에서 쓰기 부적합. 같은 톤의 카드로 별도 정의. */
.rtp-acct-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.rtp-acct-item {
  padding: 16px;
  border: 1px solid var(--rtp-line);
  border-radius: var(--rtp-radius-xl);
  background: var(--rtp-white);
}
.rtp-acct-item__id { font-size: 16px; font-weight: 700; color: var(--rtp-ink); }
.rtp-acct-item__meta { font-size: 12px; color: var(--rtp-ink-3); margin-top: 4px; }
.rtp-acct-item__form { margin-top: 14px; }

/* 입력 요약(recap) — fail 상태 */
.rtp-recap { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rtp-recap__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.rtp-recap__k { color: var(--rtp-ink-3); }
.rtp-recap__v { color: var(--rtp-ink-2); font-weight: 600; text-align: right; }

/* .rtp-cta-banner 를 링크카드로 쓸 때 밑줄/색 상속 */
a.rtp-cta-banner { text-decoration: none; color: inherit; margin-top: 16px; }

/* 비밀번호 규칙 칩 줄 — .rtp-chip 그룹 wrapper */
.rtp-pw-rules { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px; }

/* 계정 찾기/재설정 폼 상단 여백 */
.rtp-acct-form { margin-top: 20px; }

/* account_find / account_password / account_reset 전용 — 인라인 생년월일 휠
   (rtp-wheel)이나 비밀번호 규칙 칩처럼 컨텐츠가 길어지는 화면에서 .rtp-container
   의 min-height:100vh 특성상 문서 전체가 늘어나고 rtp-step-footer(CTA)가
   fixed 하단 내비(.rtp-footer-nav)와 겹치는 문제(R-account-nav-overlap).
   이 페이지에서만 뷰포트 높이로 고정하고 rtp-step-body 만 내부 스크롤시켜
   footer 가 항상 내비 위에 온전히 보이게 한다. */
.rtp-container--acct {
  flex: none;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 20px);
}
/* flex column 안에서 body 만 내부 스크롤 — CTA(.rtp-step-footer)는 항상 내비 위에 */
.rtp-container--acct .rtp-step-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rtp-container--acct .rtp-step-footer { flex: none; }

/* ── inapp_escape_hint — ⋮ 사용자 메뉴 dim (오버레이가 실제로 보이는 동안만) ──
   SDD §4.4: 서버 클래스(rtp-inapp-hint-candidate)에는 절대 걸지 않는다 —
   7일 내 이미 닫은 사용자에게 ⋮ 가 영구히 흐려지는 회귀가 된다.
   ACTIVE(JS 전용) 하위에만 스코프. display:none / pointer-events:none 금지
   — "기능을 없애는 게 아니고 살짝 가리게". 기존 .rtp-user-menu 규칙(위쪽)은
   수정하지 않는다 — append 만. */
body.rtp-inapp-hint-active .rtp-user-menu {
  /* USERMENU_DIM_OPACITY. 안내 화살표가 이 ⋮ 를 관통해 올라가므로 충분히 죽여야
     "이 ⋮ 를 누르라는 건가?" 혼동이 없다(캡처 판독). 닫히면 즉시 1.0 복귀. */
  opacity: 0.22;
  transition: opacity var(--rtp-t-fast, 120ms);
}

/* ── Consent / confirm checkbox (identity_foundation) ─────────────────
   contract CONSENT_CHECKBOX_CLASS — 이 릴리스의 유일한 신규 클래스.
   ⛔ .rtp-field__input 재사용 불가(height:52px;width:100% → 375px 폭짜리 박스).
   basketball rtp 디자인 시스템에 체크박스 CSS 가 0건이라 새로 정의한다.
   가입 동의 2건 + 탈퇴 확인 체크에 공용으로 쓴다. */
.rtp-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 2px;
  cursor: pointer;
}
.rtp-consent-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--rtp-orange);
}
.rtp-consent-check span {
  font-family: var(--rtp-font-ko);
  font-size: 13px;
  font-weight: 500;
  color: var(--rtp-ink-2);
  line-height: 1.5;
  word-break: keep-all;
}
.rtp-consent-check a {
  color: var(--rtp-orange);
  font-weight: 600;
  text-decoration: underline;
}

/* ── 탈퇴 확인 화면 — 지워지는 것 목록 (identity_foundation R3) ──────────────
   ⛔ inline style 금지(CLAUDE.md Coding Rules). 이 화면은 신규라 자체 클래스가 필요하다.
      contract 의 "새 클래스 1개" 제약은 **체크박스 한정**이다 — 신규 화면의 레이아웃 클래스는
      그 제약 대상이 아니다(그렇게 읽으면 inline style 로 몰려 규칙을 어기게 된다). */
.rtp-withdraw-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rtp-withdraw-list__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--rtp-line);
  border-radius: var(--rtp-radius-lg);
  background: var(--rtp-white);
}
.rtp-withdraw-list__label {
  font-family: var(--rtp-font-ko);
  font-size: 14px;
  font-weight: 600;
  color: var(--rtp-ink);
  word-break: keep-all;
}
.rtp-withdraw-list__count {
  font-family: var(--rtp-font-ko);
  font-size: 14px;
  font-weight: 700;
  color: var(--rtp-ink-2);
  flex-shrink: 0;
  margin-left: 12px;
}
.rtp-withdraw-details { margin-top: 16px; }
.rtp-withdraw-details__summary {
  font-family: var(--rtp-font-ko);
  font-size: 13px;
  font-weight: 600;
  color: var(--rtp-ink-3);
  cursor: pointer;
  min-height: 44px;            /* 모바일 탭 타깃 */
  display: flex;
  align-items: center;
  gap: 6px;
  /* ⛔ `display:flex` 를 주면 브라우저 기본 disclosure 삼각형이 사라진다.
     [6.5] 캡처 판독에서 "모델별 상세 보기" 가 **눌러볼 수 있어 보이지 않아** 잡혔다 —
     그러면 48개 모델 상세를 아무도 안 연다. 마커를 직접 붙인다. */
  list-style: none;
}
.rtp-withdraw-details__summary::-webkit-details-marker { display: none; }
.rtp-withdraw-details__summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  margin-bottom: 3px;
  transition: transform 0.15s ease;
}
.rtp-withdraw-details[open] .rtp-withdraw-details__summary::after {
  transform: rotate(-135deg);
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .rtp-withdraw-details__summary::after { transition: none; }
}
.rtp-withdraw-details__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rtp-withdraw-details__item {
  font-family: var(--rtp-font-ko);
  font-size: 12px;
  color: var(--rtp-ink-3);
  word-break: keep-all;
}

/* ── Identity consent (identity_verification 2b — 기존 회원 본인인증 1단계) ──
   ⚠️ 2026-09-22: 이 블록 없이 화면을 먼저 올렸다가 **기본 브라우저 스타일로 렌더**됐다.
      서버 테스트는 `name=` 속성만 보므로 전부 초록이었고, 캡처를 찍어보고서야 잡혔다.
      (같은 이유로 `.rtp-cta` 가 있는 줄 알았는데 실재하는 건 `.rtp-cta-banner` 뿐이었다 —
       grep 이 prefix 로 걸린 오탐. 제출 버튼은 기존 관례 `.rtp-btn--primary` 를 쓴다.) */
.rtp-consent-all {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--rtp-line);
  border-radius: var(--rtp-radius-lg);
  background: var(--rtp-white);
  cursor: pointer;
}
.rtp-consent-all input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--rtp-orange);
}
.rtp-consent-all__t { font-size: 15px; font-weight: 700; color: var(--rtp-ink); }

.rtp-consent-list { list-style: none; margin: 0; padding: 0; }

.rtp-consent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--rtp-line-soft);
}
.rtp-consent-row:last-child { border-bottom: 0; }
/* 체크박스 행은 기존 `.rtp-consent-check` 를 그대로 쓴다(출시분과 같은 모양). */
.rtp-consent-row .rtp-consent-check { font-size: 14px; color: var(--rtp-ink-2); }

.rtp-consent-toggle {
  /* 44px 터치 타깃 — 모바일 우선 */
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--rtp-ink-3);
  text-decoration: underline;
  cursor: pointer;
}

.rtp-consent-body {
  grid-column: 1 / -1;
  padding: 0 2px 12px 32px;
}
.rtp-consent-body__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rtp-ink-3);
  /* 명세의 "4줄 클립 + 더 보기" — 본문이 길어져도 목록이 무너지지 않게 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rtp-consent-body__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rtp-orange);
}

/* ── Identity form (identity_verification 2b — 정보 입력 · 입력 확인) ──────
   ⚠️ 2026-09-22: 동의 화면에서 "클래스를 지어내고 CSS 를 안 넣어" 기본 스타일로
      렌더된 적이 있다(서버 테스트는 name= 만 보므로 전부 초록이었다).
      그래서 이번엔 템플릿을 쓰자마자 클래스 실재 여부를 먼저 확인하고 여기 채웠다. */
.rtp-field__err {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--rtp-error);
}

/* 수정 불가 필드 — 값은 보여주되 입력이 아님을 시각적으로 분명히 한다 */
.rtp-field__fixed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--rtp-line);
  border-radius: var(--rtp-radius-lg);
  background: var(--rtp-bg);
  font-size: 15px;
  color: var(--rtp-ink);
}
.rtp-field__fixed-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--rtp-orange);
  flex-shrink: 0;
}

.rtp-age-chip {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: var(--rtp-radius-pill);
  background: var(--rtp-orange-soft);
  color: var(--rtp-orange);
  font-size: 12px;
  font-weight: 700;
}
/* 같은 [hidden] 가드 — `display:inline-block`(0,1,0)을 이긴다.
   없으면 생년 입력 전에도 빈 칩이 떠 있다. */
.rtp-age-chip[hidden] { display: none; }

/* 2택 선택 (내외국인 · 보호자 관계) */
.rtp-choice-row { display: flex; gap: 8px; }
.rtp-choice {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;              /* 44px 이상 — 모바일 터치 타깃 */
  border: 1px solid var(--rtp-line);
  border-radius: var(--rtp-radius-lg);
  background: var(--rtp-white);
  font-size: 15px;
  color: var(--rtp-ink-2);
  cursor: pointer;
}
.rtp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rtp-choice:has(input:checked) {
  border-color: var(--rtp-orange);
  background: var(--rtp-orange-soft);
  color: var(--rtp-orange);
  font-weight: 700;
}

/* signup_verify_ext R16 — 2b "본인 명의 폰이 없어요" 단일 체크박스. .rtp-choice 는
   pointer-events:none 트릭을 쓰는 세그먼트 라디오용이라, 진짜 클릭 가능해야 하는
   단일 체크박스는 별도 패턴을 쓴다. */
.rtp-inline-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 0;
  font-size: 15px;
  color: var(--rtp-ink-2);
  cursor: pointer;
}
.rtp-inline-checkbox input { width: 18px; height: 18px; }

.rtp-inline-notice {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: var(--rtp-radius-md);
  background: var(--rtp-orange-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--rtp-ink-2);
}

/* signup_verify_ext 결정 47~48 후속 — 2b 화면 간격·줄바꿈. 공용 .rtp-step-heading 은 그대로 두고
   2b 입력·확인 제목에만 어절 단위 줄바꿈("알려주/세요" 방지). */
.rtp-step-heading--keep,
.rtp-inline-notice--keep { word-break: keep-all; overflow-wrap: break-word; }
/* 확인 화면 — 안내 상자 · [정보 수정하기] · [인증 시작] 이 붙어 있었다. 토큰 간격으로 띄운다. */
.rtp-confirm-actions { display: flex; flex-direction: column; gap: var(--bb-space-2); margin-top: var(--bb-space-3); }
.rtp-confirm-actions + .rtp-error-msg { margin-top: var(--bb-space-2); }

/* 입력 확인 — 인증창에 넘어갈 값만 */
.rtp-confirm-list {
  margin: 0 0 16px;
  padding: 4px 0;
  border-top: 1px solid var(--rtp-line);
  border-bottom: 1px solid var(--rtp-line);
}
.rtp-confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
}
.rtp-confirm-row + .rtp-confirm-row { border-top: 1px solid var(--rtp-line-soft); }
.rtp-confirm-row__k { margin: 0; font-size: 13px; color: var(--rtp-ink-3); }
.rtp-confirm-row__v { margin: 0; font-size: 15px; font-weight: 600; color: var(--rtp-ink); text-align: right; }

/* 보조 텍스트 링크 — CTA 버튼 아래 '문의하기' 류. 버튼으로 만들면 주 동선과 경쟁한다. */
.rtp-textlink {
  display: block;
  margin-top: 16px;
  padding: 12px 0;           /* 44px 터치 타깃 확보 */
  text-align: center;
  font-size: 13px;
  color: var(--rtp-ink-3);
  text-decoration: underline;
}

/* ── 하단 인증 배너 (identity_verification 2b — 계약 D1) ─────────────────
   ⭐ 하단 fixed nav(.rtp-footer-nav, z-index 100) **위**에 띄운다.
     - 62px = nav 실측 높이. `.rtp-claim-dock--above-nav`(rtp-screens.css)가 쓰는 값과
       같은 근거다 — 값이 바뀌면 두 곳을 같이 고쳐야 한다.
     - safe-area 는 nav 가 자체 padding-bottom 으로 처리하므로 배너의 bottom 에만 가산한다.
     - z-index 101: nav(100) 위, 시트(.bb-sheet 120 / .bb-sheet-dim 110)보다 아래.
   ⛔ 닫기 버튼 없음(BANNER_HAS_CLOSE_BUTTON = False) — 전체가 하나의 링크다. */
.rtp-has-identity-banner {
  /* 배너가 차지하는 높이 = 카드 높이 + 메뉴와의 간격 10px = (메뉴 top) − (카드 top).
     다른 화면(법적 푸터·설정·알림·목표 W4 시트·대학 게이지 CTA 바)이 하단 여백을 계산할 때 쓴다.
     ⭐ 카드는 문구가 줄바꿈하면 높이가 변하므로 **폭별 값**이다(소수 한 자리, 0.1 올림).
        값 = 두 폰트 환경에서 잰 (메뉴 top − 카드 top) 의 **큰 쪽** — 2026-10-05 Playwright 로 280~480px 을 1px 씩 쓸었다.
          (a) Pretendard woff2 를 'Pretendard' 이름으로 주입 — 변화 지점 314 / 326  (제목·부제 줄 수만 달라짐)
          (b) 주입 없음 = 기기 대체 폰트(한글 1em 폭, 안드로이드 Noto CJK 근사)    — 변화 지점 293 / 351 / 364, 280px 은 125.66
          폭          (a) Pretendard   (b) 대체 폰트   → 변수(큰 쪽, 0.1 올림)
          ≥364px        75.28            75.28            75.3
          351~363       75.28            91.38            91.4
          293~350       75.28~109.56     109.56           109.6   (a) 는 314~325 가 91.38, 그 아래가 109.56
          ≤292          109.56           125.66           125.7   (지원 하한 280px 포함)
        (a) 의 변화 지점 314·326 은 (b) 의 큰 구간(293~350) 안에 들어가 경계가 되지 않는다 → 경계는 292 / 350 / 363 세 곳.
        ⚠️ 그래서 Pretendard 가 실제로 깔린 환경에서는 최대 34px 정도 **틈이 더 생긴다**(겹침보다 안전한 쪽을 택한 결정).
        왜 대체 폰트 값도 쓰나: 사이트 폰트 이름은 #22(2026-10-07)에서 고쳐 이제 Pretendard Variable 로 그려진다.
        그래도 웹폰트 로드 전·로드 실패·font-display swap 순간엔 대체 폰트로 그려지므로, 큰 쪽 (b) 값을 의도적으로 유지한다
        (줄이면 로딩 순간 겹침 위험 — 지금 값은 틈만 생기고 겹치지 않는다).
        문구(contract IDENTITY_BANNER_COPY)·글자 크기·폰트를 고치면 다시 재야 한다.
        한계: 고정값이라 안드로이드 '글자 크게'·기기 폰트별 줄바꿈 경계 차이는 못 맞춘다(대체 폰트 값은 Noto CJK 근사일 뿐).
        (옛 값 71px 는 흰 띠 배너 때 값이다. 처음 57px 로 추정했다가 실측에서 정정한 이력이 있다 — 추정 금지.) */
  --rtp-identity-banner-h: 75.3px;
}
@media (max-width: 363px) {
  .rtp-has-identity-banner { --rtp-identity-banner-h: 91.4px; }
}
@media (max-width: 350px) {
  .rtp-has-identity-banner { --rtp-identity-banner-h: 109.6px; }
}
@media (max-width: 292px) {
  .rtp-has-identity-banner { --rtp-identity-banner-h: 125.7px; }
}
/* ⭐ 2026-10-05 verify_banner 핸드오프로 교체(design-port) — 정본: docs/sdd/identity_verification/handoff/proto/verify_banner.css
   정본 `.vb*` → `.rtp-identity-banner*` (대응표 = contracts/identity_verification.PROTO_CLASS_MAP).
   값은 tokens.css `--bb-verify-banner-*` 로 보존. 예외 2건(PROTO_STYLE_EXCEPTIONS): width(fixed·480px 칸) · 제목 글자 13px(Q2).
   위치: 하단 nav 위 10px · 480px 앱 칸 안 좌우 10px. 정본은 stage 안 absolute 지만 구현은 fixed 다. */
.rtp-identity-banner {
  position: fixed;
  bottom: calc(var(--rtp-footer-nav-h) + env(safe-area-inset-bottom, 0px) + var(--bb-verify-banner-inset));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * var(--bb-verify-banner-inset));
  max-width: calc(480px - 2 * var(--bb-verify-banner-inset));
  z-index: 101;
  min-height: var(--bb-tap-target);
  display: flex;
  align-items: center;
  gap: var(--bb-verify-banner-gap);
  padding: var(--bb-verify-banner-pad) var(--bb-verify-banner-pad) var(--bb-verify-banner-pad) var(--bb-verify-banner-pad-left);
  background: var(--bb-hero-dark);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-verify-banner-shadow);
  color: var(--bb-verify-banner-on-dark);
  text-decoration: none;
  cursor: pointer;
  /* 📏 캡처 판독(2026-09-22): 기본 줄바꿈이 어절 **중간**을 쪼갰다. 한국어는 keep-all 로 어절 단위 줄바꿈. */
  word-break: keep-all;
}
.rtp-identity-banner:focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 2px;
}
.rtp-identity-banner__ic {
  flex: none;
  width: var(--bb-verify-banner-size-icon);
  height: var(--bb-verify-banner-size-icon);
  border-radius: var(--bb-verify-banner-radius-icon);
  background: var(--bb-verify-banner-icon-bg);
  color: var(--bb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rtp-identity-banner__copy { flex: 1; min-width: 0; }
.rtp-identity-banner__title {
  display: block;
  font-size: var(--bb-text-13);   /* Q2: 정본 13.5px → 레포 단계 13px */
  font-weight: 700;
  line-height: 1.4;
  color: var(--bb-verify-banner-on-dark);
}
.rtp-identity-banner__sub {
  display: block;
  margin-top: var(--bb-verify-banner-sub-gap);
  font-size: var(--bb-text-11-plus);   /* = 정본 11.5px */
  line-height: 1.4;
  color: var(--bb-verify-banner-on-dark-sub);
}
.rtp-identity-banner__cta {
  flex: none;
  display: flex;
  align-items: center;
  height: var(--bb-verify-banner-h-btn);   /* 단독 탭 대상 아님 — 배너 전체(≥44px)가 탭 영역(SPEC 의도값) */
  padding: 0 var(--bb-verify-banner-pad);
  border-radius: var(--bb-verify-banner-radius-btn);
  /* Q1: 흰 글씨 on #FF6B35 2.84:1 — docs/handoff/2026-09-24-contrast-decision.md '현행 유지'(기존 CTA 와 같은 조합) */
  background: var(--bb-primary);
  color: var(--bb-verify-banner-on-dark);
  font-size: var(--bb-text-12-plus);   /* = 정본 12.5px */
  font-weight: 800;
  white-space: nowrap;
  min-width: max-content;
}

/* 배너가 fixed 라 문서 흐름에서 빠졌다 — 페이지 끝(법적 footer 링크)이 배너 뒤에
   영구히 가려지지 않게 nav 여백(88px)에 배너 높이만큼 더한다.
   ⭐ --rtp-identity-banner-h 는 Playwright 폭별 실측값이다(위 `.rtp-has-identity-banner` 주석).
      값이 어긋나면 test_screen_R41_R42_banner_h_var_and_no_overflow 가 걸린다. */
.rtp-has-identity-banner .rtp-legal-footer--has-nav { padding-bottom: calc(88px + var(--rtp-identity-banner-h)); }
/* ── 비로그인 가입 게이트 (open_access SIGNUP_GATE) ──────────────────────────
   goal_flow INTRO · college_gauge G1 공용 시트(basketball/_signup_gate.html).
   두 화면 모두 **다크 히어로 위**에 얹히므로 흰 카드가 아니라 반투명 유리다 —
   흰 카드를 올리면 히어로가 잘려 보여서 화면이 둘로 쪼개진다. 스크림은 두지
   않는다(히어로가 곧 설득 자료라 가리면 손해).
   ⚠️ 화면별 파일(rtp-screens / college-gauge)에 각각 두지 말 것 — 둘이 갈라지면
      같은 시트가 두 화면에서 다르게 생긴다. */
.rtp-signup-gate {
  padding: var(--bb-space-25) var(--bb-space-3) var(--bb-space-3);
  border-radius: var(--bb-radius-lg);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  text-align: center;
  color: var(--bb-bg);
}
.rtp-signup-gate__title {
  margin: 0 0 6px;
  font-size: var(--bb-text-base); font-weight: 800;
  letter-spacing: -0.4px; word-break: keep-all;
}
.rtp-signup-gate__sub {
  margin: 0 0 var(--bb-space-25);
  font-size: var(--bb-text-11); font-weight: 600; line-height: 1.6;
  color: rgba(255,255,255,.66); word-break: keep-all;
}
.rtp-signup-gate .rtp-btn { width: 100%; }
.rtp-signup-gate__login {
  display: block; margin-top: var(--bb-space-2);
  font-size: var(--bb-text-11); font-weight: 700;
  color: rgba(255,255,255,.72);
  text-decoration: underline; text-underline-offset: 3px;
}