/* オンライン地図：位置記録とは独立して表示する */
.wjmap { position: relative; overflow: hidden; width: 100%; min-height: 360px; height: min(58vh, 620px); background: #e9efea; border: 1px solid #d5e2dc; border-radius: 16px; cursor: grab; touch-action: none; isolation: isolate; }
.wjmap:focus-visible { outline: 3px solid #df992e; outline-offset: 3px; }
.wjmap--dragging { cursor: grabbing; }
.wjmap__tiles, .wjmap__markers { position: absolute; inset: 0; overflow: hidden; }
.wjmap__tiles { pointer-events: none; }
.wjmap__tile { position: absolute; max-width: none; width: 256px; height: 256px; user-select: none; }
.wjmap__markers { pointer-events: none; }
.wjmap__marker { position: absolute; pointer-events: auto; transform: translate(-50%, -100%); width: 32px; height: 32px; border: 3px solid #fff; border-radius: 50% 50% 50% 5px; rotate: -45deg; background: #cb6b17; box-shadow: 0 2px 8px #172b2260; color: transparent; cursor: pointer; animation: wjmap-arrive 180ms ease-out both; }
.wjmap__marker::after { content: ''; display: block; position: absolute; inset: 8px; background: white; border-radius: 50%; }
.wjmap__marker--photo { background: #126f6a; }
.wjmap__marker--cluster { width: 38px; height: 38px; background: #874f96; color: #fff; }
.wjmap__marker--cluster::after { display: none; }
.wjmap__marker-count { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(45deg); color: #fff; font: 700 13px/1 system-ui, sans-serif; }
.wjmap__marker:focus-visible { outline: 3px solid #f4bc58; outline-offset: 3px; }
.wjmap__controls { position: absolute; top: 12px; left: 12px; z-index: 2; display: grid; gap: 4px; }
.wjmap__zoom { width: 40px; height: 40px; border: 1px solid #d4dfd9; border-radius: 8px; background: #fff; color: #124c47; font: 700 26px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 6px #11251c1c; transition: background 140ms ease, transform 140ms ease; }
.wjmap__zoom:active { transform: scale(.94); }
.wjmap__zoom:hover { background: #e7f2ee; }
.wjmap__zoom:focus-visible, .wjmap__popup-close:focus-visible { outline: 3px solid #df992e; outline-offset: 2px; }
.wjmap__attribution { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 3px 7px; background: #fffffff0; color: #304d45; font: 11px/1.2 system-ui, sans-serif; }
.wjmap__attribution a { color: #125d56; }
.wjmap__message { position: absolute; top: 12px; left: 60px; right: 12px; z-index: 3; padding: 10px 12px; background: #fff9ed; border: 1px solid #e8c987; border-radius: 8px; color: #604217; font-size: 13px; }
.wjmap__popup { position: absolute; left: 12px; right: 12px; bottom: 24px; z-index: 3; max-width: 400px; max-height: calc(100% - 36px); overflow: auto; padding: 14px 40px 14px 15px; background: #fff; border: 1px solid #d4dfd9; border-radius: 12px; color: #1b3630; box-shadow: 0 4px 20px #172b2229; cursor: default; overflow-wrap: anywhere; animation: wjmap-arrive 180ms ease-out both; }
.wjmap__popup-title { display: block; font-size: 15px; }
.wjmap__popup-description { white-space: pre-wrap; margin-top: 6px; font-size: 13px; }
.wjmap__popup-coordinates { margin-top: 6px; color: #5a716b; font-size: 12px; }
.wjmap__popup-note { margin: 7px 0 9px; color: #4a615a; font-size: 12px; line-height: 1.5; }
.wjmap__popup-list { display: grid; gap: 5px; max-height: min(28vh, 210px); overflow-y: auto; overscroll-behavior: contain; }
.wjmap__popup-item { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; width: 100%; padding: 8px; border: 1px solid #d4dfd9; border-radius: 7px; background: #fff; color: #173f38; text-align: left; cursor: pointer; }
.wjmap__popup-item:hover, .wjmap__popup-back:hover { background: #e7f2ee; }
.wjmap__popup-item-type { flex: none; border-radius: 4px; padding: 2px 4px; background: #e2f0eb; color: #215c50; font-size: 11px; }
.wjmap__popup-item-title { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.wjmap__popup-item-desc { width: 100%; color: #5a716b; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wjmap__popup-back { display: inline-block; margin-top: 10px; padding: 7px 10px; border: 1px solid #b4cfc4; border-radius: 7px; color: #125d56; background: white; cursor: pointer; font-size: 13px; }
.wjmap__popup-item:focus-visible, .wjmap__popup-back:focus-visible { outline: 3px solid #df992e; outline-offset: 2px; }
.wjmap__popup-close { position: absolute; top: 7px; right: 8px; width: 32px; height: 32px; border: 0; background: transparent; color: #385f55; font-size: 22px; cursor: pointer; }
@keyframes wjmap-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .wjmap { min-height: 300px; height: 48vh; } }
@media (prefers-reduced-motion: reduce) { .wjmap * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }