body.swpf-ui-context-public-retro {
  min-height: 100vh;
  background: #101b1d;
}

body.swpf-ui-context-public-retro .swpf-public-retro-stage,
body.swpf-ui-context-public-retro .swpf-public-retro-slide,
body.swpf-ui-context-public-retro .swpf-public-retro-smoke,
body.swpf-ui-context-public-retro .swpf-public-retro-crt {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.swpf-ui-context-public-retro .swpf-public-retro-stage {
  z-index: -2;
  overflow: hidden;
  background: #101b1d;
}

body.swpf-ui-context-public-retro .swpf-public-retro-slide {
  opacity: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.045);
  transition: opacity 1.8s ease;
  filter: brightness(.82) contrast(.98) saturate(1.05) sepia(.12) blur(.35px);
}

body.swpf-ui-context-public-retro .swpf-public-retro-slide.is-active {
  opacity: 1;
  animation: swpf-public-retro-pan 18s ease-in-out alternate infinite;
}

body.swpf-ui-context-public-retro .swpf-public-retro-smoke {
  z-index: 2;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 215, 150, .25), transparent 36%),
    linear-gradient(180deg, rgba(8, 17, 19, .15), rgba(8, 17, 19, .62));
}

body.swpf-ui-context-public-retro .swpf-public-retro-crt {
  z-index: 3;
  opacity: .18;
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.09) 0, rgba(255,255,255,.09) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at center, transparent 46%, rgba(0,0,0,.35) 100%);
}

body.swpf-ui-context-public-retro .dialog-off-canvas-main-canvas,
body.swpf-ui-context-public-retro main {
  position: relative;
  z-index: 1;
}

body.swpf-ui-context-public-retro:not(:has(.swpf-platform-lp)) main .region-content > form,
body.swpf-ui-context-public-retro:not(:has(.swpf-platform-lp)) main .region-content > article,
body.swpf-ui-context-public-retro:not(:has(.swpf-platform-lp)) main .region-content > .block-system-main-block {
  color: var(--swpf-ui-retro-ink);
}

body.swpf-ui-context-public-retro:not(:has(.swpf-platform-lp)) .user-login-form,
body.swpf-ui-context-public-retro:not(:has(.swpf-platform-lp)) .user-register-form,
body.swpf-ui-context-public-retro:not(:has(.swpf-platform-lp)) .user-pass {
  width: min(620px, calc(100% - 32px));
  margin: 7vh auto;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 28px;
  background: var(--swpf-ui-retro-paper);
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
  backdrop-filter: blur(8px);
}

@keyframes swpf-public-retro-pan {
  from { transform: scale(1.045) translate3d(-.8%, -.4%, 0); }
  to { transform: scale(1.075) translate3d(.8%, .4%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.swpf-ui-context-public-retro .swpf-public-retro-slide,
  body.swpf-ui-context-public-retro .swpf-public-retro-slide.is-active {
    animation: none;
    transition: none;
  }
}

/* Contact inquiry: use the same centered retro panel treatment as login.
 * Do not depend on a theme-generated body path class. Detect the actual
 * contact form in the content region so this works across front themes. */
body.swpf-ui-context-public-retro main .region-content:has(.contact-message-form),
body.swpf-ui-context-public-retro main .region-content:has(form[id^="contact-message-"]),
body.swpf-ui-context-public-retro .main-content .region-content:has(.contact-message-form),
body.swpf-ui-context-public-retro .main-content .region-content:has(form[id^="contact-message-"]) {
  width: min(900px, calc(100% - 32px));
  margin: 5vh auto;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 28px;
  background: var(--swpf-ui-retro-paper);
  color: var(--swpf-ui-retro-ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .46);
  backdrop-filter: blur(8px);
}

body.swpf-ui-context-public-retro main .region-content:has(.contact-message-form) h1,
body.swpf-ui-context-public-retro main .region-content:has(form[id^="contact-message-"]) h1,
body.swpf-ui-context-public-retro main .region-content:has(.contact-message-form) .page-title,
body.swpf-ui-context-public-retro main .region-content:has(form[id^="contact-message-"]) .page-title {
  margin-top: 0;
  color: var(--swpf-ui-retro-ink);
}

body.swpf-ui-context-public-retro .contact-message-form,
body.swpf-ui-context-public-retro form[id^="contact-message-"] {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--swpf-ui-retro-ink);
}

body.swpf-ui-context-public-retro .contact-message-form input,
body.swpf-ui-context-public-retro .contact-message-form textarea,
body.swpf-ui-context-public-retro .contact-message-form select,
body.swpf-ui-context-public-retro form[id^="contact-message-"] input,
body.swpf-ui-context-public-retro form[id^="contact-message-"] textarea,
body.swpf-ui-context-public-retro form[id^="contact-message-"] select {
  background: rgba(255, 255, 255, .96);
  color: #1f2937;
  border-color: rgba(120, 110, 90, .42);
}

@media (max-width: 767px) {
  body.swpf-ui-context-public-retro main .region-content:has(.contact-message-form),
  body.swpf-ui-context-public-retro main .region-content:has(form[id^="contact-message-"]),
  body.swpf-ui-context-public-retro .main-content .region-content:has(.contact-message-form),
  body.swpf-ui-context-public-retro .main-content .region-content:has(form[id^="contact-message-"]) {
    width: calc(100% - 20px);
    margin: 20px auto;
    padding: 20px;
    border-radius: 20px;
  }
}

/* Contact inquiry: preview is not used in the public retro form. */
body.swpf-ui-context-public-retro .contact-message-form [data-drupal-selector="edit-preview"],
body.swpf-ui-context-public-retro .contact-message-form #edit-preview,
body.swpf-ui-context-public-retro form[id^="contact-message-"] [data-drupal-selector="edit-preview"],
body.swpf-ui-context-public-retro form[id^="contact-message-"] #edit-preview {
  display: none !important;
}

/* SWPF無料アカウント登録: ログイン画面と同じ中央カード表現に統一する。
 * swpf-ui-registration-page は preprocess_html() が対象URLだけに付与するため、
 * LP・問い合わせ・標準ユーザー登録には影響しない。 */
body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content {
  width: min(760px, calc(100% - 32px));
  margin: 5vh auto;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 28px;
  background: var(--swpf-ui-retro-paper);
  color: var(--swpf-ui-retro-ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .46);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content h1,
body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content .page-title,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content h1,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content .page-title {
  margin-top: 0;
  color: var(--swpf-ui-retro-ink);
}

body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content form,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content form {
  margin: 0;
  color: var(--swpf-ui-retro-ink);
}

body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content input,
body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content select,
body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content textarea,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content input,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content select,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content textarea {
  background: rgba(255, 255, 255, .96);
  color: #1f2937;
  border-color: rgba(120, 110, 90, .42);
}

body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content img,
body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content video,
body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content iframe,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content img,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content video,
body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content iframe {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 767px) {
  body.swpf-ui-context-public-retro.swpf-ui-registration-page main .region-content,
  body.swpf-ui-context-public-retro.swpf-ui-registration-page .main-content .region-content {
    width: calc(100% - 20px);
    margin: 20px auto;
    padding: 20px;
    border-radius: 20px;
  }
}