/* 水: story map + story card + numbered rail (p/suimyaku.html). */
.water{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:16px;margin-top:36px;align-items:stretch}
.water__map{contain:layout paint;position:relative;width:100%;aspect-ratio:1;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,#EEF2EF,#E8EEEC);overflow:hidden}
.water__svg{position:absolute;inset:0;width:100%;height:100%}
.water .g-grat line{stroke:#D3DCDA;stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.water .g-grat text{font-family:var(--f-lat);font-size:calc(var(--inv,1) * 10.5px);fill:#93A3A2}
.water .g-grat text.is-off{display:none}
.g-rings circle{fill:none;stroke:var(--water);stroke-width:1;stroke-opacity:.35;vector-effect:non-scaling-stroke}
.g-rings text{font-family:var(--f-lat);font-size:calc(var(--inv,1) * 10px);fill:var(--water);text-anchor:middle;opacity:.8}
.g-rings{transform-box:fill-box;transform-origin:center}
.g-rings.is-in{animation:rings-in 1.2s var(--ease)}
@keyframes rings-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.story__near{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.story__near>span{font-weight:700;margin-right:4px}
.near{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#FFF;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:border-color .2s ease}
.near:hover{border-color:var(--water)}
.near .lat{font-weight:400;color:var(--muted)}
.near__d{font-weight:400}
.g-lead line{stroke:rgba(30,42,36,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.w-dot{fill:var(--ink);opacity:.55;transition:opacity .3s ease}
.w-dot.is-on{opacity:1}
.water__pins{position:absolute;inset:0}
.pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;font:inherit;cursor:pointer;transform:translate(-17px,-17px);z-index:1}
.pin__n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#FAFAF6;border:2px solid var(--c);color:var(--c);font-size:13px;font-weight:500;box-shadow:0 6px 16px rgba(30,42,36,.10);transition:background-color .35s ease,color .35s ease,transform .45s var(--ease)}
.pin__label{padding:3px 10px;border-radius:999px;background:rgba(250,250,246,.94);font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .4s var(--ease);pointer-events:none}
.pin:hover{z-index:3}
.pin:hover .pin__label{opacity:1;transform:none}
.pin.is-on{z-index:4}
.pin.is-on .pin__n{background:var(--c);color:#FFF;transform:scale(1.18)}
.pin.is-on .pin__label{opacity:1;transform:none}
.pin::before,.pin::after{content:"";position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--c);opacity:0;pointer-events:none}
.pin.is-ripple::before{animation:ripple 1.6s cubic-bezier(.2,.7,.3,1) .05s}
.pin.is-ripple::after{animation:ripple 1.9s cubic-bezier(.2,.7,.3,1) .35s}
@keyframes ripple{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.water__compass{position:absolute;left:auto;right:20px;top:18px}
.water__scale{position:absolute;right:20px;bottom:30px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11px;color:var(--muted);pointer-events:none}
.water__scale-bar{display:block;height:6px;border:1px solid var(--muted);border-top:0}
.water__side{display:flex;flex-direction:column;gap:12px;min-width:0}
.water__stage{flex:1 1 auto;padding:clamp(22px,2.6vw,36px);border-radius:28px;background:var(--paper);border:1px solid var(--line)}
.story{--c:var(--water)}
.story__k{display:flex;align-items:baseline;gap:12px}
.story__n{font-size:clamp(48px,5vw,76px);line-height:1;font-weight:300;color:var(--c)}
.story__cat{padding:3px 12px;border-radius:999px;background:var(--paper-2);font-size:13px;font-weight:700;color:var(--c)}
.story__title{margin-top:18px;font-size:clamp(24px,2.4vw,34px);line-height:1.4;font-weight:500}
.story__sub{margin-top:4px;font-size:15px;font-weight:700;color:var(--body)}
.story__body{margin-top:16px;font-size:16px;line-height:1.95;color:var(--body)}
.story__hook{margin-top:18px;padding-left:16px;border-left:2px solid var(--c);font-size:17px;line-height:1.8;font-weight:500;color:var(--ink)}
.story__meta{margin:20px 0 0}
.story__meta>div{display:grid;grid-template-columns:3.5em minmax(0,1fr);gap:10px;padding-block:8px;border-top:1px solid var(--line);font-size:14px}
.story__meta dt{font-weight:700;color:var(--muted)}
.story__meta dd{margin:0}
.water__ctrl{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:8px}
.water__nav{min-height:52px;border-radius:16px;border:1px solid var(--line);background:var(--paper);font:inherit;font-size:18px;color:var(--ink);cursor:pointer;transition:background-color .2s ease}
.water__nav:hover{background:#FFF}
.water__play{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:16px;border:0;background:var(--moss);color:#FFF;font:inherit;font-size:14px;font-weight:700;cursor:pointer;overflow:hidden}
.water__play-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
.water__play-bar span{display:block;height:100%;width:0;background:#FFF}
.water__play.is-running .water__play-bar span{animation:water-progress var(--play-ms,5s) linear forwards}
@keyframes water-progress{from{width:0}to{width:100%}}
.water__play-t{position:relative}
.rail{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin-top:16px}
.rail__btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:76px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--paper);font:inherit;text-align:left;color:var(--ink);cursor:pointer;transition:background-color .25s ease,border-color .25s ease}
.rail__btn:hover{background:#FFF}
.rail__btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FFF}
.rail__n{font-size:13px;color:var(--muted)}
.rail__btn[aria-pressed="true"] .rail__n{color:rgba(255,255,255,.7)}
.rail__t{font-size:13px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.stack__seg:nth-child(6),.stack__legend li:nth-child(6) i{background:#6F7FA0}
.places{margin-top:14px;columns:2;column-gap:24px}
.places li{display:flex;align-items:baseline;gap:10px;padding-block:7px;border-bottom:1px solid var(--line);font-size:15px;break-inside:avoid}
.places .lat{font-size:12px;color:var(--muted)}
.places__r{margin-left:auto;font-size:12px;color:var(--muted)}
@media (max-width:1100px){
  .water{grid-template-columns:minmax(0,1fr)}
  .rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .rail{display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .rail li{flex:0 0 132px}
  .pin{transform:translate(-14px,-14px)}
  .pin__n{width:28px;height:28px;font-size:11px}
  .pin::before,.pin::after{width:28px;height:28px}
  .places{columns:1}
}