/* 萩nonta SNS 画面スタイル（たたき台 page-test-map.php から移植。投稿フロー用の部品は除く） */

:root {
    --bg: #f7f5f0;          /* 和紙色 */
    --ink: #2b3a4a;         /* 濃紺 */
    --ink-sub: #7b8794;
    --accent: #c87b52;      /* 萩焼の枇杷色 */
    --accent-dark: #a9603b;
    --line: #e3ded4;
    --sheet-radius: 20px;
    --tabbar-h: 56px;       /* 画面下メニューの高さ（安全領域を除く） */
    /* ホームインジケーターにメニューが重ならないようにする余白。
       ここを削るとタップがシステム側に取られて反応しなくなるため、必ず確保する */
    /* 表示領域が画面より狭いとき（PWA の black-translucent）は、その不足分（--viewport-gap。layouts/app.blade.php が入れる）を差し引く */
    --tabbar-pad: max(0px, calc(env(safe-area-inset-bottom, 0px) - var(--viewport-gap, 0px)));
    --tabbar-space: calc(var(--tabbar-h) + var(--tabbar-pad));
    --feed-top: 36%;        /* SP の近くの投稿: 一覧の上端（ここより上は地図を見せる） */
    --face-default: #b4bac1; /* アイコンの無い人（未登録・名無しさん）の丸。地図のピン（sns-map.js の PIN_FACE_FILL）と同じ */
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Vue が起動するまで、テンプレートのままの要素を隠す */
[v-cloak] {
    display: none !important;
}

/* user-scalable=no を外した代わりに、ダブルタップ拡大だけ抑える（指2本の拡大は残る。地図の上の操作は地図が処理する）。
   #app の外にある部品（画面下のメニュー・知らせ・お知らせの帯など）をダブルタップしても画面ごと拡大しないよう、全部の要素に付ける。
   地図ライブラリが自分の要素に付ける指定（クラス指定）は、こちらより強いのでそのまま効く */
html,
body,
body * {
    touch-action: manipulation;
}

html,
body {
    height: 100%;
    margin: 0;
}

/* テーマ hagi-nonta から移植した CSS は「1rem = 10px」前提で書かれているため、基準を合わせる。
   この画面自身の指定はすべて px なので影響しない（body の大きさだけ明示しておく） */
html {
    font-size: 62.5%;
}

body {
    font-size: 15px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
    color: var(--ink);
    /* standalone で表示領域が画面の下端まで届かない端末では、この色が隙間に出る。画面下メニューと同じ色にして境目を消す */
    background: #fff;
    overscroll-behavior: none;
}

#app {
    position: fixed;
    inset: 0;
}

#map {
    position: absolute;
    inset: 0;
    background: #f5f4f0;
}

/* 地図の下端は画面下メニューに隠れるため、著作権表示をメニューの上へ押し上げる（CARTO の利用条件で折りたたみ不可） */
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right {
    bottom: var(--tabbar-space);
}

.maplibregl-ctrl-attrib {
    font-size: 9px;
}

/* ---------- ヘッダー ---------- */
.hdr {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: calc(env(safe-area-inset-top) + 10px) 12px 8px;
    pointer-events: none;
}

.hdr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.hdr h1 {
    font-size: 15px;
    margin: 0;
    font-weight: 700;
    letter-spacing: .04em;
}

.hdr .count {
    font-size: 11px;
    color: var(--ink-sub);
    margin-left: auto;
}

/* チップ（地図デザイン切替・絞り込み） */
.chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    pointer-events: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.chips::-webkit-scrollbar {
    display: none;
}

.hdr-row .chips {
    margin-left: auto;
}

.chip {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 99px;
    padding: 5px 11px;
    font-size: 12px;
    font-family: inherit;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.chip.on {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* ---------- 現在地ボタン ---------- */
.locate {
    position: absolute;
    z-index: 1000;
    right: 14px;
    bottom: calc(var(--tabbar-space) + 26px);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 19px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    cursor: pointer;
}

/* 更新ボタン（画面ごと読み込み直す）。見た目は現在地ボタンと同じで、その上に置く */
.locate.reload {
    bottom: calc(var(--tabbar-space) + 26px + 44px + 12px);
    font-size: 17px;
}

/* ---------- 現在地の丸 ---------- */
/* 地図モジュールが作るマーカーの中身。名所のバッジ（四角）と区別できるよう丸にする */
.hn-user {
    position: relative;
    width: 18px;
    height: 18px;
}

.hn-user-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}

/* 鼓動。ゆっくり広がって消える */
.hn-user-pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: var(--accent);
    opacity: .4;
    animation: hn-user-pulse 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}

@keyframes hn-user-pulse {
    0% {
        transform: scale(1);
        opacity: .4;
    }

    70% {
        transform: scale(3.4);
        opacity: 0;
    }

    100% {
        transform: scale(3.4);
        opacity: 0;
    }
}

/* 動きを減らす設定の端末では動かさない */
@media (prefers-reduced-motion: reduce) {
    .hn-user-pulse {
        animation: none;
        transform: scale(2);
        opacity: .2;
    }
}

body.is-dark .hn-user-core {
    border-color: #1f2428;
}

