/* Shared header geometry keeps tabs in place across all public pages. */
header.top { display:flex; align-items:center; justify-content:space-between; padding:22px 0 20px; border-bottom:2px solid var(--ink); gap:28px; font:400 16px/1.6 var(--text); }
.top nav { margin-left:auto; }
.top nav > a, .acct-link, .acct-login { display:inline-flex; align-items:center; min-height:44px; }
.brand { font-size:28px; }
.acct-login { text-decoration:underline; text-decoration-thickness:2px; }
.brand { --wordmark-width:160px; --wordmark-height:calc(var(--wordmark-width) * 228 / 835); display:inline-flex; align-items:center; min-height:50px; }
header.top .brand .mark { flex:none; width:calc(var(--wordmark-height) * 1.63); height:var(--wordmark-height); margin-right:8px; }
.brand .wordmark { display:block; flex:none; width:var(--wordmark-width); height:var(--wordmark-height); background:currentColor; -webkit-mask:url(./wordmark-v2-ko.svg) center / contain no-repeat; mask:url(./wordmark-v2-ko.svg) center / contain no-repeat; }
html[data-lang="en"] .brand { --wordmark-width:200px; --wordmark-height:calc(var(--wordmark-width) * 164 / 1183); }
html[data-lang="en"] .brand .wordmark { -webkit-mask-image:url(./wordmark-v2-en.svg); mask-image:url(./wordmark-v2-en.svg); }
@media(max-width:699px){
 header.top { display:flex; align-items:center; flex-wrap:nowrap; gap:10px; padding:12px 0 8px; }
 .brand-h, .top > .brand { flex:none; }
 .brand-h { display:flex; align-items:center; }
 .brand { display:inline-flex; align-items:center; min-height:44px; font-size:19px; white-space:nowrap; }
 html[data-lang="en"] .brand { font-size:18px; }
 .brand > span:not(.mark), html[data-lang="en"] .brand > span:not(.mark) { display:inline; }
 .brand { --wordmark-width:100px; }
 html[data-lang="en"] .brand { --wordmark-width:clamp(78px,calc(100vw - 286px),104px); }
 header.top .brand .mark, html[data-lang="en"] header.top .brand .mark { margin-right:4px; }
 .top nav, html[data-lang="en"] .top nav { flex:none; width:auto; margin:0 0 0 auto; align-items:center; justify-content:flex-start; gap:10px; }
 .top nav > a { min-height:44px; font-size:12px; }
 #account { display:inline-flex; align-items:center; flex:none; min-height:44px; margin-left:10px; font-size:12px; font-weight:700; }
 .acct-link > span:last-child { max-width:4em; }
 .acct-link:has(.ph) { position:relative; justify-content:center; min-width:30px; }
 .acct-link:has(.ph) > span:last-child { display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media(max-width:359px){
 header.top { gap:6px; }
 .brand { font-size:16px; }
 html[data-lang="en"] .brand { font-size:14px; }
 .brand { --wordmark-width:84px; }
 html[data-lang="en"] .brand { --wordmark-width:74px; }
 header.top .brand .mark, html[data-lang="en"] header.top .brand .mark { margin-right:3px; }
 .top nav, html[data-lang="en"] .top nav { gap:7px; }
 .top nav > a, #account { font-size:11px; }
 #account { margin-left:6px; }
 .acct-link > span:last-child { max-width:3em; }
}
/* Keep the whale symbol beside the owner's supplied wordmark in both languages. */
header.top .brand > .wordmark, html[data-lang="en"] header.top .brand > .wordmark { display:block; }