/* 피어잇 크루들의 친구를 소개합니다 — 소개팅 앱 화면.
   키컬러 핑크(2026-11-07 라임에서 바꿈). 사진이 주인공이고, 흰 바탕·둥근 카드·굵은 고딕·하단 탭을 쓴다.
   style.css 의 변수를 body.bd 안에서만 덮어써서 기존 페이지는 그대로 둔다. */
body.bd {
  /* 피어잇 소개팅 키컬러(핑크, 2026-11-07 라임에서 바꿈). 채우는 색이고, 그 위 글자는 --key-on(흰색).
     --key-ink 는 본문 진한 글자색. --heart 는 하트·알림처럼 튀어야 하는 곳의 바이올렛 */
  --key: #ff5c7a;
  --key-line: #f0436a;
  --key-ink: #191f28;
  --key-on: #fff;
  --key-deep: #d6305a;
  --key-soft: #ffe3e9;
  --key-tint: #fff4f6;
  --heart: #7a4dff;
  --dark: #191f28;
  --primary: #ff5c7a;
  --primary-dark: #f0436a;
  --primary-deeper: #d6305a;
  --primary-glow: rgba(255, 92, 122, 0.35);
  --primary-subtle: rgba(255, 92, 122, 0.12);
  --gray-100: #f2f4f6;
  --gray-200: #e5e8eb;
  --gray-300: #d1d6db;
  --gray-400: #b0b8c1;
  --gray-500: #8b95a1;
  --gray-700: #4e5968;
  --white: #fff;
  --radius: 20px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --bd-line: #e5e8eb;
  --bd-bg: #f7f9fb;
  --bd-shadow: 0 2px 12px rgba(25, 31, 40, 0.06);
  background: var(--bd-bg);
  color: var(--dark);
  min-height: 100dvh;
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
  overflow-x: clip;   /* hidden 이면 상단 헤더의 sticky 가 풀린다 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body.bd-locked { overflow: hidden; }
.bd h1, .bd h2, .bd h3 { line-height: 1.32; letter-spacing: -0.02em; }
.bd [hidden] { display: none !important; }

/* 상단 */
.bd-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 54px; padding: 0 16px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bd-logo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bd-logo-img { display: block; height: 34px; width: auto; }
.bd-logo em { font-style: normal; font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em; color: var(--key-ink); white-space: nowrap; }
.bd-top-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bd-top .nav-auth { margin: 0; }
.bd-top .auth-login-btn, .bd-top .auth-profile-btn { padding: 6px 11px; border: 0; background: var(--gray-100); color: var(--gray-700); font-size: 0.76rem; }
.bd-top .auth-profile-btn i, .bd-top .auth-login-btn i { color: var(--gray-500); }
.bd-top .auth-badge { display: none; }
.bd-top .auth-name { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-bell { position: relative; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.14rem; color: var(--dark); }
.bd-bell b { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--heart); color: #fff; font-size: 0.62rem; line-height: 16px; text-align: center; }

/* 본문 */
.bd-main { max-width: 520px; margin: 0 auto; padding: 14px 16px 24px; }
.bd-loading { display: grid; place-items: center; padding: 72px 0; }
.bd-loading span { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--key-soft); border-top-color: var(--key-ink); animation: bd-spin 0.8s linear infinite; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
.bd-page-head { margin: 6px 0 16px; }
.bd-page-title { font-size: 1.56rem; font-weight: 800; }
.bd-page-sub { font-size: 0.88rem; color: var(--gray-700); margin-top: 3px; }
.bd-section-title { font-size: 1.06rem; font-weight: 800; margin: 26px 0 10px; }
.bd-muted { color: var(--gray-700); font-size: 0.86rem; }
.bd-small { font-size: 0.76rem; color: var(--gray-500); }
.bd-card { background: #fff; border-radius: var(--radius); padding: 18px; margin-bottom: 12px; box-shadow: var(--bd-shadow); }
.bd-empty { text-align: center; padding: 56px 18px; color: var(--gray-500); font-size: 0.92rem; }
.bd-empty i { display: block; font-size: 2.2rem; color: var(--gray-300); margin-bottom: 12px; }
.bd-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--key-tint); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 0.85rem; margin-bottom: 12px; color: var(--key-ink); font-weight: 600; }
.bd-banner.warn { background: #fff0f2; color: #d4344f; }
.bd-banner a { font-weight: 700; text-decoration: underline; }

/* 버튼 */
.bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 54px; padding: 0 20px; border: 0; border-radius: var(--radius-sm); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; background: var(--key-soft); color: var(--key-ink); transition: transform 0.1s, opacity 0.15s; }
.bd-btn:active:not(:disabled) { transform: scale(0.98); }
.bd-btn:disabled { opacity: 0.4; cursor: default; }
.bd-btn.dark { background: var(--key); color: var(--key-on); }
.bd-btn.ghost { background: var(--gray-100); color: var(--gray-700); }
.bd-btn.danger { background: #fff0f2; color: #d4344f; }
.bd-btn.kakao { background: #fee500; color: #191919; }
.bd-btn.block { width: 100%; }
.bd-btn.small { min-height: 36px; padding: 0 13px; border-radius: 10px; font-size: 0.8rem; }
.bd-actions { display: flex; gap: 8px; margin-top: 14px; }
.bd-actions .bd-btn { flex: 1; }
.bd-icon-button { width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--gray-500); }
.bd-fixed-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(255, 255, 255, 0), #fff 34%); }
.bd-fixed-cta .bd-btn { display: flex; width: 100%; max-width: 488px; margin: 0 auto; }
.bd-fixed-cta p { text-align: center; font-size: 0.74rem; color: var(--gray-500); margin-top: 6px; }

/* 랜딩 */
.bd-hero { position: relative; margin: -14px -16px 0; padding: 34px 22px 26px; text-align: center; background: linear-gradient(180deg, #fff 0%, var(--key-tint) 42%, #ffd3dc 100%); border-radius: 0 0 28px 28px; overflow: hidden; }
.bd-hero h1 { margin-top: 14px; font-size: 1.92rem; font-weight: 800; line-height: 1.3; }

/* 친구 한마디 말풍선 */
.bd-note { position: relative; background: var(--key-tint); padding: 13px 15px; border-radius: 4px 18px 18px 18px; font-size: 0.92rem; line-height: 1.55; color: var(--dark); }
.bd-note small { display: block; font-size: 0.74rem; font-weight: 700; color: var(--key-ink); margin-bottom: 3px; }

/* 도감: 사진 카드 */
.bd-filter { display: flex; gap: 7px; overflow-x: auto; padding: 0 16px 12px; margin: 0 -16px; scrollbar-width: none; }
.bd-filter::-webkit-scrollbar { display: none; }
.bd-filter select, .bd-chip-toggle { flex: 0 0 auto; height: 36px; padding: 0 13px; border: 1px solid var(--bd-line); border-radius: 999px; background: #fff; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; }
.bd-chip-toggle.on { background: var(--key); color: var(--key-on); border-color: var(--key); }
.bd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-chip { padding: 4px 10px; border-radius: 999px; background: var(--key-soft); color: var(--key-ink); font-size: 0.76rem; font-weight: 600; }

/* 프로필 상세 */
.bd-detail-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: -14px -16px 0; scrollbar-width: none; background: var(--gray-200); }
.bd-detail-photos::-webkit-scrollbar { display: none; }
.bd-detail-photos img { flex: 0 0 100%; aspect-ratio: 1 / 1.16; object-fit: cover; scroll-snap-align: start; }
.bd-qa { padding: 18px; margin-bottom: 12px; background: #fff; border-radius: var(--radius); box-shadow: var(--bd-shadow); }
.bd-qa h3 { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--key-soft); color: var(--key-deep); font-size: 0.74rem; font-weight: 700; margin-bottom: 8px; }
.bd-qa p { font-size: 1rem; line-height: 1.6; white-space: pre-wrap; }
.bd-sticky-cta { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 8px; padding: 10px 16px; background: linear-gradient(rgba(247, 249, 251, 0), var(--bd-bg) 26%); }
.bd-sticky-cta .bd-btn { flex: 1; }
.bd-link-row { display: flex; justify-content: center; gap: 18px; margin-top: 18px; }
.bd-link-row button { border: 0; background: none; font: inherit; font-size: 0.78rem; color: var(--gray-500); text-decoration: underline; cursor: pointer; }

/* 입력 */
.bd-field { margin-bottom: 20px; }
.bd-field > label, .bd-label { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 7px; }
.bd-field .hint { font-size: 0.76rem; color: var(--gray-500); margin-top: 5px; }
.bd-input, .bd-select, .bd-textarea { width: 100%; min-height: 52px; padding: 13px 15px; border: 1.5px solid transparent; border-radius: 14px; background: var(--gray-100); font: inherit; font-size: 1rem; color: var(--dark); }
.bd-textarea { min-height: 112px; resize: vertical; line-height: 1.55; }
.bd-input:focus, .bd-select:focus, .bd-textarea:focus { outline: none; border-color: var(--key-line); background: #fff; box-shadow: 0 0 0 3px var(--key-soft); }
.bd-input::placeholder, .bd-textarea::placeholder { color: var(--gray-400); }
.bd-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.bd-pick button { min-height: 38px; padding: 0 14px; border: 1px solid var(--bd-line); border-radius: 999px; background: #fff; font: inherit; font-size: 0.86rem; font-weight: 500; color: var(--gray-700); cursor: pointer; }
.bd-pick button.on { background: var(--key); color: var(--key-on); border-color: var(--key); font-weight: 700; }
.bd-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; cursor: pointer; }
.bd-field > label.bd-check { display: flex; font-size: 0.88rem; font-weight: 500; margin-bottom: 0; }
.bd-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--key); flex: 0 0 auto; }
.bd-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--gray-100); }
.bd-switch-row:first-child { border-top: 0; padding-top: 0; }
.bd-switch-row:last-child { padding-bottom: 0; }
.bd-switch-row b { display: block; font-size: 0.95rem; font-weight: 600; }
.bd-switch-row span { font-size: 0.78rem; color: var(--gray-500); }
.bd-switch { flex: 0 0 auto; width: 50px; height: 30px; position: relative; }
.bd-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bd-switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--gray-300); pointer-events: none; transition: background 0.2s; }
.bd-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.bd-switch input:checked + i { background: var(--key); }
.bd-switch input:checked + i::after { transform: translateX(20px); }
.bd-switch input:focus-visible + i { outline: 2px solid var(--key-ink); outline-offset: 2px; }
.bd-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bd-pf-photo-guide { background: #fff7e6; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; color: #6b4a00; font-size: 0.84rem; line-height: 1.5; }
.bd-pf-photo-guide b { display: block; color: #8a5a00; font-size: 0.9rem; margin-bottom: 4px; }
.bd-pf-photo-guide ul { margin: 0; padding-left: 18px; }
.bd-photo-slot { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; background: var(--gray-100); overflow: hidden; display: grid; place-items: center; color: var(--gray-500); font-size: 0.78rem; cursor: pointer; }
.bd-photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.bd-photo-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bd-photo-slot button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(10, 16, 26, 0.6); color: #fff; cursor: pointer; }
.bd-counter { text-align: right; font-size: 0.74rem; color: var(--gray-500); margin-top: 4px; }
.bd-scope { font-size: 0.84rem; color: var(--gray-700); }
.bd-scope li { list-style: none; padding: 6px 0 6px 20px; position: relative; }
.bd-scope li::before { content: ''; position: absolute; left: 3px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--key-line); }

/* 초대장 */
.bd-letter { text-align: center; padding: 34px 20px 28px; margin: 6px 0 16px; border-radius: 24px; background: linear-gradient(180deg, var(--key-soft), #fff 72%); }
.bd-letter h1 { margin-top: 14px; font-size: 1.56rem; font-weight: 800; }
.bd-letter .bd-hero-hand { margin-top: 8px; font-size: 0.92rem; font-weight: 600; color: var(--key-ink); }
.bd-seal { width: 72px; height: 72px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--key); color: var(--key-on); font-size: 1.7rem; box-shadow: 0 8px 22px rgba(255, 92, 122, 0.22); }

/* 목록 행 */
.bd-row { display: flex; align-items: center; gap: 12px; }
.bd-row-main { flex: 1; min-width: 0; }
.bd-row-main b { display: block; font-size: 0.98rem; font-weight: 700; }
.bd-row-thumb { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; background: var(--gray-200); flex: 0 0 auto; }
.bd-status { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--gray-100); font-size: 0.72rem; font-weight: 700; color: var(--gray-700); }
.bd-status.good { background: var(--key-soft); color: var(--key-deep); }
.bd-status.warn { background: #fff0f2; color: #d4344f; }
.bd-task-mark { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--key-soft); color: var(--key-ink); font-size: 1rem; }
.bd-task-mark.warn { background: #fff0f2; color: #d4344f; }

/* 내 정보 머리 */

/* 초대권 */
.bd-ticket { position: relative; display: flex; align-items: center; gap: 13px; padding: 0 14px 0 0; min-height: 86px; overflow: hidden; }
.bd-ticket-stub { align-self: stretch; flex: 0 0 62px; display: grid; place-items: center; background: var(--key); color: var(--key-on); font-size: 1.22rem; }
.bd-ticket.used .bd-ticket-stub { background: var(--gray-200); color: var(--gray-500); }
.bd-ticket::before, .bd-ticket::after { content: ''; position: absolute; left: 53px; width: 18px; height: 18px; border-radius: 50%; background: var(--bd-bg); }
.bd-ticket::before { top: -9px; }
.bd-ticket::after { bottom: -9px; }

.bd-match-hero { text-align: center; padding: 4px 0 10px; font-size: 1.06rem; font-weight: 800; }
.bd-notice { padding: 14px 0; border-top: 1px solid var(--gray-100); font-size: 0.92rem; display: block; color: inherit; }
.bd-notice:first-child { border-top: 0; padding-top: 0; }
.bd-notice.unread { font-weight: 700; }
.bd-legal h2 { font-size: 1rem; margin: 18px 0 6px; }
.bd-legal p, .bd-legal li { font-size: 0.86rem; color: var(--gray-700); }
.bd-legal ul { padding-left: 18px; }

/* 하단 탭 */
.bd-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; background: #fff; border-top: 1px solid var(--gray-100); padding-bottom: env(safe-area-inset-bottom); }
.bd-tabs a { flex: 1; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 0.68rem; font-weight: 600; color: var(--gray-400); }
.bd-tabs a i { font-size: 1.16rem; }
.bd-tabs a.active { color: var(--key-ink); }

/* 시트·토스트 */
.bd-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(10, 16, 26, 0.5); display: flex; align-items: flex-end; justify-content: center; }
.bd-sheet { width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; background: #fff; border-radius: 22px 22px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); }
.bd-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bd-sheet-head h2 { font-size: 1.12rem; font-weight: 800; }
.bd-toast { position: fixed; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 300; max-width: 420px; margin: 0 auto; padding: 13px 16px; border-radius: 14px; background: rgba(25, 31, 40, 0.92); color: #fff; font-size: 0.88rem; text-align: center; opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none; }
.bd-toast.show { opacity: 1; transform: none; }

/* 넓은 화면: 앱처럼 가운데 한 칸 */
@media (min-width: 720px) {
  .bd-tabs { left: 50%; right: auto; width: 520px; transform: translateX(-50%); border: 1px solid var(--gray-100); border-radius: 18px 18px 0 0; }
  .bd-sticky-cta { left: 50%; right: auto; width: 520px; transform: translateX(-50%); }
  .bd-overlay { align-items: center; }
  .bd-sheet { border-radius: 22px; }
  .bd-hero { border-radius: 0 0 28px 28px; }
}

/* 관리자 */
.bd-admin { padding-bottom: 40px; }
.bd-admin-nav { display: flex; gap: 4px; overflow-x: auto; padding: 6px 16px; background: #fff; position: sticky; top: 54px; z-index: 40; scrollbar-width: none; border-bottom: 1px solid var(--gray-100); }
.bd-admin-nav button { flex: 0 0 auto; height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; color: var(--gray-700); }
.bd-admin-nav button.active { background: var(--key); color: var(--key-on); }
.bd-admin-main { max-width: 1040px; margin: 0 auto; padding: 20px 16px; }
.bd-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.bd-stat { background: #fff; border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--bd-shadow); }
.bd-stat span { display: block; font-size: 0.78rem; color: var(--gray-700); }
.bd-stat b { font-size: 1.54rem; font-weight: 800; }
.bd-table-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--bd-shadow); }
.bd-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.bd-table th { text-align: left; padding: 11px 12px; background: var(--gray-100); white-space: nowrap; font-size: 0.76rem; color: var(--gray-700); }
.bd-table td { padding: 11px 12px; border-top: 1px solid var(--gray-100); vertical-align: top; }
.bd-table tr.click { cursor: pointer; }
.bd-table tr.click:hover td { background: var(--key-tint); }
.bd-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.bd-toolbar .bd-input, .bd-toolbar .bd-select { min-height: 42px; padding: 8px 12px; width: auto; flex: 1 1 160px; font-size: 0.88rem; }
.bd-review { display: grid; grid-template-columns: 150px 1fr; gap: 16px; }
.bd-review img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--gray-200); }
.bd-review-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; }
.bd-review-thumbs img { border-radius: 8px; }
.bd-tree ul { list-style: none; padding-left: 18px; border-left: 2px solid var(--gray-100); margin-left: 8px; }
.bd-tree > ul { border: 0; padding: 0; margin: 0; }
.bd-tree li { padding: 3px 0; font-size: 0.88rem; }
.bd-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 18px; }
@media (max-width: 560px) { .bd-review { grid-template-columns: 1fr; } }

