:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#38bdf8;
  --brand2:#22d3ee;
  --danger:#f87171;
  --radius:18px;
  --shadow: 0 14px 32px rgba(15, 23, 42, .12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  background:
    radial-gradient(1100px 520px at 16% 0%, rgb(56 189 248 / 4%), transparent 55%), radial-gradient(900px 460px at 90% 20%, rgb(34 211 238 / 5%), transparent 55%), radial-gradient(900px 520px at 50% 100%, rgb(16 185 129 / 0%), transparent 60%), var(--bg);
  color:var(--text);
}

[x-cloak]{ display:none !important; }

.app{ width:min(860px, 100%); margin:0 auto; padding:18px 14px 40px; }

.hero{ padding:18px 6px 12px; }
.hero__title{ text-align: center; font-size:24px; letter-spacing:.02em; 
        background: linear-gradient(180deg, rgba(56, 189, 248, 6%), transparent 55%), rgba(255, 255, 255, .9);
    /* border: 1px solid var(--line); */
    border-radius: var(--radius);
    /* box-shadow: var(--shadow); */
    padding: 21px 6px;
    margin: 10px -10px 20px;
}
.hero__sub{ margin:0 0 12px; color:var(--muted); line-height:1.55; }

.hero__meta{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px; }
.pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}

.progress{
  width:100%;
  height:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  border-radius:999px;
  overflow:hidden;
  position: sticky;
  top: 1px;
  z-index: 10;
}
.progress__bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #38bdf8d6, #22eeb5);
  border-radius:999px;
  transition:width .25s ease;
}
.progress__text{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  text-align:right;
}

.alert{
  margin-top:12px;
  border: 1px solid rgb(56 158 248 / 45%);
  background: linear-gradient(42deg, rgb(248 56 56 / 12%), rgb(34 238 166 / 10%));
  border-radius:16px;
  padding:10px 12px;
}
.alert b{ display:block; margin-bottom:4px; }

.card{
  background:linear-gradient(320deg, rgb(56 189 248 / 3%), transparent 55%), var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin:12px 0;
}
.card.readyResult{
  height: 270px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-title{ margin:0 0 8px; font-size:18px; }

.quiz .q{
  padding:14px 0px;
  /* border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  border-radius:16px; */
}

.q__title{ margin:0 0 10px; font-weight:800; line-height:1.45; }
.q__hint{ margin:0 0 10px; font-size:12px; color:var(--muted); }

.options{ display:grid; gap:10px; }
.option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  transition:transform .08s ease, border-color .08s ease, background .08s ease;
}
.option:hover{transform:translateY(-1px)}
.option input{margin-top:3px}
.option__label{line-height:1.45; color:var(--text)}
.option__meta{ display:block; margin-top:4px; color:var(--muted); font-size:12px; }

.option--selected{
  border-color: rgba(125, 200, 232, 0.415);
  background: linear-gradient(45deg, rgba(56, 216, 248, 0.18), rgba(34, 211, 238, .14));
}

.actions{ margin-top:20px; }
.actions--row{ display:flex; gap:10px; flex-wrap:wrap; }
.actions button{ flex:1; min-width:120px; }

.btn{
  appearance:none;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
  background:rgba(255,255,255,.92);
  color:var(--text);
  transition:transform .06s ease, opacity .06s ease, border-color .06s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  border-color: rgb(56 144 248 / 50%);
  background: linear-gradient(90deg, rgb(56 171 248 / 22%), rgb(34 238 122 / 20%));
}
.btn--ghost{ background:transparent; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.error{ margin:10px 2px 0; color:var(--danger); font-size:13px; min-height:18px; }

.confirm__list{ margin:12px 0 14px; padding-left:18px; color:var(--text); }
.confirm__list li{ margin:8px 0; line-height:1.5; }
.confirm__q{ color:var(--muted); font-size:12px; display:block; margin-bottom:4px; }

.result__tag{
  display: block;
  width: max-content;
  margin: 0 auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(255,255,255,.9);
  font-size:12px;
}
.result__title{ text-align: center; margin: 1em 0 1.3em; font-size:20px; line-height:1.35; }

.result__grid{ display:grid; gap:12px; margin-top:10px; }
.result__block{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.9);
  padding:12px;
}
.result__block--full{grid-column:1 / -1}
.block-title{ margin:0 0 8px; font-size:14px; color:var(--muted); }

