/* ============================================================
   参加校マップ（インタラクティブSVG）
   cosmicray/index.html と en/cosmicray/index.html だけが読み込む。
   共有の style.css には手を入れないので、他ページの ?v= を
   上げ直す必要はない。
   ============================================================ */

/* --- このセクションだけ 1 カラムにして、地図を全幅で見せる --- */
.map-section .map-grid{grid-template-columns:1fr;gap:clamp(28px,3.4vw,44px)}
.map-section .map-stats{
  flex-direction:row;flex-wrap:wrap;gap:clamp(28px,4vw,64px);
}
.map-section .map-stat{flex:1 1 240px}

.pm{margin-top:4px}

/* ------------------------------------------------------------ 絞り込みバー */
.pm-controls{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px dashed var(--cream-3);
}
.pm-chipset{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.pm-chipset-label{
  font-family:var(--f-hand-jp);font-size:12px;color:var(--ink-4);
  letter-spacing:.06em;margin-right:2px;
}
.pm-chip{
  font-family:var(--f-jp);font-weight:500;font-size:12.5px;line-height:1;
  color:var(--ink-2);background:var(--cream);
  border:1px solid var(--cream-3);border-radius:999px;
  padding:7px 13px;cursor:pointer;letter-spacing:.03em;
  transition:background .2s,color .2s,border-color .2s;
}
.pm-chip:hover{border-color:var(--rose);color:var(--rose-2)}
.pm-chip[aria-pressed="true"]{
  background:var(--rose-2);border-color:var(--rose-2);color:#fff;
}
.pm-chip:focus-visible,
.pm-search:focus-visible,
.pm-clear:focus-visible{outline:2px solid var(--rose-2);outline-offset:2px}
.pm-hit:focus-visible{outline:none}
.pm-group:has(.pm-hit:focus-visible) .pm-bubble{stroke:var(--ink);stroke-width:2.4}

.pm-search{
  font-family:var(--f-jp);font-size:12.5px;color:var(--ink);
  background:var(--cream);border:1px solid var(--cream-3);border-radius:999px;
  padding:7px 14px;width:190px;max-width:100%;
  transition:border-color .2s;
}
.pm-search::placeholder{color:var(--ink-4)}
.pm-search:focus{border-color:var(--rose);outline:none}

/* ------------------------------------------------------------ 本体 2 カラム */
.pm-body{
  display:grid;grid-template-columns:minmax(0,1.34fr) minmax(230px,.66fr);
  gap:clamp(16px,2vw,26px);align-items:stretch;
}
@media(max-width:900px){.pm-body{grid-template-columns:1fr}}

/* リストは地図と同じ高さに収め、中だけスクロールさせる。
   グリッドの行の高さは地図が決め、ラッパーがそれを受けて
   パネルを絶対配置で埋める（JS で高さを測らずに済む）。 */
.pm-panel-wrap{position:relative;min-height:260px}

/* ------------------------------------------------------------ 地図 */
.pm-stage{position:relative}
.pm-map{width:100%;height:auto;display:block;overflow:visible}

.pm-pref{
  fill:#E7E0CB;stroke:#CFC2A4;stroke-width:.7;stroke-linejoin:round;
  transition:fill .25s ease;
}
.pm-pref.q1{fill:#CBDCC7;stroke:#A9BEA6}
.pm-pref.q2{fill:#ADC9B0;stroke:#8FAA93}
.pm-pref.q3{fill:#8AB396;stroke:#71967D}
.pm-pref.q4{fill:#679A78;stroke:#527F63}

.pm-hit{fill:transparent;stroke:none;cursor:pointer}
.pm-hit:focus{outline:none}

/* 強調表示は最前面の専用レイヤーで描く。ホバーのたびに
   グループを appendChild で前面に出すとフォーカスが外れるため。 */
.pm-outline{
  fill:none;stroke:var(--rose-2);stroke-width:1.8;stroke-linejoin:round;
  pointer-events:none;opacity:0;transition:opacity .18s;
}
.pm-outline.is-picked{stroke-width:2.4}

/* 件数バブル */
.pm-leader{stroke:var(--rose-2);stroke-width:.9;opacity:.5;fill:none}
.pm-bubble{
  fill:var(--rose-2);stroke:var(--cream);stroke-width:1.6;
  cursor:pointer;transition:opacity .25s,fill .25s;
}
.pm-bubble-text{
  font-family:var(--f-en);font-weight:700;fill:#fff;
  text-anchor:middle;dominant-baseline:central;
  pointer-events:none;letter-spacing:0;
}
.pm-group.is-off .pm-bubble{fill:var(--ink-4);opacity:.3;stroke-width:1}
.pm-group.is-off .pm-bubble-text{display:none}
.pm-group.is-off .pm-leader{opacity:.14}
.pm-group.is-hot .pm-bubble,
.pm-group.is-picked .pm-bubble{fill:var(--rose)}

/* 沖縄インセットの枠 */
.pm-inset-frame{fill:none;stroke:var(--ink-4);stroke-width:1;stroke-dasharray:4 3;opacity:.55}
.pm-inset-label{
  font-family:var(--f-hand-jp);font-size:11px;fill:var(--ink-3);
  letter-spacing:.08em;
}

/* ------------------------------------------------------------ 国外パネル（地図の左上の余白） */
.pm-overseas{
  position:absolute;left:1%;top:2%;width:53%;
  transition:opacity .25s;
}
.pm-overseas.is-off{opacity:.3}
.pm-overseas-title{
  font-family:var(--f-hand-jp);font-size:12.5px;color:var(--ink-3);
  letter-spacing:.08em;margin-bottom:7px;
}
.pm-overseas-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pm-oversea{
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-jp);font-size:12px;color:var(--ink-2);line-height:1.35;
  transition:opacity .2s;
}
.pm-oversea.is-off{opacity:.28}
.pm-flag{flex:none;width:17px;height:17px;border-radius:50%;display:block;
  box-shadow:0 0 0 1px rgba(42,39,48,.12)}
@media(max-width:900px){
  .pm-overseas{position:static;width:auto;margin-bottom:14px}
  .pm-overseas-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}

/* ------------------------------------------------------------ ツールチップ */
.pm-tip{
  position:absolute;z-index:5;pointer-events:none;
  background:var(--ink);color:#fff;border-radius:5px;
  padding:6px 10px;font-family:var(--f-jp);font-size:12px;line-height:1.5;
  white-space:nowrap;transform:translate(-50%,-118%);
  box-shadow:0 6px 18px -8px rgba(42,39,48,.6);
}
.pm-tip b{font-weight:700}

/* ------------------------------------------------------------ 右の結果リスト */
.pm-panel{
  position:absolute;inset:0;
  border:1px solid var(--cream-3);border-radius:6px;
  background:var(--cream);overflow:hidden;
  display:flex;flex-direction:column;
  min-height:0;
}
@media(max-width:900px){
  .pm-panel-wrap{position:static;min-height:0}
  .pm-panel{position:static;max-height:440px}
}
.pm-result{
  flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--cream-3);
  font-family:var(--f-jp);font-size:12.5px;color:var(--ink-3);letter-spacing:.03em;
}
.pm-result b{
  font-family:var(--f-disp-en);font-style:italic;font-weight:700;
  font-size:21px;color:var(--ink);letter-spacing:-.01em;margin-right:2px;
}
.pm-clear{
  font-family:var(--f-jp);font-size:11.5px;color:var(--rose-2);
  background:none;border:none;border-bottom:1px solid rgba(180,84,111,.35);
  padding:0 0 1px;cursor:pointer;
}
.pm-clear[hidden]{display:none}

.pm-list{
  list-style:none;margin:0;padding:6px 0 10px;overflow-y:auto;flex:1 1 auto;
  scrollbar-width:thin;
}
.pm-head{
  display:flex;align-items:baseline;gap:7px;
  padding:9px 14px 4px;
  font-family:var(--f-hand-jp);font-size:12.5px;color:var(--rose-2);
  letter-spacing:.05em;position:sticky;top:0;
  background:linear-gradient(var(--cream) 78%,rgba(250,246,235,0));
}
.pm-head span{font-family:var(--f-jp);font-size:11px;color:var(--ink-4);font-weight:400}
.pm-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:4px 14px;font-family:var(--f-jp);font-size:12.5px;color:var(--ink-2);
  line-height:1.55;transition:background .15s,color .15s;
}
.pm-row:hover{background:var(--rose-pale);color:var(--ink)}
.pm-row .pm-type{
  flex:none;font-size:10.5px;color:var(--ink-4);letter-spacing:.04em;
}
.pm-empty{
  padding:26px 16px;text-align:center;color:var(--ink-4);
  font-family:var(--f-jp);font-size:12.5px;line-height:1.9;
}

/* ------------------------------------------------------------ 凡例 */
.pm-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--cream-3);
  font-family:var(--f-jp);font-size:11.5px;color:var(--ink-3);
}
.pm-legend-scale{display:flex;align-items:center;gap:5px}
.pm-legend-swatch{width:15px;height:11px;border-radius:2px;display:block;border:1px solid rgba(42,39,48,.09)}
.pm-legend-note{color:var(--ink-4);font-size:11px}

/* 狭い画面では地図の縮尺が小さく、バブルの数字が判読できない。
   数字は落として大きさだけで示し、正確な件数はリスト側に任せる。 */
@media(max-width:620px){
  .pm-bubble-text{display:none}
  .pm-bubble{stroke-width:1.1}
  .pm-leader{stroke-width:.7}
}

@media (prefers-reduced-motion: reduce){
  .pm-pref,.pm-bubble,.pm-outline,.pm-overseas,.pm-oversea,.pm-row,.pm-chip{transition:none}
}