body {
    overflow: hidden;
}

/* マップ */
#map {
    height: 100vh;
    width: 100vw;
    z-index: 1;
}

.ui-bottom {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.ui-bottom button {
    background: #1a73e8;
    border-radius: 24px;
    padding: 12px 20px;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(26, 115, 232, .4);
}

/* 親ラッパーで縦並びかつ X 中心揃え */
.custom-controls-wrapper {
    display: flex;
    flex-direction: column;
    /* 縦方向 */
    align-items: center;
    /* 横方向中心揃え */
    gap: 8px;
    /* ボタン間の余白 */
    z-index: 1000;
}

/* 四角形ズームボタン */
.custom-zoom-square {
    display: flex;
    flex-direction: column;
    width: 40px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    background: #fff;
    font-weight: bold;
    user-select: none;
    z-index: 1000;
}

.custom-zoom-square button {
    width: 100%;
    height: 40px;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-zoom-square .zoom-out {
    font-size: 22px;
}

.custom-zoom-square button:active {
    background: #f0f0f0;
}

.zoom-divider {
    height: 1px;
    background: #ccc;
    width: 100%;
}


/* 現在地ボタン（Font Awesome） */
.locate-btn {
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

/* 現在地マーカー */
.current-location {
    position: relative;
    width: 20px;
    height: 20px;
    border: 3px solid white;
    /* 外枠 */
    border-radius: 50%;
    background-color: #1a73e8;
    /* 中心 */
    box-shadow: 0 0 0 rgba(26, 115, 232, 0.7);
    animation: ripple 3s infinite;
}

/* 波紋アニメーション */
@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(26, 115, 232, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(26, 115, 232, 0);
    }
}


/* マーカー本体 */
.stamp-marker {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: white;

    /* しずく型を作る（左下の角だけ直角、他は丸） */
    border-radius: 50% 50% 50% 0;

    /* 45度回転させて尖りを真下に */
    transform: rotate(-45deg);

    /* カテゴリ色はHTMLのインラインスタイル(border-color)で入る */
    border: 3px solid;

    /* 重要：影を落として立体感を出す (回転しているためオフセット調整) */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);

    /* アニメーション */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 少しバネのような動き */
    cursor: pointer;
    z-index: 500;
}

/* マーカーの中の画像 */
.stamp-marker img {
    /* 画像を少し小さくして、外枠との間に白余白を作る */
    width: calc(100% - 4px) !important;
    height: calc(100% - 4px);
    /* 中央寄せ */
    position: absolute;
    top: 2px;
    left: 2px;
    object-fit: cover;
    /* 本体の回転を打ち消して画像を真っ直ぐにする */
    transform: rotate(45deg);
    border-radius: 50%;
    /* 画像自体の周りにも薄い線を入れると引き締まる（お好みで） */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
    background-color: #f0f0f0;
    /* 画像読み込み前の背景 */
    display: block;
    padding: 0 !important;
    /* パディングは削除してサイズ計算で余白を作る */
}

.stamp-marker::before {
    content: '\f03e';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #dadce0;
    font-size: 25px;
    /* マーカーサイズに合わせて調整 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 本体の回転を打ち消してアイコンを真っ直ぐにする (rotate(-45deg)など) */
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 1;
    display: none;
    /* 通常時は非表示 */
}

/* エラークラスがついた時だけアイコンを表示し、imgを隠す */
.stamp-marker.is-error::before {
    display: block;
}

/* ホバー時の動き */
.stamp-marker:hover {
    /* 少し拡大しつつ、Zインデックスを上げて最前面へ */
    transform: rotate(-45deg) scale(1.15) translate(0, -5px);
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4);
    /* 影も少し遠くへ */
    z-index: 1000;
}

/* 以前あった ::after (下の尖り) は不要なので削除、
   または現在地マーカー用に残すなら以下のように display:none で消す */
.stamp-marker::after {
    display: none;
}


