/* ============================================================
   CALOBYE 공통 모달 (cb_modal)
   - 기존 alert()/confirm() 을 대체하는 사이트 통일 모달
   - 의존성 없음(순수 CSS/JS). 브랜드 핑크 계열.
   ============================================================ */

html.cbm-lock, body.cbm-lock { overflow: hidden !important; }

#cbModalRoot { position: relative; z-index: 2147483000; }

.cbm-overlay{
  position: fixed; inset: 0;
  background: rgba(20,18,24,.52);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2147483000;
  padding: 20px;
  animation: cbm-fade .16s ease-out;
}
@keyframes cbm-fade { from{opacity:0} to{opacity:1} }

:root{ --cbm-width: 340px; }   /* 전역 기본 폭 — 여기만 바꾸면 전체 기본값이 바뀐다 */

.cbm-card{
  width: 100%; max-width: var(--cbm-width);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  padding: 26px 22px 18px;
  text-align: center;
  font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  animation: cbm-pop .18s cubic-bezier(.16,1,.3,1);
  box-sizing: border-box;
}
@keyframes cbm-pop { from{opacity:0; transform: translateY(10px) scale(.96)} to{opacity:1; transform:none} }

.cbm-logo{ margin-bottom: 16px; }
.cbm-logo img{ height: 22px; width:auto; object-fit: contain; }

.cbm-img{ margin: 4px 0 14px; }
.cbm-img img{ max-width: 100%; border-radius: 10px; display:block; margin:0 auto; }

.cbm-title{
  font-size: 16px; font-weight: 700; color:#222;
  margin-bottom: 8px; line-height:1.4; word-break: keep-all;
}
.cbm-msg{
  font-size: 14.5px; color:#444; line-height:1.6;
  margin-bottom: 20px; word-break: keep-all;
}

.cbm-btns{ display:flex; gap: 8px; }
.cbm-btn{
  flex:1; min-height: 46px;
  border:0; border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor:pointer;
  font-family: inherit;
  transition: background .15s, transform .05s;
}
.cbm-btn:active{ transform: scale(.98); }
.cbm-ok{ background:#e93b82; color:#fff; }
.cbm-ok:hover{ background:#cf316b; }
.cbm-ok:focus{ outline: 2px solid #f7a8c8; outline-offset: 2px; }
.cbm-cancel{ background:#f1f1f1; color:#565656; }
.cbm-cancel:hover{ background:#e4e4e4; }

/* 버튼 하나(확인만)일 때는 폭을 적당히 */
.cbm-btns.cbm-single .cbm-btn{ flex: 0 1 60%; margin: 0 auto; }

/* 크기 프리셋 — 호출 시 size:'sm'|'md'|'lg'|'xl' 로 선택 */
.cbm-card.cbm-sm{ max-width: 300px; }
.cbm-card.cbm-md{ max-width: 340px; }
.cbm-card.cbm-lg{ max-width: 460px; }
.cbm-card.cbm-xl{ max-width: 600px; }

@media (max-width: 360px){
  .cbm-card{ padding: 22px 16px 16px; border-radius: 14px; }
}