/* =========================================================
   Duovly — HOME redesign (premium concierge direction)
   ivory bg · champagne cards · gold/mint/coral accents.
   질감 우선: champagne gradient · gold border + inner glow ·
   sparkle particles · CTA gloss · 3D asset medallions ·
   laurel ranking · floating tab bar.
   토큰만 사용, 색감 reskin 없음.
   ========================================================= */

.home-rd { background: var(--warm-white); padding: 0 0 4px; }
.home-rd .rd-section { padding: 0 24px; }
.home-rd .rd-h {
  font-size: 19px; font-weight: 850; color: var(--ink-900);
  margin: 22px 0 13px; letter-spacing: 0;
}
.home-rd .rd-h .rd-more { float: right; font-size: 12.5px; font-weight: 800; color: var(--coral-600); cursor: pointer; }

/* ---------- Header ---------- */
.rd-header { padding: 16px 24px 8px; }
.rd-online {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(16,32,51,.05);
  font-size: 12px; font-weight: 800; color: var(--ink-700);
}
.rd-online .rd-online-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint-500);
}
.rd-online .rd-online-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--mint-500); animation: duovly-pulse 1.8s var(--ease-out) infinite;
}
.rd-brandrow { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.rd-logo {
  font-family: var(--font-sans); /* 브랜드 워드마크: 차콜 산세리프 950 + 'y' 위 코랄 하트 (8도) */
  position: relative; display: inline-block;
  font-size: 27px; font-weight: 950; letter-spacing: 0; line-height: 1;
  color: var(--ink-900);
}
.rd-logo .rd-heart { position: absolute; right: -6px; top: -3px; width: 13px; height: 12px; transform: rotate(8deg); }
.rd-with {
  display: inline-flex; align-items: center; margin-left: 9px; transform: translateY(-3px);
  padding: 3px 9px; border-radius: 999px;
  border: 1.4px solid var(--coral-400); color: var(--coral-600);
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 900; letter-spacing: .2px;
  background: var(--coral-50);
}
.rd-hbtns { display: flex; gap: 10px; }
.rd-iconbtn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); /* 스트로크 유지 */
  background: linear-gradient(160deg, var(--warm-white) 0%, #fff 78%); /* bg→흰색 그라데이션 */
  color: var(--ink-900); cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: inset 0 1.5px 2px rgba(255,255,255,.95), inset 0 -3px 6px rgba(16,32,51,.05), 0 6px 16px rgba(16,32,51,.07); /* 흰색 이너섀도우 */
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rd-iconbtn:active { transform: scale(.94); }
.rd-iconbtn svg { width: 21px; height: 21px; }
.rd-iconbtn .rd-icon3d { width: 30px; height: 30px; object-fit: contain; }
.rd-iconbtn .rd-dot { position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral-500); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(242,96,79,.4); } /* 빨간점 = 동그라미 버튼 코너 */
.rd-greet { margin-top: 11px; font-size: 14px; font-weight: 700; color: var(--ink-500); }
.rd-greet b { color: var(--ink-900); font-weight: 850; }

/* ---------- Sparkle particles (reusable) ---------- */
.rd-sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rd-sparkles i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #FFF7DC 0%, var(--butter-500) 55%, rgba(246,198,91,0) 72%);
  opacity: 0; animation: rd-twinkle 3.4s var(--ease-out) infinite;
}
@keyframes rd-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  45% { opacity: .95; transform: scale(1); }
}