/* タップ時（スマホ用） */
.stamp-marker.active {
    transform: scale(1.3) rotate(-45deg);
    z-index: 1000;
}

/* Leafletのコンテナ制限解除（必須） */
.custom-div-icon {
    background: none !important;
    border: none !important;
    overflow: visible !important;
}

.marker-label {
    background-color: #fff;
    border-radius: 5px;
    padding: 2px 5px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    /* マーカークリックを妨げない */
    z-index: 100;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* クラスタ自体の背景（デフォルト）を透明にする */
.custom-cluster-icon {
    background: none !important;
    border: none !important;
}

/* 代表マーカーを包むコンテナ */
.cluster-representative {
    position: relative;
    width: 50px;
    height: 50px;
}

/* 右上の件数バッジ */
.cluster-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff3b30;
    /* 通知のような赤色 */
    color: white;
    border: 2px solid white;
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* クラスタ状態ではラベルを非表示にする（任意） */
.cluster-representative .marker-label {
    display: none !important;
}


/* スポットパネル本体 */
.spot-panel {

    color: #333;
    line-height: 1.6;
    position: fixed;
    background: #fff;
    z-index: 1001;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* より自然な動き */
    overflow-y: auto;
    /* スクロールバーを表示（前回の非表示設定を上書き） */
    scrollbar-width: thin;
    -ms-overflow-style: auto;
    pointer-events: auto;
}

.spot-panel::-webkit-scrollbar {
    display: block;
    width: 6px;
}

.spot-panel::-webkit-scrollbar-track {
    background: transparent;
}

.spot-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.spot-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.spot-panel:not(.active) {
    pointer-events: none;
    visibility: hidden;
    /* ← これを追加 */
}

/* 画像エリア */
.spot-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f5f5f7;
    /* より明るいグレー */
    overflow: hidden;
    margin-bottom: 0;
    /* 余白はcontainer側で管理 */
    position: relative;
    z-index: 1;
}

.spot-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* 画像プレースホルダー（アイコン） */
.spot-image::before {
    content: '\f03e';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #dadce0;
    /* 色を薄く上品に */
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    display: none;
}

/* エラークラスがついた時だけアイコンを表示し、imgを隠す */
.spot-image.is-error::before {
    display: block;
}

/* スポット名 */
#spot-name {
    font-size: 20px;
    /* 少し大きく */
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 16px 0 8px;
    color: #1a1a1a;
}

/* PCレイアウト */
@media (min-width: 769px) {
    .spot-panel {
        top: 0;
        left: 0;
        width: 500px;
        /* 少し幅広に */
        height: 100vh;
        transform: translateX(-100%);
        /* 柔らかく広がる影 */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
        border-right: 1px solid rgba(0, 0, 0, 0.05);
    }

    .spot-panel.active {
        transform: translateX(0);
    }

    .spot-image {
        max-height: 240px;
    }
}

