/* /public/css/mall/ver_20251201/cartItemList.css */

/* =========================================
   1. 초기화 및 공통 스타일 (라이브러리 대체)
   ========================================= */
   * {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
    line-height: 1.5;
}

/* 숫자 입력 화살표 제거 */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; margin: 0; 
}

/* 버튼 공통 스타일 리셋 */
button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

/* 레이아웃 랩퍼 */
.cart-page-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px 140px 16px; /* 하단 바 가림 방지 여백 */
}

/* 타이틀 */
.cart-page-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 10px;
}

.cart-page-sub {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
}

/* =========================================
   2. 공급자(Vendor) 박스 스타일
   ========================================= */
.vendor-box {
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: #fff;
    margin-bottom: 24px;
    overflow: hidden; /* 자식 요소 둥글게 처리 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 공급자 헤더 */
.vendor-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.vendor-header .vendor-check {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
}

.vendor-name {
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

/* 품질인증 뱃지 */
.badge-chip {
    display: inline-block;
    background-color: #f0f7ff;
    color: #0c8d68;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    border: 1px solid #dff0e8;
}

/* =========================================
   3. 상품 리스트 및 옵션
   ========================================= */
.cart-item {
    padding: 20px;
    border-bottom: 1px solid #f5f5f5;
}
.cart-item:last-child {
    border-bottom: none;
}

/* 상품 헤더 (이미지 + 이름) */
.product-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.product-header img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
    margin-right: 16px;
}

.product-name {
    font-size: 16px;
    font-weight: 500;
}

/* 옵션 행 (회색 박스) */
.cart-option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #f9f9f9;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #eee;
}

.item-check {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.option-name {
    flex: 1; /* 남은 공간 차지 */
    font-size: 14px;
    color: #444;
    min-width: 200px; /* 좁아져도 글자 확보 */
    margin-right: 10px;
}

/* 가격 및 수량 영역 */
.option-price {
    font-weight: bold;
    font-size: 14px;
    margin-right: 15px;
    text-align: right;
}

.line-through {
    text-decoration: line-through;
    color: #999;
    font-weight: normal;
    margin-right: 6px;
    font-size: 12px;
}

/* 수량 조절 버튼 그룹 */
.qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    margin-right: 10px;
}

.qty-control button {
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    color: #555;
}
.qty-control button:hover {
    background-color: #f0f0f0;
}

.qty-control input {
    width: 40px;
    height: 28px;
    text-align: center;
    border: none;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    font-size: 14px;
    color: #333;
}

/* 삭제 버튼 */
.deleteButton {
    color: #ff4d4f;
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #ffe5e5;
    background-color: #fff1f0;
    border-radius: 4px;
}

/* 상품별 소계 */
.product-summary {
    text-align: right;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}
.product-summary span {
    color: #111;
    font-weight: bold;
}

/* =========================================
   4. 공급자별 요약 (하단 회색 박스)
   ========================================= */
.vendor-summary {
    background-color: #f8f9fa;
    padding: 20px;
    border-top: 1px solid #eee;
}

.stats {
    display: flex;
    justify-content: space-around; /* 간격 균등 배치 */
    margin-bottom: 20px;
    text-align: center;
    flex-wrap: wrap;
    gap: 10px;
}

.stat-title {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.stat-value.text-success {
    color: #00b300; /* 할인 금액 초록색 */
}

/* 벤더 버튼 그룹 */
.vendor-summary .text-right {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 벤더별 버튼 스타일 (클래스 직접 지정) */
.vendor-delete-selected-btn, 
.vendor-delete-all-btn {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: #555;
    background-color: #fff;
}
.vendor-delete-all-btn {
    color: #e03131;
    border-color: #ffc9c9;
}

.vendor-order-btn {
    /* ★ 같은 화면에 파란 "전체 주문하기" 가 있는데 이 버튼까지 진한 단색이면
       1차 CTA 가 둘로 보인다. 공급사 단위 주문은 2차라 아웃라인으로. */
    background-color: #fff;
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
}
.vendor-order-btn:hover { background-color: var(--c-primary-light); }
.vendor-order-btn:disabled {
    background-color: #f2f2f2;
    color: #aaa;
    border-color: #e0e0e0;
    cursor: not-allowed;
}

/* 전체 삭제 버튼 (하단) */
#deleteAllButton {
    display: block;
    margin-left: auto;
    border: 1px solid #ccc;
    padding: 8px 16px;
    background-color: #fff;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
}


/* =========================================
   5. 모바일 하단 고정 바 (Sticky Footer)
   ========================================= */
.mobile-summary-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    z-index: 999;
    border-top: 1px solid #ddd;
    display: none; /* JS 제어 또는 미디어 쿼리로 보임 */
    flex-direction: column;
}

/* 토글 헤더 */
.summary-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background: #fff;
}

.toggle-text {
    font-size: 14px;
    color: #555;
}
.toggle-total {
    font-size: 18px;
    font-weight: bold;
    color: var(--c-point);  /* 최종 결제금액 강조 — 팔레트 포인트색 */
    margin-left: auto;
    margin-right: 10px;
}
.toggle-icon {
    font-size: 12px;
    color: #999;
    transition: transform 0.3s;
    transform: rotate(180deg);
}

