/* ============================================================
   popup.css — 팝업트럭(popup.html) 전용
   ------------------------------------------------------------
   이 페이지는 사례가 아직 한 건이다. 사례 수로 채울 수 없으니
   **방식과 절차로 지면을 세운다** — 그래서 큰 덩어리 두 개
   (.pop-format)와 사례 한 건(.pop-case)이 화면을 잡아 준다.
   색·간격·모서리는 styles.css 토큰만 쓴다(하드코딩 금지).
   ============================================================ */

.pop-lead {
  max-width: 780px;
  font: 400 16px/1.85 'Pretendard', sans-serif;
  color: var(--body);
  margin: 0;
}

/* ---------- 두 가지 방식 ---------- */
.pop-formats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.pop-format {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-card);
}

.pop-format .shot { height: 260px; }
.pop-format .shot img { width: 100%; height: 100%; object-fit: cover; }

.pop-format-body { padding: 28px 30px 30px; }

.pop-format-no {
  font: 300 13px 'Inter', sans-serif;
  color: var(--terra);
  letter-spacing: 0.14em;
}

.pop-format h3 {
  font: 500 26px 'Pretendard', sans-serif;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin: 10px 0 0;
}

.pop-format-sum {
  font: 400 16px/1.75 'Pretendard', sans-serif;
  color: var(--body);
  margin: 12px 0 20px;
}

.pop-format .checklist { margin: 0 0 20px; }

.pop-format-fit {
  font: 400 14px/1.7 'Pretendard', sans-serif;
  color: var(--muted);
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  word-break: keep-all;
}

/* ---------- 사례 ---------- */
.pop-case {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  margin-top: 36px;
}

.pop-case .shot { height: 100%; min-height: 340px; }
.pop-case .shot img { width: 100%; height: 100%; object-fit: cover; }

.pop-case-body p {
  font: 400 16px/1.85 'Pretendard', sans-serif;
  color: var(--body);
  margin: 0 0 18px;
}

.pop-case-spec {
  margin: 26px 0 22px;
  border-top: 1px solid var(--line);
}
.pop-case-spec > div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.pop-case-spec dt {
  font: 600 13px 'Pretendard', sans-serif;
  color: var(--muted);
}
.pop-case-spec dd {
  margin: 0;
  font: 400 15px/1.7 'Pretendard', sans-serif;
  color: var(--ink);
  word-break: keep-all;
}

/* ---------- 맺음 ---------- */
.pop-note {
  max-width: 760px;
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 400 15px/1.85 'Pretendard', sans-serif;
  color: var(--muted);
}

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .pop-formats { grid-template-columns: 1fr; gap: 22px; }
  .pop-case { grid-template-columns: 1fr; gap: 26px; }
  .pop-case .shot { min-height: 0; height: 260px; }
}

@media (max-width: 560px) {
  .pop-format .shot { height: 210px; }
  .pop-format-body { padding: 24px 20px 26px; }
  .pop-format h3 { font-size: 23px; }
  /* 사양 표가 2열이면 값이 두 글자씩 끊긴다 → 세로로 쌓는다 */
  .pop-case-spec > div { grid-template-columns: 1fr; gap: 6px; }
}