:root{
  --bg:#0d0f14;
  --bg-soft:#151922;
  --line:#262c39;
  --ink:#e8eaf0;
  --ink-dim:#98a0b3;
  --gold:#d8b168;
  --gold-dim:#8a7040;
  --violet:#a78bd6;
  --radius:14px;

  /* 選択肢の丸のサイズ（中央ほど小さい） */
  --d-lg:clamp(44px,12.5vw,58px);
  --d-md:clamp(34px,9.5vw,45px);
  --d-sm:clamp(26px,7.2vw,34px);
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.85;
  font-size:16px;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  /* うっすら光を差す */
  background-image:radial-gradient(120% 70% at 50% -10%, #1b2130 0%, var(--bg) 60%);
  background-attachment:fixed;
}

#app{
  flex:1;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:clamp(28px,7vw,56px) 20px 40px;
}

.screen{display:none}
.screen.is-active{display:block;animation:fade .4s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ========== 共通パーツ ========== */
.btn{
  display:block;
  width:100%;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
  color:var(--ink);
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  line-height:1.5;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  touch-action:manipulation;          /* 連続タップでの拡大を止める */
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s, background .18s, transform .1s;
}
.btn:hover{border-color:var(--gold-dim);background:#1a1f2b}
.btn:active{transform:scale(.99)}

.btn--primary{
  background:linear-gradient(180deg,#e0bb75,#c99f52);
  border-color:transparent;
  color:#20180a;
  letter-spacing:.04em;
}
.btn--primary:hover{background:linear-gradient(180deg,#eac888,#d4aa5d);border-color:transparent}

.btn--ghost{
  background:transparent;
  border-color:transparent;
  color:var(--ink-dim);
  font-weight:400;
  font-size:.9rem;
  padding:12px;
}
.btn--ghost:hover{background:transparent;color:var(--ink);border-color:transparent}
/* 高さは保ったまま隠す。display:none にすると設問の位置が動く */
.btn--ghost.is-off{visibility:hidden;pointer-events:none}

/* ========== ホーム ========== */
/* イントロだけは画面の中央に置く */
#screen-intro.is-active{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100dvh - 2 * clamp(28px,7vw,56px));
}

.hero{text-align:center;width:100%;padding-bottom:6vh}

.hero__mark{
  font-family:var(--serif);
  font-size:clamp(3.6rem,19vw,6.4rem);
  font-weight:600;
  line-height:1;
  letter-spacing:.14em;
  text-indent:.14em;               /* 字間の分だけ右に寄るのを戻す */
  color:var(--gold);
  background:linear-gradient(180deg,#f0d79c 0%,#d8b168 55%,#a8863f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:20px;
}

.hero__en{
  font-size:clamp(.62rem,2.7vw,.78rem);
  letter-spacing:.22em;
  text-indent:.22em;
  color:var(--ink-dim);
  margin-bottom:34px;
}

.hero__ja{
  font-family:var(--serif);
  font-size:clamp(1.25rem,5.2vw,1.6rem);
  font-weight:600;
  letter-spacing:.14em;
  text-indent:.14em;
  margin-bottom:48px;
}

/* ホームのボタンは幅いっぱいだと間延びするので絞る */
.hero .btn{max-width:340px;margin:0 auto}

/* ========== 設問 ========== */
/* 進捗は上に固定し、設問と選択肢は残りの高さの中央に置く */
#screen-quiz.is-active{
  display:flex;
  min-height:calc(100dvh - 2 * clamp(28px,7vw,56px));
}
.quiz{display:flex;flex-direction:column;width:100%}
.quiz__body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-bottom:8vh;   /* 完全な中央より少し上に置くと収まりがよい */
}

.progress{margin-bottom:34px}
.progress__bar{
  height:3px;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
}
.progress__bar span{
  display:block;
  height:100%;
  width:0;
  background:var(--gold);
  transition:width .3s ease;
}
.progress__text{
  margin-top:10px;
  font-size:.78rem;
  color:var(--ink-dim);
  letter-spacing:.08em;
}
.progress__text b{color:var(--gold);font-size:.95rem;font-weight:600}

.quiz__question{
  font-family:var(--serif);
  font-size:clamp(1.15rem,4.6vw,1.4rem);
  line-height:1.85;
  letter-spacing:.02em;
  min-height:5.5em;
  margin-bottom:28px;
}

/* ---- 選択肢：大きさの違う丸を横一列に ---- */
.scale{margin-bottom:10px}

.scale__labels{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
  font-size:.8rem;
  letter-spacing:.06em;
}
.scale__label.is-agree{color:var(--gold)}
.scale__label.is-disagree{color:var(--violet)}

.scale__dots{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(6px,2.4vw,16px);
  padding:4px 0;
  /* 丸を連打したときに、拡大や文字選択が起きないようにする */
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}

.dot{
  flex:0 0 auto;
  border-radius:50%;
  background:transparent;
  border:2px solid var(--dot-color);
  cursor:pointer;
  padding:0;
  touch-action:manipulation;          /* ダブルタップ拡大を止める */
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s, box-shadow .18s, transform .12s, border-width .18s;
}
.dot--lg{width:var(--d-lg);height:var(--d-lg)}
.dot--md{width:var(--d-md);height:var(--d-md)}
.dot--sm{width:var(--d-sm);height:var(--d-sm)}

.dot--agree{--dot-color:var(--gold)}
.dot--disagree{--dot-color:var(--violet)}
.dot--mid{--dot-color:#5b657c}

/* 選択済み：塗りつぶし＋外側に光の輪 */
.dot.is-selected{
  background:var(--dot-color);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--dot-color) 22%, transparent),
             0 0 18px color-mix(in srgb, var(--dot-color) 45%, transparent);
}

/* ホバーは「枠が少し太くなるだけ」に留める。
   塗りつぶしにすると、次の設問へ進んだとき同じ位置の丸が
   選択済みに見えてしまうため。 */
@media (hover:hover){
  .dot:hover{border-width:3px}
  .dot.is-selected:hover{border-width:2px}
}
.dot:active{transform:scale(.92)}
.dot:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ========== 結果 ========== */
.result__eyebrow{
  font-size:.78rem;
  letter-spacing:.2em;
  text-indent:.2em;
  color:var(--ink-dim);
  margin-bottom:10px;
}
/* タイプコードを結果画面の主役にする */
.result__code{
  font-family:var(--serif);
  font-size:clamp(3.4rem,17vw,5.6rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:.1em;
  text-indent:.1em;
  color:var(--gold);
  background:linear-gradient(180deg,#f0d79c 0%,#d8b168 55%,#a8863f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:12px;
}
.result__name{
  font-family:var(--serif);
  font-size:clamp(1.35rem,5.6vw,1.8rem);
  font-weight:600;
  line-height:1.45;
  letter-spacing:.06em;
  margin-bottom:12px;
}
.result__lead{
  color:var(--gold);
  font-size:.92rem;
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.result__desc{font-size:.95rem;margin-bottom:36px}

.bars{display:flex;flex-direction:column;gap:30px;margin-bottom:40px}

.bar__title{
  font-family:var(--serif);
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:4px;
}

/* 印がはみ出さないぶんの高さを確保する */
.bar__meter{position:relative;padding:8px 0}

.bar__track{
  position:relative;
  height:4px;
  background:#242a36;
  border-radius:2px;
}
/* 両端＝100%、中央＝半々 の目盛り */
.bar__track::before,
.bar__track::after{
  content:"";
  position:absolute;
  top:-3px;bottom:-3px;
  width:1px;
  background:#3c455a;
}
.bar__track::before{left:50%}
.bar__track::after{left:0;right:0;width:auto;border-left:1px solid #3c455a;border-right:1px solid #3c455a;background:none}

/* あなたはここ、の印 */
.bar__mark{
  position:absolute;
  top:50%;
  width:18px;height:18px;
  margin-top:-9px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#f3dda8,#c99f52);
  box-shadow:0 0 0 3px rgba(216,177,104,.22), 0 0 14px rgba(216,177,104,.5);
  transition:left .8s cubic-bezier(.2,.8,.3,1);
}

.bar__legend{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:10px;
  gap:12px;
}
.bar__legend span{display:flex;flex-direction:column;gap:1px}
.bar__legend span:last-child{text-align:right}
.bar__legend b{
  font-size:.8rem;
  font-weight:400;
  color:#6b7386;
}
.bar__legend i{
  font-style:normal;
  font-family:var(--serif);
  font-size:.68rem;
  letter-spacing:.14em;
  color:#4e5668;
}
/* 寄っている側だけ強調する */
.bar__legend .on b{color:var(--ink);font-weight:600}
.bar__legend .on i{color:var(--gold)}

.result__actions{display:flex;flex-direction:column;gap:10px;margin-bottom:34px}

.all-types{border-top:1px solid var(--line);padding-top:6px}
.all-types summary{
  cursor:pointer;
  padding:14px 2px;
  font-size:.85rem;
  color:var(--ink-dim);
  list-style:none;
}
.all-types summary::-webkit-details-marker{display:none}
.all-types summary::before{content:"＋ ";color:var(--gold)}
.all-types[open] summary::before{content:"− "}
.all-types__grid{display:flex;flex-direction:column;gap:1px;padding-bottom:10px}
.tcard{
  display:grid;
  grid-template-columns:4.6em 1fr;
  gap:12px;
  align-items:baseline;
  padding:11px 12px;
  border-radius:8px;
}
.tcard.is-me{background:#1c2130;box-shadow:inset 0 0 0 1px var(--gold-dim)}
.tcard .c{
  font-family:var(--serif);
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--gold);
}
.tcard .n{font-size:.9rem}
.tcard .l{grid-column:2;font-size:.76rem;color:var(--ink-dim);line-height:1.65}

@media (min-width:560px){
  .result__actions{flex-direction:row}
  .result__actions .btn{flex:1}
}