/*
 * fx 화면 CSS - cart (장바구니 /cart/). 3-B 갈래 K, 2026-10-15.
 * 마크업은 플러그인(FluxShop cart.php)이 소유한다 - CSS 덮기만 한다. 수량·삭제·선택·쿠폰 훅(.fhs-cart-*, #fhs-*)과 합계 계산은 그대로.
 * 빈 장바구니만 inc/fx/screens-cart.php 가 다음 행동이 있는 카드(fx-empty)로 바꾼다.
 * 서랍(#fhs-cart-drawer)·토스트·모달은 C0(pages/_ui-states.css)가 덮었으므로 여기서 다루지 않는다.
 * 면: 머리 얇은 어두운 띠(공통 셸) + 본문 밝게, 합계 카드만 어둡게(스티키) - 체크아웃과 같은 문법.
 */

/* ===== 0. 토큰 ===== */
.fx-plugin--cart{
  --ct-edge:var(--fx-edge-paper);
  --ct-edge-strong:var(--fx-edge-paper-strong);
  --ct-field-edge:rgba(17,17,17,.5);
}

/* ===== 1. 공통 셸 (template-parts/fx/plugin.php) ===== */
.fx-plugin--cart{display:block;background:var(--fx-paper);color:var(--fx-k1)}
.fx-plugin--cart .fx-plugin__head{background:var(--fx-s1);color:var(--fx-t1);padding:104px var(--fx-gut) 28px;border-bottom:1px solid var(--fx-edge-ink)}
.fx-plugin--cart .fx-plugin__head-in{max-width:var(--fx-wrap-w);margin:0 auto}
.fx-plugin--cart .fx-plugin__title{margin:0;font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1.2;letter-spacing:-.03em;color:var(--fx-t1)}
.fx-plugin--cart .fx-plugin__body{background:var(--fx-paper);padding:40px var(--fx-gut) 96px;min-height:50vh}
.fx-plugin--cart .fx-plugin__wrap{max-width:var(--fx-wrap-w);margin:0 auto}
.fx-plugin--cart .fs-plugin{max-width:none;margin:0;padding:0}

/* ===== 2. 배치 ===== */
.fx-plugin--cart .fluxshop-cart.fx-ui{max-width:none;padding:0;background:none}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-layout{grid-template-columns:minmax(0,1fr) 392px;gap:48px;align-items:start}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-main{min-width:0}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary{position:sticky;top:96px;min-width:0}
html.admin-bar .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary{top:128px}

