/* ---------- Top utility bar（templates/_topbar.html と対） ---------- */
/* 文字色は --topbar-* で差し替えられる（未定義なら既定の青系。landing.html は自前の :root を持つため fallback で持たせている） */
.topbar{background:var(--ink);color:var(--topbar-text,#E9ECF0)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px;max-width:920px}
.operator{font-size:12.5px;letter-spacing:.06em;color:var(--topbar-muted,#B9C2CC);display:flex;align-items:center;gap:9px}
.operator b{color:#fff;font-weight:700;letter-spacing:.12em}
.operator .dot{width:5px;height:5px;border-radius:50%;background:var(--bronze)}
.topbar-right{display:flex;align-items:center;gap:16px}
.secure{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--topbar-muted,#B9C2CC);letter-spacing:.03em}
.secure svg{width:14px;height:14px;color:var(--bronze)}

/* 言語切替 */
.langswitch{display:flex;gap:4px;flex-wrap:wrap}
.langswitch a{
  border:1px solid var(--topbar-link-border,rgba(255,255,255,.18));color:var(--topbar-link,#C7CFD8);text-decoration:none;
  font-size:12.5px;letter-spacing:.04em;line-height:1.6;padding:5px 12px;border-radius:999px;transition:.18s;
}
.langswitch a:hover{border-color:var(--bronze);color:#fff}
.langswitch a[aria-current="true"]{background:var(--bronze);border-color:var(--bronze);color:#fff;font-weight:700}

@media (max-width:640px){
  .topbar .wrap{justify-content:center}
  .topbar-right{gap:10px}
  .secure{display:none}
}