/* x-mb.css — mb 담당 화면(홈·소개·쇼핑몰 경유·적립) 전용. 클래스는 모두 .mb- 로 시작하고 색·간격은 app.css 토큰만 쓴다.
   주의: app.css 의 .mb-8/.mb-16/.mb-24(아래 여백) 이름과 겹치지 않게 숫자로 끝나는 이름은 쓰지 않는다. */

/* ═════════ 랜딩(비회원 홈) ═════════ */
.mb-landing .main { overflow-x: clip; }
.mb-hero { position: relative; padding: 48px 0 56px; isolation: isolate; }
.mb-hero::before { content: ""; position: absolute; z-index: -1; inset: -80px -10% auto auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%); }
.mb-hero-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mb-hero-eye { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink); }
.mb-hero h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.16; letter-spacing: -0.035em; margin-top: 18px; font-weight: 800; }
.mb-hl { position: relative; color: var(--accent); white-space: nowrap; }
.mb-hl::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .26em; z-index: -1; border-radius: 6px; background: var(--coin); opacity: .55; }
.mb-hero-lead { margin-top: 18px; font-size: var(--fs-lg); color: var(--ink-2); max-width: 520px; line-height: 1.7; }
.mb-hero-lead b { color: var(--ink); }
.mb-hero .btn-row { margin-top: 28px; }
.mb-hero-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.mb-hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.mb-hero-trust .ic-sm { color: var(--accent); }

.mb-hero-visual { position: relative; padding: 0 0 60px 40px; }
.mb-hero-photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.4; background: var(--surface-2); }
.mb-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.mb-hero-wallet { position: absolute; left: 0; bottom: 0; width: min(320px, 78%); padding: 20px; gap: 12px; }
.mb-hero-wallet .wallet-v .pts { font-size: 38px; }
.mb-hero-wallet .wallet-sub { font-size: 13px; }
.mb-ex { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); color: var(--night-ink); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.mb-hero-wallet-foot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--coin); }
.mb-hero-pings { position: absolute; right: -12px; top: 22px; display: flex; flex-direction: column; gap: 10px; }
.mb-ping { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); font-size: 13px; min-width: 238px; }
.mb-ping .mall-mark { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
.mb-ping > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.35; }
.mb-ping > span:nth-child(2) span { color: var(--ink-3); font-size: 12px; }
.mb-ping-amt { margin-left: auto; color: var(--accent-ink); font-weight: 800; font-size: 15px; }
.mb-ping-2 { margin-right: 36px; }

