/* 여러 작품을 한 화면에서 감상한 뒤 다음 묶음을 위로 넘긴다. */
.board-mode { background: var(--display-green); gap: 18px; overflow: hidden; }
.board-mode .brand-header { margin-inline: clamp(20px, 3vw, 64px); padding-bottom: 22px; }
.board-mode .vote-qr { width: clamp(96px, 12vh, 140px); }
.board-mode .brand-landscape { display: none; }
.board-mode .stage { padding-inline: clamp(20px, 3vw, 64px); overflow: hidden; }
.board-mode #rows {
  --board-gap: clamp(12px, 1.25vw, 24px);
  gap: var(--board-gap);
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.board-mode #rows > .gallery-notice { grid-column: 1 / -1; }
.board-page { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--board-columns, 4), minmax(0, 1fr)); gap: var(--board-gap); }
.board-column { display: grid; align-content: center; justify-items: center; gap: var(--board-gap); min-width: 0; min-height: 0; }
.board-card { position: relative; min-height: 0; overflow: hidden; border-radius: 8px; background: #163c31; }
.board-card { transform-origin: center; backface-visibility: hidden; box-shadow: 0 12px 28px #0003; }
.board-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.board-card figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 5px 9px;
  border-radius: 4px; background: #081e19c9; color: var(--display-ivory);
  font-size: clamp(12px, .85vw, 17px); font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.board-mode .flow-controls, .slideshow-mode .flow-controls { display: none; }
.board-controls { display: none; }
.board-mode .board-controls { display: block; margin-top: 14px; }
.board-pause { width: 100%; margin-top: 12px; padding: 9px 12px; color: inherit; font: inherit; background: #ffffff10; border: 1px solid #ffffff35; border-radius: 6px; cursor: pointer; }
.board-pause:active { background: #ffffff25; }

/* 현재 모션 보드: 사진 사이 간격을 고정하고 작품 묶음을 가운데 정렬한다. */
.fade-mode { --display-gutter: clamp(16px, 3vw, 64px); gap: clamp(16px, 2vh, 24px); }
.fade-mode .brand-header { margin-inline: var(--display-gutter); padding-bottom: 24px; gap: 24px; }
.fade-mode .brand-identity { flex: none; }
.fade-mode .brand-identity img { height: clamp(88px, 15vh, 160px); max-width: 40vw; }
.fade-mode .vote-qr { width: clamp(128px, 18vh, 208px); }
.fade-mode .vote-title { font-size: clamp(20px, 2.1vw, 32px); }
.fade-mode .stage { padding-inline: var(--display-gutter); }
.fade-mode #rows { margin-bottom: var(--display-gutter); overflow: visible; }
.fade-mode .board-page { grid-template-columns: repeat(var(--board-columns, 4), max-content); justify-content: center; }
.fade-mode .board-page--mosaic { display: block; }
.board-page--mosaic .board-card { position: absolute; }

/* 작은 세로 화면에서도 상단을 한 줄로 정돈한다. */
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
  .fade-mode {
    --display-gutter: clamp(20px, 3.125vw, 28px);
    padding-top: 24px;
    gap: 20px;
  }
  .fade-mode .brand-header { gap: 20px; padding-bottom: 20px; }
  .fade-mode .brand-identity { flex: 1; min-width: 0; align-items: flex-start; }
  .fade-mode .brand-identity img { width: 100%; max-width: 292px; height: auto; }
  .fade-mode .vote-side { flex: none; gap: 16px; }
  .fade-mode .vote-copy { max-width: 190px; }
  .fade-mode .vote-title { font-size: 18px; line-height: 1.25; }
  .fade-mode .vote-hint { margin-top: 8px; font-size: 11px; }
  .fade-mode .vote-qr { width: clamp(128px, 19.27vw, 168px); }
  .fade-mode #rows { --board-gap: 12px; }
}

/* 1152×768 가로 LED: 상단 높이를 줄여 사진 6장의 감상 공간을 확보한다. */
@media (min-width: 901px) and (max-width: 1400px) and (max-height: 900px) and (orientation: landscape) {
  .fade-mode { --display-gutter: 24px; padding-top: 20px; gap: 20px; }
  .fade-mode .brand-header { padding-bottom: 16px; }
  .fade-mode .brand-identity img { width: 292px; height: auto; max-width: 32vw; }
  .fade-mode .vote-side { gap: 20px; }
  .fade-mode .vote-title { font-size: 22px; }
  .fade-mode .vote-hint { font-size: 12px; margin-top: 8px; }
  .fade-mode .vote-qr { width: 144px; }
  .fade-mode #rows { --board-gap: 12px; }
}

@media (max-width: 600px) {
  .board-mode { padding-top: 16px; gap: 12px; }
  .board-mode .brand-header { margin-inline: 16px; padding-bottom: 16px; }
  .board-mode .vote-copy { max-width: none; }
  .board-mode .vote-side { width: 100%; justify-content: space-between; }
  .board-mode .vote-title { font-size: 18px; text-align: left; }
  .board-mode .vote-hint { text-align: left; font-size: 11px; }
  .board-mode .vote-qr { width: 80px; }
  .board-mode .stage { padding-inline: 12px; }
  .board-card { border-radius: 6px; }
  .board-card figcaption { left: 8px; bottom: 8px; padding: 4px 6px; }
  .fade-mode .brand-header { margin-inline: var(--display-gutter); flex-wrap: wrap; gap: 18px; }
  .fade-mode .brand-identity img { height: 88px; max-width: 72vw; }
  .fade-mode .vote-qr { width: 112px; }
  .fade-mode .vote-title { font-size: 18px; }
  .fade-mode .stage { padding-inline: var(--display-gutter); }
}