/* 전자투표 화면(public/v/) 전용. base.css 다음에 읽는다. 조합원 화면 기준(DESIGN.md)을 그대로 따른다:
   본문 18px 이상·글자 크기 세 단계·누르는 자리 56px 이상·한 화면 한 가지 일·360px까지 가로 넘침 없음.
   해설 화면(m/)과 다른 모듈이다. m.css를 읽지 않고, 아래 막대·'동의나 의결이 아닙니다' 바닥 고지·가족·우리 집 길을 두지 않는다.
   틀(v/js/shell.js)이 그리는 머리·바닥·불러오는 중·오류 꼴을 둔다. 갈래 화면의 꼴은 이 파일 아래쪽에 갈래마다 절을 더한다.
   색은 lm-tokens.css의 --lm- 변수만, 크기는 base.css의 --rd- 변수만 쓴다. hex를 두지 않는다. */

/* 우리말은 낱말 단위로 줄을 바꾼다(조사가 줄 머리로 넘어가지 않게). 한 칸에 안 들어가는 긴 글만 쪼갠다 */
body,
dialog,
button,
input,
textarea,
select {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 머리: 작은 로고 + 글자 크기 [가][가][가], 아래 줄에 조합·총회 이름과 '전자투표' ── */

.v-head {
  border-bottom: 1px solid var(--lm-hairline);
  background: var(--lm-bg-surface);
}

.v-head-inner {
  max-width: var(--rd-page-max);
  margin: 0 auto;
  padding: 0 var(--rd-gutter) var(--lm-space-12);
}

.v-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lm-space-12);
  min-height: 72px;
}

.v-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--rd-tap);
  border-radius: var(--lm-radius-inner);
}

.v-logo.brand-logo {
  height: 16px;
}

/* 지금 어느 조합·총회의 전자투표 안인지. 자물쇠는 '고른 것은 잠가서 넣는다'는 이 화면의 성격이다 */
.v-meeting {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--lm-space-8);
  align-items: start;
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-small);
  font-weight: 700;
  line-height: 1.45;
}

.v-meeting .icon {
  width: 20px;
  height: 20px;
  margin-top: 0.1em;
  color: var(--lm-trust);
}

.v-meeting-union {
  display: block;
  color: var(--lm-text);
  font-weight: 600;
}

/* '글자 크기' 글자 + 세 단추. 글자는 단추 묶음 위에 둔다(360px 화면에서도 로고와 한 줄에 들어가게) */
.v-font-wrap {
  display: grid;
  flex: 0 0 auto;
  justify-items: center;
  gap: 2px;
  padding: var(--lm-space-4) 0;
}

.v-font-label {
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.v-font {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
  overflow: hidden;
}

.v-font-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: var(--rd-tap);
  padding: 0;
  border: 0;
  border-left: 1px solid var(--lm-hairline);
  background: transparent;
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out), color var(--rd-duration-color) var(--lm-ease-out);
}

.v-font-btn:first-child {
  border-left: 0;
}

.v-font-btn.is-m {
  font-size: 16px;
}

.v-font-btn.is-l {
  font-size: 20px;
}

.v-font-btn.is-xl {
  font-size: 25px;
}

.v-font-btn[aria-pressed="true"] {
  background: var(--lm-bg-selected);
  color: var(--lm-primary);
  box-shadow: inset 0 -3px 0 var(--lm-primary);
}

.v-font-btn:focus-visible {
  outline-offset: -3px;
}

@media (hover: hover) {
  .v-font-btn:hover {
    background: var(--lm-bg-subtle);
  }

  .v-font-btn[aria-pressed="true"]:hover {
    background: var(--lm-bg-selected);
  }
}

/* ── 본문 ── */

.page.v-main {
  padding-top: var(--lm-space-24);
  padding-bottom: var(--lm-space-8);
}

.v-flow > * + * {
  margin-top: var(--lm-space-32);
}

.v-loading {
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
}

/* 열지 못했을 때: 무엇이 안 됐는지 + 다른 길(서면결의서·총회장) + 다시 해 볼 단추 */
.v-problem {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-12);
  padding: var(--lm-space-20);
  border: 1px solid var(--lm-danger);
  border-radius: var(--lm-radius-card);
  background: var(--lm-danger-surface);
}

