/* =========================================================
   상품권 매입률 카드 -> 교환하기 버튼 + 현금교환 팝업 v1
   ========================================================= */

.grate-card__exchange{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  height:38px;
  margin-top:10px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#2b86f4 0%,#0866e9 100%);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,103,224,.20);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.grate-card__exchange:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,103,224,.26);
}
.grate-card__exchange:active{
  transform:scale(.96);
  filter:brightness(.96);
}

/* 기존 '실시간 매입' 배지가 CSS pseudo로 존재하는 경우 숨김 */
.grate-card .grate-card__badge,
.grate-card [class*="realtime"],
.grate-card [class*="live-buy"]{
  display:none!important;
}

.gexchange-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.gexchange-modal.is-open{display:flex}
.gexchange-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(14,27,46,.58);
  backdrop-filter:blur(6px);
}
.gexchange-modal__panel{
  position:relative;
  z-index:2;
  width:min(760px,calc(100vw - 32px));
  max-height:min(860px,calc(100dvh - 32px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(217,226,238,.95);
  border-radius:28px;
  background:#fff;
  box-shadow:0 28px 80px rgba(21,42,72,.24);
}
.gexchange-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex:0 0 auto;
  padding:18px 20px;
  border-bottom:1px solid #e9eef5;
  background:#fff;
}
.gexchange-modal__product{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}
.gexchange-modal__icon{
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #e8edf4;
  border-radius:15px;
  background:#fff;
  box-shadow:0 6px 16px rgba(26,57,95,.08);
}
.gexchange-modal__icon img{
  width:82%;
  height:82%;
  object-fit:contain;
}
.gexchange-modal__product strong{
  display:block;
  color:#14283f;
  font-size:17px;
  font-weight:900;
  line-height:1.35;
}
.gexchange-modal__product span{
  display:block;
  margin-top:3px;
  color:#718096;
  font-size:12px;
  font-weight:700;
}
.gexchange-modal__close{
  appearance:none;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border:0;
  border-radius:50%;
  background:#f4f7fb;
  color:#24364d;
  font:300 30px/1 Arial,sans-serif;
  cursor:pointer;
}
.gexchange-modal__body{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:18px;
  -webkit-overflow-scrolling:touch;
}
.gexchange-modal__body .gapply-v3-card{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
}
.gexchange-modal__body .gapply-v3-card > h2{
  display:none!important;
}
body.gexchange-modal-open{
  overflow:hidden!important;
  touch-action:none;
}

/* 모바일 매입률 카드 */
@media(max-width:620px){
  .grate-card{
    padding-bottom:18px!important;
  }
  .grate-card__exchange{
    width:calc(100% - 24px);
    max-width:150px;
    height:42px;
    margin:12px auto 0;
    font-size:14px;
    border-radius:13px;
  }

  .gexchange-modal{
    align-items:flex-end;
    padding:0;
  }
  .gexchange-modal__panel{
    width:100%;
    max-height:92dvh;
    border:0;
    border-radius:26px 26px 0 0;
    box-shadow:0 -18px 50px rgba(18,37,62,.22);
  }
  .gexchange-modal__header{
    padding:14px 16px;
  }
  .gexchange-modal__icon{
    width:46px;
    height:46px;
    flex-basis:46px;
    border-radius:13px;
  }
  .gexchange-modal__product strong{
    font-size:16px;
  }
  .gexchange-modal__body{
    padding:12px 12px calc(18px + env(safe-area-inset-bottom));
  }

  /* 팝업 안 기존 폼을 모바일 한 열 구성으로 강제 */
  .gexchange-modal__body .gapply-v3-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .gexchange-modal__body .gapply-v3-label{
    padding-top:0!important;
  }
  .gexchange-modal__body .gapply-v3-products{
    max-height:168px;
    overflow:auto;
  }
  .gexchange-modal__body .gapply-v3-submit-wrap{
    position:sticky;
    bottom:-12px;
    z-index:5;
    padding:12px 0 4px;
    background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 30%);
  }
  .gexchange-modal__body .gapply-v3-submit-wrap button{
    width:100%!important;
    min-height:54px!important;
    border-radius:15px!important;
    font-size:16px!important;
  }
}

@media(max-width:390px){
  .grate-card__exchange{
    width:calc(100% - 18px);
    height:40px;
    font-size:13px;
  }
  .gexchange-modal__header{
    padding:12px 14px;
  }
  .gexchange-modal__body{
    padding:10px 10px calc(14px + env(safe-area-inset-bottom));
  }
}


/* =========================================================
   v1.1 - 메인에서 선택한 상품권 1개만 표시 + 수수료 배지
   ========================================================= */

/* 이미 메인에서 상품권을 선택했으므로 상품권 선택 리스트 숨김 */
.gexchange-modal__body .gapply-v3-single-product .gapply-v3-products,
.gexchange-modal__body .gapply-v3-single-product .gapply-v3-products + *,
.gexchange-modal__body .gapply-v3-single-product [class*="product-select-title"]{
  display:none!important;
}

/* 상품권 목록을 감싸는 행 자체가 남아 큰 여백을 만들 경우 정리 */
.gexchange-modal__body .gapply-v3-single-product .gapply-v3-row:has(.gapply-v3-products){
  display:none!important;
}

.gexchange-modal__product{
  flex:1 1 auto!important;
  min-width:0!important;
}

.gexchange-modal__product-copy{
  min-width:0;
  flex:1 1 auto;
}

.gexchange-modal__fee{
  flex:0 0 auto;
  min-width:88px;
  min-height:78px;
  margin-left:auto;
  padding:9px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #dbe9fb;
  border-radius:20px;
  background:
    linear-gradient(180deg,#f8fbff 0%,#edf6ff 100%);
  box-shadow:
    0 8px 22px rgba(28,101,204,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.gexchange-modal__fee-label{
  color:#6c7f96!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.02em;
}

.gexchange-modal__fee-value{
  display:block;
  margin-top:1px;
  color:#126ee8!important;
  font-size:25px!important;
  font-weight:950!important;
  line-height:1.05!important;
  letter-spacing:-.04em;
}

.gexchange-modal__rate-value{
  display:block;
  margin-top:4px;
  color:#8b9aad!important;
  font-size:9px!important;
  font-weight:800!important;
  white-space:nowrap;
}

/* 단일 상품권 폼은 상단 불필요한 여백 축소 */
.gexchange-modal__body .gapply-v3-single-product{
  padding-top:0!important;
}

@media(max-width:620px){
  .gexchange-modal__header{
    align-items:center!important;
  }

  .gexchange-modal__product{
    gap:10px!important;
  }

  .gexchange-modal__icon{
    width:48px!important;
    height:48px!important;
    flex-basis:48px!important;
  }

  .gexchange-modal__product strong{
    font-size:15px!important;
    line-height:1.32!important;
  }

  .gexchange-modal__product > div > span,
  .gexchange-modal__product-copy > span{
    font-size:11px!important;
  }

  .gexchange-modal__fee{
    min-width:72px;
    min-height:66px;
    padding:7px 9px;
    border-radius:17px;
  }

  .gexchange-modal__fee-value{
    font-size:21px!important;
  }

  .gexchange-modal__rate-value{
    font-size:8px!important;
  }

  .gexchange-modal__close{
    margin-left:4px;
  }
}

@media(max-width:390px){
  .gexchange-modal__fee{
    min-width:66px;
    min-height:62px;
    padding:6px 8px;
  }

  .gexchange-modal__fee-value{
    font-size:19px!important;
  }

  .gexchange-modal__product-copy > span{
    display:none!important;
  }
}


/* =========================================================
   v1.2 모바일 스크롤 복구
   - body의 touch-action:none 제거
   - 실제 스크롤 컨테이너는 .gexchange-modal__body 한 곳으로 고정
   - 내용이 늘어나도 하단 계좌/비밀번호/신청 버튼까지 스크롤
   ========================================================= */

body.gexchange-modal-open{
  overflow:hidden!important;
  touch-action:pan-y!important;
}

.gexchange-modal__panel{
  height:auto!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:hidden!important;
}

.gexchange-modal__body{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  touch-action:pan-y!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable;
}

/* OCR/문자 추출 이후 폼 높이가 늘어났을 때 마지막 항목이 가려지지 않도록 */
.gexchange-modal__body #giftApplyForm{
  min-height:min-content!important;
  padding-bottom:110px!important;
}

@media(max-width:620px){
  .gexchange-modal{
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  .gexchange-modal__panel{
    height:calc(100dvh - max(8px, env(safe-area-inset-top)))!important;
    max-height:calc(100dvh - max(8px, env(safe-area-inset-top)))!important;
    margin-top:max(8px, env(safe-area-inset-top))!important;
    border-radius:24px 24px 0 0!important;
    overflow:hidden!important;
  }

  .gexchange-modal__header{
    flex:0 0 auto!important;
  }

  .gexchange-modal__body{
    flex:1 1 0!important;
    height:0!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
  }

  .gexchange-modal__body #giftApplyForm{
    padding-bottom:130px!important;
  }

  /* sticky 신청버튼은 스크롤 영역 안에서만 고정 */
  .gexchange-modal__body .gapply-v3-submit-wrap{
    bottom:0!important;
  }
}


/* =========================================================
   v1.3 FINAL - 모바일 스크롤 완전 복구
   핵심:
   1) 팝업 패널을 정확히 100dvh flex column
   2) body만 스크롤
   3) 하단 신청버튼 sticky 제거 -> 폼 끝에서 자연스럽게 표시
   4) 마지막 입력칸까지 충분한 하단 여백
   ========================================================= */
@media(max-width:620px){

  html,
  body{
    overscroll-behavior:none!important;
  }

  body.gexchange-modal-open{
    overflow:hidden!important;
    position:static!important;
    height:auto!important;
    touch-action:auto!important;
  }

  .gexchange-modal{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    overflow:hidden!important;
    align-items:stretch!important;
    justify-content:flex-end!important;
  }

  .gexchange-modal__panel{
    position:relative!important;
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:24px 24px 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .gexchange-modal__header{
    position:relative!important;
    flex:0 0 auto!important;
    min-height:92px!important;
    z-index:20!important;
  }

  .gexchange-modal__body{
    position:relative!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    padding:
      12px
      12px
      calc(54px + env(safe-area-inset-bottom))
      !important;
  }

  .gexchange-modal__body #giftApplyForm{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:80px!important;
  }

  /* 내부 카드/섹션이 자체 overflow로 스크롤을 막지 않게 */
  .gexchange-modal__body .gapply-v3-card,
  .gexchange-modal__body .gapply-v3-row,
  .gexchange-modal__body [class*="section"],
  .gexchange-modal__body [class*="wrap"]{
    max-height:none!important;
  }

  /*
   * 가장 중요한 변경:
   * 신청버튼을 sticky로 고정하지 않고 폼 마지막에 자연스럽게 둡니다.
   * 따라서 총금액/수수료/계좌/비밀번호 입력부가 가려지지 않습니다.
   */
  .gexchange-modal__body .gapply-v3-submit-wrap{
    position:relative!important;
    inset:auto!important;
    bottom:auto!important;
    z-index:1!important;
    margin:20px 0 24px!important;
    padding:0!important;
    background:transparent!important;
  }

  .gexchange-modal__body .gapply-v3-submit-wrap button{
    position:relative!important;
    width:100%!important;
    min-height:58px!important;
  }
}

@media(max-width:390px){
  .gexchange-modal__body{
    padding-bottom:calc(44px + env(safe-area-inset-bottom))!important;
  }

  .gexchange-modal__body #giftApplyForm{
    padding-bottom:70px!important;
  }
}


/* =========================================================
   v1.4 PC/태블릿 레이아웃 보정
   모바일 v13 동작은 그대로 유지
   ========================================================= */
@media(min-width:761px){

  .gexchange-modal{
    padding:32px!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .gexchange-modal__panel{
    width:min(920px, calc(100vw - 64px))!important;
    height:min(860px, calc(100vh - 64px))!important;
    max-height:min(860px, calc(100vh - 64px))!important;
    border-radius:26px!important;
    overflow:hidden!important;
  }

  .gexchange-modal__header{
    flex:0 0 auto!important;
    min-height:112px!important;
    padding:20px 24px!important;
  }

  .gexchange-modal__product{
    gap:14px!important;
  }

  .gexchange-modal__icon{
    width:62px!important;
    height:62px!important;
    flex-basis:62px!important;
    border-radius:17px!important;
  }

  .gexchange-modal__product strong{
    font-size:22px!important;
  }

  .gexchange-modal__product-copy > span{
    margin-top:5px!important;
    font-size:13px!important;
  }

  .gexchange-modal__fee{
    min-width:100px!important;
    min-height:82px!important;
    border-radius:20px!important;
  }

  .gexchange-modal__fee-value{
    font-size:27px!important;
  }

  .gexchange-modal__close{
    width:46px!important;
    height:46px!important;
    flex-basis:46px!important;
  }

  .gexchange-modal__body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:24px 26px 34px!important;
  }

  .gexchange-modal__body #giftApplyForm{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 0 30px!important;
  }

  .gexchange-modal__body .gapply-v3-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:28px!important;
    border-radius:22px!important;
    background:#fbfcfe!important;
  }

  .gexchange-modal__body .gapply-v3-submit-wrap{
    position:relative!important;
    bottom:auto!important;
    margin:22px 0 0!important;
    padding:0!important;
    background:none!important;
  }

  .gexchange-modal__body .gapply-v3-submit-wrap button{
    min-height:58px!important;
    border-radius:15px!important;
    font-size:17px!important;
  }
}


