.mc-layer-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:9998; display:none;
  pointer-events:auto;        /* 배경 클릭 막기 */
}
.mc-layer{
  position:fixed; inset:0;
  display:none; z-index:9999;
  padding:0;           /* 중앙 정렬에 간섭하지 않도록 0 */
  overflow:hidden;     /* 배경은 스크롤 막고, 카드는 자체 스크롤 */
  pointer-events:none; /* 카드 외 영역 클릭 방지 */
}
/* 카드: 뷰포트 정중앙 고정 */
.mc-card{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto;

  width:min(520px, 92vw);
  max-height:90vh;     /* 작은 화면에서도 안 넘치도록 */
  overflow:auto;

  background:#1e1f26; color:#fff;
  border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column;
  will-change:transform;  /* 모바일 렌더링 최적화 */
}
.mc-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#2a2c36}
.mc-title{font-weight:700;font-size:16px}
.mc-close{background:transparent;border:0;color:#cbd5e1;font-size:20px;cursor:pointer;line-height:1;padding:4px}
.mc-body{padding:16px; overflow:auto}
.mc-desc{font-size:13px;color:#cbd5e1;margin-bottom:12px;line-height:1.5}
.mc-row{display:flex;gap:10px;flex-wrap:wrap}
.mc-half{flex:1 1 0;min-width:220px}
.mc-input{width:100%;padding:11px 12px;border:1px solid #3b4158;background:#12131a;color:#e5e7eb;border-radius:10px;outline:none}
.mc-input:focus{border-color:#4f9cff;box-shadow:0 0 0 3px rgba(79,156,255,.2)}
.mc-label{display:block;font-size:12px;margin:10px 0 6px;color:#e2e8f0}
.mc-actions{margin-top:16px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.mc-btn{border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.mc-btn.secondary{background:#2a2c36;color:#e2e8f0}
.mc-btn.primary{background:#4f46e5;color:#fff}
.mc-msg{margin-top:10px;font-size:13px;display:none}
.mc-msg.error{color:#fca5a5}
.mc-msg.ok{color:#86efac}
body.mc-noscroll{overflow:hidden;touch-action:none}

/* ===== 모바일 최적화 ===== */
@media (max-width: 420px){
  .mc-card{width:94vw;border-radius:12px}
  .mc-head{padding:12px 14px}
  .mc-body{padding:14px}
  .mc-half{min-width:unset;flex:1 1 100%}
  .mc-row > div:last-child{flex:0 0 100%}
  .mc-btn.primary, .mc-btn.secondary{width:100%}
}