/* ---------- Featured mate (big card) ---------- */
.rd-featured-wrap { padding: 6px 24px 2px; }
.rd-featured {
  position: relative; border-radius: 24px; overflow: hidden;
  display: grid; grid-template-columns: 44% 56%;
  border: 1.5px solid rgba(210,192,158,.5); /* 채도 낮춘 warm 스트로크 */
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(255,255,255,.85), rgba(255,248,236,0) 60%),
    linear-gradient(150deg, #FFFBF2 0%, #FFF6E8 60%, #FBEEDB 100%);
  box-shadow:
    0 12px 26px rgba(120,82,48,.24),          /* 갈색 드랍섀도우 — 덜 떠보이게 */
    inset 0 2px 1px rgba(255,255,255,.95),     /* 흰색 이너섀도우 */
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 0 46px rgba(255,255,255,.28);
}
/* 사진 왼쪽(담김) + 콘텐츠 오른쪽 + 아래 버튼 — 디자인 home.png 정렬 */
.rd-feat-photo { position: relative; aspect-ratio: 3/4; overflow: hidden; cursor: pointer; }
.rd-feat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.rd-feat-presence {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  background: rgba(16,32,51,.6); backdrop-filter: blur(6px);
  color: #fff; font-size: 10.5px; font-weight: 800;
}
.rd-feat-presence .d { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-400); }
.rd-feat-body { position: relative; padding: 15px 16px 15px 16px; display: flex; flex-direction: column; }
.rd-shield { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; filter: drop-shadow(0 8px 14px rgba(180,130,20,.34)); z-index: 3; }
.rd-shield img, .rd-shield span { width: 100%; height: 100%; display: block; }
.rd-pill-gold {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 999px;
  background: linear-gradient(135deg, #FFD97A, var(--butter-500) 55%, #E8A92E); /* 금색 동그란 배경 */
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .3px; /* 흰 폰트 + 얇게 */
  box-shadow: 0 4px 12px rgba(216,150,40,.32), inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow: 0 1px 2px rgba(170,110,15,.45);
}
.rd-pill-gold .rd-pill-star { color: #fff; font-size: 12.5px; line-height: 1; } /* 왼쪽 별 (흰색) */
.rd-feat-name { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.rd-feat-name b { font-size: 29px; font-weight: 900; color: var(--ink-900); line-height: 1; }
.rd-verified { width: 18px; height: 18px; flex: none; } /* 이름 29px의 ~60% */
.rd-rebook { display: inline-flex; align-items: center; margin-left: 7px; padding: 3px 9px; border-radius: 8px; background: var(--mint-50); color: var(--mint-700); font-size: 11.5px; font-weight: 800; } /* 재의뢰율 칩 */

/* ===== Discover/공유 메이트 리스트 카드 (디자인시스템 Discover.html 스펙) ===== */
.dlc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl, 18px); box-shadow: var(--sh-3, 0 6px 16px rgba(64,44,30,.10)); padding: 13px; cursor: pointer; margin-bottom: 12px; }
.dlc:active { transform: scale(.992); }
.dlc.off { opacity: .94; }
.dlc-top { display: flex; gap: 12px; }
.dlc-av { position: relative; width: 58px; height: 58px; flex-shrink: 0; }
.dlc-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface-sunken); }
.dlc-ring { position: absolute; inset: -3px; border-radius: 50%; border: 2.5px solid var(--mint-500); }
.dlc-ring.off { border-color: var(--border); }
.dlc-dot { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--mint-500); border: 2.5px solid var(--surface); }
.dlc-dot.off { background: var(--ink-400); }
.dlc-mid { flex: 1; min-width: 0; }
.dlc-nm { display: flex; align-items: center; gap: 6px; }
.dlc-nm-t { font-size: 16px; font-weight: 900; color: var(--ink-900); }
.dlc-vchk { width: 14px; height: 14px; border-radius: 50%; background: var(--mint-500); display: inline-grid; place-items: center; flex-shrink: 0; }
.dlc-heart { margin-left: auto; color: var(--border); cursor: pointer; background: none; border: none; padding: 2px; display: inline-flex; }
.dlc-heart.on { color: var(--coral-500); }
.dlc-new-badge { font-size: 10.5px; font-weight: 800; color: var(--butter-700); background: #FFF7DF; border: 1px solid #F3DB94; padding: 2px 7px; border-radius: 999px; }
.dlc-gl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.dlc-gchip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-mute); border: 1px solid var(--border); padding: 3px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-700); }
.dlc-tier { font-size: 12px; font-weight: 700; color: var(--ink-400); }
.dlc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.dlc-tag { font-size: 11px; font-weight: 700; color: var(--ink-700); background: var(--coral-50); border: 1px solid var(--coral-100); padding: 3px 8px; border-radius: 7px; }
.dlc-stats { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; flex-wrap: wrap; }
.dlc-st { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: var(--ink-900); }
.dlc-st .s { color: var(--ink-400); font-weight: 600; }
.dlc-st-div { width: 1px; height: 11px; background: var(--border); }
.dlc-re b { color: var(--mint-700); }
.dlc-re, .dlc-resp { font-weight: 700; color: var(--ink-700); }
.dlc-new-meta { color: var(--ink-400); font-weight: 700; font-size: 11.5px; }
.dlc-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.dlc-price { display: flex; align-items: baseline; gap: 5px; }
.dlc-coin { width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(160deg,#FFE08A,var(--butter-500) 55%,#E8A116); display: inline-grid; place-items: center; color: #8a5a00; font-size: 9px; font-weight: 900; align-self: center; }
.dlc-amt { font-size: 18px; font-weight: 900; color: var(--ink-900); }
.dlc-unit { font-size: 11.5px; font-weight: 600; color: var(--ink-400); }
.dlc-cta { height: 36px; padding: 0 18px; border: none; border-radius: 11px; cursor: pointer; color: #fff; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, var(--coral-400), var(--rose-500)); box-shadow: var(--sh-cta, 0 5px 13px rgba(255,111,107,.34)), inset 0 1px 0 rgba(255,255,255,.4); }
.dlc-cta.ghost { background: var(--surface); border: 1.4px solid var(--border); color: var(--ink-700); box-shadow: none; }
.rd-verified svg { width: 100%; height: 100%; display: block; }
.rd-feat-status { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.rd-chip-live { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--mint-50); color: var(--mint-700); font-size: 11px; font-weight: 850; }
.rd-chip-live .d { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--mint-500); }
.rd-chip-live .d::after { content:""; position:absolute; inset:0; border-radius:50%; background: var(--mint-500); animation: duovly-pulse 1.8s var(--ease-out) infinite; }
.rd-chip-soft { padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.65); color: var(--ink-600); font-size: 11px; font-weight: 800; border: 1px solid rgba(233,226,218,.9); }
.rd-feat-svc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.rd-svc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 9px; background: rgba(255,255,255,.7); border: 1px solid rgba(233,226,218,.8); font-size: 11.5px; font-weight: 800; color: var(--ink-700); }
.rd-svc-chip img { width: 15px; height: 15px; object-fit: contain; }
.rd-feat-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 13px; }
.rd-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 850; color: var(--ink-900); }
.rd-rating .s { color: var(--butter-500); }
.rd-rating .c { color: var(--ink-400); font-weight: 600; font-size: 11px; }
.rd-price { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; font-weight: 950; color: var(--ink-900); }
.rd-price .ic { width: 17px; height: 17px; display: inline-flex; }
.rd-price small { font-size: 10px; color: var(--ink-500); font-weight: 700; }
.rd-feat-cta { grid-column: 1 / -1; display: flex; gap: 9px; padding: 0 16px 16px; }
.rd-btn { flex: 1; border: none; border-radius: 13px; padding: 13px 0; font-size: 13.5px; font-weight: 850; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.rd-btn:active { transform: scale(.97); }
.rd-btn-ghost { flex: 0 0 39%; background: #fff; color: var(--ink-800); border: 1px solid var(--border-strong); box-shadow: 0 4px 12px rgba(16,32,51,.07); }
.rd-btn-primary { background: linear-gradient(135deg, #FF8E7D 0%, var(--coral-500) 52%, var(--coral-600) 100%); color: #fff; box-shadow: 0 12px 24px rgba(255,122,107,.34); }
.rd-btn-primary::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48%; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0)); pointer-events: none; }

/* ---------- Trust strip ---------- */
.rd-trust { display: grid; grid-template-columns: 1fr 1fr 1fr; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 6px 18px rgba(16,32,51,.05), inset 0 1px 0 rgba(255,255,255,.7); overflow: hidden; }
.rd-trust-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 9px; }
.rd-trust-col + .rd-trust-col { border-left: 1px solid var(--border); }
.rd-trust-ic { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 7px rgba(16,32,51,.14)); }
.rd-trust-ic img, .rd-trust-ic span, .rd-trust-ic svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.rd-trust-t { font-size: 12.5px; font-weight: 850; color: var(--ink-900); line-height: 1.25; }
.rd-trust-d { font-size: 10.5px; font-weight: 600; color: var(--ink-500); line-height: 1.35; }

