/* 공용 버튼 — 알약 + 원형 아이콘 */

:root {
    --btn-soft-bg: #e5e3de;
    --btn-line: #c4c0b8;
    --btn-line-h: #ada9a1;
    --btn-ov-solid: rgba(255, 255, 255, .13);
    --btn-ov: rgba(24, 24, 27, .07);
    --btn-danger: #dc2626;
    --btn-danger-h: #b91c1c;
    --btn-danger-line: rgba(220, 38, 38, .40);
    --btn-danger-line-h: rgba(220, 38, 38, .55);
    --btn-danger-ov: rgba(220, 38, 38, .07);
}
.dark {
    --btn-soft-bg: #3a3a3a;
    --btn-line: #57575c;
    --btn-line-h: #6a6a70;
    --btn-ov-solid: rgba(0, 0, 0, .10);
    --btn-ov: rgba(255, 255, 255, .08);
    --btn-danger: #f87171;
    --btn-danger-h: #fca5a5;
    --btn-danger-line: rgba(248, 113, 113, .42);
    --btn-danger-line-h: rgba(248, 113, 113, .55);
    --btn-danger-ov: rgba(248, 113, 113, .14);
}

.btn, .hdr-btn {
    --btn-h: 34px;
    --btn-px: 14px;
    --btn-fs: 13px;
    --btn-ico: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    vertical-align: middle;
    height: var(--btn-h);
    padding: 0 var(--btn-px);
    border: 1px solid transparent;
    border-radius: 9999px;
    background-color: transparent;
    color: var(--db-text, #1f1f22);
    font-family: inherit;
    font-size: var(--btn-fs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
.btn svg, .hdr-btn svg {
    width: var(--btn-ico);
    height: var(--btn-ico);
    flex-shrink: 0;
}
.btn:focus-visible, .hdr-btn:focus-visible {
    outline: 2px solid var(--db-focus, #18181b);
    outline-offset: 2px;
}
.btn:disabled, .btn[aria-disabled="true"],
.hdr-btn:disabled, .hdr-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.btn-lg { --btn-h: 40px; --btn-px: 18px; --btn-fs: 14px; --btn-ico: 18px; }
.btn-sm { --btn-h: 28px; --btn-px: 11px; --btn-fs: 12px; --btn-ico: 14px; gap: 5px; }
.btn-xs { --btn-h: 24px; --btn-px: 9px; --btn-fs: 12px; --btn-ico: 13px; gap: 4px; }
/* 입력창(38px)과 한 줄에 놓이는 버튼 */
.btn-field { --btn-h: 38px; --btn-px: 16px; }
.btn-icon { --btn-ico: calc(var(--btn-h) * .53); width: var(--btn-h); padding: 0; }
.btn-block { display: flex; width: 100%; }

.btn-primary, .hdr-btn-primary {
    background-color: var(--db-btn-bg, #1c1917);
    color: var(--db-btn-fg, #ffffff);
}
.btn-secondary, .hdr-btn-quiet {
    background-color: var(--btn-soft-bg);
    color: var(--db-text, #1f1f22);
}
.btn-outline, .hdr-btn-ghost {
    background-color: var(--db-surface, #ffffff);
    border-color: var(--btn-line);
    color: var(--db-text, #1f1f22);
}
.btn-ghost {
    color: var(--db-text-sub, #52525b);
}
.btn-danger, .hdr-btn-cancel, .hdr-btn-danger {
    background-color: var(--db-surface, #ffffff);
    border-color: var(--btn-danger-line);
    color: var(--btn-danger);
}
.btn-danger-ghost {
    color: var(--db-text-mute, #6b6b74);
}

.btn-primary:hover, .hdr-btn-primary:hover {
    background-image: linear-gradient(var(--btn-ov-solid), var(--btn-ov-solid));
}
.btn-secondary:hover, .hdr-btn-quiet:hover,
.btn-outline:hover, .hdr-btn-ghost:hover,
.btn-ghost:hover {
    background-image: linear-gradient(var(--btn-ov), var(--btn-ov));
    color: var(--db-text, #1f1f22);
}
.btn-outline:hover, .hdr-btn-ghost:hover { border-color: var(--btn-line-h); }
.btn-danger:hover, .hdr-btn-cancel:hover, .hdr-btn-danger:hover,
.btn-danger-ghost:hover {
    background-image: linear-gradient(var(--btn-danger-ov), var(--btn-danger-ov));
    color: var(--btn-danger-h);
}
.btn-danger:hover, .hdr-btn-cancel:hover, .hdr-btn-danger:hover {
    border-color: var(--btn-danger-line-h);
}

/* 다크에서 크림 면이 카드와 1.07:1 이라 켜짐은 테두리·글자로 읽힌다 */
.btn[aria-pressed="true"], .btn.is-on {
    background-color: var(--db-band, #faf3e6);
    border-color: var(--db-caramel, #b07a2d);
    color: var(--db-accent, #46311d);
}

.btn-unsaved:not(:disabled) {
    animation: btn-unsaved-glow 2.4s ease-in-out infinite;
}
@keyframes btn-unsaved-glow {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--db-btn-bg, #1c1917) 18%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--db-btn-bg, #1c1917) 45%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .hdr-btn { transition: none; }
    .btn-unsaved:not(:disabled) {
        animation: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--db-btn-bg, #1c1917) 32%, transparent);
    }
}