/* 대답 확인 목록(shared/answer-check.js): 게임 끝 카드와 부모 공간이 같이 쓴다. 크기 단위 --u(게임 = 1cqw, 부모 공간 = 화면 폭에 맞춤) */
/* 공용 버튼 모양(ui.css .sheet .card button)보다 앞서게 .answers.answers 로 한 번 더 */
.answers { --u: clamp(6px, 1vw, 11px); list-style: none; margin: 0; padding: 0; display: grid; gap: var(--u); text-align: left; }
.checkpage .answers { --u: 1cqw; }
.answers li { display: grid; grid-template-columns: calc(var(--u) * 12) calc(var(--u) * 15) 1fr; gap: calc(var(--u) * 1.4); align-items: center; padding: var(--u); border-radius: calc(var(--u) * 1.4); background: #f7f6fb; }
.answers li.skipped, .answers li.in_progress { opacity: .7; }
.answers .pic { aspect-ratio: 4 / 3; border-radius: calc(var(--u) * .8); overflow: hidden; background: #e6e3ef; }
.answers .pic > * { width: 100%; height: 100%; display: block; object-fit: contain; }
.answers .what { display: grid; gap: calc(var(--u) * .3); justify-items: start; }
.answers .what span { color: #6f6b7e; font-size: max(13px, calc(var(--u) * 1.35)); }
.answers.answers button { font: 600 max(14px, calc(var(--u) * 1.5)) system-ui, sans-serif; border: 0; border-radius: 99px; cursor: pointer; min-height: 40px; box-shadow: none; transform: none; }
.answers.answers .play { padding: calc(var(--u) * .3) calc(var(--u) * 1.2); background: #2f7be0; color: #fff; }
.answers.answers .play.on { background: #1d5fb8; }
.answers .chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7); }
.answers.answers .chip { position: relative; min-height: 48px; padding: calc(var(--u) * .5) calc(var(--u) * 1.3); display: grid; text-align: left; line-height: 1.2; border: 2px solid #e2dfec; background: #fff; color: #23213a; }
.answers.answers .chip small { font-weight: 400; color: #8a879a; font-size: max(12px, calc(var(--u) * 1.2)); }
.answers.answers .chip.on { border-color: #22b573; background: #e5f7ee; padding-right: calc(var(--u) * 2.6); }
.answers.answers .chip.on::after { content: "✓"; position: absolute; right: calc(var(--u) * .7); top: calc(var(--u) * .35); color: #178a56; font-weight: 700; }
.answers details { margin-top: calc(var(--u) * .6); }
.answers summary { cursor: pointer; color: #6f6b7e; font-size: max(13px, calc(var(--u) * 1.35)); }
.answers textarea { width: 100%; box-sizing: border-box; font: inherit; min-height: 3em; border-radius: calc(var(--u) * .8); border: 2px solid #e2dfec; padding: calc(var(--u) * .6); margin: calc(var(--u) * .5) 0; user-select: text; -webkit-user-select: text; }
.answers .ck { display: flex; gap: calc(var(--u) * .6); align-items: center; font-size: max(13px, calc(var(--u) * 1.35)); }
.answers .muted { color: #6f6b7e; margin: 0; }
@media (max-width: 640px) { .answers li { grid-template-columns: 30% 1fr; } .answers .how { grid-column: 1 / -1; } }