.v-problem-title {
  display: flex;
  align-items: flex-start;
  gap: var(--lm-space-8);
  color: var(--lm-danger);
  font-size: var(--rd-fs-h2);
}

.v-problem-title .icon {
  margin-top: 0.15em;
}

.v-problem p {
  color: var(--lm-text-strong);
}

/* ── 바닥: 누가 운영하고 누가 본인 확인을 맡는지(수탁자 줄), 처리방침, 조합 문의 ── */

.v-foot {
  max-width: var(--rd-page-max);
  margin: 0 auto;
  padding: 0 var(--rd-gutter) calc(var(--lm-space-32) + var(--lm-safe-bottom));
}

.v-foot-line {
  margin-top: var(--lm-space-48);
  padding-top: var(--lm-space-20);
  border-top: 1px solid var(--lm-hairline);
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

.v-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--lm-space-20);
  margin: var(--lm-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.v-foot-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: var(--rd-tap);
  font-size: var(--rd-fs-small);
}

.v-foot-links .icon {
  width: 20px;
  height: 20px;
  color: var(--lm-text-muted);
}

/* ── 갈래 B: 시작·본인 확인 방법·모의 본인 확인·확인 결과(index·verify·mock-id·check) ── */

.v-intro {
  display: grid;
  gap: var(--lm-space-12);
}

.v-section {
  display: grid;
  gap: var(--lm-space-12);
}

/* 전자투표 기간: 작은 이름표 + 굵은 기간 */
.v-period {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lm-space-4) var(--lm-space-8);
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1.55;
}

.v-period-label {
  flex: 0 0 auto;
  padding: 0 var(--lm-space-8);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-pill);
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  line-height: 1.6;
}

/* 뜻을 전하는 세 방법: 한 틀 안에 같은 크기·같은 차례의 세 줄(어느 하나를 앞세우지 않는다) */
.v-ways {
  margin: 0;
  padding: 0;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
  list-style: none;
}

.v-way {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-12);
  align-items: start;
  min-height: 72px;
  padding: var(--lm-space-16);
}

.v-way + .v-way {
  border-top: 1px solid var(--lm-hairline);
}

.v-way > .icon {
  margin-top: calc((1.35em - 24px) / 2 + 2px);
  color: var(--lm-text-strong);
}

.v-way-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.v-way-title {
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-control);
  font-weight: 700;
  line-height: 1.35;
}

.v-way-detail {
  color: var(--lm-text);
  line-height: 1.55;
}

.v-way-quote {
  margin-top: var(--lm-space-4);
  padding-left: var(--lm-space-12);
  border-left: 1px solid var(--lm-border-strong);
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

/* 알려 드리는 줄(오류 아님)과 지금 받지 않는 까닭 줄 */
.v-note,
.v-status {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-8);
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-control);
  color: var(--lm-text-strong);
  line-height: 1.6;
}

.v-note {
  background: var(--lm-trust-soft);
}

.v-note > .icon {
  margin-top: calc((1.6em - 24px) / 2);
  color: var(--lm-trust);
}

.v-status {
  border-color: var(--lm-border);
  background: var(--lm-bg-subtle);
  font-weight: 600;
}

.v-status > .icon {
  margin-top: calc((1.6em - 24px) / 2);
}

/* 본인 확인 방법: 수단이 여럿이면 같은 무게의 줄, 하나면 주 단추 위에 필요한 것 한 줄 */
.v-methods {
  display: grid;
  gap: var(--lm-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-method {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--lm-space-12);
  width: 100%;
  min-height: 76px;
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out), border-color var(--rd-duration-color) var(--lm-ease-out);
}

.v-method > .icon:last-child {
  color: var(--lm-text-muted);
}

.v-method:disabled {
  cursor: progress;
}

.v-method-text {
  display: grid;
  gap: 2px;
}

.v-method-title {
  font-size: var(--rd-fs-control);
  font-weight: 600;
  line-height: 1.35;
}

.v-method-need {
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
  line-height: 1.5;
}

