/* ==========================================================================
   키오스크 — 방향 B: 発着 Departure Board
   (dashboard/design/directions/B-departure.DESIGN.md)

   왜 전광판인가: 이 화면이 하는 일은 **이름과 시각을 방 건너에서 읽는 것**이다.
   그걸 100년간 다듬은 물건이 역·공항의 발착 전광판이고, 걸프에는 매일 모두가 읽는
   예배시각표가 있다. 그리고 결정적으로 — **번역이 거의 필요 없다.** 이름은 고유명사,
   숫자는 만국 공통, 상태는 글리프다. 우리 최대 갭(다국어)을 디자인으로 푼다.

   ⚠️ 원안에서 **뺀 것**: STATUS 열.
   전광판이라면 이름 옆에 IN/OUT 이 붙어야 자연스럽지만, 이 화면은 지점 공용 단말이라
   그러면 **모두의 출퇴근이 아무에게나 보인다**. punch.html 은 원래부터 이름만 보여
   주기로 정해 둔 화면이다(코드 주석에 명시). 디자인이 그 결정을 이기면 안 된다.
   본인 상태는 얼굴 로그인 뒤 본인 화면(#fmMe)에서만 나온다.
   대신 전광판에서 실제로 값어치 있는 것들을 가져온다:
     - 눈부심에 강한 어두운 판 (주방·창고·현장 조명에서 밝은 바탕은 하얗게 뜬다)
     - 팔 뻗은 거리에서 읽히는 큰 이름과 등폭 시각
     - 확인의 순간 = **플랩 한 번**. 이 순간만은 화면에서 하나만 움직인다.
       (모션 전반의 규칙은 BRAND.md — "인지를 도우면 쓴다". 예전의 "여기 한 곳에만"은
        폐기됐다. 다만 확인의 순간에 하나만 움직인다는 제약은 그대로 남는다.)

   이 파일은 punch.html 만 링크한다. 콘솔은 藍染(tokens.css)을 그대로 쓴다 —
   오래 읽는 화면은 밝아야 하고, 전광판(어두움)과 인쇄된 시각표(밝음)가 늘 그래 왔다.
   ========================================================================== */

:root, [data-theme="dark"], [data-theme="light"] {
  /* 전광판 색은 취향이 아니라 광학이다. 어두운 판 + 발광 호박색은 역·공항이
     수렴한 답이고, 이유가 우리 문제와 같다 — 눈부심과 거리.
     테마와 무관하게 고정한다: 주방 조명은 OS 다크모드 설정을 안 따른다. */
  --board:      #101822;
  --board-2:    #18222f;
  --board-3:    #22303f;
  --board-line: #31414f;
  --amber:      #f2b23e;   /* 琥珀 — 액센트가 아니라 발광색 */
  --amber-dim:  #a97c28;
  --chalk:      #e9eef4;
  --chalk-2:    #aebbc9;
}

body {
  background: var(--board);
  color: var(--chalk);
}

/* 상단 — 전광판의 얇은 대문자 띠 */
header.top { border-bottom: 1px solid var(--board-line); padding-bottom: 12px; }
.title h1 { color: var(--chalk); letter-spacing: 0.005em; }
.title p  { color: var(--chalk-2); }
.meta, .clock { color: var(--amber); }
.clock {
  font-family: var(--font-num);
  font-size: 19px; font-weight: 600; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ---- 이름 판 ----
   타일 격자를 **행**으로 바꾼다. 전광판의 값어치는 열이 안 흔들리는 데 있다.
   좁은 화면에서는 한 줄에 하나, 넓으면 두 줄까지. 그 이상 나누면 글자가 작아진다. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tile {
  /* punch.html 자체 규칙이 flex-direction:column · justify-content:space-between 이다.
     여기서 방향을 명시하지 않으면 전광판 행이 **세로 쌓기**로 렌더된다 — 실제로 그랬다:
     왼쪽 표시등(::before)이 4px 짜리 가로 띠가 되어 이름 위에 얹혔고, 이름은
     가운데 정렬로 밀려서 행마다 시작 위치가 달랐다. 전광판의 값어치는 **열이
     안 흔들리는 것**인데(이 파일 머리말) 그게 통째로 없어져 있었다. */
  display: flex; flex-direction: row; justify-content: flex-start;
  align-items: center; gap: 14px;
  min-height: var(--tap-kiosk);          /* 72px — 팔 뻗은 거리에서 누른다 */
  padding: 0 18px;
  background: var(--board-2);
  border: 1px solid var(--board-line);
  border-radius: 4px;                     /* 전광판에 라운드는 거의 없다. 0 은 금지된 브로드시트. */
  color: var(--chalk);
  text-align: left;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease);
}
.tile:hover  { background: var(--board-3); box-shadow: none; }
.tile:active { background: var(--board-3); transform: none; }

