/* ============================================================
   蒼山めぇ診断シリーズ 共通スタイル
   ============================================================ */
:root{
  --sd-bg-top:#1B1230; --sd-bg-mid:#2A1E4A; --sd-bg-low:#3B2A63;
  --sd-paper:#F6F2FA; --sd-ink:#241A3D; --sd-ink-soft:#6B5E82;
  --sd-gold:#D9A93C; --sd-pink:#E28FA0; --sd-violet:#9B7FD6;
  --sd-font-d:"Shippori Mincho",serif; --sd-font-b:"Zen Maru Gothic",sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:var(--sd-font-b); color:var(--sd-paper); background:var(--sd-bg-top); line-height:1.8; -webkit-font-smoothing:antialiased;}
a{color:inherit;}
button{font-family:inherit;}

.sd-hero{position:relative; padding:26px 20px 20px; text-align:center;
  background:linear-gradient(var(--sd-bg-top) 0%, var(--sd-bg-mid) 60%, var(--sd-bg-low) 100%);}
.sd-kicker{font-size:10px; letter-spacing:.3em; color:var(--sd-gold); font-weight:700; margin-bottom:10px;}
.sd-hero h1{font-family:var(--sd-font-d); font-weight:800; font-size:clamp(20px,6vw,28px); letter-spacing:.02em;}
.sd-hero p{margin-top:10px; font-size:12px; color:#D8CCEE;}

.sd-main{max-width:480px; margin:0 auto; padding:20px 20px 60px;}

/* ---- 質問フロー用 ---- */
.sd-progress{height:6px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; margin-bottom:18px;}
.sd-progress-fill{height:100%; background:linear-gradient(90deg,var(--sd-pink),var(--sd-violet)); transition:width .3s;}
.sd-qcount{font-size:11px; color:#C9BEE0; text-align:center; margin-bottom:6px;}
.sd-question{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:24px 20px; text-align:center;}
.sd-question .q{font-family:var(--sd-font-d); font-size:16px; font-weight:700; margin-bottom:20px; line-height:1.7;}
.sd-choice{display:block; width:100%; text-align:left; padding:14px 16px; margin-bottom:10px; border-radius:14px;
  border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); color:var(--sd-paper);
  font-size:14px; font-weight:700; cursor:pointer; transition:background .15s, border-color .15s;}
.sd-choice:hover, .sd-choice:active{background:rgba(226,143,160,.18); border-color:var(--sd-pink);}

/* ---- 入力フォーム用 ---- */
.sd-form{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:22px 20px;}
.sd-form label{display:block; font-size:12px; font-weight:700; color:#D8CCEE; margin:14px 0 6px;}
.sd-form label:first-child{margin-top:0;}
.sd-form input, .sd-form select{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.9); color:var(--sd-ink); font-size:15px; font-family:inherit;
}
.sd-form .sd-hint{font-size:11px; color:#B8A9D6; margin-top:5px;}
.sd-form .sd-row2{display:flex; gap:10px;}
.sd-form .sd-row2 > div{flex:1;}
.sd-submit{display:block; width:100%; margin-top:20px; padding:15px; border:none; border-radius:999px;
  background:linear-gradient(120deg,var(--sd-violet),var(--sd-pink)); color:#fff; font-weight:800; font-size:15px; cursor:pointer;
  box-shadow:0 6px 16px rgba(155,127,214,.35);}
.sd-error{color:#FFB3C0; font-size:12px; margin-top:10px; text-align:center;}

/* ---- 結果画面 ---- */
.sd-result{text-align:center;}
.sd-badge{width:120px; height:120px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center;
  justify-content:center; font-size:52px; box-shadow:0 10px 30px rgba(0,0,0,.35); border:3px solid rgba(255,255,255,.25);}
.sd-result-label{font-size:11px; letter-spacing:.2em; color:#C9BEE0; margin-bottom:6px;}
.sd-result-title{font-family:var(--sd-font-d); font-weight:900; font-size:clamp(24px,7vw,34px); margin-bottom:14px;}
.sd-result-sub{font-size:12px; color:#B8A9D6; margin-bottom:18px;}
.sd-trait-list{display:flex; flex-direction:column; gap:8px; text-align:left; margin-bottom:22px;}
.sd-trait{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px; font-size:13px;}
.sd-trait b{color:var(--sd-gold);}
.sd-btn-row{display:flex; flex-direction:column; gap:10px;}
.sd-btn{display:block; width:100%; padding:14px; border-radius:999px; border:none; font-weight:800; font-size:14px; cursor:pointer;}
.sd-btn.primary{background:#000; color:#fff;}
.sd-btn.secondary{background:rgba(255,255,255,.1); color:var(--sd-paper); border:1.5px solid rgba(255,255,255,.25);}
.sd-btn.portal{background:linear-gradient(120deg, var(--sd-violet), var(--sd-pink)); color:#fff; font-weight:900;
  box-shadow:0 6px 18px rgba(155,127,214,.4); border:none; letter-spacing:.02em;}

@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }

/* ==== 結果画面のシェアブロック（X/LINE/Threads/WhatsApp の4アイコン） ==== */
.sd-share-block{
  margin:18px 0 6px; padding:14px 10px 12px;
  border:1px solid rgba(243,233,198,.22); border-radius:16px;
  background:rgba(255,255,255,.04);
}
.sd-share-label{
  text-align:center; font-size:12px; font-weight:800; letter-spacing:.08em;
  opacity:.8; margin-bottom:10px;
}
.sd-btn-icon{
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px;
}
.sd-btn-icon svg{ flex:0 0 auto; }