/* [Define404] */
/* 접수판 (js/board.js): 들어오는 문제를 넘김식 안내판으로 보여 준다 */

.board { position: relative; z-index: 1; background: var(--ink-1); color: var(--paper); border-block: var(--bw) solid #000; }
.board-inner { display: grid; grid-template-columns: auto 1fr; gap: var(--s5) var(--s6); align-items: center; padding-block: var(--s5); }
.board-title { display: grid; gap: 6px; align-self: start; padding-top: 4px; }
.board-title .d404-label { color: var(--line-2); }
.board-title b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.board-title i { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* JS가 없을 때 보이는 목록 */
.b-list { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--line-1); font-feature-settings: "tnum" 1; }
.b-list li { display: flex; gap: var(--s4); }
.b-list .b-time { color: var(--line-2); }
.board.is-live .b-list { display: none; }

/* 넘김 칸 */
.b-view { display: grid; gap: 6px; justify-content: start; overflow: hidden; }
.b-line { display: flex; gap: 10px; }
.b-col { display: flex; gap: 2px; }
.b-col-from .b-cell { color: var(--line-2); }
.b-cell {
  position: relative; display: inline-grid; place-items: center;
  width: 1.36em; height: 1.75em; font-size: 15px; font-weight: 650; line-height: 1;
  background: #1f1f1f; color: var(--paper); border-radius: 1px;
  font-feature-settings: "tnum" 1; transform-origin: 50% 50%;
}
html[lang^="en"] .b-cell { width: 0.95em; }
.b-cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.55); }
.b-cell.is-flip { animation: b-flip 110ms var(--ease); }
@keyframes b-flip { 0% { transform: scaleY(1); } 45% { transform: scaleY(0.12); } 100% { transform: scaleY(1); } }
.b-col-state .b-cell { color: var(--ink-3); }
.b-line.is-defined .b-col-state .b-cell { background: var(--sky); color: var(--ink-1); }
.b-col-time .b-cell { color: var(--line-1); }

@media (max-width: 720px) {
  .board-inner { grid-template-columns: 1fr; gap: var(--s4); }
  .b-cell { font-size: 12px; width: 1.32em; height: 1.75em; }
  html[lang^="en"] .b-cell { width: 0.98em; }
  .b-line { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .b-cell.is-flip { animation: none; }
}

/* 크게: 넓은 화면에서 접수판을 주인공으로 */
@media (min-width: 721px) {
  .board-inner { padding-block: var(--s8); gap: var(--s6) var(--s7); }
  .board-title b { font-size: clamp(22px, 2.2vw, 32px); }
  .board-title i { font-size: 14px; }
  .b-view { gap: 8px; }
  .b-line { gap: 14px; }
  .b-col { gap: 3px; }
  .b-cell { font-size: clamp(16px, 1.55vw, 23px); border-radius: 2px; }
}
@media (max-width: 720px) {
  .board-inner { padding-block: var(--s6); }
  .board-title b { font-size: 20px; }
}