/* ---------- Ranking podium ---------- */
.rd-rank { position: relative; border-radius: 22px; overflow: hidden; padding: 18px 16px 20px; color: #fff;
  background: linear-gradient(135deg, #131A2E 0%, #1F2440 46%, #4A2235 80%, #5A2330 100%);
  box-shadow: 0 16px 34px rgba(16,32,51,.28); }
.rd-rank::before { content: ""; position: absolute; left: -20%; top: 8%; width: 140%; height: 40px; transform: rotate(-8deg);
  background: linear-gradient(90deg, transparent, rgba(246,198,91,.26) 45%, rgba(255,247,220,.5) 50%, rgba(246,198,91,.26) 55%, transparent);
  filter: blur(3px); pointer-events: none; }
.rd-rank-head { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rd-rank-head .rd-rank-title { font-size: 14.5px; font-weight: 950; }
.rd-rank-head .rd-rank-sub { font-size: 11px; opacity: .72; margin-left: auto; }
.rd-podium { position: relative; display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: 8px; margin-top: 12px; }
.rd-pod { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rd-pod-portrait { position: relative; border-radius: 50%; padding: 3px; }
.rd-pod-portrait img { display: block; border-radius: 50%; object-fit: cover; background: #2a2f4a; }
.rd-pod.first .rd-pod-portrait { background: conic-gradient(from 210deg, #FFE9A6, #F6C65B, #E8A92E, #FFF3C8, #F6C65B); box-shadow: 0 0 0 1px rgba(255,247,200,.7), 0 10px 22px rgba(246,198,91,.4); }
.rd-pod.first .rd-pod-portrait img { width: 84px; height: 84px; }
.rd-pod.second .rd-pod-portrait { background: conic-gradient(from 210deg, #EAF0F6, #B7C0CC, #8E97A4, #F2F5F9, #B7C0CC); box-shadow: 0 8px 18px rgba(160,170,185,.34); }
.rd-pod.third  .rd-pod-portrait { background: conic-gradient(from 210deg, #F0C49A, #C68A52, #9A6336, #F4D6B6, #C68A52); box-shadow: 0 8px 18px rgba(150,99,54,.34); }
.rd-pod.second .rd-pod-portrait img, .rd-pod.third .rd-pod-portrait img { width: 62px; height: 62px; }
.rd-pod-crown { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; filter: drop-shadow(0 4px 8px rgba(180,120,10,.5)); }
.rd-pod-crown img, .rd-pod-crown span { width: 100%; height: 100%; display: block; }
.rd-pod-medal { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 950; color: #3a2a00; margin-top: -2px; }
.rd-pod.first  .rd-pod-medal { background: linear-gradient(135deg,#FFE9A6,#E8A92E); }
.rd-pod.second .rd-pod-medal { background: linear-gradient(135deg,#EEF2F7,#AEB7C3); }
.rd-pod.third  .rd-pod-medal { background: linear-gradient(135deg,#F3CFA7,#BB7E48); color:#fff; }
.rd-pod-name { font-size: 12.5px; font-weight: 850; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-pod.first .rd-pod-name { font-size: 14px; }
.rd-pod-tag { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 850; line-height: 1.5; }
.rd-pod-tag-mint { background: rgba(24,199,184,.18); color: #6FE3D5; }
.rd-pod-tag-rose { background: rgba(255,111,145,.20); color: #FFB1C0; }
.rd-pod-tag-gold { background: rgba(246,198,91,.20); color: #F6C65B; }
.rd-pod-score { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; font-weight: 800; opacity: .92; }
.rd-pod-score .ic { width: 13px; height: 13px; display: inline-flex; }
.rd-rank-empty { position: relative; margin-top: 12px; font-size: 12px; opacity: .85; }

/* ---------- Service medallions ---------- */
.rd-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
.rd-medal { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
.rd-medal-disk {
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 22%, #fff 0%, #FFFBF3 55%, #F6EEE2 100%);
  border: 1px solid rgba(233,226,218,.9);
  box-shadow: 0 10px 20px rgba(16,32,51,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -6px 12px rgba(216,150,40,.06);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.rd-medal:active .rd-medal-disk { transform: scale(.93); }
@media (hover:hover) { .rd-medal:hover .rd-medal-disk { transform: translateY(-3px); box-shadow: 0 16px 26px rgba(16,32,51,.12); } }
.rd-medal-disk img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 5px 9px rgba(0,0,0,.16)); }
.rd-medal-disk svg { width: 44px; height: 44px; display: block; }
.rd-medal-label { font-size: 12.5px; font-weight: 850; color: var(--ink-900); }

/* ---------- Connect now (2-col) ---------- */
.rd-connect { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rd-cc { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-2); cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover:hover) { .rd-cc:hover { transform: translateY(-2px); box-shadow: var(--sh-3); } }
.rd-cc-photo { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--surface-sunken); }
.rd-cc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-cc-online { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(16,32,51,.55); backdrop-filter: blur(6px); color: #fff; font-size: 10px; font-weight: 800; }
.rd-cc-online .d { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--mint-400); }
.rd-cc-online .d::after { content:""; position:absolute; inset:0; border-radius:50%; background: var(--mint-400); animation: duovly-pulse 1.8s var(--ease-out) infinite; }
.rd-cc-heart { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 8px rgba(16,32,51,.16); }
.rd-cc-heart svg { width: 16px; height: 16px; }
.rd-cc-body { padding: 11px 12px 12px; }
.rd-cc-name { display: flex; align-items: center; gap: 4px; }
.rd-cc-name b { font-size: 15px; font-weight: 850; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-cc-name .v { width: 15px; height: 15px; flex: none; }
.rd-cc-meta { margin-top: 6px; font-size: 11.5px; color: var(--ink-500); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.rd-cc-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.rd-cc-price { display: inline-flex; align-items: baseline; gap: 4px; font-size: 14px; font-weight: 950; color: var(--ink-900); }
.rd-cc-price .ic { width: 14px; height: 14px; display: inline-flex; align-self: center; }
.rd-cc-price small { font-size: 10px; color: var(--ink-500); font-weight: 700; }

/* ---------- Floating tab bar (global nav upgrade) ---------- */
.screen.has-tab { padding-bottom: 104px; }
.tab-bar {
  left: 14px; right: 14px; bottom: 14px;
  height: 66px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(16,32,51,.04), 0 14px 30px rgba(16,32,51,.14);
  padding: 8px 6px;
}
.tab { position: relative; }
.tab.active::after {
  content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 3px; background: var(--coral-500);
}
.tab .rd-tab-badge {
  position: absolute; top: -4px; left: calc(50% + 8px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #FF4F5A; color: #fff; font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(255,79,90,.34);
}