* { margin: 0; padding: 0; }
body { background: #000; padding: 0 50px; }
a { padding: 10px; text-decoration: none; color: #000; font-size: 16px; transition: color 1s; }
.page { border: 1px solid #333; background: #101010; }
.topbar { position: sticky; top: 0; height: 48px; background: #1a1a1a; border-bottom: 1px solid #333; display: flex; align-items: center; padding: 0 16px; color: #888; font-size: 14px; z-index: 10; gap: 3px; }
.topbar a { color: #fff; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.topbar-links { display: flex; align-items: center; gap: 0px; flex-shrink: 0; }
.topbar-links a { white-space: nowrap; }
.menu-wrap { position: relative; }
.icon-btn { background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; line-height: 0; }
.icon-btn:hover { opacity: 0.6; }
.side-panel { box-sizing: border-box; position: fixed; top: 0; right: 0; width: 300px; height: 100vh; background: #181818; border-left: 1px solid #333; transform: translateX(100%); transition: transform 0.3s ease; z-index: 30; overflow-y: auto; display: flex; flex-direction: column; padding-top: 20px; }
.menu-wrap.open .side-panel { transform: translateX(0); }
.side-panel a { box-sizing: border-box; display: flex; align-items: center; height: 48px; padding: 0 18px; color: #fff; font-size: 16px; }
.side-panel a:hover { background: #262626; color: #fff; }
.side-panel a.lang-link { align-items: baseline; font-size: 16px; }
.lang-meta { font-size: 12px; color: #888; margin-left: 6px; }
.lang-note { padding: 0 18px 12px; font-size: 13px; color: #888; }
.side-sign { margin-top: auto; padding: 15px 18px; border-top: 1px solid #333; font-size: 14px; color: #fff; }
.side-sign .sign-row { margin-bottom: 8px; }
.side-panel a.side-mail { display: inline-flex; height: auto; padding: 0; font-size: 14px; color: #fff; }
.side-panel a.side-mail:hover { background: none; color: #888; }
@media (hover: hover) { .menu-wrap:hover .side-panel { transform: translateX(0); } }
.footer { padding: 25px; border-top: 1px solid #333; display: flex; gap: 20px; font-size: 14px; }
.footer .each { flex: 1; }
.footer-title { padding: 6px; font-size: 20px; }
.sign { padding: 10px; font-size: 16px; margin-left: auto; }
.sign a { padding: 0; }
.mag { transition: transform 1s; }
.mag:hover { transform: translate(0px,-2px) scale(1.05); }
@media (max-width: 900px) { body { padding: 0; } }

.topbar-links .logo { display: flex; align-items: center; padding: 0 10px 5px 0; }
.topbar-links .logo svg { display: block; height: 20px; width: auto; }
.sign-row { display: flex; align-items: center; line-height: 1; gap: 0px; }
.sign-row svg { display: block; flex-shrink: 0; }
.sign-row svg:first-of-type { height: 18px; width: auto; padding: 0 0 3px 0; box-sizing: content-box; }
.sign-row svg:last-of-type { height: 21px; width: auto; }