/* v1.5 PC modal proportions */
@media(min-width:1024px){
  .gexchange-modal__panel{
    width:min(1040px, calc(100vw - 80px))!important;
    height:min(900px, calc(100vh - 56px))!important;
    max-height:min(900px, calc(100vh - 56px))!important;
  }

  .gexchange-modal__body{
    padding:28px 32px 36px!important;
  }
}


/* =========================================================
   PINOSS v48 - 모바일 교환 팝업 복구 + 여백
   기존 정상 폼 이동/스크롤 구조를 유지하면서
   모바일에서 상단/좌우 여백만 추가합니다.
   ========================================================= */
@media(max-width:760px){

  html body .gexchange-modal.is-open{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;

    padding:
      max(16px, env(safe-area-inset-top))
      10px
      max(12px, env(safe-area-inset-bottom))!important;

    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  html body .gexchange-modal.is-open .gexchange-modal__panel{
    display:flex!important;
    flex-direction:column!important;

    width:100%!important;
    max-width:560px!important;

    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 32px)!important;

    margin:0 auto!important;

    border:1px solid rgba(218,227,238,.96)!important;
    border-radius:24px!important;

    overflow:hidden!important;
    background:#fff!important;

    box-shadow:
      0 22px 58px rgba(17,36,59,.24),
      0 4px 16px rgba(17,36,59,.08)!important;
  }

  html body .gexchange-modal.is-open .gexchange-modal__header{
    flex:0 0 auto!important;
    min-height:92px!important;

    padding:16px 14px!important;

    border-radius:24px 24px 0 0!important;
    background:#fff!important;
  }

  html body .gexchange-modal.is-open .gexchange-modal__body{
    display:block!important;
    flex:1 1 auto!important;

    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;

    margin:0!important;
    padding:14px 12px calc(22px + env(safe-area-inset-bottom))!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;

    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;

    box-sizing:border-box!important;
    background:#fff!important;
  }

  /* 이동된 실제 신청폼을 숨기는 오래된 규칙이 있어도 표시 */
  html body .gexchange-modal.is-open #giftExchangeModalBody > #giftApplyForm{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    margin:0!important;

    transform:none!important;
  }

  html body .gexchange-modal.is-open #giftExchangeModalBody > #giftApplyForm.pinoss-form-v31{
    overflow:visible!important;
  }

  html body .gexchange-modal.is-open .gexchange-modal__close{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
  }
}

@media(max-width:390px){
  html body .gexchange-modal.is-open{
    padding:
      max(12px, env(safe-area-inset-top))
      8px
      max(10px, env(safe-area-inset-bottom))!important;
  }

  html body .gexchange-modal.is-open .gexchange-modal__panel{
    max-height:calc(100dvh - 24px)!important;
    border-radius:21px!important;
  }

  html body .gexchange-modal.is-open .gexchange-modal__header{
    min-height:86px!important;
    padding:13px 12px!important;
    border-radius:21px 21px 0 0!important;
  }

  html body .gexchange-modal.is-open .gexchange-modal__body{
    padding:12px 9px calc(18px + env(safe-area-inset-bottom))!important;
  }
}