/* 견적서 담기 — products.css 의 토큰을 그대로 쓴다. 그림자 없이 1px 선과 명도 반 단계로만. */

/* ── 제품 하단 담기 블록 (order.js 가 붙인다) ───────────────────────── */
.order-add {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.order-add-now {
  font-size: 12.5px;
  color: var(--muted-65);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.order-add-now b { color: var(--heading-2); font-weight: 500; }
.order-add-now .oa-cct { color: var(--accent); }

/* 제품 정보 칸이 400px 남짓이라 한 줄에 맞춘다 — 앞 라벨 없이 단위만 뒤에 붙인다. */
.order-add-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oa-f {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted-65);
}
.oa-unit { color: var(--muted-6); font-size: 12px; }
.oa-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--muted-6); }

/* 견적용 색온도. 램프 칩과 달리 불을 켜지 않는다 — 고르기만 한다. */
.oa-sel, .oa-type, .oa-thick {
  padding: 8px 2px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  color: var(--heading-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.oa-sel:focus-visible, .oa-type:focus-visible, .oa-thick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.oa-len {
  width: 60px;
  padding: 8px 7px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  color: var(--heading-2);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.oa-len:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 판으로 파는 제품 — 가로 × 세로 */
.oa-w, .oa-h {
  width: 58px;
  padding: 8px 6px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  color: var(--heading-2);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.oa-w:focus-visible, .oa-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oa-x { color: var(--muted-6); font-size: 12px; }
.oa-type, .oa-thick { max-width: 150px; }
/* 크기 칸은 고른 치수가 통째로 읽혀야 한다. 줄이 좁을 때 눌리면 글자가 화살표에
   잘리므로, 줄여 놓지 말고 다음 줄로 넘긴다(줄은 이미 flex-wrap: wrap 이다). */
.oa-size { max-width: 220px; flex-shrink: 0; }
.oa-qty {
  width: 48px;
  padding: 8px 7px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  color: var(--heading-2);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.oa-qty:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.oa-btn {
  margin-left: auto;   /* 남는 자리를 밀어내 오른쪽 끝에 붙는다 */
  white-space: nowrap;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--heading-2);
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.oa-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 담은 직후 — 견적서 확인하기 / 계속 보기 */
.oa-msg { margin: 12px 0 0; font-size: 12.5px; color: var(--muted-78); }
.oa-msg:empty { margin: 0; }
.oa-done { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.oa-done .oa-said { color: var(--accent); }
.oa-go {
  color: var(--heading-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
.oa-go:hover { color: var(--accent); border-color: var(--accent); }
.oa-more {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted-65);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
.oa-more:hover { color: var(--heading-2); }

/* ── 떠 있는 견적서 버튼 ─────────────────────────────────────────── */
.order-fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-deep) 92%, transparent);
  backdrop-filter: blur(8px);
  color: var(--heading-2);
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.order-fab:hover { border-color: var(--accent); color: var(--accent); }
.order-fab[hidden] { display: none; }
.order-fab .n {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── 견적서 페이지 ───────────────────────────────────────────────── */
.order-page { padding: 56px 0 120px; }
.order-page h1 { font-size: 40px; margin-bottom: 10px; }
.order-lead { color: var(--muted-78); margin: 0 0 44px; }

.order-empty {
  padding: 60px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted-65);
  text-align: center;
}
.order-empty a { color: var(--heading-2); border-bottom: 1px solid var(--border); }

/* 좁은 화면에서 표만 자기 상자 안에서 밀린다 — 본문이 통째로 옆으로 새지 않게. */
.order-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.order-table { width: 100%; min-width: 340px; border-collapse: collapse; }
.order-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted-6);
  text-transform: uppercase;
  font-weight: 400;
  padding: 0 12px 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.order-table td {
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
  color: var(--muted-90);
  vertical-align: middle;
}
.order-table .c-cat {
  color: var(--muted-6);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.order-table .c-model { color: var(--heading-2); }
.order-table .c-opt { display: block; margin-top: 3px; font-size: 11.5px; color: var(--accent); }
.order-table .c-cct { color: var(--accent); white-space: nowrap; }
.order-table .c-len { white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-table .c-qty { width: 120px; }
.order-table .c-del { width: 60px; text-align: right; }
.order-table td .oa-qty { width: 82px; }
.od-del {
  background: none;
  border: none;
  padding: 4px 6px;
  color: var(--muted-6);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.od-del:hover { color: var(--accent); }
.order-sum {
  font-size: 13px;
  color: var(--muted-65);
  margin: 0 0 48px;
  font-variant-numeric: tabular-nums;
}
.order-sum b { color: var(--heading-2); font-weight: 500; }

/* 폼 */
.order-form { max-width: 720px; }
.order-form h2 { font-size: 22px; margin: 0 0 8px; }
.order-form .hint { font-size: 12.5px; color: var(--muted-6); margin: 0 0 28px; }
.of-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.of-field { display: flex; flex-direction: column; gap: 8px; }
.of-field.wide { grid-column: 1 / -1; }
.of-field label { font-size: 12.5px; color: var(--muted-65); letter-spacing: 0.02em; }
.of-field label .req { color: var(--accent); }
.of-field input {
  padding: 12px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  color: var(--heading-2);
  font: inherit;
  font-size: 14px;
}
.of-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.of-field input[type="file"] { padding: 9px 12px; color: var(--muted-78); font-size: 13px; }
.of-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: none;
  color: var(--heading-2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.of-field .note { font-size: 11.5px; color: var(--muted-6); }
.of-hp { position: absolute; left: -9999px; }

.of-submit {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.of-send {
  padding: 15px 40px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 500;
  cursor: pointer;
}
.of-send:disabled { opacity: 0.45; cursor: default; }
.of-back { font-size: 13px; color: var(--muted-65); border-bottom: 1px solid var(--border-soft); }
.of-back:hover { color: var(--heading-2); }

.of-status { margin: 22px 0 0; font-size: 13.5px; min-height: 1.5em; }
.of-status.err { color: oklch(0.72 0.15 25); }
.of-status.ok { color: var(--accent); }

/* 사양 칸은 제품 카드의 영문 설명(.product-sub)을 보여 주던 자리다. 2026-09-30 카피 정리로
   그 설명을 걷어내 늘 비므로, 좁은 화면에서만 숨기던 것을 모든 폭으로 넓힌다. */
.order-table .c-sub { display: none; }

@media (max-width: 720px) {
  .of-grid { grid-template-columns: 1fr; }
  .order-fab { right: 16px; bottom: 16px; }
}