/* ============================================================
   4DMIXX — 회원 화면 (로그인 · 가입 · 마이페이지 · 약관)
   style.css · h.css 의 색 변수를 그대로 쓴다.
   ============================================================ */
body{ background:var(--surface); }
.mb-top{ background:#fff; border-bottom:1px solid var(--line); }
.mb-top .h-wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.mb-top img{ height:38px; width:auto; display:block; }
.mb-top nav{ display:flex; gap:18px; font-size:14px; font-weight:600; }
.mb-top nav a{ color:var(--text); }
.mb-top nav a:hover{ color:var(--accent); }
.mb-out{ background:none; border:0; padding:0; font:inherit; font-size:14px; font-weight:500; color:var(--text-dim); cursor:pointer; }
.mb-out:hover{ color:var(--accent); text-decoration:underline; }
@media (max-width:520px){ .mb-top nav{ gap:12px; font-size:13px; } .mb-top nav a:first-child{ display:none; } }

.mb-main{ max-width:560px; margin:32px auto 48px; padding:0 16px; }
.mb-main.wide{ max-width:880px; }
.mb-card{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px; margin-bottom:16px; }
.mb-card section{ padding:0; border:0; }   /* style.css 의 전역 section 여백 끄기 */
.mb-card h1{ font-size:22px; font-weight:800; margin:0 0 6px; }
.mb-card h2{ font-size:17px; font-weight:800; margin:0 0 12px; }
.mb-sub{ font-size:14px; color:var(--text-dim); line-height:1.6; margin:0 0 18px; }
.mb-msg{ padding:12px 14px; border-radius:6px; font-size:14px; line-height:1.5; margin:0 0 16px; }
.mb-msg.err{ background:#FDECEC; color:#B42318; }
.mb-msg.ok{ background:#E8F5EE; color:#1A7F4B; }
.mb-msg.info{ background:var(--surface); color:var(--text-dim); }

/* 소셜 로그인 버튼 */
.sns{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box;
  padding:14px; border-radius:8px; font-size:15px; font-weight:700; margin-bottom:10px; border:1px solid transparent; cursor:pointer; }
.sns svg{ flex:none; }
.sns-naver{ background:#03C75A; color:#fff; }
.sns-kakao{ background:#FEE500; color:#191919; }
.sns-google{ background:#fff; color:#1F1F1F; border-color:#DADCE0; }
.sns:hover{ filter:brightness(.97); }

.mb-review{ margin-top:16px; border-top:1px solid var(--line); padding-top:12px; font-size:13px; color:var(--text-dim); }
.mb-review summary{ cursor:pointer; }
.mb-review form{ margin-top:12px; }

/* 폼 */
.mb-field{ margin-bottom:14px; }
.mb-field label{ display:block; font-size:13px; color:var(--text-dim); font-weight:500; margin-bottom:5px; }
.mb-field input{ width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:15px; background:#fff; color:var(--text); }
.mb-field input:focus{ outline:none; border-color:var(--accent); }
.mb-agree{ border:1px solid var(--line); border-radius:8px; padding:6px 14px; margin:18px 0; }
.mb-agree label{ display:flex; gap:8px; align-items:flex-start; padding:10px 0; font-size:14px; line-height:1.5; cursor:pointer; border-bottom:1px solid var(--line); }
.mb-agree label:last-of-type{ border-bottom:0; }
.mb-agree label.all{ font-weight:800; }
.mb-agree input{ width:auto; flex:none; margin:3px 0 0; accent-color:var(--accent); }
.mb-agree a{ color:var(--text-dim); text-decoration:underline; margin-left:auto; white-space:nowrap; font-size:13px; }
.mb-agree .req{ color:var(--accent); font-weight:700; }
.mb-table{ width:100%; border-collapse:collapse; font-size:12.5px; color:var(--text-dim); margin:4px 0 10px; }
.mb-table th, .mb-table td{ border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
.mb-table th{ background:var(--surface); font-weight:600; }
.mb-btn{ width:100%; padding:14px; font-size:16px; }
.mb-btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* 마이페이지 */
.mb-tabs{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.mb-tabs button{ padding:9px 16px; border-radius:20px; border:1px solid var(--line); background:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; color:var(--text); }
.mb-tabs button.on{ background:var(--text); color:#fff; border-color:var(--text); }
.mb-list{ list-style:none; margin:0; padding:0; }
.mb-list li{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.mb-list li:last-child{ border-bottom:0; }
.mb-list b{ font-size:15px; }
.mb-list small{ display:block; color:var(--text-dim); font-size:12.5px; margin-top:3px; line-height:1.5; }
.mb-list .price{ font-weight:800; white-space:nowrap; }
.mb-acts{ display:flex; gap:6px; flex-wrap:wrap; }
.mini{ font-size:12.5px; padding:6px 10px; border:1px solid var(--line); border-radius:4px; background:#fff; cursor:pointer; color:var(--text); font:inherit; font-size:12.5px; }
.mini:hover{ border-color:var(--accent); color:var(--accent); }
.mini.pri{ background:var(--accent); border-color:var(--accent); color:#fff; }
.st{ display:inline-block; font-size:11.5px; font-weight:700; border-radius:3px; padding:2px 7px; }
.st.pending{ background:#FFF4E5; color:#B54708; } .st.paid{ background:#E8F5EE; color:#1A7F4B; }
.st.expired,.st.cancelled{ background:var(--surface); color:var(--metal); } .st.refunded{ background:#FDECEC; color:#B42318; }
.mb-empty{ color:var(--text-dim); font-size:14px; padding:18px 0; }
.mb-toggle{ display:flex; gap:8px; align-items:center; font-size:14px; margin:6px 0 16px; }
.mb-toggle input{ width:auto; accent-color:var(--accent); }
.mb-links{ display:flex; gap:14px; font-size:13px; color:var(--text-dim); margin-top:10px; }
.mb-links button{ background:none; border:0; padding:0; color:var(--text-dim); text-decoration:underline; cursor:pointer; font:inherit; font-size:13px; }

/* MIXX 적립금 */
.mx-card{ display:grid; grid-template-columns:1fr 1fr; gap:12px; background:var(--navy, #1B2430); color:#fff; border-radius:8px; padding:16px 18px; margin:0 0 18px; }
.mx-card > div{ display:flex; flex-direction:column; gap:2px; }
.mx-k{ font-size:12px; color:#C7CDD5; font-weight:600; }
.mx-card strong{ font-size:24px; font-weight:800; line-height:1.2; }
.mx-u{ font-size:12px; color:#FFB08A; font-weight:700; }
.mx-card small{ font-size:12px; color:#C7CDD5; }
.mx-note{ grid-column:1 / -1; margin:0; font-size:12.5px; color:#FFB08A; }
.mx-note:empty{ display:none; }
.mx-plus{ color:#1A7F4B; font-weight:800; white-space:nowrap; } .mx-minus{ color:#B42318; font-weight:800; white-space:nowrap; }
.mx-rules{ font-size:13px; color:var(--text-dim); line-height:1.7; padding-left:18px; margin:6px 0 0; }
.mx-rules a{ color:var(--accent); }
.mb-table tr.on td{ background:#FFF4E5; font-weight:700; color:var(--text); }

/* 약관 */
.mb-doc h1{ font-size:24px; }
.mb-doc h2{ font-size:16px; margin:26px 0 8px; }
.mb-doc p, .mb-doc li{ font-size:14px; line-height:1.75; color:var(--text); }
.mb-doc ul, .mb-doc ol{ padding-left:20px; }
.mb-doc ul{ list-style:disc; } .mb-doc ol{ list-style:decimal; }
.mb-doc .mb-table{ font-size:13px; color:var(--text); }
.mb-foot{ max-width:880px; margin:0 auto 40px; padding:0 16px; font-size:12px; color:var(--metal); line-height:1.7; }
.mb-foot a{ color:var(--metal); text-decoration:underline; }