/* Shared font licensing, readable typography and responsive foundations. */
:root {
    --ws-font-sans: "Noto Sans SC", sans-serif;
    --ws-font-serif: "Noto Serif SC", serif;
    --ws-font-mono: "Noto Sans Mono", "Noto Sans SC", monospace;
    --ws-page-title-size: clamp(1.85rem, 3.4vw, 3.5rem);
}
:root:lang(zh-Hant), :root:lang(zh-TW), :root:lang(zh-HK) {
    --ws-font-sans: "Noto Sans TC", sans-serif;
    --ws-font-serif: "Noto Serif TC", serif;
    --ws-font-mono: "Noto Sans Mono", "Noto Sans TC", monospace;
}
html { margin: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 0; font-family: var(--ws-font-sans); }
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
img, video { max-width: 100%; }
code, pre, kbd, samp { font-family: var(--ws-font-mono); }
:where(h1, h2, h3, h4, p, a, li, td, th) { overflow-wrap: anywhere; }
:where(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid #168ea5;
    outline-offset: 3px;
}
:where([id]) { scroll-margin-top: 150px; }
.foundation-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foundation-card, .foundation-map__note { min-width: 0; }
.j-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.j-service-card { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.j-service-title, .j-service-desc { max-width: 100%; }
.pagination { flex-wrap: wrap; gap: 8px; }
.pagination .page-btn { flex: 0 0 44px; min-height: 44px; }
.main-nav li:focus-within > ul { display: flex !important; }
.main-nav > ul > li:last-child > ul { left: auto; right: 0; transform: none; }
.main-nav li ul { max-width: min(420px, calc(100vw - 40px)); }
.main-nav li ul a { white-space: normal; }

/* The page must keep native browser zoom and a readable base font size. */
@media (min-width: 1200px) {
    .nav-container { padding-inline: 28px; }
    .logo { margin-right: 24px; }
    .logo a { font-size: 2rem; }
    .main-nav > ul { gap: clamp(14px, 1.5vw, 27px); }
    .main-nav > ul > li > a { font-size: 1rem; letter-spacing: .02em; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .site-header { padding-block: 14px; }
    .nav-container { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .logo { margin: 0; }
    .main-nav { flex: 1 0 100%; }
    .main-nav > ul { gap: 16px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    body { font-size: 16px; }
    .site-header { padding-top: 16px; padding-bottom: 12px; }
    .main-nav > ul > li > a { display: flex; align-items: center; min-height: 44px; }
    .main-nav > ul > li:last-child { top: 0 !important; }
    .j-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .j-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .j-service-card { padding: 20px 12px; }
    .mobile-lang-toggle { min-height: 44px !important; margin-top: 0 !important; }
    .mobile-lang-container { margin-right: 0; }
    .mobile-controls { gap: 8px; }
    .mobile-drawer-overlay { height: 100dvh; }
    .mobile-drawer { overscroll-behavior: contain; }
    :where(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { font-size: 16px; }
    .login-card { margin: 20px 16px; padding: 28px 22px; width: calc(100% - 32px); }
    .captcha-group { gap: 10px; }
    .captcha-group .form-input { min-width: 0; }
}
@media (max-width: 700px) {
    .foundation-map { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
    .j-services-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}