/* 상세 내용 (펼쳐짐) */
.summary-content {
    background-color: #fafafa;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}
.mobile-summary-bar.expanded .summary-content {
    max-height: 500px; /* 충분히 크게 */
    border-bottom: 1px solid #eee;
}
.mobile-summary-bar.expanded .toggle-icon {
    transform: rotate(180deg);
}

.summary-content .line {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
    font-size: 14px;
    color: #666;
}
.summary-content .line.order-big {
    font-size: 18px;
    font-weight: bold;
    color: #111;
    border-top: 1px dashed #ccc;
    margin-top: 10px;
    padding-top: 15px;
    padding-bottom: 20px;
}
.summary-content .line.order-big strong {
    color: var(--c-point);
}

/* =========================================
   6. PC 하단 바 (Floating Pill + 분리 주문버튼)
   ========================================= */
.pc-summary-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: none;
}
.pc-summary-bar.active {
    display: block;
}

/* 토글 + 주문버튼 가로 배치 (간격 분리) */
.pc-summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-summary-toggle {
    background-color: #2d3436;
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 15px;
    transition: all 0.2s;
}
.pc-summary-toggle:hover {
    background-color: #3d4446;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

/* PC 전체주문 버튼 - 별도 pill */
.pc-order-btn {
    background: var(--c-primary);
    color: #fff;
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 5px 20px rgba(90,106,207,0.35);
    transition: all 0.2s;
}
.pc-order-btn:hover {
    background: var(--c-primary-deep);
    box-shadow: 0 8px 28px rgba(90,106,207,0.45);
    transform: translateY(-1px);
}

.pc-toggle-text strong {
    font-size: 20px;
    color: #fab1a0;
    margin-left: 10px;
}
.pc-toggle-icon {
    margin-left: 15px;
    font-size: 12px;
}

/* PC 팝업 */
.pc-summary-popup {
    position: absolute;
    bottom: 70px; /* 버튼 위 */
    left:-20px;
    width: 320px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
}
.pc-summary-bar.expanded .pc-summary-popup {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.pc-popup-header {
    padding: 12px 16px;
    background: #f1f2f6;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.pc-popup-content {
    padding: 16px;
}
.pc-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}
.pc-line.order-big {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #ccc;
    font-weight: bold;
    font-size: 18px;
    color: var(--c-point);
}

/* HTML 코드상의 .content-btn (기본 주문버튼) 숨기기 */
/* 하단 바를 사용할 것이므로 숨김 처리 */
.content-btn {
    display: none;
}


/* =========================================
   7. 반응형 미디어 쿼리
   ========================================= */
@media (max-width: 600px) {
    /* 모바일 */
    .mobile-summary-bar { display: flex; }
    .pc-summary-bar { display: none !important; }

    .cart-page-wrap { padding: 0 10px 100px 10px; }
    .cart-option-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .option-name {
        margin-bottom: 8px;
        width: 100%;
    }
    .option-price {
        margin-left: 0;
        margin-bottom: 8px;
    }
    .qty-control {
        margin-bottom: 8px;
    }
    .deleteButton {
        align-self: flex-end; /* 우측 정렬 */
    }
    
    .stats {
        flex-direction: column; /* 세로 정렬 */
    }
    .stat {
        display: flex;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px dashed #eee;
        padding-bottom: 5px;
    }
}

@media (min-width: 601px) {
    /* PC */
    .mobile-summary-bar { display: none !important; }
}

/* =========================================
   [수정] 전체 주문하기 버튼 스타일 (기존 display: none 삭제함)
   ========================================= */
   .content-btn {
    display: none !important; /* PC/모바일 하단바에 주문버튼 통합했으므로 숨김 */
}

/* 모바일 하단바 주문 버튼 */
.mobile-order-btn {
    display: block;
    width: 100%;
    padding: 18px 0;
    background: var(--c-primary);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    letter-spacing: -0.3px;
}
.mobile-order-btn:active {
    background: var(--c-primary-deep);
}

#orderButton {
    display: inline-block;
    width: 100%;
    max-width: 400px; /* 너무 길어지지 않게 제한 */
    padding: 18px 0;
    background-color: var(--c-primary);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#orderButton:hover {
    background-color: #333; /* 호버 시 약간 연하게 */
    transform: translateY(-2px); /* 살짝 위로 떠오르는 효과 */
}

/* 모바일에서는 content-btn 숨김 */
@media (max-width: 600px) {
    .content-btn {
        display: none !important;
    }
}


/* =========================================
   8. 장바구니 비었을 때
   ========================================= */
   .empty-cart-view {
    text-align: center;
    padding: 100px 20px;
    background-color: #fff;
    border-radius: 12px;
    /* border: 1px dashed #eee; (원하면 테두리 추가) */
}

.empty-icon-area {
    margin-bottom: 24px;
}

.empty-icon-area svg {
    /* 아이콘 색상 및 크기 */
    stroke: #d1d5db; /* 연한 회색 */
    width: 80px;
    height: 80px;
}



