:root {
  color-scheme: light;
  --ink: #1f2533;
  --muted: #667085;
  --line: #dce3ee;
  --paper: #ffffff;
  --wash: #f4f7fb;
  --teal: #1a918a;
  --teal-dark: #106962;
  --coral: #e66a55;
  --gold: #d89a2b;
  --night: #283149;
  --shadow: 0 22px 70px rgba(34, 47, 71, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family:
    Inter, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 16%, rgba(120, 201, 208, 0.35), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(240, 138, 176, 0.32), transparent 28%),
    radial-gradient(circle at 52% 82%, rgba(255, 218, 121, 0.22), transparent 26%),
    linear-gradient(135deg, #eff9ff 0%, #fff5fb 52%, #f7f3ff 100%);
}

button {
  font: inherit;
}

.app-shell {
  width: min(1120px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  align-items: center;
  padding: 32px 0;
}

.hidden {
  display: none !important;
}

.hero-panel,
.diagnosis-panel,
.result-panel {
  width: 100%;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.hero-panel {
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
  gap: 28px;
  align-items: stretch;
  padding: 42px;
  overflow: hidden;
  position: relative;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 660px;
  position: relative;
  z-index: 2;
}

.eyebrow,
.question-kicker {
  margin: 0 0 14px;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

h1,
h2 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.12;
}

.nowrap-title {
  white-space: nowrap;
}

.lead {
  max-width: 620px;
  margin: 24px 0 0;
  color: #475467;
  font-size: 18px;
  line-height: 1.9;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hero-facts span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(26, 145, 138, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--night);
  font-size: 13px;
  font-weight: 900;
}

.hero-actions,
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  justify-content: center;
}

.primary-button,
.secondary-button,
.ghost-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.primary-button {
  padding: 0 22px;
  color: #fff;
  background: var(--teal);
  box-shadow: 0 12px 28px rgba(26, 145, 138, 0.24);
}

.hero-cta {
  min-height: 58px;
  padding: 0 32px;
  font-size: 17px;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.answer-button:hover {
  transform: translateY(-1px);
}

.secondary-button,
.ghost-button {
  padding: 0 18px;
  color: var(--night);
  background: #e9eef5;
}

.forecast-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
}

.forecast-card {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.forecast-card.active {
  color: #fff;
  background: linear-gradient(145deg, var(--night), #41516f);
  border-color: transparent;
}

.forecast-card span {
  font-size: 16px;
  font-weight: 900;
}

.forecast-card strong {
  margin-top: 10px;
  font-size: 18px;
}

.forecast-card small {
  color: inherit;
  opacity: 0.72;
  font-weight: 700;
}

.hero-visual {
  min-height: 540px;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

.hero-visual::before {
  content: "";
  position: absolute;
  width: min(86%, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 34%, rgba(139, 215, 224, 0.22) 35% 48%, transparent 50%),
    conic-gradient(from 20deg, rgba(239, 131, 172, 0.3), rgba(139, 215, 224, 0.25), rgba(255, 218, 121, 0.28), rgba(239, 131, 172, 0.3));
  filter: blur(0.2px);
  z-index: -2;
}

.hero-visual img {
  width: min(92%, 560px);
  object-fit: contain;
  filter: drop-shadow(0 26px 42px rgba(34, 47, 71, 0.2));
  transform: translateY(8px);
}

.magic-ring {
  position: absolute;
  width: min(72%, 420px);
  aspect-ratio: 1;
  border: 2px dashed rgba(26, 145, 138, 0.28);
  border-radius: 50%;
  animation: spin 18s linear infinite;
  z-index: -1;
}

.spark {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffda79;
  box-shadow: 0 0 24px rgba(255, 218, 121, 0.85);
}

.spark-a {
  top: 18%;
  right: 20%;
}

.spark-b {
  left: 16%;
  bottom: 24%;
  width: 12px;
  height: 12px;
  background: #8bd7e0;
}

.spark-c {
  right: 14%;
  bottom: 18%;
  width: 10px;
  height: 10px;
  background: #ef83ac;
}

.diagnosis-panel {
  min-height: 640px;
  padding: 30px;
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.progress-wrap {
  min-width: 0;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.progress-track {
  height: 10px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf4;
}

.progress-fill {
  width: 5%;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--coral));
  transition: width 260ms ease;
}

.question-card {
  max-width: 820px;
  margin: 64px auto 0;
}

.question-card h2 {
  font-size: clamp(28px, 4vw, 44px);
}

.answers {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.answer-button {
  width: 100%;
  min-height: 82px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 10px 24px rgba(34, 47, 71, 0.06);
  transition:
    transform 160ms ease,
    border 160ms ease,
    box-shadow 160ms ease;
}

.answer-button:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.ghost-button:focus-visible {
  outline: 3px solid rgba(26, 145, 138, 0.28);
  outline-offset: 3px;
}

.answer-label {
  display: block;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
}

.answer-text {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}

.loading-panel {
  width: min(520px, 100%);
  min-height: 360px;
  display: grid;
  place-items: center;
  justify-self: center;
  padding: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  text-align: center;
}

.loader-mark {
  width: 72px;
  height: 72px;
  border: 8px solid #e7edf4;
  border-top-color: var(--teal);
  border-right-color: var(--coral);
  border-radius: 999px;
  animation: spin 900ms linear infinite;
}

.loading-panel p {
  margin: 20px 0 0;
  color: var(--night);
  font-weight: 900;
}

.result-panel {
  display: block;
  padding: 22px;
  background: rgba(255, 255, 255, 0.72);
}

.report-card {
  overflow: hidden;
  border: 1px solid #b9d8ee;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(250, 244, 252, 0.86), rgba(240, 250, 255, 0.92)),
    #fff;
}

.report-header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid #c9dff1;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(255, 213, 230, 0.8), rgba(226, 245, 255, 0.9));
}

.report-version {
  margin: 0 0 6px;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 900;
}

.report-header h2 {
  font-size: clamp(24px, 4vw, 42px);
}

.report-header p:last-child {
  margin: 8px 0 0;
  color: #667085;
  font-size: 13px;
  font-weight: 800;
}

.share-summary {
  width: min(640px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px auto;
  padding: 22px 22px 20px;
  border: 1px solid rgba(126, 158, 214, 0.45);
  border-radius: 22px;
  background:
    radial-gradient(1.4px 1.4px at 14% 12%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 32% 26%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 68% 14%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 84% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 50% 8%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 22% 60%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 90% 70%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(circle at 50% 30%, rgba(120, 180, 255, 0.22), transparent 42%),
    radial-gradient(circle at 80% 88%, rgba(240, 138, 176, 0.2), transparent 46%),
    linear-gradient(165deg, #131b3a 0%, #1b2550 46%, #0e1530 100%);
  box-shadow: 0 24px 70px rgba(10, 16, 38, 0.45);
  overflow: hidden;
  position: relative;
  text-align: center;
}

.share-summary::before,
.share-summary::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.share-summary::before {
  width: 380px;
  height: 380px;
  left: 50%;
  top: 200px;
  transform: translateX(-50%);
  border: 1px dashed rgba(150, 180, 240, 0.22);
}

.share-summary::after {
  width: 220px;
  height: 220px;
  right: -70px;
  bottom: -60px;
  background: radial-gradient(circle, rgba(240, 138, 176, 0.28), transparent 70%);
}

.share-summary-copy,
.share-character,
.share-score,
.share-mini-grid,
.share-tags,
.share-footer {
  position: relative;
  z-index: 1;
}

.share-kicker {
  margin: 0 0 10px;
  color: #f3c969;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.share-summary h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(120, 170, 255, 0.45);
}

.share-summary-copy p:last-child {
  margin: 12px auto 0;
  max-width: 460px;
  color: #cdd7f0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.share-character {
  display: grid;
  place-items: center;
  min-height: 310px;
}

.share-character img {
  width: min(92%, 390px);
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 22px 32px rgba(34, 47, 71, 0.2));
}

.share-score {
  width: min(260px, 100%);
  margin: -8px auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(90deg, var(--coral), #ef83ac);
  box-shadow: 0 14px 30px rgba(239, 131, 172, 0.28);
}

.share-score span {
  display: block;
  font-size: 12px;
  font-weight: 900;
  opacity: 0.88;
}

.share-score strong {
  display: block;
  font-size: 34px;
  line-height: 1;
}

.share-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.share-mini-grid div {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(150, 180, 240, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}

.share-mini-grid small {
  color: #f3c969;
  font-size: 11px;
  font-weight: 900;
}

.share-mini-grid strong {
  color: #ffffff;
  font-size: 17px;
  line-height: 1.25;
}

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

.share-tags li {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(150, 180, 240, 0.3);
  color: #e7ecfb;
  font-size: 12px;
  font-weight: 800;
}

.share-footer {
  margin: 0;
  color: #aebbe0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}

.orbit-report {
  min-height: 620px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 14px;
  position: relative;
}

.orbit-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #c9dff1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 32px rgba(34, 47, 71, 0.08);
  position: relative;
  z-index: 2;
}

.orbit-card strong {
  display: block;
  color: var(--night);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
}

.orbit-card span,
.orbit-card p:last-child {
  display: block;
  margin-top: 8px;
  color: #475467;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
}

.orbit-top {
  grid-column: 2 / 4;
  grid-row: 1;
  text-align: center;
}

.orbit-top h3 {
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.12;
}

.orbit-left {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
}

.orbit-right {
  grid-column: 4;
  grid-row: 2;
  align-self: center;
}

.orbit-bottom {
  grid-column: 2 / 4;
  grid-row: 3;
}

.orbit-center {
  grid-column: 2 / 4;
  grid-row: 2;
  display: grid;
  place-items: center;
  min-width: 0;
}

.diagnosis-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, auto);
  gap: 14px;
  padding: 16px;
  position: relative;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.94), transparent 20%),
    radial-gradient(circle at 50% 32%, rgba(139, 215, 224, 0.18), transparent 34%),
    radial-gradient(circle at 50% 42%, rgba(239, 131, 172, 0.14), transparent 45%);
}

.diagnosis-map::before {
  content: "";
  position: absolute;
  inset: 36px;
  border: 1px dashed rgba(26, 145, 138, 0.24);
  border-radius: 24px;
  pointer-events: none;
}

.map-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #c9dff1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(34, 47, 71, 0.09);
  position: relative;
  z-index: 2;
}

.map-card strong {
  display: block;
  color: var(--night);
}

.map-type {
  grid-column: 2 / 4;
  grid-row: 1;
  text-align: center;
}

.map-type h3 {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
}

.map-type #result-summary {
  display: none;
}

.map-score {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

.map-score strong {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.2;
  word-break: keep-all;
}

.map-score span,
.map-trait span {
  display: block;
  margin-top: 8px;
  color: #475467;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.55;
}

.map-trait {
  grid-column: 4;
  grid-row: 2;
  align-self: end;
}

.map-trait strong {
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1.05;
}

.map-center {
  grid-column: 2 / 4;
  grid-row: 2 / 5;
  display: grid;
  place-items: center;
  min-width: 0;
  z-index: 1;
}

.map-summary {
  grid-column: 1;
  grid-row: 3;
}

.map-thought {
  grid-column: 4;
  grid-row: 3 / 5;
}

.map-radar {
  grid-column: 1 / 3;
  grid-row: 5;
}

.map-line {
  grid-column: 3 / 5;
  grid-row: 5;
}

.map-type-detail {
  grid-column: 1 / 3;
  grid-row: 6;
}

.map-brain {
  grid-column: 3 / 5;
  grid-row: 6;
}

.map-stack {
  grid-column: 1;
  grid-row: 7;
}

.map-communication {
  grid-column: 2 / 4;
  grid-row: 7;
}

.map-strength {
  grid-column: 4;
  grid-row: 7;
}

.map-watch {
  grid-column: 1;
  grid-row: 8;
}

.map-suited {
  grid-column: 2 / 4;
  grid-row: 8;
}

.map-actions {
  grid-column: 1 / 3;
  grid-row: 9;
}

.map-support {
  grid-column: 3;
  grid-row: 9;
}

.map-runner {
  grid-column: 4;
  grid-row: 9;
}

.map-summary p:last-child {
  margin: 0;
  color: #475467;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.75;
}

.diagnosis-map {
  grid-template-columns: minmax(250px, 0.9fr) minmax(300px, 1.1fr) minmax(250px, 0.9fr);
  grid-template-areas:
    "score type trait"
    "middle-left center middle-right"
    "bottom-left bottom-center bottom-center"
    "bottom-right bottom-right bottom-right"
    "lowest lowest lowest";
  align-items: start;
}

.map-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  position: relative;
  z-index: 2;
  align-content: start;
}

.map-type,
.map-score,
.map-trait,
.map-center,
.map-thought,
.map-radar,
.map-line,
.map-type-detail,
.map-brain,
.map-stack,
.map-communication,
.map-strength,
.map-watch,
.map-suited,
.map-actions,
.map-support,
.map-runner {
  grid-column: auto;
  grid-row: auto;
}

.map-score {
  grid-area: score;
}

.map-type {
  grid-area: type;
}

.map-trait {
  grid-area: trait;
}

.map-center {
  grid-area: center;
}

.map-middle-left {
  grid-area: middle-left;
}

.map-middle-right {
  grid-area: middle-right;
}

.map-bottom-left {
  grid-area: bottom-left;
}

.map-bottom-center {
  grid-area: bottom-center;
}

.map-bottom-right {
  grid-area: bottom-right;
}

.map-lowest {
  grid-area: lowest;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.map-bottom-right {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
  align-items: start;
}

.map-center .result-visual {
  margin: 10px auto;
}

.report-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid #c9dff1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
}

.span-2 {
  grid-column: span 2;
}

.profile-section {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.result-visual {
  width: min(100%, 430px);
  min-height: 430px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(31, 37, 51, 0.1), rgba(31, 37, 51, 0.42)),
    var(--character-bg, linear-gradient(145deg, #283149, #5a6b8a));
  overflow: hidden;
  position: relative;
}

.result-visual::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
}

.character-placeholder {
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.character-symbol {
  font-size: 26px;
  font-weight: 900;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22));
}

.character-image {
  width: min(94%, 390px);
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.25));
}

.character-name {
  font-size: 32px;
  font-weight: 900;
}

.character-type {
  font-size: 14px;
  font-weight: 800;
  opacity: 0.82;
}

.profile-section h3,
.main-analysis h3 {
  margin: 0;
  color: var(--night);
  line-height: 1.28;
}

.profile-section h3 {
  font-size: clamp(30px, 5vw, 52px);
}

.match-score {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 18px 0 0;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--coral);
  font-weight: 900;
}