@media (prefers-reduced-motion: no-preference) {
  .mb-hero-wallet { animation: mb-float-in 900ms var(--ease) 250ms both, mb-bob 6s ease-in-out 1.6s infinite; }
  .mb-ping-1 { animation: mb-ping-in 700ms var(--ease) 1.2s both; }
  .mb-ping-2 { animation: mb-ping-in 700ms var(--ease) 2.1s both; }
  .mb-hero-photo img { animation: settle 1600ms var(--ease) both; }
  .mb-rate, .mb-mall-btn { transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
}
@keyframes mb-float-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes mb-ping-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* 쇼핑몰 띠 */
.mb-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.mb-strip-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.mb-strip-item { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); }
.mb-strip-item .mall-mark { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
.mb-strip-item b { color: var(--accent-ink); font-weight: 800; }
.mb-strip-note { font-size: var(--fs-sm); color: var(--ink-3); }
.mb-strip-note .ic-sm { color: var(--accent); }

/* 섹션 공통 */
.mb-sec { padding-top: 80px; padding-bottom: 80px; }
.mb-sec-alt { background: var(--surface-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mb-sec-head { max-width: 680px; margin-bottom: 36px; }
.mb-sec-head h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; line-height: 1.25; margin-top: 8px; font-weight: 800; }
.mb-sec-head p:not(.eyebrow) { color: var(--ink-3); margin-top: 10px; font-size: var(--fs-lg); }

/* 3단계 */
.mb-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px; align-items: stretch; }
.mb-steps { display: flex; flex-direction: column; gap: 14px; counter-reset: none; }
.mb-step { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; padding: 22px 22px 22px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.mb-step .ico-box { grid-row: 1 / span 2; }
.mb-step h3 { font-size: var(--fs-h4); }
.mb-step p { color: var(--ink-3); margin-top: 4px; }
.mb-step p b { color: var(--ink); }
.mb-step-n { position: absolute; right: 18px; top: 14px; font-size: 40px; font-weight: 800; line-height: 1; color: var(--surface-2); }
.mb-how-photo { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; min-height: 300px; background: var(--surface-2); }
.mb-how-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mb-how-cap { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--glass); font-size: var(--fs-sm); font-weight: 700; }
.mb-how-cap .ic-sm { color: var(--accent); }

/* 쇼핑몰별 적립률 카드 */
.mb-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.mb-rate { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.mb-rate:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.mb-rate-top { display: flex; align-items: center; gap: 12px; }
.mb-rate-top > span:last-child { display: flex; flex-direction: column; }
.mb-rate-name { font-size: var(--fs-lg); }
.mb-rate-big b { font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--accent-ink); }
.mb-rate-ex { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 12px; border-radius: var(--r-pill); background: var(--coin-soft); color: var(--coin-ink); font-size: var(--fs-sm); }
.mb-rate-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.mb-rate-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.mb-rate-more { font-weight: 700; color: var(--accent); }

/* 계산기 */
.mb-calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.mb-calc-form { padding: 36px; }
.mb-calc-form h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; margin-top: 6px; font-weight: 800; }
.mb-legend { display: block; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 700; }
.mb-calc-malls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mb-calc-amt { position: relative; }
.mb-calc-amt .input { font-size: 24px; font-weight: 800; min-height: 60px; padding-right: 44px; }
.mb-calc-amt > span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--ink-3); }
.mb-range { width: 100%; margin-top: 10px; accent-color: var(--accent); height: 28px; cursor: pointer; }
.mb-calc-out { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 36px; background: var(--night); color: var(--white); isolation: isolate; overflow: hidden; }
.mb-calc-out::before { content: ""; position: absolute; z-index: -1; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 61, .38), transparent 66%); }
.mb-calc-k { color: var(--night-ink); font-weight: 600; font-size: var(--fs-sm); }
.mb-calc-v { font-size: clamp(44px, 6vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--coin); }
.mb-calc-v small { font-size: .4em; margin-left: 4px; color: var(--white); }
.mb-calc-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.mb-calc-kv > div { padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .07); }
.mb-calc-kv dt { font-size: 12px; color: var(--night-ink); }
.mb-calc-kv dd { font-size: var(--fs-lg); font-weight: 800; margin-top: 2px; }
.mb-calc-note { font-size: 13px; color: var(--night-ink); line-height: 1.6; margin-top: auto; }

/* 출금·초대 */
.mb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mb-duo-card { display: grid; grid-template-columns: 200px 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.mb-duo-photo { position: relative; background: var(--surface-2); min-height: 240px; }
.mb-duo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-duo-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.mb-duo-body h3 { font-size: var(--fs-h4); }
.mb-checks { display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); }
.mb-checks li { position: relative; padding-left: 24px; }
.mb-checks .ic-sm { position: absolute; left: 0; top: 4px; color: var(--accent); }

/* FAQ(랜딩·소개 공용) */
.mb-faq-wrap { max-width: calc(820px + var(--gutter) * 2); }
.mb-faq { display: flex; flex-direction: column; gap: 10px; }
.mb-qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.mb-qa[open] { border-color: var(--line-strong); }
.mb-qa summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 700; min-height: 56px; border-radius: var(--r); }
.mb-qa summary::-webkit-details-marker { display: none; }
.mb-q, .mb-a-mark { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-weight: 800; font-size: 14px; background: var(--accent-soft); color: var(--accent-ink); }
.mb-a-mark { background: var(--coin-soft); color: var(--coin-ink); }
.mb-qa-chev { color: var(--ink-3); transition: transform var(--t-mid) var(--ease); }
.mb-qa[open] .mb-qa-chev { transform: rotate(180deg); }
.mb-a { display: flex; gap: 12px; padding: 0 18px 18px; color: var(--ink-2); line-height: 1.75; }

