/* 색상 코드 퀴즈 전용 CSS (2026-10-23). 설정 줄·판 띠 칩·무대(문제 카드 | 선택지)·답 줄·끝 화면(점수 | 팔레트)·기록 줄 cq-*. 공용 부품은 assets/v2.css
   문제 견본·선택지 견본·팔레트 칸은 그 색 그대로(두 테마 같음). 채널 색 R·G·B 막대도 두 테마 같은 색. 움직임은 답할 때만(칩 칠하기·막대 차오름·견본 꼬리표), 동작 줄이기면 끈다. */
.cq{container:cqw / inline-size;--cq-r:#d0402b;--cq-g:#2f9e44;--cq-b:#2f6fd6}
.cq-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.cq-seg button{font-variant-numeric:tabular-nums}
.cq-new{margin-left:auto}
.cq-strip{display:flex;align-items:center;gap:8px 14px;padding:12px 16px 10px}
.cq-chips{flex:1 1 auto;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;max-width:340px;margin:0;padding:0;list-style:none}
.cq-chips li{position:relative;aspect-ratio:1;border:1px dashed var(--line);border-radius:var(--radius);background:transparent}
.cq-chips li.is-now{border:2px solid var(--ink)}
.cq-chips li.is-ok,.cq-chips li.is-bad{border:1px solid var(--line);background:var(--c);animation:cq-paint .28s cubic-bezier(.2,.7,.2,1)}
.cq-chips li.is-ok::after,.cq-chips li.is-bad::after{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:13px;height:13px;border:1px solid var(--line);border-radius:50%;background:var(--paper);font:700 8.5px/1 var(--sans);color:var(--ink)}
.cq-chips li.is-ok::after{content:"✓"}
.cq-chips li.is-bad::after{content:"✕";color:var(--accent)}
@keyframes cq-paint{from{transform:scale(.35);opacity:.3}to{transform:none;opacity:1}}
.cq-score{display:flex;align-items:baseline;gap:12px;margin:0 0 0 auto;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.cq-score b{font-size:16px;font-weight:800;color:var(--ink)}

/* 무대 */
.cq-stage{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:14px;padding:2px 16px 0}
.cq-stage[hidden],.cq-fb[hidden],.cq-end[hidden]{display:none}
.cq-q{container:cqq / inline-size;display:flex;flex-direction:column;gap:9px;min-width:0;padding:12px;border:1px solid var(--soft);border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.cq-ask{margin:0;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.cq-sw{position:relative;height:150px;border:1px solid var(--line);border-radius:var(--radius);background:var(--a)}
.cq-sw.is-split{background:linear-gradient(90deg,var(--a) 50%,var(--b) 50%)}
.cq-swl{position:absolute;left:6px;right:6px;bottom:6px;display:none;justify-content:space-between;gap:6px}
.cq-swl b{padding:2px 6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11px;font-weight:700;color:var(--ink)}
.cq-sw.is-split .cq-swl{display:flex}
.cq-code{display:none;position:relative;height:150px;margin:0;padding:0 12px 34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:clamp(22px,12cqi,34px);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.cq-code[data-f="r"]{font-size:clamp(14px,7.6cqi,24px)}
.cq-code::after{content:"";position:absolute;left:0;bottom:0;height:28px;width:0;background:var(--a);border-top:1px solid var(--line);transition:width .42s cubic-bezier(.2,.7,.2,1)}
.cq[data-ph="shown"] .cq-code::after{width:100%}
.cq[data-dir="k"] .cq-sw{display:none}
.cq[data-dir="k"] .cq-code{display:flex}
.cq-dec{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.cq-dec li{display:grid;grid-template-columns:14px 24px 30px minmax(0,1fr);align-items:center;gap:8px;font-family:var(--sans);font-size:12.5px;font-variant-numeric:tabular-nums lining-nums}
.cq-dec b{font-weight:800}
.cq-dec li[data-ch="r"]{--ch:var(--cq-r)} .cq-dec li[data-ch="g"]{--ch:var(--cq-g)} .cq-dec li[data-ch="b"]{--ch:var(--cq-b)}
.cq-dec li b{color:var(--ink)} /* 채널 색은 막대에만(글자 대비, 검토 R4) */
.cq-dec code{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
.cq-dec span{text-align:right;font-weight:700;color:var(--ink)}
.cq-dec i{position:relative;height:8px;border-radius:4px;background:var(--soft)}
.cq-dec i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 100%);border-radius:4px;background:var(--ch);transition:width .42s cubic-bezier(.2,.7,.2,1)}
.cq-dec i::after{content:"";position:absolute;top:-4px;bottom:-4px;left:calc(var(--p,0) * 100%);width:2px;margin-left:-1px;background:var(--ink);opacity:0}
.cq-dec li.has-p i::after{opacity:1}
.cq-tip{min-height:3em;margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}

/* 선택지: 색 → 코드 = 코드 4줄 */
.cq-opts{display:grid;grid-template-rows:repeat(4,minmax(54px,1fr));gap:6px;min-width:0}
.cq-o{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:6px 10px 6px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;transition:border-color var(--ease),background var(--ease),opacity var(--ease)}
.cq-o:hover:not(:disabled){border-color:var(--ink);background:var(--card)}
.cq-o:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cq-o:disabled{cursor:default}
.cq-k{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--wash);font-family:var(--sans);font-size:11.5px;font-weight:800;color:var(--muted)}
.cq-ot{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.cq-oc{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:clip}
.cq-o[data-f="r"] .cq-oc{font-size:16px}
.cq-om{min-height:1.35em;font-family:var(--sans);font-size:11.5px;line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums}
.cq-om:empty{display:none}
.cq-osw{grid-column:3;grid-row:1;width:0;height:34px;border-radius:var(--radius);background:var(--c);box-shadow:inset 0 0 0 1px var(--line);transition:width .24s cubic-bezier(.2,.7,.2,1)}
.cq[data-ph="shown"] .cq-osw{width:44px}
.cq-o.is-ans{border:2px solid var(--ink);padding:5px 9px}
.cq-o.is-ans .cq-k{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.cq-o.is-bad{border:2px solid var(--accent);padding:5px 9px}
.cq-o.is-bad .cq-k{background:var(--accent);border-color:var(--accent);color:#fff}
.cq-o.is-off{opacity:.8}

/* 선택지: 코드 → 색 = 견본 2×2 */
.cq[data-dir="k"] .cq-opts{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(96px,1fr))}
.cq[data-dir="k"] .cq-o{display:block;padding:0;overflow:hidden;background:var(--c)}
.cq[data-dir="k"] .cq-o:hover:not(:disabled){background:var(--c);box-shadow:inset 0 0 0 2px var(--paper)}
.cq[data-dir="k"] .cq-k{position:absolute;left:6px;top:6px}
.cq[data-dir="k"] .cq-o:not(.is-ans):not(.is-bad) .cq-k{background:var(--paper)}
.cq[data-dir="k"] .cq-osw{display:none}
.cq[data-dir="k"] .cq-ot{position:absolute;left:6px;right:6px;bottom:6px;padding:4px 7px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transform:translateY(calc(100% + 10px));transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.cq[data-dir="k"][data-ph="shown"] .cq-ot{transform:none}
.cq[data-dir="k"] .cq-oc{font-size:13.5px}
.cq[data-dir="k"] .cq-o[data-f="r"] .cq-oc{font-size:12px}
.cq[data-dir="k"] .cq-om{font-size:11px}
.cq[data-dir="k"] .cq-o.is-ans,.cq[data-dir="k"] .cq-o.is-bad{padding:0}

/* 답 줄 */
.cq-fb{grid-column:1 / -1;display:flex;align-items:center;gap:12px;padding:0 0 14px}
.cq-msg{flex:1 1 auto;min-width:0;margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.cq-v{font-weight:700;color:var(--ink)}
.cq-msg.is-bad .cq-v{color:var(--accent)}
.cq-d{display:block;color:var(--ink)}
.cq-next{flex:0 0 auto}
.cq-next .i{width:15px;height:15px}

/* 끝 화면 */
.cq-end{display:grid;gap:14px;padding:4px 16px 14px}
.cq-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 16px;padding:12px;border:1px solid var(--soft);border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.cq-sum > *{grid-column:1}
.cq-tag{margin:0;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.cq-big{margin:2px 0 0}
.cq-big:focus{outline:none}
.cq-sum .v2-sub{margin:4px 0 0}
.cq-best{margin:0;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.cq-best.is-new{color:var(--accent);font-weight:700}
.cq-acts{grid-column:2;grid-row:1 / span 4;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.cq-acts .v2-btn{justify-content:center}
.cq-acts .v2-btn[hidden]{display:none}
.cq-sum .v2-status{grid-column:1 / -1;min-height:1.4em}
.cq-legend{margin:0 0 6px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.cq-pal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cq-pc{display:flex;flex-direction:column;gap:4px;min-width:0;animation:cq-pop .3s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
.cq-pc i{position:relative;display:block;height:52px;border:1px solid var(--line);border-radius:var(--radius);background:var(--a)}
.cq-pc.is-bad i{background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%)}
.cq-pc i::after{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:16px;height:16px;border:1px solid var(--line);border-radius:50%;background:var(--paper);font:700 10px/1 var(--sans);color:var(--ink)}
.cq-pc.is-ok i::after{content:"✓"}
.cq-pc.is-bad i::after{content:"✕";color:var(--accent)}
.cq-pc span{container-type:inline-size;display:flex;flex-direction:column;gap:1px;min-width:0}
.cq-pc code{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.cq-pc code.is-r{font-size:min(10.5px,9.1cqi)}
.cq-pc small{font-family:var(--sans);font-size:10.5px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
@keyframes cq-pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

/* 기록 줄 */
.cq-rec{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;padding:10px 16px 12px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.cq-clear{margin-left:auto;padding:0;border:0;background:none;font-family:var(--sans);font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cq-clear:hover{color:var(--ink)}
.cq-noscript{margin:0;padding:0 16px 12px;font-size:13px;color:var(--accent)}

@container cqw (min-width:760px){
  .cq-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .cq-sw,.cq-code{height:170px}
}
@container cqw (max-width:600px){
  .cq-stage{grid-template-columns:minmax(0,1fr);gap:10px}
  .cq-q{display:contents}
  .cq-ask{order:0}
  .cq-sw,.cq-code{order:1;height:118px}
  .cq-code{font-size:clamp(20px,9cqi,30px)}
  .cq-code[data-f="r"]{font-size:clamp(14px,5.6cqi,22px)}
  .cq-opts{order:2}
  .cq-fb{order:3;padding:0}
  .cq-dec{order:4;padding:10px 12px 0;border-top:1px solid var(--soft)}
  .cq-tip{order:5;min-height:0;padding:0 12px 14px}
  .cq-pal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cq-pc{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:7px}
  .cq-pc i{height:38px}
}
@container cqw (max-width:520px){
  .cq-sum{grid-template-columns:minmax(0,1fr)}
  .cq-acts{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;margin-top:8px}
  .cq-acts .v2-btn{flex:1 1 auto}
}
@container cqw (max-width:440px){
  .cq-bar{padding:10px 12px;gap:6px}
  .cq-strip{flex-wrap:wrap;padding:10px 12px 8px}
  .cq-chips{flex-basis:100%;max-width:none}
  .cq-score{margin-left:0}
  .cq-stage{padding:2px 12px 0}
  .cq-end{padding:4px 12px 14px}
  .cq-rec{padding:10px 12px 12px}
  .cq-oc{font-size:16px}
  .cq-o[data-f="r"] .cq-oc{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .cq-chips li.is-ok,.cq-chips li.is-bad,.cq-pc{animation:none}
  .cq-dec i::before,.cq-code::after,.cq-osw,.cq[data-dir="k"] .cq-ot{transition:none}
}