@font-face {
  font-family: "Pretendard Variable";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/PretendardVariable.woff2") format("woff2");
}


:root {
  --hse-font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--hse-font-sans);
  letter-spacing: 0;
}

body {
  word-break: keep-all;
}

.hse-home {
  max-width: 760px;
  margin: 0 auto 22px;
  padding: 24px 0 6px;
  line-height: 1.65;
}

.hse-home__eyebrow {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1d4ed8;
}

.hse-home h2 {
  margin: 0 0 12px;
  font-size: clamp(2.05rem, 3.6vw, 2.75rem);
  line-height: 1.25;
}

.hse-home p {
  margin: 0 0 12px;
}

.hse-home ul {
  margin: 12px 0 14px;
  padding-left: 1.2rem;
}

.hse-home__notice {
  font-size: 1.08rem;
  color: #4b5563;
}

.authentication-table th {
  white-space: nowrap;
}

.page-header__logo__image {
  display: none;
}

.page-header__logo a::before {
  content: "효성노조";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 42px;
  padding: 0 12px;
  border-radius: 6px;
  background: #111827;
  color: #ffffff;
  font-family: var(--hse-font-sans);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* Force Pretendard over Belenios defaults, including header/admin SPA CSS. */
html,
body,
#vote-app,
#vote-app *,
.page,
.page *,
#main,
#main *,
.main-menu,
.main-menu *,
.main-zone,
.main-zone *,
.nav-menu,
.nav-menu *,
button,
input,
select,
textarea {
  font-family: var(--hse-font-sans) !important;
  letter-spacing: 0 !important;
}

.page-header__titles__election-name,
.page-header__titles__election-description,
.current_step,
.main-menu,
.main-zone {
  font-family: var(--hse-font-sans) !important;
}


/* Readability pass for voter-facing Belenios pages. */
html {
  font-size: 18px;
}

body {
  font-size: 1rem;
  line-height: 1.72;
}


#main,
main,
.page,
.content,
.main-zone,
.vote-app,
#vote-app {
  font-size: 1rem !important;
  line-height: 1.72 !important;
}

h1,
.page-title,
.page-header__titles__election-name {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

h2,
.current_step,
.question-title,
.question h2 {
  font-size: clamp(1.45rem, 2.7vw, 2rem) !important;
  line-height: 1.32 !important;
  font-weight: 800 !important;
}

p,
li,
label,
.question,
.answer,
.candidate,
.ballot,
.instructions,
.election-description {
  font-size: 1.08rem !important;
  line-height: 1.75 !important;
}

input,
select,
textarea,
button,
.button,
.btn,
input[type="submit"],
input[type="button"] {
  min-height: 46px;
  font-size: 1.08rem !important;
  line-height: 1.35 !important;
}

input[type="radio"],
input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.45rem;
}

.page-header__logo a::after {
  content: "효성중공업 사무기술직 노동조합 전자투표";
  margin-left: 12px;
  color: #111827;
  font-size: clamp(1.02rem, 2.4vw, 1.35rem);
  font-weight: 850;
  line-height: 1.25;
}

@media (max-width: 640px) {
  html {
    font-size: 17px;
  }

  .page-header__logo a::after {
    display: block;
    margin: 8px 0 0;
  }
}


/* The election title already carries the brand; hide the duplicate left badge. */
.page-header__logo {
  display: none !important;
}

.page-header__logo a::before,
.page-header__logo a::after {
  content: none !important;
  display: none !important;
}

.page-header__titles {
  width: 100% !important;
  text-align: center !important;
}

.page-header__titles__election-name {
  margin-inline: auto !important;
}


/* Center the voter page title after removing the duplicate side branding. */
.page-header {
  display: block !important;
  text-align: center !important;
}

.page-header__right {
  display: none !important;
}

.page-header__titles {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  text-align: center !important;
}

