/* 키오스크 (Figma: 4 키오스크 — pc 1:1792 · tablet 1:1739 · mobile 1:1685) */

/* ── 히어로 ── */
.kiosk-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;
}
.kiosk-hero-bg, .kiosk-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.kiosk-hero-text { position: relative; display: flex; flex-direction: column; gap: 9px; white-space: nowrap; }
.kiosk-hero-title { font-size: 40px; font-weight: 700; line-height: 40px; }
.kiosk-hero-sub { font-size: 20px; font-weight: 600; line-height: 25px; }

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

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

/* ── 2. 비교 ── */
.kiosk-cmp-pic { display: block; width: 892.5px; margin-top: 50px; }
.kiosk-cmp-pic img { width: 100%; height: auto; }

/* ── 3. 제품 사양 ── */
.kiosk-spec { margin-bottom: 150px; }
.kiosk-spec-heading { text-align: center; }
.kiosk-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;
}
.kiosk-spec-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kiosk-spec-h { display: flex; align-items: flex-start; gap: 8px; }
.kiosk-spec-ic { position: relative; flex: none; width: 17px; height: 17px; overflow: hidden; }
.kiosk-spec-ic img { position: absolute; max-width: none; }
.kiosk-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;
}
.kiosk-spec-d { width: 297px; font-size: 15px; font-weight: 400; line-height: 23px; letter-spacing: -0.12px; color: #707070; white-space: nowrap; }
.kiosk-spec-d--narrow { width: 242px; }

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

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

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

  .kiosk-cmp-pic { width: 100%; margin-top: 30px; }

  .kiosk-spec { margin-bottom: 100px; }
  .kiosk-spec-list { width: 100%; margin-top: 30px; }
  .kiosk-spec-h strong { font-size: 15px; }
  .kiosk-spec-d { font-size: 12px; }
}

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

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

  .kiosk-info-list { grid-template-columns: 1fr; gap: 15px; }
  .kiosk-card { display: flex; align-items: center; height: 90px; padding: 15px 30px; }

  /* Figma: 비교 이미지 322.5px (본문 320px 보다 2.5px 넓음) */
  .kiosk-cmp-pic { width: calc(100% + 2.5px); }

  .kiosk-spec { margin-bottom: 50px; }
  .kiosk-spec-heading { text-align: left; }
  .kiosk-spec-list { display: flex; flex-direction: column; gap: 15px; height: auto; }
  .kiosk-spec-item--display .kiosk-spec-h strong { height: 17px; }
  .kiosk-spec-item--cpu .kiosk-spec-d { width: 237px; }
  .kiosk-spec-item--set { gap: 11px; }
  .kiosk-spec-d--2, .kiosk-spec-item--speaker .kiosk-spec-d { line-height: 20px; }
}

/* 태블릿: 고정폭 설명글이 화면 밖으로 넘치지 않게 (768–1023 에서 가로 스크롤 방지) */
@media (max-width: 1023px) and (min-width: 768px) {
  .kiosk-spec-d { width: auto; max-width: 297px; white-space: normal; }
}