/* download_place.css */
/* ========= 地点ページ専用共通: トークン / ベース =========

/* お知らせボックス：幅を制限、左寄せ、自然改行 */
.notice_box{
  color:#ff0000; font-size:0.92rem; border:1px solid var(--c-border); background:#f5f7fa;
  border-radius:0px; padding:10px 12px;
  width: min(90vw, 560px); margin: 12px 0; line-height:1.6;
  white-space: normal; overflow-wrap: break-word;
}
/* お知らせ内のリスト */
.notice_box ul{ margin:8px 0 0; padding-left:1.2em; list-style:disc; }
/* リスト項目間の余白 */
.notice_box li + li{ margin-top:.3em; }

/* ------- matrix（地域・都道府県の行レイアウト） ------- */
/* 全体の最大幅 */
.matrix{
  position: relative;
  max-width: 980px;
}

/* PC時：全国／地方名の左カラム側だけ背景を敷く */
@media (min-width: 901px){
  .matrix::before,
  body[data-page="stations"] #stationPanel::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 130px;
    background: #d3d3d3;
    z-index: 0;
  }
  .matrix > *,
  body[data-page="stations"] #stationPanel > *{
    position: relative;
    z-index: 1;
  }

  body[data-page="stations"] #stationPanel{
    position: relative;
  }
}

/* 1行＝「見出し（左）＋ボタン群（右）」 */
.row{
  display: grid;
  grid-template-columns: 130px 1fr; /* 左=見出し 固定幅 / 右=ボタン群 自由幅 */
  align-items: start;
  gap: 8px 12px;                    /* 行間 / 列間 */
  padding: 6px 0;
}

/* 左側の「全国／地方名」ボタン → 見出し風 */
.area-btn{
  display: block;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: 0px;
  background: #fff;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  width: 96px;
  margin: 0 auto;
  height: 30px;       /* ← 高さを統一 */
}

/*「全国・地方名」ボタン押下→文字色反転（activeはJSで同期）*/
.area-btn.active{
  background: var(--c-primary);
  color: var(--c-primary-fg);
  border-color: var(--c-primary);
}
/* hover時(カーソルがその要素の上にある状態)の淡色（水色） */
.area-btn:hover{ background: #b9e0fa; }

/* 右側の都道府県ボタン群（折り返しOK） */
.group{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;                     /* 行間 / 列間 */
}

/* 都道府県のチップボタン */
/*.pref-btn{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: 0px;
  background: #fff;
  cursor: pointer;
  line-height: 1.2;
}*/

.pref-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*width: 80px;        /* ← 幅を統一 */
  height: 28px;       /* ← 高さを統一 */
  /* 4文字ぶんを最低幅に。ic は和文1字幅の長さ。 */
  min-width: calc(4ic + 20px);        /* ← “4文字＋左右padding” の目安 */
  padding: 0 10px;         /* ← 上は高さ固定で0，左右追加 */
  white-space: nowrap;  /*文字は1行で切らない*/
  border: 1px solid var(--c-border);
  border-radius: 0px;
  background: #fff;
  cursor: pointer;
  
  line-height: 1;                     /* 高さ固定なので 1 でOK（ズレるなら 1.1〜1.2） */
  vertical-align: top;   /* または middle。baseline を避ける */
}

/* ic 未対応ブラウザ向けのフォールバック（任意） */
@supports not (width: 1ic) {
  .pref-btn{
    min-width: calc(4ch + 20px);      /* 近い見た目になる代替。ch は「0」の幅基準 */
  }
}

