/* 공통 토큰: 회색빛 종이, 남색 인쇄 잉크, 찬성 O 파랑, 반대 X 빨강 */
:root {
  --paper: #edeff2;
  --sheet: #ffffff;
  --ink: #14213d;
  --ink-2: #566175;
  --rule: #c9d0da;
  --yes: #1d55c4;
  --yes-tint: #e2eafa;
  --no: #cc3a2f;
  --no-tint: #f9e3e0;
  --abstain: #6f7a8c;
  --abstain-tint: #e4e7ec;
  --present: #1f7a4d;
  --left: #95580f;
  --focus: #1d55c4;

  --serif: 'Hahmlet', 'Noto Serif KR', 'AppleMyungjo', serif;
  --sans: 'IBM Plex Sans KR', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0e182b;
    --sheet: #16233b;
    --ink: #e6ebf3;
    --ink-2: #9aa7bb;
    --rule: #2b3c59;
    --yes: #82a7ff;
    --yes-tint: #1a2c55;
    --no: #ff8074;
    --no-tint: #47201d;
    --abstain: #9aa5b6;
    --abstain-tint: #253350;
    --present: #62cc94;
    --left: #e6aa5c;
    --focus: #82a7ff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 버튼: 위계에 따라 모양이 다르다 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  border: 1.5px solid var(--rule); border-radius: 8px;
  background: var(--sheet); font-weight: 600; text-decoration: none;
}
.btn:hover { border-color: var(--ink-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-primary:hover { border-color: var(--ink); filter: brightness(1.15); }
.btn-yes { background: var(--yes); border-color: var(--yes); color: #fff; }
.btn-no { background: var(--no); border-color: var(--no); color: #fff; }
.btn-danger { color: var(--no); border-color: color-mix(in srgb, var(--no) 45%, var(--rule)); }
.btn-text { border: 0; background: none; padding: 0 var(--s2); min-height: 36px; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.btn-sm { min-height: 34px; padding: 0 var(--s3); font-size: 14px; }

.field { display: grid; gap: var(--s1); }
.field > span { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.input {
  width: 100%; min-height: 44px; padding: var(--s2) var(--s3);
  border: 1.5px solid var(--rule); border-radius: 8px; background: var(--sheet);
}
.input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }

.tag {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  border: 1px solid currentColor; font-size: 13px; font-weight: 600; line-height: 1.6;
}
.tag-named { color: var(--left); }
.tag-secret { color: var(--ink-2); }
.st-present { color: var(--present); }
.st-left { color: var(--left); }
.st-absent { color: var(--ink-2); }

.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.conn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--present); }
.conn[data-online='no']::before { background: var(--left); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* O · X · — 표시 */
.mark { fill: none; stroke: currentColor; stroke-width: 11; stroke-linecap: round; }
.mark-yes { color: var(--yes); }
.mark-no { color: var(--no); }
.mark-abstain { color: var(--abstain); }

/* 진행 막대 */
.bar { position: relative; display: flex; height: 14px; border-radius: 3px; background: var(--abstain-tint); }
.bar > span:not(.bar-line) { height: 100%; transition: width .4s ease; }
.bar > span:first-child { border-radius: 3px 0 0 3px; }
.bar-yes { background: var(--yes); }
.bar-no { background: var(--no); }
.bar-abstain { background: var(--abstain); }
.bar-voted { background: var(--ink); }
.bar-line { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ink); }
.bar-line > span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink-2); }

/* 알림 */
.toasts { position: fixed; z-index: 50; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); }
.toast { padding: 12px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 500; animation: rise .2s ease-out; }
.toast-error { background: var(--no); color: #fff; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

/* 로그인 */
.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--s4); }
.login form { width: min(380px, 100%); display: grid; gap: var(--s4); }
.login h1 { font: 700 28px/1.3 var(--serif); }
.login p { color: var(--ink-2); }
.form-error { color: var(--no); font-weight: 600; min-height: 1.6em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}