:root {
  color-scheme: light;
  --paper: #ffffff;
  --soft: #f3f4f1;
  --ink: #111318;
  --muted: #5c6270;
  --line: #dfe2e5;
  --strong-line: #17191e;
  --accent: #d8552b;
  --accent-ink: #b13f1a;
  --danger-ink: #b42318;
  --ok: #18734a;
  --button-ink: #ffffff;
  --shadow: rgba(17, 19, 24, 0.08);
  --card: #ffffff;
  --field: #ffffff;
  --card-shadow: 0 24px 72px rgba(25, 32, 45, 0.1);
  --header-height: 68px;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, Arial, sans-serif;
  font-synthesis: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0c1514;
  --soft: #101c1a;
  --ink: #f3f4f0;
  --muted: #9aa5a4;
  --line: #263432;
  --strong-line: #e4e8e4;
  --accent: #ff6e42;
  --accent-ink: #ff805a;
  --danger-ink: #ff7b72;
  --ok: #4fbf8b;
  --button-ink: #111714;
  --shadow: rgba(0, 0, 0, 0.22);
  --card: #111d1b;
  --field: #0c1514;
  --card-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #0c1514;
    --soft: #101c1a;
    --ink: #f3f4f0;
    --muted: #9aa5a4;
    --line: #263432;
    --strong-line: #e4e8e4;
    --accent: #ff6e42;
    --accent-ink: #ff805a;
    --danger-ink: #ff7b72;
    --ok: #4fbf8b;
    --button-ink: #111714;
    --shadow: rgba(0, 0, 0, 0.22);
    --card: #111d1b;
    --field: #0c1514;
    --card-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 180ms ease, color 180ms ease;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

input,
textarea,
select {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.shell,
.header-inner {
  width: min(1440px, calc(100% - 96px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: var(--header-height);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.header-inner {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.brand {
  width: max-content;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 750;
}

.primary-nav a,
.site-footer a {
  position: relative;
}

.primary-nav a::after,
.site-footer a::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.primary-nav a:hover::after,
.site-footer a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}

.theme-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle-track {
  position: relative;
  width: 38px;
  height: 20px;
  border: 2px solid var(--strong-line);
}

.theme-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--ink);
  transition: transform 180ms ease, background-color 180ms ease;
}

:root[data-theme="dark"] .theme-toggle-knob {
  transform: translateX(18px);
  background: var(--accent);
}

.theme-label {
  min-width: 38px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.header-login {
  min-width: 92px;
  min-height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  border-radius: 8px;
}

.flash-stack {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.flash {
  display: flex;
  align-items: start;
  gap: 10px;
  margin: 0;
  padding: 13px 16px 13px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 10px 30px var(--shadow);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.flash::before {
  flex: none;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--muted);
  content: "\00b7";
}

.flash-success {
  border-left-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--card));
}

.flash-success::before {
  color: var(--ok);
  content: "\2713";
}

.flash-error,
.flash-warning {
  border-left-color: var(--danger-ink);
  background: color-mix(in srgb, var(--danger-ink) 8%, var(--card));
}

.flash-error::before,
.flash-warning::before {
  color: var(--danger-ink);
  content: "!";
}

/* Signed-in identity. The LOGIN pill still sends anonymous visitors to the Hub;
   once a portal session exists the same slot names the account instead, so the
   admin screens stop inviting an operator to log in to what they are using. */
.header-account {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 5px 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

.header-account-avatar {
  width: 30px;
  height: 30px;
  display: inline-flex;
  flex: none;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.header-account-name {
  max-width: 160px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-logout-form {
  display: flex;
  margin: 0;
}

.header-logout {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.header-logout:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.hero {
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
  gap: clamp(56px, 8vw, 128px);
  align-items: start;
  padding-block: clamp(72px, 9vw, 132px) clamp(80px, 10vw, 150px);
}

.hero-copy {
  padding-top: 10px;
}

.eyebrow,
.section-heading > p {
  margin: 0 0 24px;
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.2em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow > span {
  width: 22px;
  height: 3px;
  background: var(--accent);
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1 {
  max-width: 790px;
  margin: 0;
  font-size: clamp(46px, 5.35vw, 82px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.065em;
}

.hero-description {
  margin: 36px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.75;
  letter-spacing: -0.025em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 42px;
}

.button {
  min-height: 52px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  border: 1px solid var(--strong-line);
  font-size: 14px;
  font-weight: 800;
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button-primary {
  background: var(--ink);
  color: var(--paper);
}

.button-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.portal-main {
  min-height: calc(100vh - var(--header-height) - 104px);
}

.form-shell-centered {
  width: min(880px, calc(100% - 48px));
  display: block;
  padding-block: clamp(24px, 3.5vw, 42px) clamp(36px, 5vw, 64px);
}

.form-intro h1,
.result-shell h1 {
  font-size: clamp(42px, 5vw, 72px);
}

.form-intro-centered {
  margin: 0 auto clamp(16px, 2.2vw, 24px);
  text-align: center;
}

.form-intro-centered .eyebrow {
  justify-content: center;
  margin-bottom: 10px;
}

.form-intro-centered h1 {
  margin-inline: auto;
  font-size: clamp(34px, 4vw, 46px);
}

.form-intro > p:last-child,
.result-shell > p {
  max-width: 620px;
  color: var(--muted);
}

.form-intro-centered > p:last-child {
  margin: 10px auto 0;
  font-size: 14px;
  line-height: 1.55;
}

.portal-form {
  display: grid;
  gap: 22px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--soft);
  border-top: 3px solid var(--strong-line);
}

.application-form-card {
  padding: clamp(28px, 5vw, 46px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
}

.field {
  display: grid;
  gap: 8px;
}

.field > label {
  font-size: 13px;
  font-weight: 800;
}

.field input:not([type="checkbox"]),
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  color: var(--ink);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.field input:not([type="checkbox"]):hover,
.field textarea:hover,
.field select:hover {
  border-color: color-mix(in srgb, var(--ink) 35%, var(--line));
}

.field input:not([type="checkbox"]):focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.field textarea {
  min-height: 144px;
  resize: vertical;
}

.field:has(input[type="checkbox"]) {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.field:has(input[type="checkbox"]) > label {
  grid-column: 2;
  grid-row: 1;
}

.field input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.field-error input,
.field-error textarea {
  border-color: var(--accent) !important;
}

.error-text,
.form-alert {
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
}

.error-text ul,
.form-alert ul {
  margin: 0;
  padding-left: 18px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.application-form-card .form-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: 18px;
}

.application-form-card .button {
  min-height: 56px;
  border-radius: 12px;
}

.application-form-card .button-secondary {
  border-color: transparent;
  background: transparent;
}

.application-form-compact {
  --application-control-height: 42px;
  --application-textarea-height: 88px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 22px 24px;
  border-radius: 18px;
}

.application-form-compact .field {
  gap: 5px;
}

.application-form-compact .field > label {
  font-size: 12px;
}

.application-form-compact .field input:not([type="checkbox"]),
.application-form-compact .field select {
  min-height: var(--application-control-height);
  padding: 8px 11px;
  border-radius: 9px;
}

.application-form-compact .field textarea {
  height: var(--application-textarea-height);
  min-height: var(--application-textarea-height);
  padding: 8px 11px;
  border-radius: 9px;
}

.application-form-compact .field-intended_use,
.application-form-compact .field-school_email,
.application-form-compact .field-privacy_consent,
.application-form-compact .field-responsibility_consent,
.application-form-compact > .form-alert,
.application-form-compact > .form-actions {
  grid-column: 1 / -1;
}

.application-form-compact .field-privacy_consent {
  min-height: var(--application-control-height);
  align-content: center;
  padding: 5px 0;
}

.application-form-compact .field-responsibility_consent {
  min-height: var(--application-control-height);
  align-content: center;
  padding: 5px 0;
}

.application-form-compact .field-privacy_consent .consent-copy {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px;
  font-size: 12px;
  font-weight: 800;
}

.application-form-compact .field-responsibility_consent .responsibility-copy {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 3px;
  font-size: 12px;
  font-weight: 800;
}

.responsibility-warning {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.responsibility-warning strong {
  color: var(--danger-ink);
  font-weight: 900;
}

.consent-document-link {
  padding: 0;
  border: 0;
  color: var(--accent-ink);
  background: transparent;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.consent-document-link:hover {
  color: var(--accent);
}

.field-privacy_consent .error-text {
  grid-column: 2;
}

.field-responsibility_consent .error-text {
  grid-column: 2;
}

.application-form-compact .field input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.application-form-compact .form-actions {
  margin-top: 6px;
}

.application-form-compact .button {
  min-height: 44px;
  border-radius: 9px;
}

.privacy-consent-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.26);
}

.privacy-consent-dialog::backdrop {
  background: rgba(8, 12, 15, 0.58);
  backdrop-filter: blur(5px);
}

.privacy-consent-dialog__panel {
  max-height: min(820px, calc(100dvh - 32px));
  padding: clamp(22px, 4vw, 34px);
  overflow-y: auto;
}

.privacy-consent-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.privacy-consent-dialog__header .eyebrow {
  margin: 0 0 5px;
  color: var(--accent-ink);
}

.privacy-consent-dialog__header h2 {
  margin: 0;
  font-size: clamp(23px, 4vw, 32px);
  line-height: 1.2;
}

.dialog-close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--soft);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.privacy-consent-dialog__summary {
  margin: 18px 0;
  color: var(--muted);
  font-size: 14px;
}

.privacy-consent-sections {
  display: grid;
  gap: 10px;
  margin: 0;
}

.privacy-consent-sections > div {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.privacy-consent-sections dt {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 850;
}

.privacy-consent-sections dd {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.privacy-consent-sections dd strong {
  color: var(--ink);
}

.privacy-consent-dialog__version {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.privacy-consent-dialog__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.privacy-consent-dialog__actions .button {
  min-height: 44px;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .application-form-compact {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .application-form-compact .field-intended_use,
  .application-form-compact .field-school_email,
  .application-form-compact .field-privacy_consent,
  .application-form-compact .field-responsibility_consent,
  .application-form-compact > .form-alert,
  .application-form-compact > .form-actions {
    grid-column: auto;
  }

  .privacy-consent-dialog__panel {
    padding: 20px;
  }
}

.result-shell {
  min-height: 620px;
  padding-block: clamp(72px, 10vw, 140px);
}

.receipt-card {
  max-width: 740px;
  display: grid;
  gap: 8px;
  margin: 40px 0 32px;
  padding: 26px;
  background: var(--soft);
  border-left: 4px solid var(--accent);
}

.receipt-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.receipt-card strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(16px, 2vw, 24px);
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  .form-shell-centered {
    width: min(720px, calc(100% - 40px));
  }
}

.auth-shell {
  min-height: 680px;
  display: grid;
  place-items: center;
  padding-block: 64px;
}

.auth-card {
  width: min(100%, 560px);
}

.auth-card-centered {
  width: min(100%, 510px);
  padding: clamp(30px, 5vw, 46px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  text-align: center;
}

.auth-card-centered .eyebrow {
  justify-content: center;
  margin-bottom: 18px;
}

.auth-card h1,
.admin-heading h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.1;
}

.auth-card > p:not(.eyebrow) {
  margin: 14px auto 0;
  color: var(--muted);
}

.compact-form {
  margin-top: 28px;
}

.auth-form {
  gap: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
}

.auth-form .button-primary {
  width: 100%;
  min-height: 56px;
  margin-top: 8px;
  border-radius: 12px;
}

.auth-card-centered .form-alert {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  text-align: left;
}

.admin-shell {
  padding-block: clamp(48px, 7vw, 96px);
}

.admin-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
}

.status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 38px 0 20px;
}

.status-filter a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 750;
}

.status-filter a.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.admin-table-wrap {
  overflow-x: auto;
  border-top: 3px solid var(--strong-line);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.admin-table th,
.admin-table td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.admin-table th {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.admin-table td a {
  color: var(--accent-ink);
  font-weight: 800;
}

.empty-table {
  padding-block: 48px !important;
  color: var(--muted);
  text-align: center;
}

.status-chip {
  display: inline-flex;
  padding: 5px 9px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
}

.status-approved,
.status-activated {
  color: var(--ok);
  border-color: currentColor;
}

.status-rejected {
  color: var(--accent-ink);
  border-color: currentColor;
}

.back-link {
  display: inline-block;
  margin-bottom: 30px;
  color: var(--muted);
  font-weight: 750;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 42px 0;
  border-top: 3px solid var(--strong-line);
}

.detail-grid > div {
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.detail-grid .wide {
  grid-column: 1 / -1;
}

.detail-grid dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.detail-grid dd {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

.admin-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.action-card,
.note-form {
  display: grid;
  gap: 12px;
  padding: 24px;
  background: var(--soft);
}

.action-card textarea,
.note-form textarea {
  min-height: 100px;
  padding: 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  resize: vertical;
}

/* Admin detail actions.
   Every action here is a select, a short note and a button. Laid out as
   full-width cards inside the 1440px shell, a single dropdown stretched across
   the whole viewport and each action cost a screenful, pushing the audit log
   out of sight. They are controls, not articles: cap the reading width and let
   them flow into as many columns as fit. */
.admin-detail.shell {
  width: min(1180px, calc(100% - 96px));
}

.admin-detail .detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 32px 0;
}

.admin-detail .detail-grid > div {
  padding: 14px 16px;
}

/* Every card is a control panel, not an article: a labelled heading, the fields
   it needs and one button. Cards stretch to the tallest in their row and the
   button sits on the bottom edge, so the buttons line up across the row however
   long each description runs. */
.action-rack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  align-items: stretch;
  gap: 14px;
  margin-top: 10px;
}

.action-rack:empty {
  display: none;
}

.section-label {
  margin: 34px 0 0;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.action-rack .action-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.action-rack .action-card h3 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.action-rack .action-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.action-rack .action-card > label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.action-rack .action-card select,
.action-rack .action-card input,
.action-rack .action-card textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.action-rack .action-card textarea {
  min-height: 76px;
  resize: vertical;
}

.action-rack .action-card select:focus,
.action-rack .action-card input:focus,
.action-rack .action-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.action-rack .action-card .button {
  min-height: 44px;
  align-self: start;
  margin-top: auto;
  padding-inline: 18px;
  border-radius: 10px;
}

.admin-detail .audit-section {
  margin-top: 40px;
}

.audit-section {
  margin-top: 60px;
}

.audit-list {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--strong-line);
}

.audit-list li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 24px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}

.audit-list span {
  color: var(--muted);
}

.audit-list p {
  grid-column: 2;
  margin: 0;
}

@media (max-width: 700px) {
  .admin-heading {
    align-items: start;
    flex-direction: column;
  }

  .detail-grid,
  .admin-actions-grid {
    grid-template-columns: 1fr;
  }

  .detail-grid .wide {
    grid-column: auto;
  }

  .audit-list li {
    grid-template-columns: 1fr;
  }

  .audit-list p {
    grid-column: 1;
  }
}

.workspace-policy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 38px;
  padding: 18px 20px;
  background: var(--ink);
  color: var(--paper);
}

.policy-note {
  color: var(--muted);
}

.resource-form {
  margin-top: 28px;
}

.resource-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.confirm-check {
  display: flex;
  align-items: start;
  gap: 10px;
  font-weight: 750;
}

.confirm-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

@media (max-width: 700px) {
  .resource-fields {
    grid-template-columns: 1fr;
  }
}

/* .button-secondary used to have no base rule, so it inherited the transparent
   .button and vanished into every card painted with --soft. Give it the paper
   fill it always implied: unchanged on paper backgrounds, legible on cards. */
.button-secondary {
  background: var(--paper);
  color: var(--ink);
}

.button-secondary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.access-panel {
  border-top: 3px solid var(--strong-line);
}

.section-heading {
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--line);
}

.section-heading > p {
  margin-bottom: 2px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(19px, 1.65vw, 25px);
  line-height: 1.35;
  letter-spacing: -0.04em;
}

.access-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: access;
}

.access-steps li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  min-height: 92px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.step-number {
  align-self: start;
  padding-top: 27px;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 900;
}

.access-steps h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.access-steps p,
.access-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.access-note {
  margin-top: 16px;
}

.resources {
  padding-block: 42px 82px;
  border-top: 1px solid var(--line);
}

.resources-heading {
  border: 0;
  padding-top: 0;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 22px;
}

.metric {
  padding-top: 14px;
  border-top: 3px solid var(--strong-line);
}

.metric strong {
  display: block;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.055em;
}

.metric h3 {
  margin: 10px 0 0;
  font-size: 10px;
  letter-spacing: 0.15em;
}

.metric p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.site-footer {
  min-height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  border-top: 2px solid var(--strong-line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.site-footer a {
  color: var(--accent-ink);
  font-size: 12px;
}

@media (max-width: 960px) {
  .shell,
  .header-inner {
    width: min(100% - 48px, 760px);
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .primary-nav {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero {
    gap: 78px;
  }

  .access-panel {
    width: 100%;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

}

@media (max-width: 580px) {
  :root {
    --header-height: 64px;
  }

  .shell,
  .header-inner {
    width: calc(100% - 32px);
  }

  .header-inner {
    gap: 12px;
  }

  .brand {
    font-size: 21px;
  }

  .header-actions {
    gap: 10px;
  }

  .theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .header-login {
    min-width: 76px;
    padding-inline: 10px;
  }

  .header-account {
    gap: 6px;
    padding-inline: 5px 3px;
  }

  .header-account-name {
    max-width: 88px;
  }

  .header-logout {
    padding-inline: 9px;
  }

  .hero {
    min-height: 0;
    padding-block: 64px 88px;
    gap: 68px;
  }

  h1 {
    font-size: clamp(40px, 13vw, 56px);
  }

  .hero-description br {
    display: none;
  }

  .hero-actions,
  .button {
    width: 100%;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .metric {
    display: grid;
    grid-template-columns: 94px 1fr;
    align-items: end;
    gap: 4px 18px;
  }

  .metric strong {
    grid-row: span 2;
  }

  .metric h3,
  .metric p {
    margin: 0;
  }

  .site-footer {
    min-height: 120px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 20260909 apply-form integrity + privacy policy ---- */

.email-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The box holds a local part, not an address, so it is sized for one instead of
   stretching to fill the row. The domain beside it is text, never typed. */
.field-school_email .email-input-group input:not([type="checkbox"]) {
  flex: 0 1 240px;
  width: 240px;
  min-width: 0;
  max-width: 100%;
}

.email-domain-suffix {
  color: var(--muted);
  font-size: 0.95rem;
  white-space: nowrap;
  user-select: none;
}

/* Set by theme.js while the person is still typing. The server keeps
   .field-error for what it rejected on submit, so the two never fight. */
.field-live-error input:not([type="checkbox"]),
.field-live-error textarea {
  border-color: var(--danger-ink) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-ink) 14%, transparent) !important;
}

.live-error-text {
  margin: 0;
  color: var(--danger-ink);
  font-size: 12px;
  font-weight: 700;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.policy-shell {
  max-width: 760px;
  margin: 0 auto;
  padding-block: 48px 72px;
}

.policy-intro {
  margin-bottom: 32px;
}

.policy-intro h1 {
  margin: 6px 0 8px;
}

.policy-intro > p:last-child {
  color: var(--muted);
}

.policy-sections {
  margin: 0;
  border-top: 1px solid var(--line);
}

.policy-sections > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.policy-sections dt {
  font-weight: 600;
  color: var(--ink);
}

.policy-sections dd {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.policy-version {
  margin-top: 24px;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .policy-sections > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---- 20260909b: keep two-column rows top-aligned ----
   .field is itself a grid. When one cell in a row is taller (a help text that
   wraps), the default align-content: stretch grows every auto row in the
   shorter cell, pushing its input down. Pin the rows to the top so the inputs
   in 이름(국문) and 학번 line up. Checkbox fields keep their own centring. */
.application-form-compact .field:not(:has(input[type="checkbox"])) {
  align-content: start;
}

.application-form-compact .field .help-text {
  margin: 0;
  min-height: 1.4em;
}