/* 都道府県ボタン押下→文字色反転（is-selectedはJSで同期）*/
.pref-btn.is-selected{
  background: var(--c-primary);
  color: var(--c-primary-fg);
  border-color: var(--c-primary);
}
/* hover時(カーソルがその要素の上にある状態)の淡色（水色） */
.pref-btn:hover{ background: #b9e0fa; }

/* ========= 地点ページ：注意書き＋操作ボタンの配置 ========= */

/* 注意書き（.notice_box）と同じ最大幅で右端を揃える 
/*.place-head{
  /* .notice_box と同じ式を使う：右端が自動で一致する */
  /*width: min(90vw, 560px);
  margin: 8px 0 12px; /* 上：少し詰める / 下：地点一覧との間に余白 */
/*}*/

/* 右寄せでボタンを並べる */
.place-actions{
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
}

/* ボタンの簡易デザイン（既存のトーンに合わせた最低限） */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 32px;
  padding: 0 12px;
  border-radius: 0px;
  font-weight: 600;
  border: 1px solid var(--c-border);
  background: #fff;
  cursor: pointer;
}
/* ボタンのバリエーション：基本は白背景＋文字色は既定値 */
.btn--primary{
  background: #fff;
  color: var(--c-text);
}
/* ボタンのバリエーション：ゴーストボタン風（白背景＋文字色は既定値） */
.btn--ghost{
  background: #fff;
  color: var(--c-text);
}
/*.btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}*/

/* スマホ：1カラム（見出しの下にボタン群） */
/* 見出し＋ボタン群を縦並びに */
@media (max-width: 900px){
  .matrix{ max-width: none; }
  .row{
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .area-btn{ width: max-content; }
}

/* 押下中（マウスダウン／タップ中）は都道府県と同じ反転（青背景＋白文字）にする */
.btn:active,
.action-btn:active{
  background: var(--c-primary);
  color: var(--c-primary-fg);
  border-color: var(--c-primary);
}

/* --- 未選択のときだけ、hover で淡色（水色）に --- */
.area-btn:not(.active):hover{
  background: #b9e0fa;                /* 水色 */
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
  color: inherit;                      /* 文字色は既定のまま */
}

/* --- 未選択のときだけ、hover で淡色（水色）に --- */
.pref-btn:not(.is-selected):hover{
  background: #b9e0fa;                /* 水色 */
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
  color: inherit;
}

/* --- 選択済みは :hover しても薄く戻らない（選択色を維持） --- */
/* ===== クリア／選択：未選択＝有効時だけ hover/active を反応させる ===== */
.area-btn.active:hover,
.pref-btn.is-selected:hover{
  background: var(--c-primary);
  color: var(--c-primary-fg);
  border-color: var(--c-primary);
}
/* ===== クリア／選択：未選択＝有効時だけ hover/active を反応させる ===== */

/* 無効時は一切反応させない（hover/active を殺す） */
#btnPlaceClear:disabled,
#btnPlaceConfirm:disabled{
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;        /* ← hoverが発生しない */
}

/* 有効時の hover（近づけた瞬間）：全国と同じ濃い青＋白文字にする */
#btnPlaceClear:not(:disabled):hover,
#btnPlaceConfirm:not(:disabled):hover{
  background:    #b9e0fa;          
}

/* 有効時の active（押下中）：hoverよりも同等〜やや強めでもOK（同じで統一） */
#btnPlaceClear:not(:disabled):active,
#btnPlaceConfirm:not(:disabled):active{
  background: var(--c-primary);
  color: var(--c-primary-fg);
  border-color: var(--c-primary);
}

/* ===== 地点ページ専用：四角枠（ボード）を“全て”ここで管理 ===== */

/* 見た目（PC/SP共通）：枠・背景・影・内側余白 */
.place-board{
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0px;
  box-shadow: none;
  box-sizing: border-box;
}

/* 枠ヘッダ：タイトルと操作ボタンを同じ行に。右端までボタンを押し出す */
.place-board__head{
  display: flex;
  align-items: center;          /* 縦位置をそろえる */
  gap: 12px;
  margin-bottom: 12px;
}

/* タイトル側は“伸びる”領域にして、右のボタンを右端へ押し出す */
.place-board__title{
  font-weight: 700;
  flex: 1 1 auto;               /* タイトルが長くても右を押し出す */
  line-height: 1.2;
}

