.cs-opts{display:flex;flex-wrap:wrap;gap:10px 18px}
.cs-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cs-actions{gap:6px}
.cs-out{background:var(--surface-2);border-radius:var(--radius-sm);padding:16px;min-height:80px;font-size:22px;font-weight:700;letter-spacing:.06em;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.cs-out:empty::before{content:"초성이 여기에 표시돼요";color:var(--faint);font-weight:400;font-size:16px;letter-spacing:0}
.cs-quiz{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cs-q{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:14px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.cs-q:hover{border-color:var(--brand)}
.cs-q b{font-size:24px;letter-spacing:.08em;color:var(--brand);overflow-wrap:anywhere}
.cs-q span{font-size:15px;color:var(--muted);visibility:hidden;overflow-wrap:anywhere}
.cs-q[aria-pressed=true]{background:var(--brand-soft);border-color:var(--brand)}
.cs-q[aria-pressed=true] span{visibility:visible}
.cs-q small{font-size:12px;color:var(--faint)}