@charset "UTF-8";
/* ============================================================
   상품 상세 · 구매 영역 확장 스타일
   - 모든 규칙은 .kidsMall 하위로 스코프 (전역/타 페이지 영향 없음)
   - 신규 컴포넌트는 .km- 프리픽스 사용 (btn.css / 전역 스타일 충돌 방지)
   - kidsMall.css 하단에 병합하거나 이 파일 그대로 별도 로드해도 됩니다.
   ============================================================ */

/* 상품명 - 2줄 이상일 때 자연스러운 줄바꿈
   (기존 .name 규칙을 뒤에서 오버라이드) */
.kidsMall .productWrap .product-detail .name {
  line-height: 1.4;          /* 기존 1.25 → 두 줄 간격 확보 */
  word-break: keep-all;      /* 한글 단어가 중간에서 끊기지 않도록 (공백 단위 줄바꿈) */
  overflow-wrap: break-word; /* 아주 긴 영문/URL 은 예외적으로 끊어줌 */
  text-wrap: balance;        /* 지원 브라우저에서 두 줄 길이를 균형있게 (미지원 시 무시) */
}

/* 수량 선택 (위쪽 구분선은 .price-area 의 border-bottom 을 사용 → 이중선 방지) */
.kidsMall .productWrap .km-qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 22px;
}

.kidsMall .productWrap .km-qty-label {
  font-size: 15px;
  font-weight: 600;
  color: #1F2022;
}

/* 스텝퍼(박스/버튼/인풋) - 인라인 + 시트 공통 */
.kidsMall .km-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cacaca;
  border-radius: 6px;
  overflow: hidden;
}

.kidsMall .km-qty-btn {
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  color: #5A5A5A;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kidsMall .km-qty-btn:hover {
  background: #f4f4f4;
}

.kidsMall .km-qty-btn:disabled {
  color: #d5d5d5;
  background: #fff;
  cursor: default;
}

.kidsMall .km-qty-input {
  width: 52px;
  height: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #1F2022;
  background: #fff;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  cursor: default;
}

/* 잔여수량 표기 (인라인) */
.kidsMall .km-qty-remain {
  margin-left: auto;
  font-size: 14px;
  color: #898A8E;
}

.kidsMall .km-qty-remain b {
  color: #FF4646;
  font-weight: 700;
}

/* 총 상품금액 */
.kidsMall .productWrap .km-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 24px;
  border-top: 1px solid #e6e6e6;
}

.kidsMall .productWrap .km-total-label {
  font-size: 15px;
  color: #363B41;
}

.kidsMall .productWrap .km-total-label em {
  font-style: normal;
  color: #898A8E;
  padding-left: 4px;
}

.kidsMall .productWrap .km-total-price {
  font-size: 26px;
  font-weight: 800;
  color: #1F2022;
  letter-spacing: -0.5px;
}

/* 배송비 + 무료배송 안내 (PC 인라인) - 총 상품금액 아래 */
.kidsMall .productWrap .km-delivery {
  margin-top: -12px;
  padding: 0 0 24px;
}

.kidsMall .productWrap .km-delivery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: #363B41;
}

.kidsMall .productWrap .km-delivery-row .val {
  font-weight: 600;
  color: #1f2022;
}

.kidsMall .productWrap .km-delivery-row .val.is-free {
  color: #FF4646;
}

.kidsMall .productWrap .km-delivery-noti {
  margin-top: 6px;
  font-size: 13px;
  color: #898A8E;
}

.kidsMall .productWrap .km-delivery-noti b {
  color: #FF4646;
  font-weight: 700;
}

.kidsMall .productWrap .km-delivery-noti.is-done {
  color: #FF4646;
}

/* 구매/결제 버튼 배치 */
.kidsMall .productWrap .km-buy {
  display: flex;
  gap: 8px;
}

.kidsMall .productWrap .km-buy .km-status-btn {
  flex: 1 1 auto;
}

.kidsMall .productWrap .km-buy .km-share {
  flex: 0 0 33%;
  border-radius: 6px;
  height: 56px;
  padding: 0 20px;
}

/* ===== 상태별 결제 버튼 4종 ===== */
.kidsMall .km-status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

/* ① 결제하기 - 활성 CTA (teal) */
.kidsMall .km-status-btn.pay {
  background: #19CEB3;
  border-color: #19CEB3;
  color: #fff;
}

.kidsMall .km-status-btn.pay:hover {
  background: #15b8a0;
  border-color: #15b8a0;
}

/* ② 무통장 입금 확인 중 - 대기(진행) */
.kidsMall .km-status-btn.pending {
  background: #EEF1F7;
  border-color: #D5DCEA;
  color: #00103E;
  cursor: default;
}

.kidsMall .km-status-btn.pending::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00103E;
  animation: kmPulse 1.2s ease-in-out infinite;
}

/* ③ 결제완료 - 완료(navy + 체크) */
.kidsMall .km-status-btn.done {
  background: #00103E;
  border-color: #00103E;
  color: #fff;
  cursor: default;
}

.kidsMall .km-status-btn.done::before {
  content: '';
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ④ 마감 - 비활성 */
.kidsMall .km-status-btn.closed {
  background: #EDEDED;
  border-color: #E0E0E0;
  color: #9A9CA1;
  cursor: default;
}

@keyframes kmPulse {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .kidsMall .km-status-btn.pending::before { animation: none; opacity: .9; }
}

/* ===== 상태별 버튼 미리보기 (퍼블 확인용 · 운영 시 삭제) ===== */
.kidsMall .km-state-demo {
  border: 1px dashed #C9CCD6;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 30px;
  background: #FAFBFD;
}

.kidsMall .km-state-demo .demo-tit {
  font-size: 13px;
  font-weight: 700;
  color: #8A90A2;
  margin-bottom: 14px;
}

.kidsMall .km-state-demo .demo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* ===== 모바일 하단 고정 결제바 ===== */
.kidsMall .km-buybar,
.kidsMall .km-buybar-spacer {
  display: none;
}

/* 하단바 노출 기준: 768px (더 좁게 원하면 540px 로 변경) */
@media screen and (max-width: 768px) {
  /* 인라인 수량/총금액/구매버튼 숨김 → 결제 옵션 시트로 이동 */
  .kidsMall .productWrap .km-qty-row,
  .kidsMall .productWrap .km-total-row,
  .kidsMall .productWrap .km-buy {
    display: none;
  }

  .kidsMall .km-buybar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    z-index: 99999;
    box-shadow: 0 -2px 18px rgba(0, 0, 0, .1);
    border-top: 1px solid rgba(25, 206, 179, .5);
  }

  .kidsMall .km-buybar-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
  }

  .kidsMall .km-buybar-label {
    font-size: 12px;
    color: #898A8E;
  }

  .kidsMall .km-buybar-total {
    font-size: 20px;
    font-weight: 800;
    color: #19CEB3;
    letter-spacing: -0.5px;
  }

  .kidsMall .km-buybar-btn {
    flex: 1;
  }

  /* 하단바 공유 아이콘 버튼 (아이콘 전용) */
  .kidsMall .km-buybar-share {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #DADADA;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
  }

  .kidsMall .km-buybar-share svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .kidsMall .km-buybar .km-status-btn {
    width: 100%;
    height: 52px;
    font-size: 16px;
  }

  /* 고정바 높이만큼 하단 여백 확보 (footer 가림 방지) */
  .kidsMall .km-buybar-spacer {
    display: block;
    height: 96px;
  }

  .kidsMall .km-state-demo .demo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 540px) {
  .kidsMall .productWrap .km-total-price {
    font-size: 22px;
  }
}

/* ============================================================
   모바일 결제 옵션 레이어 (네이버 스타일 바텀시트)
   - 하단바 결제하기 탭 시 슬라이드업
   - .km-sheet 스코프
   ============================================================ */
.kidsMall .km-sheet {
  display: none;
}

@media screen and (max-width: 768px) {
  .kidsMall .km-sheet {
    display: block;
  }

  .kidsMall .km-sheet-dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .kidsMall .km-sheet.is-open .km-sheet-dim {
    opacity: 1;
    pointer-events: auto;
  }

  .kidsMall .km-sheet-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
    transform: translateY(100%);
    transition: transform .28s ease;
  }

  .kidsMall .km-sheet.is-open .km-sheet-panel {
    transform: translateY(0);
  }

  /* 상단 손잡이 (탭 시 닫힘) */
  .kidsMall .km-sheet-handle {
    display: block;
    width: 44px;
    height: 5px;
    margin: 8px auto 18px;
    border: 0;
    border-radius: 3px;
    background: #DADCE0;
    cursor: pointer;
  }

  /* 수량 선택 */
  .kidsMall .km-sheet-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #F7F8FA;
    border-radius: 10px;
  }

  .kidsMall .km-sheet-qty-label {
    font-size: 15px;
    font-weight: 600;
    color: #1F2022;
  }

  .kidsMall .km-sheet-qty .km-qty {
    background: #fff;
  }

  /* 잔여수량 표기 (시트) */
  .kidsMall .km-sheet-remain {
    padding: 8px 4px 0;
    font-size: 13px;
    color: #898A8E;
    text-align: right;
  }

  .kidsMall .km-sheet-remain b {
    color: #FF4646;
    font-weight: 700;
  }

  /* 총 개수 / 총 금액 */
  .kidsMall .km-sheet-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 4px 6px;
    font-size: 15px;
    color: #1F2022;
  }

  .kidsMall .km-sheet-total em {
    font-style: normal;
    font-weight: 700;
  }

  .kidsMall .km-sheet-total .km-sheet-total-r {
    font-size: 15px;
    color: #363B41;
  }

  .kidsMall .km-sheet-total .km-total-price {
    font-size: 22px;
    font-weight: 800;
    color: #FF4646;
    letter-spacing: -0.5px;
    padding-left: 4px;
  }

  /* 배송비 안내 라인 */
  .kidsMall .km-sheet-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 18px;
    font-size: 13px;
    color: #898A8E;
  }

  .kidsMall .km-sheet-info .tit {
    position: relative;
    padding-right: 9px;
    color: #363B41;
    font-weight: 600;
  }

  .kidsMall .km-sheet-info .tit::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 11px;
    background: #D9D9D9;
  }

  .kidsMall .km-sheet-info .val.is-free {
    color: #FF4646;
    font-weight: 700;
  }

  /* 시트 무료배송 안내문구 */
  .kidsMall .km-sheet-noti {
    margin: -8px 4px 16px;
    font-size: 12px;
    color: #898A8E;
  }

  .kidsMall .km-sheet-noti b {
    color: #FF4646;
    font-weight: 700;
  }

  .kidsMall .km-sheet-noti.is-done {
    color: #FF4646;
  }

  /* 결제 버튼 */
  .kidsMall .km-sheet-btn .km-status-btn {
    width: 100%;
    height: 52px;
    font-size: 16px;
  }
}