/* ==========================================================================
   config-sheet — 좁은 화면의 담기 줄 + 올라오는 선택창 `[2026-09-18]`

   INQUIRY 화면의 구성 패널(.config-panel)은 제품 설명 아래로 길게 이어진다.
   좁은 화면에서는 설명을 읽다가 담으려면 한참을 내려야 했고, 다 내려도
   용량을 고르는 칸이 어디쯤이었는지 다시 찾아야 했다.

   그래서 **버튼 줄을 화면 아래에 붙여 따라다니게 하고**, 누르면 고르는 칸이
   아래에서 올라오게 한다. 흔한 장바구니 화면의 방식이다.

   고르는 칸과 두 버튼은 **새로 만들지 않고 옮겨 온다** (config-sheet.js).
   같은 폼이 두 벌이면 이름이 겹치고 어느 쪽이 보내졌는지 알 수 없다.

   넓은 화면에서는 패널이 오른쪽에 그대로 서 있으므로 둘 다 두지 않는다.
   ========================================================================== */

/* --- 화면 아래 버튼 줄 ------------------------------------------------------- */

.config-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 55;              /* 헤더(50) 위, 메뉴(60) 아래 */
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--gutter);
  background: var(--c-bg);
  border-top: 1px solid var(--c-line-soft);
}

/* 창 안의 두 버튼과 같은 모양이어야 한다 `[2026-09-18]` — 같은 자리에서
   같은 글자가 하나는 두 줄, 하나는 한 줄이면 다른 버튼처럼 보인다.
   글자는 접지 않는다. 15px 은 14px 과 16px 사이다 — 14px 은 화면에서 가장
   중요한 두 버튼치고 작고, 16px 은 320px 에서 칸을 넘는다 */
.config-bar .btn {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding-inline: var(--sp-3);
  font-size: 0.9375rem;   /* 15px */
  white-space: nowrap;
}

/* 줄이 본문 마지막 줄을 덮지 않게 자리를 비워 둔다.
   딱 줄 높이(48 + 위아래 12)만큼이면 된다 — 그 아래는 푸터다 `[2026-09-18]` */
.inquiry.inquiry { padding-bottom: 76px; }

/* 푸터도 같은 만큼 비워 둔다 `[2026-09-21]`. 본문에만 자리를 벌어 두었더니
   페이지 끝까지 내렸을 때 줄이 푸터 마지막 줄(저작권)을 덮었다 —
   줄은 fixed 라 문서 흐름에 자리를 차지하지 않는다.
   맨 아래 요소가 무엇이든 그 아래가 가려지므로 푸터가 받아 준다 */
.inquiry ~ .footer { padding-bottom: 76px; }

/* 본문 자체의 아래 여백은 줄인다 — 화면에 늘 떠 있는 줄이 이미 자리를
   차지해, 둘을 더하면 버튼과 푸터 사이가 176px 이나 비었다 */
.inquiry.inquiry .inquiry__inner {
  padding-bottom: 0;
  /* 좁은 화면에서는 오른쪽 기둥이 없어 칸이 하나뿐이다. 그 40px 간격이
     마지막 줄 아래에 그대로 남아 빈 칸이 됐다 */
  gap: 0;
}

/* --- 올라오는 선택창 --------------------------------------------------------- */

.config-sheet {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: flex;
  align-items: flex-end;
}

.config-sheet__backdrop {
  position: fixed;
  inset: 0;
  padding: 0;
  background: rgb(0 20 46 / .45);
  border: 0;
  cursor: default;
}

.config-sheet__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 85dvh;
  background: var(--c-bg);
  border-radius: var(--radius) var(--radius) 0 0;
  /* 아래에서 밀려 올라온다. --sheet-drag 는 끌어내리는 동안 JS 가 넣는다 */
  transform: translateY(calc(100% + var(--sheet-drag, 0px)));
  transition: transform .25s ease;
}
.config-sheet.is-open .config-sheet__panel { transform: translateY(var(--sheet-drag, 0px)); }
.config-sheet.is-dragging .config-sheet__panel { transition: none; }

