/* HMAC 생성기 */
.hm-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--spacing-md, 1rem); }
.hm-key-row { display: flex; gap: .5rem; align-items: stretch; }
.hm-key-row .input-tool { flex: 1 1 auto; min-width: 0; }
.hm-eye { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 .625rem; }
.hm-area, .hm-out {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm, .875rem);
    line-height: 1.6;
}
.hm-out { word-break: break-all; }
.hm-stat { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.hm-alert { margin-top: var(--spacing-md, 1rem); }
.hm-note { margin-top: var(--spacing-lg, 1.5rem); }
.hm-verify { margin-top: var(--spacing-md, 1rem); }
.hm-verdict {
    margin-top: .5rem; padding: .5rem .75rem;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-sm, .875rem);
    display: flex; align-items: center; gap: .5rem;
}
.hm-verdict-match  { background: var(--success-soft, #e9f7ee); color: var(--success-text, #1f7a48); }
.hm-verdict-differ { background: var(--danger-soft, #fdecec);  color: var(--danger-text, #b3372c); }
.hm-verdict-unknown{ background: var(--warning-soft, #fdf0e3); color: var(--warning-text, #96521f); }
@media (max-width: 768px) { .hm-opts { grid-template-columns: 1fr; } }