/* ---------- 場所のアイコン（MapKit 版の地図だけ。MapLibre 版は地図の中で描く） ---------- */
/* 絵は sns-map.js と同じ Canvas の画像。名前は MapLibre 版の文字の層と同じ色・縁取りにする */
.hn-mk-place {
    position: relative;
    z-index: 1;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 絵。寄せると座標（transform-origin・sns-map-mapkit.js が置く）を中心に大きくする。押せるのは絵だけ */
.hn-mk-place-icon {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    transform: scale(var(--hn-mk-icon-scale, 1));
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.hn-mk-label {
    display: none;
    position: absolute;
    transform: translateX(-50%);
    width: max-content;
    max-width: 9em;
    color: #5a5148;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 0 1.2px #fff, 0 0 1.2px #fff, 1px 0 1px #fff, -1px 0 1px #fff, 0 1px 1px #fff, 0 -1px 1px #fff;
}

.hn-mk-place--place .hn-mk-label {
    max-width: 8em;
    color: var(--ink);
}

/* まぁーるバスの停留所（MapKit 版）。場所のアイコンより下。区間表示の出発・到着は濃い丸、乗換は青い大きな丸 */
.hn-mk-stop {
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: #2f6fb3;
    border: 2px solid #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.hn-mk-stop--origin,
.hn-mk-stop--dest {
    background: var(--ink);
    border-width: 3px;
}

.hn-mk-stop--transfer {
    border-width: 3px;
}

.hn-mk-stop-label {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px;
    width: max-content;
    max-width: 10em;
    color: #2f6fb3;
    font-size: 10px;
    line-height: 1.2;
    pointer-events: none;
    text-shadow: 0 0 1.2px #fff, 0 0 1.2px #fff, 1px 0 1px #fff, -1px 0 1px #fff, 0 1px 1px #fff, 0 -1px 1px #fff;
}

/* 名前はズーム15から。区間の出発・到着・乗換は引いていても出す */
.hn-mk-zoom-bus .hn-mk-stop-label,
.hn-mk-stop--origin .hn-mk-stop-label,
.hn-mk-stop--dest .hn-mk-stop-label,
.hn-mk-stop--transfer .hn-mk-stop-label {
    display: block;
}

.hn-mk-stop--origin .hn-mk-stop-label,
.hn-mk-stop--dest .hn-mk-stop-label,
.hn-mk-stop--transfer .hn-mk-stop-label {
    font-size: 12px;
}

.hn-mk-stop--origin .hn-mk-stop-label,
.hn-mk-stop--dest .hn-mk-stop-label {
    color: var(--ink);
}

.hn-mk-stop-label.is-hidden {
    visibility: hidden;
}

.hn-mk-dark .hn-mk-stop {
    border-color: #141a1f;
}

.hn-mk-dark .hn-mk-stop-label {
    text-shadow: 0 0 1.2px #14181c, 0 0 1.2px #14181c, 1px 0 1px #14181c, -1px 0 1px #14181c, 0 1px 1px #14181c, 0 -1px 1px #14181c;
}

/* 熱の光の柱（MapKit 版）。寄せたときだけ出す。底面の楕円の波紋・柱・上へ抜ける光（スパイクの形で、柱だけ細く） */
.hn-mk-pillar {
    display: none;
    position: relative;
    z-index: 0;
    width: 40px;
    pointer-events: none;
}

.hn-mk-zoom-heat .hn-mk-pillar {
    display: block;
    /* 足元（地面の円の中心）を基準に、ズームに合わせて大きくする（--hn-pillar-k は sns-map-mapkit.js の placeLabels） */
    transform: scale(var(--hn-pillar-k, 1));
    transform-origin: 50% 100%;
}

.hn-mk-pillar i {
    position: absolute;
    display: block;
}

.hn-mk-pillar-col {
    left: 17.5px;
    bottom: 0;
    width: 5px;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(var(--hn-heat-light), var(--hn-heat) 55%, var(--hn-heat-fade));
}

.hn-mk-pillar-ring {
    box-sizing: content-box;
    left: 0;
    bottom: -7px;
    width: 40px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--hn-heat-ring);
    animation: hn-mk-ring 2.6s linear infinite;
}

.hn-mk-pillar-beam {
    left: 17px;
    width: 6px;
    height: 26px;
    border-radius: 3px;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--hn-heat-light));
    animation: hn-mk-beam 2.6s linear infinite;
}

@keyframes hn-mk-ring {
    0% {
        transform: scale(.45);
        opacity: .5;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes hn-mk-beam {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: .55;
    }

    100% {
        transform: translateY(-34px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hn-mk-pillar-ring,
    .hn-mk-pillar-beam {
        animation: none;
    }
}

/* 投稿ピン（MapKit 版）。場所のアイコンより上に出す。ひとこと（吹き出し）はズームしたときだけ */
.hn-mk-pin {
    position: relative;
    z-index: 2;
    background-size: 100% 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.hn-mk-bubble {
    display: none;
    position: absolute;
    background-size: 100% 100%;
}

/* 名所へのコメント（ピンなし・吹き出しだけ）。透明なピンの枠が名所のアイコンを押すのを邪魔しないよう、押せるのは吹き出しだけにする */
.hn-mk-pin.is-bubble-only {
    pointer-events: none;
}

.hn-mk-pin.is-bubble-only .hn-mk-bubble {
    pointer-events: auto;
}

.hn-mk-zoom-pin .hn-mk-bubble {
    display: block;
}

/* 投稿した人のアイコン。ピンの中の丸に重ねる（位置と大きさは sns-map-mapkit.js が付ける） */
.hn-mk-pin-avatar {
    position: absolute;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

/* 近くの投稿の一覧で見ている投稿。ピンの先端（座標）に、地面に置いた輪のように付ける（MapLibre 版は円の層） */
.hn-mk-pin.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    top: var(--hn-mk-pin-tip, 100%);
    width: 32px;
    height: 13px;
    margin: -6.5px 0 0 -16px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: rgba(200, 123, 82, .25);
    box-sizing: border-box;
    pointer-events: none;
}

/* ズームで出す（名所は13から・ほかは店名のズームから。sns-map-mapkit.js が地図に付ける） */
.hn-mk-zoom-place .hn-mk-place--place .hn-mk-label,
.hn-mk-zoom-store .hn-mk-place--store .hn-mk-label {
    display: block;
}

/* ほかの名前・アイコンと重なる名前は省く */
.hn-mk-label.is-hidden {
    visibility: hidden;
}

.hn-mk-dark .hn-mk-label {
    color: #cfc8bd;
    text-shadow: 0 0 1.2px #12161a, 0 0 1.2px #12161a, 1px 0 1px #12161a, -1px 0 1px #12161a, 0 1px 1px #12161a, 0 -1px 1px #12161a;
}

.hn-mk-dark .hn-mk-place--place .hn-mk-label {
    color: #ece6dc;
}

/* ---------- トースト ---------- */
/* 知らせは画面の上（ヘッダーのすぐ下）に出す。下はシート・一覧・現在地ボタンなどで埋まっていることが多いため。
   左右いっぱいまで使えるようにし（left: 50% だと幅が画面の半分に縮んで改行が増える）、短い文はその幅で真ん中に置く */
.toast {
    position: absolute;
    top: max(calc(env(safe-area-inset-top) + 8px), calc(var(--hdr-h, 130px) - 4px));
    left: 12px;
    right: 12px;
    width: fit-content;
    margin: 0 auto;
    z-index: 1200;
    background: rgba(43, 58, 74, .94);
    color: #fff;
    font-size: 12px;
    padding: 10px 16px;
    border-radius: 99px;
    text-align: center;
    line-height: 1.5;
}

.toast.err {
    background: rgba(192, 57, 43, .95);
}

/* ---------- ボトムシート（名所の詳細・一覧） ---------- */
/* 画面下メニューの上に出す。閉じたときはメニューの裏（画面外）まで下げる */
.sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--tabbar-space);
    z-index: 1100;
    background: #fff;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    padding: 8px 18px 18px;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
    transform: translateY(calc(100% + var(--tabbar-space) + 30px));
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    max-height: calc(88% - var(--tabbar-space));
    overflow-y: auto;
    will-change: transform;
}

.sheet.open {
    transform: translateY(0);
}

/* 右上の閉じるボタン（×）。スクロールしても上に残す。
   下の余白を詰めて、後ろの見出し・写真の上に重ねる（場所を取らないように） */
.sheet-close {
    position: sticky;
    top: 0;
    z-index: 3;
    display: block;
    width: 34px;
    height: 34px;
    margin: -8px -8px -34px auto;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    cursor: pointer;
}

.sheet-close::before,
.sheet-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
}

.sheet-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.sheet-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* バスのシートには見出しが無く、× が入力欄（検索ボタン）に重なるので、× の分だけ下げて置く */
.sheet--bus .sheet-close {
    width: 28px;
    height: 28px;
    margin: -2px -2px 6px auto;
}

/* SP（〜767px）: シートは下にスワイプして閉じるので、× は出さない */
@media (max-width: 767px) {
    .sheet .sheet-close {
        display: none;
    }
}

/* PC（768px〜）: 画面いっぱいの下からのシートではなく、左端のコンパクトなパネルで出す */
@media (min-width: 768px) {
    .sheet {
        left: 16px;
        right: auto;
        width: 380px;
        bottom: calc(var(--tabbar-space) + 16px);
        border-radius: var(--sheet-radius);
        /* 上はヘッダー（2段）の下まで */
        max-height: calc(100% - var(--tabbar-space) - 132px);
        box-shadow: 0 6px 28px rgba(0, 0, 0, .22);
        transform: translateX(calc(-100% - 40px));
    }

    .sheet.open {
        transform: translateX(0);
    }

    /* つまみ（下へ引く目印）はスマホのシート用 */
    .sheet .grip {
        display: none;
    }

    .sheet .sheet-close {
        margin-top: 0;
    }
}

.grip {
    width: 38px;
    height: 4px;
    border-radius: 99px;
    background: var(--line);
    margin: 0 auto 14px;
}

.sheet h2 {
    font-size: 14px;
    margin: 0 0 10px;
    font-weight: 700;
}

.btn-row {
    display: flex;
    gap: 9px;
}

.btn {
    flex: 1;
    height: 50px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.btn.primary {
    background: var(--accent);
    color: #fff;
}

.btn.primary:disabled {
    background: #d8d2c8;
    color: #fff;
}

.btn.ghost {
    flex: 0 0 96px;
    background: #f1eee8;
    color: var(--ink-sub);
}

.detail-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.detail-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
}

.detail-cat {
    font-size: 12px;
    font-weight: 700;
}

.detail-time {
    font-size: 11px;
    color: var(--ink-sub);
    margin-top: 3px;
}

.detail-body {
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
    margin: 0 0 14px;
    word-break: break-word;
}

.place-source {
    margin: 0 0 12px;
    font-size: 11px;
    color: #8a8f96;
}

.place-empty {
    color: #8a8f96;
}

/* この中にあるもの（グループの中の場所。種類の札の色は PlaceCategories::badge） */
.tenants {
    margin-bottom: 14px;
}

.tenants .tenants-head {
    font-weight: 700;
}

.tenants .detail-body {
    margin-bottom: 6px;
}

.tenant-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 0 7px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    vertical-align: 2px;
}