@media (hover: hover) {
  .v-method:hover {
    border-color: var(--lm-text);
    background: var(--lm-bg-subtle);
  }
}

.v-alert-slot:empty {
  display: none;
}

.v-pick-tag {
  color: var(--lm-warning-text);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  line-height: 1.5;
}

/* 처음 화면의 단추 묶음: 주 단추 하나와 바로 아래 필요한 것 한 줄(단추와 붙여 읽히게 촘촘히) */
.v-start {
  display: grid;
  gap: var(--lm-space-12);
}

.v-start-need {
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

.v-start-who {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-8);
  color: var(--lm-text-strong);
  font-weight: 600;
}

.v-start-who > .icon {
  margin-top: calc((1.75em - 24px) / 2);
  color: var(--lm-success-text);
}

/* 모의 본인 확인: 가상 조합원 이름이 곧 단추(누르면 바로 확인). 투표가 여럿이면 조합·총회 이름 묶음 */
.v-people > .v-section + .v-section {
  margin-top: var(--lm-space-32);
}

.v-person .v-method-text {
  gap: 0;
}

/* 접수 화면: 마감 전 고치기 한 줄과 작은 단추 */
.v-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lm-space-4) var(--lm-space-12);
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

.v-change .btn.quiet {
  padding-inline: var(--lm-space-12);
}

.v-print-btn.btn {
  justify-self: start;
}

/* 확인 결과: 상태 아이콘 + 제목(색 + 글자 + 아이콘) */
.v-result-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: var(--lm-space-12);
}

.v-result-head > .icon {
  width: 32px;
  height: 32px;
  margin-top: calc((1.35em - 32px) / 2 + 2px);
}

.v-result-head h1:focus {
  outline: none;
}

.v-result-head.is-ok > .icon {
  color: var(--lm-success-text);
}

.v-result-head.is-warn > .icon {
  color: var(--lm-warning-text);
}

.v-result-head.is-info > .icon {
  color: var(--lm-trust);
}

.v-flow > .v-result-head + * {
  margin-top: var(--lm-space-20);
}

/* 누구로 확인했는지 */
.v-lines {
  display: grid;
  gap: var(--lm-space-12);
}

/* ── 갈래 D: 안건 고르기·확인·접수증·투표함 확인(ballot·receipt·receipt-check) ──
   고를 것(찬성·반대·기권)은 모두 같은 꼴·같은 색이다. 어느 하나를 색으로 앞세우거나 좋고 나쁨으로 물들이지 않는다. */

/* 몇 번째 안건인지: 글자 + 안건 수만큼의 칸(지금 칸은 코발트, 고른 칸은 진하게) */
.v-progress {
  display: grid;
  gap: var(--lm-space-8);
}

.v-progress-text {
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-small);
  font-weight: 700;
  line-height: 1.4;
}

.v-steps {
  display: flex;
  gap: 4px;
}

.v-step {
  flex: 1 1 0;
  height: 6px;
  border-radius: var(--lm-radius-pill);
  background: var(--lm-hairline);
  transition: background-color var(--rd-duration-color) var(--lm-ease-out);
}

.v-step.is-done {
  background: var(--lm-border-strong);
}

.v-step.is-now {
  background: var(--lm-primary);
}

.v-flow > .v-progress + .v-item-head {
  margin-top: var(--lm-space-20);
}

.v-item-head {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-12);
}

.v-item-head h1:focus,
.v-intro h1:focus,
.v-flow > h1:focus {
  outline: none;
}

.v-explain {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: var(--rd-tap);
  font-size: var(--rd-fs-body);
  font-weight: 600;
}

/* 고를 것: 화면 폭의 줄 하나가 통째로 누르는 자리(72px 이상, 설계 0.4) */
.v-pick-area {
  display: grid;
  gap: var(--lm-space-16);
}

.v-choices {
  display: grid;
  gap: var(--lm-space-12);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.v-choice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: var(--lm-space-16);
  min-height: 72px;
  padding: var(--lm-space-12) var(--lm-space-20);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out), border-color var(--rd-duration-color) var(--lm-ease-out),
    box-shadow var(--rd-duration-color) var(--lm-ease-out);
}

.v-choice input {
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--lm-primary);
  cursor: pointer;
}

