:root {
  --content-width: min(100% - 32px, 900px);
  --radius-md: 24px;
  --radius-lg: 32px;
  --transition-base: 240ms ease;
}

body[data-shindan-theme="common"] {
  --color-bg: #f6f6f3;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f1ec;
  --color-text: #202020;
  --color-text-muted: #4a4a4a;
  --color-primary: #6c6c6c;
  --color-primary-strong: #4f4f4f;
  --color-border: rgb(32 32 32 / 0.16);
  --color-shadow: rgb(0 0 0 / 0.12);
  --color-result: #fbfbf8;
  --color-dark-rgb: 108 108 108;
}

body[data-shindan-theme="women"] {
  --color-bg: #fffafc;
  --color-surface: #ffffff;
  --color-surface-alt: #fff1f7;
  --color-text: #1f1f1f;
  --color-text-muted: #3f3f3f;
  --color-primary: #b85d86;
  --color-primary-strong: #8f4667;
  --color-border: rgb(63 63 63 / 0.16);
  --color-shadow: rgb(0 0 0 / 0.12);
  --color-result: #fffdf7;
  --color-dark-rgb: 232 106 166;
}

body[data-shindan-theme="men"] {
  --color-bg: #f3f6fb;
  --color-surface: #ffffff;
  --color-surface-alt: #eef3f9;
  --color-text: #18202a;
  --color-text-muted: #3c4958;
  --color-primary: #2f5d87;
  --color-primary-strong: #1f4464;
  --color-border: rgb(24 32 42 / 0.16);
  --color-shadow: rgb(7 18 31 / 0.14);
  --color-result: #f7fbff;
  --color-dark-rgb: 47 93 135;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-block-size: 100vh;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

img {
  display: block;
  max-inline-size: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.shindan-page {
  inline-size: 100%;
}

.shindan-shell {
  inline-size: var(--content-width);
  margin-inline: auto;
}

.shindan-static-header {
  padding-block: 40px 0;
}

.shindan-static-header__title {
  margin: 0 auto;
  inline-size: fit-content;
  font-size: clamp(2.625em, 5vw, 3.75em);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.shindan-hero {
  position: relative;
  overflow: clip;
  padding-block: 2rem;
}

.shindan-hero::before,
.shindan-hero::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inline-size: 240px;
  block-size: 240px;
  border-radius: 50%;
  filter: blur(12px);
  opacity: 0.7;
  pointer-events: none;
}

.shindan-hero::before {
  inset-inline-start: -90px;
  background: color-mix(in srgb, rgb(var(--color-dark-rgb)) 14%, transparent);
}

.shindan-hero::after {
  inset-inline-end: -110px;
  inset-block-start: 10px;
  background: color-mix(in srgb, rgb(var(--color-dark-rgb)) 10%, transparent);
}

.shindan-hero__inner {
  display: grid;
  gap: 24px;
  align-items: center;
}

.shindan-hero__inner--stacked {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.shindan-hero__inner--stacked .shindan-hero__copy {
  max-inline-size: 900px;
}

.shindan-hero__inner--stacked .shindan-card,
.shindan-hero__inner--single .shindan-card {
  inline-size: min(100%, 900px);
}

.shindan-hero__inner--single {
  justify-items: center;
}

.shindan-hero__copy {
  display: grid;
  gap: 16px;
}

.shindan-hero__title {
  margin: 0;
  font-size: clamp(2.3em, 4vw, 3.2em);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.shindan-hero__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.725em;
  line-height: 1.8;
}

.shindan-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 20px 50px var(--color-shadow);
  backdrop-filter: blur(18px);
}

.shindan-card__inner {
  display: grid;
  gap: 24px;
  padding: 2.2rem;
}

.shindan-progress {
  display: grid;
  gap: 10px;
}

.shindan-progress__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 1.3125em;
  color: var(--color-text-muted);
}

.shindan-progress__bar {
  overflow: hidden;
  inline-size: 100%;
  block-size: 10px;
  border-radius: calc(infinity * 1px);
  background: color-mix(in srgb, rgb(var(--color-dark-rgb)) 10%, transparent);
}

.shindan-progress__value {
  inline-size: 0;
  block-size: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: inline-size var(--transition-base);
}

.shindan-panel {
  display: grid;
  gap: 3rem;
}

.shindan-panel__title {
  margin: 0;
  font-size: clamp(2.4em, 5vw, 3.4em);
  line-height: 1.4;
  color: var(--color-text);
}

.shindan-panel__description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.6em;
  line-height: 1.8;
}

.shindan-choices {
  display: grid;
  gap: 12px;
}