.empty-cart-view h2 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.empty-cart-view p {
    font-size: 14px;
    color: #888;
    margin-bottom: 40px;
}

.btn-go-home {
    display: inline-block;
    padding: 14px 40px;
    background-color: var(--c-primary); /* 브랜드 주색 */
    color: #fff;
    text-decoration: none; /* a태그 밑줄 제거 */
    border-radius: 50px; /* 둥근 알약 모양 */
    font-weight: bold;
    font-size: 15px;
    transition: background-color 0.3s;
}

.btn-go-home:hover {
    background-color: var(--c-primary-deep);
}
/* ==========================================================================
   옵션 가격 칩이 헤더 장바구니 카운트 뱃지 스타일을 물려받던 문제 (2026-08-07)
   ------------------------------------------------------------
   이 마크업은 DaisyUI 관례대로 `badge badge-lg badge-primary badge-outline` 을
   쓰는데, reset.css 의 `.badge` 는 헤더 장바구니 개수 표시용이라
   `position:absolute; right:-6px` 이 걸려 있다. 그래서 모바일에서 가격 칩이
   화면 밖으로 6px 삐져나가 가로 스크롤이 생겼다.
   → 장바구니 안에서는 평범한 인라인 칩으로 되돌린다.
   ========================================================================== */
.option-price .badge {
    position: static;
    top: auto;
    right: auto;
    display: inline-block;
    min-width: 0;
    height: auto;
    padding: 3px 9px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    border: 1px solid #dff0e8;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* ============================================================================
   [TTBOX] 장바구니 2컬럼 재구성 (2026-08-07)
   ----------------------------------------------------------------------------
   떠리마켓: 상품 세로 나열 + 화면 하단 플로팅 pill(눌러야 상세가 열리는 팝업).
   티티박스: 좌 상품 / 우 항상 펼쳐진 sticky 요약 — 커머스 표준 2컬럼.
   ★ 마크업은 .pc-summary-bar 를 우측 컬럼으로 옮긴 것뿐, 클래스·ID 는 그대로다.
   ============================================================================ */
@media (min-width: 1025px) {
  .tb-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
    max-width: var(--w-container);
    margin: 0 auto;
  }
  .tb-cart-layout .cart-container { padding: 0 !important; margin-top: 0 !important; max-width: none; }

  /* 우측 요약 — fixed 플로팅을 static sticky 카드로 되돌린다 */
  .tb-cart-side { position: sticky; top: 92px; }
  .tb-cart-side .pc-summary-bar {
    position: static;
    transform: none;
    display: block;          /* .active 없이도 항상 보이게 */
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-sm);
    padding: 22px 20px;
  }
  /* 금액 상세를 먼저 보고 버튼을 누르는 순서가 되도록 뒤집는다
     (원본은 pill 안에 버튼이 먼저 오는 구조였다) */
  .tb-cart-side .pc-summary-bar { display: flex; flex-direction: column; }
  .tb-cart-side .pc-summary-popup { order: 1; }
  .tb-cart-side .pc-summary-row { order: 2; display: block; }
  .tb-cart-side .pc-summary-toggle { display: none; }
  .tb-cart-side .pc-order-btn {
    width: 100%;
    margin-top: 18px;
    padding: 16px 0;
    border-radius: 12px;
  }
  /* 팝업 → 인라인 상세 */
  .tb-cart-side .pc-summary-popup {
    position: static;
    width: auto;
    border: 0;
    box-shadow: none;
    padding: 0;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .tb-cart-side .pc-popup-header { display: none; }
  .tb-cart-side .pc-popup-content { padding: 0; }
  .tb-cart-side .pc-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    font-size: 14px;
    color: var(--c-gray);
  }
  .tb-cart-side .pc-line.order-big {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
    font-size: 15px;
    color: var(--c-black);
    font-weight: 700;
  }
  .tb-cart-side .pc-line.order-big strong { font-size: 22px; color: var(--c-point); }

  /* 우측 패널이 대체하므로 화면 하단 모바일 바는 PC 에서 숨긴다 */
  .tb-cart-layout ~ .mobile-summary-bar,
  .mobile-summary-bar { display: none; }
}

/* 모바일은 기존 1단 + 하단 요약 바 유지 */
@media (max-width: 1024px) {
  .tb-cart-layout { display: block; }
  .tb-cart-side { display: none; }
}

/* 2컬럼에서는 공급사별 4칸 통계가 우측 패널과 중복이다.
   좌측은 상품에 집중하도록 한 줄 요약으로 압축한다. */
@media (min-width: 1025px) {
  .tb-cart-layout .vendor-summary .stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    box-shadow: none;
    background: transparent;
  }
  .tb-cart-layout .vendor-summary .stat {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 0;
    border: 0;
    min-width: 0;
    width: auto;
  }
  .tb-cart-layout .vendor-summary .stat-title { font-size: 12.5px; color: var(--c-light); }
  .tb-cart-layout .vendor-summary .stat-value {
    font-size: 14.5px !important;
    font-weight: 700;
    color: var(--c-dark);
  }
}