/* 오늘의 인연: 한 명씩, 사진 전부와 함께 */
.bd-today { margin-bottom: 8px; }
.bd-today-list { display: grid; gap: 16px; }
.bd-today-card { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 6px 20px rgba(25, 31, 40, 0.08); }
.bd-today-media { position: relative; background: var(--gray-200); }
.bd-today-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bd-today-photos::-webkit-scrollbar { display: none; }
.bd-today-photos img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; display: block; }
.bd-today-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.bd-today-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.bd-today-dots i.on { width: 16px; border-radius: 3px; background: #fff; }
.bd-today-label { position: absolute; top: 12px; left: 12px; padding: 6px 11px; border-radius: 999px; background: var(--key); color: var(--key-on); font-size: 0.76rem; font-weight: 800; box-shadow: 0 2px 8px rgba(25, 31, 40, 0.15); }
.bd-today-label.friend { background: var(--heart); color: #fff; }
.bd-today-label.muted { background: rgba(255, 255, 255, 0.92); color: var(--gray-700); }
.bd-today-body { padding: 16px 16px 16px; }
.bd-today-name { font-size: 1.32rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 2px; }
.bd-today-intro { margin-top: 10px; font-size: 0.9rem; line-height: 1.55; color: var(--gray-700); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bd-today-actions { display: flex; gap: 8px; margin-top: 14px; }
.bd-today-actions > * { flex: 1; min-height: 50px; }
.bd-today-state { flex: 2; display: grid; place-items: center; padding: 0 10px; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-700); font-size: 0.86rem; font-weight: 700; text-align: center; }
.bd-coupon { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); background: var(--key); color: var(--key-on); }
.bd-coupon > i { font-size: 1.3rem; }
.bd-coupon .bd-row-main b { display: block; font-size: 0.98rem; }
.bd-coupon .bd-small { color: var(--key-on); opacity: 0.85; }
.bd-coupon .bd-btn.small { flex: 0 0 auto; }
.bd-coupon.promo { background: var(--key-tint); border: 1px dashed var(--key-line); color: var(--key-ink); }
/* 2026-11-07 키컬러가 핑크로 바뀌며 연한 바탕 위 글자가 흰색이 되어 안 보이던 것을 고침 */
.bd-coupon.promo > i { color: var(--key); }
.bd-coupon.promo .bd-small { color: var(--gray-700); opacity: 1; }
.bd-coupon.promo .bd-btn { background: var(--key); color: var(--key-on); }

.bd-coupon .bd-btn.dark { background: #fff; color: var(--key-ink); box-shadow: 0 2px 8px rgba(25, 31, 40, 0.08); }

/* 홈: 인사 + 내 소개팅 대시보드 */

/* 오늘의 인연: 날짜 띠, 사진 없는 카드 */

.bd-avatar-media { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; padding: 34px 16px 24px; }
.bd-avatar { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.7); font-size: 2.2rem; font-weight: 800; color: var(--key-ink); }
.bd-avatar-media small { font-size: 0.74rem; color: var(--gray-700); }

/* 채팅 */
.bd-chat-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bd-chat-row .bd-row-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-chat-row.closed { opacity: 0.55; }
.bd-chat-side { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; }
.bd-chat-side small { font-size: 0.7rem; color: var(--gray-400); }
.bd-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--heart); color: #fff; font-size: 0.7rem; line-height: 20px; text-align: center; }
.bd-chat-head { position: sticky; top: 54px; z-index: 30; display: flex; align-items: center; gap: 10px; margin: -14px -16px 0; padding: 10px 12px; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--bd-line); }
.bd-chat-head .bd-row-main b { display: block; }
.bd-row-thumb.small { width: 38px; height: 38px; }
.bd-chat-list { display: grid; gap: 8px; }
.bd-msg { max-width: 78%; justify-self: start; }
.bd-msg p { padding: 10px 13px; border-radius: 4px 18px 18px 18px; background: #fff; box-shadow: 0 1px 4px rgba(25, 31, 40, 0.06); font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.bd-msg small { display: block; margin: 3px 4px 0; font-size: 0.66rem; color: var(--gray-400); }
.bd-msg.mine { justify-self: end; text-align: right; }
.bd-msg.mine p { background: var(--key); color: var(--key-on); border-radius: 18px 4px 18px 18px; text-align: left; }
.bd-chat-bar { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--bd-line); }
.bd-chat-bar .bd-btn { flex: 0 0 52px; min-height: 46px; padding: 0; }
.bd-chat-input { flex: 1; min-height: 46px; max-height: 120px; padding: 12px 14px; border: 1px solid var(--bd-line); border-radius: 14px; font: inherit; font-size: 0.95rem; resize: none; background: var(--bd-bg); }
.bd-chat-input:focus { outline: none; border-color: var(--key-line); background: #fff; }
.bd-tab-icon { position: relative; display: inline-block; }
.bd-tab-icon b { position: absolute; top: -5px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--heart); color: #fff; font-size: 0.6rem; line-height: 16px; text-align: center; font-style: normal; }
@media (min-width: 560px) {
  .bd-chat-bar { left: 50%; right: auto; width: 520px; transform: translateX(-50%); }
}

/* 마이: 참가증 카드 */

/* 프로필 작성: 한 화면에 질문 하나 */

.bd-link-button { border: 0; background: none; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--gray-700); cursor: pointer; padding: 6px; }
.bd-reasons { margin: 2px 0 0; padding-left: 16px; display: grid; gap: 2px; }
.bd-reasons li { font-size: 0.9rem; line-height: 1.5; }

