:root{
  --bg:#fff;
  --text:#0f172a;        /* neutral-900 */
  --muted:#475569;       /* slate-600 */
  --line:#e5e7eb;        /* neutral-200 */
  --soft:#f8fafc;        /* slate-50 */
  --accent:#0ea5e9;      /* sky-500 (절제된 포인트) */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --line:#233041;
    --soft:#0f1720;
    --accent:#38bdf8;
  }
}
*{box-sizing:border-box}
body{background:var(--bg)}
.mbm-wrap{max-width:760px;margin:28px auto;padding:0 16px;color:var(--text);font:400 15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Apple SD Gothic Neo,Noto Sans KR,sans-serif}

.mbm-head{padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.mbm-head h1{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:.1px}
.mbm-head p{margin:0;color:var(--muted)}

.mbm-card{margin-top:16px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}

.mbm-progress{height:4px;border-radius:999px;background:#f1f5f9;border:1px solid var(--line);overflow:hidden}
.mbm-progress>span{display:block;height:100%;width:0;background:var(--accent)}

.mbm-q{padding:14px 0;border-bottom:1px solid var(--line)}
.mbm-q:last-child{border-bottom:0}
.mbm-q h4{margin:0 0 8px;font-size:16px;font-weight:600}
.mbm-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:640px){ .mbm-choices{grid-template-columns:1fr} }

.mbm-opt{position:relative}
.mbm-opt input{position:absolute;inset:0;opacity:0}
.mbm-opt label{
  display:block;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);cursor:pointer;user-select:none
}
.mbm-opt input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.mbm-opt input:checked+label{border-color:var(--accent);background:rgba(14,165,233,.06)}

.mbm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.mbm-btn{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--text);
  padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer}
.mbm-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.mbm-btn:disabled{opacity:.5;cursor:not-allowed}

.mbm-result{margin-top:16px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.mbm-result h3{margin:0 0 8px;font-size:18px;font-weight:700}
.mbm-badges{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.mbm-badge{padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-weight:600;background:var(--soft)}
.mbm-guides a{display:inline-block;margin:8px 10px 0 0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text)}
.mbm-detail{margin-top:8px;color:var(--muted);font-size:13px}
.mbm-footer{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:left} /* 좌측 정렬 */


/* 라벨이 hover/클릭을 받게 하고, 손 모양 표시 */
.mbm-opt { position: relative; }
.mbm-opt label {
  cursor: pointer; /* 손 모양 */
}

/* 투명 input이 라벨 위를 덮지 않도록 이벤트 차단 */
.mbm-opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;  /* 핵심: 마우스 이벤트는 라벨로! */
}

/* 시각 피드백(선택/호버) */
.mbm-opt input:checked + label {
  border-color: var(--accent);
  background: rgba(14,165,233,.06);
}
.mbm-opt label:hover {
  border-color: var(--accent);
}