/* mb 영역 전용 스타일 — 클래스는 .mb- 로 시작 */

/* 이미지 칸: 사진을 못 불러오면 배경색 + 대체 글이 보이게 */
.mb-img { background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-sm); }
img.mb-img, .mb-img img { color: var(--ink-3); }

/* 목록 정렬 셀렉트 */
.mb-sort { width: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; font-size: var(--fs-sm); }

/* 비회원 조회: 최근 확인 주문 */
.mb-recent { flex-wrap: wrap; }
.mb-recent .btn-row { gap: 6px; }

/* 주문·환불 카드 */
.mb-order__no { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.mb-order__no:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.mb-order__kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.mb-order__kv dt { font-size: var(--fs-xs); color: var(--ink-3); }
.mb-order__kv dd { margin-top: 2px; font-size: var(--fs-sm); font-weight: 500; }
.mb-order .btn-row form { display: contents; }
@media (max-width: 760px) { .mb-order__kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 찜 목록 */
.mb-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mb-fav { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mb-fav__thumb { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.mb-fav__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-long) var(--ease); }
.mb-fav__thumb:hover img { transform: scale(1.04); }
.mb-fav__body { padding: 14px 16px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; }
.mb-fav__name { font-weight: 700; font-size: var(--fs-lg); }
.mb-fav__name:hover { color: var(--accent); }
.mb-fav__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mb-fav .btn-row { margin-top: auto; padding-top: 6px; gap: 6px; }
.mb-fav .btn-row form { display: contents; }
@media (max-width: 760px) {
  .mb-fav-grid { grid-template-columns: 1fr; }
  .mb-fav { flex-direction: row; }
  .mb-fav__thumb { flex: 0 0 112px; aspect-ratio: auto; }
}

/* 영수증 */
.mb-receipt__paper { position: relative; }
.mb-receipt__cut { border: 0; border-top: 1.5px dashed var(--line-strong); margin: 20px 0; }
.mb-receipt__h { font-size: var(--fs-md); margin-bottom: 10px; }
.mb-receipt__items li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mb-receipt__sum { padding-top: 14px; font-size: var(--fs-lg); }
@media print {
  body:has(.mb-receipt) { background: #fff; padding: 0; }
  body:has(.mb-receipt) .site-header, body:has(.mb-receipt) .site-footer, body:has(.mb-receipt) .tabbar,
  body:has(.mb-receipt) .toasts, body:has(.mb-receipt) .skip, .mb-noprint { display: none !important; }
  .mb-receipt__paper { border: 0; box-shadow: none; padding: 0; }
}

/* 약관 */
.mb-policy { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.mb-policy__toc { position: sticky; top: calc(var(--header-h) + 16px); }
.mb-policy__toc ol { display: flex; flex-direction: column; gap: 2px; }
.mb-policy__toc a { display: flex; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink-2); }
.mb-policy__toc a:hover { background: var(--surface-3); color: var(--ink); }
.mb-policy__body h2 { scroll-margin-top: calc(var(--header-h) + 16px); }
.mb-policy__body > :first-child { margin-top: 0; }
@media (max-width: 900px) {
  .mb-policy { grid-template-columns: 1fr; }
  .mb-policy__toc { position: static; }
}

/* 온보딩 */
.mb-onb { padding: 8px 0 24px; }
.mb-onb__mark { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto; }
.mb-onb__mark .ic { width: 32px; height: 32px; }
.mb-onb__title { font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -0.02em; }
.mb-onb__steps { display: flex; flex-direction: column; gap: 10px; }
.mb-onb__h { font-size: var(--fs-lg); margin-top: 2px; }

/* 서비스 소개 */
.mb-steps { display: flex; flex-direction: column; gap: 16px; }
.mb-steps li { display: flex; gap: 14px; align-items: flex-start; }
.mb-steps__n { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; }
.mb-feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mb-feat h3 { font-size: var(--fs-lg); }
.mb-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mb-strip li { aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; }
.mb-strip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .mb-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mb-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mb-feat { grid-template-columns: 1fr; } }

/* 이용 방법 */
.mb-flow { display: flex; flex-direction: column; gap: 12px; }
.mb-flow li { display: flex; gap: 14px; align-items: stretch; position: relative; }
.mb-flow__n { flex: 0 0 auto; width: 36px; height: 36px; margin-top: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 700; position: relative; z-index: 1; }
.mb-flow li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 56px; bottom: -32px; width: 2px; background: var(--line-strong); }
.mb-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .mb-compare { grid-template-columns: 1fr; } }
.mb-faq { display: flex; flex-direction: column; gap: 10px; }
.mb-faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.mb-faq__item summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; min-height: 52px; font-weight: 700; cursor: pointer; list-style: none; border-radius: var(--r); }
.mb-faq__item summary::-webkit-details-marker { display: none; }
.mb-faq__item summary > .ic:first-child { color: var(--accent); }
.mb-faq__chev { color: var(--ink-3); transition: transform var(--t-short) var(--ease); }
.mb-faq__item[open] .mb-faq__chev { transform: rotate(180deg); }
.mb-faq__item p { padding: 0 18px 16px 48px; color: var(--ink-2); font-size: var(--fs-sm); }

/* 사유 고르기 묶음: 기본 fieldset 테두리 없애기 */
.mb-reason { border: 0; margin: 0; padding: 0; min-width: 0; }