/* 테이블 오더 (Figma: 3 테이블 오더 — pc 1:1630 · tablet 1:1575 · mobile 1:1520) */

/* ── 히어로 ── */
.tableorder-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 500px;
  padding: 330px 0 0 calc(50% - 390px);
  overflow: hidden;
  color: #fff;
}
.tableorder-hero-bg, .tableorder-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.tableorder-hero-text { position: relative; display: flex; flex-direction: column; gap: 9px; white-space: nowrap; }
.tableorder-hero-title { font-size: 40px; font-weight: 700; line-height: 40px; }
.tableorder-hero-sub { font-size: 20px; font-weight: 600; line-height: 25px; }

/* ── 공통 ── */
.tableorder-sec { width: 900px; margin: 150px auto 0; }
.tableorder-title { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }

/* ── 1. 주문 관리 ── */
.tableorder-info-list { display: grid; grid-template-columns: 287fr 286fr 287fr; gap: 20px; margin-top: 50px; }
.tableorder-card { position: relative; height: 324px; padding: 35px 30px; border-radius: 20px; overflow: hidden; isolation: isolate; }
.tableorder-card-bg, .tableorder-card-bg img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.tableorder-card-text { font-size: 20px; font-weight: 600; line-height: normal; color: #000; white-space: nowrap; }

/* ── 2. 도입 효과 ── */
.tableorder-band { display: flex; align-items: center; justify-content: center; height: 370px; margin-top: 150px; background: #f7f9fb; }
.tableorder-band-inner { display: flex; flex-direction: column; align-items: center; gap: 50px; width: 900px; }
.tableorder-band .tableorder-title { width: 100%; }
.tableorder-stats { display: block; width: 890px; }
.tableorder-stats img { width: 100%; height: auto; }

/* ── 3. 제품 사양 ── */
.tableorder-spec { margin-top: 146px; margin-bottom: 145px; }
.tableorder-spec-heading { text-align: center; }
.tableorder-spec-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 36px 20px;
  width: 952px;
  height: 192px;
  margin-top: 50px;
}
.tableorder-spec-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tableorder-spec-h { display: flex; align-items: flex-start; gap: 8px; }
.tableorder-spec-ic { position: relative; flex: none; width: 17px; height: 17px; overflow: hidden; }
.tableorder-spec-ic img { position: absolute; max-width: none; }
.tableorder-spec-h strong {
  display: flex;
  align-items: center;
  height: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.196px;
  color: #1d1d1f;
  white-space: nowrap;
}
.tableorder-spec-d { width: 297px; font-size: 15px; font-weight: 400; line-height: 23px; letter-spacing: -0.12px; color: #707070; white-space: nowrap; }
.tableorder-spec-d--2 { width: 237px; }
.tableorder-spec-item--display .tableorder-spec-d { line-height: 16px; }

/* ───────── 태블릿 (디자인 800) ───────── */
@media (max-width: 1023px) {
  .tableorder-hero { padding-left: calc(50% - 300px); }
  .tableorder-hero-title { font-size: 35px; }
  .tableorder-hero-sub { font-size: 18px; }

  .tableorder-sec { width: min(650px, 100% - 40px); margin-top: 100px; }
  .tableorder-title { font-size: 25px; }

  .tableorder-info-list { grid-template-columns: 204fr 203fr 204fr; gap: 19.52px; margin-top: 30px; }
  .tableorder-card { height: 250px; padding: 24.881px 21.327px; }
  .tableorder-card-text { font-size: 15px; }
  .tableorder-card--2 .tableorder-card-text { letter-spacing: -0.45px; }

  .tableorder-band { height: 280px; margin-top: 100px; }
  .tableorder-band-inner { gap: 30px; width: min(650px, 100% - 40px); }
  .tableorder-stats { width: 100%; }

  .tableorder-spec { margin-top: 70px; margin-bottom: 70px; }
  .tableorder-spec-list { width: 100%; margin-top: 30px; }
  .tableorder-spec-h strong { font-size: 15px; }
  .tableorder-spec-d { font-size: 12px; }
  .tableorder-spec-item--display .tableorder-spec-d { width: 203px; }
}

/* ───────── 모바일 (디자인 375) ───────── */
@media (max-width: 767px) {
  .tableorder-hero { padding-left: 40px; }
  .tableorder-hero-title { font-size: 30px; }
  .tableorder-hero-sub { font-size: 15px; }

  .tableorder-sec { width: calc(100% - 55px); margin-top: 50px; }
  .tableorder-title { font-size: 20px; }

  .tableorder-info-list { grid-template-columns: 1fr; gap: 15px; }
  .tableorder-card { display: flex; align-items: center; height: 90px; padding: 15px 30px; }
  .tableorder-card-text { font-size: 15px; }
  .tableorder-card--2 .tableorder-card-text { letter-spacing: 0; }

  .tableorder-band { height: 360px; margin-top: 50px; }
  .tableorder-band-inner { width: calc(100% - 54px); }

  .tableorder-spec { margin-top: 54px; margin-bottom: 54px; }
  .tableorder-spec-heading { text-align: left; }
  .tableorder-spec-list { display: flex; flex-direction: column; gap: 15px; height: auto; }
  .tableorder-spec-item--display { height: 50px; }
  .tableorder-spec-item--display .tableorder-spec-h strong { height: 17px; }
  .tableorder-spec-item--display .tableorder-spec-d { width: 297px; line-height: 23px; }
  .tableorder-spec-item--storage { height: 47px; }
  .tableorder-spec-item--storage .tableorder-spec-d,
  .tableorder-spec-item--install .tableorder-spec-d,
  .tableorder-spec-d--2 { line-height: 20px; }
  .tableorder-spec-item--set { gap: 11px; }
}