.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    flex: none;
    padding-top: env(safe-area-inset-top);
    color: var(--text, #f7f7fa);
    background: var(--header, rgba(11, 11, 14, .76));
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .09));
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    font-family: Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: left;
    transition: box-shadow .25s ease, background .25s ease;
}

.topbar.is-scrolled { box-shadow: 0 10px 36px rgba(0, 0, 0, .16); }
.topbar a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.topbar button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.topbar-inner { width: min(1180px, 100%); min-height: 70px; margin: 0 auto; padding: 11px 22px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; box-sizing: border-box; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 850; letter-spacing: -.02em; }
.brand-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 22px rgba(0, 0, 0, .14); transition: transform .35s cubic-bezier(.2, .75, .25, 1); }
.brand:hover .brand-icon { transform: rotate(-6deg) scale(1.06); }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.service-nav { justify-self: center; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line, rgba(255, 255, 255, .09)); border-radius: 999px; background: var(--chip, rgba(255, 255, 255, .07)); }
.service-nav a { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--muted, #9b9ba7); font-size: 12px; font-weight: 750; white-space: nowrap; transition: color .2s ease, background .2s ease, transform .2s cubic-bezier(.2, .75, .25, 1); }
.service-nav a:hover { color: var(--text, #f7f7fa); transform: translateY(-1px); }
.service-nav a.is-current { background: var(--text, #f7f7fa); color: var(--bg, #0b0b0e); box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.language-switch { display: flex; align-items: center; gap: 2px; }
.language-switch button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted, #9b9ba7); cursor: pointer; font-size: 10px; font-weight: 850; transition: color .2s ease, background .2s ease, transform .2s cubic-bezier(.2, .75, .25, 1); }
.language-switch button:hover { color: var(--text, #f7f7fa); background: var(--chip, rgba(255, 255, 255, .07)); }
.language-switch button.active { color: var(--bg, #0b0b0e); background: var(--text, #f7f7fa); transform: scale(1.04); }
.language-select { display: none; }

.fortune-page {
    --bg: #fff;
    --text: #17171b;
    --muted: #71717c;
    --line: rgba(20, 20, 30, .09);
    --chip: rgba(20, 20, 30, .055);
    --header: rgba(255, 255, 255, .82);
}

@media (prefers-color-scheme: dark) {
    .fortune-page {
        --bg: #0b0b0e;
        --text: #f7f7fa;
        --muted: #9b9ba7;
        --line: rgba(255, 255, 255, .09);
        --chip: rgba(255, 255, 255, .07);
        --header: rgba(11, 11, 14, .78);
    }
}

@media (max-width: 760px) {
    .topbar-inner { min-height: 58px; padding: 8px 10px; grid-template-columns: 38px minmax(0, 1fr) 42px; gap: 7px; }
    .brand { width: 38px; }
    .brand > span:last-child { display: none; }
    .brand-icon { width: 38px; height: 38px; border-radius: 12px; }
    .brand img { width: 32px; height: 32px; }
    .service-nav { min-width: 0; width: 100%; justify-self: stretch; justify-content: flex-start; overflow-x: auto; padding: 3px; border-radius: 999px; scroll-padding-inline: 38%; scroll-snap-type: x proximity; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent); }
    .service-nav::-webkit-scrollbar { display: none; }
    .service-nav a { flex: none; min-height: 34px; padding: 0 12px; scroll-snap-align: center; font-size: 11px; }
    .language-switch { width: 42px; }
    .language-switch button { display: none; }
    .language-select { width: 42px; height: 38px; display: block; padding: 0; border: 1px solid var(--line, rgba(255, 255, 255, .09)); border-radius: 999px; outline: 0; color: var(--text, #f7f7fa); background: var(--chip, rgba(255, 255, 255, .07)); cursor: pointer; font: 850 10px/1 Inter, Pretendard, -apple-system, sans-serif; text-align: center; text-align-last: center; appearance: none; -webkit-appearance: none; }
    .language-select:focus-visible { outline: 3px solid rgba(104, 124, 255, .34); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .topbar *, .topbar *::before, .topbar *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}