.result-summary {
  margin: 12px 0 0;
  color: #475467;
  font-size: 14px;
  line-height: 1.7;
}

.section-label {
  margin: 0 0 10px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
}

.score-section {
  grid-column: span 2;
  text-align: center;
}

.score-section strong {
  display: block;
  color: #151927;
  font-size: clamp(72px, 11vw, 118px);
  line-height: 0.92;
  letter-spacing: 0;
}

.score-section span {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #fff;
  background: #ef83ac;
  font-weight: 900;
}

.curve {
  height: 58px;
  margin: 16px auto 10px;
  overflow: hidden;
  border-bottom: 1px solid #a9cbe2;
  max-width: 260px;
  position: relative;
}

.curve::before {
  content: "";
  position: absolute;
  inset: 12px 18px -44px;
  border: 2px solid #a9d5f5;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(173, 220, 250, 0.35), transparent);
}

.curve span {
  position: absolute;
  right: 28px;
  bottom: 0;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 3px solid #ef83ac;
  background: #fff;
}

.score-section p:last-child {
  margin: 0;
  color: #475467;
  font-size: 13px;
  font-weight: 800;
}

.analysis-panel {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.analysis-block {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.main-analysis {
  border-color: rgba(26, 145, 138, 0.28);
  background: linear-gradient(145deg, rgba(26, 145, 138, 0.1), rgba(255, 255, 255, 0.92));
}

.main-analysis h3 {
  font-size: 24px;
}

.main-analysis p:last-child {
  margin: 10px 0 0;
  color: #475467;
  line-height: 1.75;
}

.tendency-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.tendency-card {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tendency-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.tendency-card strong {
  display: block;
  margin-top: 8px;
  color: var(--night);
  font-size: 15px;
  line-height: 1.35;
}

.tendency-meter {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf4;
}

.tendency-meter span {
  display: block;
  width: var(--value);
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--coral));
}

.analysis-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.metric-list {
  display: grid;
  gap: 10px;
}

.metric-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.6fr) 42px;
  gap: 10px;
  align-items: center;
}

