/* 웹 퀴즈 쪽(오늘의 두뇌체조 · 속담 퀴즈) — infra/tool/site-quiz.py 가 쓴다. 사이트의 색 · 글꼴 · 영역 색 · 칩 · 받기 단추 위에 */
.quiz main.qz{display:flex;flex-direction:column;gap:28px;max-width:760px;padding-block:8px 56px}
.qz-crumb{font-size:15px;color:var(--ink3)}
.qz-crumb a{color:var(--ink2)}
.qz-head{display:flex;flex-direction:column;gap:14px}
.qz-head .kicker{align-self:flex-start;padding:6px 14px;border-radius:999px;background:var(--warm)}
.qz-head h1{font-size:clamp(38px,6vw,56px);line-height:1.12;letter-spacing:-.03em}
.qz-meta{color:var(--ink3);font-size:15px;line-height:1.6}
.qz-list,.pv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.qz-item{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:24px;background:var(--card);box-shadow:var(--shadow)}
.qz-tag{display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:16px;font-weight:700}
.quiz .qz-q{font-size:24px;line-height:1.35;letter-spacing:-.02em}                    /* .quiz — 사이트의 .home h2(절 제목 크기)보다 앞서게 */
.blank{display:inline-block;width:4.5em;margin-left:.35em;border-bottom:3px solid var(--ink3);vertical-align:-2px}
.blank .fill{display:none}
.qz-img{display:block;width:100%;max-width:440px;height:auto;margin-inline:auto;border-radius:16px}
details.ans{border-radius:16px;background:var(--soft);border:1px solid var(--line)}
details.ans summary{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 18px;color:var(--accent);font-size:19px;font-weight:800;cursor:pointer;list-style:none}
details.ans summary::-webkit-details-marker{display:none}
details.ans summary::before{content:"＋";margin-right:8px}
details.ans[open] summary::before{content:"－"}
details.ans .ans-body{display:flex;flex-direction:column;gap:8px;padding:0 20px 18px;font-size:21px;line-height:1.55}
details.ans b{color:var(--ink);font-weight:800}
details.ans p{text-wrap:balance}
.ans-pair{display:flex;flex-direction:column;gap:2px}
.nw{white-space:nowrap}
.ans-note{color:var(--ink2);font-size:18px}
.mem-toggle{position:absolute;width:1px;height:1px;opacity:0}
.mem-2,.mem-back,.mem-ask{display:none}
.mem-toggle:checked ~ .mem .mem-1{display:none}
.mem-toggle:checked ~ .mem .mem-2{display:block}
.mem-toggle:checked ~ .mem-btn .mem-go{display:none}
.mem-toggle:checked ~ .mem-btn .mem-back{display:inline}
.mem-toggle:checked ~ .mem-ask{display:block;font-size:24px;font-weight:800;text-align:center}
.mem-btn{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:16px;background:var(--ink);color:#fff;font-size:19px;font-weight:800;cursor:pointer}
.mem-toggle:focus-visible ~ .mem-btn{outline:3px solid var(--accent);outline-offset:3px}
.board{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding:26px 18px;border-radius:18px;background:#2B2622;font-size:38px;font-weight:800;letter-spacing:-.02em}
.ink-r{color:#D93A2C}
.ink-b{color:#58A2F2}
.ink-y{color:#FBD452}
.pv-group{display:flex;flex-direction:column;gap:16px}
.pv-group h2{font-size:26px;letter-spacing:-.02em}
.pv-range{color:var(--ink3);font-size:18px;font-weight:700}
.pv{padding:18px;border-radius:20px;background:var(--card);box-shadow:var(--shadow)}
.pv-no{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--soft);color:var(--ink2);font-size:17px;font-weight:800}
.pv-q{font-size:24px;font-weight:800;line-height:1.4;letter-spacing:-.02em}
/* 보기 셋 고르기(.cq — 사이트의 .play 와 겹치지 않게) — 앱의 보기 단추(runtime skin/defaults.ts choice)와 같은 모양, 같은 피드백(uikit okMark · 흰 테 먹 X).
   라디오가 앞에, 문장 · 보기 · 뜻이 뒤에 있어 ~ 로 고른 뒤를 그린다(:has 없이 옛 브라우저도) */
.cq{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px 12px;align-items:center}
.cq.solo{grid-template-columns:minmax(0,1fr)}
.cq>input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.cq .pv-q{grid-column:2}
.cq.solo .pv-q{grid-column:1;font-size:28px}
.opt,.pv-mean{grid-column:1 / -1}
.opt{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:8px 16px;border:1.5px solid #C9BEA8;border-radius:12px;background:linear-gradient(#FFFFFF,#F9F6EF);box-shadow:var(--shadow);color:var(--ink);font-size:21px;font-weight:800;line-height:1.3;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.opt:hover{border-color:#5E574D}
.opt .tag{display:none}
.opt::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;background:center/contain no-repeat;pointer-events:none}
.cq>input:checked~.opt{pointer-events:none;opacity:.42;background:#FBF8F2;border-color:#D6CCB8;box-shadow:none}
.cq>input:checked~.opt.ok{opacity:1;background:linear-gradient(#EAF4EE,#E1EEE5);border:3px solid #2E7D4F;color:#1F5E3A;box-shadow:0 2px 8px rgba(46,125,79,.18)}
.cq>input:checked~.opt.ok .tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 8px;border-radius:999px;background:#2E7D4F;color:#fff;font-size:15px;white-space:nowrap}
.opt .tag::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 60 60'%3E%3Cpath d='M-20.9 0L-6.6 15L20.9-13.6' fill='none' stroke='%23FFFFFF' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.cq>input:nth-of-type(1):checked~.opt:nth-of-type(1):not(.ok),
.cq>input:nth-of-type(2):checked~.opt:nth-of-type(2):not(.ok),
.cq>input:nth-of-type(3):checked~.opt:nth-of-type(3):not(.ok){opacity:1;background:linear-gradient(#FFFFFF,#F9F6EF);border:3px solid #5E574D;animation:shake .3s linear}
.cq>input:nth-of-type(1):checked~.opt:nth-of-type(1):not(.ok)::after,
.cq>input:nth-of-type(2):checked~.opt:nth-of-type(2):not(.ok)::after,
.cq>input:nth-of-type(3):checked~.opt:nth-of-type(3):not(.ok)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 60 60'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-22-22L22 22M22-22L-22 22' stroke='%23FFFDF8' stroke-width='13'/%3E%3Cpath d='M-22-22L22 22M22-22L-22 22' stroke='%232E2823' stroke-width='7'/%3E%3C/g%3E%3C/svg%3E")}
.cq>input.ok:checked~.opt.ok{counter-increment:ok}
.cq>input.ok:checked~.opt.ok::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 60 60'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-20.9 0L-6.6 15L20.9-13.6' stroke='%23FFFDF8' stroke-width='13'/%3E%3Cpath d='M-20.9 0L-6.6 15L20.9-13.6' stroke='%232E7D4F' stroke-width='7'/%3E%3C/g%3E%3C/svg%3E");animation:okmark .42s linear forwards}
.cq>input:nth-of-type(1):focus-visible~.opt:nth-of-type(1),
.cq>input:nth-of-type(2):focus-visible~.opt:nth-of-type(2),
.cq>input:nth-of-type(3):focus-visible~.opt:nth-of-type(3){outline:3px solid var(--accent);outline-offset:3px}
.cq>input:checked~.pv-q .blank{width:auto;border-bottom:0;margin-left:.2em}
.cq>input:checked~.pv-q .fill{display:inline;color:#1F5E3A;background:linear-gradient(transparent 62%,#DCEFE3 62%)}
.pv-mean{display:none;flex-direction:column;gap:4px;padding:12px 16px;border-radius:14px;background:var(--soft);font-size:19px;line-height:1.55;text-wrap:pretty}
.pv-mean b{margin-right:6px;color:var(--ink2)}
.cq>input:checked~.pv-mean{display:flex;counter-increment:done}
/* 맞음 ✓ — 튀어오름 0.16초 · 머묾 0.12초 · 0.14초에 사라짐(OK_MARK_MS 420) · 틀린 보기는 0.3초 흔들림 */
@keyframes okmark{0%{transform:scale(.55);opacity:1}26.7%{transform:scale(1.06)}38%{transform:scale(1)}66.7%{opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes okhide{from{opacity:1}to{opacity:0}}
@keyframes shake{0%,100%{transform:none}17%{transform:translateX(-5px)}33%{transform:translateX(5px)}50%{transform:translateX(-3px)}67%{transform:translateX(3px)}83%{transform:translateX(-1px)}}
@media (prefers-reduced-motion:reduce){
  .opt{animation:none!important}
  .cq>input.ok:checked~.opt.ok::after{animation:okhide .32s steps(1,end) forwards}
}
/* 맞힌 수 — CSS 카운터(스크립트 없이) · 다시 풀기는 form reset */
.pv-form{display:flex;flex-direction:column;gap:28px;counter-reset:ok done}
.pv-score{position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 20px;border-radius:18px;background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(26,26,26,.22)}
.sc{display:flex;flex-direction:column;gap:2px}
.sc-big{font-size:20px;font-weight:800}
.sc-sub{color:#D9D2C5;font-size:15px;font-weight:700}
.sc-ok::after{content:counter(ok)}
.sc-done::after{content:counter(done)}
.sc-reset{flex:none;min-height:48px;padding:0 18px;border:0;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.qz-end{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 22px;border-radius:24px;background:var(--card);box-shadow:var(--shadow);text-align:center}
.qz-end img{width:72px;height:72px;border-radius:18px}
.qz-end h2{font-size:28px;letter-spacing:-.02em}
.qz-end p{color:var(--ink2);font-size:18px;line-height:1.65;max-width:30em}
.qz-end .get-btn{align-self:stretch;max-width:420px;margin-inline:auto;width:100%;text-align:center;align-items:center}
.qz-more{text-align:center;font-size:18px}
.qz-more a{color:var(--ink2);font-weight:700}
.print-key{display:none}
@media (max-width:699px){
  .qz-item{padding:18px}
  .quiz .qz-q{font-size:22px}
  .cq.solo .pv-q{font-size:26px}
  .opt{min-height:58px;font-size:20px}
  .board{font-size:32px}
  .pv-q{font-size:22px}
}
@media print{
  .top,.foot,.qz-end,.qz-more,.qz-crumb,details.ans,.mem-btn,.pv-score,.pv-mean,.opt .tag,.opt::after{display:none!important}
  .cq{grid-template-columns:44px repeat(3,minmax(0,1fr));gap:8px 10px}
  .cq .pv-q{grid-column:2 / -1}
  .cq .opt:nth-of-type(1){grid-column:2}
  .cq .opt:nth-of-type(2){grid-column:3}
  .cq .opt:nth-of-type(3){grid-column:4}
  .cq.solo{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cq.solo .pv-q{grid-column:1 / -1}
  .cq.solo .opt:nth-of-type(1){grid-column:1}
  .cq.solo .opt:nth-of-type(2){grid-column:2}
  .cq.solo .opt:nth-of-type(3){grid-column:3}
  .opt,.cq>input:checked~.opt{min-height:0;padding:4px 8px;opacity:1;border:1px solid #999;background:none;box-shadow:none;color:#000;font-size:15px;animation:none}
  .cq>input:checked~.pv-q .blank{width:4.5em;margin-left:.35em;border-bottom:3px solid #999}
  .blank .fill{display:none!important}
  .qz-item,.pv{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .print-key{display:block;break-before:page}
  .print-key ol{columns:2;font-size:16px}
}