/* ══════════════ features.css — 추가 기능(기록·주유소·회원) 스타일 ══════════════
 * styles.css의 디자인 토큰(--brand, --card, --line 등)만 사용 — 라이트/다크 자동 대응.
 */

/* ── 유료 배지 · 잠금 ── */
.paid-badge {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: -0.01em;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(140deg, var(--brand), var(--brand-deep));
  color: var(--on-brand);
  vertical-align: middle;
}
.paid-badge.trial { background: var(--amber-soft); color: var(--amber); }
.lock-card { border-style: dashed; }

/* ── 회원 안내 모달 ── */
.mm-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10, 20, 15, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.mm-modal {
  width: 100%; max-width: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  box-shadow: var(--shadow);
  max-height: 86vh; overflow-y: auto;
  animation: rise .25s ease both;
}
.mm-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.mm-desc { font-size: 15px; color: var(--ink); line-height: 1.6; margin-bottom: 12px; }
.mm-benefits { list-style: none; margin: 0 0 12px; }
.mm-benefits li {
  background: var(--card-sub);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 7px;
  font-size: 14.5px; line-height: 1.55;
}
.mm-benefits.tight li { font-size: 14px; padding: 8px 11px; margin-bottom: 6px; }
.mm-price {
  text-align: center; font-size: 16px; font-weight: 800; color: var(--brand);
  margin-bottom: 12px;
}

/* ── 운송료 입력(운행 건) ── */
.job-row {
  background: var(--card-sub);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 8px;
}
.job-row + .job-row { margin-top: 8px; }
.job-label {
  background: none; border: none; font-family: inherit;
  font-size: 15.5px; font-weight: 700; color: var(--ink);
  text-align: left; padding: 4px 0; cursor: pointer;
  min-width: 0; white-space: normal; line-height: 1.4;
}
.money-wrap { position: relative; }
.money-wrap .money { padding-right: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.money-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; font-weight: 700; color: var(--ink-dim);
  pointer-events: none;
}
.cargo-link { width: 100%; justify-content: flex-start; }
.cargo-select {
  margin-top: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.cargo-opt {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 4px; font-size: 14.5px; line-height: 1.5;
  cursor: pointer;
}
.cargo-opt input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--brand);
}