/* 名所の説明: SP は3行でたたみ、押すと全部出す（2026-10-12） */
@media (max-width: 767px) {
    .detail-body.is-clampable.is-clamped {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        margin-bottom: 4px;
    }

    .detail-body.is-clampable.is-more {
        cursor: pointer;
    }
}

.detail-more {
    display: block;
    margin: 0 0 14px;
    padding: 2px 0;
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

@media (min-width: 768px) {
    .detail-more {
        display: none;
    }
}

/* 名所へのコメントの一覧（2026-10-12）。見た目は投稿の一覧（.feed-item）にそろえる */
.place-comments {
    margin: 4px 0 16px;
    border-top: 1px solid var(--line);
}

.place-comments-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 12px 0 2px;
    font-size: 15px;
}

.place-comments-n {
    color: var(--ink-sub);
    font-size: 13px;
    font-weight: 400;
}

.place-comments-empty {
    margin: 6px 0 0;
    color: var(--ink-sub);
    font-size: 13px;
}

.place-comment {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.place-comment:last-child {
    border-bottom: none;
}

.comment-del {
    margin-left: 6px;
    padding: 4px 6px;
    border: none;
    background: none;
    color: var(--ink-sub);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.place-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.place-links a {
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    text-decoration: none;
}

/* 名所の写真。元の縦横比に関わらず 16:9 で切り抜いて高さを揃える */
.place-photo {
    margin: 6px 0 12px;
}

.place-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    background: var(--line);
}

.place-photo figcaption {
    margin-top: 6px;
    overflow: hidden;
    color: #8a8f96;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.place-photo figcaption a {
    color: inherit;
}

/* 写真が無い場所（施設は除く）の枠。写真と同じ 16:9・角丸 12px */
.place-photo-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px dashed #cfc9bd;
    border-radius: 12px;
    background: #f1eee8;
    color: #5a6672;
    font-size: 13px;
}

.place-photo-none i {
    font-size: 26px;
}

/* ---------- 暗色（夜向け）デザイン ---------- */
body.is-dark {
    background: #1f2428;    /* 画面下メニューと同じ色 */
}

body.is-dark #map {
    background: #2b2b2b;
}

body.is-dark .hdr h1,
body.is-dark .hdr .count {
    color: #f2f2f2;
}

body.is-dark .chip,
body.is-dark .locate {
    background: #1f2428;
    color: #e8e8e8;
    border-color: #3a4147;
}

body.is-dark .chip.on {
    background: #f2f2f2;
    color: #1f2428;
    border-color: #f2f2f2;
}

/* 名所の詳細パネルの見出し */
.place-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* ---------- 近くの名所・保存（一覧） ---------- */
.save-tabs {
    margin-bottom: 6px;
}

.locate.busy {
    opacity: .6;
}

/* 追従中は現在地の丸と同じ色にして、押しっぱなし状態だと分かるようにする */
.locate.following {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.sheet-note {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-sub);
}

.nearby-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nearby-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 2px;
    border: none;
    border-bottom: 1px solid var(--line);
    background: none;
    font-family: inherit;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.nearby-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
}

.nearby-body {
    flex: 1 1 auto;
    min-width: 0;
}

.nearby-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nearby-kind {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ink-sub);
}

.nearby-dist {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ink-sub);
    font-variant-numeric: tabular-nums;
}

/* チェックインできる距離の目安に入っているもの */
.nearby-dist.near {
    color: var(--accent-dark);
    font-weight: 700;
}

body.is-dark .sheet {
    background: #1f2428;
    color: #e8e8e8;
}

body.is-dark .nearby-item {
    color: #e8e8e8;
    border-bottom-color: #3a4147;
}

