/* 범혁 1:1 릴스 관심 신청 — 신청 폼(대상 카드·마감 안내·완료) + 대상자/신청자 전용 화면(me.html). 모바일 우선. */
:root { --bh-accent: #5057d6; --bh-accent-dark: #3f45b8; --bh-soft: #eef0ff; --bh-ink: #221c1a; --bh-dim: #6f6560; --bh-faint: #a39892; --bh-line: #ece6f3; --bh-warn: #c2410c; }

/* ---------- 신청 폼: 대상 카드 ---------- */
.bh-target { background: #fff; border: 1.5px solid var(--bh-accent); border-radius: 16px; padding: 14px 14px 12px; margin: 4px 0 16px; box-shadow: 0 4px 16px rgba(80, 87, 214, 0.10); }
.bh-target-label { font-size: 12px; font-weight: 800; color: var(--bh-accent); margin-bottom: 10px; }
.bh-target-row { display: flex; gap: 12px; align-items: center; }
.bh-target-photo { width: 76px; height: 95px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--bh-soft); }
.bh-target-photo.empty { display: flex; align-items: center; justify-content: center; font-size: 30px; }
.bh-target-main { min-width: 0; }
.bh-target-hero { font-size: 19px; font-weight: 800; color: var(--bh-ink); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.bh-target-meta { font-size: 13.5px; color: var(--bh-dim); margin-top: 3px; overflow-wrap: anywhere; }
.bh-target-headline { font-size: 13.5px; color: var(--bh-ink); margin-top: 6px; line-height: 1.5; overflow-wrap: anywhere; }
.bh-target-more { margin-top: 10px; border-top: 1px solid var(--bh-line); padding-top: 8px; }
.bh-target-more summary { font-size: 13px; font-weight: 700; color: var(--bh-accent); cursor: pointer; padding: 4px 0; }
.bh-target-intro { font-size: 13.5px; line-height: 1.7; color: var(--bh-ink); white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.bh-target-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-target-tags span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--bh-soft); }
.bh-target-note { font-size: 12.5px; color: var(--bh-dim); margin: 10px 0 0; }
.bh-prev-note { margin-top: 10px; font-size: 12.5px; line-height: 1.6; background: #fff7ed; color: #7c4a16; border-radius: 10px; padding: 8px 10px; }
.bh-interest-notice { background: var(--bh-soft); border-color: #d9dcff; }
.bh-interest-notice .notice-box-title { color: var(--bh-accent-dark); }
.bh-optin { border: 1.5px dashed #c9ccf5; border-radius: 12px; padding: 4px 12px; background: #fbfbff; }
.bh-optin-desc { font-size: 12px; color: var(--bh-dim); line-height: 1.6; margin: 4px 0 0; }

/* 마감·무효 링크 안내 */
.bh-state { text-align: center; background: #fff; border-radius: 16px; padding: 32px 20px; margin: 16px 0; border: 1px solid var(--bh-line); }
.bh-state-icon { font-size: 34px; }
.bh-state h2 { font-size: 18px; margin: 10px 0 6px; color: var(--bh-ink); }
.bh-state p { font-size: 13.5px; color: var(--bh-dim); line-height: 1.6; margin: 0 0 16px; }
.bh-state-link { display: inline-block; padding: 12px 18px; border-radius: 12px; background: var(--bh-accent); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }

/* 완료 화면 */
.bh-result { background: #fff; border-radius: 16px; padding: 26px 18px; margin: 16px 0; text-align: center; border: 1px solid var(--bh-line); }
.bh-result-icon { font-size: 36px; }
.bh-result h2 { font-size: 19px; margin: 8px 0; color: var(--bh-ink); }
.bh-result p { font-size: 13.5px; color: var(--bh-dim); line-height: 1.65; margin: 0 0 8px; }
.bh-result-sub { font-size: 12.5px !important; }
.bh-manage { text-align: left; margin-top: 14px; background: var(--bh-soft); border-radius: 12px; padding: 12px; }
.bh-manage-title { font-weight: 800; font-size: 13.5px; color: var(--bh-accent-dark); margin-bottom: 4px; }
.bh-manage p { font-size: 12.5px; }
.bh-manage-link { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; word-break: break-all; background: #fff; border-radius: 8px; padding: 8px; margin: 6px 0 8px; user-select: all; }

/* ---------- 공통 버튼·칩 ---------- */
.bh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid #d6d2e6; background: #fff; color: var(--bh-ink); font-size: 14.5px; font-weight: 700; cursor: pointer; text-decoration: none; font-family: inherit; }
.bh-btn.primary { background: var(--bh-accent); border-color: var(--bh-accent); color: #fff; }
.bh-btn.warn { color: var(--bh-warn); border-color: #f3c7b3; }
.bh-btn.sm { min-height: 38px; padding: 0 12px; font-size: 13px; }
.bh-btn:disabled { opacity: .5; cursor: default; }
.bh-chip { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.bh-chip.on { background: #e5f7ec; color: #17803d; }
.bh-chip.off { background: #f1eef0; color: #7a6f73; }
.bh-new { display: inline-block; font-size: 10.5px; font-weight: 800; color: #fff; background: #e92f6d; border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.bh-star { color: #f59e0b; }

/* ---------- 전용 화면(me.html) ---------- */
.bh-me-body { margin: 0; background: #f6f4fb; color: var(--bh-ink); font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; word-break: keep-all; }
.bh-me { max-width: 520px; margin: 0 auto; padding: 0 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.bh-me-head { height: 52px; display: flex; align-items: center; justify-content: center; }
.bh-me-logo { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; color: var(--bh-accent); }
.bh-me-card { background: #fff; border-radius: 18px; padding: 22px 18px; border: 1px solid var(--bh-line); }
.bh-me-card h1 { font-size: 20px; margin: 4px 0 8px; letter-spacing: -0.02em; }
.bh-me-card p { font-size: 14px; color: var(--bh-dim); line-height: 1.65; }
#bhMeAuthForm { display: flex; gap: 8px; margin-top: 12px; }
#bhMeLast4 { flex: 1; min-width: 0; height: 50px; border-radius: 12px; border: 1px solid #d6d2e6; font-size: 22px; letter-spacing: .3em; text-align: center; font-family: inherit; }
.bh-me-err { color: var(--bh-warn) !important; font-size: 13px !important; min-height: 1em; }
.bh-me-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 18px; padding: 16px; border: 1px solid var(--bh-line); }
.bh-me-kicker { font-size: 12.5px; font-weight: 700; color: var(--bh-accent); }
.bh-me-count { font-size: 15px; margin-top: 2px; }
.bh-me-count b { font-size: 28px; letter-spacing: -0.02em; }
.bh-me-recv { display: flex; align-items: center; gap: 8px; }
.bh-me-guide { font-size: 13px; color: var(--bh-dim); line-height: 1.6; margin: 12px 2px; }
.bh-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.bh-tab { flex-shrink: 0; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #d6d2e6; background: #fff; font-size: 13.5px; font-weight: 700; color: var(--bh-dim); cursor: pointer; font-family: inherit; }
.bh-tab.on { background: var(--bh-ink); border-color: var(--bh-ink); color: #fff; }
.bh-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bh-item { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; background: #fff; border: 1px solid var(--bh-line); border-radius: 16px; padding: 10px; cursor: pointer; font-family: inherit; color: inherit; }
.bh-item-photo { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--bh-soft); }
.bh-item-photo.empty { display: flex; align-items: center; justify-content: center; font-size: 24px; }
.bh-item-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bh-item-hero { font-size: 16px; font-weight: 800; }
.bh-item-meta { font-size: 13px; color: var(--bh-dim); overflow-wrap: anywhere; }
.bh-item-date { font-size: 12px; color: var(--bh-faint); }
.bh-empty { text-align: center; color: var(--bh-faint); font-size: 14px; padding: 40px 0; }
.bh-me-foot, .bh-me-small { font-size: 12px !important; color: var(--bh-faint) !important; line-height: 1.6; margin-top: 14px; }
.bh-me-quote { font-size: 14.5px !important; color: var(--bh-ink) !important; }
.bh-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 14px 0; font-size: 14px; }
.bh-dl dt { color: var(--bh-faint); }
.bh-dl dd { margin: 0; }

/* 신청자 상세 시트(고객 화면 재사용) */
.bh-sheet { position: fixed; inset: 0; z-index: 50; background: #f6f4fb; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bh-sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: rgba(246, 244, 251, .96); backdrop-filter: blur(6px); font-size: 12.5px; color: var(--bh-faint); max-width: 430px; margin: 0 auto; }
.bh-sheet .cp-page { margin-bottom: 0; }
body.bh-sheet-open { overflow: hidden; }
.bh-contact { padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cp-line, #efe7df); background: #fff; }
.bh-contact-title { font-size: 13px; font-weight: 800; color: var(--bh-accent); }
.bh-contact-phone { font-size: 24px; font-weight: 800; letter-spacing: .02em; margin: 4px 0 10px; }
.bh-contact-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.bh-contact-note { font-size: 12px; color: var(--bh-faint); margin: 8px 0 12px; }
.bh-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 359px) { .bh-contact-btns { grid-template-columns: 1fr 1fr; } }
/* 다른 분 소개 받기(네/아니요) */
.bh-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; margin: 6px 0; border: 1px solid #dcd8ec; border-radius: 12px; background: #fff; font-size: 14px; cursor: pointer; }
.bh-radio input { width: 20px; height: 20px; accent-color: var(--bh-accent); flex-shrink: 0; }
.bh-radio:has(input:checked) { border-color: var(--bh-accent); background: var(--bh-soft); font-weight: 700; }
/* 공개 소개 프로필(/p/{코드}) */
.bh-p-body { background: #fffdf9; }
.bh-p-loading { text-align: center; color: var(--bh-faint); padding: 80px 0; font-size: 14px; }
.bh-p-cta { display: flex; align-items: center; justify-content: center; opacity: 1 !important; cursor: pointer !important; text-decoration: none; }
/* 공개 프로필: "소개 신청하기" 버튼을 화면 하단에 고정(.cp-page의 overflow:hidden 때문에 sticky가 동작하지 않음) */
.bh-p-body .bh-p-foot { box-sizing: border-box; position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 430px; z-index: 10; margin: 0; box-shadow: 0 -6px 16px rgba(34, 28, 26, 0.06); background: var(--cp-bg, #fffdf9); }
.bh-p-body .cp-page { padding-bottom: 150px; }

/* ---------- 소개된 회원 본인용: 나에게 관심을 보낸 사람(26차) — 모바일 우선, 소비자용 단순 UI ---------- */
body.bm-owner .bh-me { max-width: 1120px; }
.bm-head { padding: 6px 2px 14px; }
.bm-head h1 { font-size: 22px; letter-spacing: -0.02em; margin: 4px 0 8px; color: var(--bh-ink); }
.bm-head p { font-size: 14px; line-height: 1.65; color: var(--bh-dim); margin: 0; }
.bm-summary { margin-top: 12px !important; font-size: 13.5px !important; color: var(--bh-dim) !important; }
.bm-summary b { color: var(--bh-ink); }
.bm-summary i { font-style: normal; margin: 0 6px; color: var(--bh-faint); }
.bm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.bm-card { background: #fff; border: 1px solid var(--bh-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.bm-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3.6; border: none; padding: 0; margin: 0; background: var(--bh-soft); cursor: pointer; overflow: hidden; }
.bm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bm-photo-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bh-soft); }
.bm-photo-empty svg { width: 34%; max-width: 110px; fill: none; stroke: #c3c6ee; stroke-width: 2.2; }
.bm-new { position: absolute; top: 10px; left: 10px; font-size: 11.5px; font-weight: 700; color: var(--bh-accent-dark); background: rgba(255, 255, 255, .94); border-radius: 999px; padding: 3px 9px; }
.bm-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bm-hero { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--bh-ink); }
.bm-meta { font-size: 13.5px; color: var(--bh-dim); }
.bm-quote { margin: 6px 0 2px; font-size: 14px; line-height: 1.55; color: var(--bh-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* 카드·상세 공통 버튼: [프로필 보기](보조) [연락처 보기](주) — 절제된 테두리/단색 */
.bm-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: auto; padding-top: 12px; }
.bm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 0; padding: 0 12px; border: 1px solid #d6d2e6; border-radius: 12px; background: #fff; color: var(--bh-ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-btn:hover { background: #f6f4fb; }
.bm-btn.primary { border-color: var(--bh-accent); background: var(--bh-accent); color: #fff; }
.bm-btn.primary:hover { background: var(--bh-accent-dark); border-color: var(--bh-accent-dark); }
.bm-btn:disabled, .bm-btn.primary:disabled { border-color: var(--bh-line); background: #f3f1f8; color: var(--bh-faint); cursor: default; }
.bm-btn.sm { min-height: 40px; font-size: 13.5px; }
.bm-btn:focus-visible { outline: 2px solid var(--bh-accent); outline-offset: 2px; }
.bm-contact { margin-top: 10px; padding: 12px; border: 1px solid var(--bh-line); border-radius: 14px; background: #faf9fd; }
.bm-contact-h { font-size: 12px; font-weight: 700; color: var(--bh-faint); margin-bottom: 6px; }
.bm-contact-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.bm-contact-k { flex: none; font-size: 13px; color: var(--bh-dim); }
.bm-contact-v { min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--bh-ink); overflow-wrap: anywhere; }
/* 두 버튼이 한 줄에 다 안 들어가면(좁은 카드) 줄을 바꿔 각각 한 줄 전체를 쓴다 — 글자가 잘리지 않게 */
.bm-contact-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bm-contact-btns .bm-btn { flex: 1 1 auto; min-width: auto; overflow: visible; }
.bm-contact-empty { margin: 0; font-size: 13.5px; color: var(--bh-dim); }
.bm-empty { background: #fff; border: 1px solid var(--bh-line); border-radius: 18px; padding: 40px 20px; text-align: center; }
.bm-empty b { font-size: 17px; color: var(--bh-ink); }
.bm-empty p { font-size: 14px; line-height: 1.7; color: var(--bh-dim); margin: 8px 0 0; }
.bm-foot { font-size: 12.5px; line-height: 1.7; color: var(--bh-faint); margin: 18px 2px 0; }
.bm-sheet-foot { max-width: 430px; margin: 0 auto; padding: 4px 16px calc(20px + env(safe-area-inset-bottom, 0px)); position: sticky; bottom: 0; background: #f6f4fb; border-top: 1px solid var(--bh-line); }
@media (min-width: 700px) { .bm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bm-head h1 { font-size: 26px; } }
@media (min-width: 1040px) { .bm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 범혁 1:1 Instagram 연결(27차) ---------- */
.bm-stages { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bm-stages li { font-size: 12.5px; text-align: center; padding: 8px 4px; border-radius: 10px; background: #f3f1f8; color: var(--bh-faint); font-weight: 600; }
.bm-stages li.on { background: var(--bh-soft); color: var(--bh-accent-dark); }
.bm-stages.two { grid-template-columns: repeat(2, 1fr); }

/* 28차: 관리자 미리보기 표시(작게, 회원 화면 그대로 보이게) · 불러오는 중 */
.bm-preview { display: inline-block; margin: 0 0 8px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--bh-dim); background: rgba(127, 127, 127, 0.12); letter-spacing: 0; }
.bm-loading { padding: 40px 0; text-align: center; font-size: 14px; color: var(--bh-dim); }

/* 2026-09: 신청자 연락 정보는 공개하지 않음 — 운영자 연결 안내 */
.bm-contact-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--bh-faint); word-break: keep-all; overflow-wrap: anywhere; }