/* 열두째 편(모바일)만의 규칙. 뼈대는 ../common/style.css 를 그대로 쓴다.

   ① 원문 그림은 휴대폰 캡처를 여러 장 묶은 넓은 그림이 많다 — 판 폭을 다 쓰고 키로 묶는다(.wideimg).
   ② 05 장은 세로로 긴 휴대폰 화면 둘을 나란히(.phones) — 복리후생 편과 같은 꼴.
   ③ 번호 장이 스물셋이라 공용 물결(.sec-20 까지)을 21~23 으로 잇는다. */
.wideimg { margin: var(--s6) 0; text-align: center; }
.wideimg img { width: 100%; height: auto; }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin: var(--s6) 0; }
.phones figure { margin: 0; text-align: center; }
.phones img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
.phones figcaption { margin-top: var(--s2); font-size: var(--fs-chip); color: var(--faint); }
@media print, screen and (min-width: 900px) {
  .sec-21 { --head-mask: url("../common/head-01.svg"); }
  .sec-22 { --head-mask: url("../common/head-02.svg"); }
  .sec-23 { --head-mask: url("../common/head-03.svg"); }
  .page .wideimg { margin: auto 0; }
  .page .wideimg img { width: auto; max-width: 100%; max-height: calc(118 * var(--mm)); margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r-card); }
  .page .phones { margin: auto 0; gap: calc(14 * var(--mm)); padding: 0 calc(50 * var(--mm)); }
  .page .phones img { width: auto; max-width: 100%; max-height: calc(118 * var(--mm)); object-fit: contain; }
  .page .phones figcaption { font-size: calc(3 * var(--tp)); margin-top: calc(2 * var(--mm)); }
}