/* 임시로 모바일 장바구니 CSS를 따로 작성 - 나중에 Common_mobile_ims_renew.css에 복사할 것 */
.only_mob {
  display: none !important;
}
/* PC 버전에서는 모바일 숨김, 모바일만 표시 (769px 이상) */
@media (min-width: 769px) {
  .basket-mobile-view {
    display: none !important;
  }

  .basket-pc-view {
    display: block !important;
  }
}

/* 모바일 버전 (768px 이하) */
@media (max-width: 768px) {
  /* PC 버전 숨김, 모바일 버전 표시 */
  .basket-pc-view {
    display: none !important;
  }

  .basket-mobile-view {
    display: block !important;
    padding: 0 15px !important;
  }

  /* 모바일 아이템 카드 */
  .basket-mobile-item-card {
    position: relative !important;
    width: 100% !important;
    background: #fff !important;
    border: 3px solid #ffbe00 !important;
    border-radius: 17px !important;
    padding: 25px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 3px 17px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
  }

  /* 체크박스 (우측 상단) */
  .mobile-card-checkbox {
    position: absolute !important;
    top: 25px !important;
    right: 25px !important;
    z-index: 10 !important;
  }

  .mobile-card-checkbox input[type='checkbox'] {
    width: 33px !important;
    height: 33px !important;
    cursor: pointer !important;
    accent-color: #ffbe00 !important;
  }

  /* 이미지 영역 */
  .mobile-card-image {
    text-align: center !important;
    padding-bottom: 25px !important;
    margin-bottom: 25px !important;
    border-bottom: 3px solid #f5f5f5 !important;
  }

  .mobile-card-image img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 400px !important;
    border-radius: 12px !important;
    border: 3px solid #e0e0e0 !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .mobile-card-image {
    container: basket-mobile-card / size;
    max-height: 400px;
    height: 400px;
  }

  @container basket-mobile-card (max-height: 400px) {
    .mobile-card-image img {
      width: 100cqh !important;
      height: 100cqw !important;
      object-fit: contain;
    }
  }

  .mobile-card-image-info {
    margin-top: 12px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #666 !important;
  }

  /* 옵션 섹션 */
  .mobile-card-section {
    padding: 20px 0 !important;
    border-bottom: 2px solid #f0f0f0 !important;
  }

  .mobile-card-section:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .mobile-section-header {
    font-size: 23px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin-bottom: 17px !important;
  }

  /* 옵션 행 */
  .mobile-option-row {
    margin-bottom: 17px !important;
  }

  .mobile-option-row:last-of-type {
    margin-bottom: 0 !important;
  }

  .mobile-option-label {
    display: block !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: 8px !important;
  }

  /* 드롭다운 & 입력 필드 */
  .mobile-dropdown,
  .mobile-quantity-input {
    width: 100% !important;
    padding: 17px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    font-size: 23px !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  .mobile-dropdown:focus,
  .mobile-quantity-input:focus {
    border-color: #ffbe00 !important;
    outline: none !important;
  }

  .mobile-quantity-input {
    text-align: center !important;
  }

  /* 가격 행 */
  .mobile-price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 17px 0 !important;
    margin-top: 17px !important;
    border-top: 2px solid #f0f0f0 !important;
  }

  .mobile-price-label {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #666 !important;
  }

  .mobile-price-value {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #ffbe00 !important;
    display: flex !important;
    justify-content: right !important;
  }

  /* 다운로드 섹션 */
  .mobile-download-section {
    background: #fffbf0 !important;
    padding: 20px !important;
    margin: 20px -25px 0 -25px !important;
    border-radius: 0 0 14px 14px !important;
    border-bottom: none !important;
  }

  .mobile-download-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .mobile-download-label {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
  }

  .mobile-download-checkbox input[type='checkbox'] {
    width: 33px !important;
    height: 33px !important;
    cursor: pointer !important;
    accent-color: #ffbe00 !important;
  }

  /* 총 금액 카드 (모바일) */
  .basket-total-mobile-card {
    width: 100% !important;
    background: linear-gradient(135deg, #fffbf0 0%, #fff8e1 100%) !important;
    border: 5px solid #ffbe00 !important;
    border-radius: 17px !important;
    padding: 33px !important;
    margin: 33px 0 !important;
    box-shadow: 0 5px 25px rgba(255, 190, 0, 0.15) !important;
    box-sizing: border-box !important;
  }

  .total-card-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 17px 0 !important;
  }

  .total-card-row-final {
    padding-top: 25px !important;
  }

  .total-label {
    font-size: 27px !important;
    font-weight: 600 !important;
    color: #333 !important;
  }

  .total-value {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #000 !important;
  }

  .total-label-final {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #000 !important;
  }

  .total-value-final {
    font-size: 47px !important;
    font-weight: 800 !important;
    color: #ffbe00 !important;
  }

  .total-card-divider {
    height: 2px !important;
    background: #ddd !important;
    margin: 12px 0 !important;
  }

  .total-card-divider-bold {
    height: 5px !important;
    background: #ffbe00 !important;
    margin: 20px 0 !important;
  }

  /* 빈 장바구니 (모바일) */
  .basket-mobile-empty {
    width: 100% !important;
    padding: 83px 33px !important;
    text-align: center !important;
    background: #f9f9f9 !important;
    border: 3px solid #ddd !important;
    border-radius: 17px !important;
    margin: 25px 0 !important;
  }

  .basket-mobile-empty p {
    font-size: 30px !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin: 0 !important;
  }

  /* 버튼 영역 (PC/모바일 공통) */
  .basket-button-area {
    width: 100% !important;
    padding: 0 !important;
    margin: 33px 0 50px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }

  .basket-button-area .basket-button-left,
  .basket-button-area .basket-button-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  .basket-button-area .basket-checkbox-all {
    width: 33px !important;
    height: 33px !important;
    margin-bottom: 12px !important;
    accent-color: #ffbe00 !important;
  }

  .basket-button-area .basket-btn-purchase {
    width: 100% !important;
    padding: 30px !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    background: #ffbe00 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(255, 190, 0, 0.3) !important;
    cursor: pointer !important;
  }

  .basket-button-area .basket-btn-purchase:active {
    background: #e5aa00 !important;
    transform: scale(0.98) !important;
  }

  .basket-button-area .basket-btn-continue {
    width: 100% !important;
    padding: 25px !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    background: #fff !important;
    color: #ffbe00 !important;
    border: 2px solid #ffbe00 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
  }

  .basket-button-area .basket-btn-continue:active {
    background: #fffbf0 !important;
    transform: scale(0.98) !important;
  }

  .basket-button-area .basket-btn-delete,
  .basket-button-area .basket-btn-delete-all {
    width: 100% !important;
    padding: 25px !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    background: #fff !important;
    color: #f44336 !important;
    border: 2px solid #f44336 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
  }

  .basket-button-area .basket-btn-delete:active,
  .basket-button-area .basket-btn-delete-all:active {
    background: #f44336 !important;
    color: #fff !important;
    transform: scale(0.98) !important;
  }
}