.v-choice-text {
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-h2);
  font-weight: 700;
  line-height: 1.3;
}

.v-choice:has(input:checked) {
  border-color: var(--lm-primary);
  background: var(--lm-bg-selected);
  box-shadow: inset 0 0 0 2px var(--lm-primary);
}

.v-choice:has(input:focus-visible) {
  outline: var(--lm-focus-ring);
  outline-offset: 3px;
}

@media (hover: hover) {
  .v-choice:hover {
    border-color: var(--lm-text);
    background: var(--lm-bg-subtle);
  }

  .v-choice:has(input:checked):hover {
    border-color: var(--lm-primary);
    background: var(--lm-bg-selected);
  }
}

/* '찬성을 골랐어요.' 글자 + 체크(색만으로 알리지 않는다) */
.v-picked {
  display: flex;
  align-items: flex-start;
  gap: var(--lm-space-8);
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1.5;
}

.v-picked .icon {
  margin-top: calc((1.5em - 24px) / 2);
  color: var(--lm-primary);
}

.v-blank-wrap {
  display: grid;
  gap: var(--lm-space-8);
  padding-top: var(--lm-space-8);
}

.v-blank.btn {
  justify-self: start;
  justify-content: flex-start;
  font-size: var(--rd-fs-body);
  text-align: left;
}

.v-ballot-nav {
  display: grid;
  gap: var(--lm-space-12);
  padding-top: var(--lm-space-8);
}

/* 확인 화면: 안건마다 한 줄, 줄 사이는 1px 선(카드를 겹치지 않는다) */
.v-review {
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
  list-style: none;
}

.v-review-row {
  display: grid;
  gap: var(--lm-space-8);
  padding: var(--lm-space-16);
}

.v-review-row + .v-review-row {
  border-top: 1px solid var(--lm-hairline);
}

.v-review-title {
  color: var(--lm-text);
  line-height: 1.55;
}

.v-review-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lm-space-8) var(--lm-space-12);
}

.v-review-value {
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-h2);
  font-weight: 700;
  line-height: 1.3;
}

.v-review-value.is-blank {
  color: var(--lm-text);
}

.v-review-value.is-missing {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  color: var(--lm-warning-text);
  font-size: var(--rd-fs-body);
}

.v-review-fix.btn {
  min-width: 112px;
  padding-inline: var(--lm-space-16);
  font-size: var(--rd-fs-body);
}

.v-submit {
  display: grid;
  gap: var(--lm-space-16);
}

.v-seal-line {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-8);
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

.v-seal-line > .icon {
  margin-top: calc((1.6em - 24px) / 2);
  color: var(--lm-trust);
}

/* 접수증: 이름표 + 값. 번호·코드는 옮겨 적기 쉽게 큰 고정폭 글자 */
.v-receipt {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--lm-space-12) var(--lm-space-16);
  margin: 0;
  padding: var(--lm-space-20);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
}

.v-receipt dt {
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  line-height: 1.5;
}

.v-receipt dd {
  margin: 0;
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1.5;
}

