/* ==========================================================================
   config-panel — INQUIRY 우측 구성 패널
   좌측 상세를 갈아끼워도 이 패널은 유지된다 (기능정의서 P2)
   합계는 품목 합계·수량만 둔다. 배송비·세금 줄은 두지 않는다 (P11)
   ========================================================================== */

.config-panel {
  display: flex;
  flex-direction: column;
  gap: 27px;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line-soft);
}

.config-panel__title {
  color: var(--c-text-price);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.config-panel__selects {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.config-panel__divider {
  height: 1px;
  background: var(--c-line-soft);
}

/* --- 선택한 제품 목록 --------------------------------------------------------- */

.config-panel__group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.config-panel__items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.config-item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: var(--sp-5);
  background: var(--c-surface-alt);
  border-radius: var(--radius);
}

.config-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* 파형(스와치 + 카탈로그번호)이 위, 제품명이 아래 */
.config-item__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.config-item__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.config-item__swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--swatch);
}

.config-item__catno {
  color: var(--c-text);
  font-family: var(--ff-num);
  font-size: 0.8125rem;             /* 13px */
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.config-item__name {
  color: var(--c-text-price);
  font-size: var(--fs-md);          /* 16px */
  font-weight: var(--fw-bold);
  line-height: 1.16;
}

.config-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  color: var(--c-text-chip);
}
.config-item__remove:hover { background: var(--c-chip-off); color: var(--c-text); }

/* --- 용량 · 수량 · 금액 ------------------------------------------------------- */

.config-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 38px;
  padding: 5px var(--sp-5);
  background: var(--c-chip-off);
  border-radius: var(--radius-sm);
}

.config-item__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.config-item__size {
  color: var(--c-text-price);
  font-size: var(--fs-base);        /* 11 → 14px */
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
}

.config-item__price {
  color: var(--c-text-price);
  font-size: var(--fs-base);        /* 11 → 14px */
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

/* 수량 조절(.qty)은 components/qty.css 로 옮겼다 `[2026-09-18]`.
   이 파일을 부르지 않는 장바구니에서 테두리가 통째로 빠져
   "− 1 +" 가 선 없이 떠 있었다 */

/* --- 합계 ------------------------------------------------------------------- */

.config-panel__summary {
  display: flex;
  flex-direction: column;
  gap: 31px;
}

.config-panel__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.config-panel__label {
  color: var(--c-text-meta);
  font-size: var(--fs-base);     /* 12 → 14px */
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

.config-panel__value {
  color: var(--c-text);
  font-size: 0.9375rem;          /* 13 → 15px */
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-align: right;
}

.config-panel__pair {
  display: flex;
  align-items: center;
  gap: 7px;
}

.config-panel__count {
  color: var(--c-blue-deep);
  font-size: var(--fs-md);       /* 14 → 16px */
  font-weight: var(--fw-bold);
}

.config-panel__total {
  color: var(--c-blue-deep);
  font-size: 1.375rem;           /* 20 → 22px */
  font-weight: var(--fw-bold);
}

/* 두 칸을 반씩 나눈다 `[2026-09-18]`.
   flex 로 두고 .btn 에만 flex 를 걸었더니, 한쪽은 링크(go cart)라 칸을 받고
   다른 한쪽은 **폼에 싸인 버튼**이라 칸을 못 받아 768px 에서 498px : 166px 로
   어긋났다. 격자는 무엇이 들어오든 반씩 준다 */
.config-panel__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 9px;
}
.config-panel__actions > * { min-width: 0; }
.config-panel__actions form { display: flex; }

/* 글자는 한 줄로 — "Request a Quote" 가 접히면서 그 버튼만 키가 컸다 */
.config-panel__actions .btn {
  width: 100%;
  white-space: nowrap;
}

/* --- 빈 상태 (시안 node 112:502) --------------------------------------------- */

.config-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-5);
  background: var(--c-surface-alt);
  border-radius: var(--radius);
  text-align: center;
}

.config-panel__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border: 1px solid var(--c-line-card);
  border-radius: 50%;
  color: var(--c-line-card);
  font-size: 1.0625rem;          /* 17px */
  font-weight: var(--fw-bold);
  line-height: 1;
}

.config-panel__empty-title {
  max-width: 248px;
  color: var(--c-navy);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.16;
}

.config-panel__empty-desc {
  max-width: 301px;
  color: var(--c-text-sub);
  font-size: 0.8125rem;          /* 13px */
  font-weight: var(--fw-regular);
  line-height: 1.54;
}

@media (min-width: 1024px) {
  .config-panel {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
    padding-top: 0;
    border-top: 0;
  }
}

/* 고른 품목 없이 go cart · Request a Quote 를 눌렀을 때.
   장바구니의 .order-summary__warning 과 같은 모양이다. */
.config-panel__warning {
  padding: var(--sp-3) var(--sp-4);
  background: #fdf2f2;
  border-radius: var(--radius-sm);
  color: var(--c-danger);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
}