.cy-map {
--cym-dot: #B8C6C4;
--cym-ink: var(--wp--preset--color--ink);
--cym-next: var(--wp--preset--color--accent);
margin-block: 0 clamp(2rem, 5vw, 3.5rem);
}
.cy-map__stage {
position: relative; aspect-ratio: 2.3 / 1; overflow: hidden; cursor: grab;
background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--dust); border-radius: var(--cy-radius, 14px);
touch-action: none; user-select: none; -webkit-user-select: none;
}
.cy-map__stage.is-drag { cursor: grabbing; }
.cy-map__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cy-map__pins { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cy-map__pin {
position: absolute; left: 0; top: 0; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: none;
display: grid; place-items: center; pointer-events: auto; cursor: pointer; will-change: transform;
}
.cy-map__dot {
position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--cym-ink);
display: grid; place-items: center; box-shadow: 0 0 0 2px var(--wp--preset--color--surface);
}
.cy-map__dot::after {
content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cym-ink);
animation: cy-map-pulse 2.8s ease-out infinite; animation-delay: var(--d, 0s);
}
.cy-map__pin.is-next .cy-map__dot { background: var(--cym-next); }
.cy-map__pin.is-next .cy-map__dot::after { border-color: var(--cym-next); }
.cy-map__pin.is-cluster .cy-map__dot {
width: 30px; height: 30px; color: var(--wp--preset--color--bg); font: 700 12px/1 var(--wp--preset--font-family--display); font-variant-numeric: tabular-nums;
}
.cy-map__pin.is-cluster .cy-map__dot::after { animation-name: cy-map-pulse-2; }
.cy-map__pin.has-next .cy-map__dot { box-shadow: 0 0 0 3px var(--cym-next), 0 0 0 5px var(--wp--preset--color--surface); }
.cy-map__pin.has-next .cy-map__dot::after { border-color: var(--cym-next); }
.cy-map__pin.has-next.is-sel .cy-map__dot { box-shadow: 0 0 0 3px var(--cym-next), 0 0 0 5px var(--wp--preset--color--surface), 0 0 0 8px var(--cym-ink); }
.cy-map__pin.is-sel .cy-map__dot { box-shadow: 0 0 0 2px var(--wp--preset--color--surface), 0 0 0 5px var(--cym-next); }
.cy-map__pin:focus-visible { outline: none; }
.cy-map__pin:focus-visible .cy-map__dot { box-shadow: 0 0 0 2px var(--wp--preset--color--surface), 0 0 0 5px var(--wp--preset--color--accent-deep); }
@keyframes cy-map-pulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes cy-map-pulse-2 { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
.cy-map__tip {
position: absolute; left: 0; top: 0; z-index: 5; max-width: min(260px, calc(100% - 12px)); padding: 8px 11px; border-radius: 9px;
background: var(--cym-ink); color: var(--wp--preset--color--bg); font-size: 13px; line-height: 1.35;
opacity: 0; pointer-events: none; transition: opacity .12s;
}
.cy-map__tip.is-show { opacity: 1; }
.cy-map__tip.is-act { pointer-events: auto; }
.cy-map__tip strong { font-weight: 700; }
.cy-map__tip small { display: block; margin-top: 1px; font-size: 12px; opacity: .8; }
.cy-map__go {
display: block; width: 100%; min-height: 40px; margin-top: 8px; border: 0; border-radius: 7px;
background: var(--cym-next); color: #fff; font: 700 13px var(--wp--preset--font-family--body); cursor: pointer;
}
.cy-map__pick { background: rgba(255,255,255,.14); color: var(--wp--preset--color--bg); text-align: left; padding: 6px 10px; margin-top: 6px; }
.cy-map__pick:hover, .cy-map__pick:focus-visible { background: var(--cym-next); color: #fff; }
.cy-map__zoom { position: absolute; left: 10px; top: 10px; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.cy-map__zoom button {
width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 10px;
border: 1px solid var(--wp--preset--color--dust); background: var(--wp--preset--color--bg); color: var(--cym-ink);
font: 600 20px/1 var(--wp--preset--font-family--display); cursor: pointer;
}
.cy-map__zoom button:focus-visible { outline: 3px solid var(--wp--preset--color--accent-deep); outline-offset: 2px; }
@media (pointer: coarse) { .cy-map__zoom button { width: 44px; height: 44px; } }
.cy-map__legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-soft); }
.cy-map__key { display: inline-flex; align-items: center; gap: 8px; }
.cy-map__key i { width: 12px; height: 12px; border-radius: 50%; background: var(--cym-ink); display: inline-block; }
.cy-map__key i.is-next { background: var(--cym-next); }
.cy-map__key i.is-ring { background: var(--cym-ink); box-shadow: 0 0 0 2px var(--wp--preset--color--surface), 0 0 0 4px var(--cym-next); margin-right: 2px; }
.cy-map__hint { margin: 6px 0 0; font-size: 13px; color: var(--wp--preset--color--ink-soft); }
@media (max-width: 700px) { .cy-map__stage { aspect-ratio: 4 / 3; } } .cy-gara-card { scroll-margin-top: 110px; }
.cy-gara-card.is-flash .cy-gara-card__link { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 6px; border-radius: var(--cy-radius, 12px); }
@media (prefers-reduced-motion: reduce) {
.cy-map__dot::after { animation: none; transform: scale(2); opacity: .35; }
.cy-map__pin.is-cluster .cy-map__dot::after { transform: scale(1.5); }
.cy-map__tip { transition: none; }
}