/* ============================================================
   KWONMO — site.css
   사이트 설정(page/site) 전용. 수치·색은 val.css 토큰만 쓴다.
   페이지 한 줄 = 이름 · 보기 · 내려받기 · 기능 · 저장. 좁은 화면에서는 이름이 한 줄을 다 쓰고 나머지가 아래로 내려간다.
   구역 탭은 페이지 접근 · 방문자 코드.
   ============================================================ */

.site-title { font-size: 1.4rem; margin-bottom: var(--sp-md); }

.site-tabs { display: flex; gap: var(--sp-xs); border-bottom: var(--hairline) solid var(--line); margin-bottom: var(--sp-md); }
.site-tab {
  padding: var(--sp-sm) var(--sp-md); border: none; border-bottom: var(--stroke-2) solid transparent;
  background: none; color: var(--text-mid); font: inherit; cursor: pointer;
}
.site-tab.is-current { color: var(--accent); border-bottom-color: var(--accent); }

.site-help { color: var(--text-mid); font-size: .9rem; margin-bottom: var(--sp-md); }
.site-status { padding: var(--sp-xl); text-align: center; color: var(--text-dim); }

.site-row {
  display: grid; grid-template-columns: minmax(10rem, 1fr) auto auto auto auto minmax(8rem, 1.2fr);
  align-items: center; gap: var(--sp-md);
  padding: var(--sp-sm) 0; border-bottom: var(--hairline) solid var(--line);
}
.site-page-nm { color: var(--text); }
.site-page-key { margin-left: var(--sp-sm); color: var(--text-dim); font-family: var(--ed-label); font-size: .8rem; }
.site-field { display: flex; align-items: center; gap: var(--sp-xs); min-width: 0; color: var(--text-mid); font-size: .85rem; }
.site-field span { white-space: nowrap; }
.site-field select {
  min-width: 0;
  padding: .3rem var(--sp-sm); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit;
}
.site-btn {
  padding: .35rem var(--sp-md); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: .85rem; cursor: pointer;
}
.site-btn:disabled { opacity: .4; cursor: default; }
.site-row-msg { color: var(--text-dim); font-size: .8rem; }

/* 방문자 코드 — 댄이 읽어서 전한다. 헷갈리기 쉬운 글자(l · 1 · 0 · o)가 갈리도록 고정폭.
   고정폭 토큰(--ed-display)은 야간판에만 있어 두 판 공통으로 글꼴을 직접 적는다(head.php 가 이미 받는 글꼴) */
.site-code { font-family: "JetBrains Mono", Consolas, monospace; font-size: 2rem; letter-spacing: .15em; color: var(--text); margin-bottom: var(--sp-sm); }
.site-code-meta { color: var(--text-dim); font-size: .85rem; }

/* 폰: 이름 한 줄 → 보기 · 내려받기 · 기능 · 저장이 반씩 → 안내. 여섯 칸을 한 줄에 두면 저장 단추가 화면 밖으로 밀린다 */
@media (max-width: 48em) {
  .site-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-sm); }
  .site-page-nm { grid-column: 1 / -1; }
  .site-field select { flex: 1 1 auto; }
  .site-btn { justify-self: start; }
}