/*
 * MapLibre の地図の部品（scripts/maplibre/HinodeMap.js）の見た目（MAP-04 Step3-3・2026-10-29）。
 * 種類の箱と帰属の欄は Leaflet 1.3.4 の見た目の写し（leaflet-1.3.4.css の .leaflet-control-layers・.leaflet-touch・.leaflet-control-attribution）。
 * Leaflet 1.3.4 は PointerEvent のあるブラウザを全部「タッチ」と見る＝PC でも .leaflet-touch の形（2px の枠・44px のアイコン）で出ていた。
 */

/* ---- 地図の種類の箱（L.control.layers の写し） ---- */
.hm-layers {
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
    color: #333;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
    border-radius: 5px;
}
/* アイコン＝重なった3枚の板（Leaflet の layers.png は使わない＝絵を SVG で描く） */
.hm-layers-toggle {
    display: block;
    width: 44px;
    height: 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg stroke='%23333' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M13 15.5 2.5 10.5 13 5.5l10.5 5z' fill='%23b8b8b8'/%3E%3Cpath d='m2.5 13.5 10.5 5 10.5-5' fill='none'/%3E%3Cpath d='m2.5 16.5 10.5 5 10.5-5' fill='none'/%3E%3C/g%3E%3C/svg%3E") 50% 50% / 26px 26px no-repeat;
}
.hm-layers-list {
    display: none;
}
.hm-layers.hm-expanded {
    padding: 6px 10px 6px 6px;
}
.hm-layers.hm-expanded .hm-layers-toggle {
    display: none;
}
.hm-layers.hm-expanded .hm-layers-list {
    display: block;
    position: relative;
}
.hm-layers label {
    display: block;
    cursor: pointer;
}
.hm-layers-selector {
    margin-top: 2px;
    position: relative;
    top: 1px;
}

/* ---- 帰属の欄（.leaflet-control-attribution の写し・MapLibre の .maplibregl-ctrl-attrib の上書き） ---- */
.maplibregl-ctrl.hm-attrib {
    background: rgba(255, 255, 255, 0.7);
    font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
    color: #333;
    padding: 0 5px;
    margin: 0;
}
.hm-attrib a {
    color: #0078a8;
    text-decoration: none;
}
.hm-attrib a:hover {
    text-decoration: underline;
}

/* ---- ピン（scripts/maplibre/Markers.js・.leaflet-interactive の写し） ---- */
.hm-marker {
    display: block;
    cursor: pointer;
}

/* ---- ツールチップ（.leaflet-tooltip の写し・direction auto＝左右だけ）。ピンより上（Leaflet の tooltipPane はピンの上の段） ---- */
.hm-tooltip {
    z-index: 100000;
    padding: 6px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #222;
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hm-tooltip-left {
    margin-left: -6px;
}
.hm-tooltip-right {
    margin-left: 6px;
}
.hm-tooltip-left:before,
.hm-tooltip-right:before {
    position: absolute;
    pointer-events: none;
    border: 6px solid transparent;
    background: transparent;
    content: "";
    top: 50%;
    margin-top: -6px;
}
.hm-tooltip-left:before {
    right: 0;
    margin-right: -12px;
    border-left-color: #fff;
}
.hm-tooltip-right:before {
    left: 0;
    margin-left: -12px;
    border-right-color: #fff;
}

/* ---- 写真のポップアップ（scripts/maplibre/Photos.js・.leaflet-popup の写し）。ツールチップとピンより上（Leaflet の popupPane は一番上の段） ---- */
.hm-popup {
    z-index: 200000;
}
.hm-popup .maplibregl-popup-content {
    padding: 14px 20px;
    text-align: left;
    border-radius: 12px;
    background: #fff;
    color: #333;
    font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    min-width: 50px;
}
.hm-popup .maplibregl-popup-content p {
    margin: 18px 0;
}
/* 尖り＝Leaflet の 45° の四角の見えている所（幅約 27px・高さ約 13px） */
.hm-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
    border-width: 13px 13px 0;
    border-top-color: #fff;
}
.hm-popup .maplibregl-popup-close-button {
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    width: 18px;
    height: 14px;
    border: none;
    background: transparent;
    font: bold 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-align: center;
}
.hm-popup .maplibregl-popup-close-button:hover {
    color: #999;
    background: transparent;
}

