/* Base layout */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fafafa;color:#222;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Helvetica Neue",Arial,sans-serif}
.topbar{position:sticky;top:0;z-index:5;background:#ffffffcc;backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #eee}
.topbar h1{margin:0;padding:12px 16px;font-size:18px}

.container{max-width:680px;margin:0 auto;padding:14px}
.card{background:#fff;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.06);padding:16px;margin:8px 0}
.card h2{margin:0 0 8px 0;font-size:18px}
.card .lead{margin:0 0 12px 0;color:#555}

.qrow{display:grid;gap:12px;grid-template-columns:1fr;}

/* options */
.opt{border:1px solid #eaeaea;border-radius:14px;padding:12px;cursor:default;transition:all .15s ease;background:#fff}
.opt .row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.opt img{width:26px;height:26px}
.opt.selected{border-color:#7aa3ff;box-shadow:0 6px 20px rgba(100,140,255,.15);animation: none !important;}
/* .opt:hover  { transform: none !important; } */
/* .opt:active { transform: none !important; } */
audio{width:100%}

.nav{display:flex;gap:10px;justify-content:space-between;margin:12px 4px}
.btn{padding:10px 14px;border-radius:12px;border:1px solid #ddd;background:#fff;cursor:pointer}
.btn.primary{background:#0f62fe;color:white;border-color:#0f62fe}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* progress */
.progress{position:relative;height:6px;background:#eee;border-radius:999px;margin:12px 4px}
.progress .bar{position:absolute;height:100%;width:0;background:#0f62fe;border-radius:999px;transition:width .2s}
.progress .text{font-size:12px;margin-top:8px;text-align:right;color:#666}

/* badges */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 2px 0}
.badge{background:#f2f4f8;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px;font-size:12px}

/* ctas */
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ctas a{display:inline-block;padding:10px 12px;border-radius:12px;border:1px solid #ddd;text-decoration:none}
.ctas a:hover{border-color:#bbb}

/* muted */
.muted{color:#667085}
.small{font-size:12px}

.footer{color:#888;text-align:center;padding:20px 0 40px}

/* mobile */
@media (min-width: 740px){
  .qrow{grid-template-columns:1fr 1fr;}
}

/* === appended rules === */

/* 結果写真の枠とプレースホルダー */
.result-figure{ margin:10px 0 16px; }
.result-figure img{
  width:100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.08); background:#f0f0f0;
}
.result-figure img.placeholder{
  background: repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 10px,#e9e9e9 10px,#e9e9e9 20px);
}

/* 結果コードのコピー行 */
.copyrow{ display:flex; gap:10px; align-items:center; margin:12px 0 4px; }
.copyrow code{ font-size:13px; padding:8px 10px; background:#f5f5f5; border-radius:8px; overflow:auto; }

/* モバイル最適化の強化 */
@media (max-width: 420px){
  .result .desc{ font-size: 15px; line-height: 1.8; }
  .copyrow{ flex-direction:column; align-items:stretch; }
  .copyrow code{ width:100%; }
}

/* 選択ガイド・A11y */
.hint{color:#b45400;background:#fff6e8;border:1px solid #ffd8a8;padding:8px 10px;border-radius:8px;font-size:13px;margin:8px 0;}
.btn.choose{margin-top:8px;}
.opt:focus-visible{outline:3px solid #7aa3ff55; outline-offset:2px;}

/* 製品カード */
.prods { margin-top:16px; }
.prods-title { font-size:1.05rem; margin:0 0 8px; }
.prods-grid { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:560px){ .prods-grid{ grid-template-columns:1fr 1fr; } }
.prod-card { border:1px solid #CDBDB5; background:#F8E3DA; border-radius:12px; padding:12px; }
.prod-name { font-weight:700; }
.prod-one { margin:6px 0 10px; line-height:1.54; }
.btn.outline{ display:inline-block; padding:7px 12px; border-radius:10px; border:1.5px solid #4A64FF; color:#4A64FF; font-weight:600; text-decoration:none; }
.btn.outline:hover{ background:#4A64FF; color:#fff; }
.btn.outline:active{ transform: translateY(1px); }

/* === NUARL ピーチ色で統一 === */
:root{
  --brand-peach:#ead7ceda;        /* 基本色（あなたの見本色） */
  --brand-peach-dark:#CDBDB5;   /* 枠・濃いめ */
  --brand-peach-light:#F4E6E0;  /* うっすら背景 */
  --brand-ink:#2B2B2B;          /* 文字色 */
}

/* Topbar / プログレスバー / バッジ */
.topbar{ background: var(--brand-peach) !important; }
#progressBar{ background: var(--brand-peach) !important; }
.badge{ background: var(--brand-peach-light); border:1px solid var(--brand-peach-dark); }

/* 主要ボタン（次へ）と “これが良い” を実心同色に */
/* “これが良い” はピーチで統一 */
.btn.choose{
  background: var(--brand-peach) !important;
  border-color: var(--brand-peach-dark) !important;
  color: var(--brand-ink) !important;
}
.btn.choose:hover{ filter: brightness(1.03); }
.btn.choose:active{ transform: translateY(1px) scale(.99); }

/* “次へ”（通常時）= 黒背景・白文字 */
#next.btn.primary{
  background:#ead7cead !important;
  border-color:#ead7cead !important;
  color:#000000 !important;
  font-weight:600;
  box-shadow:0 3px 6px rgba(0,0,0,.08);
}
#next.btn.primary:hover{ filter: brightness(1.05); }
#next.btn.primary:active{ transform: translateY(1px); }

/* “結果を見る”（最終問のとき）= ピーチ背景・黒文字 */
#next.btn.primary.final{
  background: var(--brand-peach) !important;
  border-color: var(--brand-peach-dark) !important;
  color: var(--brand-ink) !important;
}
#next.btn.primary.final:hover{ filter: brightness(1.03); }
#next.btn.primary.final:active{ transform: translateY(1px) scale(.99); }

.btn:disabled{
  opacity:.55; cursor:not-allowed;
}

/* アウトラインボタン（製品リンク）も色味を合わせる */
.btn.outline{
  border:1.5px solid var(--brand-peach-dark) !important;
  color: var(--brand-ink) !important;
}
.btn.outline:hover{
  background: var(--brand-peach);
  color: var(--brand-ink);
}

/* 選択カードのハイライト（アニメなし・色統一） */
.opt.selected{
  border-color: var(--brand-peach-dark) !important;
  box-shadow: 0 0 0 2px var(--brand-peach-dark) inset !important;
  animation: none !important;
}