/* 화면 위 시계 — 관리자와 센터가 같은 한 벌을 쓴다.
   색은 직접 박지 않는다. 밝은 상단(관리자)에서는 테마 토큰을 쓰고, 짙은 상단(센터)에서는
   그 띠가 이미 정해둔 글자색을 물려받는다 — 띠 색이 바뀌어도 시계만 따로 어긋나지 않는다. */
#mw-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.2;
  /* 초가 바뀔 때마다 글자 너비가 달라지면 옆 것들이 흔들린다 */
  font-variant-numeric: tabular-nums;
}
#mw-clock .mw-clock-date {
  color: var(--mw-ink-soft);
}
#mw-clock .mw-clock-time {
  font-weight: 700;
  font-size: 14px;
  color: var(--mw-ink);
}
/* 서버에 못 닿아 이 기기 시계로 가는 중이면 흐리게 — 「맞다」고 단언하지 않는다 */
#mw-clock[data-synced="0"] { opacity: .55; }

/* 짙은 상단(센터)에서는 띠의 글자색을 그대로 물려받는다. 어느 화면인지는 조상 태그를
   넘겨짚지 않고 화면 쪽에서 class="on-dark" 를 붙여 알려준다. */
#mw-clock.on-dark .mw-clock-date { color: inherit; opacity: .72; }
#mw-clock.on-dark .mw-clock-time { color: inherit; }

/* 좁은 화면에서는 날짜를 접고 시각만 남긴다 — 상단이 밀려 줄이 늘어나는 편보다 낫다 */
@media (max-width: 640px) {
  #mw-clock .mw-clock-date { display: none; }
  #mw-clock .mw-clock-time { font-size: 13px; }
}