.metric-row strong,
.metric-row span {
  font-size: 13px;
  font-weight: 900;
}

.metric-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #f1dce8;
}

.metric-track i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #78c9d0, #f08ab0);
}

.metric-list.compact {
  gap: 12px;
}

.chart-section {
  background: linear-gradient(145deg, #ffffff, #f7fcff);
}

.radar-layout {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.72fr);
  gap: 12px;
  align-items: center;
}

.radar-chart svg,
.line-chart svg,
.brain-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}

.radar-ring {
  fill: rgba(139, 215, 224, 0.08);
  stroke: #d7e9f5;
  stroke-width: 1;
}

.radar-axis {
  stroke: #d7e9f5;
  stroke-width: 1;
}

.radar-area {
  fill: rgba(240, 138, 176, 0.24);
  stroke: none;
}

.radar-line {
  fill: none;
  stroke: #ef83ac;
  stroke-width: 3;
  stroke-linejoin: round;
}

.radar-point {
  fill: #fff;
  stroke: #1a918a;
  stroke-width: 3;
}

.radar-chart text {
  fill: #475467;
  font-size: 11px;
  font-weight: 900;
}

.radar-legend {
  display: grid;
  gap: 8px;
}

.radar-legend span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  background: #f4f8fc;
  color: #475467;
  font-size: 12px;
  font-weight: 900;
}

.radar-legend strong {
  color: var(--night);
}

.line-chart {
  min-height: 160px;
}

.line-grid {
  stroke: #e5edf5;
  stroke-width: 1;
}

.line-area {
  fill: rgba(139, 215, 224, 0.2);
}

