/* 포스기 / 카드 단말기 (Figma: 2 포스기, 카드단말기 — pc 1:1453 · tablet 1:1385 · mobile 1:1318) */

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

/* ── 공통 ── */
.pos-sec { width: 900px; margin: 150px auto 0; }
.pos-title { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }
.pos-sub { font-size: 20px; font-weight: 500; line-height: normal; color: #707070; }
.pos-head { display: grid; gap: 10px; text-align: center; }

/* ── 1. 실시간 연동 ── */
.pos-link-pic { display: block; margin-top: 50px; }
.pos-link-pic img { width: 100%; height: 410px; object-fit: cover; border-radius: 20px; }

/* ── 2. 특징 ── */
.pos-feat { display: flex; flex-direction: column; gap: 50px; }
.pos-feat-row { display: flex; align-items: center; gap: 70px; }
.pos-feat-img { flex: none; width: 495px; height: 293px; object-fit: cover; border-radius: 20px; }
.pos-feat-img--1 { height: 300px; }
.pos-feat-text { display: grid; white-space: nowrap; }
.pos-feat-title, .pos-feat-desc { grid-area: 1 / 1; }
.pos-feat-title { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }
.pos-feat-desc { margin-top: 138px; font-size: 20px; font-weight: 500; line-height: 1.3; color: #707070; }

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

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

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

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

  .pos-link-pic { margin-top: 30px; }
  .pos-link-pic img { height: auto; aspect-ratio: 650 / 304; }

  .pos-feat { gap: 25px; }
  .pos-feat-row { gap: 50.548px; }
  .pos-feat-img { width: 357.444px; height: 211.578px; }
  .pos-feat-img--1 { height: 216.633px; }
  .pos-feat-img--3 { object-fit: contain; }
  .pos-feat-title { font-size: 25px; }
  .pos-feat-desc { margin-top: 99.65px; font-size: 18px; }

  .pos-cmp { margin-top: 100px; }
  .pos-cmp-pic { margin-top: 30px; }

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

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

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

  .pos-link-pic img { aspect-ratio: 320 / 739; }

  .pos-feat { gap: 35px; margin-bottom: -3px; } /* Figma: 섹션 높이 1063 고정 → 내용이 3px 넘침 */
  .pos-feat-row { flex-direction: column-reverse; align-items: flex-start; gap: 15px; }
  .pos-feat-img, .pos-feat-img--1 { width: 100%; height: auto; aspect-ratio: 320 / 195; object-fit: contain; }
  .pos-feat-img--1 { aspect-ratio: 320 / 199; }
  .pos-feat-img--3 { aspect-ratio: 320 / 194; }
  .pos-feat-title { font-size: 20px; }
  .pos-feat-desc { margin-top: 82px; font-size: 15px; }

  .pos-cmp { margin-top: 50px; }

  .pos-spec { margin-top: 50px; margin-bottom: 50px; }
  .pos-spec-heading { text-align: left; }
  .pos-spec-list { display: flex; flex-direction: column; gap: 15px; height: auto; }
  .pos-spec-item--display { order: 1; }
  .pos-spec-item--set { order: 2; height: 67px; }
  .pos-spec-item--link { order: 3; gap: 11px; }
  .pos-spec-item--storage { order: 4; }
  .pos-spec-item--install { order: 5; }
  .pos-spec-item--func { order: 6; }
  .pos-spec-item--display .pos-spec-h strong { height: 17px; }
  .pos-spec-d--2 { line-height: 20px; }
}

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