.shindan-choice {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-block-size: 84px;
  padding-block: 18px;
  padding-inline: 18px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base);
}

.shindan-choice:hover,
.shindan-choice:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, rgb(var(--color-dark-rgb)) 42%, transparent);
  background: var(--color-surface-alt);
  box-shadow: 0 12px 24px color-mix(in srgb, rgb(var(--color-dark-rgb)) 22%, transparent);
  outline: none;
}

.shindan-choice__label {
  font-size: 1.8em;
  font-weight: 700;
}

.shindan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.shindan-button {
  font-size: 1.4em;
  --_base-size: calc(250 * 1em / 16);
  display: inline grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: calc(8 * 1em / 16);
  align-items: center;
  min-inline-size: fit-content;
  inline-size: min(var(--_base-size), 100%);

  appearance: none;
  border: 0;
  border-radius: calc(infinity * 1px);
  padding-block: 1.8rem;
  padding-inline: 2.5rem;
  margin-inline: auto;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base),
    background-color var(--transition-base);
}

.shindan-button:hover,
.shindan-button:focus-visible {
  transform: translateY(-1px);
  outline: none;
  @media (any-hover: hover) {
    transform: translateY(-1px);
    outline: none;
  }
}

.shindan-button--ghost {
  background: color-mix(in srgb, rgb(var(--color-dark-rgb)) 8%, transparent);
  color: var(--color-text);
}

.shindan-button--primary {
  background: var(--color-primary);
  color: #ffffff !important;
  box-shadow: 0 12px 24px color-mix(in srgb, rgb(var(--color-dark-rgb)) 22%, transparent);
}

.shindan-button--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.shindan-button--primary,
.shindan-button--link {
  --_duration: 0.3s;
  --_translate: 0;
  &::before {
    content: "";
  }

  &::after {
    content: "";
    justify-self: end; /* 右寄せ */
    inline-size: calc(8 * 1em / 16);
    aspect-ratio: 1;
    border-block-start: 1px solid;
    border-inline-end: 1px solid;
    translate: var(--_translate, 0);
    rotate: 45deg;
    transition: translate var(--_duration);
  }

  @media (any-hover: hover) {
    &:hover,
    &:focus-visible {
      --_translate: 4px;
    }
  }
}

.shindan-button--ghost {
  --_duration: 0.3s;
  --_translate: 0;

  &::before {
    content: "";
    justify-self: start; /* 左寄せ */
    inline-size: calc(8 * 1em / 16);
    aspect-ratio: 1;
    border-block-end: 1px solid;
    border-inline-start: 1px solid;
    translate: var(--_translate, 0);
    rotate: 45deg;
    transition: translate var(--_duration);
  }

  &::after {
    content: "";
  }

  @media (any-hover: hover) {
    &:hover,
    &:focus-visible {
      --_translate: -4px;
    }
  }
}

.shindan-result {
  display: grid;
  gap: 20px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, rgb(var(--color-dark-rgb)) 16%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-result);
}

.shindan-result__label {
  display: inline-flex;
  inline-size: fit-content;
  padding-block: 7px;
  padding-inline: 12px;
  border-radius: calc(infinity * 1px);
  border: 1px solid color-mix(in srgb, rgb(var(--color-dark-rgb)) 20%, transparent);
  background: color-mix(in srgb, rgb(var(--color-dark-rgb)) 12%, transparent);
  color: var(--color-primary-strong);
  font-size: 1.5em;
  font-weight: 700;
}

.shindan-result__name {
  margin: 0;
  font-size: clamp(2.625em, 6vw, 4.2em);
  line-height: 1.2;
  margin-inline: auto;
}

.shindan-result__body {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.5em;
  line-height: 1.8;
  inline-size: fit-content;
  margin-inline: auto;
}

.shindan-result__media {
  margin: 0 auto;
  overflow: hidden;
  border-radius: calc(var(--radius-md) - 4px);
  background: rgb(255 255 255 / 0.8);
  aspect-ratio: 1 / 1;
  inline-size: 80%;
}

.shindan-history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}

.shindan-history__item {
  padding-block: 8px;
  padding-inline: 12px;
  border-radius: calc(infinity * 1px);
  background: rgb(255 255 255 / 0.78);
  color: var(--color-text-muted);
  font-size: 1.21875em;
}

@media (min-width: 768px) {
  .shindan-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 40px;
  }

  .shindan-hero__inner--stacked {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .shindan-hero__inner--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .shindan-panel {
    gap: 5rem;
  }

  .shindan-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shindan-choices[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shindan-button--link {
    inline-size: fit-content;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}