/* ───────────────────────────────────────────────
   공통: 모달·오버레이 기본
─────────────────────────────────────────────── */
.payment-modal,
#detailedPaymentModal,
.card-overlay,
.payment-screen {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1100;
}
.payment-modal.open,
#detailedPaymentModal.open,
.card-overlay:not(.hidden),
.payment-screen:not(.hidden) {display:flex;}

/* 내부 박스 공통 */
.payment-modal-box,
.modal-box,
.screen-box {
  background:#FFF;
  border-radius:16px;
  width:90vw; max-width:960px; max-height:90vh;
  padding:64px;
  overflow-y:auto;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  text-align:center;
}

.payment-modal-title,.modal-title{
  margin:0 0 24px;
  font-size:2.6rem;
  font-weight:900;
  color:none;
}

/* ── 초기 2-버튼 (플랫 & 단조로운 스타일) */
.payment-modal .two-btns{
  display:flex;
  justify-content:space-evenly;
  gap:20px;                 /* 여백을 조금 더 자연스럽게 */
  margin-bottom:40px;
  width:100%;
}

#chooseMethodBtn,
#directCashBtn{
  flex:1 1 auto;            /* 버튼이 자연스럽게 늘어나도록 */
  padding:1.2em 0;
  border:4px solid none; /* 3-옵션과 동일한 테두리 톤 */
  border-radius:14px;
  background:none;       /* 그라디언트 제거, 플랫 배경 */
  color:none;            /*3-옵션 아이콘 컬러와 통일 */
  font-family:roboto, sans-serif;
  font-weight:700;
  font-size:1.8rem;
  line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  cursor:pointer;
  transition:.2s;
}

/* 너비 비율 유지 */
#chooseMethodBtn{flex:0 1 57%;}
#directCashBtn{flex:0 1 24%;}

/* Hover & Active */
#chooseMethodBtn:hover:not(:disabled),
#directCashBtn:hover:not(:disabled){
  background:none;       /* 3-옵션과 동일한 hover 배경 */
  border-color:none;
  color:none;       /* 그라디언트 제거, 플랫 배경 */
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  transform:translateY(-3px);
}


/* ── 상세 3-옵션 */
#detailedPaymentModal .three-btns{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin:24px 0 56px;}
.detailed-option{
  flex:1 1 28%;min-width:140px;max-width:200px;padding:.75em .5em;margin:0 12px;
  border:4px solid none;border-radius:14px;background:none;
  box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s;
}
.detailed-option i{font-size:5rem;margin-bottom:.25em;color:none;}
.detailed-option span{font-size:1.6rem;font-weight:700;text-align:center}
.detailed-option:hover:not(.selected){background:none;border-color:none;box-shadow:0 6px 16px rgba(0,0,0,.15);}
.detailed-option.selected{background:none;color:none;border-color:none;transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.25);}
.detailed-option.selected i{color:none;transform:translateY(-3px);}

/* 뒤로/확인 버튼 */
.payment-actions{display:flex; justify-content: space-between; gap:16px;width:100%;margin-top:16px;}
.payment-actions .btn{
  flex:1 1 0;padding:28px 0;font-size:2.2rem;font-weight:800;
  border:none;border-radius:12px;cursor:pointer;
  transition:.1s transform,.2s background-color;box-shadow:0 4px 8px rgba(0,0,0,.25);
}
.payment-actions .btn.back{background:none;color:#fff;}
.payment-actions .btn.confirm{background:none;color:#fff;}
.payment-actions .btn:disabled{opacity:.4;cursor:not-allowed;}
.payment-actions .btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.2);}

/* ── 공통 오버레이(세로 배치) */
/* 플렉스 컨테이너 자체를 가운데 정렬 */
.card-overlay,
.payment-screen{
  display:flex;            /* 혹시 빠져있다면 명시 */
  flex-direction:column;
  gap:2rem;
  align-items:center;      /* ← 수평 중앙 */
  justify-content:center;  /* ← 수직 중앙(원할 때) */
}

/* 타이머 래퍼를 블록+가운데 */
.card-timer-svg{
  width:320px;
  height:320px;
  margin:0 auto;           /* ← 블록 가운데 */
  display:block;           /* ← inline 요소 여백 영향 제거 */
  text-align:center;       /* (옵션) */
}

/* SVG 자체도 블록으로 */
.card-timer-svg svg{
  display:block;
}

.timer-bg{stroke:#555;stroke-width:14;opacity:.15;}
.timer-circle{stroke:#00E5FF;stroke-width:14;fill:none;}
#timerText{font-size:2.8rem;font-weight:700;fill:#fff;}


/* 카드 안내 */
.card-insert {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.card-insert p{color:#fff;font-weight:700;font-size:2.2rem;text-align: center; margin-top: 32px;}
.card-icon{width:640px;}

/* 중단 버튼 */
.btn.cancel-overlay{
  background:none;color:#fff;
  width: 320px; padding:28px 0;font-size:2.2rem;font-weight:800;
  border:none;border-radius:12px;cursor:pointer;
  transition:.1s transform,.2s background-color;box-shadow:0 4px 8px rgba(0,0,0,.25);
}
.btn.cancel-overlay:hover{box-shadow:0 6px 14px rgba(0,0,0,.35);}

/* ‘닫기’ 버튼 (오버레이 내부) */
.payment-screen .screen-box .btn{margin-top:2rem;padding:1.2rem 2.5rem;border-radius:12px;background:none;color:#fff;font:700 1.6rem/1 roboto;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:.2s;}
.payment-screen .screen-box .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3);}

/* 카드 삽입 화살표 */
.card-arrow{
  position:absolute;bottom:1.5rem;left:var(--arrow-left,90%);transform:translateX(-50%);
  font-size:5rem;color:#fff;animation:arrow-bounce 1.2s infinite;
}
@keyframes arrow-bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(.6rem);}}

/* 현금 안내 텍스트 */
.cash-msg{margin-top:.8rem;font-size:1.8rem;line-height:1.6;text-align:center;word-break:keep-all;}

.cash-msg-sub{font-weight: 700; margin-top:.5rem;font-size:1.4rem;line-height:1.6;text-align:center;word-break:keep-all;}

/* 낮은 화면(≤70%) 스케일 */
@media(max-height:1344px){.payment-modal-box,.modal-box,.screen-box{transform:scale(.9);}}

/* 타이머가 화면 중앙 외에 들어갔을 때 여백 조정 */
.payment-screen .card-timer-svg{margin-bottom:1rem;}