/* エスプレッソマシン診断ページ専用。.sd の中だけに効きます */
.sd{
  --bg:#F7F3EE; --card:#FFFFFF; --ink:#2B2118; --sub:#6A5C4E; --line:#E3D9CC;
  --brand:#7A4A24; --brand-pale:#F1E6D8; --accent:#C1443B;
  color:var(--ink);font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;line-height:1.8;
}
.sd *,.sd *::before,.sd *::after{box-sizing:border-box}

.sd{max-width:680px;margin:0 auto;padding:40px 20px 80px}
.sd h1,.sd h2,.sd h3,.sd p,.sd ul{letter-spacing:normal}
.sd-head{margin-bottom:24px}
.sd-kicker{font-size:13px;color:var(--brand);font-weight:700;letter-spacing:.08em;margin:0}
.sd-title{font-size:clamp(22px,4vw,28px);margin:4px 0 6px;line-height:1.5}
.sd-lead{font-size:14px;color:var(--sub);margin:0}

.sd-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px clamp(18px,4vw,32px)}
.sd-progress{display:flex;gap:6px;margin-bottom:20px}
.sd-progress span{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background .3s}
.sd-progress span.done{background:var(--brand)}
.sd-step{font-size:13px;color:var(--sub);margin:0}
.sd-q{font-size:19px;font-weight:700;margin:2px 0 18px;line-height:1.6}
.sd-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sd-opt{all:unset;box-sizing:border-box;cursor:pointer;border:1.5px solid var(--line);border-radius:10px;
  padding:14px 16px;font-size:15px;font-weight:500;background:var(--card);
  transition:border-color .2s,background .2s,transform .1s}
.sd-opt:hover{border-color:var(--brand);background:var(--brand-pale)}
.sd-opt:active{transform:scale(.98)}
.sd-opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sd-back{all:unset;cursor:pointer;margin-top:18px;font-size:13px;color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.sd-back[hidden]{display:none}

.sd-fade{animation:sdIn .35s ease}
@keyframes sdIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 結果 */
.sd-summary{background:var(--brand-pale);border-radius:10px;padding:14px 16px;font-size:14px;margin:0 0 20px}
.sd-summary b{color:var(--brand)}
.sd-results{display:flex;flex-direction:column;gap:12px}
.sd-res{border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;position:relative}
.sd-res.top{border:2px solid var(--brand)}
.sd-rank{font-size:12px;font-weight:700;color:var(--brand);margin:0}
.sd-res.top .sd-rank{color:var(--accent)}
.sd-name{font-size:18px;font-weight:700;margin:2px 0 4px}
.sd-price{font-size:13px;color:var(--sub);margin:0 0 8px}
.sd-why{list-style:none;margin:0 0 12px;padding:0;font-size:14px}
.sd-why li{padding-left:1.2em;position:relative}
.sd-why li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.sd-link{display:inline-block;font-size:14px;font-weight:700;color:var(--brand);text-decoration:none;border-bottom:1.5px solid currentColor}
.sd-empty{font-size:14px;color:var(--sub)}
.sd-note{font-size:12px;color:var(--sub);margin:18px 0 0;line-height:1.7}
.sd-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}
.sd-retry{all:unset;cursor:pointer;font-size:14px;font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:8px 18px}
.sd-retry:hover{border-color:var(--brand)}

@media (max-width:480px){.sd-opts{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sd-fade{animation:none}}