/* 매장 장비 페이지 공통 블록 (카드단말기 · 키오스크 · 테이블오더 · QR·NFC 주문) — 접두사 dev-
   디자인: PC 1920(본문 1120/900) · 태블릿 800(본문 600) · 모바일 375(본문 335)
   섹션 간격 150 / 100 / 50, 페이지 바탕 #f5f5f5 */

.dev-page { padding-bottom: 150px; background: #f5f5f5; }
.dev-w1120 { width: min(1120px, 100% - 40px); margin-inline: auto; }
.dev-w900 { width: min(900px, 100% - 40px); margin-inline: auto; }
.dev-sec { margin-top: 150px; }

/* ── 첫 화면 (파란 그라데이션 띠) ── */
.dev-hero { display: flex; align-items: center; height: 300px; background: linear-gradient(179deg, #6aa1cb 5.08%, #1687f5 95.46%); }
.dev-hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: min(1120px, 100% - 40px); margin-inline: auto; padding-left: 57px; }
.dev-hero-label { color: rgba(255, 255, 255, .7); font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.4px; }
.dev-hero-title { color: #fff; font-size: 30px; font-weight: 800; line-height: normal; }

/* ── 섹션 제목 ── */
.dev-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 50px; color: var(--ink); text-align: center; }
.dev-title { font-size: 30px; font-weight: 700; line-height: normal; }
.dev-desc { font-size: 20px; font-weight: 500; line-height: normal; }
.dev-desc b { font-weight: 700; } /* 설명 속 가운뎃점 Bold (디자인) */

/* ── 구성 카드 (회색 띠, 첫 화면 바로 아래) ── */
.dev-types { padding: 110.71px 0; background: var(--bg-soft); }
.dev-types-list { display: flex; justify-content: center; gap: 20px; }
.dev-types-list li { flex: 0 1 264.67px; min-width: 0; }
.dev-types-list img { width: 100%; aspect-ratio: 264.67 / 342.575; object-fit: cover; }

/* ── 큰 화면 이미지 ── */
.dev-shot { width: 100%; }

/* ── 이미지 2장 나란히 ── */
.dev-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dev-pair img { width: 100%; }

/* ── 자주 묻는 질문 (목록 스타일은 base.css 공통) ── */
.dev-faq .dev-head { margin-bottom: 50px; }

@media (max-width: 1159px) {
  .dev-hero-inner { padding-left: 5.1%; }
}

@media (max-width: 1023px) {
  .dev-page { padding-bottom: 100px; }
  .dev-w1120, .dev-w900 { width: min(600px, 100% - 40px); }
  .dev-sec { margin-top: 100px; }

  .dev-hero { height: 200px; background-image: linear-gradient(178.5deg, #6aa1cb 5.08%, #1687f5 95.46%); }
  .dev-hero-inner { gap: 5px; width: min(600px, 100% - 40px); padding-left: 0; }
  .dev-hero-label { font-size: 15px; line-height: normal; letter-spacing: 0; }
  .dev-hero-title { font-size: 25px; }

  .dev-head { margin-bottom: 30px; }
  .dev-title { font-size: 25px; }
  .dev-desc { font-size: 18px; }

  .dev-types { padding: 53.24px 0; }
  .dev-types-list { gap: 10.71px; }
  .dev-types-list li { flex-basis: 141.79px; }

  .dev-pair { gap: 10px; }
  .dev-faq .dev-head { margin-bottom: 30px; }
}

@media (max-width: 767px) {
  .dev-page { padding-bottom: 50px; }
  .dev-w1120, .dev-w900 { width: min(335px, 100% - 40px); }
  .dev-sec { margin-top: 50px; }

  .dev-hero { height: 127px; background-image: linear-gradient(177.9deg, #6aa1cb 5.08%, #1687f5 95.46%); }
  .dev-hero-inner { align-items: center; width: min(335px, 100% - 40px); text-align: center; }
  .dev-hero-label { font-size: 12px; }
  .dev-hero-title { font-size: 20px; }

  .dev-head { gap: 5px; margin-bottom: 20px; }
  .dev-title { font-size: 15px; }
  .dev-desc { font-size: 12px; }

  .dev-types { padding: 26.28px 0; }
  .dev-types-list { gap: 6px; }
  .dev-types-list li { flex-basis: 100px; }

  .dev-pair { gap: 5px; }
  .dev-faq .dev-head { margin-bottom: 20px; }
}