/* ==========================================================================
   CROWNNA · assets/css/premium-modal.css

   프리미엄 멤버십 신청 모달 전용 스타일.
   index.html · membership.html · mypage.html 세 곳에서 같은 폼을 띄우므로,
   페이지마다 다른 팔레트(index=퍼플변수 / membership=브라운·골드 / mypage=자체)에
   영향을 받지 않도록 색상을 변수 없이 직접 적어 두었습니다.

   클래스는 전부 .cpm- 접두사를 씁니다.
   페이지에 이미 있는 .modal / .field / .input / .err 등과 절대 겹치지 않게 하기 위함입니다.
   ========================================================================== */

.cpm-ov{
  position:fixed;inset:0;z-index:1200;display:none;
  align-items:center;justify-content:center;padding:20px;overflow-y:auto;
  background:rgba(27,22,52,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  font-family:'Pretendard','Pretendard Variable','Apple SD Gothic Neo',-apple-system,sans-serif;
  color:#1E1A2B;
}
.cpm-ov.on{display:flex}
.cpm-ov *{box-sizing:border-box}
/* ⚠ 이 리셋은 특이도가 (0,1,1) 이라, 아래 버튼 클래스(.cpm-btn-primary 등, (0,1,0))보다
   우선한다. 그래서 색을 지정하는 버튼 규칙에는 .cpm-ov 를 붙여 특이도를 (0,2,0) 으로 올린다.
   붙이지 않으면 배경이 사라져 흰 글자만 남고 버튼이 보이지 않는다. */
.cpm-ov button{font-family:inherit;border:none;background:none;cursor:pointer}

.cpm-box{
  background:#fff;border-radius:20px;width:100%;max-width:480px;margin:auto;
  overflow:hidden;box-shadow:0 24px 60px rgba(27,22,52,.32);
  animation:cpmPop .22s ease;text-align:left;
}
@keyframes cpmPop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.cpm-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 0}
.cpm-t{font-size:18px;font-weight:800;letter-spacing:-.025em;margin:0;color:#1E1A2B}
.cpm-x{
  width:32px;height:32px;border-radius:9px;color:#B3AFC4;
  display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .2s;
}
.cpm-x:hover{background:#F5F4FF;color:#6C63FF}
.cpm-b{padding:18px 24px 24px;max-height:calc(100vh - 150px);overflow-y:auto}

.cpm-note{
  display:flex;gap:9px;background:#F5F4FF;border:1px solid #EEEDFF;
  border-radius:12px;padding:14px 16px;font-size:12.5px;color:#413C52;
  line-height:1.7;margin-bottom:16px;
}
.cpm-note i{color:#6C63FF;margin-top:3px;flex-shrink:0;font-size:11px}
.cpm-note b{color:#4B3BFF}

/* ── 이용권 기간 선택 카드 ─────────────────────────────────────────────────
   3장을 가로로 놓는다. 좁은 화면에서는 아래 @media 에서 세로로 바뀐다.
   배지(가장 인기 · 최대 할인)가 카드 위쪽에 걸치므로 위 여백을 넉넉히 둔다. */
.cpm-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:6px 0 14px}
.cpm-ov .cpm-plan{
  position:relative;display:block;width:100%;text-align:center;
  border:1px solid #EBE8F2;border-radius:14px;padding:19px 6px 13px;
  background:#fff;cursor:pointer;transition:all .18s;
}
.cpm-plan:hover{border-color:#B3AEFF}
/* ⚠ span 은 기본이 inline 이라 이 선언이 없으면 세 줄이 한 줄로 이어 붙는다
   ('1개월33,000원VAT 포함'). 모바일에서는 부모가 flex 라 이 값이 무시된다. */
.cpm-plan-m,.cpm-plan-p,.cpm-plan-d,.cpm-plan-v{display:block}
.cpm-plan-m{font-size:13px;font-weight:800;color:#413C52;letter-spacing:-.02em}
.cpm-plan-p{font-size:14.5px;font-weight:800;color:#1E1A2B;margin-top:5px;letter-spacing:-.03em;
            font-variant-numeric:tabular-nums;white-space:nowrap}
.cpm-plan-d{font-size:10.5px;font-weight:700;color:#B0864A;margin-top:3px;min-height:14px;
            line-height:1.3}
.cpm-plan-v{font-size:10px;color:#B3AFC4;margin-top:2px}
.cpm-plan-b{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:#1E1A2B;color:#fff;font-size:9.5px;font-weight:800;
  padding:3px 8px;border-radius:999px;white-space:nowrap;letter-spacing:-.02em;
}
.cpm-plan-c{
  position:absolute;top:7px;right:7px;width:15px;height:15px;border-radius:50%;
  border:1.5px solid #D8D4E4;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:8.5px;transition:all .18s;
}
.cpm-plan.on{border-color:#6C63FF;background:#F5F4FF;box-shadow:0 0 0 3px rgba(108,99,255,.12)}
.cpm-plan.on .cpm-plan-m,
.cpm-plan.on .cpm-plan-p{color:#4B3BFF}
.cpm-plan.on .cpm-plan-c{background:#6C63FF;border-color:#6C63FF}
.cpm-plan.on .cpm-plan-b{background:#6C63FF}

.cpm-amt{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:15px 18px;background:#F6EEE0;border-radius:12px;margin-bottom:14px;
}
.cpm-amt-l{font-size:12.5px;font-weight:800;color:#B0864A}
.cpm-amt-v{font-size:21px;font-weight:800;color:#1E1A2B;letter-spacing:-.03em}
.cpm-amt-v small{font-size:12px;font-weight:600;color:#8A85A0;margin-left:4px}

.cpm-acct{
  background:linear-gradient(150deg,#6C63FF,#4B3BFF);
  border-radius:16px;padding:20px;color:#fff;margin-bottom:20px;
}
.cpm-acct-bank{font-size:12.5px;color:rgba(255,255,255,.75);font-weight:700}
.cpm-acct-no{
  font-size:23px;font-weight:800;margin:7px 0 5px;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.cpm-acct-owner{font-size:12.5px;color:rgba(255,255,255,.8)}
.cpm-ov .cpm-copy{
  margin-top:15px;width:100%;background:rgba(255,255,255,.18);color:#fff;
  padding:12px;border-radius:11px;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;
}
.cpm-copy:hover{background:rgba(255,255,255,.3)}
.cpm-copy.done{background:#fff;color:#4B3BFF}

.cpm-field{margin-bottom:16px}
.cpm-label{display:block;font-size:12px;font-weight:700;color:#413C52;margin-bottom:6px}
.cpm-label i{color:#E4576B;font-style:normal}
.cpm-input{
  width:100%;padding:11px 14px;
  border:1px solid #EBE8F2;border-radius:12px;
  background:#fff;font-size:13.5px;outline:none;transition:border-color .2s;
  font-family:inherit;color:#1E1A2B;
}
.cpm-input:focus{border-color:#8079FF}
.cpm-input::placeholder{color:#B3AFC4}
.cpm-input.bad{border-color:#E4576B}

.cpm-radio-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cpm-radio{
  display:flex;align-items:center;gap:10px;
  border:1px solid #EBE8F2;border-radius:12px;padding:13px 14px;
  font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;
}
.cpm-radio:hover{border-color:#B3AEFF}
.cpm-radio input{display:none}
.cpm-radio .dot{
  width:17px;height:17px;border-radius:50%;border:1.5px solid #B3AFC4;
  flex-shrink:0;position:relative;transition:border-color .18s;
}
.cpm-radio.on{border-color:#6C63FF;background:#F5F4FF;color:#4B3BFF}
.cpm-radio.on .dot{border-color:#6C63FF}
.cpm-radio.on .dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#6C63FF}

.cpm-chk{
  display:flex;align-items:center;gap:11px;
  border:1px solid #EBE8F2;border-radius:12px;padding:14px 16px;
  font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;margin:18px 0 4px;
}
.cpm-chk:hover{border-color:#B3AEFF}
.cpm-chk input{display:none}
.cpm-chk .box{
  width:19px;height:19px;border-radius:6px;border:1.5px solid #B3AFC4;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:10px;transition:all .18s;
}
.cpm-chk.on{border-color:#6C63FF;background:#F5F4FF;color:#4B3BFF}
.cpm-chk.on .box{background:#6C63FF;border-color:#6C63FF}

.cpm-err{font-size:11.5px;color:#E4576B;font-weight:700;margin-top:6px;display:none}
.cpm-err.on{display:block}
.cpm-cond{display:none;margin-top:12px}
.cpm-cond.on{display:block}

.cpm-hint{font-size:11.5px;color:#8A85A0;line-height:1.65;margin:9px 0 0}

.cpm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:999px;
  font-size:13.5px;font-weight:700;transition:background .2s,color .2s,border-color .2s;
  text-decoration:none;
}
.cpm-ov .cpm-btn-primary{background:#6C63FF;color:#fff}
.cpm-btn-primary:hover{background:#4B3BFF}
.cpm-btn-primary:disabled{background:#B3AEFF;cursor:default}
.cpm-ov .cpm-btn-ghost{background:#fff;border:1px solid #EBE8F2;color:#413C52}
.cpm-btn-ghost:hover{border-color:#B3AEFF;color:#6C63FF}
.cpm-btn-block{width:100%}
.cpm-submit{width:100%;padding:15px;font-size:14.5px;margin-top:14px}

.cpm-done-wrap{text-align:center;padding:14px 0 6px}
.cpm-done-ic{
  width:64px;height:64px;margin:0 auto 18px;border-radius:20px;
  background:#DEF3EA;color:#2FA37A;
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.cpm-done-ic.wait{background:#FDE7CF;color:#9A6220}
.cpm-done-h{font-size:18px;font-weight:800;margin-bottom:10px;letter-spacing:-.02em}
.cpm-done-p{font-size:13.5px;color:#8A85A0;line-height:1.75;margin-bottom:20px}
.cpm-meta{background:#F5F4FF;border-radius:12px;padding:16px 18px;text-align:left;margin-bottom:20px}
.cpm-meta div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:5px 0}
.cpm-meta span:first-child{color:#8A85A0;flex-shrink:0}
.cpm-meta span:last-child{font-weight:700;text-align:right}

@media (max-width:480px){
  .cpm-ov{padding:12px}
  .cpm-b{padding:16px 18px 20px;max-height:calc(100vh - 110px)}
  .cpm-head{padding:18px 18px 0}
  .cpm-acct-no{font-size:20px}
  .cpm-radio-row{grid-template-columns:1fr}

  /* 카드 3장이 가로로 들어가면 글자가 눌린다. 세로로 쌓고 내용은 좌우로 편다. */
  /* 배지가 카드 위쪽으로 걸치므로 간격을 넉넉히 둔다 — 좁으면 위 카드를 침범한다 */
  .cpm-plans{grid-template-columns:1fr;gap:14px;margin-top:16px}
  .cpm-ov .cpm-plan{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    text-align:left;padding:13px 40px 13px 14px;
  }
  .cpm-plan-p{margin-top:0;font-size:14.5px}
  .cpm-plan-d{margin-top:0}
  .cpm-plan-v{display:none}
  .cpm-plan-b{left:auto;right:44px;transform:none}
  .cpm-plan-c{top:50%;margin-top:-8.5px}
}