@charset "utf-8";
/* =========================================================
   계약 고객 특별혜택 팝업 (2026-07 · 자체 제작 이미지)
   - 클래스 prefix 'gm' : 사이트 기존 rm-pop 팝업 시스템과 충돌 방지.
   - popup_card.jpg (2x 고해상). PC 중앙 300px / 모바일 중앙 200px(≈절반).
   ========================================================= */
.gm{
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}
.gm[hidden]{ display: none !important; }

.gm__dim{
  position: absolute; inset: 0;
  background: rgba(0,20,25,.66);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

.gm__box{
  position: relative; z-index: 1;
  width: 360px; max-width: 90vw;
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
  animation: gmIn .42s cubic-bezier(.22,.61,.36,1);
  font-family: 'Pretendard', 'SUIT', sans-serif;
}
@keyframes gmIn{
  from{ opacity: 0; transform: translateY(22px) scale(.97); }
  to  { opacity: 1; transform: none; }
}

/* 박스를 감싸 선물상자가 밖으로 튀어나오게 하는 무대 */
.gm__stage{ position: relative; }

/* 팝업 카드 위에 둥둥 떠 있는 선물상자 2개
   - %좌표라 PC(360px)·모바일(225px)에서 자동 스케일.
   - pointer-events:none → 클릭은 아래 링크(gm__img)로 통과. */
.gm__gift{
  position: absolute; z-index: 5; height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.28));
}
/* 빨간 상자 : 좌상단 코너 (실사, 참조 배치) */
.gm__gift--red{
  left: 5%; top: 11.5%; width: 20.5%;
  animation: gmFloatRed 2.6s ease-in-out infinite;
}
/* 남색 상자 : 배지 우측 위 (실사, 참조 배치) */
.gm__gift--teal{
  left: 73.5%; top: 13.5%; width: 13.5%;
  animation: gmFloatTeal 3s ease-in-out infinite;
}
@keyframes gmFloatRed{
  0%,100%{ transform: translateY(0) rotate(-5deg); }
  50%    { transform: translateY(-7px) rotate(-5deg); }
}
@keyframes gmFloatTeal{
  0%,100%{ transform: translateY(0) rotate(6deg); }
  50%    { transform: translateY(-6px) rotate(6deg); }
}

.gm__img{ display: block; line-height: 0; }
.gm__img img{ width: 100%; height: auto; display: block; }

/* 우측 상단 닫기 (✕) */
.gm__x{
  position: absolute; top: 9px; right: 11px; z-index: 3;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,50,61,.42); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.gm__x:hover{ background: rgba(0,50,61,.66); }

/* 하단 바 (오늘 하루 보지 않기) */
.gm__bar{
  display: flex; align-items: center; justify-content: center;
  padding: 11px 16px; background: #f2f5f6;
  border-top: 1px solid #e4ebec;
}
.gm__today{
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; padding: 6px 8px;
  color: #7c8c92; font-weight: 500;
}
.gm__today:hover{ color: #00323d; }

/* ---------- 모바일: 절반 크기 · 중앙 ---------- */
@media (max-width: 768px){
  .gm{ padding: 16px; }
  .gm__box{ width: 225px; max-width: 64vw; }
  .gm__today{ font-size: 11px; }
  .gm__x{ width: 24px; height: 24px; font-size: 15px; top: 7px; right: 8px; }
}
@media (prefers-reduced-motion: reduce){
  .gm__box{ animation: none; }
}