:root { --ink: #353739; --teal: #12c5bf; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { overflow: hidden; color: var(--ink); }
.page-shell { width: 100%; max-width: 430px; height: 100vh; margin: 0 auto; background: linear-gradient(114deg, #f3f7f4 0%, #e9f2f3 38%, #d7e5f6 100%); }
.service-content { height: 100%; overflow-y: auto; padding: 0 0 108px; scrollbar-width: none; }.service-content::-webkit-scrollbar { display: none; }
.service-header { display: flex; height: 92px; align-items: center; justify-content: center; background: #fff; }.service-header h1 { margin: 0; color: #1f2425; font-size: 23px; font-weight: 650; letter-spacing: .08em; }
.service-section { padding: 30px 20px 0; }.service-section h2 { margin: 0 0 24px; color: #2e3536; font-size: 24px; font-weight: 650; letter-spacing: .025em; line-height: 1.25; }.nearby-section { padding-top: 45px; }.public-section { padding-top: 50px; }.traffic-section { padding-top: 50px; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 33px; }.service-item { display: flex; min-width: 0; flex-direction: column; align-items: center; color: #424849; font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: .01em; text-align: center; text-decoration: none; }.service-item:active { opacity: .62; transform: scale(.96); }.icon-slot { position: relative; display: grid; width: 48px; height: 48px; margin-bottom: 8px; place-content: center; }.icon-slot img { position: relative; z-index: 1; display: block; width: 44px; height: 44px; object-fit: contain; }.icon-slot img.is-missing { display: none; }.icon-slot small { display: none; color: #7e9191; font-size: 9px; line-height: 1.2; }.icon-slot:has(img.is-missing) { border: 2px dashed rgba(67, 94, 96, .42); border-radius: 12px; }.icon-slot:has(img.is-missing) small { display: block; }
.tab-bar { position: fixed; z-index: 10; bottom: 0; left: 50%; display: flex; align-items: center; justify-content: space-around; width: 100%; max-width: 430px; height: 82px; padding-bottom: env(safe-area-inset-bottom); border-radius: 22px 22px 0 0; background: rgba(255,255,255,.96); box-shadow: 0 -5px 20px rgba(45, 65, 73, .11); transform: translateX(-50%); }.tab-bar a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #687b86; font-size: 11px; text-decoration: none; }.tab-bar a.is-current { color: #10aaa5; font-weight: 700; }.tab-icon { height: 27px; font-size: 23px; line-height: 24px; }.ai-icon { display: grid; width: 42px; height: 42px; margin-top: -16px; place-content: center; border-radius: 50%; background: #15c6c9; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 5px 13px rgba(21,198,201,.28); }
@media (max-width: 360px) { .service-section { padding-right: 15px; padding-left: 15px; }.service-section h2 { font-size: 22px; }.service-item { font-size: 13px; }.service-grid { row-gap: 30px; } }