/* ===== 공통 레이아웃 ===== */
#sod_bsk.cart-page-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 16px 60px;
    box-sizing: border-box;
}
#sod_bsk .cart-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
#sod_bsk .cart-main {
    flex: 1 1 auto;
}
#sod_bsk .cart-summary {
    width: 320px;
    flex-shrink: 0;
}

/* 모바일에서 요약이 아래로 내려오도록 */
@media (max-width: 768px) {
    #sod_bsk.cart-page-wrap {
        padding: 14px 12px 40px;
    }
    #sod_bsk .cart-layout {
        flex-direction: column;
    }
    #sod_bsk .cart-summary {
        width: 100%;
    }
}

/* ===== 리스트 상단 체크박스 ===== */
#sod_bsk #sod_chk {
    margin-bottom: 16px;
    font-size: 14px;
}

/* ===== 헤더 행 (제품명/가격/수량/소계) ===== */
#sod_bsk .cart-header-row {
    display: flex;
    padding: 0 24px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
#sod_bsk .cart-header-row div {
    white-space: nowrap;
}
#sod_bsk .cart-header-row .col-product {
    flex: 1 1 auto;
    padding-left: 72px; /* 체크박스+이미지 여백 보정 */
}
#sod_bsk .cart-header-row .col-price {
    width: 180px;
    text-align: center;
}
#sod_bsk .cart-header-row .col-qty {
    width: 80px;
    text-align: center;
}
#sod_bsk .cart-header-row .col-subtotal {
    width: 140px;
    text-align: right;
}

/* 모바일에서는 헤더 숨김 */
@media (max-width: 768px) {
    #sod_bsk .cart-header-row {
        display: none;
    }
}

/* ===== 장바구니 리스트 영역 ===== */
#sod_bsk .sod_list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    /* overflow 제거해서 옵션 팝업이 안 잘리도록 */
}

/* ---------- 모바일 기본 레이아웃 (flex column) ---------- */
#sod_bsk .sod_li {
    border-bottom: 1px solid #f1f5f9;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
}
#sod_bsk .sod_li:last-child {
    border-bottom: none;
}

/* 모바일용 각 영역 */
#sod_bsk .li_op_wr {
    display: flex;
    align-items: center;
    gap: 16px;
}
#sod_bsk .sod_opt {
    margin-top: 4px;
}
#sod_bsk .li_prqty {
    width: 100%;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    justify-content: flex-start;
    margin-top: 8px;
}
#sod_bsk .total_price {
    align-self: flex-end;
    margin-top: 4px;
}

/* ---------- PC 레이아웃 (grid: 상품 / 가격+수량 / 소계) ---------- */
@media (min-width: 769px) {
    #sod_bsk .sod_li {
        padding: 20px 24px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 180px 140px;
        grid-auto-rows: auto;
        align-items: center;
        column-gap: 24px;
        row-gap: 8px;
    }
    #sod_bsk .li_op_wr {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    #sod_bsk .sod_opt {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        margin-left: 72px;   /* 상품명 아래 들여쓰기 */
        margin-top: 2px;
    }
    #sod_bsk .li_prqty {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        display: block;
        text-align: center;
        margin-top: 0;
    }
	#sod_bsk .total_price {
	display: flex;
	justify-content: flex-end;
	align-items: center;  /* 텍스트 수직 중앙 */
	align-self: center;   /* 그리드 셀 안에서 중앙 정렬로 덮어쓰기 */
	margin-top: 0;        /* 아래로 밀던 여백 제거 */
	gap: 4px;             /* '소계'와 금액 사이 간격 (옵션) */
	}
}

/* 체크박스/이미지 */
#sod_bsk .li_chk {
    flex-shrink: 0;
}
#sod_bsk .total_img img {
    border-radius: 12px;
}

/* 상품명 가로표기 강제 */
#sod_bsk .li_name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: keep-all;
    line-height: 1.4;
}
#sod_bsk .li_name a {
    color: inherit;
}

/* 옵션수정 버튼 영역 */
#sod_bsk .li_mod {
    margin-left: auto;
}

/* 선택사항 수정 버튼 디자인 */
#sod_bsk .mod_options {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #2563eb;
    background: #ffffff;
    font-size: 12px;
    font-weight: 500;
    color: #2563eb;
    cursor: pointer;
    writing-mode: horizontal-tb !important;
    white-space: nowrap;
}
#sod_bsk .mod_options:hover {
    background: #eff6ff;
}

/* 옵션 영역 : 무조건 가로 표기 */
#sod_bsk .sod_opt,
#sod_bsk .sod_opt * {
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
}

/* 가격 / 수량 라벨 및 값 */
#sod_bsk .li_prqty {
    font-size: 13px;
    color: #4b5563;
}
#sod_bsk .li_prqty_sp {
    display: block;
    margin-bottom: 4px;
}
#sod_bsk .li_prqty_sp span:first-child {
    color: #9ca3af;
    margin-right: 4px;
}

/* PC에서는 '가격', '수량' 텍스트 감추고 숫자만 남기기 */
@media (min-width: 769px) {
    #sod_bsk .li_prqty .prqty_price span:first-child,
    #sod_bsk .li_prqty .prqty_qty span:first-child {
        display: none;
    }
}

/* 배송비 텍스트는 리스트에서는 숨김 (요약 박스에서만 사용) */
#sod_bsk .li_prqty .prqty_sc {
    display: none;
}

/* 비어있을 때 */
#sod_bsk .empty_list {
    padding: 40px 24px;
    text-align: center;
    color: #6b7280;
}