/* ===== 3. 배송 유형 탭(칩) ===== */
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-tabs{gap:8px;margin:0 0 16px}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-tab.fxu-chip{min-height:44px;padding:0 18px;background:#fff;border:1px solid var(--ct-field-edge);border-radius:var(--fx-radius-pill);font-size:15px;font-weight:600;color:var(--fx-k2)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-tab.fxu-chip.is-active{background:var(--fx-brand);border-color:var(--fx-k1);color:var(--fx-k1)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-tab span{font-weight:500;font-variant-numeric:tabular-nums}

/* ===== 4. 항목 행 목록(면 없이 선으로) ===== */
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-sublist{border-top:1px solid var(--fx-k1)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row{grid-template-columns:44px 88px minmax(0,1fr) 44px;gap:16px;padding:20px 0;border-bottom:1px solid var(--ct-edge)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__thumb{width:88px;height:88px;border-radius:var(--fx-radius-m);background:var(--fx-paper-2)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__body{gap:24px}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__info{gap:4px}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__name{font-size:17px;font-weight:600;line-height:1.4;color:var(--fx-k1)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__opt,
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__unit{font-size:14px;color:var(--fx-k3);font-variant-numeric:tabular-nums}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__ctrl{gap:20px}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__sub{min-width:104px;font-size:18px;font-weight:700;color:var(--fx-k1)}
/* 수량: 버튼 44px */
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__qty.fxu-qty{background:#fff;border:1px solid var(--ct-field-edge);border-radius:var(--fx-radius-pill)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-qty{width:44px;height:44px;font-size:20px;color:var(--fx-k1)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-qty:hover{background:var(--fx-paper-2)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-qtyinput{width:44px;height:44px;font-size:16px;font-weight:700;color:var(--fx-k1);font-variant-numeric:tabular-nums}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__del{width:44px;height:44px;margin-right:0;color:var(--fx-k3)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__del:hover{background:var(--fx-paper-2);color:var(--fx-k1)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-empty-tab{padding:40px 0;font-size:15px;color:var(--fx-k3)}
/* 체크박스: 보이는 상자 22px, 켜진 상자 안에만 라임 */
.fx-plugin--cart .fluxshop-cart.fx-ui .fxu-check__box{width:22px;height:22px;border:2px solid var(--ct-field-edge);border-radius:6px;background:#fff}
.fx-plugin--cart .fluxshop-cart.fx-ui .fxu-check input:checked+.fxu-check__box{background:var(--fx-brand);border-color:var(--fx-k1)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fxu-check input:checked+.fxu-check__box::after{left:6px;top:1px;width:6px;height:11px;border-color:var(--fx-k1)}
/* 하단 액션 */
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-actionbar{gap:12px;margin-top:20px}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-selectall.fxu-check{font-size:15px;font-weight:600}
.fx-plugin--cart .fluxshop-cart.fx-ui .fxu-btn{min-height:44px;border-radius:var(--fx-radius-m) !important;font-size:15px}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-actionbar .fxu-btn.fxu-btn--ghost{background:#fff !important;color:var(--fx-k1) !important;border:1px solid var(--fx-k1)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-actionbar .fxu-btn.fxu-btn--ghost:hover{background:var(--fx-paper-2) !important}
.fx-plugin--cart .fluxshop-cart.fx-ui .fxu-btn--lg{min-height:56px;font-size:17px}

/* ===== 5. 합계 카드: 어둡게, 스티키, 주문 버튼은 라임 하나 ===== */
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary.fxu-card{
  --fx-ink:var(--fx-t1);--fx-ink-2:var(--fx-t2);--fx-ink-3:var(--fx-t3);--fx-ink-4:var(--fx-t3);
  --fx-surface:var(--fx-s2);--fx-canvas:var(--fx-s3);--fx-sunken:var(--fx-s2);
  --fx-line:var(--fx-edge-ink);--fx-line-strong:var(--fx-edge-ink-strong);
  --fx-lime:var(--fx-brand);--fx-lime-row:transparent;
  --fx-accent:var(--fx-brand);--fx-accent-hover:var(--fx-brand-hover);--fx-on-accent:var(--fx-brand-ink);
  --fx-danger:var(--fx-alert);
  padding:28px;background:var(--fx-s1) !important;color:var(--fx-t1);
  border:1px solid var(--fx-edge-ink) !important;border-radius:var(--fx-radius-l);box-shadow:0 30px 60px -36px rgba(17,17,17,.55);
}
.fx-plugin--cart .fhs-cart-summary__coupon{display:flex;gap:12px;align-items:center}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary__coupon input.fxu-input{flex:1 1 auto;min-width:0;height:auto;min-height:52px;padding:0 16px;font-size:16px;color:var(--fx-t1) !important;background:var(--fx-s2) !important;border:1px solid var(--fx-edge-ink-strong) !important;border-radius:var(--fx-radius-m) !important;box-shadow:none}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary__coupon input.fxu-input::placeholder{color:var(--fx-t3);opacity:1}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary__coupon input.fxu-input:focus-visible{outline:2px solid var(--fx-brand);outline-offset:2px;border-color:var(--fx-brand) !important}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary__coupon .fxu-btn{flex:none;height:auto;min-height:52px;padding:0 20px;font-size:15px}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary .fxu-btn.fxu-btn--ghost{background:transparent !important;color:var(--fx-t1) !important;border:1px solid var(--fx-edge-ink-strong)}
.fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary .fxu-btn.fxu-btn--ghost:hover{background:var(--fx-s3) !important}
.fx-plugin--cart .fhs-cart-summary__coupon-result{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--fx-t2)}
.fx-plugin--cart .fhs-cart-summary__coupon-result:empty{display:none}
.fx-plugin--cart .fhs-cart-summary .fhs-coupon-error{color:var(--fx-alert)}
.fx-plugin--cart .fhs-cart-summary__lines{margin:20px 0 0;padding-top:12px;border-top:1px solid var(--fx-edge-ink)}
.fx-plugin--cart .fhs-cart-summary__line.fxu-sum__row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;margin:0;padding:0;border:0}
.fx-plugin--cart .fhs-cart-summary__line dt{font-size:15px;color:var(--fx-t2)}
.fx-plugin--cart .fhs-cart-summary__line dd{margin:0;font-size:16px;font-weight:600;color:var(--fx-t1);font-variant-numeric:tabular-nums}
.fx-plugin--cart .fhs-cart-summary__line--discount dd{color:var(--fx-brand)}
.fx-plugin--cart .fhs-cart-summary__line--discount[hidden]{display:none}
.fx-plugin--cart .fhs-cart-summary__total.fxu-sum__row--total{display:block;margin-top:12px;padding:20px 0 0;border-top:1px solid var(--fx-edge-ink-strong);background:none}
.fx-plugin--cart .fhs-cart-summary__total>span{display:block;margin-bottom:4px;font-size:15px;font-weight:600;color:var(--fx-t2)}
.fx-plugin--cart .fhs-cart-summary__total>strong{display:block;font-size:36px;font-weight:800;line-height:1.15;letter-spacing:-.03em;color:var(--fx-t1);font-variant-numeric:tabular-nums}
.fx-plugin--cart .fhs-cart-summary__actions{display:grid;gap:12px;margin-top:24px}
.fx-plugin--cart .fhs-cart-summary__actions .fxu-btn{width:100%}
.fx-plugin--cart .fhs-cart-summary__actions .fxu-btn--lg{min-height:56px}
.fx-plugin--cart .fhs-cart-summary__actions #fhs-cart-order-all{font-size:18px;font-weight:700}

/* ===== 6. 빈 장바구니(screens-cart.php 가 넣는 카드) ===== */
.fx-plugin--cart #fhs-cart-root>.fx-cart-empty{max-width:640px;margin:24px auto 0;padding:56px 32px;justify-items:center;text-align:center;background:#fff;border:1px solid var(--ct-edge);border-radius:var(--fx-radius-l)}
.fx-plugin--cart .fx-cart-empty .fx-empty__t{color:var(--fx-k1)}
.fx-plugin--cart .fx-cart-empty .fx-empty__d{color:var(--fx-k2);font-size:17px;line-height:1.7}
.fx-plugin--cart .fx-cart-empty .fx-empty__act{justify-content:center;margin-top:12px}
.fx-plugin--cart .fx-cart-empty .fx-button--line{color:var(--fx-k1);box-shadow:inset 0 0 0 1px var(--ct-field-edge)}

/* ===== 7. 반응형 ===== */
@media (max-width:1024px){
  .fx-plugin--cart .fx-plugin__head{padding-top:96px}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary,
  html.admin-bar .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary{position:static}
}
@media (max-width:768px){
  .fx-plugin--cart .fx-plugin__body{padding:24px var(--fx-gut) 56px}
  /* 행: 체크|이미지|이름·단가|삭제 / 수량·금액은 아래 줄 */
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row{grid-template-columns:44px 72px minmax(0,1fr) 44px;gap:12px;padding:16px 0}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__thumb{width:72px;height:72px}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__body{display:grid;gap:12px;align-items:start}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__ctrl{justify-content:space-between;gap:12px}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__sub{min-width:0;font-size:17px}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary.fxu-card{padding:20px}
  .fx-plugin--cart .fhs-cart-summary__total>strong{font-size:32px}
  .fx-plugin--cart #fhs-cart-root>.fx-cart-empty{padding:40px 20px}
}
@media (max-width:480px){
  .fx-plugin--cart .fx-plugin__head{padding:88px var(--fx-gut) 20px}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row{grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:"chk body del";}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__thumb{display:none}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__check{grid-area:chk}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__body{grid-area:body}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-row__del{grid-area:del}
  .fx-plugin--cart .fhs-cart-summary__coupon{flex-wrap:wrap}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary__coupon input.fxu-input{flex:1 1 100%}
  .fx-plugin--cart .fluxshop-cart.fx-ui .fhs-cart-summary__coupon .fxu-btn{width:100%}
}

/* ===== 8. 모션 줄이기 ===== */
@media (prefers-reduced-motion:reduce){
  .fx-plugin--cart :is(.fhs-cart-qty,.fhs-cart-row__del,.fxu-btn,.fxu-chip){transition:none !important}
}