/* 홈 위쪽: 키컬러 배경 */

/* 관리자: 초대 관계 그래프 */
.bd-graph { position: relative; }
.bd-graph-canvas { display: block; width: 100%; height: 70vh; min-height: 420px; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #ffffff, #f2f4f6); border: 1px solid var(--bd-line); touch-action: none; cursor: grab; }
.bd-graph-search { position: absolute; top: 10px; left: 10px; z-index: 2; width: 160px; min-height: 38px; background: rgba(255, 255, 255, 0.95); }
.bd-graph-info { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: min(260px, calc(100% - 20px)); padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(25, 31, 40, 0.15); }
.bd-graph-info b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.bd-graph-info .bd-small { margin-top: 2px; }
.bd-graph-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 0.76rem; color: var(--gray-700); }
.bd-graph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bd-legend-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #191f28; display: inline-block; }
.bd-legend-line { width: 18px; height: 0; display: inline-block; }
.bd-tabs a[hidden] { display: none; }

/* 마이: 내 활동 목록 */
.bd-menu { padding: 4px 0; }
.bd-menu a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--gray-100); font-weight: 700; font-size: 0.94rem; }
.bd-menu a:first-child { border-top: 0; }
.bd-menu a i:first-child { width: 20px; text-align: center; color: var(--key-ink); }
.bd-menu a span { flex: 1; }
.bd-menu a i:last-child { color: var(--gray-300); font-size: 0.8rem; }

