/* 원하타로 Toss Payments v2 통합 */
/* booking/ reading/ 양쪽에서 공유 */

/*
  토스 위젯 내부 iframe은 흰색 배경 고정이라 CSS로 못 바꿈.
  래퍼도 같은 흰색으로 맞춰 iframe 경계선을 시각적으로 지우고,
  overflow:hidden으로 자식 요소를 강제 클립해서 모바일에서도
  라운드가 확실히 보이게 함.
*/

.toss-wrap,
.toss-pay-box{
  position:relative;
  background:#fff;
  border:1px solid rgba(201,165,92,.32);
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding:var(--sp-24) var(--sp-16);
  margin:var(--sp-32) 0;
  box-shadow:
    0 4px 16px -4px rgba(0,0,0,.4),
    0 24px 60px -22px rgba(0,0,0,.55);
}

/* booking 페이지는 요약 카드 다음에 토글로 나타남 */
.toss-wrap{ display:none; }
.toss-wrap.on{ display:block; }

/* 결제수단과 약관 사이 여백만, 구분선 없음 */
.toss-wrap #payment-method,
.toss-pay-box #payment-method{ margin-bottom:var(--sp-8); }

/* reading 페이지에서 위젯 직후 오는 결제하기 버튼과의 간격 보강 */
.toss-pay-box + .pay-submit{ margin-top:var(--sp-8); }

/* 모바일 */
@media (max-width:480px){
  .toss-wrap,
  .toss-pay-box{
    padding:var(--sp-16) var(--sp-12);
    margin:var(--sp-24) 0;
    border-radius:var(--radius-lg);
  }
}

/* 결제 결과 페이지 공통 */
.pay-result{
  margin-top:var(--sp-24);
  padding:var(--sp-16) var(--sp-24);
  border:1px solid rgba(201,165,92,.12);
  border-radius:var(--radius-md);
  background:rgba(201,165,92,.03);
}
.pay-result-title{
  font-family:var(--font-en);
  font-size:11px;
  font-weight:500;
  letter-spacing:var(--ls-en-wide);
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--sp-16);
  padding-bottom:var(--sp-8);
  border-bottom:1px solid rgba(201,165,92,.08);
}
.pay-result-row{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-16);
  padding:var(--sp-8) 0;
  font-size:13px;
  line-height:1.6;
}
.pay-result-row + .pay-result-row{ border-top:1px solid rgba(201,165,92,.06); }
.pay-result-row > span:first-child{
  color:var(--muted);
  flex-shrink:0;
}
.pay-result-row > span:last-child{
  color:var(--white);
  text-align:right;
  word-break:break-all;
  font-variant-numeric:tabular-nums;
}
.pay-result-row.break > span:last-child{
  font-size:11px;
  color:var(--body);
}

.pay-result-cta{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
  align-items:center;
  margin-top:var(--sp-32);
}
/* 애드블록 차단 안내 UI */
.toss-blocked{
  padding:var(--sp-24) var(--sp-16);
  text-align:center;
  background:rgba(255,248,243,.98);
  border-radius:var(--radius-md);
}
.toss-blocked-icon{
  font-size:28px;
  color:#c48642;
  margin-bottom:var(--sp-8);
  line-height:1;
}
.toss-blocked-title{
  font-size:14.5px;
  font-weight:700;
  color:#1a1a1a;
  margin:0 0 var(--sp-8);
  letter-spacing:-0.03em;
}
.toss-blocked-desc{
  font-size:12.5px;
  color:#5a5a56;
  margin:0 0 var(--sp-16);
  line-height:1.75;
  letter-spacing:-0.02em;
}
.toss-blocked-desc b{ color:#1a1a1a; }
.toss-blocked-btn{
  background:#1a1a1a;
  color:#fff;
  border:none;
  padding:11px 28px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  letter-spacing:-0.02em;
  font-family:inherit;
  transition:background .15s;
}
.toss-blocked-btn:hover,
.toss-blocked-btn:active{ background:#2a2a2a; }

/* 재시도 로딩 상태 */
.toss-retry-loading{
  padding:var(--sp-32) var(--sp-16);
  text-align:center;
  font-size:13px;
  color:#5a5a56;
  letter-spacing:-0.02em;
  background:rgba(255,255,255,.9);
  border-radius:var(--radius-md);
}

/* 결제 시트가 위쪽으로 잘리는 문제 해결, 최대 높이 제한 + 내부 스크롤 */
.pay-sheet{
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}