/* ── 둘째 팔레트 「Primer」 — `:root[data-palette="primer"]` 안에서만(리넨 규칙은 그대로) ───────────
   색 토큰과 모양 토큰은 tokens.css 에 있다. 여기서는 이 화면의 이름(--bg · --panel …)에 이어 붙인다.
   바탕 · 카드 · 강조는 리넨 그대로이고, 어두운 벌만 Primer dimmed 값을 따른다. */
@media (prefers-color-scheme: dark) {
  :root[data-palette="primer"]:not([data-theme="light"]) {
    --bg: var(--paper); --panel: var(--card); --muted: var(--dim); --border: var(--rule);
    --border-strong: var(--rule); --error: var(--danger); --accent-hover: var(--accent);
    --accent-press: var(--accent);
  }
}
:root[data-palette="primer"][data-theme="dark"] {
  --bg: var(--paper); --panel: var(--card); --muted: var(--dim); --border: var(--rule);
  --border-strong: var(--rule); --error: var(--danger); --accent-hover: var(--accent);
  --accent-press: var(--accent);
}

:root[data-palette="primer"] body {
  font-size: var(--font-size-body);
  font-variant-numeric: var(--num-figures);
}
/* 머리 띠 — Primer 먹색 한 줄, 화면 폭 끝까지 */
:root[data-palette="primer"] .palette-menu {
  position: static;
  margin: -16px -16px 16px;
  padding: max(6px, env(safe-area-inset-top)) 16px 6px;
  background: var(--head);
  color: var(--head-dim);
  border-bottom: 1px solid var(--head-rule);
}
:root[data-palette="primer"] .palette-menu button.palette-choice { color: var(--head-ink); border-radius: var(--radius-s); }
:root[data-palette="primer"] :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--focus-offset);
}
/* 모서리 2px · 사각 단추 */
:root[data-palette="primer"] input,
:root[data-palette="primer"] button,
:root[data-palette="primer"] select,
:root[data-palette="primer"] textarea,
:root[data-palette="primer"] .notice { border-radius: var(--radius-s); }
:root[data-palette="primer"] button.link { border-radius: 0; }
/* 카드 — 테두리 없이 그림자만, 가리키면 살짝 떠오름 */
:root[data-palette="primer"] .app-links li,
:root[data-palette="primer"] .dev-link {
  border: 1px solid var(--card-rule);
  border-radius: var(--radius-l);
  box-shadow: var(--card-shadow);
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
:root[data-palette="primer"] .dev-link { background: var(--panel); }
:root[data-palette="primer"] .app-links li:hover,
:root[data-palette="primer"] .dev-link:hover {
  transform: translateY(var(--card-lift));
  box-shadow: var(--card-shadow-hover);
}
:root[data-palette="primer"] .app-link { border-radius: var(--radius-l); transition: none; }
:root[data-palette="primer"] a.app-link:hover,
:root[data-palette="primer"] a.app-link:active { box-shadow: none; }
:root[data-palette="primer"] .dev-link:hover, :root[data-palette="primer"] .dev-link:active { border-style: solid; }
:root[data-palette="primer"] .app-name,
:root[data-palette="primer"] h1 {
  font-size: var(--font-size-title);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
}
/* 옅은 면 상태 칩 */
:root[data-palette="primer"] .app-note,
:root[data-palette="primer"] .dev-label {
  padding: 1px 8px;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--fill);
  color: var(--ink);
}
/* 목록은 한 상자 + 구분선 */
:root[data-palette="primer"] .admin-list table,
:root[data-palette="primer"] .device-table,
:root[data-palette="primer"] .ops-table {
  border-radius: var(--radius-l);
  box-shadow: var(--card-shadow);
}
:root[data-palette="primer"] .activity-list {
  background: var(--panel);
  border-radius: var(--radius-l);
  box-shadow: var(--card-shadow);
}
:root[data-palette="primer"] .activity-list li { padding: var(--space-gap) var(--space-pad); }
/* 펼침은 0.15초 스며듦 — 움직임 줄이기에서는 --motion-fast 가 0s */
@keyframes primer-fade { from { opacity: 0; } to { opacity: 1; } }
:root[data-palette="primer"] details[open] > :not(summary) {
  animation: primer-fade var(--motion-fast) ease;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-palette="primer"] details[open] > :not(summary) { animation: none; }
  :root[data-palette="primer"] .app-links li,
  :root[data-palette="primer"] .dev-link { transition: none; }
}