/* ── 기록 탭 ── */
.lock-saved {
  margin: 12px auto 0; max-width: 300px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 14px; padding: 12px;
  font-size: 14.5px; line-height: 1.6;
}
.lock-saved b { font-size: 19px; }
.trial-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--amber-soft); color: var(--amber);
  border-radius: 12px; padding: 9px 12px;
  font-size: 13.5px; margin-top: 8px;
}
.log-day { margin-bottom: 14px; }
.log-date-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; font-weight: 800; color: var(--ink-dim);
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 5px; margin-bottom: 7px;
}
.log-entry {
  display: flex; align-items: center; gap: 8px;
  background: var(--card-sub);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 6px 9px 12px;
  margin-bottom: 6px;
}
.log-entry.active-job { border-left: 5px solid var(--brand); }
.log-label { font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.fare-chip {
  border: none; border-radius: 999px; font-family: inherit;
  background: var(--brand-soft); color: var(--brand);
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
  min-height: 34px; padding: 5px 12px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.fare-chip.missing { background: var(--red-soft); color: var(--red); }
.log-trip {
  font-size: 13px; color: var(--ink-dim);
  padding: 5px 12px; margin-bottom: 6px;
  border-left: 3px solid var(--line);
}

/* ── 주유소 탭 ── */
.stn-card {
  display: flex; gap: 11px;
  background: var(--card-sub);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
  margin-bottom: 8px;
}
.stn-rank {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--brand), var(--brand-deep));
  color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.stn-body { flex: 1; min-width: 0; }
.stn-name { font-size: 15.5px; font-weight: 800; line-height: 1.4; }
.stn-meta { font-size: 13.5px; color: var(--ink-dim); margin-top: 3px; line-height: 1.5; }

/* ── 탭 5개: 여백은 줄이고 글씨는 키워서(고령 배려) ── */
#tabs .tab { padding-left: 0; padding-right: 0; font-size: 15px; letter-spacing: -0.04em; }

/* ══════════════ 처음 사용 안내 (guide.js) ══════════════ */
.guide-bar {
  position: sticky; top: 66px; z-index: 480;
  background: var(--card);
  border: 2px solid var(--brand);
  border-radius: 14px;
  padding: 10px 12px 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  animation: rise .3s ease both;
}
.g-top { display: flex; align-items: center; gap: 8px; }
.g-tag {
  font-size: 11.5px; font-weight: 800; letter-spacing: -0.03em;
  background: var(--brand); color: var(--on-brand);
  padding: 3px 7px; border-radius: 999px; flex-shrink: 0; white-space: nowrap;
}
.g-dots {
  display: flex; align-items: center; justify-content: center; gap: 0;
  flex: 1 1 auto; min-width: 0; overflow: hidden;   /* 단계가 늘어도 옆으로 넘치지 않게 */
}
.g-sep { color: var(--line); font-size: 9px; font-style: normal; flex-shrink: 0; margin: 0 1px; }
.g-dot {
  display: flex; align-items: center;
  background: none; border: none; font-family: inherit; cursor: pointer;
  padding: 3px 1px; color: var(--ink-dim); flex-shrink: 0;
}
/* 단계 이름은 아래에 크게 나오므로, 줄에는 번호만 (겹침·잘림 방지) */
.g-dot span { display: none; }
.g-dot i {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--card-sub); border: 1.5px solid var(--line); color: var(--ink-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; font-style: normal;
}
.g-dot.done i { background: var(--green-soft); border-color: var(--green); color: var(--green); }

.g-dot.now i { background: var(--brand); border-color: var(--brand); color: var(--on-brand); transform: scale(1.12); }

.g-x {
  background: none; border: none; color: var(--ink-dim); cursor: pointer;
  font-size: 16px; padding: 4px 2px; flex-shrink: 0;
}
.g-now { margin-top: 9px; }
.g-now > b { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.g-hint { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; margin-top: 3px; }
.g-hint b { color: var(--brand); font-weight: 800; }
.g-go {
  width: 100%; margin-top: 9px;
  background: var(--brand-soft); color: var(--brand);
  border: none; border-radius: 11px; font-family: inherit;
  font-size: 15px; font-weight: 800; padding: 10px; cursor: pointer;
}
/* 지금 보는 탭에 누를 버튼이 없을 때 — 어느 탭에서 하는지 먼저 알려준다 */
.g-away { font-size: 13.5px; font-weight: 700; color: var(--amber); margin-top: 3px; }
.g-away b { color: var(--amber); }

/* 지금 눌러야 할 곳 — 빨간 테두리 + 부드러운 숨쉬기 (빠른 깜빡임 아님) */
.guide-target {
  position: relative;
  outline: 2px solid var(--red); outline-offset: 1px;
  animation: guideBreath 2.2s ease-in-out infinite;
}
@keyframes guideBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, .70); }
  55%      { box-shadow: 0 0 0 12px rgba(214, 69, 69, 0); }
}

/* '따라하기' 입구 (경로 탭 맨 위) — 언제든 누를 수 있게 항상 같은 자리에 */
.guide-start {
  width: 100%; margin-bottom: 12px;
  background: var(--red-soft); color: var(--red);
  border: 2px solid var(--red); border-radius: 13px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  padding: 13px 10px; cursor: pointer; line-height: 1.45;
  box-shadow: var(--shadow);
}
.guide-start b { font-weight: 800; font-size: 17px; color: var(--red); }
.guide-start:active { transform: scale(0.99); }

/* 화면 아래 안내 켜기/끄기 (자주 쓰지 않으므로 조용하게) */
.guide-link {
  background: none; border: none; font-family: inherit;
  color: var(--ink-dim); font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 8px 6px;
}
.guide-link.on { color: var(--brand); }



/* 둘 중 하나 고르는 곳(일정 칩) — 눈에 띄게 번갈아 반짝임 */
.guide-pick {
  animation: guidePick 2s ease-out infinite;
  border-color: var(--red) !important;
}
.guide-pick.gp2 { animation-delay: 1s; }
@keyframes guidePick {
  0%       { box-shadow: 0 0 0 0 rgba(214, 69, 69, .70); }
  35%      { box-shadow: 0 0 0 10px rgba(214, 69, 69, 0); }
  50%,100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, 0); }
}

/* 선택 단계 건너뛰기 (완료보고 번호가 없을 때) */
.g-skip {
  width: 100%; margin-top: 7px;
  background: none; border: 1.5px solid var(--line); border-radius: 11px;
  color: var(--ink-dim); font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 9px; cursor: pointer;
}