.page-header__titles__election-name,
.page-header__titles__election-name span {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Keep the embedded login form tappable and readable on mobile browsers. */
.page-body,
#main,
.embedded-login-form,
.embedded-login-form form,
.authentication-table,
.authentication-table tbody,
.authentication-table tr,
.authentication-table th,
.authentication-table td {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.embedded-login-form {
  width: min(100%, 520px);
  margin: 18px auto 14px;
}

.embedded-login-form form {
  display: block;
  width: 100%;
}

.authentication-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.authentication-table th,
.authentication-table td {
  vertical-align: middle;
}

.authentication-table input[type="text"],
.authentication-table input[type="password"],
.embedded-login-form input[type="submit"] {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.authentication-table input[type="text"],
.authentication-table input[type="password"] {
  min-height: 52px;
  padding: 10px 12px;
  -webkit-user-select: text;
  user-select: text;
}

.embedded-login-form .container--center {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.embedded-login-form input[type="submit"] {
  min-height: 52px;
  cursor: pointer;
}

@media (max-width: 640px) {
  .nav-menu {
    position: relative !important;
    z-index: 0 !important;
    flex-wrap: wrap;
  }

  .embedded-login-form {
    width: 100%;
    margin-top: 16px;
  }

  .authentication-table,
  .authentication-table tbody,
  .authentication-table tr,
  .authentication-table th,
  .authentication-table td {
    display: block;
    width: 100%;
  }

  .authentication-table {
    border-spacing: 0;
  }

  .authentication-table tr {
    margin-bottom: 12px;
  }

  .authentication-table th {
    padding: 0 0 6px !important;
    text-align: left !important;
    white-space: normal;
  }

  .authentication-table td {
    padding: 0 !important;
  }
}

/* Larger voter ballot questions and answer choices. */
.question-with-votable-answers {
  margin: 12px auto 18px !important;
  max-width: 680px;
}

.question-with-votable-answers__question-title,
.question-title,
.question h2 {
  margin: 12px 0 10px !important;
  color: #111827;
  font-size: clamp(1.55rem, 3.8vw, 2.05rem) !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
}

.question-with-votable-answers__question-description,
.question-with-votable-answers__alerts {
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
}

.classic-vote-candidates-list {
  max-width: 680px !important;
  margin: 20px auto !important;
}

.candidate-with-checkbox {
  min-height: 72px !important;
  height: auto !important;
  margin-bottom: 12px !important;
  border-radius: 8px !important;
}

.candidate-with-checkbox label {
  min-height: 72px !important;
  padding: 16px 20px !important;
  align-items: center !important;
  gap: 12px;
  border-radius: 8px !important;
  font-size: 1.22rem !important;
  line-height: 1.45 !important;
  font-weight: 750 !important;
  word-break: keep-all;
}

.candidate-with-checkbox .candidate-info {
  padding-left: 10px !important;
  font-size: 1.16rem !important;
  line-height: 1.45 !important;
  font-weight: 750 !important;
}

.candidate-with-checkbox input[type="checkbox"] ~ label .checkbox-appearance,
.candidate-with-checkbox input[type="radio"] ~ label .radio-button-appearance {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  border-width: 3px !important;
}

.candidate-with-checkbox input[type="radio"] ~ label .radio-button-appearance {
  border-radius: 999px !important;
}

.candidate-with-checkbox input[type="checkbox"]:checked ~ label .checkbox-appearance::after,
.candidate-with-checkbox input[type="radio"]:checked ~ label .radio-button-appearance::after {
  display: block;
  font-size: 28px !important;
  line-height: 24px !important;
  padding-left: 2px !important;
}

.vote-navigation {
  max-width: 680px !important;
  font-size: 1.05rem !important;
}

.vote-navigation .nice-button,
.vote-navigation button,
.vote-navigation input[type="button"],
.vote-navigation input[type="submit"] {
  min-height: 50px !important;
  padding: 12px 20px !important;
  font-size: 1.08rem !important;
  font-weight: 750 !important;
}

@media (max-width: 640px) {
  .question-with-votable-answers {
    margin: 10px 0 16px !important;
  }

  .question-with-votable-answers__question-title,
  .question-title,
  .question h2 {
    font-size: 1.48rem !important;
  }

  .candidate-with-checkbox {
    min-height: 76px !important;
    margin-bottom: 12px !important;
  }

  .candidate-with-checkbox label {
    min-height: 76px !important;
    padding: 16px 14px !important;
    font-size: 1.18rem !important;
  }

  .candidate-with-checkbox .candidate-info {
    font-size: 1.14rem !important;
  }

  .vote-navigation {
    gap: 6px;
    font-size: 1rem !important;
  }

  .vote-navigation__next-button-container,
  .vote-navigation__previous-button-container {
    padding: 12px 4px !important;
  }
}


/* Collapsible real vote results on the /vote home page. */
.vote-results-panel {
  width: min(920px, 100%);
  margin: clamp(10px, 4vh, 38px) auto 24px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  color: #111827;
  overflow: hidden;
}

.vote-results-panel__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 16px clamp(112px, 16vw, 132px) 16px clamp(18px, 4vw, 28px);
  cursor: pointer;
  list-style: none;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 58%, #ecfdf5 100%);
}

.vote-results-panel__head::-webkit-details-marker {
  display: none;
}

.vote-results-panel-toggle {
  position: absolute;
  top: 18px;
  right: clamp(18px, 4vw, 28px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #93c5fd;
  border-radius: 999px;
  color: #1d4ed8;
  background: #ffffff;
  font-size: 0.92rem;
  font-weight: 850;
  text-align: center;
  pointer-events: none;
}

.vote-results-panel-toggle::before {
  content: "닫힘";
}

.vote-results-panel[open] .vote-results-panel-toggle {
  border-color: #86efac;
  color: #166534;
  background: #dcfce7;
}

.vote-results-panel[open] .vote-results-panel-toggle::before {
  content: "열림";
}

.vote-results-summary-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.vote-results-eyebrow {
  color: #1d4ed8;
  font-size: 0.92rem;
  font-weight: 850;
}

.vote-results-summary-text strong {
  color: #0f172a;
  font-size: clamp(1.24rem, 2.8vw, 1.65rem);
  line-height: 1.25;
  font-weight: 900;
}

.vote-results-summary-text small,
.vote-results-count {
  color: #64748b;
  font-size: 0.92rem;
  font-weight: 750;
}

.vote-results-count {
  white-space: nowrap;
}

.vote-results-body {
  display: grid;
  gap: 10px;
  padding: 0 clamp(18px, 4vw, 28px) 22px;
}

.vote-result-accordion {
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 58%, #ecfdf5 100%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.vote-result-accordion summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 16px clamp(96px, 14vw, 116px) 16px clamp(16px, 3.5vw, 24px);
  cursor: pointer;
  list-style: none;
}

.vote-result-accordion summary::-webkit-details-marker {
  display: none;
}

.vote-result-summary-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vote-result-eyebrow {
  color: #166534;
  font-size: 0.88rem;
  font-weight: 850;
}

.vote-result-summary-text strong {
  color: #0f172a;
  font-size: clamp(1.12rem, 2.4vw, 1.38rem);
  line-height: 1.28;
  font-weight: 900;
}

.vote-result-summary-text small {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 750;
}

.vote-result-toggle {
  position: absolute;
  top: 16px;
  right: clamp(16px, 3.5vw, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #93c5fd;
  border-radius: 999px;
  color: #1d4ed8;
  background: #ffffff;
  font-size: 0.92rem;
  font-weight: 850;
  text-align: center;
  pointer-events: none;
}

.vote-result-toggle::before {
  content: "닫힘";
}

.vote-result-accordion[open] .vote-result-toggle {
  border-color: #86efac;
  color: #166534;
  background: #dcfce7;
}

.vote-result-accordion[open] .vote-result-toggle::before {
  content: "열림";
}

.vote-result-election {
  display: grid;
  gap: 14px;
  padding: 0 clamp(16px, 3.5vw, 24px) 22px;
}

.vote-result-election__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding-top: 2px;
}

.vote-result-election__meta {
  margin: 0 0 4px !important;
  color: #166534 !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
}

.vote-result-election h2,
.vote-result-question h3 {
  margin: 0 !important;
  color: #0f172a;
  line-height: 1.3 !important;
  font-weight: 900 !important;
}

.vote-result-election h2 {
  font-size: clamp(1.18rem, 2.5vw, 1.5rem) !important;
}

.vote-result-election__head a {
  flex: 0 0 auto;
  color: #1d4ed8;
  font-size: 0.95rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vote-result-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.vote-result-summary div {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.92);
}

.vote-result-summary dt {
  margin: 0 0 4px;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 750;
}

.vote-result-summary dd {
  margin: 0;
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 900;
}

.vote-result-question {
  display: grid;
  gap: 10px;
}

.vote-result-question h3 {
  font-size: 1.08rem !important;
}

.vote-result-question ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vote-result-answer__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #1f2937;
  font-size: 1rem;
  font-weight: 750;
}

.vote-result-answer__line strong {
  color: #0f172a;
  white-space: nowrap;
}

.vote-result-answer__bar {
  height: 10px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.vote-result-answer__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #16a34a);
}

.vote-results-empty {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

@media (max-width: 720px) {
  .vote-results-panel {
    margin-top: 0;
  }

  .vote-results-panel__head,
  .vote-result-accordion summary,
  .vote-result-election__head,
  .vote-result-answer__line {
    align-items: stretch;
  }

  .vote-results-panel__head,
  .vote-result-accordion summary,
  .vote-result-election__head {
    flex-direction: column;
  }

  .vote-results-count,
  .vote-result-election__head a {
    width: 100%;
  }

  .vote-results-panel__head {
    padding-right: 112px;
  }
}