/* 한글 이름 로마자 변환 */
.kn-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--spacing-md, 1rem); }
.kn-name { font-size: 1.125rem; }
.kn-alert { margin-top: var(--spacing-md, 1rem); }
.kn-note { margin-top: var(--spacing-lg, 1.5rem); }
.kn-main {
    font-size: 2rem; font-weight: 700; text-align: center; letter-spacing: .01em;
    padding: 1rem; border-radius: var(--radius-md, 8px);
    background: var(--accent-soft, #eef3fd); color: var(--accent-text, #2c56b8);
}
.kn-detail { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: var(--spacing-md, 1rem); font-size: var(--text-sm, .875rem); }
.kn-detail > div { display: flex; gap: .5rem; align-items: baseline; }
.kn-label { color: var(--text-muted, #626977); font-size: var(--text-ui-sm, .8125rem); }
.kn-subtitle { font-size: var(--text-sm, .875rem); font-weight: 700; margin: var(--spacing-lg, 1.5rem) 0 .5rem; color: var(--text-secondary, #3d434d); }
.kn-variants { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .375rem; }
.kn-variant {
    width: 100%; display: flex; flex-direction: column; gap: .125rem; text-align: left; cursor: pointer;
    padding: .5rem .625rem; border: 1px solid var(--border-color, #e5e8ed); border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface, #fff); transition: border-color .12s ease, background-color .12s ease;
}
.kn-variant:hover, .kn-variant:focus-visible { border-color: var(--accent-primary, #3b6fe0); background: var(--accent-soft, #eef3fd); outline: none; }
.kn-variant.is-copied { border-color: var(--accent-success, #2f9e5f); background: var(--success-soft, #e9f7ee); }
.kn-variant strong { font-size: 1rem; }
.kn-variant span { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
@media (max-width: 768px) { .kn-main { font-size: 1.5rem; } }