.v-code {
  font-family: "JetBrains Mono", var(--lm-font-mono);
  font-size: calc(var(--rd-fs-body) + 4px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* 번호·코드는 줄을 바꾸지 않는다. 좁은 화면이나 큰 글자에서는 이름표를 값 위에 놓는다 */
.v-code {
  white-space: nowrap;
}

@media (max-width: 380px) {
  .v-receipt {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .v-receipt dd + dt {
    margin-top: var(--lm-space-12);
  }
}

html.fs-l .v-receipt,
html.fs-xl .v-receipt {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

html.fs-l .v-receipt dd + dt,
html.fs-xl .v-receipt dd + dt {
  margin-top: var(--lm-space-12);
}

/* 접수: 큰 체크 + 큰 제목(한 줄에 나란히) + 받은 때. 적거나 기억할 것은 [자세히] 안에만 */
.v-done {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: var(--lm-space-8) var(--lm-space-12);
}

.v-done > .icon {
  width: 40px;
  height: 40px;
  color: var(--lm-success-text);
}

.v-done h1 {
  font-size: calc(var(--rd-fs-h1) + 4px);
}

.v-done h1:focus {
  outline: none;
}

.v-done-at {
  grid-column: 1 / -1;
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-h2);
  font-weight: 600;
  line-height: 1.45;
}

.v-more {
  border-top: 1px solid var(--lm-hairline);
}

.v-more summary {
  display: flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: var(--rd-tap);
  color: var(--lm-text-strong);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.v-more summary::-webkit-details-marker {
  display: none;
}

.v-more summary .icon {
  color: var(--lm-text-muted);
  transition: transform var(--rd-duration-color) var(--lm-ease-out);
}

.v-more[open] summary .icon {
  transform: rotate(90deg);
}

.v-more-body {
  display: grid;
  gap: var(--lm-space-12);
  padding-bottom: var(--lm-space-8);
}

/* 확인 화면 맨 위: 아직 고르지 않은 안건(누르면 그 안건으로) */
.v-missing {
  display: grid;
  gap: var(--lm-space-8);
  padding: var(--lm-space-16);
  border: 1px solid var(--lm-warning-accent);
  border-radius: var(--lm-radius-control);
  background: var(--lm-warning-surface);
}

.v-missing-head {
  display: flex;
  align-items: flex-start;
  gap: var(--lm-space-8);
  color: var(--lm-warning-text);
  font-weight: 700;
  line-height: 1.5;
}

.v-missing ul {
  display: grid;
  gap: var(--lm-space-4);
  margin: 0;
  padding-left: var(--lm-space-32);
  list-style: none;
}

.v-missing .link {
  display: block;
  padding: var(--lm-space-8) 0;
  color: var(--lm-text-strong);
  font-weight: 600;
}

.v-check-result {
  display: grid;
  gap: var(--lm-space-12);
  padding: var(--lm-space-20);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.v-check-result.is-ok {
  border-color: var(--lm-success-text);
  background: var(--lm-success-surface);
}

.v-check-result.is-miss {
  border-color: var(--lm-warning-accent);
  background: var(--lm-warning-surface);
}

.v-check-result h2:focus {
  outline: none;
}

.v-check-line {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-8);
  color: var(--lm-text-strong);
  font-weight: 600;
  line-height: 1.55;
}

.v-check-line > .icon {
  margin-top: calc((1.55em - 24px) / 2);
}

.v-check-line.is-ok > .icon {
  color: var(--lm-success-text);
}

.v-check-line.is-miss > .icon {
  color: var(--lm-warning-text);
}

@media print {
  .v-font-wrap,
  .v-foot-links,
  .actions,
  .v-change,
  .v-print-btn,
  .v-more summary .icon {
    display: none;
  }

  /* [자세히]를 열고 [인쇄하기]를 누르므로 접수 번호가 종이에 실린다 */
  .v-receipt {
    border-color: var(--lm-text-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-step,
  .v-choice,
  .v-more summary .icon {
    transition: none;
  }
}

/* ── 갈래 E: 개표 결과(result). 찬성·반대·기권·무효는 모두 같은 꼴·같은 색이다(어느 쪽도 앞세우지 않는다) ── */

.v-tally-when {
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
}

.v-tally-item {
  gap: var(--lm-space-12);
}

.v-tally-title {
  font-size: var(--rd-fs-h2);
  line-height: 1.45;
}

.v-tally-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--lm-space-8);
  margin: 0;
}

.v-tally-count {
  display: grid;
  gap: 2px;
  padding: var(--lm-space-8) var(--lm-space-12);
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-page);
}

.v-tally-label {
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
}

.v-tally-n {
  color: var(--lm-text-strong);
  font-size: calc(var(--rd-fs-body) + 6px);
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.v-tally-methods {
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

.v-tally-declared {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-8);
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1.55;
}

.v-tally-declared > .icon {
  margin-top: calc((1.55em - 24px) / 2);
  color: var(--lm-trust);
}

.v-tally-source {
  display: grid;
  gap: var(--lm-space-8);
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

.v-tally-mark {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lm-space-4);
}

.v-tally-mark .v-code {
  font-size: var(--rd-fs-small);
}

@media print {
  .v-tally-n {
    font-variant-numeric: normal;
  }
}