/* 이름은 넓은 그로테스크 — 멀리서는 글자가 아니라 **덩어리 모양**으로 인식된다.
   세리프를 안 쓰는 이유는 거리가 멀어지면 세리프가 가장 먼저 뭉개지기 때문이다. */
.tile .nm {
  font-size: var(--fs-kiosk-name); font-weight: 600;
  letter-spacing: 0.01em; line-height: 1.25;
  overflow-wrap: anywhere; flex: 1 1 auto;
}

/* 행 앞의 발광 표시등. 상태가 아니라 **누를 수 있는 줄**이라는 표시다
   (남의 출퇴근 상태를 띄우지 않는다는 규칙은 그대로다). */
.tile::before {
  content: ""; flex: 0 0 auto;
  width: 4px; align-self: stretch; margin: 12px 0;
  background: var(--amber-dim); border-radius: 2px;
}
.tile:hover::before { background: var(--amber); }

/* ---- 染み 의 전광판 방언 (원형은 design/states.css) ----
   이 화면은 藍 을 쓰지 않는다 — 어두운 판 위에서 藍 워시는 보이지도 않는다.
   그래서 물드는 색을 호박색으로 갈아 끼운다. 모션은 같고 염료만 다르다.

   표시등도 같이 밝아진다: 팔 뻗은 거리에서는 4px 막대의 밝기 변화가
   면 전체의 16% 워시보다 **먼저** 눈에 들어온다. 멀리서 보는 화면이라 그렇다.

   자격(BRAND.md §3): 1 인과를 잇는다 · 5 기다림을 정직하게 말한다.
   플랩은 **끝**(찍혔다)이고 이건 **시작**(눌렸다)이라 같은 순간이 아니다 —
   그 사이가 비어 있어서 직원이 두 번 누르고 있었다. */
.tile.dyeing { --dye: var(--amber); --dye-alpha: .16; }
.tile.dyeing::before { background: var(--amber); }

.tile .fsetup {
  flex: 0 0 auto; color: var(--amber); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---- 위치 표시 ---- */
.gps {
  background: var(--board-2); border-color: var(--board-line); color: var(--chalk-2);
  border-radius: 3px; font-variant-numeric: tabular-nums;
}
.gps.ok   { background: #14301f; color: #6fd39b; border-color: #235f3c; }
.gps.warn { background: #2e2716; color: var(--amber); border-color: #5c4a1e; }
.gpsretry { background: var(--amber); color: var(--board); border-radius: 3px; }

.changebr {
  background: var(--board-2); border-color: var(--board-line);
  color: var(--chalk-2); border-radius: 3px;
}
.changebr:hover { background: var(--board-3); }

footer {
  background: var(--board); border-top: 1px solid var(--board-line);
  color: var(--chalk-2);
}
.empty, .state-empty { color: var(--chalk-2); }

/* 지점 고르기도 같은 행 문법으로 */
.pick button {
  background: var(--board-2); border: 1px solid var(--board-line);
  color: var(--chalk); border-radius: 4px; min-height: var(--tap-kiosk);
  font-size: var(--fs-kiosk-name); font-weight: 600;
}
.pick button:hover { background: var(--board-3); }

/* ---- 시그니처: 플랩 ----
   확인의 순간에만 쓴다. 이 화면에서 가장 중요한 한순간이 "찍혔다"이고,
   나머지는 조용해야 한다. 여기저기 쓰면 싸구려가 된다. */
#success .box {
  background: var(--board-2);
  border: 1px solid var(--board-line);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
#success .snm { color: var(--chalk); letter-spacing: 0.01em; }
#success .sst {
  color: var(--amber); font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero; letter-spacing: 0.04em;
}
#success .check { background: #14301f; }
#success.show .box {
  transform-origin: center top;
  animation: flap 420ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes flap {
  0%   { transform: perspective(600px) rotateX(-88deg); opacity: 0; }
  55%  { transform: perspective(600px) rotateX(8deg);   opacity: 1; }
  100% { transform: perspective(600px) rotateX(0);      opacity: 1; }
}
/* 움직임을 줄여 달라고 한 사람에게는 즉시 나타난다 — 확인 자체를 못 보면 안 되므로
   숨기는 게 아니라 애니메이션만 뺀다. */
@media (prefers-reduced-motion: reduce) {
  #success.show .box { animation: none; }
}

/* ---- 본인 화면(얼굴 로그인 뒤) ----
   여기서는 상태를 보여 준다. 본인 것이고, 본인만 보고 있다. */
.fmbox { background: var(--board-2); border: 1px solid var(--board-line); border-radius: 6px; }
.fmname { color: var(--chalk); }
#fmMe .mst { color: var(--chalk); }
#fmMe .mrow .k { color: var(--chalk-2); }
#fmMe .mrow .v {
  color: var(--amber); font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
}
.fmconsent { color: var(--chalk-2); }
#toast { background: var(--board-3); color: var(--chalk); border: 1px solid var(--board-line); }