/* 선택삭제 / 비우기 버튼 */
#sod_bsk .btn_del_wr {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}
#sod_bsk .btn_del_wr .btn01 {
    padding: 8px 14px;
    font-size: 13px;
}

/* ===== 우측 요약 카드 ===== */
#sod_bsk .cart-summary-box {
    position: sticky;
    top: 96px;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 18px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
#sod_bsk .cart-summary-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #111827;
}
#sod_bsk .cart-summary-inner {
    background: var(--bg-color-three) !important;
    border-radius: 12px;
    padding: 14px 14px 14px;
    margin-bottom: 12px;
    color: #000000;
}
#sod_bsk #m_sod_bsk_tot {
    margin: 0;
}
#sod_bsk #m_sod_bsk_tot dt,
#sod_bsk #m_sod_bsk_tot dd {
    font-size: 13px;
    line-height: 1.6;
}
#sod_bsk #m_sod_bsk_tot dt {
    float: left;
}
#sod_bsk #m_sod_bsk_tot dd {
    text-align: right;
    margin: 0 0 4px;
    font-weight: 500;
}
#sod_bsk #m_sod_bsk_tot dd.sod_bsk_cnt {
    font-size: 16px;
    font-weight: 700;
}

/* 총 금액 박스 */
#sod_bsk .cart-summary-total-box {
    background: #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

/* 남은무게 안내 (요약 카드 안) */
#sod_bsk .cart-summary-remain {
    font-size: 12px;
    text-align: center;
    margin-bottom: 14px;
    color: #111827;
}
#sod_bsk .cart-summary-remain strong {
    color: #ef4444;
}

/* 결제 버튼 */
#sod_bsk .cart-summary-btn {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
}
#sod_bsk .cart-summary-btn:hover {
    background: #1d4ed8;
}

/* 쇼핑 계속하기 버튼 (요약 카드 하단) */
#sod_bsk .cart-continue-link {
    display: block;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    border-radius: 999px;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 600;
    background: #f472b6;
    color: #111827;
}
#sod_bsk .cart-continue-link:hover {
    background: #ec4899;
}

/* 모바일에서 요약 카드 폭 */
@media (max-width: 768px) {
    #sod_bsk .cart-summary-box {
        position: static;
    }
}

/* 남은무게 알림 기존 스타일 (하단 숨김 영역용) */
#sod_bsk #sod_bsk_act {
    margin-top: 24px;
}
#sod_bsk #sod_bsk_act table.__se_tbl {
    width: 100%;
    font-size: 13px;
}

/* 무료배송 강조 */
/* ✅ KOMORI 전용: 네이비/블루톤 “프리미엄 배지” (오이시와 완전 다른 무드) */
.free-shipping-highlight{
  /* Komori palette */
  --k-bg1:#0b1430;              /* deep navy */
  --k-bg2:#152b63;              /* navy blue */
  --k-accent:#70aff2;           /* komori blue */
  --k-accent2:#4fd1c5;          /* subtle teal */
  --k-text:#eaf3ff;
  --k-border:rgba(112,175,242,.28);
  --k-shadow:0 14px 40px rgba(3,10,25,.35);

  display:inline-flex;
  align-items:center;
  gap:.55em;

  padding:.62em 1.05em;
  border-radius:14px;           /* pill 말고 카드형 배지 */
  border:1px solid var(--k-border);

  background:
    radial-gradient(120% 140% at 12% 20%, rgba(112,175,242,.35) 0%, rgba(112,175,242,0) 55%),
    radial-gradient(120% 140% at 85% 80%, rgba(79,209,197,.18) 0%, rgba(79,209,197,0) 60%),
    linear-gradient(135deg, var(--k-bg1), var(--k-bg2));

  color:var(--k-text);
  font-weight:800;
  font-size:1rem;
  line-height:1.1;
  letter-spacing:-.02em;

  box-shadow:var(--k-shadow);
  position:relative;
  white-space:nowrap;
  user-select:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 아이콘(🚚) 톤 맞추기 */
.free-shipping-highlight .emoji,
.free-shipping-highlight .icon{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* ✅ 상단 라이트 스트로크(프리미엄 느낌) */
.free-shipping-highlight::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,0) 55%
  );
  mix-blend-mode:screen;
  opacity:.6;
}

/* ✅ “KOMORI” 느낌의 얇은 하이라이트 라인 */
.free-shipping-highlight::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:3px;
  background:linear-gradient(135deg, var(--k-accent), #a8d3ff);
  box-shadow:
    0 0 0 3px rgba(112,175,242,.14),
    0 8px 18px rgba(112,175,242,.18);
}

/* 강조 텍스트(무료배송) 살짝 다른 색 */
.free-shipping-highlight strong{
  color:#ffffff;
  font-weight:900;
}

/* 호버 가능한 환경에서만 “살짝” 인터랙션 */
@media (hover:hover){
  .free-shipping-highlight{
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .free-shipping-highlight:hover{
    transform:translateY(-1px);
    border-color:rgba(112,175,242,.45);
    box-shadow:0 18px 50px rgba(3,10,25,.45);
  }
}

/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion:reduce){
  .free-shipping-highlight{ transition:none !important; }
}

/* ✅ 반응형: 모바일에서는 더 컴팩트 + 줄바꿈 허용 */
@media (max-width:520px){
  .free-shipping-highlight{
    font-size:.95rem;
    padding:.56em .88em;
    gap:.48em;
    white-space:normal;          /* 좁은 화면에서 자연스럽게 */
    max-width:100%;
  }
}

@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}
.free-shipping {
    color: #ff5722;
    font-size: 1.2em;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}