:root { --blue:#07506b; --blue-deep:#06364b; --ink:#112a35; --paper:#f7faf9; --line:rgba(255,255,255,.82); --muted:#57717b; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font-family:"Noto Serif SC","Songti SC",serif; }
body { margin:0; line-height:1.75; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { opacity:.72; }
.sign { margin:clamp(16px,4vw,56px) auto 0; width:min(1120px,calc(100% - 32px)); background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:white; border:3px solid var(--line); border-radius:32px; overflow:hidden; }
.top { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:19px 25px; border-bottom:1px solid var(--line); font:600 14px/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.09em; }
.top a { text-decoration:none; }
.grid { display:grid; grid-template-columns:230px 1fr; min-height:390px; }
.rail { padding:42px 26px; border-right:1px solid var(--line); font-size:18px; letter-spacing:.15em; writing-mode:vertical-rl; }
.main { padding:clamp(34px,7vw,86px) clamp(28px,7vw,88px); }
.kicker { margin:0 0 18px; font:600 13px/1.3 ui-sans-serif,system-ui,sans-serif; letter-spacing:.14em; opacity:.76; }
h1 { margin:0; font-size:clamp(44px,8vw,104px); line-height:1.03; letter-spacing:.05em; font-weight:600; }
.lede { max-width:630px; margin:28px 0 0; font-size:clamp(18px,2.2vw,24px); }
.routes { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.route { min-height:142px; padding:26px; border-right:1px solid var(--line); text-decoration:none; }
.route:last-child { border-right:0; }
.route b { display:block; font-size:22px; }
.route span { display:block; margin-top:8px; font-size:14px; opacity:.82; }
.article { width:min(860px,calc(100% - 32px)); margin:54px auto 90px; }
.answer { padding:28px 30px; border-left:4px solid var(--blue); background:#e8f0ef; font-size:20px; }
.facts { display:grid; grid-template-columns:repeat(2,1fr); margin:38px 0; border-top:1px solid #b4c4c6; border-left:1px solid #b4c4c6; }
.fact { padding:17px 20px; border-right:1px solid #b4c4c6; border-bottom:1px solid #b4c4c6; }
.fact small { display:block; color:var(--muted); font-family:ui-sans-serif,system-ui,sans-serif; }
.notice { margin:32px 0; padding:22px 24px; border:1px solid #9baeb3; border-radius:4px; }
.code { display:block; width:min(300px,100%); margin:24px auto 8px; background:white; border:1px solid #c7d3d2; border-radius:12px; }
.code-note { text-align:center; color:var(--muted); font-size:14px; }
.footer { width:min(1120px,calc(100% - 32px)); margin:0 auto 40px; padding:26px 0; color:#57717b; font:13px/1.6 ui-sans-serif,system-ui,sans-serif; }
@media (max-width:680px) { .sign{border-radius:20px}.grid{grid-template-columns:82px 1fr;min-height:440px}.rail{padding:28px 18px;font-size:16px}.routes{display:block}.route{border-right:0;border-bottom:1px solid var(--line);min-height:0}.route:last-child{border-bottom:0}.facts{grid-template-columns:1fr}.top{padding:17px}.main{padding:42px 28px}.article{margin-top:36px}.answer{font-size:18px} }
@media (prefers-reduced-motion:no-preference) { .sign{animation:arrive .35s ease-out both}@keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} }