/* 레이아웃 프리미티브 */
.row  { display: flex; gap: var(--s-3); align-items: center; }
.col  { display: flex; flex-direction: column; gap: var(--s-3); }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.scroll-y { overflow-y: auto; overscroll-behavior: contain; }

.appbar {
  display: flex; align-items: center; gap: var(--s-4);
  height: 56px; padding: 0 var(--s-4);
  background: var(--surface); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
}
.appbar h1 { font-size: var(--t-16); margin: 0; letter-spacing: -.01em; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flat); }
.dot.on   { background: var(--rise); }
.dot.off  { background: var(--muted); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--s-2) var(--s-3); text-align: right; }
th:first-child, td:first-child { text-align: left; }
thead th {
  font-size: var(--t-12); font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--surface);
}
tbody tr { border-bottom: 1px solid var(--rule-soft); }

.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--rule); }
.tab {
  padding: var(--s-2) var(--s-4); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer; color: var(--muted);
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


.chip { white-space: nowrap; }

/* appbar-mobile — 좁은 화면에서 상단 바가 세로로 찌그러지지 않게 줄바꿈한다 */
@media (max-width: 767px) {
  .appbar { position: static; height: auto; min-height: 48px; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; }
  .appbar h1 { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .appbar .grow { display: none; }
  .appbar .label { white-space: nowrap; }
  .appbar .btn { white-space: nowrap; min-height: 40px; padding: 0 12px; }
  /* 제목 줄 다음에 시계, 그다음 메뉴 버튼들이 한 줄로 */
  .appbar > #who   { order: 2; }
  .appbar > #clock { order: 3; flex: 1 1 100%; }
  .appbar > a.btn  { order: 4; flex: 1 1 28%; text-align: center; justify-content: center; }
}


/* ios-safari — 아이폰 사파리 대응
   · 화면 아래 주소창/도구 막대가 나타났다 사라지므로 높이는 100vh 가 아니라 dvh 를 쓴다
   · 하단 도구 막대·홈 인디케이터에 가려지지 않도록 안전 영역(safe-area)만큼 비운다
   · 입력칸 글자가 16px 보다 작으면 아이폰이 확대해 버려서 모바일에서는 16px 로 맞춘다
   · 하단 고정 막대는 쓰지 않는다(사파리 도구 막대와 겹침). 눌러야 하는 버튼은 sticky 로 둔다. */
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
button, .btn, .chip, .tab, a { touch-action: manipulation; }   /* 두 번 탭 확대 방지 */

.appbar { padding-left: max(var(--s-4), env(safe-area-inset-left)); padding-right: max(var(--s-4), env(safe-area-inset-right)); }

@media (max-width: 767px) {
  input, select, textarea, .field { font-size: 16px; }
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
  .appbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}