/* 헤더 따라하기 토글 — 동그란 물음표 (작게, 정중앙) */
#btn-guide {
  width: 34px; min-width: 34px; height: 34px; padding: 0;
  font-size: 17px; font-weight: 900; line-height: 1;
  color: var(--brand); border-radius: 999px;
}
#btn-guide.on { background: var(--red-soft); border-color: var(--red); color: var(--red); }
/* 안내가 꺼져 있을 때 — 여기 있다고 은은하게 알려준다 */
#btn-guide.off { color: var(--red); border-color: var(--red); animation: guideBreath 2.2s ease-in-out infinite; }

/* 완료 보고를 이미 보낸 버튼 */
.mini-btn.done.sent { background: var(--card-sub); color: var(--ink-dim); }

/* 아주 좁은 화면: 헤더 버튼을 더 작게 해 제목이 잘리지 않게 */
@media (max-width: 355px) {
  .theme-toggle { font-size: 11.5px; padding: 0 7px; }
  #btn-guide { width: 30px; min-width: 30px; height: 30px; font-size: 15px; }
}

/* 빨간 버튼(운행 종료) 위에서는 흰 테두리로 표시 */
.btn.danger.guide-target { outline-color: #fff; }
.btn.danger.guide-target { animation: guideBreathLight 2.2s ease-in-out infinite; }
@keyframes guideBreathLight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); }
  55%      { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

/* 다른 배차에 이미 연결된 화물 (잘못 고르지 않게) */
.cargo-opt.taken { opacity: .55; }
.taken-tag { display: block; font-size: 12.5px; color: var(--amber); font-weight: 700; margin-top: 2px; }

/* 좁은 화면에서는 단계 사이 화살표를 감춰 자리를 확보 */
@media (max-width: 372px) {
  .g-sep { display: none; }
  .g-tag { font-size: 11px; padding: 3px 6px; }
}

/* [입력] 눌림 반응 — 눌렀다는 게 확실히 느껴지게 */
.btn.confirm-flash { animation: confirmFlash .5s ease; }
@keyframes confirmFlash {
  0%   { background: var(--brand); color: var(--on-brand); transform: scale(0.93); }
  60%  { background: var(--brand); color: var(--on-brand); }
  100% { }
}

/* ── 가격 표시: 정가 안내(완결형) + 출시 이벤트 별도 상자 ── */
.mm-priceline {
  font-size: 13px; color: var(--ink-dim); line-height: 1.6;
  text-align: center; margin: -6px 0 12px;
}
.mm-priceline b { color: var(--ink); }
.mm-evbox {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-sub);
  padding: 11px 12px; margin: 0 0 14px; text-align: center;
}
.mm-evtitle { font-size: 13px; font-weight: 700; color: var(--ink-dim); }
.mm-evline { font-size: 17px; color: var(--ink); margin-top: 4px; }
.mm-evline b { color: var(--red); font-size: 21px; }
.mm-strike2 {
  color: var(--ink-dim);
  text-decoration: line-through;
  text-decoration-color: var(--red); text-decoration-thickness: 1.5px;
}
.mm-evsub { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 3px; }
.mm-evnote { font-size: 11.5px; color: var(--ink-dim); margin-top: 6px; }

/* ── 결제 확인 화면 ── */
.mm-back {
  background: none; border: none; font-family: inherit; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--ink-dim);
  padding: 0 0 6px; margin-left: -2px;
}
.mm-plan {
  display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  background: var(--card-sub); border: 2px solid var(--line); border-radius: 13px;
  padding: 12px 14px; margin-bottom: 8px;
}
.mm-plan.on { border-color: var(--brand); background: var(--brand-soft); }
.mm-plan-name { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.mm-plan-price { display: block; font-size: 21px; font-weight: 800; color: var(--brand); margin-top: 2px; }
.mm-plan-note { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }

.mm-sum { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.mm-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--ink); margin-bottom: 5px; }
.mm-sum-row.dim { color: var(--ink-dim); font-size: 13px; }
.mm-sum-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--line); margin-top: 9px; padding-top: 10px;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.mm-sum-total b { font-size: 24px; font-weight: 800; color: var(--ink); }
.mm-sum-per { text-align: right; font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }

/* 지금 vs 나중 — 두 칸을 나란히 놓아 '지금'이 유리한 걸 눈으로 보게 */
.mm-cmp { display: flex; gap: 8px; margin: 10px 0 8px; }
.mm-cmp .cmp {
  flex: 1; border-radius: 12px; padding: 10px 8px; text-align: center;
  border: 2px solid var(--line); background: var(--card-sub);
}
.mm-cmp .cmp.now { border-color: var(--brand); background: var(--brand-soft); }
.mm-cmp .cmp.later { opacity: .75; }
.cmp-h { font-size: 12.5px; font-weight: 800; color: var(--ink-dim); }
.mm-cmp .now .cmp-h { color: var(--brand); }
.cmp-b { font-size: 15px; color: var(--ink); margin-top: 3px; }
.cmp-b b { font-size: 20px; font-weight: 800; }
.mm-cmp .now .cmp-b b { color: var(--brand); }
.mm-cmp .later .cmp-b b { color: var(--red); text-decoration: none; }
.cmp-s { font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; margin-top: 4px; }
.mm-hurry {
  font-size: 12.5px; color: var(--ink-dim); line-height: 1.55;
  text-align: center; margin-bottom: 12px;
}
.mm-hurry b { color: var(--ink); }

/* 평생 이 가격 = 스위치 하나 + '지금 → 1년 뒤' 두 칸 그림 (설명은 짧게) */
.mm-lock {
  border: 2px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-top: 14px; background: var(--card-sub);
}
.mm-lock.on { border-color: var(--brand); background: var(--brand-soft); }
.mm-lock.off { border-color: var(--red); }
.mm-lock-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; font-size: 16px; color: var(--ink);
}
.mm-lock-head b { font-weight: 800; }
.mm-switch { position: relative; width: 54px; height: 31px; flex: none; }
.mm-switch input { width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mm-switch i {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--line); transition: background .18s; pointer-events: none;
}
.mm-switch i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 25px; height: 25px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .18s;
}
.mm-switch input:checked + i { background: var(--brand); }
.mm-switch input:checked + i::after { transform: translateX(23px); }

.mm-flow { display: flex; align-items: stretch; gap: 8px; margin-top: 11px; }
.mm-flow .fc {
  flex: 1; text-align: center; border-radius: 10px; padding: 8px 6px;
  background: var(--card); border: 1px solid var(--line);
}
.mm-flow .fc em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-dim); }
.mm-flow .fc b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.mm-flow .fc.keep { border-color: var(--brand); }
.mm-flow .fc.keep b { color: var(--brand); }
.mm-flow .fc.lose { border-color: var(--red); }
.mm-flow .fc.lose b { color: var(--red); }
.mm-flow .fa { align-self: center; font-style: normal; font-size: 17px; color: var(--ink-dim); }

.mm-codelink {
  display: block; width: 100%; margin-top: 8px;
  background: none; border: none; font-family: inherit; cursor: pointer;
  font-size: 13px; color: var(--ink-dim); text-decoration: underline;
}

.mm-refund {
  background: var(--card-sub); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-top: 14px;
  font-size: 13.5px; color: var(--ink-dim); line-height: 1.6;
}
.mm-refund > b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.mm-refund ul { list-style: none; margin: 0; }
.mm-refund li { position: relative; padding-left: 12px; margin-bottom: 4px; }
.mm-refund li::before { content: '·'; position: absolute; left: 2px; }
.mm-refund b { color: var(--ink); }

.mm-agree {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  margin: 14px 2px 0; font-size: 14px; color: var(--ink); line-height: 1.45;
}
.mm-agree input { width: 22px; height: 22px; flex: none; accent-color: var(--brand); }
/* 동의 없이 결제를 누르면 여기를 봐야 한다고 알려준다 */
.mm-agree.confirm-flash {
  border-radius: 10px;
  animation: agreeFlash 1.1s ease 2;
}
@keyframes agreeFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 62, 62, 0); }
  40%      { box-shadow: 0 0 0 7px rgba(199, 62, 62, .18); }
}

/* 결제 버튼은 스크롤해도 항상 아래에 붙어 있다 (토스 결제창처럼) */
.mm-sticky {
  position: sticky; bottom: -22px; margin-top: 14px;
  background: var(--card); padding-bottom: 4px;
}
.mm-sticky .btn.primary[disabled] { opacity: .45; cursor: not-allowed; }