/* 마지막 가입 띠 */
.mb-cta { background: var(--night); color: var(--white); padding: 56px 0; margin-bottom: -72px; position: relative; overflow: hidden; isolation: isolate; }
.mb-cta::before { content: ""; position: absolute; z-index: -1; left: -120px; bottom: -200px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(10, 122, 82, .6), transparent 70%); }
.mb-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mb-cta h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; font-weight: 800; }
.mb-cta p { color: var(--night-ink); margin-top: 6px; }

@media (max-width: 980px) {
  .mb-hero-in { grid-template-columns: 1fr; gap: 28px; }
  .mb-hero-visual { max-width: 560px; }
  .mb-how { grid-template-columns: 1fr; }
  .mb-how-photo { min-height: 240px; aspect-ratio: 16 / 9; }
  .mb-calc { grid-template-columns: 1fr; }
  .mb-duo { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mb-hero { padding: 28px 0 40px; }
  .mb-hero-lead { font-size: var(--fs-md); }
  .mb-hero .btn-row .btn { flex: 1 1 100%; }
  .mb-hero-visual { padding: 0 0 72px 0; }
  .mb-hero-wallet { left: 12px; width: min(300px, calc(100% - 24px)); }
  .mb-hero-wallet .wallet-v .pts { font-size: 32px; }
  .mb-hero-pings { right: 8px; top: 12px; }
  .mb-ping { min-width: 0; padding: 8px 12px 8px 8px; }
  .mb-ping-2 { display: none; }
  .mb-sec { padding-top: 56px; padding-bottom: 56px; }
  .mb-sec-head p:not(.eyebrow) { font-size: var(--fs-md); }
  .mb-step { padding: 18px; }
  .mb-step-n { font-size: 32px; }
  .mb-calc-form, .mb-calc-out { padding: 24px 20px; }
  .mb-duo-card { grid-template-columns: 1fr; }
  .mb-duo-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .mb-cta-in .btn-row { width: 100%; }
  .mb-cta-in .btn { flex: 1 1 100%; }
  .mb-strip-in { justify-content: flex-start; }
}

/* ═════════ 회원 홈 ═════════ */
.mb-home-head h1 { font-size: var(--fs-h3); margin-top: 4px; }
.mb-mall-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.mb-mall-btn { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-height: 72px; }
.mb-mall-btn:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.mb-mall-btn-t { display: flex; flex-direction: column; min-width: 0; }
.mb-mall-btn-t span { font-size: 13px; color: var(--accent-ink); font-weight: 600; }
.mb-mall-btn-go { margin-left: auto; color: var(--ink-3); }
.mb-12-gap { margin-bottom: 12px; }
.mb-home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-home-card { display: flex; align-items: center; gap: 12px; padding: 16px; }
.mb-home-card > span:nth-child(2) { display: flex; flex-direction: column; }
.mb-home-card .li-chev { margin-left: auto; color: var(--ink-3); }
.mb-notice-line { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); min-height: 52px; }
.mb-notice-line:hover { border-color: var(--line-strong); }
.mb-notice-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (max-width: 560px) { .mb-home-cards { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .mb-notice-line .hide-m { display: none; } }

/* ═════════ 쇼핑몰 경유 이동·채널·확인 모달 ═════════ */
.mb-go-top { display: flex; align-items: center; gap: 14px; }
.mb-go-top h2 { font-size: var(--fs-h4); }
.mb-go-top .row-between { flex-wrap: nowrap; align-items: flex-start; }
.mb-go-rate { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 600; }
.mb-go-done { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--line); }
.mb-go-done > .ic { color: var(--accent); margin-top: 2px; }
.mb-go-done > div { display: flex; flex-direction: column; }
.mb-go-list > li { align-items: flex-start; }
.mb-go-list > li > .ic { color: var(--accent); margin-top: 2px; }
.mb-cond strong { display: block; }
.mb-dots { list-style: disc; padding-left: 18px; margin-top: 4px; }
.mb-dots li + li { margin-top: 2px; }
.mb-stack-m .btn { flex: 1 1 auto; }
@media (max-width: 560px) { .mb-stack-m .btn, .mb-go-btns .btn { flex: 1 1 100%; } }

