/* 설정 화면 전용 스타일. 색·서체는 tokens.css 의 사이트 디자인 토큰을 씁니다
   (styles.css 전체를 끌어오면 app.js 가 필요한 마크업까지 따라옵니다). */
body {
  margin: 0;
  background: var(--wisdom-sand, #d8cabb);
  color: var(--wisdom-ink, #2f2a25);
  font-family: var(--wisdom-font-sans, system-ui, sans-serif);
  line-height: 1.8;
}
main {
  max-width: 640px;
  /* 좌우 여백이 없으면 좁은 화면에서 카드가 양끝에 붙습니다. */
  margin: 6vh auto;
  padding: clamp(20px, 5vw, 32px);
  background: var(--wisdom-ivory, #fffdfa);
  border-radius: 16px;
}
.eyebrow { margin-top: 0; color: var(--wisdom-brown, #5d4936); font-size: 0.9rem; letter-spacing: 0.02em; }
h1 { font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.4; margin-bottom: 0.6em; }
#analytics-status { font-weight: 700; }
#analytics-warning { color: var(--wisdom-brown, #5d4936); }
button {
  font: inherit;
  padding: 12px 20px;
  margin: 8px 8px 8px 0;
  cursor: pointer;
  border: 1px solid var(--wisdom-brown, #5d4936);
  border-radius: 8px;
  background: var(--wisdom-white, #fff);
  color: var(--wisdom-brown, #5d4936);
}
button[disabled] { opacity: 0.55; cursor: default; }
#analytics-exclude { background: var(--wisdom-brown, #5d4936); color: var(--wisdom-white, #fff); }
a { color: var(--wisdom-brown, #5d4936); }
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--wisdom-bronze, #a78d6c);
  outline-offset: 4px;
}