/* ============================================================
   host-pricing-v3.css — 호스트 "멤버십" Wanted DS 클론
   디자인 원본: newdesign/호스트 대시보드 UI 리뉴얼 v2/호스트 멤버십.dc.html

   실제 결제 흐름 전부 보존(재구현): /api/billing 6종 + Stripe Embedded Checkout
   + 예약 다운그레이드 + 쿠폰(coupon.js 재사용). 가격은 실제 planInfo(디자인 목업가 아님).
   네임스페이스 .mb- (membership). 쿠폰 모달은 coupon.js DOM 계약 재스킨.

   주석에서 클래스 나열 시 슬래시로 잇지 말 것("*" 와 "/" 인접 = 주석 조기종료).
   ============================================================ */

.mb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 36px 28px 44px; }
.mb-wrap { max-width: 1180px; margin: 0 auto; }

/* ---------- 히어로 ---------- */
.mb-hero { text-align: center; margin-bottom: 26px; }
.mb-hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: #3366FF; margin-bottom: 12px; }
.mb-hero h2 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.28; text-wrap: balance; }
.mb-hero h2 .accent { color: #3366FF; }
.mb-hero .sub { margin: 12px 0 0; font-size: 15px; color: var(--ws-text-alternative); }
.mb-trial {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 13px; font-weight: 600; color: #0B8A4F; background: #E3F7ED;
  border-radius: 9999px; padding: 8px 16px;
}
.mb-trial i { font-size: 15px; }

/* 빌링 토글 */
.mb-billing { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; }
.mb-billing-seg { display: inline-flex; gap: 3px; background: var(--ws-fill); border-radius: 12px; padding: 4px; }
.mb-billing-seg button {
  display: flex; align-items: center; gap: 7px; font-family: inherit;
  font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 9px;
  cursor: pointer; border: none; background: transparent; color: var(--ws-text-alternative);
  transition: all .12s ease;
}
.mb-billing-seg button:hover { color: #171717; }
.mb-billing-seg button.on { background: #fff; color: #171717; box-shadow: var(--ws-shadow-emphasize); }
.mb-billing-seg .save-tag { font-size: 11px; font-weight: 700; color: #0B8A4F; background: #E3F7ED; border-radius: 9999px; padding: 2px 8px; }
.mb-coupon-link { margin-top: 14px; }
.mb-coupon-link button {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--ws-text-alternative);
  background: transparent; border: none; cursor: pointer; transition: color .12s ease;
}
.mb-coupon-link button:hover { color: #2A4FD6; }
.mb-coupon-link i { font-size: 16px; }

/* ---------- 플랜 카드 ---------- */
.mb-plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.mb-plan {
  position: relative; border-radius: 20px; padding: 24px 20px;
  display: flex; flex-direction: column; background: #fff;
  box-shadow: var(--ws-shadow-emphasize); border: 1px solid var(--ws-line-alt);
  transition: transform .16s ease, box-shadow .16s ease;
}
.mb-plan:hover { transform: translateY(-4px); box-shadow: var(--ws-shadow-heavy, 0 20px 40px rgba(0,0,0,.12)); }
/* 현재 플랜 = 다크 강조 카드 */
.mb-plan.mb-plan--current {
  background: #10152B; border: none; box-shadow: 0 20px 48px rgba(16, 21, 43, .34);
}
.mb-plan.mb-plan--featured { /* 데스크톱에서 그대로, 모바일에서 order 상단 */ }

.mb-ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  color: #fff; border-radius: 9999px; padding: 5px 13px; white-space: nowrap;
  box-shadow: var(--ws-shadow-emphasize);
}
.mb-ribbon i { font-size: 12px; }
.mb-ribbon--popular { background: #3366FF; }
.mb-ribbon--current { background: #171717; }

.mb-plan-name { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.mb-plan-name .nm { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #171717; }
.mb-plan--current .mb-plan-name .nm { color: #fff; }
.mb-save-badge { font-size: 11px; font-weight: 700; color: #2A4FD6; background: #EBF1FF; border-radius: 7px; padding: 3px 8px; }
.mb-plan--current .mb-save-badge { color: #BFD2FF; background: rgba(255, 255, 255, .12); }
.mb-plan-tag { font-size: 12.5px; color: var(--ws-text-alternative); margin-bottom: 18px; }
.mb-plan--current .mb-plan-tag { color: #9FB0D9; }

.mb-plan-price { display: flex; align-items: baseline; gap: 4px; min-height: 44px; }
.mb-plan-price .main { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #171717; }
.mb-plan-price .unit { font-size: 14px; font-weight: 600; color: var(--ws-text-alternative); }
.mb-plan--current .mb-plan-price .main { color: #fff; }
.mb-plan--current .mb-plan-price .unit { color: #9FB0D9; }
.mb-plan-subprice { min-height: 32px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 3px; }
.mb-plan-subprice .month-eq { font-size: 12.5px; font-weight: 600; color: var(--ws-text-alternative); }
.mb-plan--current .mb-plan-subprice .month-eq { color: #9FB0D9; }
.mb-plan-subprice .list { font-size: 12px; color: var(--ws-text-alternative); text-decoration: line-through; }
.mb-plan--current .mb-plan-subprice .list { color: #6E7BA8; }

/* CTA */
.mb-cta {
  width: 100%; height: 46px; border: none; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: filter .12s ease, background .12s ease;
}
.mb-cta:hover { filter: brightness(.97); }
.mb-cta i { font-size: 14px; }
.mb-cta--upgrade { background: #3366FF; color: #fff; }
.mb-cta--downgrade { background: #fff; color: #171717; border: 1px solid var(--ws-line-strong); }
.mb-cta--current { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .35); cursor: default; }
.mb-cta--current:hover { filter: none; }
/* 예약 다운그레이드 상태 버튼 */
.mb-cta--scheduled { background: #FDF3E3; color: #92610F; border: 1px solid #F0D9A8; position: relative; }
.mb-cta--scheduled .sc-hover { display: none; }
.mb-cta--scheduled:hover { background: #FBE7E7; color: #B5484B; border-color: #F0C4C4; }
.mb-cta--scheduled:hover .sc-default { display: none; }
.mb-cta--scheduled:hover .sc-hover { display: inline-flex; align-items: center; gap: 5px; }

.mb-plan-divider { height: 1px; background: var(--ws-line-alt); margin: 20px 0 16px; }
.mb-plan--current .mb-plan-divider { background: rgba(255, 255, 255, .12); }
.mb-feat-head { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ws-text-alternative); margin-bottom: 12px; }
.mb-plan--current .mb-feat-head { color: #6E7BA8; }
.mb-feat-list { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.mb-feat { display: flex; align-items: flex-start; gap: 9px; }
.mb-feat i { font-size: 15px; color: #0B8A4F; flex: none; margin-top: 1px; }
.mb-plan--current .mb-feat i { color: #5B9CFF; }
.mb-feat span { font-size: 13px; color: #3A3E46; line-height: 1.4; }
.mb-plan--current .mb-feat span { color: #D6DEF2; }

.mb-vat { text-align: center; font-size: 12px; color: var(--ws-text-alternative); margin-top: 14px; }

/* 신뢰 스트립 */
.mb-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; margin-top: 26px; }
.mb-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ws-text-alternative); }
.mb-trust i { font-size: 16px; color: #3366FF; }

/* ---------- 비교표 ---------- */
.mb-compare { margin-top: 40px; background: #fff; border-radius: 20px; box-shadow: var(--ws-shadow-emphasize); padding: 24px 26px; }
.mb-compare h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.mb-compare .desc { margin: 0 0 18px; font-size: 13px; color: var(--ws-text-alternative); }
.mb-cmp-wrap { overflow-x: auto; }
.mb-cmp-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); }
.mb-cmp-head {
  border-bottom: 2px solid var(--ws-line); padding-bottom: 12px;
  display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 0;
}
.mb-cmp-head .c0 { font-size: 13px; font-weight: 700; color: var(--ws-text-alternative); }
.mb-cmp-head .ch { text-align: center; font-size: 13.5px; font-weight: 700; color: #171717; border-radius: 8px 8px 0 0; padding: 3px 0; }
.mb-cmp-head .ch.cur { color: #3366FF; background: #EFF3FF; }
.mb-cmp-row {
  display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 0; align-items: center;
  padding: 13px 0; border-top: 1px solid var(--ws-line-alt);
}
.mb-cmp-row .c0 { font-size: 13.5px; font-weight: 500; }
.mb-cmp-cell { display: flex; align-items: center; justify-content: center; align-self: stretch; }
.mb-cmp-cell.cur { background: #EFF3FF; }
.mb-cmp-cell .txt { font-size: 12.5px; font-weight: 600; text-align: center; }
.mb-cmp-cell .yes { font-size: 16px; color: #0B8A4F; }
.mb-cmp-cell .no { width: 14px; height: 2px; border-radius: 2px; background: var(--ws-line-strong); }
.mb-cmp-min { min-width: 100%; }

/* ---------- FAQ ---------- */
.mb-faq { margin-top: 32px; max-width: 760px; margin-left: auto; margin-right: auto; }
.mb-faq h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; text-align: center; letter-spacing: -0.01em; }
.mb-faq-list { display: flex; flex-direction: column; gap: 10px; }
.mb-faq-item { background: #fff; border-radius: 14px; box-shadow: var(--ws-shadow-emphasize); overflow: hidden; }
.mb-faq-q { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; }
.mb-faq-q .q { font-size: 14.5px; font-weight: 600; flex: 1; }
.mb-faq-q i { font-size: 16px; color: var(--ws-text-alternative); flex: none; }
.mb-faq-a { padding: 0 18px 16px; font-size: 13.5px; color: var(--ws-text-alternative); line-height: 1.65; display: none; }
.mb-faq-item.open .mb-faq-a { display: block; }

/* ---------- 공통 버튼 ---------- */
.mb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: 12px; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 14px; font-weight: 700; height: 44px; padding: 0 18px;
  transition: background .12s ease, filter .12s ease;
}
.mb-btn:disabled { opacity: .55; cursor: not-allowed; }
.mb-btn--primary { background: #3366FF; color: #fff; }
.mb-btn--primary:hover:not(:disabled) { background: #2A4FD6; }
.mb-btn--ghost { background: var(--ws-fill); color: var(--ws-text-normal); }
.mb-btn--ghost:hover:not(:disabled) { background: rgba(112, 115, 124, .14); }

/* ---------- 업그레이드/구독 모달 ---------- */
.mb-dim {
  position: fixed; inset: 0; background: var(--ws-dimmer, rgba(23, 23, 25, .52));
  display: none; align-items: center; justify-content: center; z-index: 1300; padding: 24px; overflow-y: auto;
}
.mb-dim.on { display: flex; }
.mb-modal {
  width: 480px; max-width: 100%; background: #fff; border-radius: 20px;
  box-shadow: var(--ws-shadow-overlay, 0 16px 48px rgba(0, 0, 0, .22));
  margin: auto; display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow: hidden;
}
.mb-modal-head { padding: 18px 24px; border-bottom: 1px solid var(--ws-line-alt); display: flex; align-items: center; gap: 12px; }
.mb-modal-head h2 { margin: 0; font-size: 18px; font-weight: 700; flex: 1; }
.mb-modal-close { width: 34px; height: 34px; border: none; border-radius: 10px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ws-text-alternative); }
.mb-modal-close:hover { background: rgba(112, 115, 124, .1); }
.mb-modal-close i { font-size: 19px; }
.mb-modal-body { padding: 22px 24px; overflow-y: auto; }
.mb-up-card { border: 1px solid var(--ws-line); border-radius: 16px; padding: 18px 20px; }
.mb-up-card .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mb-up-badge { font-size: 13px; font-weight: 700; color: #fff; background: #3366FF; border-radius: 9999px; padding: 4px 12px; }
.mb-up-cycle { font-size: 12.5px; color: var(--ws-text-alternative); }
.mb-up-price { display: flex; align-items: baseline; gap: 4px; }
.mb-up-price .main { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.mb-up-price .unit { font-size: 14px; font-weight: 600; color: var(--ws-text-alternative); }
.mb-up-divider { height: 1px; background: var(--ws-line-alt); margin: 14px 0; }
.mb-up-feats { display: flex; flex-direction: column; gap: 9px; }
.mb-up-feat { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mb-up-feat i { font-size: 14px; color: #0B8A4F; flex: none; }
.mb-modal-foot { padding: 0 24px 22px; display: flex; justify-content: flex-end; gap: 10px; }
/* Stripe Embedded Checkout 컨테이너 */
#stripeCheckoutContainer { display: none; }
#stripe-subscription-checkout { min-height: 320px; }

/* ---------- 쿠폰 모달 (coupon.js DOM 계약 재스킨) ---------- */
.coupon-modal-overlay {
  position: fixed; inset: 0; background: var(--ws-dimmer, rgba(23, 23, 25, .52));
  display: none; align-items: center; justify-content: center; z-index: 1310; padding: 24px;
}
.coupon-modal-overlay.show, .coupon-modal-overlay[style*="flex"] { display: flex; }
.coupon-modal { width: 420px; max-width: 100%; background: #fff; border-radius: 20px; box-shadow: var(--ws-shadow-overlay, 0 16px 48px rgba(0, 0, 0, .22)); padding: 22px 24px; }
.coupon-modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.coupon-modal-header::before {
  content: "\1F3AB"; width: 40px; height: 40px; border-radius: 12px; background: #EFF3FF;
  display: flex; align-items: center; justify-content: center; flex: none; font-size: 18px;
}
.coupon-modal-title { margin: 0; font-size: 18px; font-weight: 700; flex: 1; }
.coupon-modal-close { width: 34px; height: 34px; border: none; border-radius: 10px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ws-text-alternative); }
.coupon-modal-close:hover { background: rgba(112, 115, 124, .1); }
.coupon-modal-desc { margin: 0 0 12px; font-size: 13px; color: var(--ws-text-alternative); }
.coupon-input-group { display: flex; gap: 8px; }
.coupon-input {
  flex: 1; height: 46px; border: 1px solid var(--ws-line-strong); border-radius: 12px;
  background: var(--ws-bg-alt); padding: 0 14px; font-size: 14px; font-family: inherit;
  color: var(--ws-text-normal); box-sizing: border-box;
}
.coupon-input:focus { outline: none; border-color: #3366FF; box-shadow: 0 0 0 3px rgba(51, 102, 255, .16); }
.coupon-validate-btn {
  flex: none; height: 46px; padding: 0 18px; border: none; border-radius: 12px;
  background: #3366FF; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.coupon-validate-btn:hover { background: #2A4FD6; }
.coupon-validate-btn:disabled { opacity: .55; cursor: not-allowed; }
.coupon-result { margin-top: 12px; font-size: 13px; border-radius: 10px; padding: 11px 14px; }
.coupon-result.success { background: #E3F7ED; color: #0B8A4F; }
.coupon-result.error { background: #FDECEC; color: #B5484B; }
.coupon-confirm-area { margin-top: 14px; }
.coupon-confirm-card { border: 1px solid var(--ws-line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.coupon-confirm-row { display: flex; align-items: center; justify-content: space-between; }
.coupon-confirm-label { font-size: 13px; color: var(--ws-text-alternative); }
.coupon-confirm-value { font-size: 14px; font-weight: 600; }
.coupon-highlight { color: #0B8A4F; }
.coupon-notice { margin: 12px 0; font-size: 12px; color: var(--ws-text-alternative); line-height: 1.5; }
.coupon-activate-btn {
  width: 100%; height: 46px; border: none; border-radius: 12px; background: #3366FF; color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.coupon-activate-btn:hover { background: #2A4FD6; }
.coupon-activate-btn:disabled { opacity: .55; cursor: not-allowed; }
/* coupon.js showCouponToast */
.coupon-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 1400; background: #171719; color: #fff; border-radius: 12px; padding: 13px 18px;
  font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.coupon-toast.success { background: #0B8A4F; }
.coupon-toast.error { background: #C2372C; }

/* ---------- 토스트 (멤버십 자체) ---------- */
.mb-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(8px);
  z-index: 1400; display: flex; align-items: center; gap: 10px;
  background: #171719; color: #fff; border-radius: 12px; padding: 13px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22); font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  max-width: min(420px, calc(100vw - 32px));
}
.mb-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.mb-toast i { font-size: 18px; color: #5B9CFF; flex: none; }
.mb-toast.err i { color: #F87171; }

/* ---------- 반응형 ---------- */
@media (max-width: 1200px) { .mb-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mb-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .mb-scroll { padding: 20px 14px calc(92px + var(--app-safe-bottom, env(safe-area-inset-bottom, 0px))); }
  .mb-hero h2 { font-size: 26px; }
  .mb-plans { grid-template-columns: 1fr; }
  .mb-plan--current { order: -1; }
  .mb-cmp-min { min-width: 680px; }
  .mb-cmp-head .c0, .mb-cmp-row .c0 { position: sticky; left: 0; background: #fff; z-index: 2; box-shadow: 1px 0 0 var(--ws-line-alt); }
  .mb-modal { border-radius: 20px; }
}