.language-control { display: flex; align-items: center; gap: clamp(4px, .5vw, 6px); margin: 0 clamp(6px, .8vw, 12px); color: var(--ink); flex-shrink: 0; }
.language-control label { display: flex; align-items: center; }
.language-control select, .language-control button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.language-control select { width: clamp(90px, 8vw, 110px); min-width: 0; padding: 6px; }
.language-control button { padding: 6px 9px; cursor: pointer; }
.language-control :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.language-control .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.language-control__apply-icon { display: none; }
.nav > .color-mode-control { margin-right: clamp(4px, .6vw, 10px); padding: 0; border: 0; background: transparent; }
.color-mode-toggle { width: clamp(32px, 3vw, 38px); height: clamp(32px, 3vw, 38px); color: #b77908; background: #fff3ce; transition: background 350ms ease, color 350ms ease; }
.color-mode-toggle:hover { color: #986307; }
.color-mode-toggle__icon { width: 24px; height: 24px; }
.color-mode-toggle__disc, .color-mode-toggle__rays { transform-origin: 12px 12px; transition: transform 450ms cubic-bezier(.4, 0, .2, 1), opacity 250ms ease; }
.color-mode-toggle__cutout { transition: transform 450ms cubic-bezier(.4, 0, .2, 1); }
html[data-color-mode="dark"] .color-mode-toggle { color: #d8b4fe; background: #5b21b6; }
html[data-color-mode="dark"] .color-mode-toggle:hover { color: #f3e8ff; }
html[data-color-mode="dark"] .color-mode-toggle__disc { transform: scale(1.7); }
html[data-color-mode="dark"] .color-mode-toggle__cutout { transform: translate(-10px, 7px); }
html[data-color-mode="dark"] .color-mode-toggle__rays { opacity: 0; transform: rotate(90deg) scale(.5); }
@media (prefers-reduced-motion: reduce) {
    .color-mode-toggle, .color-mode-toggle__disc, .color-mode-toggle__rays, .color-mode-toggle__cutout { transition: none; }
}
html:not([lang="en"]) .nav__links { gap: 14px; }
html:not([lang="en"]) .nav__cta { white-space: normal; }
html:lang(ja) .hero__title, html:lang(ko) .hero__title, html:lang(zh) .hero__title { letter-spacing: normal; word-break: normal; }
.vlog-join-shell > .language-control { grid-column: 1 / -1; justify-content: flex-end; margin: 12px 0; }
.language-original-note { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 14px; }
@media (min-width: 761px) and (max-width: 1200px) {
    .nav { flex-wrap: wrap; gap: 8px 12px; padding-block: 8px; min-height: 100px; }
    .nav > .brand { margin-right: auto; }
    .nav > .nav__links { order: 5; flex: 0 0 100%; justify-content: center; margin: 0; }
    .nav > .language-control { margin: 0; }
    .nav__cta { display: none; }
    body:not(.vlog-join-page) { padding-top: 101px; }
}
@media (max-width: 760px) {
    body { --compact-header-height: 59px; }
    .nav { flex-wrap: nowrap; min-height: 58px; gap: clamp(4px, 1vw, 8px); }
    .nav > .brand { flex: 1 1 auto; min-width: 0; margin-right: auto; gap: clamp(4px, 1vw, 10px); }
    .nav .brand__compass { width: clamp(26px, 5vw, 32px); height: clamp(26px, 5vw, 32px); }
    .nav .brand__name { display: block; min-width: 0; font-size: clamp(10px, 2.5vw, 12px); overflow-wrap: anywhere; }
    .nav > .color-mode-control { margin: 0; }
    .nav > .language-control { margin: 0; }
    .nav > .language-control select { width: clamp(82px, 18vw, 112px); padding: 4px 0 4px 4px; font-size: 16px; }
    .nav > .language-control select, .nav > .language-control button { min-height: 32px; height: 32px; }
    .nav > .language-control button { display: grid; place-items: center; width: 28px; padding: 4px; }
    .nav .language-control__apply-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .nav .language-control__apply-icon { display: block; }
    .nav > .language-control label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .nav > .menu-button { flex: 0 0 32px; width: 32px; height: 32px; margin: 0; border-radius: 9px; }
    body:not(.vlog-join-page) { padding-top: var(--compact-header-height); }
    .nav__links { top: var(--compact-header-height); height: calc(100vh - var(--compact-header-height)); height: calc(100dvh - var(--compact-header-height)); }
}