.mb-ch-list { display: flex; flex-direction: column; gap: 12px; }
.mb-ch { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.mb-ch.is-off { background: var(--surface-3); }
.mb-ch-main { display: flex; align-items: center; gap: 14px; border-radius: var(--r-sm); }
.mb-ch-main:hover .mb-ch-name { color: var(--accent); }
.mb-ch-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mb-ch-name { font-weight: 800; font-size: var(--fs-lg); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-ch-rate { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.mb-ch-rate b { font-size: 28px; font-weight: 800; color: var(--accent-ink); line-height: 1.1; letter-spacing: -0.03em; }
.mb-ch-rate span { font-size: 12px; color: var(--ink-3); }
.mb-ch-guide { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.mb-ch-note { margin-top: 4px; }
.mb-ch-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mb-ch-off { display: inline-flex; align-items: center; gap: 6px; color: var(--warn-ink); margin-right: auto; }

.mb-chd-sum { margin-top: 2px; color: var(--ink-2); }
.mb-chd-sum b { color: var(--accent-ink); font-size: var(--fs-lg); }
.mb-chd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mb-chd-grid .v { font-size: 24px; }
.mb-chd-ex { background: var(--coin-soft); border-color: transparent; }
.mb-chd-ex .k, .mb-chd-ex .d { color: var(--coin-ink); }
.mb-chd-days { font-size: var(--fs-h3); margin-top: 2px; }
@media (max-width: 560px) { .mb-chd-grid { grid-template-columns: 1fr; } }

.mb-numlist { display: flex; flex-direction: column; gap: 10px; }
.mb-numlist > li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.mb-numlist p { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 2px; }
.mb-num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--white); font-weight: 800; }
.mb-numlist-lg > li { padding: 20px; }
.mb-chip-sm { min-height: 32px; padding: 0 12px; font-size: 13px; margin-top: 10px; }

.mb-launch-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface-3); }
.mb-launch-card:hover { border-color: var(--accent); }
.mb-launch-card .grow { display: flex; flex-direction: column; }
.mb-ok-t { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-weight: 600; }
.mb-launch-rate { font-weight: 800; color: var(--accent-ink); white-space: nowrap; }
.mb-launch-h { font-size: var(--fs-md); }
.mb-launch-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.mb-launch-list li { display: flex; gap: 8px; align-items: flex-start; }
.mb-launch-list .ic-sm { color: var(--accent); margin-top: 3px; }
.mb-launch-list b { color: var(--ink); margin-right: 4px; }

/* ═════════ 클릭 기록·추적 ═════════ */
.mb-clicks { display: flex; flex-direction: column; gap: 10px; }
.mb-click { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); flex-wrap: wrap; }
.mb-click-body { flex: 1 1 200px; min-width: 0; }
.mb-click-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-click-go { flex: 0 0 auto; }
@media (max-width: 560px) { .mb-click-go { flex: 1 1 100%; } }
.mb-help b { display: inline-flex; align-items: center; gap: 6px; }
.mb-kv { grid-template-columns: max-content 1fr; }
.mb-kv dd { min-width: 0; }
.mb-inline-note { display: block; margin-top: 4px; }

/* ═════════ 적립 내역 카드 ═════════ */
.mb-ei-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mb-ei { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); transition: background var(--t-short) var(--ease); }
.mb-ei:last-child { border-bottom: 0; }
.mb-ei:hover { background: var(--surface-3); }
.mb-ei-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mb-ei-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mb-ei-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mb-ei-buy { font-size: 13px; color: var(--ink-2); }
.mb-ei-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--ink-3); }
.mb-ei-k { color: var(--ink-3); }
.mb-ei-meta .num { color: var(--ink-2); }
.mb-ei-note { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--danger); margin-top: 2px; }
.mb-ei-note .ic-sm { margin-top: 2px; }
.mb-ei-amt { flex: 0 0 auto; align-self: center; }
.mb-ei-amt .pts { font-size: 18px; color: var(--accent-ink); }
.mb-ei-amt.is-void .pts { color: var(--ink-3); }
.mb-ei-amt.is-void .pts:not(.is-minus) { text-decoration: line-through; }
.mb-ei-chev { align-self: center; color: var(--ink-3); }
@media (max-width: 480px) {
  .mb-ei { flex-wrap: wrap; padding: 14px; }
  .mb-ei-body { flex-basis: calc(100% - 56px); }
  .mb-ei-amt { margin-left: 56px; }
  .mb-ei-chev { display: none; }
}