/* 凡例部分のデザイン */
.selection-legend{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 24px 0;
  font-size: .95rem;
  color: var(--c-muted);
}

/* 凡例の色見本 */
.selection-legend__swatch{
  width: 16px;
  height: 16px;
  background: var(--c-primary);
  /*border-radius: 2px;*/
}

/* 凡例のラベル */
.selection-legend__label{
  color: var(--c-text);
  font-weight: 600;
}

/* 新：ヘッダ内の凡例ブロック（複数要素を横並びにし、ボタンを右寄せできるようにする） */
.place-board__meta{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* 新：凡例を四角で囲むスタイル */
.selection-legend-full{
  border: 1px solid var(--c-border);
  background: #ffffff;
  padding: 10px 12px;
  /*border-radius: 6px;*/
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
}

.selection-legend-full .legend-text{ flex: 1 1 auto; font-size: .95rem; color: var(--c-text); }
.selection-legend-full .legend-box{ font-size: .92rem; color: var(--c-text); }

/* ボタン群は右寄せ（既存 .place-actions に margin-left:auto が効くようにする） */
.place-board__meta .place-actions{
  margin-left: 76px; /* 凡例とボタンの間隔を広げるためのマージン */
  display: inline-flex;
  gap: 8px;
  align-items: center;
  align-self: flex-end;
}

/* 右上のボタン群は縮まず、右端で並ぶ */
.place-actions--inside{
  display: flex;
  gap: 8px;
  flex: 0 0 auto;               /* ← 右側は幅固定（縮ませない） */
  margin-left: 76px;          /* ← 念のための右寄せ保険（space-betweenと両方で確実に右端へ） */
}

/* ボタンの高さを枠ヘッダに合わせて整える（既定値で十分なら不要） */
.place-actions--inside .btn{
  height: 32px;
  line-height: 30px;            /* フォントにより 30～32px で微調整 */
  padding: 0 12px;
}

/* スマホでは縦並び（任意） 
@media (max-width: 600px){
  .place-board__head{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .place-actions--inside{
    align-self: flex-end;        スマホでは右寄せのままにしたい場合 
  }
}*/

/* --- レイアウト（横幅）の制御も place.css に集約 --- */

/* SP：幅100%でOK（親の .content のガターで端ベタは回避される）*/
@media (max-width: 900px){
  .place-board{
    width: 100%;
    /* 必要なら max-width を軽く入れてもよいが、基本は不要 */
    /* max-width: 980px; */
    margin: 12px 0 24px 0;        /* 左寄せ */
  }
  /* 中身は親幅に追従 */
  .place-board .matrix{
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }
}

/* PC：右パネルに“ぶつからない”幅で頭打ち（左寄せ） */
@media (min-width: 901px){
  .place-board{
    /* コンテナ最大幅から、右パネル（幅 + 間隔）とガター（片側）を差し引く */
    max-width: calc(
      var(--container-max)
      - (var(--aside-w) + var(--aside-gap))   /* = 320 + 24 = 344px */
      - (var(--gutter) *3 )                        /* 左右paddingの片側ぶん。まだ広い場合は * 2 に */
    );
    width: 100%;
    margin: 12px 0 24px 0;                    /* 左寄せ（中央寄せにしない） */
    box-sizing: border-box;
  }
  /* 中身は親幅に追従（従来の 980px 上限は解除） */
  .place-board .matrix{
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }
}

/* --- チップ/ラベルの“状態優先”（見た目） --- */
/* 選択：青地＋白文字（PC/SP共通） */
.place-board .pref-btn.is-selected,
.place-board .area-btn.active{
  background: var(--c-primary);
  color: var(--c-primary-fg);
  border-color: var(--c-primary);
}
/* 未選択の hover だけ薄色に（選択済みは色を維持） */
.place-board .pref-btn:not(.is-selected):hover,
.place-board .area-btn:not(.active):hover{
  background:#b9e0fa; /* または #eaf4ff */
}