/* 실제 프로그램 화면 이미지 · 접이식 안의 산업 설명 목록.
 *
 * ★스크린샷은 목업이 아니라 실제 렌더다(README «화면 이미지는 실제 프로그램에서 뽑는다»).
 *   그래서 액자는 조용해야 한다 — 두꺼운 테두리·발광이 있으면 «꾸민 그림» 으로 읽힌다.
 * (키워드 칩 `.chips` 와 접이식 `.more` 는 components.css 로 옮겼다 — 어느 장에서나 쓴다.)
 */

/* ── 실제 프로그램 화면 ── */
.shot {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--bg-deep);
  box-shadow: var(--shadow-lg);
}
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-faint);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-panel);
  letter-spacing: 0.02em;
}
.shot--hero { box-shadow: var(--shadow-hero); }

/* ★같은 제품의 두 번째 화면. 첫 화면과 같은 무게로 그리면 무엇이 주인공인지
   흐려진다 — 그림자를 한 단계 낮춰 «딸린 화면» 으로 읽히게 한다. */
.shot--sub { margin-top: var(--s-4); box-shadow: var(--shadow-md); }

/* ★«예시 이미지» 표기. 작지만 지우지 않는다 — 무엇이 실제이고 무엇이 예시인지
   구분되지 않으면, 실제인 부분(화면·기능)의 신뢰까지 같이 잃는다. */
.shot__note {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-faint);
}

/* ── 산업별 설명 목록 (접이식 안) ── */
.whylist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-8); }
.whylist__item { padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.whylist dt { font-size: 17px; font-weight: 600; color: var(--text-strong); margin-bottom: 6px; }
.whylist dd { margin: 0; font-size: 15px; color: var(--text-muted); }
.whylist__pain { display: block; margin-top: 6px; color: var(--text-faint); font-style: italic; }

@media (max-width: 900px) {
  .whylist { grid-template-columns: 1fr; }
}