/* ---- ローディングの幕（MAP-04 D1・Step3-7）＝部品の JS を落としている間と、最初の絵が出るまで。MapPage.js が消す ---- */
.hm-loading {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 250, 250, 0.85);
    pointer-events: none;
}
/* 回る輪（11-01）＝transform のアニメは描画側で回る＝MapLibre の JS を読んでいる間も止まりにくい */
.hm-spinner {
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 4px solid #ddd;
    border-top-color: #0078a8;
    border-radius: 50%;
    animation: hm-spin 0.9s linear infinite;
}
@keyframes hm-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hm-spinner { animation-duration: 2.4s; }
}
/* 読み上げ用の文字＝見た目からは外す */
.hm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- WebGL2 の無い端末の案内（MAP-04 3-9-2・D4 案D）＝幕と同じ置き方で、押せる ---- */
.hm-unsupported {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    box-sizing: border-box;
    background: #fafafa;
    text-align: center;
    font-size: 14px;
    color: #333;
}
.hm-unsupported[hidden] {
    display: none;
}
.hm-unsupported p {
    margin: 0;
}
.hm-unsupported a {
    color: #0645ad;
    text-decoration: underline;
}

/* ---- 札・ピンの重なり（Step3-7）----
 * Leaflet の zIndexOffset はマイナスでも「他のピンより下」なだけで地図の絵より上だった（日の出・日の入りの範囲の札＝−1000）。
 * MapLibre のピンは canvas と同じ箱（.maplibregl-canvas-container）に入る＝マイナスの z-index は canvas の下に潜って見えなくなる。
 * ⇒ 箱を重なりの単位にして（isolation）、canvas をそのいちばん下へ。マイナスの札は canvas より上・他のピンより下になる。 */
.maplibregl-canvas-container {
    isolation: isolate;
}
.maplibregl-canvas-container .maplibregl-canvas {
    z-index: -10000;
}

/* ---- 線・扇・弧・円の SVG（Step3-7b・Shapes.js）----
 * 同じ箱の中で canvas（−10000）より上・範囲の札（−1000）とピン・札より下。押せない（地図の操作は canvas に届く）。
 * 写真のまとめ（canvas の中の GL の層）はこれより下＝写真のピンの上を線が通る（Leaflet と逆）。 */
.maplibregl-canvas-container .hm-shapes {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -5000;
}

/* ---- 写真のピンの箱（Step3-8b・PhotoPane.js）----
 * 線の SVG（−5000）と範囲の札（−1000）より上・ピン（auto）より下＝Leaflet と同じ（写真は線の上・札の上・基準の矢印の下）。
 * 箱は押せない（地図の操作は canvas に届く）・中の写真とまとめだけ押せる。 */
.maplibregl-canvas-container .hm-photo-pane {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: -500;
    will-change: transform;
}
.maplibregl-canvas-container .hm-photo-pane > * {
    pointer-events: auto;
}
.hm-photo-pane .hm-photo {
    cursor: pointer;
}
.hm-photo-pane .hm-photo > img {
    display: block;
    -webkit-user-drag: none;
}
/* フワっと（Step3-8b-3）＝markercluster の .leaflet-cluster-anim の値そのまま。動かすのは内側（絵）だけ・箱がアニメの間だけクラスを持つ。
 * 🔴 外側（.hm-photo＝位置）には付けない＝付けると地図を動かした時に写真が遅れて付いてくる。 */
.hm-photo-pane.hm-photos-anim .hm-photo > * {
    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

/* ---- 写真のまとめの丸（Step3-8b・Photos.js）＝markercluster の既定の絵（MarkerCluster.Default-1.3.0.css）の写し ----
 * 40px の丸（外 0.6）の中に 30px の丸（内 0.6）・件数で3色（<10・<100・それ以上）。字は Leaflet と同じ 12px。 */
.hm-cluster {
    width: 40px;
    height: 40px;
    background-clip: padding-box;
    border-radius: 20px;
}
.hm-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 15px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.hm-cluster span {
    line-height: 30px;
}
.hm-cluster-small { background-color: rgba(181, 226, 140, 0.6); }
.hm-cluster-small div { background-color: rgba(110, 204, 57, 0.6); }
.hm-cluster-medium { background-color: rgba(241, 211, 87, 0.6); }
.hm-cluster-medium div { background-color: rgba(240, 194, 12, 0.6); }
.hm-cluster-large { background-color: rgba(253, 156, 115, 0.6); }
.hm-cluster-large div { background-color: rgba(241, 128, 23, 0.6); }