/* 유선번호처럼 주의가 필요한 안내 줄 */
.fine-print.warn {
  color: var(--amber); font-weight: 600;
  background: var(--amber-soft); border-radius: 9px;
  padding: 7px 9px; margin-top: 6px; line-height: 1.55;
}
.fine-print.warn b { color: var(--amber); font-weight: 800; }

/* ── 주유소: 가격 중심 표시 ── */
.fuel-price { margin-top: 3px; color: var(--brand); }
.fuel-price b { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fuel-price span { font-size: 14px; font-weight: 700; color: var(--ink-dim); }
.fuel-save {
  display: inline-block; margin-top: 4px;
  background: var(--green-soft); color: var(--green);
  border-radius: 999px; padding: 4px 10px;
  font-size: 13px; font-weight: 700;
}
.fuel-save b { font-weight: 900; }
.stn-tag {
  font-size: 11.5px; font-weight: 800; vertical-align: middle;
  background: var(--amber-soft); color: var(--amber);
  border-radius: 999px; padding: 2px 8px; margin-left: 5px;
}
.stn-detail:empty { display: none; }
.stn-detail { border-top: 1px dashed var(--line); margin-top: 9px; }

/* ── 근처 식당 ── */
.food-head { font-size: 14px; font-weight: 800; color: var(--ink); }
.food-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
}
.food-row:last-child { border-bottom: none; }
.food-name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.stn-tag.drv { background: var(--brand-soft); color: var(--brand); }

.stn-tag.park { background: var(--green-soft); color: var(--green); }
.stn-tag.fast { background: var(--brand-soft); color: var(--brand); }
.stn-tag.slow { background: var(--card-sub); color: var(--ink-dim); }
.park-row { padding: 0 0 8px; }
.park-row .mini-btn { width: 100%; justify-content: center; font-size: 13.5px; }
.park-row .mini-btn.saved { background: var(--green-soft); color: var(--green); }
.chip.small { font-size: 13.5px; padding: 6px 12px; min-height: 34px; }

/* 음성 안내 목소리 고르기 */
.vw-voice { margin-top: 8px; }
.vw-voicerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vw-voicelabel { font-size: 13.5px; font-weight: 700; color: var(--ink-dim); flex: none; }
.vw-voicesel { flex: 1; min-width: 120px; font-size: 14px; padding: 8px 10px; min-height: 40px; }
.vw-voicehint { font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; }
.vw-voicehint b { color: var(--ink); }

/* 무료 회원 맛보기: 가려진 주유소 */
.stn-card.masked { opacity: .95; }
.stn-card.masked .blurred {
  filter: blur(5px); user-select: none; pointer-events: none;
}
.fuel-lock {
  border: 1px dashed var(--line); border-radius: 13px;
  padding: 14px; text-align: center; background: var(--card-sub); margin-top: 4px;
}
.fuel-lock > b { font-size: 15px; color: var(--ink); }
.fuel-lock .hint { margin-top: 5px; line-height: 1.6; }

/* 결제 요약에서 '받는 것'은 초록으로 — 돈을 더 내는 줄과 헷갈리지 않게 */
.mm-sum-row.gift { color: var(--green); font-weight: 700; }
.mm-sum-row.gift b { color: var(--green); }

/* ── 무료 소진 후 회색 잠금: 보이되 누를 수 없다 ── */
#panel-cargo.free-locked > *:not(.free-lock-card) {
  filter: grayscale(.85); opacity: .5; pointer-events: none;
}
.free-lock-card { text-align: center; }

/* 주유소 잠금 화면의 회색 견본 카드 — 어떤 기능이 있었는지 보여만 준다 */
.fuel-demo { margin: 12px 0 6px; text-align: left; }
.fuel-demo-card {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  background: var(--card-sub); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 12px; margin-bottom: 6px; font-size: 14px;
  filter: grayscale(1); opacity: .6;
}
.fuel-demo-card span { font-size: 12px; color: var(--ink-dim); white-space: nowrap; }

/* 경로 탭 위 얇은 이벤트 띠 — 체험·이용권 기간에만 보인다 */
.mm-event-pill {
  display: block; width: 100%; text-align: center; cursor: pointer;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--brand); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; padding: 9px 14px; margin-bottom: 12px;
}
.mm-event-pill .pill-go { font-weight: 900; margin-left: 2px; }