body.is-dark .btn.ghost {
    background: #2b3238;
    color: #b9c0c6;
}

/* 写真が無い場所の枠（夜の地図） */
body.is-dark .place-photo-none {
    border-color: #434b52;
    background: #2b3238;
    color: #a3aab1;
}

body.is-dark .place-links a {
    background: #2b3238;
    color: #e8e8e8;
    border-color: #3a4147;
}

/* ---------- まぁーるバス乗換案内のシート ---------- */
/* 移植した bus-route.css が濃紺の背景を前提にしているため、このシートの中だけ配色を変える */
.sheet--bus {
    background: #001727;
    color: #fff;
    /* 検索前は中身の分（画面の 1/8 ほど）だけの高さ。結果が出たらここまで伸びる */
    max-height: calc(64% - var(--tabbar-space));
    padding: 6px 12px 10px;
}

.sheet--bus .grip {
    margin-bottom: 8px;
}

.sheet--bus h2 {
    color: #fff;
}

.sheet--bus .bus-sheet__hint {
    margin: 6px 0 0;
    font-size: 1rem;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, .7);
}

/* 地図の破線と同じ色で、西回り・東回りを示す */
.sheet--bus .bus-sheet__legend {
    margin: 0 2px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    color: #fff;
}

.sheet--bus .bus-sheet__legend--west {
    background: #2f6fb3;
}

.sheet--bus .bus-sheet__legend--east {
    background: #c87b52;
}

.sheet--bus .grip {
    background: rgba(255, 255, 255, .35);
}

.sheet--bus .btn.ghost {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* ---------- 画面下のメニュー（partials/tabbar.blade.php。地図ページ・通常ページ共通） ---------- */
/* #app の外に置き、ホームインジケーター周辺の安全領域まで背景を塗る */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    /* 左2つ・右3つのメニューを左右同じ幅に収め、真ん中の＋（.tabbar-post）を画面のちょうど中央に置く */
    display: grid;
    grid-template-columns: 3fr 3fr 64px 2fr 2fr 2fr;
    height: var(--tabbar-space);
    padding-bottom: var(--tabbar-pad);
    background: #fff;
    border-top: 1px solid var(--line);
}

/* standalone で表示領域が画面の下端まで届かない端末でも隙間が見えないよう、背景を下へ伸ばす */
.tabbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 80px;
    background: inherit;
}

/* 一時: 下メニューを隠して見比べる（ヘッダーの「下UI」で切り替え）。
   メニューの高さを 0 にするので、シート・現在地ボタン・著作権表示も自動で下へ寄る */
body.no-tabbar {
    --tabbar-h: 0px;
    /* --tabbar-space は :root で計算済みのため、こちらも上書きしないと他の部品が動かない */
    --tabbar-space: var(--tabbar-pad);
}

body.no-tabbar .tabbar {
    display: none;
}

/* PC: 横幅いっぱいに並べると項目の間が間延びするので、背景は端まで塗ったまま中身を 560px で中央に寄せる */
@media (min-width: 768px) {
    .tabbar {
        padding-inline: max(0px, calc((100% - 560px) / 2));
    }
}

.tabbar-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--ink-sub);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;   /* 幅の狭い端末でも「近くの投稿」「マイページ」を2行に折らない */
    text-decoration: none;
}

.tabbar-item svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tabbar-item:active {
    opacity: .6;
}

.tabbar-item[aria-current="page"] {
    color: var(--accent-dark);
}

.tabbar-item[aria-current="page"] svg {
    fill: rgba(200, 123, 82, .18);
}

/* 近くの名所を探している間 */
.tabbar-item.busy svg {
    animation: tabbar-busy 1s ease-in-out infinite;
}

@keyframes tabbar-busy {
    50% {
        opacity: .3;
    }
}

/* 投稿フォームの「位置を調整」 */
.post-where {
    margin: -6px 0 10px;
}

.post-where-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
}

/* 調整シートの「現在地に戻す」は折り返さない幅にする */
.post-adjust-here {
    flex: 0 0 auto;
    padding: 0 18px;
    white-space: nowrap;
}

/* 位置の調整中に画面中央へ出すピン。先端（下端）が地図の中心に来るよう持ち上げる */
.post-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1050;
    width: 32px;
    height: 44px;
    transform: translate(-50%, -100%);
    pointer-events: none; /* 地図の操作を妨げない */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}

.post-pin svg {
    display: block;
    width: 100%;
    height: 100%;
}

.post-pin path {
    fill: var(--accent);
    stroke: #fff;
    stroke-width: 2;
}

.post-pin circle {
    fill: #fff;
}

/* 真ん中の投稿ボタン（位置は .tabbar の grid-template-columns で決める） */
.tabbar-post {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    width: 48px;
    height: 48px;
    margin-top: -14px; /* メニューから少し浮かせる */
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

.tabbar-post svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.tabbar-post:active {
    transform: scale(.94);
}

body.is-dark .tabbar {
    background: #1f2428;
    border-top-color: #3a4147;
}

body.is-dark .tabbar-item {
    color: #9aa3ab;
}

body.is-dark .tabbar-item[aria-current="page"] {
    color: #e3a07a;
}

/* ---------- 近くの投稿（下のメニュー。地図と投稿の一覧） ---------- */
/* SP は地図を画面いっぱいのまま、下側に一覧を重ねる（画面の幅いっぱい）。一覧の上を空け、そこに地図が見えるようにする
   （投稿の地点は上の空いた所に出す。地図の枠の余白は app.js の applyFeedCover）。
   PC は一覧を右に 420px で出し、地図の枠をその左に縮める。
   どちらも一覧を出している間は下のメニューを隠す（一覧の × で閉じる） */

/* 地図の上の部品は一覧に重なるので、近くの投稿の間は隠す（地図は投稿の地点を見せる役にする） */
body.is-feed .hdr,
body.is-feed .locate,
body.is-feed .tabbar {
    display: none;
}

/* 下のメニューを隠した分、メニューの高さを 0 にする（body.no-tabbar と同じ） */
body.is-feed {
    --tabbar-h: 0px;
    --tabbar-space: var(--tabbar-pad);
}

.feed {
    position: absolute;
    top: var(--feed-top);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* ホームインジケーターに最後の投稿が重ならないように */
    background: #fff;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
    transform: translateY(calc(100% + 24px));
    visibility: hidden;   /* 閉じている間は読み上げ・スクロールの対象にしない（閉じる動きが終わってから隠す） */
    transition: transform .26s cubic-bezier(.32, .72, 0, 1), visibility 0s .26s;
}

.feed.open {
    transform: none;
    visibility: visible;
    transition: transform .26s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}

/* SP: 一覧に隠れないよう、著作権表示（MapLibre）を一覧の上端まで上げる。Apple のロゴ・Legal は地図の余白で上がる */
@media (max-width: 767px) {
    body.is-feed .maplibregl-ctrl-bottom-right {
        bottom: calc(100% - var(--feed-top));
    }
}

@media (min-width: 768px) {
    .feed {
        top: 0;
        left: auto;
        width: 420px;
        border-top: none;
        border-left: 1px solid var(--line);
        border-radius: 0;
        box-shadow: -4px 0 16px rgba(0, 0, 0, .08);
        transform: translateX(calc(100% + 24px));
    }

    /* 下にある見出しの指定に負けないよう、詳しく書く */
    .feed .feed-head {
        padding-top: calc(env(safe-area-inset-top) + 12px);
    }

    body.is-feed #map {
        right: 420px;
    }
}