/* 손잡이 — 문의 도크와 같은 규칙이다. 눌러도 닫히고 끌어내려도 닫힌다 */
.config-sheet__grab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  height: 26px;
  touch-action: none;
  cursor: grab;
}
.config-sheet__grab:active { cursor: grabbing; }

.config-sheet__grab-bar {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--c-line-card);
}

/* 고르는 칸이 들어오는 자리 */
.config-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--sp-2) var(--gutter) var(--sp-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 옮겨 온 패널 — 오른쪽 기둥에서 쓰던 윗선과 붙임을 푼다.
   여기서는 창 자체가 테두리다 */
.config-sheet__body .config-panel {
  position: static;
  gap: var(--sp-5);
  padding-top: 0;
  border-top: 0;
}

/* 패널 맨 위 제목(시리즈 이름)은 창에서는 군더더기다 — 무엇을 고르는지는
   바로 아래 "Product name" 칸이 이미 말한다 */
.config-sheet__body > .config-panel > .config-panel__title { display: none; }

/* 담긴 품목을 촘촘하게 `[2026-09-18]` — 창은 화면의 일부만 쓰는데 한 칸이
   크면 두 개만 담아도 스크롤해야 한다. 오른쪽 기둥(데스크톱)은 자리가 넉넉해
   그대로 두고, 창 안에서만 좁힌다 */
.config-sheet__body .config-panel__items { gap: var(--sp-2); }

.config-sheet__body .config-item {
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}

/* 이름과 용량은 붙여 한 덩어리로 읽히게 한다 */
.config-sheet__body .config-item__name { line-height: 1.3; }
.config-sheet__body .config-item__option { margin-top: -2px; }

/* 수량과 금액은 한 줄 — 칸 안에 또 회색 판을 깔지 않는다 */
.config-sheet__body .config-item__foot,
.config-sheet__body .config-item__row {
  min-height: 0;
  padding: 0;
  background: none;
}

/* 실제로 보내는 두 버튼이 들어오는 자리. 스크롤 밖에 고정한다 */
.config-sheet__actions {
  flex: 0 0 auto;
  padding: var(--sp-3) var(--gutter) var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
}

/* 옮겨 온 버튼 묶음이 한 겹 더 있다 — 격자는 **그 안쪽**에 걸어야 한다.
   바깥에 걸면 칸이 하나뿐이라 아무것도 나뉘지 않는다 `[2026-09-18]`.

   두 칸을 같은 폭으로 못 박는다. flex 로 두면 하나는 링크(go cart),
   하나는 폼 안의 버튼이라 글자 너비가 섞여 191px : 135px 로 어긋났다 */
.config-sheet__actions .config-panel__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sp-2);
}
.config-sheet__actions .config-panel__actions > * { min-width: 0; }
.config-sheet__actions .config-panel__actions form { display: flex; }

/* 키를 맞추고 글자를 한 줄로 — "Request a Quote" 가 두 줄로 접히면서
   그 버튼만 키가 컸다 */
.config-sheet__actions .btn {
  width: 100%;
  height: 44px;
  padding-inline: var(--sp-3);
  /* 15px — 토큰에 없는 값이다 (14px 과 16px 사이). 14px 은 창에서 가장 중요한
     두 버튼치고 작고, 16px 은 "Request a Quote" 가 320px 화면에서 칸을 넘는다 */
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* --- 넓은 화면에서는 쓰지 않는다 --------------------------------------------- */

@media (min-width: 768px) {
  .config-bar,
  .config-sheet { display: none; }
  .inquiry.inquiry { padding-bottom: 0; }
  .inquiry.inquiry .inquiry__inner { padding-bottom: 64px; gap: 40px; }

  /* 줄이 없으니 푸터도 자리를 비워 둘 필요가 없다 — footer.css 의 값으로 되돌린다 */
  .inquiry ~ .footer { padding-bottom: 0; }
}