/* ===== 診断ページ専用 ===== */
.shindan-wrap { max-width: 860px; }
.q-block {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-5);
}
.q-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.q-num {
  background: var(--color-primary); color: #fff;
  font-weight: 900; font-size: var(--fs-sm);
  padding: 4px 14px; border-radius: var(--radius-pill);
}
.q-title { font-size: var(--fs-h4); font-weight: 700; color: var(--color-primary); margin: 0; flex: 1; }
.q-req {
  background: var(--color-accent); color: #fff;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 12px; border-radius: var(--radius-pill);
}
.q-opt {
  background: var(--color-bg-alt); color: var(--color-muted);
  font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 12px; border-radius: var(--radius-pill);
}
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.opt-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.opt-card {
  position: relative; display: flex; align-items: center;
  padding: var(--space-4) var(--space-4);
  min-height: 60px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
  font-weight: 700; color: var(--color-primary);
}
.opt-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card .opt-label { display: block; line-height: 1.5; font-size: var(--fs-sm); }
.opt-card .opt-label small { display: block; font-weight: 500; color: var(--color-muted); font-size: var(--fs-xs); }
.opt-card:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  box-shadow: var(--shadow-sm);
}
.opt-card:has(input:checked)::after {
  content: "✓"; position: absolute; top: 8px; right: 12px;
  color: var(--color-accent); font-weight: 900;
}
.select-wrap select {
  width: 100%; max-width: 420px;
  font-family: var(--font-base); font-size: var(--fs-body); font-weight: 700;
  color: var(--color-primary);
  padding: 14px 18px;
  border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-bg); cursor: pointer;
}
.shindan-submit { text-align: center; margin-top: var(--space-6); }
.err-msg { color: #c0392b; font-weight: 700; margin-top: var(--space-3); }

/* 結果 */
.result-section { background: var(--color-bg-alt); scroll-margin-top: 90px; }
.result-hero { text-align: center; }
.result-lead {
  display: inline-block;
  font-size: var(--fs-h4); font-weight: 900; color: var(--color-primary);
  background: linear-gradient(transparent 60%, var(--pal-marker, #f3c79a) 60%);
  padding: 0 6px; margin-bottom: var(--space-5);
}
.result-main .r-card {
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  max-width: 640px; margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
.result-main .r-name { font-size: var(--fs-h3); font-weight: 900; color: var(--color-primary); margin: 0 0 var(--space-3); }
.result-main .r-desc { color: var(--color-muted); margin: 0 0 var(--space-5); text-align: left; }
.result-sub { margin-top: var(--space-7); }
.result-sub-title {
  text-align: center; font-size: var(--fs-h4); font-weight: 700;
  color: var(--color-primary); margin: 0 0 var(--space-4);
}
.result-sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 760px; margin: 0 auto; }
.result-sub-grid .r-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}
.result-sub-grid .r-name { font-size: var(--fs-body); font-weight: 700; color: var(--color-primary); margin: 0 0 var(--space-2); }
.result-sub-grid .r-desc { font-size: var(--fs-xs); color: var(--color-muted); margin: 0 0 var(--space-3); text-align: left; }
.result-note { text-align: center; color: var(--color-muted); font-size: var(--fs-sm); margin-top: var(--space-5); }
.result-actions { text-align: center; margin-top: var(--space-5); }

@media (max-width: 880px) {
  .opt-grid, .opt-grid.cols2, .result-sub-grid { grid-template-columns: 1fr; }
}