.line-path {
  fill: none;
  stroke: #ef83ac;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-point {
  fill: #fff;
  stroke: #1a918a;
  stroke-width: 3;
}

.line-chart text {
  fill: #667085;
  font-size: 12px;
  font-weight: 900;
}

.illustration-section {
  background: linear-gradient(145deg, #f5fbff, #fff5fa);
}

.brain-illustration {
  max-width: 280px;
  margin: 0 auto;
}

.brain-half {
  stroke: rgba(31, 37, 51, 0.12);
  stroke-width: 2;
  transform-box: fill-box;
}

.brain-half.left {
  fill: url("#brainBlue");
}

.brain-half.right {
  fill: url("#brainPink");
}

.brain-stem {
  fill: #c5d8e8;
}

.brain-lines path {
  fill: none;
  stroke: rgba(31, 37, 51, 0.18);
  stroke-width: 3;
  stroke-linecap: round;
}

.brain-illustration text {
  fill: #667085;
  font-size: 13px;
  font-weight: 900;
}

.spark {
  fill: #ef83ac;
  opacity: 0.72;
}

.spark-line {
  fill: none;
  stroke: #8bd7e0;
  stroke-width: 3;
  stroke-linecap: round;
}

.illustration-section p:last-child {
  margin: 8px 0 0;
  color: #475467;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
}

.map-brain .brain-illustration {
  max-width: 240px;
}

.heart-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #475467;
  line-height: 1.65;
}

.heart-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  font-weight: 700;
}

.heart-list li + li {
  margin-top: 8px;
}

.heart-list li::before {
  content: "♡";
  position: absolute;
  left: 0;
  color: #ef83ac;
  font-weight: 900;
}

.heart-list.caution li::before {
  content: "△";
  color: var(--gold);
}

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

.suited-item {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f8fc;
  color: var(--night);
  font-size: 13px;
  font-weight: 900;
}

.action-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: action;
}

.action-steps li {
  min-height: 54px;
  padding: 12px 12px 12px 44px;
  border-radius: 8px;
  background: #fff5fa;
  color: #475467;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  position: relative;
  counter-increment: action;
}

.action-steps li::before {
  content: counter(action);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #ef83ac;
  font-size: 12px;
}

.analysis-block ul,
.analysis-block ol {
  margin: 0;
  padding-left: 20px;
  color: #475467;
  line-height: 1.75;
}

.analysis-block li + li {
  margin-top: 6px;
}

.support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 0;
}

.runner-up-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.runner-up-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--night);
  font-size: 13px;
  font-weight: 900;
}