/* SP: 一覧を上へスクロールすると画面いっぱいに広がる（app.js の setFeedFull）。地図は隠れる */
@media (max-width: 767px) {
    .feed {
        transition: transform .26s cubic-bezier(.32, .72, 0, 1), top .22s ease, border-radius .22s ease, visibility 0s .26s;
    }

    .feed.open {
        transition: transform .26s cubic-bezier(.32, .72, 0, 1), top .22s ease, border-radius .22s ease, visibility 0s;
    }

    .feed.full {
        top: 0;
        border-top: none;
        border-radius: 0;
    }

    .feed.full .feed-head {
        padding-top: calc(env(safe-area-inset-top) + 12px);
    }
}

/* SP は下に引いて閉じる（ほかのパネルと同じ）。つまみを出し、× は出さない。広げている間（.full）は引くと元の大きさに戻るので、つまみも隠す */
/* 見出しは折り返す flex なので、左右の余白で1行を占めてつまみだけを真ん中に置く */
.feed-grip {
    flex: none;
    margin: -4px calc((100% - 38px) / 2) 2px;
}

.feed.full .feed-grip {
    display: none;
}

@media (max-width: 767px) {
    .feed-head .feed-close {
        display: none;
    }
}

@media (min-width: 768px) {
    .feed-grip {
        display: none;
    }
}

/* 一覧を閉じる ×（PC。下のメニューを隠すため、ここから地図へ戻る）。タブの行の右端に置く */
.feed-head .feed-close {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 0 0 auto;
    background: #f1eee8;
    box-shadow: none;
}

body.is-dark .feed-head .feed-close {
    background: #2c3237;
}

body.is-dark .feed-head .feed-close::before,
body.is-dark .feed-head .feed-close::after {
    background: #e8e8e8;
}

/* 見出しと並び順。スクロールしても上に残す */
.feed-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 12px 12px 10px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.feed-tabs {
    display: flex;
    gap: 14px;
}

/* 近くの投稿｜自分の投稿 の切り替え（選んでいる方に下線） */
.feed-tab {
    padding: 2px 0 4px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-sub);
    cursor: pointer;
}

.feed-tab.on {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

/* 文字検索（タブの下・並び替えの上。一行いっぱい） */
.feed-search {
    position: relative;
    flex: 0 0 100%;
}

.feed-search i {
    position: absolute;
    top: 50%;
    left: 11px;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--ink-sub);
    pointer-events: none;
}

.feed-search input {
    width: 100%;
    height: 36px;
    padding: 0 34px 0 32px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: #f7f5f0;
    font-family: inherit;
    font-size: 16px;   /* 16px 未満だと iPhone が入力のたびに拡大する */
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
}

/* 名前で探す（同じ見た目の入力欄をシートの見出しの下に置く） */
.place-search {
    margin: 2px 0 10px;
}

.feed-search input::-webkit-search-cancel-button {
    display: none;   /* 消すボタンは自前（.feed-search-clear） */
}

.feed-search-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #c9c4ba;
    transform: translateY(-50%);
    cursor: pointer;
}

.feed-search-clear::before,
.feed-search-clear::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: #fff;
}

.feed-search-clear::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.feed-search-clear::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body.is-dark .feed-search input {
    background: #2b3238;
    border-color: #3a4147;
    color: #e8e8e8;
}

.feed-sort {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.feed-sort .chip {
    padding: 4px 9px;
    font-size: 11px;
}

.feed-note {
    flex: 0 0 100%;
    margin: 0;
    font-size: 11px;
    color: var(--ink-sub);
}

/* 投稿1件（Threads のタイムラインのように、左に丸・右に本文と写真） */
.feed-item {
    display: flex;
    gap: 10px;
    padding: 12px 12px 14px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background-color .2s;
}

/* 地図に出している投稿 */
.feed-item.active {
    background: #fbf4ee;
}

.feed-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--face-default);
    color: #fff;
    font-size: 13px;
}

img.feed-avatar {
    object-fit: cover;
    background: #f1eee8;
}

.feed-item.active .feed-avatar {
    box-shadow: 0 0 0 3px rgba(200, 123, 82, .3);
}

.feed-body {
    flex: 1 1 auto;
    min-width: 0;
}

.feed-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-sub);
}

/* ユーザー名。長い名前は1行に収めて省く（距離と時刻は次の行へ回る） */
.feed-name {
    max-width: 100%;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.feed-when {
    white-space: nowrap;
}

.feed-dist {
    margin-right: 6px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.feed-badge {
    padding: 0 7px;
    border-radius: 99px;
    background: #fdf0d5;
    color: #8a5a00;
    font-size: 10px;
    font-weight: 700;
}

/* 自分の投稿の状態（承認待ち・公開中・公開終了・チェックイン） */
.feed-state {
    padding: 0 7px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.feed-state.is-pending {
    background: #fdf0d5;
    color: #8a5a00;
}

.feed-state.is-live {
    background: #e2f1e4;
    color: #2e6b3a;
}

.feed-state.is-ended {
    background: #eceae5;
    color: var(--ink-sub);
}

.feed-state.is-checkin {
    background: #e6edf5;
    color: #35597a;
}

/* チェックインした場所 */
.feed-place {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-sub);
}

.feed-place i {
    margin-right: 4px;
    color: var(--accent);
}

/* 投稿の詳細の名所名（押すと名所の詳細を開く） */
.feed-place-btn {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.feed-text {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.feed-photo {
    display: block;
    width: 100%;
    max-height: 300px;
    margin-top: 8px;
    border-radius: 10px;
    object-fit: cover;
    background: #f1eee8;
}

/* いいね（押すと赤いハート） */
.feed-actions {
    margin-top: 8px;
}

.like-btn {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px 4px 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink-sub);
    cursor: pointer;
}

.like-btn i {
    font-size: 16px;
}

.like-btn.on {
    color: #e0245e;
}

.like-btn:active i {
    transform: scale(.85);
}

.feed-empty,
.feed-end {
    margin: 0;
    padding: 28px 16px;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
    color: var(--ink-sub);
}

.feed-end {
    padding-bottom: 40px;
}

body.is-dark .feed {
    background: #1f2428;
    color: #e8e8e8;
    border-color: #3a4147;
}

body.is-dark .feed-head {
    background: #1f2428;
    border-bottom-color: #3a4147;
}

body.is-dark .feed-item {
    border-bottom-color: #3a4147;
}

body.is-dark .feed-item.active {
    background: #2b3238;
}

body.is-dark .feed-dist,
body.is-dark .feed-name,
body.is-dark .feed-tab.on {
    color: #e8e8e8;
}

/* 投稿の詳細シートの、投稿した人 */
.post-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
}

.post-author-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--face-default);
    color: #fff;
    font-size: 12px;
    object-fit: cover;
}

