.phrase-cards{margin:2rem 0;font-family:system-ui,sans-serif}
.phrase-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.phrase-card{padding:1.1rem;border:1px solid var(--border);border-radius:.65rem;background:var(--surface);color:var(--text);overflow-wrap:anywhere}
.phrase-card h3{margin:0 0 .6rem;font-size:1rem}
.phrase-card-meaning{margin:.5rem 0;font-size:.95rem}
.phrase-card .phrase-card-korean{font-size:1.35rem;line-height:1.65;color:var(--text);word-break:keep-all;overflow-wrap:anywhere}
.phrase-show,.phrase-close{min-height:44px;min-width:44px;padding:.6rem 1rem;border:1px solid var(--accent-dark);border-radius:.35rem;background:var(--surface);color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.phrase-show[hidden]{display:none}
.phrase-show:focus-visible,.phrase-close:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.phrase-dialog{box-sizing:border-box;width:min(40rem,calc(100% - 2rem));max-height:calc(100% - 2rem);padding:1.25rem;border:1px solid var(--border);border-radius:.8rem;background:var(--surface);color:var(--text);overflow-y:auto;overscroll-behavior:contain;font-family:system-ui,sans-serif}
.phrase-dialog::backdrop{background:rgba(0,0,0,.65)}
.phrase-dialog .phrase-close{display:block;margin:0 0 1.5rem auto}
.phrase-dialog h2{font-size:1.15rem;line-height:1.6;margin:0 0 1rem;overflow-wrap:anywhere}
.phrase-dialog .phrase-dialog-korean{font-size:clamp(2rem,7vw,3.3rem);line-height:1.65;font-weight:700;word-break:keep-all;overflow-wrap:anywhere;margin:1.2rem 0}
.phrase-dialog #phrase-dialog-meaning{font-size:1.1rem;line-height:1.7;overflow-wrap:anywhere}
.phrase-fallback:empty{display:none}
@media(max-width:520px){.phrase-card-grid{grid-template-columns:1fr}.phrase-dialog{padding:1rem}}