/* スマホレイアウト */
@media (max-width: 768px) {
    .spot-panel {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 90vh;
        /* 少し高さを抑えて圧迫感を減らす */
        transform: translateY(100%);
        border-radius: 24px 24px 0 0;
        /* 角丸を大きく */
        /* 上方向にふわっとした影 */
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }

    .spot-panel.active {
        transform: translateY(0);
    }

    .spot-image {
        border-radius: 24px 24px 0 0;
    }

    /* スマホ版のみ：引き出しハンドル（つまみ）を表示 */
    .spot-panel::after {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 4px;
        z-index: 10;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .leaflet-control {
        margin-right: 10px !important;
        margin-bottom: 50px !important;
    }
}

/* コンテンツエリア */
.spot-container {
    padding: 0 24px;
    /* 下部にボタン用の余白を確保 */
    position: relative;
}

/* アクションボタン群 */
.spot-actions {
    display: flex;
    gap: 16px;
    margin: 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    /* 区切り線 */
}

.icon-btn {
    background: #f7f9fc;
    /* 薄いグレーの背景 */
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #5f6368;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* 正円に */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background: #eef2f6;
    transform: translateY(-2px);
}

.icon-btn:active {
    transform: scale(0.95);
}

.liked {
    color: #ff5a5f;
    background: #fff0f1;
    /* いいね時は背景も薄赤に */
}

.saved {
    color: #f1c40f;
    background: #fff9db;
}

/* 親要素：右端に寄せず左から並べる */
.spot-info div {
    display: flex;
    justify-content: flex-start;
    /* 変更：左寄せ */
    align-items: flex-start;
    /* 変更：上揃え（住所が長い場合に対応） */
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid #f7f7f7;
    gap: 8px;
    /* 追加：ラベルと値の間の固定余白 */
}

/* ラベル：幅を最小限に抑えつつ開始位置を揃える */
.spot-info span:first-child {
    color: #999;
    font-size: 13px;
    font-weight: 500;
    width: 70px;
    /* 変更：min-widthからwidthで固定 */
    flex-shrink: 0;
    /* 追加：ラベルが潰れないように固定 */
}

/* 値：左寄せにして残りの幅を埋める */
.spot-info span:last-child,
.spot-info .value {
    text-align: left;
    /* 変更：左寄せ */
    color: #333;
    font-weight: 500;
    flex: 1;
    /* 追加：残りのスペースをすべて使う */
    word-break: break-all;
    /* 追加：長いURLなどの折り返し対策 */
}

/* Google Map ボタン（フローティング） */
.google-map-btn {
    position: sticky;
    bottom: 24px;
    right: 24px;

    margin-left: auto;
    /* 右寄せ */
    width: fit-content;

    background: linear-gradient(135deg, #4285f4, #3b78e7);
    color: #fff;

    padding: 0 24px;
    height: 48px;
    border-radius: 24px;
    text-decoration: none;

    display: flex;
    align-items: center;
    gap: 10px;

    font-weight: 700;
    font-size: 14px;

    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
    transition: all 0.3s ease;
    z-index: 20;
}


.google-map-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.5);
}

.google-map-btn:active {
    transform: scale(0.96);
}


/* 2. 説明文 */
.spot-description {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    /* 読みやすく行間を広めに */
    margin-bottom: 24px;
    white-space: pre-wrap;
    /* 改行をそのまま表示 */
}

.spot-stamp-location {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 12px;

    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background-color: #fafafa;
}

.spot-stamp-location i {
    font-size: 18px;
    color: #1a73e8;
    /* Google Map系ブルー */
    margin-top: 2px;
}

.stamp-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stamp-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

#spot-stamp_location {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    margin: 0;
}


/* 3. 仕切り線（hr）をより繊細に */
.divider {
    border: none;
    height: 1px;
    background-color: #f0f0f0;
    margin: 16px 0;
}

/* 4. 情報リスト（行ごとの微調整） */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 上揃え（住所が長い場合に対応） */
    padding: 8px 0;
    font-size: 14px;
}

.label {
    color: #999;
    font-size: 13px;
    font-weight: 500;
    min-width: 60px;
    /* ラベル幅固定 */
    flex-shrink: 0;
}

.value {
    color: #333;
    text-align: right;
    word-break: break-all;
    /* URLなどがはみ出さないように */
}

/* リンクテキスト（URL） */
.link-text {
    color: #3b78e7;
    /* リンクらしい青 */
    text-decoration: none;
}

.link-text:hover {
    text-decoration: underline;
}

/* 5. フィードバックリンク */
.spot-feedback {
    display: block;
    text-align: center;
    color: #bbb;
    font-size: 12px;
    margin-top: 30px;
    margin-bottom: 60px;
    /* 下部のGoogleMapボタンと被らないように余白確保 */
    text-decoration: none;
    transition: color 0.2s;
}

.spot-feedback:hover {
    color: #888;
}

.spot-feedback i {
    margin-right: 4px;
}