.post-author-name {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- 通常ページ（アカウント・パスワード再設定） ---------- */
/* 地図用の #app は position: fixed で画面に貼り付けるため、
   通常ページでは同じ強さ（id + class）で打ち消してスクロールできるようにする */
/* 地図以外の画面（マイページ・日記・お知らせ・規約）も、地図と同じく画面に固定した #app の中でスクロールする。
   文書ごとスクロールさせると、iOS のホーム画面アプリでは下メニュー（fixed）の安全領域の余白が地図の画面と変わるため（2026-10-11） */
#app.page {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
}

.page-inner {
    max-width: 520px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + 16px) 18px calc(var(--tabbar-space) + 40px);
}

.page-hdr {
    margin-bottom: 18px;
}

.page-hdr h1 {
    font-size: 20px;
    margin: 10px 0 0;
    letter-spacing: .04em;
}

/* 上の戻るリンク。矢印は飾りなので疑似要素の Font Awesome（angle-left）で出す */
.page-back {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 13px;
    color: var(--ink-sub);
    text-decoration: none;
}

.page-back::before {
    content: "\f104";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* 地図へ: 文字なしのアイコンだけ（<i> と aria-label）。指で押しやすいよう押せる範囲を広げ、左端をそろえる */
.page-back--icon {
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -8px 0 -6px -12px;
    font-size: 20px;
}

.page-back--icon::before {
    content: none;
}

.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.tab {
    flex: 1;
    padding: 10px 4px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink-sub);
    cursor: pointer;
}

.tab.on {
    color: var(--ink);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

.field {
    display: block;
    margin-bottom: 16px;
}

.field .label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
}

.field .req,
.field .opt {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    vertical-align: 2px;
}

.field .req {
    background: #fdeee6;
    color: var(--accent-dark);
}

.field .opt {
    background: #eef0f2;
    color: var(--ink-sub);
}

.field input,
.field select {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: 16px; /* iOS で拡大されないよう 16px 以上にする */
    font-family: inherit;
}

.field input:focus,
.field select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

/* 入力欄ではなく文字で見せる値（パスワード再設定のメールアドレスなど） */
.field .static-value {
    margin: 0;
    padding: 4px 0;
    font-size: 16px;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.field .hint {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: var(--ink-sub);
}

.field .err,
.check .err {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #c0392b;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.6;
}

.check input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.alert {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.alert.ok {
    background: #eaf4ee;
    color: #24613c;
}

.alert.err {
    background: #fdecea;
    color: #a5281b;
}

.alert.warn {
    background: #fdf5e6;
    color: #8a6316;
}

.btn.wide {
    width: 100%;
    flex: none;
}

.btn.as-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.link {
    display: inline-block;
    margin-top: 14px;
    padding: 4px 2px;
    border: none;
    background: none;
    color: var(--ink-sub);
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.link.center {
    display: block;
    margin: 14px auto 0;
    text-align: center;
}

.note {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-sub);
}

.me {
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.me-name {
    font-size: 17px;
    font-weight: 700;
}

/* アイコンと名前を横に並べる */
.me-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.me-profile-text {
    flex: 1 1 auto;
    min-width: 0;
}

.me-name-edit {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
}

.me-name-form input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 16px;   /* 16px 未満だと iPhone が入力のたびに拡大する */
    font-family: inherit;
}

.me-name-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 8px;
}

.me-name-actions .btn {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
}

/* アイコン。タッチすると画像を選べる（中のファイル選択は隠す）。右下のカメラの印で、押せることを示す */
.me-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    cursor: pointer;
}

.me-avatar input {
    display: none;
}

.me-avatar.is-busy {
    opacity: .6;
    pointer-events: none;
}

.me-avatar-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background: var(--face-default);
    color: #fff;
}

.me-avatar:active .me-avatar-face {
    opacity: .75;
}

.me-avatar-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.me-avatar-face svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.me-avatar-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.me-avatar-badge svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.me-avatar-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-sub);
}

/* 投稿にユーザー名とアイコンを表示する（外すと名無しさん） */
.me-public {
    margin: 12px 0 0;
}

/* 不具合のお問い合わせ */
.report textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;   /* 16px 未満だと iPhone が入力のたびに拡大する */
    line-height: 1.6;
    resize: vertical;
}

.report-photos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
}

.report-photo {
    position: relative;
    width: 72px;
    height: 72px;
}

.report-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

/* 写真を外す（右上の×） */
.report-photo-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(43, 58, 74, .9);
    cursor: pointer;
}

.report-photo-del::before,
.report-photo-del::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    background: #fff;
}

.report-photo-del::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.report-photo-del::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.me-public small {
    display: block;
    font-size: 12px;
    color: var(--ink-sub);
}

.me-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-sub);
}

/* 通知（Web Push）の設定欄 */
.notify-title {
    font-size: 14px;
    font-weight: 700;
}

.notify-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-sub);
}

.notify .btn-row {
    margin-top: 12px;
}

/* 「通知を止める」が SP 幅で2行に割れないように */
.notify .btn {
    white-space: nowrap;
}

/* ---------- 行きたい / 行った / チェックイン ---------- */
.actions {
    display: flex;
    gap: 8px;
    margin: 4px 0 14px;
}

.action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 42px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.action .action-icon {
    font-size: 14px;
}

