/* 保留原视觉素材，布局不依赖屏幕高度，窄屏/横屏均可自然滚动。 */
:root {
    color-scheme: light;
    font-family: Arial, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    background: #eee;
    color: #002ea6;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-width: 0; }
body { min-height: 100vh; min-height: 100dvh; }
body.dialog-open { overflow: hidden; }
[hidden] { display: none !important; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #ee9300;
    outline-offset: 4px;
}
.section {
    width: min(100%, 540px);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    background: #fff url(../img/BG.png) center top / 100% auto no-repeat;
}
header {
    width: 100%;
    min-height: 82px;
    padding: 12px clamp(14px, 5vw, 27px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.logo { width: clamp(108px, 27vw, 133px); height: auto; }
.btn { min-height: 44px; display: flex; align-items: center; justify-self: start; }
.btn:last-child { justify-self: end; }
.btn img { width: clamp(66px, 18vw, 76px); height: auto; }
main { width: 100%; }
.main { width: min(100%, 500px); margin: 0 auto 6px; }
.main img { width: 100%; height: auto; }
.container { width: 100%; padding: 0 clamp(14px, 5vw, 27px) 20px; }
.menu {
    width: 100%;
    height: clamp(62px, 14vw, 75px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    margin-bottom: 10px;
    border-radius: 11px;
    background: url(../img/menuBox.png) center / 100% 100% no-repeat;
    box-shadow: 0 1px 3px rgba(29, 69, 178, .5);
    transition: box-shadow .18s ease, filter .18s ease;
}
.menu_flex { min-width: 0; height: clamp(32px, 8.5vw, 40px); display: flex; justify-content: center; align-items: center; padding: 0 8px; }
.menu img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.menu span { color: #002ea6; letter-spacing: clamp(2px, .9vw, 5px); font-size: clamp(16px, 4vw, 22px); font-weight: 600; white-space: nowrap; }
.menu_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu02 { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; background-image: url(../img/menuBox02.png); }
.menu02 .menu_flex { height: clamp(30px, 8vw, 38px); padding-inline: 12px; }
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 14px 24px;
    color: #fff;
    background: #033ccf;
    border-radius: 6px;
    font-size: 14px;
    flex-shrink: 0;
}
.footer button { border: 0; background: transparent; min-height: 44px; padding: 10px 14px; }
.popBtn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.popBtn img { width: 16px; height: 16px; }
.cover { position: fixed; z-index: 10; inset: 0; background: rgba(0,0,0,.6); }
.pop {
    position: fixed;
    z-index: 11;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(calc(100% - 32px), 500px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}
.popImg { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: 10px; }
.popImg > img { width: 100%; height: auto; }
.close { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; padding: 6px; border-radius: 50%; background: transparent; }
.close img { width: 32px; height: 32px; }
@media (hover: hover) {
    .menu:hover { box-shadow: 0 3px 12px rgba(0,46,166,.3); }
    .btn:hover { filter: brightness(1.12); }
}
@media (max-width: 350px) {
    header { gap: 6px; padding-inline: 12px; }
    .container { padding-inline: 12px; }
    .menu_grid { gap: 8px; }
    .menu02 .menu_flex { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }