/* =====================================
   基本テーマ変数
===================================== */
:root{
  --accent:#6C5CE7;
  --accent-2:#A066FF;
  --accent-3:#00D3C6;

  --bg:#F7F7FB;
  --surface:#FFF;
  --surface-2:#F3F4F7;

  --text:#1F2330;
  --text-2:#475069;

  --radius:16px;
  --radius-lg:20px;

  --shadow-1:0 1px 2px rgba(17,24,39,.06),0 1px 1px rgba(17,24,39,.04);
  --shadow-2:0 8px 20px rgba(17,24,39,.08),0 2px 6px rgba(17,24,39,.05);
  --shadow-3:0 18px 40px rgba(17,24,39,.12),0 6px 16px rgba(17,24,39,.06);

  --ring:0 0 0 3px rgba(108,92,231,.15);
}

/* Dark Mode 対応 */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1320;
    --surface:#14182A;
    --surface-2:#101425;
    --text:#F7F8FC;
    --text-2:#C3C8DA;

    --shadow-1:0 1px 2px rgba(0,0,0,.35);
    --shadow-2:0 8px 20px rgba(0,0,0,.45);
    --shadow-3:0 18px 40px rgba(0,0,0,.55);

    --ring:0 0 0 3px rgba(160,102,255,.22);
  }
}

/* =====================================
   ベースリセット
===================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,
  "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}

.container{
  max-width:960px;
  margin:0 auto;
  padding:24px;
}

/* =====================================
   ヒーロー部分（診断開始カード上のグラデーション）
   → index.html の表示崩れはこれが消えていたのが原因！
===================================== */
.hero-grad{
  background:radial-gradient(
      120% 120% at 0% 0%,
      var(--accent) 0%,
      var(--accent-2) 50%,
      var(--accent-3) 100%
  );
  color:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
}

/* 旧版の .hero（詳細ページで使用） */
.hero{
  background:radial-gradient(
    120% 120% at 0% 0%,
    var(--accent) 0%,
    var(--accent-2) 50%,
    var(--accent-3) 100%
  );
  color:#fff;
  padding:28px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
}

/* =====================================
   見出しなど
===================================== */
.h1{
  font-size:clamp(28px,4vw,36px);
  font-weight:800;
  letter-spacing:.02em;
  margin:0 0 8px;
}

.h2{
  font-size:20px;
  font-weight:700;
  margin:0 0 10px;
  color:var(--text);
}

.subtle{color:var(--text-2)}

/* =====================================
   Progress Bar（質問中）
===================================== */
.progress{
  height:8px;
  background:linear-gradient(180deg,var(--surface-2),#E9EBF3);
  border-radius:999px;
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.progress > span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

/* =====================================
   Option Buttons
===================================== */
.option{
  width:100%;
  text-align:left;
  background:var(--surface);
  border:none;
  border-radius:12px;
  padding:16px 18px;
  margin:12px 0;
  box-shadow:var(--shadow-1);
  color:var(--text);
  cursor:pointer;
  transition:transform .05s ease,box-shadow .2s ease,filter .2s ease;
}
.option:hover{
  box-shadow:var(--shadow-2);
  filter:saturate(1.02);
}
.option:active{
  transform:translateY(1px);
}
.option.is-selected{
  box-shadow:var(--shadow-2),var(--ring);
  background:linear-gradient(0deg,rgba(108,92,231,.06),rgba(108,92,231,0));
}

/* =====================================
   Buttons
===================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  border:none;

  padding:12px 18px;
  border-radius:14px;

  box-shadow:var(--shadow-2);
  cursor:pointer;
  font-weight:700;
}
.btn:focus{
  outline:none;
  box-shadow:var(--shadow-2),var(--ring);
}

.btn.ghost{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(108,92,231,.35);
  backdrop-filter:saturate(120%);
  box-shadow:var(--shadow-1)
}

/* =====================================
   Chips
===================================== */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  background:var(--surface);
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  box-shadow:var(--shadow-1);
  border:1px solid rgba(17,24,39,.06)
}

/* =====================================
   Sections
===================================== */
.section{margin-top:24px}

/* =====================================
   Color Dot
===================================== */
.color-dot{
  width:12px;
  height:12px;
  border-radius:50%;
}

/* =====================================
   Footer Links
===================================== */
.footer-link{
  text-decoration:none;
  position:relative;
}
.footer-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;

  background:linear-gradient(90deg,#6366f1,#ec4899);
  opacity:0;
  transform:scaleX(0.8);
  transform-origin:center;
  transition:opacity .18s ease,transform .18s ease;
}
.footer-link:hover::after{
  opacity:1;
  transform:scaleX(1);
}