.action.on {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.action.checkin {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.action:disabled {
    opacity: .6;
}

.save-mark {
    color: var(--accent-dark);
}

.note.small {
    margin: 0 0 12px;
    font-size: 12px;
}

.note.small a {
    color: var(--accent-dark);
}

/* チェックインの入力 */
.sheet textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 16px; /* iOS で拡大されないよう 16px 以上にする */
    line-height: 1.6;
    resize: vertical;
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 14px;
}

/* 文字数は入力欄の右下に重ねる（入力の近くで見えるように） */
.comment-field {
    position: relative;
}

.comment-field textarea {
    display: block;
    padding-bottom: 24px;
}

.comment-field .len {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 11px;
    color: var(--ink-sub);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* 写真を選ぶボタン（マイページの不具合報告） */
.photo-pick {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

.photo-pick input {
    display: none;
}

/* ひとことの入力欄＋右にカメラ（投稿・チェックイン） */
.compose {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

.compose .comment-field {
    flex: 1;
    min-width: 0;
}

.photo-slot {
    position: relative;
    flex: none;
}

/* カメラのボタン。写真を選んだら、その写真の小さな見本になる */
.photo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink-sub);
    font-size: 20px;
    cursor: pointer;
}

.photo-btn.has {
    border-color: var(--accent);
    color: var(--accent);
}

.photo-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-btn input {
    display: none;
}

/* 写真を外す ×（見本の右上） */
.photo-clear {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ink);
    cursor: pointer;
}

.photo-clear::before,
.photo-clear::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
}

.photo-clear::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.photo-clear::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body.is-dark .photo-clear {
    border-color: #1f2428;
}

body.is-dark .action,
body.is-dark .photo-pick,
body.is-dark .photo-btn,
body.is-dark .sheet textarea {
    background: #2b3238;
    color: #e8e8e8;
    border-color: #3a4147;
}

/* ---------- 日記の案内（地図の上・下メニューの上） ---------- */
/* 画面の上（ヘッダーのすぐ下）に出す。下はシート・一覧・現在地ボタンなどで埋まっていることが多いため */
.diary-prompt {
    position: absolute;
    left: 12px;
    right: 12px;
    top: max(calc(env(safe-area-inset-top) + 8px), calc(var(--hdr-h, 130px) - 4px));   /* 知らせ（.toast）と同じく、ヘッダーのすぐ下 */
    z-index: 1080;   /* 近くの投稿の一覧（1050）より上・シート（1100）より下 */
    padding: 14px 16px 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.diary-prompt .sheet-close {
    margin: -6px -6px -34px auto;
}

/* 名所の詳細（シート・1100）の中のボタンから出す案内（認証メール）は、シートに隠れないよう手前に出す。知らせ（1200）よりは下 */
.diary-prompt--gate {
    z-index: 1150;
}

/* 夜の地図では、ほかのパネルと同じ暗い色にする（日記のお誘い・認証メールの案内） */
body.is-dark .diary-prompt {
    background: #1f2428;
    color: #e8e8e8;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

body.is-dark .diary-prompt__text {
    color: #aab2ba;
}

body.is-dark .diary-prompt .sheet-close {
    background: #2b3238;
}

body.is-dark .diary-prompt .sheet-close::before,
body.is-dark .diary-prompt .sheet-close::after {
    background: #e8e8e8;
}

.diary-prompt__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
}

.diary-prompt__text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-sub);
}

.diary-prompt .btn {
    width: 100%;
    flex: none;
    height: 44px;
}

/* 日記のお誘い（チェックイン・投稿のあとに出る小さな帯）: 文＋ボタンを1行にし、右上の × の分だけ右を空ける */
.diary-prompt--bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 40px 8px 14px;
}

.diary-prompt--bar .sheet-close {
    position: absolute;
    top: 50%;
    right: 6px;
    margin: 0;
    transform: translateY(-50%);
}

.diary-prompt--bar .diary-prompt__text {
    flex: 1;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.diary-prompt--bar .btn {
    width: auto;
    flex: none;
    height: 34px;
    padding: 0 14px;
    font-size: 12px;
}

@media (min-width: 768px) {
    .diary-prompt {
        left: auto;
        right: 16px;
        width: 420px;
    }
}

/* ===== 利用規約・プライバシーポリシー（legal.blade.php。本文は resources/legal/*.md を変換したもの） ===== */
.legal-body {
    font-size: 14px;
    line-height: 1.85;
    color: var(--ink);
}

.legal-body h1 {
    font-size: 19px;
    line-height: 1.5;
    margin: 4px 0 18px;
    letter-spacing: .03em;
}

.legal-body h3 {
    font-size: 15px;
    margin: 26px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.legal-body ol,
.legal-body ul {
    padding-left: 1.4em;
    margin: 6px 0;
}

.legal-body li + li {
    margin-top: 4px;
}

.legal-body a {
    color: var(--accent-dark);
}

/* 表は画面からはみ出す分だけ横に動かせる（ページ全体は横に動かさない） */
.legal-body table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.6;
    margin: 8px 0;
}

.legal-body th,
.legal-body td {
    border: 1px solid var(--line);
    padding: 6px 8px;
    vertical-align: top;
    min-width: 7em;
}

.legal-body th {
    background: #efebe2;
    text-align: left;
}

.legal-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 28px 0 0;
    font-size: 12px;
}

.legal-links a {
    color: var(--ink-sub);
}

/* ===== 規約の改定後の同意のお願い（auth.js の ensureConsent。どの画面にも出る） ===== */
.consent-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 28, 36, .55);
}

.consent-box {
    width: 100%;
    max-width: 420px;
    background: var(--bg);
    color: var(--ink);
    border-radius: 16px;
    padding: 20px 18px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.consent-box h2 {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 10px;
}

.consent-box p {
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 10px;
}

.consent-links {
    display: flex;
    gap: 16px;
}

.consent-links a {
    color: var(--accent-dark);
}

.consent-err {
    color: #b3412f;
}

.consent-actions {
    display: flex;
    flex-direction: column-reverse;   /* 「同意する」を上に。狭い画面でも文字が折れないよう1列に並べる */
    gap: 8px;
    margin-top: 6px;
}

.consent-actions .btn {
    flex: none;   /* .btn の伸び縮み（横並び用）を縦並びでは効かせない */
    width: 100%;
}

/* ===== 退会（account.blade.php） ===== */
.withdraw-open {
    display: block;
    margin: 22px auto 0;
    font-size: 12px;
    color: var(--ink-sub);
}

.withdraw {
    margin-top: 22px;
    padding: 16px;
    border: 1px solid #e3c4bb;
    border-radius: 12px;
    background: #fbf3f0;
}

.withdraw h2 {
    font-size: 15px;
    margin: 0 0 8px;
}

.withdraw p,
.withdraw li {
    font-size: 13px;
    line-height: 1.7;
}

.withdraw p {
    margin: 0 0 8px;
}

.withdraw ul {
    margin: 0 0 10px;
    padding-left: 1.3em;
}

.withdraw .small {
    font-size: 12px;
    color: var(--ink-sub);
}

.withdraw a {
    color: var(--accent-dark);
}

.btn.danger {
    background: #b3412f;
    color: #fff;
}

.btn.danger:disabled {
    opacity: .5;
}

/* 日記（/diary・2026-10-04） */
.diary-open {
    margin-top: 10px;
}

/* 日記の主なボタンの下に並べる文字のリンク（記録を止める・記録を消す など） */
.diary-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}

