/* 열셋째 편(위젯 대시보드)만의 규칙. 뼈대는 ../common/style.css 를 그대로 쓴다.

   ① 원문 위젯 그림은 가로로 넓다 — 판 폭을 다 쓰고 키로 묶는다(.wideimg, 모바일 편과 같은 꼴).
   ② 02 장은 근태현황 그림 셋을 겹쳐 세운다(공용 .shot.stack). 판 하나에 홀로 서므로 판 가운데에 둔다.
   ③ 07 장은 작은 위젯 넷을 한 줄에(.minis). */
.wideimg { margin: var(--s6) 0; text-align: center; }
.wideimg img { width: 100%; height: auto; }
.minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); align-items: end; margin: var(--s6) 0; }
.minis figure { margin: 0; text-align: center; }
.minis img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.minis figcaption { margin-top: var(--s2); font-size: var(--fs-chip); color: var(--faint); }
@media print, screen and (min-width: 900px) {
  .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 .wide-deck { width: calc(170 * var(--mm)); margin: auto auto; }
  .page .wide-deck .deck img { width: 79%; max-height: none; }
  .page .minis { margin: auto 0; gap: calc(8 * var(--mm)); }
  .page .minis img { max-height: calc(100 * var(--mm)); width: auto; max-width: 100%; margin: 0 auto; }
  .page .minis figcaption { font-size: calc(3 * var(--tp)); margin-top: calc(2 * var(--mm)); }
}