.bullets{ margin:0; padding-left:18px; }
.bullets li{ margin:6px 0; line-height:1.5 }

.chips{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chips li{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.9);
  font-size: 12px;
}

.result__advice{ margin:0; line-height:1.7; color:var(--text); }

.details{
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 12px;
  background:rgba(255,255,255,.9);
}
.details summary{ cursor:pointer; color:var(--muted); font-weight:800; }
.scores{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.score{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.9);
  min-width:130px;
}
.score b{display:block; margin-bottom:4px}
.score span{color:var(--muted); font-size:12px}

.muted{ color:var(--muted) }
.small{ font-size:12px; line-height:1.6 }
.tip{ margin-top:10px; }

.footer{ text-align:center; color:var(--muted); margin-top:18px; }

.debug{
  margin-top:10px;
  text-align:left;
  font-size:12px;
  padding:10px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.9);
}

.step-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.step-no{ display:flex; align-items:center; gap:10px; }

.swipe-stage{ position:relative; overflow:hidden; }
.q-panel{ will-change: transform, opacity; }

@keyframes slideInFromRight {
  from { transform: translateX(24px); opacity: .0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInFromLeft {
  from { transform: translateX(-24px); opacity: .0; }
  to   { transform: translateX(0); opacity: 1; }
}
.slide-next{ animation: slideInFromRight .22s ease both; }
.slide-prev{ animation: slideInFromLeft  .22s ease both; }


@keyframes slideOutToLeft {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(-24px); opacity: 0; }
}
@keyframes slideOutToRight {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(24px); opacity: 0; }
}
.slide-out-next{ animation: slideOutToLeft .16s ease both; }
.slide-out-prev{ animation: slideOutToRight .16s ease both; }

/* LOADING */
.loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px 10px;
  text-align:center;
}
.loading__title{ margin:0; font-size:18px; }
.spinner{
  width:44px;
  height:44px;
  border-radius:999px;
  border:4px solid rgba(15, 23, 42, .08);
  border-top-color: rgba(56, 189, 248, .9);
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* READY */
.ready{ position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:26px 10px; text-align:center;
}
.confetti{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; border-radius:16px;
}
.ready__title{
  margin:0; font-size:20px; letter-spacing:.02em;
  animation: popIn .42s cubic-bezier(.2,.9,.2,1.2) both;
}
.ready__badge{
  position:relative;
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  margin-bottom:6px;
}
.ready__check{
  width:54px; height:54px; border-radius:999px;
  display:grid; place-items:center;
  font-size:24px; font-weight:900;
  color: #0f172a;
  background: linear-gradient(62deg, rgb(132 204 236 / 77%), rgb(34 238 192 / 81%));
  box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
  animation: badgeIn .55s cubic-bezier(.2,.9,.2,1.2) both;
}
.ready__ring{
  position:absolute; inset:8px; border-radius:999px;
  border:2px solid rgba(56, 189, 248, .55);
  filter: drop-shadow(0 8px 20px rgba(56, 189, 248, .15));
  animation: ripple 0.9s ease-out infinite;
}
.ready__ring--2{ inset:2px; border-color: rgba(34, 211, 238, .45); animation-delay: .18s; }

@keyframes badgeIn{ from{ transform: scale(.7); opacity:0; } to{ transform: scale(1); opacity:1; } }
@keyframes popIn{ from{ transform: translateY(6px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
@keyframes ripple{
  0%{ transform: scale(.92); opacity:.25; }
  60%{ transform: scale(1.08); opacity:.0; }
  100%{ transform: scale(1.08); opacity:0; }
}

/* Result enter */
.enter-up{ transition: transform .28s ease, opacity .28s ease; }
.enter-up-start{ transform: translateY(10px); opacity: 0; }
.enter-up-end{ transform: translateY(0); opacity: 1; }
.leave-fade{ transition: opacity .18s ease; }
.leave-fade-start{ opacity: 1; }
.leave-fade-end{ opacity: 0; }

@media (min-width: 760px){ .result__grid{ grid-template-columns: 1fr 1fr; } }

@media screen and (min-width: 576px){ 
  .hero__title br { display: none; }
}