/* 학생 투표 화면 (휴대폰) */
.vote { display: flex; flex-direction: column; }
.vote-top {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: max(var(--s3), env(safe-area-inset-top)) var(--s4) var(--s3);
  border-bottom: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-2);
}
#app { flex: 1; width: min(560px, 100%); margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); display: flex; flex-direction: column; gap: var(--s5); }
.vote-me {
  position: sticky; bottom: 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  padding: var(--s3) var(--s4) max(var(--s3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule); background: var(--paper);
  font-size: 14px;
}
.vote-me strong { font-size: 16px; }
.vote-me .aff { color: var(--ink-2); margin-left: var(--s2); }

/* 안건 머리 */
.agenda-head { display: grid; gap: var(--s2); }
.agenda-meta { display: flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--ink-2); }
.agenda-title { font: 800 clamp(26px, 7.4vw, 34px)/1.3 var(--serif); letter-spacing: -0.01em; }
.agenda-desc { white-space: pre-line; color: var(--ink-2); max-height: 30vh; overflow: auto; }

/* 투표 용지 */
.ballot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ox {
  display: grid; justify-items: center; align-content: center; gap: var(--s2);
  aspect-ratio: 1 / 1.08; padding: var(--s4);
  border: 2px solid var(--rule); border-radius: 20px; background: var(--sheet);
  font-size: 20px; font-weight: 700;
  transition: background-color .15s, border-color .15s, transform .1s;
}
.ox:active { transform: scale(.98); }
.ox .mark { width: 62%; transition: stroke-width .15s; }
.ox-yes[aria-pressed='true'] { border-color: var(--yes); background: var(--yes-tint); color: var(--yes); }
.ox-no[aria-pressed='true'] { border-color: var(--no); background: var(--no-tint); color: var(--no); }
.ox[aria-pressed='true'] .mark { stroke-width: 15; }
.ballot:has([aria-pressed='true']) .ox[aria-pressed='false'] { opacity: .5; }

.abstain {
  justify-self: center; display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border: 1.5px dashed var(--rule); border-radius: 999px; background: none;
  font-weight: 600; color: var(--ink-2);
}
.abstain .mark { width: 20px; stroke-width: 14; }
.abstain[aria-pressed='true'] { border-style: solid; border-color: var(--abstain); background: var(--abstain-tint); color: var(--ink); }

.confirm {
  display: grid; gap: var(--s3); padding: var(--s4);
  border: 1.5px solid var(--ink); border-radius: 12px; background: var(--sheet);
  animation: rise .18s ease-out;
}
.confirm p { font-weight: 500; }
.confirm .btn { min-height: 54px; font-size: 18px; }
.hint { font-size: 14px; color: var(--ink-2); text-align: center; }

/* 상태 화면 */
.notice { display: grid; gap: var(--s3); padding: var(--s6) 0; }
.notice h1 { font: 800 28px/1.35 var(--serif); }
.notice p { color: var(--ink-2); }
.notice .big-mark { width: 120px; }
.notice .big-mark.draw * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .5s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.progress { display: grid; gap: var(--s2); font-size: 14px; color: var(--ink-2); }
.progress b { color: var(--ink); font-size: 18px; }

/* 결과 */
.result { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); text-align: center; }
.result div { display: grid; justify-items: center; gap: 2px; padding: var(--s3) 0; border-top: 3px solid currentColor; }
.result .mark { width: 34px; }
.result b { font-size: 30px; line-height: 1.2; color: var(--ink); }
.result span { font-size: 14px; color: var(--ink-2); }
.verdict { justify-self: start; padding: var(--s1) var(--s4); border: 3px solid currentColor; border-radius: 6px; font: 800 26px/1.3 var(--serif); }
.verdict-pass { color: var(--yes); }
.verdict-fail { color: var(--no); }

/* 입장 코드 입력 */
.claim { display: grid; gap: var(--s4); padding-top: var(--s4); }
.claim h1 { font: 800 30px/1.3 var(--serif); }
.claim ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s2); color: var(--ink-2); }
.claim form { display: grid; gap: var(--s3); margin-top: var(--s2); }
.code-input { font-size: 30px; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; min-height: 64px; }
.claim .btn { min-height: 54px; font-size: 18px; }