/*! ChewGumi Popup Typography v1 · MedIT
 *  팝업·모달·서랍의 글자 크기를 화면 폭에 맞춰 자동 조정합니다.
 *  clamp(최소, 화면비례, 최대) 방식이라 기기마다 자연스럽게 맞습니다.
 */

:root{
  /* 팝업 전용 글자 단계 — 화면 폭에 따라 부드럽게 변합니다 */
  --pop-xs: clamp(11px, 2.8vw, 12.5px);
  --pop-sm: clamp(12px, 3.2vw, 13.5px);
  --pop-md: clamp(13px, 3.6vw, 15px);
  --pop-lg: clamp(15px, 4.2vw, 17px);
  --pop-xl: clamp(17px, 5vw, 21px);
  --pop-2xl:clamp(19px, 5.6vw, 25px);
  /* 팝업 여백 */
  --pop-pad: clamp(18px, 5vw, 28px);
  --pop-gap: clamp(10px, 2.6vw, 16px);
}

/* ══ 공통 팝업 컨테이너 ══ */
.popup, .cartp, .drawer, .detail, .kko-box, .cgbot-win, .mo-b,
.bl-box, .bl-wrap, .modal, .sheet, .dlg{
  font-size: var(--pop-md);
  line-height: 1.7;
}

/* 제목 */
.popup h2, .popup h3, .cartp h2, .cartp h3, .kko-box h3, .mo-b h3,
.bl-box h2, .bl-box h3, .cgbot-win h3, .modal h2, .modal h3{
  font-size: var(--pop-xl) !important;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.popup h1, .detail h1, .bl-box h1{
  font-size: var(--pop-2xl) !important;
  line-height: 1.3;
}

/* 본문 */
.popup p, .cartp p, .kko-box p, .mo-b p,
.bl-box p, .modal p, .sheet p,
.popup li, .bl-box li{
  font-size: var(--pop-md);
  line-height: 1.85;
  word-break: keep-all;
}

/* 보조 설명 */
.popup .sub, .popup .hint, .popup .note, .popup .msg,
.cartp .sub,
.bl-box .sub, .bl-box .meta, .mo-b .msg, .kko-box .who{
  font-size: var(--pop-sm) !important;
  line-height: 1.75;
}

/* 아주 작은 글자 (날짜·라벨) */
.popup .date, .popup .tag, .popup .badge,
.bl-box .date, .bl-box .num,
.kko-box .kko-tabs button, .mo-b .diff{
  font-size: var(--pop-xs) !important;
}

/* 버튼 */
.popup button, .cartp button,
.kko-box button, .mo-b button, .bl-box button,
.modal button, .sheet button,
.popup .btn, .mo-b .btn{
  font-size: var(--pop-sm) !important;
  min-height: clamp(42px, 11vw, 50px);
  padding-left: clamp(16px, 4.5vw, 26px);
  padding-right: clamp(16px, 4.5vw, 26px);
}
.popup .mini, .mo-b .mini, .bl-box .mini{
  font-size: var(--pop-xs) !important;
  min-height: clamp(34px, 9vw, 40px);
}

/* 입력칸 */
.popup input, .popup select, .popup textarea,
.mo-b input, .mo-b select, .mo-b textarea,
.kko-box textarea, .bl-box input, .bl-box textarea{
  font-size: max(16px, var(--pop-md)) !important;  /* 16px 미만이면 iOS가 확대함 */
  min-height: clamp(44px, 11.5vw, 52px);
}
.popup textarea, .mo-b textarea, .kko-box textarea{
  min-height: clamp(80px, 22vw, 140px);
  line-height: 1.75;
}

/* 여백 */
.popup, .cartp, .kko-box, .mo-b, .bl-box, .modal{
  padding: var(--pop-pad);
}

/* ══ 화면별 크기 ══ */
@media (max-width:640px){
  /* ── 모바일 팝업 = 바텀시트 ──
     화면을 가득 덮지 않고 아래 60~72%만 차지합니다.
     뒤 화면이 보이면 "갇힌 느낌"이 줄어듭니다. */
  .cartp, .kko-box, .mo-b, .bl-box, .modal{
    max-width: 100% !important;
    width: 100% !important;
    max-height: 72vh !important;
    border-radius: 24px 24px 0 0 !important;
    padding-top: 26px !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.14) !important;
    animation: cgUp .26s cubic-bezier(.2,.8,.3,1);
  }
  /* 쿠폰·안내 팝업은 가운데 카드형 유지 */
  .popup{
    width: min(calc(100vw - 40px), 400px) !important;
    max-height: min(86dvh, 640px) !important;
    border-radius: 24px !important;
    animation: cgPop .24s cubic-bezier(.2,.8,.3,1);
  }
  .popup-dim{ align-items: center !important; padding: 20px !important; }
  /* 위에 손잡이 표시 — 내려서 닫을 수 있다는 신호 */
  .cartp::before,
  .kko-box::before, .mo-b::before, .bl-box::before, .modal::before{
    content:''; position:absolute; top:9px; left:50%;
    width:38px; height:4px; margin-left:-19px; border-radius:99px;
    background:rgba(0,0,0,.16); pointer-events:none;
  }
  /* 배경을 덜 어둡게 — 뒤가 보이도록 */
  .mo, .pop-bg, .bl-bg, .kko-pop{
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(20,10,14,.32) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    animation: cgFade .2s ease;
  }
  /* 내용이 길면 그 안에서만 스크롤 */
  .cartp, .bl-box, .modal{
    overscroll-behavior: contain;
  }
}
@keyframes cgUp{ from{transform:translateY(14%);opacity:.6} to{transform:none;opacity:1} }
@keyframes cgFade{ from{opacity:0} to{opacity:1} }

