/* 아홉째 편(복리후생)만의 규칙. 뼈대는 ../common/style.css 를 그대로 쓴다.

   화면 갈무리가 한 칸을 지는 장은 넷째 편(eval/style.css)과 같은 짜임을 쓴다 — 제품 표가
   넓어 공용 두 칸(1.15 : 1, 키 62mm)에 걸면 글자가 깨알이 된다. 두 편이 같은 값을 가지므로
   한쪽을 고치면 다른 쪽도 함께 고친다(welfare.test.mjs 가 대조한다).
   번호 장은 열아홉이라 머리 물결은 공용 CSS 의 스무 벌 안에 든다. */
@media print, screen and (min-width: 900px) {
  .page .split.wide { grid-template-columns: 1fr 1.8fr; gap: calc(8 * var(--mm)); }
  .flip .page .split.wide { grid-template-columns: 1.8fr 1fr; }
  .page .split.wide .art.shot img { width: 100%; max-height: calc(112 * var(--mm)); object-fit: contain; }
}

/* 06 장 — 휴대폰 화면 셋을 나란히. 화면마다 키가 달라 판 높이(약 120mm)에 맞춰 키로 묶는다. */
.phones { display: grid; grid-template-columns: repeat(3, 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) {
  .page .phones { margin: auto 0; gap: calc(10 * var(--mm)); padding: 0 calc(20 * 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)); }
}