.diary-links .link {
    margin-top: 8px;
}

/* 通知が止められているときの、端末ごとの設定の場所 */
.notify-note p {
    margin: 0;
}

.notify-note .notify-steps {
    margin-top: 4px;
    color: var(--ink);
    font-weight: 700;
}

.diary-posts {
    margin: 0 0 14px;
}

/* 日記の投稿のいいね。数を押すと、いいねした人が出る */
.diary-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
}

.diary-like-btn svg {
    width: 14px;
    height: 14px;
    fill: #e0245e;
}

.diary-likers {
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.diary-likers ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.diary-likers li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.diary-liker-face {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--face-default);
    object-fit: cover;
}

.diary-liker-face svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
}

.diary-liker-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diary .note.small {
    margin-top: 16px;
    font-size: 12px;
}

.diary-days {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.diary-days li + li {
    border-top: 1px solid var(--line);
}

.diary-days a {
    display: block;
    padding: 13px 16px;
    color: var(--ink);
    text-decoration: none;
}

.diary-days-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}

.diary-days-date b {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
}

.diary-days-sub {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--ink-sub);
}

/* 1日分の流れ（左に時刻、線でつなぐ） */
.diary-flow {
    list-style: none;
    margin: 0;
    padding: 0;
}

.diary-flow > li {
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 12px;
    padding-bottom: 18px;
}

.diary-flow > li::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: -6px;
    left: 97px;     /* 時刻の列 84px + 間 12px + 丸の中心 − 線の半分 */
    width: 2px;
    background: var(--line);
}

.diary-flow > li:last-child::before {
    display: none;
}

.diary-flow-time {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-sub);
    text-align: right;
    padding-top: 1px;
}

.diary-flow-body {
    position: relative;
    min-width: 0;
    padding-left: 14px;
}

.diary-flow-body::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink-sub);
}

.diary-flow .is-checkin .diary-flow-body::before,
.diary-flow .is-post .diary-flow-body::before {
    background: var(--accent);
}

.diary-flow .is-pass .diary-flow-body::before {
    background: #fff;
    border: 2px solid var(--ink-sub);
}

.diary-flow-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.diary-flow-kind {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-sub);
}

.diary-flow-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-sub);
}

.diary-flow-comment {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.diary-flow-photo {
    display: block;
    max-width: 100%;
    max-height: 240px;
    margin-top: 8px;
    border-radius: 8px;
}

.diary-nav {
    margin-top: 12px;
}

/* 飲食店の営業時間（曜日ごとに改行・2026-10-06） */
.shop-hours .detail-body {
    white-space: pre-line;
}

/* 現在地からの目安（直線距離から・2026-10-07） */
.travel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin: 6px 0 2px;
    font-size: 12px;
    color: var(--ink-sub);
}

.travel-time {
    color: var(--ink);
    font-weight: 700;
}

.travel-time small {
    margin-left: 2px;
    font-weight: 400;
    color: var(--ink-sub);
}

.travel-locate {
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
}

.nearby-time {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--ink-sub);
}

/* 橙色の距離の意味（この距離ならチェックインできる） */
.nearby-near {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-dark);
}

/* ---------- ホーム画面アプリの入れ直しのお知らせ（js/install-notice.js） ---------- */
.install-notice {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 8px);
    left: 12px;
    right: 12px;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(43, 58, 74, .96);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.install-notice p {
    flex: 1;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.install-notice button {
    flex: none;
    padding: 8px 12px;
    border: none;
    border-radius: 99px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* ---------- 熱の見方（凡例。ヘッダーの ？ で開く） ---------- */
.chip.chip-icon {
    padding-left: 10px;
    padding-right: 10px;
}

.heat-legend {
    position: absolute;
    left: 12px;
    right: 12px;
    top: max(calc(env(safe-area-inset-top) + 8px), calc(var(--hdr-h, 130px) - 4px));
    z-index: 1090;   /* 日記の案内（1080）より上・シート（1100）より下 */
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.heat-legend .sheet-close {
    margin: -6px -6px -34px auto;
}

.heat-legend__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
}

.heat-legend__bar {
    height: 8px;
    margin-right: 36px;   /* 右上の × にかからないように */
    border-radius: 4px;
}

.heat-legend__scale {
    display: flex;
    margin-right: 36px;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ink-sub);
}

.heat-legend__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
}

.heat-legend__list dt {
    font-weight: 700;
    white-space: nowrap;
}

.heat-legend__list dd {
    margin: 0;
    color: var(--ink-sub);
}

body.is-dark .heat-legend {
    background: #1f2428;
    color: #e8e8e8;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

body.is-dark .heat-legend__list dd,
body.is-dark .heat-legend__scale {
    color: #aab2ba;
}

body.is-dark .heat-legend .sheet-close {
    background: #2b3238;
}

body.is-dark .heat-legend .sheet-close::before,
body.is-dark .heat-legend .sheet-close::after {
    background: #e8e8e8;
}

@media (min-width: 768px) {
    .heat-legend {
        left: auto;
        right: 16px;
        width: 420px;
    }
}

/* 施設の説明（宿の評価・アクセス・駐車場など）は行ごとに改行して出す */
.detail-body.is-lines {
    white-space: pre-line;
}

/* ---------- お知らせ（地図の右上のベル・/notices） ---------- */
.hdr-bell {
    position: relative;
    flex: 0 0 auto;
    text-decoration: none;
}

/* 未読の数（9 を超えたら 9+） */
.hdr-bell-count,
.tab-count {
    min-width: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: #d9433a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.hdr-bell-count {
    position: absolute;
    top: -5px;
    right: -6px;
    box-shadow: 0 0 0 2px #fff;
}

.tab-count {
    display: inline-block;
    margin-left: 6px;
    vertical-align: 1px;
}

.notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.notice-list > li + li {
    border-top: 1px solid var(--line);
}

/* 前に開いたときより後のもの */
.notice-list > li.is-new {
    background: #fdf5ef;
}

.notice-like {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
}

.notice-face {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--face-default);
    object-fit: cover;
}

.notice-face svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
}

.notice-like-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.notice-like-head {
    display: block;
}

/* いいねされた投稿のひとこと（2行まで） */
.notice-like-post {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-sub);
}

.notice-time {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ink-sub);
}

.notice-like-photo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.notice-release {
    padding: 14px 16px;
}

.notice-release-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-sub);
}

.notice-release-meta b {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
}

.notice-release h2 {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.5;
}

.notice-release p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-line;
}