/* 오늘의 인연: 위쪽 제목과 다음 소개 카운트다운 */
.bd-today-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 6px 2px 14px; }
.bd-today-top p { font-size: 0.86rem; color: var(--gray-500); font-weight: 600; margin-bottom: 2px; }
.bd-today-top h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.bd-next-badge { flex: 0 0 auto; padding: 6px 11px; border-radius: 999px; background: var(--key-soft); color: var(--key-ink); font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 오늘의 인연: 사진을 꽉 채운 카드 */
.bd-ov-card { border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 8px 26px rgba(25, 31, 40, 0.12); }
.bd-ov-media { position: relative; background: var(--gray-200); }
.bd-ov-media .bd-today-photos img { aspect-ratio: 3 / 4; }
.bd-ov-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 16, 26, 0) 40%, rgba(10, 16, 26, 0.72) 100%); pointer-events: none; }
.bd-ov-media .bd-today-dots { top: 14px; bottom: auto; }
.bd-ov-label { position: absolute; top: 14px; left: 14px; padding: 7px 13px; border-radius: 999px; background: var(--key); color: var(--key-on); font-size: 0.8rem; font-weight: 800; box-shadow: 0 2px 10px rgba(25, 31, 40, 0.18); }
.bd-ov-label.friend { background: var(--heart); color: #fff; }
.bd-ov-label.like { background: #fff; color: var(--heart); }
.bd-ov-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 16px; color: #fff; }
.bd-ov-name { display: inline-flex; align-items: center; gap: 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.bd-ov-name .fa-circle-check { font-size: 1.05rem; color: var(--key); }
.bd-ov-name .bd-ov-more { font-size: 0.85rem; opacity: 0.8; }
.bd-ov-meta { margin-top: 2px; font-size: 0.95rem; font-weight: 600; opacity: 0.92; }
.bd-ov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bd-ov-chips span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(4px); font-size: 0.74rem; font-weight: 700; }
.bd-ov-bubble { position: relative; margin-top: 12px; padding: 12px 15px; border-radius: 18px 18px 18px 4px; background: #fff; color: var(--key-ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
.bd-ov-bubble small { display: block; font-size: 0.72rem; font-weight: 800; color: var(--gray-500); margin-bottom: 3px; }
.bd-ov-bubble p { font-size: 0.95rem; font-weight: 700; line-height: 1.5; white-space: pre-line; }
.bd-ov-actions { display: flex; gap: 8px; padding: 12px; }
.bd-ov-actions > * { flex: 1; min-height: 52px; }

/* 상세 프로필: 동그란 사진 + 아이콘 항목 */
.bd-profile { background: #fff; margin: -14px -16px 0; padding: 18px 20px 24px; min-height: calc(100vh - 54px); }
.bd-profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.bd-profile-face { position: relative; flex: 0 0 auto; width: 104px; height: 104px; padding: 0; border: 0; border-radius: 50%; overflow: visible; background: var(--key-soft); display: grid; place-items: center; cursor: pointer; }
.bd-profile-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bd-profile-face span { font-size: 2.4rem; font-weight: 800; color: var(--key-ink); }
.bd-profile-face b { position: absolute; right: -2px; bottom: 2px; padding: 2px 7px; border-radius: 999px; background: var(--key-ink); color: #fff; font-size: 0.7rem; }
.bd-profile-head h1 { font-size: 1.62rem; font-weight: 800; letter-spacing: -0.03em; }
.bd-profile-job { margin-top: 3px; font-size: 1.02rem; font-weight: 600; color: var(--gray-700); }
.bd-profile-region { margin-top: 2px; font-size: 0.92rem; color: var(--gray-500); }
.bd-profile-ico { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 1rem; }
.bd-profile-ico.key { background: var(--key-soft); color: var(--key-ink); }
.bd-profile-ico.blue { background: #e8f1fd; color: #3b82f6; }
.bd-profile-ico.pink { background: #efe8ff; color: var(--heart); }
.bd-profile-ico.purple { background: #efeafd; color: #7c5cdb; }
.bd-profile-ico.orange { background: #fff1e3; color: #f08a24; }
.bd-profile-ico.gray { background: var(--gray-100); color: var(--gray-500); }

/* 내 초대권: 상태별 색 */
.bd-ticket.fresh .bd-ticket-stub { background: var(--key); color: var(--key-on); }
.bd-ticket.sent { background: #f3f8ff; }
.bd-ticket.sent .bd-ticket-stub { background: var(--key-ink); color: var(--key); }
.bd-ticket.sent .bd-small { color: #3b6fd8; font-weight: 700; }
.bd-ticket.expired .bd-ticket-stub { background: #efe8ff; color: var(--heart); }
.bd-ticket.expired .bd-small { color: var(--heart); font-weight: 700; }
.bd-ticket.used { opacity: 0.75; }

/* 주선하기: 친구 카드 안 추천사 */
.bd-friend-testimonial { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--bd-line); display: grid; gap: 8px; }

.bd-main > .bd-invite-btn { margin-top: 14px; }
.bd-ov-labels { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.bd-ov-labels .bd-ov-label { position: static; }
.bd-ov-label.extra { background: #7c5cdb; color: #fff; }

/* 주선하기: 옆으로 넘기는 후보 카드 */
.bd-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 16px; }
.bd-carousel::-webkit-scrollbar { display: none; }
.bd-carousel > .bd-pick-card { flex: 0 0 88%; scroll-snap-align: center; display: flex; flex-direction: column; }
.bd-ov-avatar { aspect-ratio: 3 / 4; display: grid; place-items: center; }
.bd-ov-avatar { position: relative; overflow: hidden; }
/* 동물이 이름·소개 글에 가리지 않게 위쪽으로 크게 */

.bd-ov-label.muted { background: rgba(255, 255, 255, 0.9); color: var(--gray-700); }
.bd-pick-more { padding: 14px 16px 0; display: grid; gap: 10px; }
.bd-pick-more b { font-size: 0.84rem; font-weight: 800; color: var(--key-ink); }
.bd-pick-more b i { color: var(--gray-500); }
.bd-pick-more p { margin-top: 2px; font-size: 0.9rem; line-height: 1.5; color: var(--gray-700); }
.bd-pick-card .bd-ov-actions { margin-top: auto; }
.bd-ov-bubble.testimonial { margin-top: 8px; background: var(--key-tint); border-radius: 18px 18px 4px 18px; }
.bd-ov-bubble.testimonial small { color: var(--key-ink); }
.bd-ov-bubble.testimonial p { font-weight: 600; font-size: 0.9rem; }

/* 상세 프로필: 비슷한 항목끼리 묶은 카드 */
.bd-pc { margin-bottom: 14px; padding: 16px 16px 6px; border-radius: 20px; background: #fff; border: 1px solid var(--bd-line); }
.bd-pc.testimonial { background: var(--key-tint); border-color: var(--key-soft); padding-bottom: 14px; }
.bd-pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bd-pc-head .bd-profile-ico { width: 32px; height: 32px; font-size: 0.85rem; }
.bd-pc-head h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.bd-pc-row { padding: 10px 0; border-top: 1px solid var(--gray-100); }
.bd-pc-head + .bd-pc-row { border-top: 0; padding-top: 2px; }
.bd-pc-row small { display: block; font-size: 0.76rem; font-weight: 800; color: var(--gray-500); margin-bottom: 3px; }
.bd-pc-row p { font-size: 0.95rem; line-height: 1.55; color: var(--key-ink); white-space: pre-wrap; }
.bd-pc-row .bd-chips { margin-top: 6px; }
.bd-pc-quote + .bd-pc-quote { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--key-line); }
.bd-pc-quote p { font-size: 0.98rem; line-height: 1.6; font-weight: 600; color: var(--key-ink); white-space: pre-wrap; }
.bd-pc-quote small { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--gray-700); text-align: right; }
.bd-profile { background: var(--bd-bg); }
/* 동그란 프로필 사진이 세로로 늘어나지 않게 (사진 비율과 상관없이 원) */
.bd-profile-face { aspect-ratio: 1 / 1; }
.bd-profile-face img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bd-profile-face b { z-index: 1; }
.bd-profile-face.avatar { overflow: hidden; cursor: default; }
.bd-profile-face.avatar svg { width: 100%; height: 100%; }

/* 내 소개팅: 달력처럼 한 줄 (오늘이 가운데) */

/* 크루 홈: 작은 인사 + 할 일 두 가지 */

/* 크루 홈: 라임 배경을 넓게, 첫 번째 할 일이 배경 위에 걸쳐 올라온다 */

/* 초대하기: 입장권 모양 (홈·주선하기 공통). 양옆 가운데 반달 홈 + 오른쪽 꼬리표 */
.bd-invite-btn { position: relative; display: flex; align-items: stretch; width: 100%; min-height: 76px; padding: 0; border: 0; border-radius: 14px; background: var(--key-ink); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 8px 20px rgba(25, 31, 40, 0.2);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 10px, #000 10.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 10px, #000 10.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px) right / 51% 100% no-repeat; }
.bd-invite-main { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; }
.bd-invite-ico { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--key); color: var(--key-on); font-size: 0.95rem; }
.bd-invite-text { display: grid; gap: 2px; }
.bd-invite-text b { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; }
.bd-invite-text small { font-size: 0.76rem; font-weight: 600; color: rgba(255, 255, 255, 0.62); }
.bd-invite-stub { flex: 0 0 84px; display: grid; place-content: center; text-align: center; border-left: 2px dashed rgba(255, 255, 255, 0.28); padding-right: 8px; color: var(--key); }
.bd-invite-stub b { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.bd-invite-stub small { margin-top: 3px; font-size: 0.68rem; font-weight: 700; color: rgba(255, 255, 255, 0.62); }
.bd-invite-btn:disabled { background: var(--gray-300); color: var(--gray-700); box-shadow: none; }
.bd-invite-btn:disabled .bd-invite-ico { background: var(--gray-200); color: var(--gray-500); }
.bd-invite-btn:disabled .bd-invite-text small, .bd-invite-btn:disabled .bd-invite-stub small { color: var(--gray-500); }
.bd-invite-btn:disabled .bd-invite-stub { color: var(--gray-500); border-left-color: rgba(25, 31, 40, 0.15); }
/* 작고 얇은 링크 버튼 */

/* 추천사: '어떤 사람에게 추천하는지'는 ▼로 펼친다 */
.bd-reco-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bd-reco-head small { margin-bottom: 0 !important; }
.bd-reco-toggle { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(25, 31, 40, 0.06); color: var(--key-ink); font-size: 0.85rem; cursor: pointer; transition: transform 0.15s; }
.bd-reco-toggle.open { transform: rotate(180deg); }
.bd-reco-more { margin-top: 8px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); }
.bd-reco-more small { display: block; font-size: 0.72rem; font-weight: 800; color: var(--gray-500); margin-bottom: 2px; }
.bd-reco-more span { font-size: 0.88rem; line-height: 1.5; color: var(--key-ink); }
.bd-pc-quote .bd-reco-head small { text-align: left; margin-top: 6px; }

/* 공개 전 친구: 지인 확인용 본명·연락처 */
.bd-idcheck { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--key-tint); display: grid; gap: 4px; }
.bd-idcheck div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.bd-idcheck span { color: var(--gray-500); font-weight: 700; }
.bd-idcheck b, .bd-idcheck a { font-weight: 800; color: var(--key-ink); }
.bd-vouch-card { display: flex; align-items: center; gap: 14px; }
.bd-vouch-card .bd-row-main { display: grid; gap: 2px; }
.bd-vouch-card .bd-row-main b { font-size: 1.08rem; }
.bd-vouch-face { width: 62px; height: 62px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--key-soft); font-size: 1.5rem; font-weight: 800; }
.bd-friend-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bd-friend-note { padding: 2px 8px; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); font-size: 0.72rem; font-weight: 700; }

/* 주선하기 날짜 띠: 지난 날 골라준 기록 */

.bd-pick-today { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--key-soft); color: var(--key-ink); border: 1px solid var(--key-line); font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 7px; }

/* 주선하기: 제목 옆 초대권 알약 (소개팅도 하는 사람) */

/* 크루 입장 안내 */
.bd-gate { display: grid; gap: 8px; }
.bd-gate-title { font-size: 1.08rem; font-weight: 800; }
.bd-gate .bd-btn, .bd-gate .bd-invite-btn { margin-top: 4px; }
.bd-gate-or { text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--gray-500); margin: -2px 0 10px; }

/* 프로필 등록: 4단계 + 질문 하나씩 펼치기 */
.bd-pf { padding-bottom: 20px; }
.bd-pf-nav { position: sticky; top: 54px; z-index: 30; margin: -14px -16px 6px; padding: 12px 16px 10px; background: rgba(247, 249, 251, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bd-pf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.bd-pf-steps button { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; font: inherit; cursor: pointer; color: var(--gray-400); }
.bd-pf-steps button:disabled { cursor: default; }
.bd-pf-dot { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--gray-200); color: var(--gray-500); font-size: 0.8rem; font-weight: 800; transition: background 0.2s, color 0.2s; }
.bd-pf-label { font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.bd-pf-steps li.done .bd-pf-dot { background: var(--key-soft); color: var(--key-ink); }
.bd-pf-steps li.done button { color: var(--gray-700); }
.bd-pf-steps li.on .bd-pf-dot { background: var(--key); color: var(--key-on); box-shadow: 0 0 0 3px var(--key-soft); }
.bd-pf-steps li.on button { color: var(--key-ink); }
.bd-pf-bar { height: 4px; margin-top: 10px; border-radius: 4px; background: var(--gray-200); overflow: hidden; }
.bd-pf-bar i { display: block; height: 100%; background: var(--key-line); border-radius: 4px; transition: width 0.35s ease; }
.bd-pf-head { margin: 14px 2px 14px; }
.bd-pf-head h1 { font-size: 1.42rem; font-weight: 800; letter-spacing: -0.03em; }
.bd-pf-head p { margin-top: 3px; font-size: 0.88rem; color: var(--gray-700); }
.bd-pf-list { display: grid; gap: 8px; }
.bd-pf-q { background: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--bd-shadow); display: grid; gap: 12px; scroll-margin-top: 140px; }
.bd-pf-q.enter { animation: bd-pf-in 0.35s ease both; }
@keyframes bd-pf-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.bd-pf-qtitle { display: flex; align-items: center; gap: 7px; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; }
.bd-pf-qtitle em { font-style: normal; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); }
.bd-pf-hint { margin-top: -6px; font-size: 0.84rem; color: var(--gray-500); line-height: 1.5; }
.bd-pf-q > .bd-btn { width: 100%; }
.bd-pf-q .bd-pick { gap: 8px; }
.bd-pf-skip { justify-self: center; border: 0; background: none; font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--gray-500); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 2px 8px; }
.bd-pf-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 1px solid var(--bd-line); border-radius: 16px; background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--gray-400); }
.bd-pf-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bd-pf-row small { font-size: 0.72rem; font-weight: 700; color: var(--gray-500); }
.bd-pf-row b { font-size: 0.94rem; font-weight: 700; color: var(--key-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-pf-row b.skipped { color: var(--gray-400); font-weight: 600; }
.bd-pf-row > i { font-size: 0.78rem; }
.bd-pf-thumbs { display: flex; gap: 4px; }
.bd-pf-thumbs img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.bd-pf-stage-end { text-align: center; }
.bd-pf-stage-end p { font-weight: 700; }
.bd-pf-habits { display: grid; gap: 4px; }
.bd-pf-range { display: flex; align-items: center; gap: 8px; }
.bd-pf-range .bd-select { flex: 1; }
.bd-pf-range span { color: var(--gray-500); font-weight: 700; }
.bd-pf-preview { max-width: 380px; margin: 0 auto; }
.bd-pf-edit { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.bd-pf-edit button, .bd-pf-jump { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--bd-line); border-radius: 999px; background: #fff; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--gray-700); cursor: pointer; }
.bd-pf-jump { margin: 0 2px; padding: 2px 9px; }
.bd-photo-slot { position: relative; }
.bd-photo-main, .bd-photo-first { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; font-style: normal; }
.bd-photo-main { background: var(--key); color: var(--key-on); }
.bd-photo-first { border: 0; background: rgba(25, 31, 40, 0.7); color: #fff; cursor: pointer; }
/* 사진 칸의 x 버튼 규칙(오른쪽 위 26px 동그라미)이 '대표로'에 덮이지 않게 */
.bd-photo-slot .bd-photo-first { top: auto; right: auto; width: auto; height: auto; border-radius: 999px; }
/* 등록 완료 */
.bd-done { text-align: center; padding: 30px 8px 18px; }
.bd-done-mark { width: 72px; height: 72px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--key); color: var(--key-on); font-size: 1.8rem; animation: bd-pf-in 0.4s ease both; }
.bd-done h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.bd-done > p { margin-top: 8px; color: var(--gray-700); line-height: 1.55; }
.bd-done-steps { list-style: none; margin: 22px auto 0; padding: 16px 18px; max-width: 320px; text-align: left; display: grid; gap: 10px; background: #fff; border-radius: 18px; box-shadow: var(--bd-shadow); }
.bd-done-steps li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; color: var(--gray-500); }
.bd-done-steps li.done { color: var(--key-ink); }
.bd-done-steps li.done i { color: var(--key-line); }
@media (min-width: 560px) { .bd-pf-nav { margin-left: 0; margin-right: 0; border-radius: 0 0 16px 16px; } }

/* 프로필 확인을 기다리는 홈 */
.bd-wait { text-align: center; padding: 56px 6px 8px; }
.bd-logo-wave { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 92px; }
.bd-logo-wave span { display: block; flex: none; background-image: url(/logo.png); background-repeat: no-repeat; animation: bd-logo-wave 1.8s ease-in-out infinite; }
@keyframes bd-logo-wave { 0%, 40%, 100% { transform: translateY(0); } 20% { transform: translateY(-22px); } }
.bd-wait-title { margin-top: 26px; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; color: var(--key-ink); }
.bd-wait-title mark { background: linear-gradient(transparent 62%, var(--key) 62%); color: inherit; padding: 0 2px; }
.bd-wait-sub { margin-top: 12px; color: var(--gray-700); line-height: 1.6; font-size: 0.95rem; }
.bd-wait-more { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--bd-line); text-align: center; }
.bd-wait-more > .bd-small { margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .bd-logo-wave span { animation: none; } }
.bd-pf-row.readonly { cursor: default; }
.bd-pf-readlist { display: grid; gap: 8px; }
.bd-pf-row.readonly b { white-space: normal; overflow: visible; }
.bd-pf-job { display: grid; }
.bd-pf-job .bd-field { margin-bottom: 16px; }
.bd-pf-grow { animation: bd-pf-in 0.35s ease both; }
.bd-pf-more { margin-top: 12px; }
.bd-pf-more .bd-textarea { min-height: 64px; }
.bd-pf-more-tip { margin: 6px 2px 0; font-size: 0.78rem; font-weight: 600; color: var(--primary-deeper); }
.bd-pf-looks .bd-field { margin-bottom: 14px; }
.bd-pf-unit { display: flex; align-items: center; gap: 8px; }
.bd-pf-unit .bd-input { max-width: 120px; }
.bd-pf-unit span { font-weight: 700; color: var(--gray-700); }
.bd-pf-groups button { display: inline-flex; align-items: center; gap: 6px; }
.bd-pf-groups button i { font-size: 0.7rem; opacity: 0.6; }
.bd-pf-groups button.has { border-color: var(--key-line); background: var(--key-tint); }
.bd-pf-groups button.open { background: var(--key); border-color: var(--key); color: var(--key-ink); }
.bd-pf-group-items { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--bd-bg); }

/* ---------- 첫 화면: 초대 그림 (피어잇 원 → 크루 → 친구 → 친구의 친구) ---------- */
.bd-story { position: relative; margin-top: -14px; }
/* 위 소개 + 그림이 머리말과 아래 카카오 버튼 사이를 꽉 채우고 붙어 있다 */
.bd-story-stage { position: sticky; top: 54px; z-index: 1; height: calc(100vh - 54px - 106px); height: calc(100dvh - 54px - 106px - env(safe-area-inset-bottom)); margin: 0 -16px; padding: 0 16px; display: flex; flex-direction: column; }
.bd-story-stage .bd-hero { flex: none; margin: 0 -16px; padding: 12px 22px 14px; }
.bd-story-stage .bd-hero h1 { margin-top: 8px; font-size: 1.5rem; }
.bd-story-in { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.bd-story-caps { flex: none; display: grid; text-align: center; }
.bd-story-cap { grid-area: 1 / 1; align-self: start; display: grid; gap: 4px; padding: 0 6px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.4s; }
.bd-story-cap.on { opacity: 1; transform: none; }
.bd-story-cap b { font-size: 1.36rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; }
.bd-story-cap mark { background: linear-gradient(transparent 56%, var(--key) 56%); color: inherit; padding: 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bd-story-cap p { font-size: 0.88rem; color: var(--gray-700); line-height: 1.5; }
/* 한 줄씩 끊어 보이고, 아주 좁은 화면에서 넘칠 때만 그 줄 안에서 고르게 접힌다 */
.bd-story-cap p span { display: block; text-wrap: balance; }
/* 설명 중 꼭 짚을 줄: 연한 형광펜 (첫 줄은 위와 조금 띄운다) */
.bd-story-cap p span.mk mark { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--key) 28%, transparent) 55%); color: var(--gray-900, #222); font-weight: 600; padding: 0 2px; }
.bd-story-cap p span:not(.mk) + span.mk { margin-top: 6px; }
.bd-story-stage svg { flex: 1 1 0; min-height: 110px; display: block; width: calc(100% + 16px); margin: 0 -8px; height: auto; overflow: visible; }
.bd-story-legend, .bd-story-dots { flex: none; }
.bd-story-legal { flex: none; margin-top: 4px; text-align: center; font-size: 0.72rem; color: var(--gray-500); }
.bd-story-legend { display: flex; justify-content: center; gap: 12px; margin-top: 2px; font-size: 0.72rem; font-weight: 600; color: var(--gray-500); }
.bd-story-legend span { display: inline-flex; align-items: center; gap: 4px; }
.bd-story-legend i { width: 7px; height: 7px; border-radius: 50%; background: #ff7d96; }
.bd-story-legend i.crew { width: 8px; height: 8px; background: #e0305a; }
.bd-story-legend i.fof { width: 5px; height: 5px; background: #ffc6d2; }
.bd-story-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.bd-story-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--gray-300); transition: width 0.3s, background 0.3s; }
.bd-story-dots span.on { width: 16px; background: var(--key-ink); }
.bd-story-steps { position: relative; pointer-events: none; }

/* 그림 요소 */
.st-core { fill: #fff; }
.st-pulse { fill: none; stroke: var(--key-line); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: st-pulse 2.4s ease-out infinite; }
@keyframes st-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
.st-l { stroke: var(--key-line); stroke-width: 1; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 0.55s ease var(--d), opacity 0.4s, stroke 0.4s; }
.st-n { stroke: none; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d), opacity 0.4s; }
.st-crew { fill: #e0305a; }
.st-friend { fill: #ff7d96; }
.st-fof { fill: #ffc6d2; }
.bd-story-stage:not([data-step="0"]) .st-l { stroke-dashoffset: 0; }
.bd-story-stage:not([data-step="0"]) .st-n { transform: scale(1); }
/* 1단계가 아닌 단계에서는 주인공 점만 또렷하게 */
.bd-story-stage[data-step="2"] .st-n:not(.h2), .bd-story-stage[data-step="3"] .st-n:not(.h3), .bd-story-stage[data-step="4"] .st-n:not(.h4), .bd-story-stage[data-step="5"] .st-n:not(.h5), .bd-story-stage[data-step="6"] .st-n:not(.h6), .bd-story-stage[data-step="7"] .st-n:not(.h7) { opacity: 0.3; transition-delay: 0s; }
.bd-story-stage[data-step="2"] .st-l:not(.l2), .bd-story-stage[data-step="3"] .st-l:not(.l3), .bd-story-stage[data-step="4"] .st-l:not(.l4), .bd-story-stage[data-step="5"] .st-l:not(.l5), .bd-story-stage[data-step="6"] .st-l:not(.l6), .bd-story-stage[data-step="7"] .st-l:not(.l7) { opacity: 0.3; transition-delay: 0s; }
.bd-story-stage[data-step="2"] .h2, .bd-story-stage[data-step="6"] .h6 { fill: var(--key-ink); }
.bd-story-stage[data-step="3"] .l3, .bd-story-stage[data-step="5"] .l5 { stroke: var(--key-ink); }
.bd-story-stage[data-step="4"] .h4, .bd-story-stage[data-step="7"] .h7 { fill: var(--heart); }
.bd-story-stage[data-step="5"] .pk { fill: var(--heart); transition: fill 0.3s 2.1s, opacity 0.4s; }
.bd-story-stage[data-step="6"] .st-n.x6 { opacity: 0.14; }
.bd-story-stage[data-step="6"] .st-l.r6 { stroke: var(--gray-400); stroke-dasharray: 2 4; stroke-dashoffset: 0; opacity: 0.6; }

/* 단계마다 나타나는 것 */
.o2, .o3, .o4, .o5, .o6, .o7 { opacity: 0; transition: opacity 0.35s; }
.bd-story-stage[data-step="2"] .o2, .bd-story-stage[data-step="3"] .o3, .bd-story-stage[data-step="4"] .o4, .bd-story-stage[data-step="5"] .o5, .bd-story-stage[data-step="6"] .o6, .bd-story-stage[data-step="7"] .o7 { opacity: 1; }
.st-pair { fill: none; stroke: var(--heart); stroke-width: 1.4; stroke-linecap: round; }
.st-march { stroke-dasharray: 5 6; animation: st-march 1s linear infinite; }
.st-friendline { stroke: #e0305a; }
@keyframes st-march { to { stroke-dashoffset: -22; } }
.st-solid, .st-pick { stroke-dasharray: 420; stroke-dashoffset: 420; }
.st-solid { stroke-width: 1.8; }
.bd-story-stage[data-step="7"] .st-solid { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s ease 0.7s, opacity 0.2s; }
.bd-story-stage[data-step="5"] .st-pick { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s ease 2.1s, opacity 0.2s; }
.st-cand { fill: none; stroke: var(--key-ink); stroke-width: 1; stroke-dasharray: 2 3; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.bd-story-stage[data-step="5"] .st-cand { transform: scale(1); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.5s + var(--i) * 0.35s), opacity 0.3s; }
.st-pill rect { fill: var(--key-ink); }
.st-pill text { font-size: 10px; font-weight: 800; fill: #fff; text-anchor: middle; }
.st-pill-friend rect { fill: var(--key); }
.st-pill-friend text { fill: var(--key-on); }
.st-emoji { font-size: 16px; text-anchor: middle; transform-box: fill-box; transform-origin: center; }
.st-pop1, .st-pop2, .st-pop3 { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; }
.bd-story-stage[data-step="2"] .o2.st-pop1 { transform: scale(1); transition-delay: 0.15s; }
.bd-story-stage[data-step="2"] .o2.st-pop2 { transform: scale(1); transition-delay: 0.45s; }
.bd-story-stage[data-step="2"] .o2.st-pop3 { transform: scale(1.15); transition-delay: 1.5s; }
.bd-story-stage[data-step="3"] .o3.st-pop1 { transform: scale(1); transition-delay: 0.15s; }
.bd-story-stage[data-step="3"] .o3.st-pop2 { transform: scale(1); transition-delay: 0.45s; }
.bd-story-stage[data-step="3"] .o3.st-pop3 { transform: scale(1.15); transition-delay: 1.5s; }
.bd-story-stage[data-step="4"] .o4.st-pop1 { transform: scale(1); transition-delay: 0.15s; }
.bd-story-stage[data-step="4"] .o4.st-pop2 { transform: scale(1); transition-delay: 0.45s; }
.bd-story-stage[data-step="4"] .o4.st-pop3 { transform: scale(1.15); transition-delay: 1.5s; }
.bd-story-stage[data-step="5"] .o5.st-pop1 { transform: scale(1); transition-delay: 0.15s; }
.bd-story-stage[data-step="5"] .o5.st-pop2 { transform: scale(1); transition-delay: 0.45s; }
.bd-story-stage[data-step="5"] .o5.st-pop3 { transform: scale(1.15); transition-delay: 1.5s; }
.bd-story-stage[data-step="6"] .o6.st-pop1 { transform: scale(1); transition-delay: 0.15s; }
.bd-story-stage[data-step="6"] .o6.st-pop2 { transform: scale(1); transition-delay: 0.45s; }
.bd-story-stage[data-step="6"] .o6.st-pop3 { transform: scale(1.15); transition-delay: 1.5s; }
.bd-story-stage[data-step="7"] .o7.st-pop1 { transform: scale(1); transition-delay: 0.15s; }
.bd-story-stage[data-step="7"] .o7.st-pop2 { transform: scale(1); transition-delay: 0.45s; }
.bd-story-stage[data-step="7"] .o7.st-pop3 { transform: scale(1.15); transition-delay: 1.5s; }
.st-bubble rect, .st-bubble path { fill: #fff; }
.st-bubble { filter: drop-shadow(0 2px 5px rgba(25, 31, 40, 0.14)); }
.st-bubble text { font-size: 10.5px; font-weight: 700; fill: var(--key-ink); text-anchor: middle; }
.st-bubble { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0.6) translateY(6px); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; }
.bd-story-stage[data-step="3"] .st-bubble { transform: none; }
.st-me circle { fill: none; stroke: var(--key-ink); stroke-width: 1; stroke-dasharray: 2 3; }
.st-me text { font-size: 12px; font-weight: 800; fill: var(--key-ink); text-anchor: middle; }
/* 작은 휴대폰: 그림 자리를 남기려고 위 소개를 줄이고 글씨를 조금 작게 */
@media (max-height: 720px) {
  .bd-story-stage .bd-hero { padding: 10px 22px 12px; }
  .bd-story-stage .bd-hero h1 { margin-top: 0; font-size: 1.32rem; }
  .bd-story-legend { display: none; }
}
@media (max-width: 359px) {
  .bd-story-cap b { font-size: 1.16rem; }
  .bd-story-cap p { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-story * { transition: none !important; animation: none !important; }
}

/* 주선하기: 친구가 여러 명이면 제목의 이름을 골라 바꾼다 */
.bd-pick-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0 3px; }
.bd-pick-select { position: relative; display: inline-flex; align-items: center; }
.bd-pick-select select { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; background: var(--key); color: #fff; border: 0; border-radius: 12px; padding: 2px 26px 2px 10px; cursor: pointer; max-width: 11em; text-overflow: ellipsis; }
.bd-pick-select i { position: absolute; right: 9px; font-size: 0.7em; pointer-events: none; }
.bd-pick-note { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--key-tint); font-size: 0.82rem; line-height: 1.5; color: var(--gray-700); }
.bd-pick-note i { margin-top: 3px; color: var(--key-line); }

/* 2026-11-07 피친소 지금 (나의 인연이 비어 있을 때) */
.bd-comm { background: #fff; border-radius: 24px; padding: 16px 16px 14px; box-shadow: var(--bd-shadow); margin-bottom: 14px; }
.bd-comm-head { display: flex; align-items: center; justify-content: space-between; }
.bd-comm-head b { font-size: 1rem; }
.bd-comm-live { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--key-soft); color: var(--key-deep); }
.bd-comm-live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #e0305a; vertical-align: 1px; animation: bdCommBlink 1.6s ease-in-out infinite; }
.bd-comm-note { margin: 8px 0 0; font-size: 0.84rem; color: var(--gray-700); line-height: 1.5; }
.bd-comm-graph { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.bd-comm-lines line { stroke: #f6d3db; stroke-width: 0.8; }
.bd-comm-dot { opacity: 0; animation: bdCommPop 0.45s ease-out forwards; }
.bd-comm-heart { fill: none; stroke: var(--heart); stroke-width: 1.5; stroke-dasharray: 220; stroke-dashoffset: 220; animation: bdCommDraw 1.1s ease-out forwards; }
.bd-comm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; }
.bd-comm-stat b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--key-ink); }
.bd-comm-stat.wait b { font-size: 0.95rem; line-height: 1.95; color: var(--gray-500); }
.bd-comm-stat span { font-size: 0.72rem; color: var(--gray-500); }
.bd-comm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 10px; font-size: 0.7rem; color: var(--gray-500); }
.bd-comm-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.bd-comm-legend i.heart { width: 12px; height: 2px; border-radius: 1px; background: var(--heart); vertical-align: 2px; }
@keyframes bdCommPop { from { opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; } to { opacity: 1; transform: scale(1); transform-box: fill-box; transform-origin: center; } }
@keyframes bdCommDraw { to { stroke-dashoffset: 0; } }
@keyframes bdCommBlink { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .bd-comm-dot, .bd-comm-heart, .bd-comm-live::before { animation: none; opacity: 1; stroke-dashoffset: 0; } }
/* 친구의 인연 위쪽: 초대하기 + 내 초대로 함께하는 사람 */
.bd-friends-invite { margin-bottom: 14px; }
.bd-friends-tree { display: flex; gap: 8px; align-items: flex-start; margin: 10px 4px 0; font-size: 0.86rem; color: var(--gray-700); }
.bd-friends-tree i { color: #e0305a; margin-top: 3px; }
.bd-friends-tree small { display: block; font-size: 0.74rem; color: var(--gray-500); }
/* 2026-11-07 나의 인연 아래 '지나간 인연' (처음엔 접힘) */
.bd-past { margin-top: 18px; background: #fff; border-radius: 18px; box-shadow: var(--bd-shadow); overflow: hidden; }
.bd-past summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; cursor: pointer; font-size: 0.92rem; color: var(--key-ink); }
.bd-past summary::-webkit-details-marker { display: none; }
.bd-past summary em { font-style: normal; color: var(--heart); font-weight: 700; font-size: 0.84rem; }
.bd-past summary i { color: var(--gray-400); transition: transform 0.2s; }
.bd-past[open] summary i { transform: rotate(180deg); }
.bd-past-list { border-top: 1px solid var(--gray-100); }
.bd-past-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); }
.bd-past-row:last-child { border-bottom: 0; }
.bd-past-thumb { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }
.bd-past-thumb.empty { display: grid; place-items: center; background: var(--gray-100); color: var(--gray-500); font-weight: 700; }
.bd-past-main { flex: 1; min-width: 0; }
.bd-past-name { display: flex; gap: 6px; align-items: baseline; }
.bd-past-name b { font-size: 0.92rem; }
.bd-past-name span, .bd-past-meta { font-size: 0.76rem; color: var(--gray-500); }
.bd-past-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-past-tags { display: flex; gap: 6px; margin-top: 4px; }
.bd-past-who, .bd-past-day { font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--key-soft); color: var(--key-deep); }
.bd-past-who.friend { background: #efe8ff; color: #5b2fd6; }
.bd-past-day { background: var(--gray-100); color: var(--gray-500); font-weight: 600; }
.bd-past-state { flex: none; font-size: 0.72rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); }
.bd-past-state.waiting { background: var(--key-soft); color: var(--key-deep); }
.bd-past-state.matched { background: var(--heart); color: #fff; }
/* 2026-11-07 나에게 먼저 좋아요를 보낸 분 (오늘의 인연과 따로) */
.bd-likes { margin-top: 22px; }
.bd-likes-title { margin: 0 2px 4px; font-size: 1rem; color: var(--key-ink); }
.bd-likes-title b { color: var(--heart); }
.bd-likes-sub { margin: 0 2px 12px; font-size: 0.8rem; color: var(--gray-500); }

/* 2026-11-07 '인연이 도착했어요!' 반짝이는 알림 */
.bd-arrived { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 16px 18px; border: 0; border-radius: 18px; background: linear-gradient(120deg, #7a4dff, #a98bff 45%, #7a4dff); background-size: 200% 100%; color: #fff; text-align: left; cursor: pointer; font: inherit; animation: bdArrivedGlow 1.6s ease-in-out infinite, bdArrivedBg 3s linear infinite; }
.bd-arrived::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: bdArrivedShine 2.2s ease-in-out infinite; }
.bd-arrived-icon { position: relative; z-index: 1; font-size: 1.9rem; line-height: 1; animation: bdArrivedBounce 1.2s ease-in-out infinite; }
.bd-arrived-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.bd-arrived-text strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.bd-arrived-text small { font-size: 0.82rem; font-weight: 600; opacity: 0.92; }
.bd-arrived-sparkles i { position: absolute; z-index: 1; font-style: normal; color: #fff; animation: bdArrivedTwinkle 1.4s ease-in-out infinite; }
.bd-arrived-sparkles i:nth-child(1) { top: 8px; right: 18px; font-size: 1rem; }
.bd-arrived-sparkles i:nth-child(2) { top: 30px; right: 48px; font-size: 0.7rem; animation-delay: 0.3s; }
.bd-arrived-sparkles i:nth-child(3) { bottom: 8px; right: 26px; font-size: 0.85rem; animation-delay: 0.6s; }
.bd-arrived-sparkles i:nth-child(4) { top: 10px; right: 82px; font-size: 0.6rem; animation-delay: 0.9s; }
.bd-arrived-sparkles i:nth-child(5) { bottom: 10px; right: 70px; font-size: 0.75rem; animation-delay: 1.1s; }
@keyframes bdArrivedGlow { 0%, 100% { box-shadow: 0 4px 14px rgba(122,77,255,0.35); } 50% { box-shadow: 0 6px 26px rgba(122,77,255,0.75), 0 0 0 4px rgba(122,77,255,0.18); } }
@keyframes bdArrivedBg { to { background-position: -200% 0; } }
@keyframes bdArrivedShine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@keyframes bdArrivedBounce { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-5px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }
@keyframes bdArrivedTwinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
  .bd-arrived, .bd-arrived::after, .bd-arrived-icon, .bd-arrived-sparkles i { animation: none; }
  .bd-arrived-sparkles i { opacity: 0.8; }
}

/* 2026-11-07 조건 눈금 · 픽 쿠폰 묶음 · 조건 넓히기 안내 */
.bd-gauge { margin: 14px 0 4px; padding: 14px; border-radius: 14px; background: var(--gray-50, #f7f7f8); }
.bd-gauge-title { display: block; font-size: 0.86rem; margin-bottom: 8px; }
.bd-gauge-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bd-gauge-bars span { padding: 8px 0; border-radius: 8px; background: #e7e7ea; color: var(--gray-500); font-size: 0.8rem; font-weight: 700; text-align: center; transition: background 0.2s, color 0.2s; }
.bd-gauge[data-level="narrow"] .bd-gauge-bars span.on { background: #ffd9d0; color: #c4391d; }
.bd-gauge[data-level="ok"] .bd-gauge-bars span.on { background: #fff1c9; color: #8a6400; }
.bd-gauge[data-level="wide"] .bd-gauge-bars span.on { background: #d4f0dc; color: #1f7a3a; }
.bd-gauge-note { margin-top: 8px; }
.bd-offer { padding: 14px; border-radius: 18px; background: #f6f2ff; }
.bd-quiet { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }

/* 2026-11-07 좋아요 = 하트 버튼 */
.bd-btn.bd-heart { background: var(--key); color: var(--key-on); font-size: 1.35rem; box-shadow: 0 4px 14px rgba(255, 92, 122, 0.35); }
.bd-btn.bd-heart:hover { filter: brightness(1.05); }
.bd-btn.bd-heart.pop i { animation: bdHeartPop 0.45s ease-out; }
@keyframes bdHeartPop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bd-btn.bd-heart.pop i { animation: none; } }

/* 2026-11-07 초대하기 입장권: '인연이 도착했어요' 알림처럼 반짝이게 */
.bd-invite-btn.shiny { overflow: hidden; background: linear-gradient(120deg, #7a4dff, #a98bff 45%, #7a4dff); background-size: 200% 100%; animation: bdArrivedBg 3s linear infinite; }
.bd-invite-btn.shiny::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: bdArrivedShine 2.4s ease-in-out infinite; pointer-events: none; }
.bd-invite-btn.shiny .bd-invite-ico { background: #fff; color: var(--heart); animation: bdArrivedBounce 1.4s ease-in-out infinite; }
.bd-invite-btn.shiny .bd-invite-text small { color: rgba(255, 255, 255, 0.88); }
.bd-invite-btn.shiny .bd-invite-stub { color: #fff; border-left-color: rgba(255, 255, 255, 0.5); }
.bd-invite-btn.shiny .bd-invite-stub small { color: rgba(255, 255, 255, 0.85); }
.bd-invite-main, .bd-invite-stub { position: relative; z-index: 1; }
.bd-invite-sparkles i { position: absolute; z-index: 1; font-style: normal; color: #fff; pointer-events: none; animation: bdArrivedTwinkle 1.4s ease-in-out infinite; }
.bd-invite-sparkles i:nth-child(1) { top: 9px; right: 98px; font-size: 0.8rem; }
.bd-invite-sparkles i:nth-child(2) { bottom: 10px; right: 120px; font-size: 0.6rem; animation-delay: 0.35s; }
.bd-invite-sparkles i:nth-child(3) { top: 12px; left: 44%; font-size: 0.65rem; animation-delay: 0.7s; }
.bd-invite-sparkles i:nth-child(4) { bottom: 8px; left: 58px; font-size: 0.7rem; animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  .bd-invite-btn.shiny, .bd-invite-btn.shiny::after, .bd-invite-btn.shiny .bd-invite-ico, .bd-invite-sparkles i { animation: none; }
}
/* 초대하면 좋은 점 */
.bd-invite-perk { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #f6f2ff; border: 1px dashed rgba(122, 77, 255, 0.45); }
.bd-invite-perk-ico { font-size: 1.5rem; line-height: 1; }
.bd-invite-perk b { display: block; font-size: 0.88rem; color: var(--key-ink); }
.bd-invite-perk em { font-style: normal; color: var(--heart); }
.bd-invite-perk small { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--gray-500); }

/* 2026-11-07 입장 전 크루 화면: 바탕 전체 핑크 + 가운데 정렬 + 빵빠레 */
body.bd.bd-pink-page { background: radial-gradient(120% 60% at 50% 0%, #ff8ba1 0%, var(--key) 60%) fixed, var(--key); }
.bd-gate-page { position: relative; text-align: center; padding: 18px 0 24px; }
.bd-confetti { position: absolute; inset: -14px -16px 0; z-index: 2; width: calc(100% + 32px); height: calc(100% + 14px); pointer-events: none; }
.bd-gate-mark { margin: 0 auto 10px; filter: drop-shadow(0 6px 10px rgba(160, 20, 55, 0.25)); }
.bd-gate-mark .bd-logo-wave { margin: 0; height: 84px; }
.bd-gate-kicker, .bd-gate-name { margin: 0; color: #fff; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.45; }
.bd-gate-kicker { color: rgba(255, 255, 255, 0.82); margin-bottom: 26px; }
.bd-gate-welcome { margin-bottom: 10px; }
.bd-gate-welcome .bd-gate-hello { margin-top: 2px; }
.bd-gate-name b { font-weight: 800; }
.bd-gate-hello { margin: 14px 0 10px; color: #fff; font-size: 1.72rem; font-weight: 800; line-height: 1.34; letter-spacing: -0.04em; text-shadow: 0 2px 12px rgba(160, 20, 55, 0.18); }
.bd-gate-hello mark { background: linear-gradient(transparent 58%, rgba(255, 255, 255, 0.32) 58%); color: inherit; padding: 0 4px; }
.bd-gate-sub { margin: 0 0 24px; color: rgba(255, 255, 255, 0.86); font-size: 0.9rem; font-weight: 500; }
.bd-gate-page .bd-gate { justify-items: center; text-align: center; padding: 24px 18px; }
.bd-gate-page .bd-gate-title { font-size: 1.4rem; letter-spacing: -0.03em; }
.bd-gate-page .bd-gate .bd-muted { font-size: 0.92rem; line-height: 1.55; word-break: keep-all; }
.bd-gate-lines span { display: block; text-wrap: balance; }
@media (max-width: 420px) { .bd-gate-page .bd-gate { padding: 22px 14px; } .bd-gate-page .bd-gate .bd-muted { font-size: 0.88rem; } }
.bd-gate-page .bd-gate .bd-btn, .bd-gate-page .bd-gate .bd-invite-btn { width: 100%; text-align: left; }
.bd-gate-page .bd-gate .bd-btn { justify-content: center; }
.bd-gate-page .bd-gate-or { color: rgba(255, 255, 255, 0.9); margin: 10px 0 12px; }

/* 2026-11-07 로그인 전 첫 화면: 위는 핑크 환영(가득 찬 핑크 띠), 아래는 초대 그림 애니메이션 */
.bd-gate-sub.bd-gate-lines span { display: block; text-wrap: balance; word-break: keep-all; }
.bd-gate-page .bd-btn.kakao { color: #191919; }
.bd-gate-hero { margin: -14px -16px 0; padding: 32px 18px 22px; background: radial-gradient(120% 70% at 50% 0%, #ff8ba1 0%, var(--key) 62%); border-radius: 0 0 30px 30px; overflow: hidden; }
.bd-gate-hero .bd-confetti { inset: 0; width: 100%; height: 100%; }
.bd-btn.bd-btn-white { background: #fff; color: var(--key-deep); font-weight: 800; box-shadow: 0 10px 24px rgba(160, 20, 55, 0.25); }
.bd-gate-hero .bd-btn { position: relative; z-index: 3; max-width: 360px; margin: 0 auto; }
.bd-gate-scroll { margin-top: 18px; font-size: 0.8rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); line-height: 1.6; }
.bd-gate-scroll i { animation: bdGateNudge 1.4s ease-in-out infinite; }
@keyframes bdGateNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.bd-story.after-hero { margin-top: 18px; }
.bd-story-head { flex: none; margin: 6px 0 0; text-align: center; font-size: 0.9rem; font-weight: 800; color: var(--key-deep); }
.bd-landing-cta { transform: translateY(110%); transition: transform 0.3s ease; }
.bd-landing-cta.on { transform: none; }
.bd-gate-back { display: inline-block; margin-top: 22px; color: #fff; font-size: 0.86rem; font-weight: 700; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .bd-gate-scroll i { animation: none; } .bd-landing-cta { transition: none; } }
.st-core-emoji { font-size: 28px; text-anchor: middle; }
/* 2026-11-07 애니메이션 위아래 빈 곳 줄이기: 그림이 칸 높이를 다 차지하지 않고 제 비율(3:2)로만,
   제목·설명·그림·범례를 한 덩어리로 화면 가운데에 모은다. 큰 화면에서는 칸 높이도 줄인다. */
.bd-story.after-hero .bd-story-stage { justify-content: center; gap: 6px; height: min(calc(100dvh - 54px - 106px), 640px); }
.bd-story.after-hero .bd-story-in { flex: 0 1 auto; gap: 8px; padding-top: 4px; }
.bd-story.after-hero .bd-story-stage svg { flex: 0 1 auto; height: auto; aspect-ratio: 3 / 2; max-height: 46dvh; min-height: 0; margin: 4px -8px; }
/* 화면이 세로로 길면 그림 칸을 머리말과 아래 [입장하기] 사이 가운데에 둔다 */
.bd-story.after-hero .bd-story-stage { top: max(54px, calc(50dvh - 346px)); }
.bd-coupon-lead { display: block; margin-bottom: 2px; font-size: 0.8rem; font-weight: 700; color: var(--key-deep); }
/* '믿을만한 내 친구를 초대하기'가 폰에서 두 줄이 될 때 줄 사이를 좁게, 낱말 단위로 */
.bd-invite-text b { line-height: 1.3; word-break: keep-all; }
.bd-looks-any { margin-bottom: 14px; }

/* 2026-11-07 이상형 단계 세 부분: ① 꼭 지킬 조건(핑크) ② 이러면 더 좋아요(보라) ③ 원하는 만남(노랑) */
.bd-pf-section { --sec: var(--key); --sec-ink: var(--key-deep); display: flex; gap: 10px; align-items: flex-start; margin: 22px 4px 10px; }
.bd-pf-section[data-section="plus"] { --sec: var(--heart); --sec-ink: #5b2fd6; }
.bd-pf-section[data-section="meet"] { --sec: #f5a524; --sec-ink: #9a5b00; }
.bd-pf-section:first-child { margin-top: 4px; }
.bd-pf-section > i { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--sec); color: #fff; font-style: normal; font-size: 0.8rem; font-weight: 800; }
.bd-pf-section > div { display: grid; gap: 2px; }
.bd-pf-section b { font-size: 1.02rem; font-weight: 800; color: var(--sec-ink); letter-spacing: -0.02em; }
.bd-pf-section span { font-size: 0.8rem; color: var(--gray-500); }
/* 부분마다 질문 카드 왼쪽에 그 색 띠 */
.bd-pf-list [data-section="must"]:not(.bd-pf-section) { box-shadow: inset 4px 0 0 var(--key); }
.bd-pf-list [data-section="plus"]:not(.bd-pf-section) { box-shadow: inset 4px 0 0 var(--heart); }
.bd-pf-list [data-section="meet"]:not(.bd-pf-section) { box-shadow: inset 4px 0 0 #f5a524; }

/* 2026-11-07 공개 범위: 동의 체크 아래에 자세한 범위를 접어 둔다 */
.bd-scope-more { margin-top: 12px; border-top: 1px solid var(--bd-line); padding-top: 10px; }
.bd-scope-more summary { display: flex; justify-content: space-between; align-items: center; font-size: 0.86rem; font-weight: 700; color: var(--gray-700); cursor: pointer; list-style: none; }
.bd-scope-more summary::-webkit-details-marker { display: none; }
.bd-scope-more summary i { transition: transform 0.2s; }
.bd-scope-more[open] summary i { transform: rotate(180deg); }
.bd-scope-more .bd-scope { margin-top: 8px; }
.bd-scope-more summary { justify-content: flex-end; gap: 6px; color: var(--gray-500); font-weight: 600; }
.bd-scope-more .bd-scope-open { display: none; }
.bd-scope-more[open] .bd-scope-open { display: inline; }
.bd-scope-more[open] .bd-scope-closed { display: none; }
.bd-scope-title { display: block; margin-top: 8px; font-size: 0.95rem; }

/* 2026-11-07 주선자 카드의 사람 모양 아바타 (3D 동물 대신) */
.bd-ov-person { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bd-comm-core { filter: drop-shadow(0 2px 4px rgba(25, 31, 40, 0.15)); }

/* 2026-11-07 참가증: 포토카드 + 리퀴드 글래스 (사진이 카드 전체, 그 위에 반투명 유리 판) */
.bd-glass-card { position: relative; overflow: hidden; margin-top: 4px; aspect-ratio: 3 / 4; max-height: 70vh; border-radius: 30px; background: var(--key-soft); isolation: isolate;
  box-shadow: 0 18px 40px rgba(214, 48, 90, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; }
.bd-glass-photo, .bd-glass-card > .bd-ov-person { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bd-glass-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 8, 14, 0.18) 0%, rgba(20, 8, 14, 0) 26%, rgba(20, 8, 14, 0) 48%, rgba(20, 8, 14, 0.42) 100%); }
/* 유리 위를 지나가는 빛 */
.bd-glass-shine { position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.28) 46%, rgba(255, 255, 255, 0.06) 52%, transparent 60%); animation: bdGlassShine 6s ease-in-out infinite; }
@keyframes bdGlassShine { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
.bd-glass-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; z-index: 1; }
.bd-glass-pill, .bd-glass-panel, .bd-glass-tile { -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px rgba(20, 8, 14, 0.12); }
.bd-glass-pill { padding: 6px 12px; border-radius: 999px; color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.01em; text-shadow: 0 1px 4px rgba(20, 8, 14, 0.25); }
.bd-glass-panel { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; padding: 16px 16px 14px; border-radius: 24px; color: #fff; }
.bd-glass-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-glass-name { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-shadow: 0 2px 10px rgba(20, 8, 14, 0.3); }
.bd-glass-head .bd-status { background: rgba(255, 255, 255, 0.9); color: var(--key-deep); }
.bd-glass-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bd-glass-chips span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); border: 1px solid rgba(255, 255, 255, 0.4); font-size: 0.74rem; font-weight: 700; }
.bd-glass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.bd-glass-tile { display: grid; gap: 2px; padding: 9px 11px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.bd-glass-tile span { font-size: 0.68rem; font-weight: 600; opacity: 0.88; }
.bd-glass-tile b { font-size: 0.92rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px rgba(20, 8, 14, 0.2); }
@media (prefers-reduced-motion: reduce) { .bd-glass-shine { animation: none; } }

/* 2026-11-07 머리말: 'Blind date' → '2026 연말대작전 피친소' */
.bd-logo em { font-size: 0.95rem; font-weight: 800; color: var(--key-deep); }
.bd-logo em small { margin-right: 3px; font-size: 0.74rem; font-weight: 700; color: var(--gray-500); }

/* 2026-11-07 지나간 인연·골라준 기록의 기본 아바타 (여러 색 사람 모양) */
.bd-past-thumb.avatar { position: relative; overflow: hidden; display: block; }
.bd-past-thumb.avatar .bd-ov-person { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 2026-11-07 초반 안내 '피친소가 막 문을 열었어요' */
.bd-early { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: #f1faf3; border: 1px solid #cfeedd; }
.bd-early-ico { font-size: 1.3rem; line-height: 1.2; }
.bd-early > div { display: grid; gap: 3px; }
.bd-early b { font-size: 0.92rem; font-weight: 800; color: #1f7a3a; }
.bd-early span:not(.bd-early-ico) { font-size: 0.8rem; line-height: 1.5; color: var(--gray-700); word-break: keep-all; }

/* 2026-11-07 크루 입장 동의 칸 (핑크 바탕 위 흰 카드, 글은 왼쪽 정렬) */
.bd-gate-page .bd-gate-agree { justify-items: stretch; text-align: left; }
.bd-gate-page .bd-gate-agree .bd-check { font-size: 0.88rem; line-height: 1.5; word-break: keep-all; }
.bd-gate-page .bd-gate-agree .bd-btn { margin-top: 6px; }

/* 2026-11-07 초대 링크 창 */
.bd-copy-box { width: 100%; font-size: 0.9rem; line-height: 1.5; resize: none; }
/* 초대 버튼 아래 작은 글씨 두 줄 (2026-11-07) */
.bd-invite-text small span { display: block; }