/* ═════════ 적립 건 상세·회수 ═════════ */
.mb-ps-big { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.mb-ps-v .pts { font-size: 40px; line-height: 1.15; color: var(--accent-ink); }
.mb-ps-hero.is-pending .mb-ps-v .pts { color: var(--st-pending); }
.mb-ps-v .pts.is-minus { color: var(--danger); }
.mb-ps-v.is-void .pts { color: var(--ink-3); text-decoration: line-through; }
.mb-void-t { color: var(--st-expired); font-weight: 700; }
.mb-ps-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mb-ps-guides b { display: inline-flex; align-items: center; gap: 6px; }
.mb-rc-sum { display: flex; flex-direction: column; gap: 2px; }
.mb-rc-list { display: flex; flex-direction: column; gap: 10px; }
.mb-rc { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.mb-rc.is-cur { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.mb-rc-top { display: flex; gap: 12px; align-items: flex-start; }
.mb-rc-amt { display: flex; flex-direction: column; align-items: flex-end; }
.mb-rc-amt .pts { font-size: 18px; }
.mb-rc-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 12px 0 8px; padding: 12px; border-radius: var(--r-sm); background: var(--surface-3); font-size: 13px; }
.mb-rc-kv dt { color: var(--ink-3); }
.mb-rc-kv dd { font-weight: 600; }
@media (max-width: 420px) { .mb-rc-kv { grid-template-columns: 1fr; } .mb-rc-top { flex-wrap: wrap; } .mb-rc-amt { flex-direction: row; gap: 8px; align-items: baseline; margin-left: 56px; } }

/* ═════════ 소개 화면 ═════════ */
.mb-subnav { border-bottom: 1px solid var(--line); background: var(--surface-3); }
.mb-subnav-in { display: flex; gap: 4px; max-width: calc(880px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.mb-subnav-in::-webkit-scrollbar { display: none; }
.mb-subnav a { padding: 12px 12px; white-space: nowrap; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-3); border-bottom: 2.5px solid transparent; }
.mb-subnav a:hover { color: var(--ink); }
.mb-subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.mb-about { padding-top: 20px; padding-bottom: 24px; }
.mb-about-hero { margin-top: 20px; }
.mb-about-hero h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.03em; line-height: 1.25; margin-top: 8px; font-weight: 800; }
.mb-about-hero p:not(.eyebrow) { color: var(--ink-2); margin-top: 14px; font-size: var(--fs-lg); max-width: 680px; }
.mb-about-hero-sm h1 { font-size: var(--fs-h2); }
.mb-about-hero-sm p:not(.eyebrow) { font-size: var(--fs-md); }
.mb-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: mbflow; }
.mb-flow li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.mb-flow li b { font-size: var(--fs-lg); margin-top: 6px; }
.mb-flow li p { color: var(--ink-3); font-size: var(--fs-sm); }
.mb-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mb-kpis .v { font-size: 26px; color: var(--accent-ink); }
.mb-about-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 32px; border-radius: var(--r-lg); background: var(--night); color: var(--white); }
.mb-about-cta h2 { font-size: var(--fs-h3); }
.mb-about-cta p { color: var(--night-ink); margin-top: 4px; }
.mb-faq-search .btn { flex: 0 0 auto; }
.mb-pol-table { min-width: 420px; }
@media (max-width: 760px) {
  .mb-flow, .mb-diff { grid-template-columns: 1fr; }
  .mb-about-cta { padding: 24px 20px; }
  .mb-about-cta .btn-row, .mb-about-cta .btn { width: 100%; }
  .mb-about-hero p:not(.eyebrow) { font-size: var(--fs-md); }
}
.mb-kpis .stat .v, .mb-kpis .stat .d, .mb-chd-grid .stat .v, .mb-chd-grid .stat .d { display: block; }