@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?1mzzko');
  src: url('fonts/icomoon.eot?1mzzko#iefix') format('embedded-opentype'),
       url('fonts/icomoon.woff?1mzzko') format('woff'),
       url('fonts/icomoon.ttf?1mzzko') format('truetype'),
       url('fonts/icomoon.svg?1mzzko#icomoon') format('svg');
  font-weight: normal; font-style: normal; font-display: block;
}
.ic-font{
  font-family:'icomoon' !important; speak:never; font-style:normal;
  font-weight:normal; font-variant:normal; text-transform:none;
  line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

:root{ --bg:#F1F1F1; --text:#5A5A5A; --border:#ddd; --accent:#007aff; }
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-size:14px;}
a{color:var(--text);text-decoration:none;border-bottom:1px dotted #aaa;}
header{font-size:10px;margin:6px 10px; display:flex; align-items:center; gap:6px;}
.about-btn{ margin-left:auto; }
header a{border:0;}

/* お知らせボタン */
.about-btn{
  appearance:none; -webkit-appearance:none;
  border-radius:12px; border:1px solid #bbb;
  background:#fff; color:#888; font-size:11px; line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:3px 8px;
  flex-shrink:0; white-space:nowrap;
}
.about-btn:hover{ border-color:var(--accent); color:var(--accent); }

/* 解説モーダル */
.about-card{
  max-height:80vh; overflow-y:auto; position:relative;
  width:min(520px, 90vw);
}
.about-card h2{ font-size:16px; margin:0 0 12px; }
.about-card p{ font-size:13px; line-height:1.7; margin:0 0 10px; color:var(--text); }
.about-close{
  position:absolute; top:8px; right:12px;
  background:none; border:none; font-size:22px; color:#999;
  cursor:pointer; line-height:1; padding:0;
}
.about-close:hover{ color:#333; }

.wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;padding:0 2% 2%;}
#map{width:100%;height:70vh;border:1px solid var(--border);background:#fafafa;position:relative;}

.panel{border:1px solid var(--border);background:#fff;padding:12px;display:flex;flex-direction:column;gap:10px;border-radius:8px;}
.panel h2{font-size:14px;margin:0 0 6px;font-weight:bold;color:var(--text);}

@media (max-width:900px){
  .wrap{grid-template-columns:1fr; grid-template-rows:40vh 1fr; height:calc(100vh - 50px); overflow:hidden;}
  #map{height:100%; min-height:0;}
  #myTracksPanel{overflow-y:auto; min-height:0;}
}

/* マーカークラスタ — B2スタイル（白70% + 青枠 + 青文字）
   leaflet-div-icon のデフォルト border と MarkerCluster.Default.css の
   背景色を上書きするため !important を使用 */
.track-cluster{
  background:rgba(255,255,255,.7) !important;
  border-radius:50% !important;
  border:2px solid #007aff !important;
  box-shadow:0 2px 8px rgba(0,0,0,.1) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  filter:none !important;   /* grayscale(100%) を打ち消す */
}
.track-cluster span{
  font-size:14px !important;
  font-weight:700 !important;
  color:#007aff !important;
  line-height:1 !important;
}
/* クラスタ内部の div（MarkerCluster.Default.css が色を付ける要素） */
.track-cluster div{
  background:transparent !important;
  width:auto !important; height:auto !important;
  margin:0 !important;
}

/* 通常のマーカーはグレースケール、ただしクラスタは除外 */
.leaflet-marker-icon:not(.track-cluster){filter:grayscale(100%);}
.view-head-icon{background:none !important; border:none !important; filter:none !important;}
.leaflet-attribution-flag {display: none !important;}
.leaflet-control-attribution{
  font-size:10px !important; color:#333 !important;
  background:rgba(255,255,255,.6) !important;
}
.leaflet-control-attribution a{color:#333 !important;}

/* 位置記録コントロール（地図右上） */
.track-controls{
  position:absolute; right:10px; top:10px; z-index:1000;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:10px; box-shadow:0 2px 6px rgba(0,0,0,.06); font-size:12px;
  width:fit-content;
  transition: padding .2s, background .2s, border-color .2s, box-shadow .2s;
}
/* idle 時：ボタンだけ浮くコンパクト表示 */
.track-controls.compact{
  background:transparent; border-color:transparent;
  box-shadow:none; padding:0;
}
.track-controls h3{margin:0 0 6px; font-size:12px;}
.row{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.row button{
  padding:6px 10px; border:1px solid var(--border); background:#fff; border-radius:6px; cursor:pointer;
}
.row button.primary{border-color:var(--accent); color:#fff; background:var(--accent);}
.row button:disabled{opacity:.5; cursor:not-allowed;}
.row .time{font-variant-numeric:tabular-nums;}
.row .grow{flex:1;}
.row input[type="range"]{width:100%;}

/* 現在地・フォロー（パネルヘッダー右寄せ） */
.locate-box{
  display:flex; gap:2px; align-items:center; margin-left:auto;
}
.locate-box button{
  appearance:none; -webkit-appearance:none;
  padding:5px; border:1px solid var(--border); background:#fff; border-radius:6px;
  cursor:pointer; display:grid; place-items:center; line-height:0;
}
.locate-box button.active{ border-color:var(--accent); color:#fff; background:var(--accent); }
.locate-box button.active svg{ stroke:#fff; }
#lblFollow{
  padding:5px; border:1px solid var(--border); background:#fff; border-radius:6px;
  display:grid; place-items:center; line-height:0;
}
#lblFollow.active{ border-color:#ff9500; background:#ff9500; color:#fff; }
#lblFollow.active .ic-font{ color:#fff; }
.legend-dot{width:10px;height:10px;border-radius:50%;background:#007aff;border:2px solid #fff;box-shadow:0 0 0 2px #007aff;}

/* ログインパネル（未認証時に表示） */
#loginPanel{
position:absolute; right:10px; left:auto; top:10px; z-index:1001;
background:transparent; border:0; padding:0; box-shadow:none;
}
#loginPanel button{
font-size:12px;            /* 小さめ */
padding:4px 8px;           /* 小さめ */
border:1px solid var(--border);
background:#fff; border-radius:6px; cursor:pointer;
}
/* --- My Tracks パネル --- */
#myTracksPanel .tools { display:flex; gap:8px; align-items:center; }
#myTracksList { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.track-item { border:1px solid var(--border); border-radius:8px; padding:8px; display:grid; grid-template-columns:1fr auto; gap:6px; cursor:pointer; transition:background .15s; }
.track-item:hover { background:#f8f8f8; }
.track-item.active { border-color:var(--accent); background:#f0f7ff; }
.track-item.track-own { border-color:#a8c8e8; }
.track-item.track-own.active { border-color:#7baed4; background:#eef5fb; }
.track-title { font-weight:600; }
.badge { font-size:11px; padding:2px 6px; border-radius:999px; border:1px solid var(--border); }
.badge.pub { background:#e8f4ff; border-color:#cde6ff; }
.badge.prv { background:#f6f6f6; }
.badge.flash {
  animation: badgeFlash 1.2s ease-out;
}
@keyframes badgeFlash {
  0%   { transform:scale(1);   box-shadow:0 0 0 0 rgba(0,122,255,.6); }
  20%  { transform:scale(1.25); box-shadow:0 0 12px 4px rgba(0,122,255,.4); }
  50%  { transform:scale(1.05); box-shadow:0 0 6px 2px rgba(0,122,255,.15); }
  100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(0,122,255,0); }
}
.actions { display:flex; gap:6px; }
.actions button { padding:4px 8px; border:1px solid var(--border); background:#fff; border-radius:6px; cursor:pointer; font-size:12px; }
/* --- Tracks 行内のプレイヤー --- */
.track-item .player{ margin-top:8px; padding-top:6px; border-top:1px solid var(--border); }
.track-item .controls{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.track-item .controls button{ padding:4px 8px; border:1px solid var(--border); background:#fff; border-radius:6px; font-size:12px; cursor:pointer; }
.track-item .time{ font-size:12px; opacity:.8; min-width:120px; }
.track-item input[type="range"]{ width:100%; }
/* 記録モード選択モーダル */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; z-index:2000; }
.modal.hidden{ display:none; }
.modal-card{ background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:16px; box-shadow:0 6px 24px rgba(0,0,0,.12); width:min(420px,90vw); }

/* 統一ボタンの見た目（ライト） */
.u-btn{
  position:relative; display:grid; place-items:center;
  width:64px; height:64px; border-radius:999px; cursor:pointer;
  background:#fff; color:#111827; border:1px solid var(--border);
  box-shadow:0 8px 18px rgba(0,0,0,.06), inset 0 0 0 2px rgba(0,0,0,.02);
  transition:transform .08s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}
.u-btn:hover{ box-shadow:0 12px 24px rgba(0,0,0,.08); }
.u-btn:active{ transform:translateY(1px); }
.u-btn:disabled{ opacity:.45; filter:grayscale(.2); cursor:not-allowed; }
.u-btn .ic{ width:28px; height:28px; display:none }

/* RECの各状態 */
#recBtn.idle .ic-record{ display:block; }
#recBtn .ic-record circle{ fill:#ff3b30; }

#recBtn.recording{ border-color:#fca5a5; }
#recBtn.recording .ic-stop{ display:block; }
#recBtn .ic-stop rect{ fill:#ff3b30; }
#recBtn.recording::before{
  content:""; position:absolute; inset:-8px; border-radius:999px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,59,48,.18), rgba(255,59,48,0));
  filter:blur(8px); animation:recGlow 2.2s ease-in-out infinite;
}
@keyframes recGlow{ 0%{opacity:.3; transform:scale(.95);} 50%{opacity:.7; transform:scale(1.05);} 100%{opacity:.3; transform:scale(.95);} }

#recBtn.ready{ border-color:#9ca3af; }
#recBtn.ready .ic-check-outline{ display:block; }
#recBtn .ic-check-outline path{
  stroke:#9ca3af; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; fill:none;
}
#recBtn.ready::before{
  content:""; position:absolute; inset:-6px; border-radius:999px; pointer-events:none;
  border:2px solid #17c964; opacity:0;
  animation:readyPulse 1.8s ease-in-out infinite;
}
@keyframes readyPulse{
  0%  { transform:scale(.95); opacity:0; }
  40% { transform:scale(1.08); opacity:.6; }
  100%{ transform:scale(1.15); opacity:0; }
}

#recBtn.saving{ background:#f0fdf4; border-color:#bbf7d0; }
#recBtn .spinner{
  width:18px; height:18px; border:3px solid rgba(0,0,0,.18); border-top-color:#111827;
  border-radius:999px; animation:spin .9s linear infinite; display:none;
}
#recBtn.saving .spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

#recBtn.saved{ background:#17c964; border-color:transparent; color:#fff; }
#recBtn.saved .ic-check-solid{ display:block; }
#recBtn .ic-check-solid path{
  stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; fill:none;
}

/* Play/Pauseの見た目 */
#playBtn .ic-play{ display:block; }
#playBtn .ic-play path{ fill:#111827; }
#playBtn.playing{ background:#111827; color:#fff; }
#playBtn.playing .ic-play{ display:none; }
#playBtn.playing .ic-pause{ display:block; }
#playBtn.playing .ic-pause rect{ fill:#fff; }

/* --- 丸ボタンを厳密に真円に --- */
.u-btn,
#recBtn.u-btn,
#playBtn.u-btn{
  width:64px !important;
  height:64px !important;
  aspect-ratio: 1 / 1;
  padding:0 !important;
  border-radius:50% !important;
  overflow:visible;
}

/* --- 「移動ログ」パネルをコンパクトに --- */
#trackCtrl{
  width:fit-content;      /* 中身に合わせて最小化 */
  background-color: rgba(255, 255, 255, 0.8); /* 半透明 */
}
#trackCtrl .row{ gap:10px; }


/* パネル下部の下線が border 系なら消す（保険） */
#trackCtrl, #trackCtrl .row{
  border-bottom: none !important;
  border-top: none !important;
}
/* 「移動ログ」パネル内の時間表示は #playLen だけ残す */
#trackCtrl .time:not(#playLen) { display: none !important; }
/* #playLen の表示/非表示は JS の style.display で制御 */

/* パネル内の下線や区切りを消す */
#trackCtrl hr, #trackCtrl .divider { display: none !important; }

/* ▼ MyTracks パネルだけ独立スクロールにする */
#myTracksPanel{
  display:flex;               /* 既存 .panel の column と同じ方向 */
  flex-direction:column;
  /* 画面に収まる高さを上限に（ヘッダーや余白ぶん 100px はお好みで） */
  max-height: calc(100vh - 100px);
  overflow: hidden;           /* パネル自体は隠して… */
}

#myTracksPanel h2,
#myTracksPanel .tools{
  flex: 0 0 auto;             /* 上部は固定 */
}

#myTracksList{
  flex: 1 1 auto;             /* 残り全部をリストに割り当て */
  min-height: 0;              /* 重要：flex 子要素のはみ出し防止 */
  overflow-y: auto;           /* ← リストだけ縦スクロール */
  -webkit-overflow-scrolling: touch; /* スマホでの慣性スクロール */
}

/*右パネル自体を少し細く */
#myTracksPanel{ max-width: 95%; }

/* 見出しをスクロール時も読みやすく固定 */
#myTracksPanel h2{
  position: sticky; top: 0;
  background: inherit;        /* パネル背景と馴染ませる */
  padding-bottom: 6px; margin-bottom: 6px;
}