/* 공용 스타일. 색·간격·글자 크기·radius 는 tokens.css 의 변수만 쓴다(하드코딩 금지). */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}
a { color: var(--ink); }
a:hover { text-decoration: none; }
.mono { font-family: var(--font-mono); font-size: var(--text-meta); }
.meta { font-size: var(--text-meta); color: var(--ink-soft); }
.display { font-size: var(--text-display); font-weight: 600; margin: 0; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.prewrap { white-space: pre-wrap; word-break: break-word; }

/* 레이아웃 */
.topbar {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--line-width) solid var(--line);
}
.topbar .brand { font-weight: 600; }
.topbar nav { display: flex; gap: var(--space-1); flex: 1; }
.topbar nav a {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-soft);
}
.topbar nav a:hover { background: var(--paper-sunken); }
.topbar nav a.active { color: var(--accent); font-weight: 600; }
.topbar .who { display: flex; align-items: center; gap: var(--space-3); }
main { max-width: var(--layout-max); margin: 0 auto; padding: var(--space-5); }
.view-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.view-head .grow { flex: 1; }
.subnav { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.subnav a.active { color: var(--accent); font-weight: 600; }
.section { margin-top: var(--space-5); }
.section > h2 { font-size: var(--text-body); font-weight: 600; margin: 0 0 var(--space-3); }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* 표 */
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--line-width) solid var(--line);
}
th { font-size: var(--text-meta); font-weight: 600; color: var(--ink-soft); background: var(--paper-sunken); }
td.actions { white-space: nowrap; }
td.actions button { margin-right: var(--space-1); }
tr.detail > td { background: var(--paper-sunken); }
.empty { padding: var(--space-5); text-align: center; color: var(--ink-soft); border: var(--line-width) dashed var(--line); border-radius: var(--radius); }

tr.confirm-row:has(.confirm-host:empty) { display: none; }

/* 패널·카드 */
.panel {
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  background: var(--paper);
}
.panel > h3 { font-size: var(--text-body); font-weight: 600; margin: 0 0 var(--space-3); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--field-width), 1fr)); gap: var(--space-4); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.kv dt { color: var(--ink-soft); font-size: var(--text-meta); }
.kv dd { margin: 0; }

/* 폼 */
form.stack { max-width: var(--field-width); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > label { font-size: var(--text-meta); color: var(--ink-soft); }
.field .hint { font-size: var(--text-meta); color: var(--ink-faint); }
.field.check { flex-direction: row; align-items: center; gap: var(--space-2); }
.field.check > label { color: var(--ink); font-size: var(--text-body); }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: var(--space-1) solid var(--accent);
  outline-offset: 0;
}
.filters { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--space-4); }
.filters .field { min-width: var(--field-width); max-width: var(--field-width); }

/* 버튼: accent 는 주요 실행(primary)에만 */
button {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--paper-sunken); }
button:disabled { color: var(--ink-faint); cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover:not(:disabled) { background: var(--accent); opacity: 0.9; }
button.danger { color: var(--danger); border-color: var(--danger); }
button.small { padding: var(--space-1) var(--space-2); font-size: var(--text-meta); }

/* 상태 표시: 의미(성공/주의/오류)에만 색을 쓴다 */
.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-meta);
  background: var(--paper-sunken);
  color: var(--ink-soft);
  white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin: var(--space-3) 0; background: var(--paper-sunken); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.danger { background: var(--danger-bg); color: var(--danger); }
.confirm { border: var(--line-width) solid var(--danger); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; background: var(--danger-bg); }
.confirm .row { margin-top: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.badge .chip-remove { border: 0; background: none; padding: 0 0 0 var(--space-1); color: inherit; font: inherit; }
.pager { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }

/* 로그인 */
.login-wrap { max-width: var(--field-width); margin: var(--space-6) auto; padding: 0 var(--space-4); }
.login-wrap h1 { margin-bottom: var(--space-5); }