@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700;800&display=swap");:root{--navy:#123b70;--blue:#1769aa;--sky:#eaf5ff;--ink:#17324d;--muted:#65778a;--line:#d8e7f1;--orange:#ef8b3c;--red:#dc5061;--green:#15976b;--white:#fff;--shadow:0 14px 35px rgba(26,68,105,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f7fbfe;font-family:Noto Sans Thai,Kanit,system-ui,sans-serif}a{text-decoration:none;color:inherit}button{font:inherit;cursor:pointer}.hero{min-height:390px;background:linear-gradient(120deg,rgba(7,42,78,.76),rgba(22,100,145,.38)),url(https://www.go-nagano.net/hubfs/blog_assets/nagano-day-trips/Hakuba-Happo-Pond-01.jpg) 50%/cover;display:flex;align-items:center;color:white}.heroOverlay{max-width:1180px;width:100%;margin:auto;padding:70px 24px}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:#4d8bb9}.hero .eyebrow{color:#d9f0ff}.hero h1{font-family:Kanit,sans-serif;font-size:clamp(42px,7vw,76px);line-height:1;margin:12px 0}.hero h1 span{color:#ffd38b}.heroSub{font-size:17px;max-width:800px;margin:18px 0 25px;line-height:1.8}.heroMeta{display:flex;gap:18px;flex-wrap:wrap}.heroMeta b,.heroMeta span{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 14px;border:1px solid rgba(255,255,255,.25);border-radius:99px}.countdown{margin-top:22px;font-size:16px}.stickyNav{position:-webkit-sticky;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;gap:5px;overflow:auto;padding:9px max(12px,calc((100% - 1180px)/2));scrollbar-width:none}.stickyNav button{white-space:nowrap;border:0;background:transparent;color:var(--muted);padding:9px 13px;border-radius:999px}.stickyNav button.active,.stickyNav button:hover{background:var(--navy);color:#fff}.section{max-width:1180px;margin:auto;padding:58px 20px;scroll-margin-top:58px}.section.alt{max-width:none;background:#edf7fd;padding-left:max(20px,calc((100% - 1140px)/2));padding-right:max(20px,calc((100% - 1140px)/2))}.introGrid{display:grid;grid-template-columns:1.4fr 1fr;grid-gap:18px;gap:18px}.card{background:white;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)}.welcome{background:linear-gradient(135deg,#fff,#eef8ff)}.pill{display:inline-block;padding:5px 10px;background:#e0f1fb;color:var(--blue);border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.12em}.card h2,.section h2{font-family:Kanit,sans-serif;margin:10px 0 8px;font-size:32px}.card p,.foodCard p,.placeBody p,.shopCard p{color:var(--muted);line-height:1.8}.quickBtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.ghostBtn,.mapBtn,.quickBtns a,.quickBtns button{border:1px solid #bcd6e7;background:#fff;color:var(--navy);border-radius:12px;padding:9px 12px;font-weight:600}.quickBtns button:first-child{background:var(--navy);color:#fff}.routeLine{line-height:2.2;font-weight:600}.routeLine i{font-style:normal;color:var(--orange);padding:0 4px}.miniStats{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px;margin-top:20px}.miniStats div{background:#f4f9fc;border-radius:15px;padding:13px;text-align:center}.miniStats b{display:block;font-size:24px}.miniStats small{color:var(--muted)}.sectionHead{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:22px}.sectionHead h2{margin:4px 0 0}.tableWrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;min-width:900px}th{background:#123b70;color:white;text-align:left;padding:14px}td,th{font-size:13px}td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}td:first-child{white-space:nowrap}td b,td small{display:block}td small{color:var(--muted);margin-top:3px}.risk{display:inline-block;padding:4px 8px;border-radius:99px;font-weight:700}.risk.low{background:#ddf6ea;color:#128458}.risk.med{background:#fff2c9;color:#956d00}.risk.high{background:#ffe0e5;color:#b5283d}.sourceNote{font-size:12px;color:var(--muted);margin-top:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:18px;gap:18px}.placeCard{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.photo{height:190px;position:relative;background:#dbeaf4;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover}.photoFallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:25px;color:#58748c}.placeBody{padding:18px}.tags{display:flex;gap:6px;flex-wrap:wrap}.tags span{font-size:10px;background:#eef6fb;color:#367399;border-radius:99px;padding:4px 7px}.camCard h3,.foodCard h3,.placeBody h3,.shopCard h3{font-family:Kanit,sans-serif;font-size:21px;margin:8px 0}.camCard b,.foodCard a,.placeBody a,.shopCard a,.sourceLinks a{color:var(--blue);font-weight:700;font-size:13px}.camGrid,.foliageGrid,.foodGrid,.shopGrid,.tipsGrid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px;gap:14px}.camCard,.foliageCard,.foodCard,.shopCard,.tipsGrid article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:15px}.foodIcon,.shopEmoji{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#fff2dc;font-size:25px;flex:none}.foodCard span,.shopCard small{color:#6a8093;font-size:12px}.shopCard{align-items:flex-start}.shopCard h3{margin:2px 0}.weatherHero{display:grid;grid-template-columns:1fr 1fr;grid-gap:18px;gap:18px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}.weatherHero h3{margin:0 0 6px}.weatherHero p{color:var(--muted);line-height:1.7}.weatherLegend{display:flex;gap:10px;flex-wrap:wrap;align-content:center}.weatherLegend span{background:#f2f8fc;border-radius:99px;padding:7px 10px;font-size:12px}.forecastStrip{display:flex;gap:8px;overflow:auto;padding:16px 0}.forecast{min-width:106px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center}.forecast small,.forecast span,.forecast strong{display:block}.forecast span{font-size:22px;margin:7px}.forecast small{color:var(--muted);font-size:11px}.loading{padding:25px;color:var(--muted)}.subTitle{font-family:Kanit;margin:25px 0 12px}.foliageCard{align-items:flex-start}.foliageDot{width:14px;height:14px;border-radius:50%;margin-top:6px;flex:none;background:#6bbf86}.foliageDot.amber{background:#f1bb35}.foliageDot.red{background:#df5664}.foliageDot.blue{background:#4d8ac2}.foliageCard h3{margin:0 0 4px;font-family:Kanit}.foliageCard p{margin:5px 0;color:var(--muted)}.foliageCard small{font-size:10px;color:#7990a0}.sourceLinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:15px}.camGrid{grid-template-columns:repeat(2,1fr)}.camCard{transition:.2s}.camCard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.camCard>span{font-size:28px}.camCard p{color:var(--muted);margin:0 0 8px;font-size:13px}.tipBox{margin-top:18px;background:#fff7df;border:1px solid #f0db9d;border-radius:16px;padding:15px;line-height:1.7}.tipsGrid{grid-template-columns:repeat(4,1fr)}.tipsGrid article{display:block}.tipsGrid h3{font-family:Kanit;margin-top:0}.tipsGrid li{margin:8px 0;color:var(--muted);font-size:13px}.liveBadge{font-size:12px;color:#138458;background:#ddf6ea;padding:7px 10px;border-radius:99px}.liveBadge:first-letter{color:#0a6}.routeCard h3{font-family:Kanit;font-size:22px}footer{background:#102e4f;color:#d7e7f3;padding:30px max(20px,calc((100% - 1180px)/2));display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}footer b{display:block;color:white;font-size:18px}footer p,footer span{font-size:12px;color:#a9c0d2}footer p{max-width:620px;margin:0;line-height:1.7}@media(max-width:900px){.introGrid,.weatherHero{grid-template-columns:1fr}.cards,.tipsGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.hero{min-height:460px}.heroOverlay{padding:50px 18px}.hero h1{font-size:45px}.heroSub{font-size:14px}.section{padding:42px 15px}.camGrid,.cards,.foliageGrid,.foodGrid,.shopGrid,.tipsGrid{grid-template-columns:1fr}.sectionHead{align-items:flex-start;flex-direction:column}.sectionHead h2{font-size:27px}.card{padding:20px}.stickyNav{padding:8px}.miniStats{gap:5px}}