/* 짧은 알림은 팝업 대신 아래에 잠깐 뜨는 띠 */
.cg-toast{
  position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:3000;
  max-width:min(420px, calc(100vw - 32px));
  padding:14px 20px; border-radius:16px;
  font-size:13.5px; line-height:1.6; font-weight:600; text-align:center;
  color:#fff; background:rgba(28,16,22,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.24);
  animation:cgToast .28s cubic-bezier(.2,.8,.3,1);
  word-break:keep-all;
}
.cg-toast.ok{background:rgba(26,110,68,.96)}
.cg-toast.bad{background:rgba(168,32,66,.96)}
@keyframes cgToast{ from{opacity:0;transform:translateX(-50%) translateY(12px)}
  to{opacity:1;transform:translateX(-50%)} }
@media (max-width:640px){
  .cg-toast{bottom:calc(88px + env(safe-area-inset-bottom));font-size:13px}
}
@media (min-width:641px) and (max-width:1024px){
  /* 태블릿 — 가운데 적당한 크기 */
  .popup, .cartp, .kko-box, .mo-b, .bl-box, .modal{
    max-width: min(560px, 88vw) !important;
    max-height: 86vh;
  }
}
@media (min-width:1025px){
  /* PC */
  .popup, .cartp, .kko-box, .mo-b, .bl-box, .modal{
    max-width: min(600px, 70vw) !important;
    max-height: 84vh;
  }
}

/* 가로 모드 — 세로가 짧을 때 */
@media (max-height:560px) and (orientation:landscape){
  :root{ --pop-pad: 14px; --pop-xl: 17px; --pop-2xl: 19px; }
  .popup, .cartp, .kko-box, .mo-b, .bl-box, .modal{
    max-height: 92vh !important;
    border-radius: 18px !important;
  }
  .mo, .pop-bg, .bl-bg{ align-items: center !important; padding: 10px !important; }
}

/* 상담 챗봇 창 */
.cgbot-win{ font-size: var(--pop-sm); }
.cgbot-win .cgbot-msg, .cgbot-win .msg{ font-size: var(--pop-sm) !important; line-height: 1.8; }
.cgbot-win input, .cgbot-win textarea{ font-size: max(16px, var(--pop-sm)) !important; }
@media (max-width:640px){
  .cgbot-win{ width: calc(100vw - 20px) !important; right: 10px !important;
    max-height: 76vh !important; }
}

/* 스크롤 영역 */
.popup, .cartp, .kko-box, .mo-b, .bl-box, .modal{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 접근성 — 확대 설정 존중 */
@media (prefers-reduced-motion:reduce){
  .popup, .cartp, .modal{ transition: none !important; }
}

@keyframes cgPop{ from{transform:scale(.94);opacity:0} to{transform:none;opacity:1} }

/* 팝업 표시 — 페이지는 .hide 로 숨김을 제어합니다.
   여기서 기본값을 none 으로 두면 팝업이 영영 안 뜹니다. */
.popup-dim.hide{ display:none !important }

/* 팝업으로 뜨는 상세만 대상 — 배경(dim) 안에 있을 때 */
.pop-bg .detail, .mo .detail, .popup-dim .detail{
  max-width: min(600px, 92vw) !important;
  max-height: 84vh !important;
  overflow-y: auto;
  padding: var(--pop-pad);
}
@media (max-width:640px){
  .pop-bg .detail, .mo .detail, .popup-dim .detail{
    max-width: 100% !important; width: 100% !important;
    max-height: 72vh !important;
    border-radius: 24px 24px 0 0 !important;
  }
}