/* ============================================================
   ROUTINE BUILDER — quiz + result
   ============================================================ */
.quiz{padding-bottom:var(--sec)}
.quiz__bar{display:flex;align-items:center;gap:16px;padding-block:clamp(16px,2vw,26px)}
.quiz__bar p{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);white-space:nowrap}
.quiz__meter{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.quiz__meter i{position:absolute;inset:0 auto 0 0;background:var(--ink);width:33%;transition:width .6s var(--slow)}
.qstep{display:none}
.qstep.is-on{display:grid;gap:clamp(20px,2.6vw,40px)}
.qstep__q{font-family:var(--display);font-weight:300;font-size:var(--d1);line-height:1.02;
  letter-spacing:-.022em;max-width:18ch;text-wrap:balance}
.qstep__hint{font-size:var(--t-meta);color:var(--ink-45);margin-top:10px}
.qopts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,22px)}
.qopt{
  position:relative;display:grid;gap:7px;align-content:end;min-height:clamp(140px,14vw,200px);
  padding:clamp(16px,1.8vw,26px);text-align:left;box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .35s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.qopt:hover{box-shadow:inset 0 0 0 1px var(--ink-25)}
.qopt.is-on{background:var(--ink);color:var(--milk);box-shadow:none}
.qopt__t{font-size:clamp(1.0625rem,1.1vw + .85rem,1.375rem);font-weight:500;letter-spacing:-.01em}
.qopt__d{font-size:var(--t-meta);color:var(--ink-45);transition:color .4s}
.qopt.is-on .qopt__d{color:rgba(242,237,230,.7)}
.qopt__c{position:absolute;top:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);width:18px;height:18px;
  border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.qopt__c svg{width:10px;height:10px;stroke:var(--milk);fill:none;stroke-width:2;opacity:0;transition:opacity .3s}
.qopt.is-on .qopt__c{background:var(--accent);box-shadow:none}
.qopt.is-on .qopt__c svg{opacity:1}
.quiz__nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(28px,3vw,44px);padding-top:clamp(18px,2.4vw,34px);
  border-top:1px solid var(--line-soft)}
.quiz__back{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);
  display:inline-flex;align-items:center;gap:10px;transition:color .3s}
.quiz__back:hover{color:var(--ink)}
.quiz__back svg{width:13px;height:13px}
.quiz__back[hidden]{visibility:hidden;display:inline-flex}

/* result */
.qres{display:none}
.qres.is-on{display:block}
.qres__head{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,44px);align-items:end;
  padding-bottom:clamp(22px,2.6vw,40px);border-bottom:1px solid var(--line-soft)}
.qres__t{grid-column:1/7;font-family:var(--display);font-weight:300;font-size:var(--d1);
  line-height:1;letter-spacing:-.022em}
.qres__sum{grid-column:8/13;display:flex;flex-wrap:wrap;gap:8px;align-content:end}
.qres__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,60px);padding-top:clamp(24px,3vw,44px)}
.qres__h{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.qres__h b{font-family:var(--display);font-weight:300;font-size:1.6rem;line-height:1}
.qres__h span{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.qline{display:grid;grid-template-columns:38px 76px 1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line-soft)}
.qline__n{font-size:var(--t-label);letter-spacing:.12em;color:var(--ink-25)}
.qline__img{border-radius:var(--radius-md);aspect-ratio:4/5;overflow:hidden;background:var(--ivory)}
.qline__img img{width:100%;height:100%;object-fit:cover}
.qline__b{display:grid;gap:3px;min-width:0}
.qline__step{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.qline__n2{font-size:var(--t-meta);font-weight:500;line-height:1.3}
.qline__alt{font-size:var(--t-label);color:var(--ink-45)}
.qline__alt a{text-decoration:underline;text-underline-offset:3px}
.qline__p{font-size:var(--t-meta);font-weight:500;font-variant-numeric:tabular-nums}
.qres__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:clamp(22px,2.6vw,36px);margin-top:clamp(22px,2.6vw,36px);border-top:1px solid var(--line)}
.qres__total{display:flex;align-items:baseline;gap:12px}
.qres__total b{font-family:var(--display);font-weight:300;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .qopts{grid-template-columns:1fr 1fr}
  .qres__t,.qres__sum{grid-column:1/13}
  .qres__cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .qopts{grid-template-columns:1fr}
  .qopt{min-height:0}
  .qline{grid-template-columns:28px 60px 1fr;gap:10px}
  .qline__p{grid-column:2/4;text-align:right}
}