/* 페이지별 기본 스타일(Tailwind 유무)에 따라 브랜드·메뉴의 글자 위치가 바뀌지 않게 한다. */
.tools-header { position: sticky; top: 0; z-index: 40; background: var(--db-surface, #fff); border-bottom: 1px solid var(--db-border, #e4e2dd); line-height: 1.5; }
.tools-header-inner { height: 68px; padding: 0 96px; display: flex; align-items: center; gap: 20px; }
.tools-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; font-size: 19px; font-weight: 800; letter-spacing: -.04em; color: inherit; text-decoration: none; }
.tools-menu { display: flex; align-items: center; gap: 4px; }
.tools-menu a { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 9px; color: var(--db-text-sub, #52525b); font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.tools-menu a:hover { background: var(--db-surface-3, #f4f4f2); color: var(--db-text, #1f1f22); }
.tools-menu a[aria-current="page"] { background: var(--db-band, #faf3e6); color: var(--db-accent, #46311d); }
.tools-menu .tool-icon { width: 17px; height: 17px; }
.tools-account { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tools-header { --tools-tip-bg: #1c1917; --tools-tip-fg: #fff; }
.dark .tools-header { --tools-tip-bg: #f1f1f1; --tools-tip-fg: #1f1f1f; }
.tools-icon-btn { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--db-text-sub, #52525b); cursor: pointer; transition: background .12s, color .12s; }
.tools-icon-btn svg { width: 23px; height: 23px; }
.tools-icon-btn:focus-visible { outline: 2px solid var(--db-focus, #18181b); outline-offset: 1px; }
#tools-theme-btn:hover, #tools-theme-btn:focus-visible { color: #7c3aed; background: rgba(124, 58, 237, .10); }
.dark #tools-theme-btn:hover, .dark #tools-theme-btn:focus-visible { color: #f59e0b; background: rgba(245, 158, 11, .12); }
.tools-icon-moon, .tools-icon-sun { position: absolute; inset: 0; margin: auto; transition: opacity .35s cubic-bezier(.4, 0, .2, 1), transform .35s cubic-bezier(.4, 0, .2, 1); }
.tools-icon-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.dark .tools-icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
.dark .tools-icon-sun { opacity: 1; transform: none; }
.tools-icon-btn[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 60; padding: 6px 10px; border-radius: 8px; background: var(--tools-tip-bg); color: var(--tools-tip-fg); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px); transition: opacity .12s ease, transform .12s ease; }
.tools-icon-btn[data-tip]::before { content: ""; position: absolute; top: calc(100% + 3px); left: 50%; z-index: 61; width: 0; height: 0; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--tools-tip-bg); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px); transition: opacity .12s ease, transform .12s ease; }
.tools-icon-btn[data-tip]:hover::after, .tools-icon-btn[data-tip]:focus-visible::after, .tools-icon-btn[data-tip]:hover::before, .tools-icon-btn[data-tip]:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.dark #tools-theme-btn::after { content: attr(data-tip-dark); }
.tools-profile { position: relative; margin-left: 4px; }
.tools-profile-btn { display: flex; padding: 0; background: none; border: 0; border-radius: 9999px; cursor: pointer; }
.tools-profile-btn:focus-visible { outline: 2px solid var(--db-focus, #18181b); outline-offset: 2px; }
.tools-avatar { display: block; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--db-surface-3, #f4f4f2); box-shadow: 0 0 0 1px var(--db-border, #e4e2dd); transition: box-shadow .15s; }
.tools-avatar-fb { display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--db-accent, #46311d); color: #fff; }
.dark .tools-avatar-fb { color: #1f1f1f; }
.tools-profile-btn:hover .tools-avatar, .tools-profile-btn[aria-expanded="true"] .tools-avatar { box-shadow: 0 0 0 3px var(--db-border, #e4e2dd); }
.tools-profile-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: 220px; padding: 6px; background: var(--db-surface, #fff); border: 1px solid var(--db-border, #e4e2dd); border-radius: 14px; box-shadow: 0 12px 28px rgba(24, 24, 27, .12); }
.tools-profile-menu[hidden] { display: none; }
.dark .tools-profile-menu { box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.tools-profile-menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--db-border, #e4e2dd); }
.tools-profile-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--db-text-sub, #52525b); text-decoration: none; }
.tools-profile-menu a:hover { background: var(--db-surface-3, #f4f4f2); color: var(--db-text, #1f1f22); }
.tools-profile-menu .tool-icon { width: 18px; height: 18px; }
.tools-profile-menu .is-danger, .tools-profile-menu .is-danger:hover { color: #dc2626; }
.tools-profile-menu .is-danger:hover { background: rgba(220, 38, 38, .08); }
.dark .tools-profile-menu .is-danger, .dark .tools-profile-menu .is-danger:hover { color: #f87171; }
.dark .tools-profile-menu .is-danger:hover { background: rgba(248, 113, 113, .12); }

@media (max-width: 1200px) {
    .tools-header-inner { padding-inline: 32px; }
}
@media (max-width: 760px) {
    .tools-header-inner { height: auto; padding: 0 16px; gap: 0 10px; flex-wrap: wrap; }
    .tools-brand { height: 62px; gap: 6px; font-size: 16px; }
    .tools-brand svg { width: 26px; height: 26px; }
    .tools-account { gap: 4px; }
    .tools-account :is(.btn-primary, .btn-outline) { --btn-px: 10px; --btn-fs: 11px; }
    .tools-icon-btn { width: 34px; height: 34px; }
    .tools-icon-btn svg { width: 21px; height: 21px; }
    .tools-menu { order: 3; width: calc(100% + 32px); height: 44px; margin-inline: -16px; padding-inline: 16px; border-top: 1px solid var(--db-border, #e4e2dd); }
    .tools-menu a { flex: 1; justify-content: center; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .tools-icon-moon, .tools-icon-sun, .tools-icon-btn::after, .tools-icon-btn::before { transition: none; }
}