/* ===== ルート関連（一覧 / 作成 / 詳細 / 選択） ===== */

/* --- ルート一覧（route_list） --- */

/* ルート作成ボタン（右下に固定の丸アイコン） */
.route_create_btn {
    position: fixed;   /* 画面に固定 */
    bottom: calc(var(--footer-h) + 16px);   /* フッターの高さ＋16px。端末によらずフッターのすぐ上に来る */
    right: 16px;       /* 右端から16px */
    margin: 10px 0;    /* 上下だけ余白 */
}

/* 作成ボタンのアイコン画像 */
.route_create_btn img {
    width: 60px;    /* 幅 */
    height: 60px;   /* 高さ */
}

/* アイコンの下にラベルを置く（フッターのナビ .footer-menu a と同じ形） */
.route_create_btn a {
    display: flex;               /* 中のアイコンとラベルを並べる */
    flex-direction: column;      /* アイコンの下にラベル（縦並び） */
    align-items: center;         /* 横方向中央にそろえる */
    gap: 2px;                    /* アイコンとラベルの間隔 */
    text-decoration: none;       /* ラベルの下線を消す */
    color: #800080;              /* ラベルの文字色（フッターは紫地に白、ここは白地なので紫） */
}

/* ラベル文字（フッターのラベルと同じ大きさ・太さ） */
.route_create_btn span {
    font-size: 12px;
    font-weight: bold;
}

/* --- ルート作成（route_create） --- */

/* 選択した投稿の並び替えリスト（スクロール領域） */
.selected_reports_field {
    width: 100%;             /* 横いっぱい */
    max-height: 250px;       /* 多いときだけスクロール（固定250pxをやめる＝空白解消） */
    overflow-y: auto;        /* 必要なときだけ縦スクロール */
}

/* 作成プレビューの地図（「確定」を押すまで隠す。JSで表示） */
#route-preview-map {
    width: 100%;          /* 横いっぱい */
    height: 250px;        /* 固定の高さ */
    border-radius: 8px;   /* 角丸 */
    margin-top: 12px;     /* 上に余白 */
    display: none;        /* 初期は非表示（JSで表示） */
}

/* プレビューの距離・時間などの情報 */
#route-preview-info {
    margin: 8px 0 4px;
}

/* 確定ボタン・作成ボタン（content-column 内で中央寄せ。.btn-purple は display:block 幅200pxなので margin auto で中央） */
#route-confirm-btn { margin: 16px auto 8px; }
.root_create_input_field button[type="submit"] { margin: 16px auto 0; }

/* 選択レポートの並び替えリスト */
.reorder-list {
    list-style: none;   /* 黒丸なし */
    margin: 0;
    padding: 0;
}
/* 1件＝番号・タイトル・↑↓ を1行に */
.reorder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid #ddd;   /* 行の区切り */
}
.reorder-index {
    flex: 0 0 auto;
    color: #800080;
    font-weight: bold;
}
.reorder-title {
    flex: 1 1 auto;      /* 残り幅いっぱい */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 1行で省略 */
}
/* ↑↓は行内の小さな四角ボタン */
.reorder-up,
.reorder-down {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid #800080;
    background: #fff;
    color: #800080;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}
/* 先頭の↑・末尾の↓は押せない見た目に（JSが disabled を付与） */
.reorder-up:disabled,
.reorder-down:disabled {
    opacity: 0.35;
    cursor: default;
}

/* 「レポートを選び直す」リンク（押したときだけ地図へ） */
.reselect-link {
    display: block;
    text-align: center;
    color: #800080;
    font-weight: bold;
    text-decoration: none;
    margin: 8px 0;
}

/* --- ルート詳細（route_detail） --- */
/* ※詳細の枠・見出し・本文・操作ボタンは detail.css（.detail-*）に統一。ここは地図だけ。 */

/* 詳細ページ上部の地図（固定高さ） */
#route-map {
    width: 100%;          /* 横いっぱい */
    height: 250px;        /* 固定の高さ */
    border-radius: 8px;   /* 角丸 */
    margin-bottom: 12px;  /* 下に余白 */
}

/* --- ルート選択（route_select_reports） --- */

/* 「ルート作成へ」ボタン（地図下部中央に浮かせる） */
/* ルート用レポート選択画面：作成ボタン（地図の下部中央に浮かせる） */
#route-next-btn {
    position: fixed;                        /* 画面に固定 */
    left: 50%;                              /* 横中央 */
    transform: translateX(-50%);           /* 中央寄せ */
    bottom: calc(var(--footer-h) + 16px);   /* フッターの少し上 */
    z-index: 5;                            /* 地図より前面（メッセージ6・シート900より後ろ） */
    background-color: #800080;             /* 紫の塗り */
    color: #fff;                           /* 白文字 */
    font-weight: bold;                     /* 太字 */
    border: none;                          /* 枠なし */
    border-radius: 8px;                    /* 角丸 */
    padding: 12px 20px;                    /* 内側の余白 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 影 */
    cursor: pointer;                       /* 指カーソル */
}

/* 選択数の警告メッセージ（作成ボタンの少し上に浮かせる） */
#route-alert {
    display: none;                          /* 通常は非表示 */
    position: fixed;                        /* 画面に固定 */
    left: 50%;                              /* 横中央 */
    transform: translateX(-50%);           /* 中央寄せ */
    bottom: calc(var(--footer-h) + 80px);   /* 作成ボタンの少し上 */
    z-index: 1100;                         /* シート(900)・フッター(1000)より前面 */
    background: rgba(220, 53, 69, 0.95);   /* 警告色（赤系） */
    color: #fff;                           /* 白文字 */
    font-weight: bold;                     /* 太字 */
    padding: 10px 16px;                    /* 内側の余白 */
    border-radius: 8px;                    /* 角丸 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 影 */
    max-width: 90%;                        /* 端で見切れない上限 */
    text-align: center;                    /* 中央寄せ */
}
#route-alert.show {
    display: block;                         /* JSで show を付けた時だけ表示 */
}


/* --- ルート詳細：たどるレポート一覧（要望3） --- */

/* 見出し「【このルートでたどるレポート】」 */
.route-report-heading {
    margin: 20px 0 8px;        /* 上下の余白 */
    color: #800080;            /* 紫 */
    font-weight: bold;         /* 太字 */
}

/* 順番付きリスト（番号のみ。黒丸は出さない） */
.route-report-list {
    margin: 0;                 /* 余白リセット */
    padding-left: 1.4em;       /* 番号のインデント */
}
.route-report-list li {
    margin-bottom: 6px;        /* 行間 */
}
.route-report-list a {
    color: #800080;            /* リンクは紫 */
    font-weight: bold;         /* 太字 */
    text-decoration: none;     /* 下線なし */
}

/* --- ルート詳細：徒歩ルート情報（要望1・4。route_detail.js が #route-info に生成） --- */

#route-info {
    margin: 8px 0 4px;         /* 上下の余白 */
}

/* 距離・時間のサマリ（先頭の1行）をピル型で強調（要望1） */
#route-info p:first-child,
#route-preview-info p:first-child {
    background: #E6E6FA;       /* 薄紫の背景 */
    color: #800080;            /* 紫 */
    font-weight: bold;         /* 太字 */
    padding: 6px 14px;         /* 内側の余白 */
    border-radius: 999px;      /* ピル型 */
    margin: 0 0 8px;           /* 下に余白 */
}

/* 注意書き（複数行。小さめ・グレー）（要望4） */
.route-caution {
    font-size: 12px;           /* 小さめ */
    color: #666;               /* グレー */
    margin: 2px 0;             /* 行間 */
}