.support-item {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.support-item span {
  display: none;
  color: var(--gold);
  font-size: 20px;
}

.support-item strong {
  display: block;
  margin-top: 0;
  font-size: 13px;
  line-height: 1.45;
}

.message-section {
  background: linear-gradient(145deg, #fff5fa, #f2fbff);
}

.final-message-section {
  margin: 0 16px 16px;
  padding: 18px;
  border: 1px solid #c9dff1;
  border-radius: 8px;
}

.message-section p:last-child {
  margin: 0;
  color: #475467;
  font-weight: 800;
  line-height: 1.8;
}

.share-message {
  margin: 14px 0 0;
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: 800;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 860px) {
  .app-shell {
    width: min(100% - 20px, 680px);
    padding: 10px 0;
  }

  .hero-panel,
  .result-panel {
    padding: 22px;
  }

  .hero-panel {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 360px;
  }

  .hero-visual img {
    width: min(100%, 420px);
  }

  h1 {
    font-size: 40px;
  }

  .lead {
    font-size: 16px;
  }

  .forecast-board {
    grid-template-columns: 1fr 1fr;
  }

  .forecast-card:nth-child(n) {
    display: flex;
  }

  .forecast-card {
    min-height: 108px;
  }

  .diagnosis-panel {
    min-height: calc(100vh - 20px);
    padding: 18px;
  }

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

  .question-card {
    margin-top: 38px;
  }

  .answer-button {
    min-height: 76px;
  }

  .answer-text {
    font-size: 16px;
  }

  .report-grid,
  .diagnosis-map {
    grid-template-columns: 1fr;
    grid-template-areas:
      "score"
      "type"
      "trait"
      "center"
      "middle-left"
      "middle-right"
      "bottom-left"
      "bottom-center"
      "bottom-right"
      "lowest";
  }

  .orbit-report,
  .diagnosis-map {
    min-height: auto;
    grid-template-rows: auto;
  }

  .span-2,
  .profile-section,
  .score-section,
  .orbit-top,
  .orbit-left,
  .orbit-right,
  .orbit-bottom,
  .orbit-center,
  .map-type,
  .map-score,
  .map-trait,
  .map-summary,
  .map-center,
  .map-thought,
  .map-radar,
  .map-line,
  .map-type-detail,
  .map-brain,
  .map-stack,
  .map-communication,
  .map-strength,
  .map-watch,
  .map-suited,
  .map-actions,
  .map-support,
  .map-runner {
    grid-column: auto;
    grid-row: auto;
  }

  .profile-section {
    grid-template-columns: 1fr;
  }

  .result-visual {
    width: min(100%, 330px);
    min-height: 330px;
  }

  .tendency-grid,
  .analysis-columns,
  .suited-grid,
  .action-steps,
  .radar-layout {
    grid-template-columns: 1fr;
  }

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

  .map-lowest {
    grid-template-columns: 1fr;
  }

  .map-bottom-right {
    grid-template-columns: 1fr;
  }

  .map-score {
    grid-area: score;
  }

  .map-type {
    grid-area: type;
  }

  .map-trait {
    grid-area: trait;
  }

  .map-center {
    grid-area: center;
  }

  .map-middle-left {
    grid-area: middle-left;
  }

  .map-middle-right {
    grid-area: middle-right;
  }

  .map-bottom-left {
    grid-area: bottom-left;
  }

  .map-bottom-center {
    grid-area: bottom-center;
  }

  .map-bottom-right {
    grid-area: bottom-right;
  }

  .map-lowest {
    grid-area: lowest;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  .diagnosis-map {
    grid-template-columns: minmax(160px, 0.9fr) minmax(220px, 1.1fr) minmax(160px, 0.9fr);
    grid-template-areas:
      "score type trait"
      "middle-left center middle-right"
      "bottom-left bottom-center bottom-center"
      "bottom-right bottom-right bottom-right"
      "lowest lowest lowest";
    grid-auto-rows: minmax(88px, auto);
  }

  .result-visual {
    width: min(100%, 300px);
    min-height: 300px;
  }

  .map-card {
    padding: 12px;
  }
}

@media (max-width: 460px) {
  .forecast-board {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .result-actions {
    display: grid;
  }

  .primary-button,
  .secondary-button,
  .ghost-button {
    width: 100%;
  }
}

/* ===== 先行案内 (ウェイトリスト) ブロック ===== */
.waitlist {
  width: min(620px, calc(100% - 28px));
  margin: 22px auto 0;
  padding: 26px 22px;
  border-radius: 22px;
  border: 1px solid rgba(126, 158, 214, 0.4);
  background:
    radial-gradient(circle at 80% 12%, rgba(240, 138, 176, 0.18), transparent 45%),
    linear-gradient(165deg, #18204a 0%, #111935 100%);
  color: #e7ecfb;
  text-align: center;
  box-shadow: 0 18px 50px rgba(10, 16, 38, 0.35);
}
.waitlist-kicker {
  margin: 0 0 8px;
  color: #f3c969;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2em;
}
.waitlist h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(22px, 5vw, 30px);
}
.waitlist-service-desc {
  margin: 0 auto 14px;
  max-width: 640px;
  color: #f0e6b8;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}
.waitlist-lead {
  margin: 0 auto 18px;
  max-width: 600px;
  color: #cdd7f0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}
.waitlist-lead strong { color: #f3c969; }
.waitlist-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 12px;
  flex-wrap: wrap;
}
.waitlist-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(150, 180, 240, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 15px;
}
.waitlist-form input[type="email"]::placeholder { color: #9fb0d8; }
.waitlist-form .primary-button { flex: 0 0 auto; }
.waitlist-note {
  margin: 4px auto 12px;
  color: #8ee6c2;
  font-weight: 800;
  font-size: 14px;
}
.waitlist-channels {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.channel-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(150, 180, 240, 0.4);
}
.channel-button.x { background: #000; color: #fff; }
.channel-button.discord { background: #5865f2; color: #fff; border-color: #5865f2; }
.channel-button.disabled { opacity: 0.5; pointer-events: none; }
.waitlist-privacy {
  margin: 14px 0 0;
  color: #8c9bc4;
  font-size: 11px;
}

/* ===== 図鑑カード (高密度) sc-* ===== */
#share-summary-card { text-align: left; }
.sc-head { position: relative; z-index: 1; border-bottom: 1px solid rgba(150,180,240,0.25); padding-bottom: 12px; }
.sc-kicker { margin: 0 0 8px; color: #f3c969; font-size: 11px; font-weight: 900; letter-spacing: 0.16em; }
.sc-headrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.sc-titlewrap { min-width: 0; }
.sc-type { margin: 4px 0 0; color: #cdd7f0; font-size: 15px; font-weight: 800; }
.sc-tagline { margin: 8px 0 0; color: #aebbe0; font-size: 12.5px; font-weight: 600; line-height: 1.55; }
.sc-charwrap { position: relative; width: 132px; display: grid; place-items: center; }
.sc-charwrap img { width: 132px; height: 132px; object-fit: contain; }
.sc-match { position: absolute; bottom: -6px; right: -4px; display: grid; justify-items: center; padding: 6px 12px; border-radius: 999px; background: linear-gradient(90deg, var(--coral), #ef83ac); box-shadow: 0 8px 20px rgba(239,131,172,0.4); }
.sc-match small { color: #fff; font-size: 9px; font-weight: 900; opacity: 0.9; }
.sc-match strong { color: #fff; font-size: 20px; line-height: 1; }
.sc-basic { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sc-basic div { display: grid; gap: 3px; padding: 8px 6px; border-radius: 10px; background: rgba(255,255,255,0.07); border: 1px solid rgba(150,180,240,0.22); text-align: center; }
.sc-basic small { color: #f3c969; font-size: 9.5px; font-weight: 900; }
.sc-basic strong { color: #fff; font-size: 12.5px; line-height: 1.2; }
.sc-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-box { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.055); border: 1px solid rgba(150,180,240,0.2); }
.sc-label { margin: 0 0 6px; color: #f3c969; font-size: 10.5px; font-weight: 900; letter-spacing: 0.04em; }
.sc-box p { margin: 0; color: #e7ecfb; font-size: 12px; font-weight: 600; line-height: 1.6; }
.sc-box ul, .sc-box ol { margin: 0; padding-left: 1.1em; }
.sc-box li { color: #e7ecfb; font-size: 12px; font-weight: 700; line-height: 1.55; margin-bottom: 2px; }
.sc-pos { border-color: rgba(142,230,194,0.4); }
.sc-pos .sc-label { color: #8ee6c2; }
.sc-neg { border-color: rgba(239,131,172,0.4); }
.sc-neg .sc-label { color: #f0a8c4; }
.sc-meters { display: grid; gap: 6px; }
.sc-meter { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; }
.sc-mlabel { color: #cdd7f0; font-size: 11px; font-weight: 800; }
.sc-mval { color: #fff; font-size: 11px; font-weight: 900; grid-row: 1; grid-column: 2; }
.sc-mbar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.sc-mbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6fb6ff, #b78bff); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chips span { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(150,180,240,0.28); color: #e7ecfb; font-size: 11px; font-weight: 800; }
.sc-actions, .sc-runner { position: relative; z-index: 1; }
.sc-actions ol { display: grid; gap: 2px; }
.sc-msg { position: relative; z-index: 1; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(111,182,255,0.16), rgba(183,139,255,0.14)); border: 1px solid rgba(150,180,240,0.3); }
.sc-msg p:last-child { margin: 0; color: #f2f5ff; font-size: 12.5px; font-weight: 700; line-height: 1.65; }

/* ===== v3 調整: ヘッダー中央寄せ / キャラ中央 / 相性近いタイプの小画像 ===== */
.sc-head { text-align: center; }
.sc-head h3 { margin-top: 2px; }
.sc-head .sc-type { font-size: 16px; }
.sc-charwrap {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  margin: 10px auto 4px;
}
.sc-charwrap img {
  width: min(210px, 60%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(10, 16, 38, 0.5));
}
.sc-match {
  position: absolute;
  bottom: 0;
  right: 14%;
  display: grid;
  justify-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), #ef83ac);
  box-shadow: 0 10px 24px rgba(239, 131, 172, 0.45);
}
.sc-match small { font-size: 10px; }
.sc-match strong { font-size: 24px; }
.sc-tagline { max-width: 480px; margin: 6px auto 0; text-align: center; }
/* 相性が近いタイプ: 小さめキャラ画像つき */
.sc-runner .sc-chips { gap: 8px; }
.sc-runner-item {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px !important;
}
.sc-runner-item img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
}
.sc-runner-item b { color: #fff; font-size: 12px; font-weight: 900; }
.sc-runner-item small { color: #aebbe0; font-size: 10.5px; font-weight: 700; }

/* ===== v4: 明るく可愛い (パステル) テーマ上書き — #share-summary-card 限定 ===== */
#share-summary-card {
  border: 1.5px solid #ffd4e6;
  border-radius: 26px;
  box-shadow: 0 22px 60px rgba(243, 160, 196, 0.28);
  background:
    radial-gradient(2px 2px at 12% 10%, rgba(255, 209, 142, 0.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 14%, rgba(255, 158, 199, 0.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 70% 8%, rgba(143, 200, 255, 0.7), transparent 60%),
    radial-gradient(2px 2px at 26% 24%, rgba(255, 209, 142, 0.7), transparent 60%),
    radial-gradient(circle at 50% 24%, rgba(255, 224, 240, 0.9), transparent 38%),
    radial-gradient(circle at 84% 90%, rgba(199, 226, 255, 0.55), transparent 44%),
    linear-gradient(165deg, #fffaf7 0%, #fdf1f7 52%, #f4f8ff 100%);
}
#share-summary-card::before { border-color: rgba(255, 180, 210, 0.4); }
#share-summary-card::after { background: radial-gradient(circle, rgba(255, 200, 224, 0.45), transparent 70%); }
#share-summary-card .sc-head { border-bottom-color: rgba(255, 180, 210, 0.5); }
#share-summary-card .sc-kicker { color: #ef7aa6; }
#share-summary-card h3 { color: #4a3f5c; text-shadow: 0 2px 10px rgba(255, 180, 210, 0.4); }
#share-summary-card .sc-type { color: #8a7da0; }
#share-summary-card .sc-tagline { color: #9b8fae; }
#share-summary-card .sc-basic div { background: #ffffff; border-color: #ffe0ec; box-shadow: 0 6px 16px rgba(243, 160, 196, 0.12); }
#share-summary-card .sc-basic small { color: #ef7aa6; }
#share-summary-card .sc-basic strong { color: #4a3f5c; }
#share-summary-card .sc-box { background: #ffffff; border-color: #ffe3ef; box-shadow: 0 6px 16px rgba(243, 160, 196, 0.1); }
#share-summary-card .sc-label { color: #ef7aa6; }
#share-summary-card .sc-box p,
#share-summary-card .sc-box li { color: #5a5270; }
#share-summary-card .sc-pos { border-color: #bfe9d4; background: #f4fdf8; }
#share-summary-card .sc-pos .sc-label { color: #2fae7d; }
#share-summary-card .sc-neg { border-color: #ffd2e0; background: #fff5f9; }
#share-summary-card .sc-neg .sc-label { color: #ef6f9e; }
#share-summary-card .sc-mlabel { color: #6a6080; }
#share-summary-card .sc-mval { color: #ef7aa6; }
#share-summary-card .sc-mbar { background: #fde6f1; }
#share-summary-card .sc-mbar i { background: linear-gradient(90deg, #ff9ec7, #ffc59a); }
#share-summary-card .sc-chips span { background: #fff4f9; border-color: #ffd6e7; color: #6a5f80; }
#share-summary-card .sc-runner-item img { background: #fff0f7; }
#share-summary-card .sc-runner-item b { color: #4a3f5c; }
#share-summary-card .sc-runner-item small { color: #9b8fae; }
#share-summary-card .sc-msg { background: linear-gradient(135deg, #fff0f7, #fef3ec); border-color: #ffd9e8; }
#share-summary-card .sc-msg p:last-child { color: #5a5270; }
#share-summary-card .share-footer { color: #ef7aa6; }
#share-summary-card .sc-match small { color: #fff; }
#share-summary-card .sc-match strong { color: #fff; }

/* ===== v5: カード内チャート / 先行案内ライト化 / レスポンシブ ===== */
/* カード内チャート */
.sc-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#share-summary-card .sc-chart { width: 100%; display: grid; place-items: center; }
#share-summary-card .sc-chart svg { width: 100%; height: auto; max-height: 200px; display: block; }
#share-summary-card .sc-chartwide .sc-chart svg { max-height: 160px; }
#share-summary-card .radar-chart text { fill: #6a5f80; font-weight: 700; }
#share-summary-card .line-chart text { fill: #8a7da0; }
#share-summary-card .radar-ring { fill: none; stroke: #f3d3e2; }
#share-summary-card .radar-axis { stroke: #f3d3e2; }
#share-summary-card .radar-area { fill: rgba(255, 158, 199, 0.28); }
#share-summary-card .radar-line { fill: none; stroke: #ef7aa6; stroke-width: 2; }
#share-summary-card .radar-point { fill: #ef7aa6; }
#share-summary-card .line-area { fill: rgba(255, 158, 199, 0.2); }
#share-summary-card .line-path { fill: none; stroke: #ef7aa6; stroke-width: 2.5; }
#share-summary-card .line-grid { stroke: #f3d3e2; }
#share-summary-card .line-point { fill: #ef7aa6; }

/* 先行案内ブロックを明るく可愛く */
.waitlist {
  border: 1.5px solid #ffd4e6;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 200, 224, 0.5), transparent 45%),
    linear-gradient(165deg, #fffaf7 0%, #fdf1f7 100%);
  color: #5a5270;
  box-shadow: 0 18px 44px rgba(243, 160, 196, 0.22);
}
.waitlist-kicker { color: #ef7aa6; }
.waitlist h3 { color: #4a3f5c; }
.waitlist-service-desc { color: #6a4f7a; }
.waitlist-lead { color: #7a6f90; }
.waitlist-lead strong { color: #ef7aa6; }
.waitlist-form input[type="email"] {
  background: #fff; border: 1px solid #ffd6e7; color: #4a3f5c;
}
.waitlist-form input[type="email"]::placeholder { color: #c4a8ba; }
.waitlist-note { color: #2fae7d; }
.waitlist-privacy { color: #a99bb5; }

/* スマホ最適化 */
@media (max-width: 560px) {
  .share-summary { padding: 16px 14px 16px; border-radius: 18px; gap: 10px; }
  .sc-grid, .sc-charts { grid-template-columns: 1fr; gap: 8px; }
  .sc-basic { grid-template-columns: repeat(2, 1fr); }
  .share-summary h3 { font-size: 28px; }
  .sc-head .sc-type { font-size: 14px; }
  .sc-charwrap img { width: 58%; }
  .sc-match { right: 6%; padding: 6px 12px; }
  .sc-match strong { font-size: 20px; }
  .sc-box { padding: 9px 11px; }
  .sc-box p, .sc-box li { font-size: 12.5px; }
  .waitlist-form { flex-direction: column; }
  .waitlist-form .primary-button { width: 100%; }
}

/* ===== v6: 高密度・縦圧縮 (参考IMG_1852/1816のサイズ感に合わせる) ===== */
#share-summary-card { width: min(720px, calc(100% - 24px)); gap: 8px; padding: 18px 18px 16px; }
/* ヘッダー横並びに戻す + キャラ小型化 */
#share-summary-card .sc-head { text-align: left; padding-bottom: 8px; }
#share-summary-card .sc-headrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
#share-summary-card h3 { font-size: clamp(26px, 4.4vw, 36px); }
#share-summary-card .sc-type { font-size: 14px; margin-top: 2px; }
#share-summary-card .sc-tagline { text-align: left; margin: 6px 0 0; max-width: none; font-size: 11.5px; }
#share-summary-card .sc-charwrap { position: relative; width: 124px; margin: 0; }
#share-summary-card .sc-charwrap img { width: 124px; filter: drop-shadow(0 10px 18px rgba(243,160,196,0.4)); }
#share-summary-card .sc-match { position: absolute; bottom: -2px; right: -6px; padding: 5px 11px; }
#share-summary-card .sc-match small { font-size: 9px; }
#share-summary-card .sc-match strong { font-size: 18px; }
/* 余白・文字・間隔を圧縮 */
#share-summary-card .sc-grid { gap: 7px; }
#share-summary-card .sc-charts { gap: 7px; }
#share-summary-card .sc-box { padding: 8px 10px; border-radius: 9px; }
#share-summary-card .sc-label { font-size: 10px; margin-bottom: 4px; }
#share-summary-card .sc-box p, #share-summary-card .sc-box li { font-size: 11px; line-height: 1.5; }
#share-summary-card .sc-box li { margin-bottom: 1px; }
#share-summary-card .sc-basic { gap: 6px; }
#share-summary-card .sc-basic div { padding: 6px 5px; }
#share-summary-card .sc-basic strong { font-size: 11.5px; }
#share-summary-card .sc-meters { gap: 5px; }
#share-summary-card .sc-mlabel, #share-summary-card .sc-mval { font-size: 10px; }
#share-summary-card .sc-chips { gap: 5px; }
#share-summary-card .sc-chips span { padding: 3px 9px; font-size: 10.5px; }
#share-summary-card .sc-chart svg { max-height: 150px; }
#share-summary-card .sc-chartwide .sc-chart svg { max-height: 120px; }
#share-summary-card .sc-runner-item img { width: 30px; height: 30px; }
#share-summary-card .sc-msg { padding: 9px 12px; }
#share-summary-card .sc-msg p:last-child { font-size: 11.5px; line-height: 1.55; }
#share-summary-card .share-footer { font-size: 12px; }

/* スマホでも2カラム維持 (1カラムに落とさない=縦が伸びない) */
@media (max-width: 560px) {
  #share-summary-card { width: calc(100% - 16px); padding: 14px 12px; }
  #share-summary-card .sc-grid, #share-summary-card .sc-charts { grid-template-columns: 1fr 1fr; gap: 6px; }
  #share-summary-card .sc-basic { grid-template-columns: repeat(4, 1fr); }
  #share-summary-card h3 { font-size: 24px; }
  #share-summary-card .sc-charwrap { width: 92px; }
  #share-summary-card .sc-charwrap img { width: 92px; }
  #share-summary-card .sc-box p, #share-summary-card .sc-box li { font-size: 10px; line-height: 1.45; }
  #share-summary-card .sc-label { font-size: 9px; }
  #share-summary-card .sc-chart svg { max-height: 120px; }
}

/* ===== v7: カードをポスター表示 (画面に収める) + 旧詳細レポート非表示 ===== */
/* カードと内容が重複する旧レポートは隠す (チャートはカードに複製済) */
#share-report .report-header,
#share-report .diagnosis-map,
#share-report .final-message-section { display: none !important; }
/* レポート枠を透明化してカードを主役に */
#share-report.report-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
#result-screen.result-panel { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 8px 0; }
/* カードを中央寄せ・縮小ステージ */
.sc-stage { width: 100%; display: flex; justify-content: center; align-items: flex-start; overflow: visible; }
.sc-stage #share-summary-card { margin: 0; }

/* ===== v8: カードを固定幅ポスター化 (端末非依存で 約1:2 比率に統一・参考1170x2532相当) ===== */
#share-summary-card { width: 700px !important; max-width: none !important; }
/* スマホでもレイアウトを変えない (固定幅ポスターを fitCard が縮小表示する) */
@media (max-width: 560px) {
  #share-summary-card { width: 700px !important; padding: 18px 18px 16px; }
  #share-summary-card .sc-grid,
  #share-summary-card .sc-charts { grid-template-columns: 1fr 1fr; gap: 7px; }
  #share-summary-card .sc-basic { grid-template-columns: repeat(4, 1fr); }
  #share-summary-card h3 { font-size: 36px; }
  #share-summary-card .sc-type { font-size: 14px; }
  #share-summary-card .sc-charwrap,
  #share-summary-card .sc-charwrap img { width: 124px; }
  #share-summary-card .sc-box p,
  #share-summary-card .sc-box li { font-size: 11px; line-height: 1.5; }
  #share-summary-card .sc-label { font-size: 10px; }
  #share-summary-card .sc-chart svg { max-height: 150px; }
}

/* ===== v9: 参考(1170x2532)に寸法・密度を合わせる。幅585px(=保存1170px)・高密度 ===== */
#share-summary-card,
#share-summary-card.share-summary { width: 585px !important; max-width: none !important; padding: 14px 14px 12px !important; gap: 7px !important; }
#share-summary-card h3 { font-size: 30px !important; }
#share-summary-card .sc-type { font-size: 13px !important; }
#share-summary-card .sc-tagline { font-size: 10.5px !important; }
#share-summary-card .sc-kicker { font-size: 9.5px !important; }
#share-summary-card .sc-charwrap, #share-summary-card .sc-charwrap img { width: 104px !important; }
#share-summary-card .sc-match { padding: 4px 9px !important; }
#share-summary-card .sc-match strong { font-size: 16px !important; }
#share-summary-card .sc-match small { font-size: 8px !important; }
#share-summary-card .sc-grid, #share-summary-card .sc-charts { gap: 6px !important; }
#share-summary-card .sc-box { padding: 7px 9px !important; border-radius: 8px !important; }
#share-summary-card .sc-label { font-size: 9px !important; margin-bottom: 3px !important; }
#share-summary-card .sc-box p, #share-summary-card .sc-box li { font-size: 9.5px !important; line-height: 1.45 !important; }
#share-summary-card .sc-basic { gap: 5px !important; }
#share-summary-card .sc-basic div { padding: 5px 4px !important; }
#share-summary-card .sc-basic small { font-size: 8.5px !important; }
#share-summary-card .sc-basic strong { font-size: 10.5px !important; }
#share-summary-card .sc-meters { gap: 4px !important; }
#share-summary-card .sc-mlabel, #share-summary-card .sc-mval { font-size: 9px !important; }
#share-summary-card .sc-chips { gap: 4px !important; }
#share-summary-card .sc-chips span { padding: 3px 8px !important; font-size: 9.5px !important; }
#share-summary-card .sc-chart svg { max-height: 120px !important; }
#share-summary-card .sc-chartwide .sc-chart svg { max-height: 100px !important; }
#share-summary-card .sc-runner-item img { width: 26px !important; height: 26px !important; }
#share-summary-card .sc-runner-item b { font-size: 10.5px !important; }
#share-summary-card .sc-runner-item small { font-size: 9px !important; }
#share-summary-card .sc-msg { padding: 8px 11px !important; }
#share-summary-card .sc-msg p:last-child { font-size: 10px !important; line-height: 1.5 !important; }
#share-summary-card .share-footer { font-size: 10.5px !important; }
@media (max-width: 560px) {
  #share-summary-card, #share-summary-card.share-summary { width: 585px !important; }
}

/* ===== v10: 3カラム・マソンリー (参考IMG_1816と同じ密度) ===== */
#share-summary-card .sc-cols { column-count: 3; column-gap: 6px; margin: 0; }
#share-summary-card .sc-cols > .sc-box {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 6px;
}
/* 3カラム内は文字をさらに小さく密に */
#share-summary-card .sc-cols .sc-box { padding: 6px 8px !important; }
#share-summary-card .sc-cols .sc-label { font-size: 8.5px !important; margin-bottom: 2px !important; }
#share-summary-card .sc-cols .sc-box p,
#share-summary-card .sc-cols .sc-box li { font-size: 8.5px !important; line-height: 1.4 !important; }
#share-summary-card .sc-cols .sc-chips span { padding: 2px 6px !important; font-size: 8.5px !important; }
#share-summary-card .sc-cols .sc-mlabel,
#share-summary-card .sc-cols .sc-mval { font-size: 8px !important; }
#share-summary-card .sc-cols .sc-chart svg { max-height: 96px !important; }
#share-summary-card .sc-cols .radar-chart text { font-size: 11px; }
#share-summary-card .sc-cols .sc-runner-item { padding: 3px 8px 3px 3px !important; gap: 5px; }
#share-summary-card .sc-cols .sc-runner-item img { width: 22px !important; height: 22px !important; }
#share-summary-card .sc-cols .sc-runner-item b { font-size: 9px !important; }
#share-summary-card .sc-cols .sc-runner-item small { font-size: 8px !important; }
/* 全幅セクション (折れ線・総合メッセージ) */
#share-summary-card .sc-wide { margin-top: 6px; }
#share-summary-card .sc-wide .sc-chart svg { max-height: 120px !important; }
#share-summary-card .sc-msg { margin-top: 6px; }

/* ===== v11: 可愛いピンク背景 + 折れ線を小型化 ===== */
#share-summary-card {
  background:
    radial-gradient(2px 2px at 12% 9%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1.8px 1.8px at 84% 13%, rgba(255,160,200,0.95), transparent 60%),
    radial-gradient(1.6px 1.6px at 68% 7%, rgba(255,190,150,0.85), transparent 60%),
    radial-gradient(2px 2px at 26% 22%, rgba(255,180,210,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 60%, rgba(255,200,150,0.7), transparent 60%),
    radial-gradient(circle at 50% 16%, rgba(255,224,238,0.95), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(255,206,170,0.55), transparent 46%),
    linear-gradient(165deg, #fff2f8 0%, #ffe7f1 50%, #fff1ea 100%) !important;
  border-color: #ffc9de !important;
  box-shadow: 0 22px 60px rgba(243,150,190,0.32) !important;
}
#share-summary-card::after { background: radial-gradient(circle, rgba(255,190,216,0.5), transparent 70%) !important; }
/* 折れ線を小さく (3カラム内の他チャートと同等) */
#share-summary-card .sc-cols #share-line.sc-chart svg { max-height: 84px !important; }