* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* ============================================================
   配色は1つだけ（マリン計器盤）。
   さくら・ヨルアオ・省電力のスキンは廃止した
   （kk指示 2026-09-08「機能が増えすぎたので画面の配色は標準に統一」）。

   **色を足す時は、必ずここに名前を付けてから使う。**
   個々の指定に直接 #xxxxxx を書かない。1か所で全体の見え方を変えられなくなる。
   ============================================================ */
:root {
  --c-bar-bg: #0B2740;
  --c-bar-line: rgba(255, 255, 255, .14);
  --c-bar-text: #F2F7FB;
  --c-accent: #FF6B35;          /* 記録・自船・選択中など、目を引かせたい所 */
  --c-primary: #0E63B8;         /* アクティブ・リンク・見出し */
  --c-fab-on: #3A86C8;          /* 現在地ボタンON時の塗り。白いアイコンが読める濃さにする */
  --c-fab-off: #78838D;         /* 同OFF時 */
  --c-bg: #FFFFFF;
  --c-text: #16222E;
  --c-sub: #5B6B7A;
  --c-line: #D9E2EA;
  --c-card: #F4F8FB;
  --c-card-line: #DCE7F0;
  --c-toolbar-bg: #FFFFFF;
  --c-toolbar-text: #3A4A58;
  /* 意味のある色。赤は「消す・受信できていない・警報」だけに使う */
  --c-danger: #C62828;
  --c-danger-line: #E0B4B4;
  --c-caution: #B85C00;         /* テストモード表示。赤と紛れないよう茶寄り */
  --c-now: #B7E33B;             /* 潮流タイムラインの「今」の位置 */
  --c-on-dark: #EDEDED;         /* 地図に浮く暗い帯の上に置く文字 */
  --c-ebb: #E07020;             /* 干潮。満潮は --c-primary */
  --font-num: "Chakra Petch", "Yu Gothic UI", sans-serif;
  --font-ui: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --radius: 12px;
  --radius-lg: 16px;
  --glow: none;
}

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font-ui);
  color: var(--c-text);
  /* 万一下端に隙間が出ても白帯に見えないよう、地の色はツールバーに合わせる */
  background: var(--c-toolbar-bg);
  display: flex; flex-direction: column;
  /* iPhoneをホーム画面から全画面で開くと、高さ指定(100%/100dvh)では画面を埋めきれず
     下端に大きな余白が出る（kk実機で確認 2026-07-23）。
     高さの計算に頼らず画面に直接貼り付けて確実に埋める */
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

/* ===== 速度（地図に浮かせる） =====
   上部の計器バーは廃止した（kk要望 2026-08-07・地図を広く使うため）。
   Google マップ/Waze と同じで、常時出す数値は1つだけにして隅へ逃がす。 */
#spdPill {
  position: absolute; z-index: 1100;
  left: 8px; top: calc(8px + env(safe-area-inset-top));
  display: flex; align-items: baseline; gap: 4px;
  padding: 6px 12px 7px; border: none; border-radius: 10px;
  background: rgba(11,39,64,.82); color: #FFFFFF;
  box-shadow: 0 1px 5px rgba(0,0,0,.35);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#spdPill b {
  font-family: var(--font-num);
  font-size: 30px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
#spdPill i { font-style: normal; font-size: 12px; opacity: .8; }
#spdPill:active { opacity: .75; }

/* 速度の内訳（検証用）。既定では出さないので、地図の邪魔にならない範囲で小さく置く。
   速度ピルの実高さ(約49px)の下に固定する */
#spdDebug {
  position: absolute; z-index: 1100;
  left: 8px; top: calc(58px + env(safe-area-inset-top));
  max-width: calc(100vw - 16px);
  padding: 3px 7px; border-radius: 6px;
  background: rgba(11,39,64,.82); color: #FFFFFF;
  font-size: 11px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#spdDebug[hidden] { display: none; }

/* 地図の左上コントロール（ズーム）は速度ピルの下へ。上端の安全域も避ける */
.leaflet-top { padding-top: env(safe-area-inset-top); }
.leaflet-top.leaflet-left { padding-top: calc(58px + env(safe-area-inset-top)); }
/* 内訳を出している間はズームボタンをその分だけ下げる（重なると押せなくなる） */
body.spd-debug .leaflet-top.leaflet-left { padding-top: calc(84px + env(safe-area-inset-top)); }

/* GPSの状態。正常時は出さない（hidden）。異常時だけ上部に細い帯で出す */
#gpsStat {
  position: absolute; z-index: 1150;
  left: 8px; right: 8px; top: calc(56px + env(safe-area-inset-top));
  padding: 5px 9px; border-radius: 8px;
  background: rgba(150,40,20,.9); color: #FFFFFF;
  font-size: 11px; white-space: pre-line; text-align: center;
}

/* 進行方向のリング。現在地ボタンを囲むだけで、方位の数値は出さない */
#hdgRing {
  position: absolute; z-index: 1145; pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.9));
  right: 4px; bottom: calc(84px + env(safe-area-inset-bottom));
  width: 72px; height: 72px; color: var(--c-primary);
}
body.cur-open #hdgRing { bottom: calc(144px + env(safe-area-inset-bottom)); }
#hdgMark { transform-origin: 36px 36px; transition: transform .25s linear; fill: var(--c-accent); }

/* GPSを受信できていない時の小さな表示。以前ここにあった実行/テストのモード名は消した
   （赤い印だけでは何のエラーか分からない、というkk指摘 2026-09-03）。
   文字のみ・枠なしで、現在地ボタンの真上に置く */
#gpsBadge, #testBadge {
  position: absolute; z-index: 1100; cursor: pointer;
  /* 右下はGPSボタンが占めるので、その上に逃がす */
  right: 12px;
  font-size: 12px; font-weight: bold; white-space: nowrap;
  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 2px #ffffff;
}
/* 幅を真下のGPSボタン（56px＋白枠2px×2＝60px）に合わせて中央に置く。
   7pxまで小さくしたら見えないとのkk指摘（2026-09-04）。文字だけ小さくするのではなく、
   丸と同じ幅に収まる大きさにする。文言は60pxに収まる長さのものだけを使う */
#gpsBadge {
  bottom: calc(156px + env(safe-area-inset-bottom)); color: var(--c-danger);
  width: 60px; text-align: center; font-size: 10.5px;
}
/* テストモード中だけ出す。意図せずテストに入ったまま気付かない事故を防ぐための表示
   （kk指示 2026-09-03「勝手に動いてたら気持ち悪い」）。押すとメニューが開く。
   GPSエラーと同時に出ても重ならないよう、1段上に置く */
#testBadge { bottom: calc(176px + env(safe-area-inset-bottom)); color: var(--c-caution); }
/* 潮流の帯が出ている間は現在地ボタンごと上へ逃げるので、文字も同じだけ上げる */
body.cur-open #gpsBadge { bottom: calc(216px + env(safe-area-inset-bottom)); }
body.cur-open #testBadge { bottom: calc(236px + env(safe-area-inset-bottom)); }

/* ===== 地図 ===== */
#map { flex: 1 1 auto; width: 100%; background: #c8e0f0; }

/* 船上のスマホ操作向けにズームボタンを標準の倍サイズにする（タッチ判定含む） */
.leaflet-control-zoom a,
.leaflet-touch .leaflet-control-zoom a {
  width: 60px; height: 60px; line-height: 60px; font-size: 30px;
}

/* 縮尺バー（Googleマップ風に大きく・読みやすく。地図の上に置くので固定色） */
.leaflet-control-scale { margin-bottom: 36px !important; margin-left: 10px !important; }
.leaflet-control-scale-line {
  font-size: 13px; font-weight: bold; color: #16222E;
  background: rgba(255, 255, 255, .75);
  border: 2px solid #16222E; border-top: none;
  padding: 2px 6px 1px; line-height: 1.3;
  text-shadow: 0 0 2px #ffffff;
  box-sizing: content-box;
}
.boat-icon { pointer-events: none; }
.boat-icon svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.boat-icon polygon { fill: var(--c-accent); }
.catch-icon { font-size: 22px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.anchor-icon { font-size: 24px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.depth-label {
  font-size: 11px; font-weight: bold; color: #0b3d66; text-align: center;
  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff;
  pointer-events: none; white-space: nowrap;
}
.depth-label-enc { font-size: 12px; color: #0D3A5C; }
.sediment-label {
  /* kk要望(2026-07-19): 底質は水深数字(12px)の2/3の大きさに抑える */
  color: #17212b; font-size: 8px; font-weight: 800; text-align: center;
  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 2px #ffffff;
  white-space: nowrap;
}
.structure-label {
  color: #263440; font-size: 11px; font-weight: 800; font-style: italic; text-align: center;
  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 2px #ffffff;
  white-space: nowrap;
}
.track-start-icon {
  color: var(--c-accent); font-size: 16px; line-height: 18px; text-align: center;
  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 2px #ffffff;
  pointer-events: none;
}

/* ===== 下部ツールバー ===== */
#toolbar {
  flex: 0 0 auto; display: flex; z-index: 1200;
  background: var(--c-toolbar-bg); border-top: 1px solid var(--c-line);
  /* ボタンの下余白とiPhoneのホームバー領域が足し算にならないよう、大きい方だけを使う */
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.tb {
  flex: 1; border: none; background: transparent; color: var(--c-toolbar-text);
  font-family: var(--font-ui);
  font-size: 10px; padding: 7px 0 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  /* ボタンを増やしても溢れないように。flexの既定min-widthはautoで文字幅に負ける */
  min-width: 0; white-space: nowrap;
}
/* 狭い端末(S22級)で6個並べても収まるように少しだけ詰める */
@media (max-width: 430px) {
  .tb { font-size: 9px; gap: 2px; }
  .tb svg.ic { width: 20px; height: 20px; }
}
.tb svg.ic { width: 22px; height: 22px; display: block; }
/* .tb の display:flex が hidden属性に勝ってしまう既知パターンの防御（.panelで前例あり） */
.tb[hidden] { display: none; }
/* 上の .tb svg.ic{display:block} が hidden 属性に勝つので明示的に消す。
   潮流／風のアイコン差し替えで使う（.tb[hidden] と同じ既知パターン） */
.tb svg.ic[hidden] { display: none; }
/* 潮流ボタンのラベルは**今のモード名だけ**を出す（2026-09-02に変更）。
   旧「潮流・風」の並記方式は、海流を足して3段になると「潮流・海流・風」で
   下部ボタンの幅に収まらない。文字はJS(syncCurrentBtn)が書き換える。
   OFFの時は薄く、ONの時だけ濃く出すのは旧方式と同じ見え方に合わせたもの */
#btnCurrentLabel { opacity: .45; }
.tb.active #btnCurrentLabel { opacity: 1; font-weight: 700; }
.tb:active { opacity: .55; }
.tb.on { color: var(--c-primary); font-weight: bold; }
/* 流し始めの一時マーク（保存されるピンと区別が付くよう破線の輪） */
.drift-start-icon { background: none; border: none; }
.drift-start-icon svg { display: block; }
#btnDriftStart.on { color: #E65100; font-weight: bold; }

/* ===== 現在地に追従（地図右下の丸ボタン。ナビアプリの慣習に合わせた配置） ===== */
.fab-gps {
  position: absolute; z-index: 1150;
  right: 12px; bottom: calc(92px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  /* 【ONとOFFで白と地色を入れ替える】(kk指示 2026-08-26・3回目)
     ①アイコンの線の色だけ変える → 28pxの線画の色差は明るい海図の上では判別できなかった
     ②OFF=白地 / ON=濃い青 → 濃い青が画面から浮いて「すごい違和感」と却下
     ③OFF=グレー塗り / ON=やわらかい青塗り → 青がまだ強い
     いまは **OFF=グレー地に白い十字 / ON=白地に青い十字**。
     地と十字が同時に入れ替わるので、色相だけの差より遠目で分かりやすい。
     十字と地の明暗比はどちらの状態でも3.0以上を確保している。 */
  background: var(--c-fab-off); color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, .9);   /* 塗りが地図に沈まないよう白で縁取る */
  box-shadow: 0 2px 9px rgba(0, 0, 0, .4);
}
.fab-gps svg { width: 28px; height: 28px; display: block; }
/* 【ONとOFFを塗りで分ける】(kk指摘 2026-08-26「スマホだと青とグレーの区別がつかない」)
   以前はアイコンの色だけを変えていた。28pxの線画の色差は、明るい海図の上に
   小さな画面で置かれると判別できない。面で塗り分ければ遠目でも一目で分かる。
   OFFは白地に灰色のまま（地図の上で浮くのはONだけでよい）。 */
.fab-gps { transition: background .15s; }
.fab-gps svg { stroke-width: 2.4; }        /* 白抜きは細く見えるので少し太らせる */
.fab-gps.on { background: #FFFFFF; color: var(--c-fab-on); }
.fab-gps:active { transform: scale(.94); }
/* 【GPSが受信できていない印】(kk指示 2026-09-03)
   パソコンやGPSの無いブラウザではエラーが出るのが当たり前なので、赤い帯は4秒で消し、
   このボタンの縁と右上の点だけを赤くする。分かるが地図の邪魔にはならない大きさにする。
   押せば理由がもう一度帯に出る（app.jsのbtnFollowのクリック） */
/* 縁まで赤くすると強すぎたので点だけにした（文字は上の #gpsBadge が出す） */
.fab-gps.gps-err::after {
  content: ""; position: absolute; top: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #E53935; border: 2px solid #FFFFFF;
}
/* ===== アンカー警報バナー（安全にかかわるので赤は動かさない） ===== */
#anchorBanner {
  position: absolute; top: calc(56px + env(safe-area-inset-top)); left: 8px; right: 8px; z-index: 1300;
  background: var(--c-danger); color: #ffffff; font-weight: bold; font-size: 14px;
  padding: 10px 12px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,.5);
  animation: alarmflash .8s infinite;
}
@keyframes alarmflash { 50% { background: var(--c-accent); } }
.banner-btns { display: flex; gap: 8px; margin-top: 8px; }
.banner-btns button {
  flex: 1; padding: 8px; border: none; border-radius: 8px;
  background: #ffffff; color: var(--c-danger); font-weight: bold; font-size: 14px;
}

/* ===== ポイントの色見本 =====
   濡れた手でも押せるよう、指1本ぶんの当たり判定を確保する */
.color-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.color-swatches .swatch {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid rgba(0, 0, 0, .25);
}
.color-swatches .swatch.on {
  border-color: var(--c-text);
  box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-text);
}
/* SVGのピンをそのまま出す（divIconの既定の枠・背景を消す） */
.point-icon { background: none; border: none; }
/* 流向の矢印。枠が広いので、地図のタップ（水深表示・長押し登録）を奪わないよう
   pointer-events を必ず切る */
.drift-icon { background: none; border: none; pointer-events: none; }
.drift-icon svg { overflow: visible; pointer-events: none; }

/* ドテラ流しインジゲータ（左上・ズーム(±)の真下）。
   航跡と重なって読めない問題への対応なので、地図に重ねず枠付きで独立させる。
   幅はズームボタン(60px)に揃える（kk指示 2026-07-23） */
.drift-gauge {
  width: 64px; background: #ffffff; border-radius: 4px;
  padding: 3px 0 4px; text-align: center; cursor: default;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
.drift-gauge svg { display: block; width: 44px; height: 44px; margin: 0 auto; }
.drift-gauge #dgNeedle { transform-origin: 20px 20px; transition: transform .3s linear; }
.drift-gauge polygon { fill: #00796B; }
/* 方位の数値を外した分、ktを枠内で大きく見せる */
.drift-gauge .dg-kt {
  font-family: var(--font-num); font-weight: 700; color: #00695C;
  line-height: 1.1; font-variant-numeric: tabular-nums;
  font-size: 17px; white-space: nowrap;
}
/* 矢印が出るまでの「あと何m」。桁が多いので枠(64px)に収まるよう小さくする */
.drift-gauge .dg-kt.measuring { font-size: 12px; opacity: .7; }
/* 一覧でも色が分かるように先頭へ丸を置く */
/* 潮が「自動で入れたとりあえずの値」であることを小さく示す。
   手で直したら消える（kk指示 2026-08-23） */
.tide-auto {
  display: inline-block; margin-left: 5px; padding: 0 4px;
  border: 1px solid currentColor; border-radius: 3px;
  font-size: 10px; line-height: 1.4; opacity: .55; vertical-align: 1px;
}
.li-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  margin-right: 6px; vertical-align: baseline;
  border: 1px solid rgba(0, 0, 0, .3);
}

/* ===== 3本指タップ登録の通知 =====
   釣り中に画面を注視しなくても分かるよう大きめに。
   キャンセルは指が濡れていても押せるよう十分な当たり判定を取る */
#quickToast {
  position: absolute; left: 8px; right: 8px; z-index: 1350;
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 16px;
  background: var(--c-bar-bg); color: var(--c-bar-text);
  border-radius: var(--radius-lg); box-shadow: 0 3px 14px rgba(0,0,0,.4);
}
#quickToastMsg { flex: 1; font-size: 16px; font-weight: bold; }
#btnQuickCancel {
  flex: 0 0 auto; min-width: 110px; min-height: 48px;
  padding: 10px 18px; border: none; border-radius: 12px;
  background: #ffffff; color: var(--c-danger); font-size: 16px; font-weight: bold;
  cursor: pointer;
}

/* ===== パネル（下からのシート） ===== */
.panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1400;
  max-height: 78%; display: flex; flex-direction: column;
  background: var(--c-bg); color: var(--c-text);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--c-line); flex: 0 0 auto;
}
.panel-head h2 { margin: 0; font-size: 16px; }
.panel-head .close {
  border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-text);
  border-radius: 50%; width: 32px; height: 32px; font-size: 15px; cursor: pointer;
}
.panel-body { overflow-y: auto; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); }

.row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.row label { font-size: 13px; }
.infobox {
  background: var(--c-card); border: 1px solid var(--c-card-line);
  border-radius: var(--radius);
  padding: 10px; margin-bottom: 10px; font-size: 13px; color: var(--c-text);
}
.infobox h4 { margin: 0 0 6px; font-size: 13px; color: var(--c-primary); }
.tide-svg { width: 100%; height: auto; display: block; border-radius: 6px; }
/* 潮汐カーブの色。SVGはJSで組み立てるが、色はここに集める（js/tide.js に #xxxxxx を書かない） */
.tide-svg .t-bg { fill: var(--c-bg); }
.tide-svg .t-curve { stroke: var(--c-primary); }
.tide-svg .t-flood { fill: var(--c-primary); }      /* 満潮 */
.tide-svg .t-ebb { fill: var(--c-ebb); }            /* 干潮 */
.tide-svg .t-grid { stroke: var(--c-line); }
.tide-svg .t-tick { fill: var(--c-sub); }
.tide-svg .t-now { stroke: var(--c-danger); }       /* 今の時刻 */
.tide-times { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.tide-times b { color: var(--c-primary); }
.wx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; font-size: 13px; }
.wx-grid b { font-size: 16px; }
/* 3時間ごとの表。船に乗る前に見るのは風なので、風の列だけ太字にする */
.wx-hours {
  display: grid; grid-template-columns: 44px 1fr 74px 44px 52px;
  gap: 2px 6px; margin-top: 8px; font-size: 12px; align-items: center;
}
.wx-hours > :nth-child(-n+5) {
  font-weight: 700; color: var(--c-muted);
  border-bottom: 1px solid var(--c-line); padding-bottom: 3px;
}
.wx-hours b { font-size: 13px; color: var(--c-primary); }

/* 日を選ぶ帯（潮汐・天気パネル）。潮流のタイムラインと同じ「中央＝選択中」の作り */
#tideDayBar { position: relative; margin: 8px 0 10px; }
#tideDayScroll {
  overflow-x: auto; overflow-y: hidden; touch-action: pan-x;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; cursor: grab;
}
#tideDayScroll::-webkit-scrollbar { display: none; }
#tideDayScroll.dragging { cursor: grabbing; }
#tideDayTrack { display: flex; position: relative; }
.day-pad { flex: 0 0 auto; height: 44px; }
/* 白地に揃える。潮流の帯は地図の上に浮くので暗くしてあるが、この帯はパネルの中にあり、
   まわりが白なのに帯だけ黒いのは気持ち悪い（kk指摘 2026-09-08） */
.day-cell {
  flex: 0 0 auto; width: 72px; height: 44px; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--c-card); color: var(--c-text);
  border: 1px solid var(--c-card-line); border-left: none;
  font: 600 12px/1.25 var(--font-ui); cursor: pointer;
}
.day-cell:first-of-type { border-left: 1px solid var(--c-card-line); }
/* 今日だけ色を変える（kk指示 2026-09-08）。土日の文字色はそのまま残す */
.day-cell.today { background: #E3F0FB; }
.day-cell.today small { color: var(--c-primary); font-weight: 700; }
.day-cell .wd0 { color: #C62828; }   /* 日曜 */
.day-cell .wd6 { color: #1565C0; }   /* 土曜 */
.day-cell small { font-size: 10px; color: var(--c-sub); }
/* 選んでいる日。タップでも選べるので、中央の枠だけでなくセル自身にも印を付ける */
.day-cell.sel { box-shadow: inset 0 0 0 2px var(--c-accent); }
/* 中央の枠＝選択中の日 */
.day-mark {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 72px;
  margin-left: -36px; pointer-events: none;
  border: 2px solid var(--c-accent); border-radius: 4px;
}
#tideTodayChip {
  position: absolute; right: 0; top: -26px;
  font: 700 11px/1 var(--font-ui); padding: 4px 8px; border-radius: 10px;
  border: 1px solid var(--c-line); background: #fff; cursor: pointer;
}

/* 【広い画面（パソコン）】(kk指示 2026-09-08「PCでの表示がデカすぎて見づらい」)
   このアプリはスマホの縦画面で使うのが前提だが、パソコンでも壊れずに使える形にする。
   パネルは画面いっぱいに伸ばさず、スマホと同じくらいの幅で中央に置く。
   left/right を 0 にしたまま max-width と margin:auto で中央に寄せる
   （transform を使うと他の重なり順の指定に影響するので使わない） */
@media (min-width: 720px) {
  .panel { max-width: 560px; margin: 0 auto; border-radius: var(--radius-lg); bottom: 12px; }
  /* 潮汐カーブは横に伸ばすと文字だけが巨大になって読みにくい。実寸で置く */
  .tide-svg { max-width: 420px; margin: 0 auto; }
  .wx-hours { max-width: 420px; }
}

/* ===== メニュー ===== */
.menu-sec { border-bottom: 1px solid var(--c-line); padding: 10px 0; }
.menu-sec h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; color: var(--c-primary);
}
.menu-sec details summary {
  margin: 0; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; color: var(--c-primary);
  cursor: pointer; list-style: none;
}
.menu-sec details summary::-webkit-details-marker { display: none; }
.menu-sec details summary::before { content: "▶ "; font-size: 9px; }
.menu-sec details[open] summary::before { content: "▼ "; }
.menu-sec details[open] summary { margin-bottom: 8px; }
.radio, .check { display: block; padding: 7px 2px; font-size: 14px; color: var(--c-text); }
.note { font-size: 12px; color: var(--c-sub); margin: 6px 0; }
button.wide, .wide-link {
  display: block; width: 100%; margin: 6px 0; padding: 11px;
  border: 1px solid var(--c-line); border-radius: var(--radius); text-align: center;
  background: var(--c-bg); color: var(--c-primary); font-size: 14px; font-weight: bold;
  cursor: pointer; text-decoration: none; font-family: var(--font-ui);
}
button.wide:active, .wide-link:active { opacity: .55; }
button.small {
  padding: 6px 12px; border: 1px solid var(--c-line); border-radius: 8px;
  background: var(--c-bg); color: var(--c-primary); font-size: 13px; cursor: pointer;
}

.legend-grid { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text); }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); flex: 0 0 auto; }

.list { font-size: 13px; }
.list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid var(--c-line);
}
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: bold; color: var(--c-text); }
.list-item .li-sub { font-size: 11px; color: var(--c-sub); }
.list-item button {
  padding: 6px 10px; border: 1px solid var(--c-line); border-radius: 8px;
  background: var(--c-bg); color: var(--c-text); font-size: 12px; cursor: pointer; white-space: nowrap;
}
.list-item button.danger { color: var(--c-danger); border-color: var(--c-danger-line); }
/* 選択削除の操作列。船上で濡れた手でも押せるよう、指1本ぶんの高さを確保する */
.list-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 10px; }
.list-tools button {
  padding: 9px 12px; border: 1px solid var(--c-line); border-radius: 8px;
  background: var(--c-bg); color: var(--c-text); font-size: 13px; cursor: pointer;
}
.list-tools button.danger { color: var(--c-danger); border-color: var(--c-danger-line); font-weight: bold; }
.list-tools button:disabled { opacity: .45; }
.li-pick { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--c-primary); }
/* 一覧の行をタップで開く（kk指摘 2026-08-27「見れるだけで詳細も削除も出来ない」）。
   地図まで飛ばなくても、一覧の中で中身を確かめて始末できるようにする */
.list-item { cursor: pointer; }
.li-caret { flex: 0 0 auto; width: 14px; font-size: 10px; color: var(--c-sub); }
.list-item.open { border-bottom: none; }
.li-detail {
  padding: 2px 4px 12px 22px; border-bottom: 1px solid var(--c-line);
  background: var(--c-card);
}
.li-detail small { color: var(--c-sub); line-height: 1.7; }
.li-memo { margin-bottom: 4px; color: var(--c-text); font-size: 13px; }
.li-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.li-actions button {
  padding: 9px 12px; border: 1px solid var(--c-line); border-radius: 8px;
  background: var(--c-bg); color: var(--c-text); font-size: 13px; cursor: pointer;
}
.li-actions button.danger { color: var(--c-danger); border-color: var(--c-danger-line); }
.li-detail .color-swatches { margin-top: 2px; }

/* ===== ダイアログ（入力欄は白背景＋濃色文字。白文字白背景の事故を防ぐ絶対ルール） ===== */
dialog {
  border: none; border-radius: 14px; padding: 16px;
  width: min(92vw, 400px); box-shadow: 0 4px 24px rgba(0,0,0,.35);
  background: #ffffff; color: var(--c-text);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { margin: 0 0 8px; font-size: 17px; }
dialog .note { color: #555555; }
dialog label { display: block; font-size: 13px; margin: 10px 0; color: var(--c-text); }
dialog input[type="text"], dialog input[type="number"], dialog textarea, dialog select,
#panelTide select {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  font-size: 16px; border: 1px solid var(--c-line); border-radius: 8px;
  background: #ffffff; color: var(--c-text);
}
#panelTide select { display: inline-block; width: auto; padding: 8px; }
.row2 { display: flex; gap: 10px; }
.row2 label { flex: 1; }
.dlg-btns { display: flex; gap: 10px; margin-top: 14px; }
.dlg-btns button {
  flex: 1; padding: 12px; border-radius: 10px; font-size: 15px; cursor: pointer;
  border: 1px solid var(--c-line); background: #ffffff; color: var(--c-text);
}
.dlg-btns button.primary { background: var(--c-primary); border-color: var(--c-primary); color: #ffffff; font-weight: bold; }
.share-group { margin: 0 0 8px; font-size: 16px; font-weight: bold; color: var(--c-text); }
.share-members { border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; font-size: 14px; }
.share-member { padding: 9px 10px; border-bottom: 1px solid var(--c-line); color: var(--c-text); }
.share-member:last-child { border-bottom: none; }
.share-member small { color: var(--c-sub); }
.share-code { margin: 10px 0 4px; text-align: center; font-family: var(--font-ui); font-size: clamp(34px, 12vw, 48px); font-weight: bold; letter-spacing: .12em; color: var(--c-text); }

/* メニュー内に常時出す招待コード。船上で読み上げる前提なので大きめに */
.share-code-inline {
  margin: 4px 0 2px; padding: 6px 0; text-align: center;
  background: #ffffff; border: 1px solid var(--c-line); border-radius: 8px;
  font-family: var(--font-ui); font-size: clamp(26px, 9vw, 34px);
  font-weight: bold; letter-spacing: .12em; color: var(--c-text);
}

/* 仲間から届いたものの一覧・送信待ちの注記 */
.share-list { font-size: 14px; }
.share-waiting { margin: 0 0 6px; padding: 7px 9px; border-radius: 8px; background: rgba(255,107,53,.14); color: var(--c-text); font-size: 13px; }
.share-target { margin: 0 0 10px; font-weight: bold; color: var(--c-text); }
/* 何が送られるかの控え。ダイアログ内なので白背景＋濃色文字を明示する（絶対ルール） */
.share-preview { margin: 10px 0 0; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: #ffffff; color: var(--c-text); font-size: 13px; line-height: 1.6; }

/* 仲間のマーカー。自分のピンは塗りつぶし、仲間は白抜きにして遠目でも見分ける */
.shared-icon { background: none; border: none; }
.shared-icon .shared-fish { font-size: 20px; line-height: 1; text-align: center; opacity: .95; }
/* 誰の投稿かは船の上で最も重要な情報なので、色や形ではなく名前で出す */
.share-chip {
  margin: 1px auto 0; padding: 1px 5px; width: fit-content; max-width: 46px;
  border-radius: 6px; background: #ffffff; color: var(--c-text);
  font-size: 10px; line-height: 1.4; white-space: nowrap; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* Leaflet 微調整 */
.leaflet-control-attribution { font-size: 9px; }
.leaflet-popup-content { font-size: 13px; color: var(--c-text); }
.popup-btns { display: flex; gap: 6px; margin-top: 6px; }
.popup-btns button {
  padding: 5px 9px; font-size: 12px; border: 1px solid var(--c-line);
  border-radius: 6px; background: #ffffff; color: var(--c-text); cursor: pointer;
}

/* ===== 起動スプラッシュ（安全注意。ここだけ固定のダーク） ===== */
#splash {
  position: fixed; inset: 0; z-index: 3000;
  background: #0b2740; color: #f2f7fb;
  display: flex; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
#splash.fade-out { animation: splashOut .4s ease forwards; }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }
.splash-inner {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.splash-brand { text-align: center; opacity: 0; animation: splashBrandIn .7s ease .1s forwards; }
.splash-wave { width: 96px; height: 24px; color: #23d5f0; display: block; margin: 0 auto 6px; }
.splash-wave path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: splashWave 1.1s ease .2s forwards; }
@keyframes splashWave { to { stroke-dashoffset: 0; } }
.splash-brand h1 {
  margin: 0; font-family: var(--font-num); font-size: 40px; font-weight: 700;
  letter-spacing: .04em; text-shadow: 0 0 18px rgba(35,213,240,.5);
}
.splash-sub { margin: 4px 0 0; font-size: 13px; opacity: .8; }
@keyframes splashBrandIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 注意は1枚だけ（2枚の切り替えは廃止。kk指示 2026-09-03） */
.splash-notices { display: grid; width: 100%; }
.splash-msg {
  grid-area: 1 / 1;
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 16px 18px;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .55s ease, transform .55s ease;
}
.splash-msg.show { opacity: 1; transform: none; }
.splash-icon { font-size: 26px; line-height: 1.3; flex: 0 0 auto; }
.splash-msg p { margin: 0; font-size: 15px; line-height: 1.7; }
/* 特に伝えたい一文（軌跡はバックグラウンドでは記録できないこと）を一回り大きく */
.splash-em { display: inline-block; font-size: 1.3em; line-height: 1.5; margin-bottom: 5px; }
#splashNotice { border-color: rgba(255,176,32,.5); }
#splashNotice .splash-icon { filter: drop-shadow(0 0 6px rgba(255,176,32,.5)); }

.splash-skip {
  font-size: 12px; opacity: 0; margin-top: 4px;
  animation: splashSkipIn .5s ease 2s forwards;
}
@keyframes splashSkipIn { to { opacity: .55; } }

/* 起動画面の版表示。不具合報告のスクショだけで、修正が届いているか判別するため。
   普段の邪魔にならないよう小さく暗く出す */
.splash-ver {
  position: absolute; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom));
  text-align: center; font-size: 10px; color: rgba(242, 247, 251, .38);
  letter-spacing: .04em;
}

/* 不具合報告ダイアログ。何が送られるかを見せる欄（ダイアログは白背景・濃色文字を維持） */
#reportInfo {
  margin: 4px 0 0; padding: 8px; max-height: 150px; overflow: auto;
  background: #F4F8FB; color: #16222E; border: 1px solid #DCE7F0; border-radius: 8px;
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}

/* ===== 潮流レイヤー（js/current.js + app.jsの潮流ブロック） ===== */
.cur-arrow { pointer-events: auto; }
.cur-arrow svg { display: block; transform-origin: 32px 32px; }
/* 数値は白い縁取りだけでは読めなかった（kk指摘 2026-08-30「風の風速が見づらい」）。
   下に矢印・色の面・海図線が重なるので、地色を敷いて確実に読めるようにする。
   外側の枠(40x15px)はマーカーの位置決め用なので、地は中の span だけに付ける
   ＝数字の幅ぶんしか塗らず、桁数が変わっても余白が出ない */
.cur-label {
  pointer-events: none;
  white-space: nowrap;
}
.cur-label span {
  display: inline-block;
  font: 800 13px/16px system-ui, sans-serif;
  color: #0B2740;
  background: rgba(255, 255, 255, .85);
  border-radius: 8px;
  padding: 0 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
/* 粒子アニメ（面＝推定）のキャンバス。位置はJS(L.DomUtil.setPosition)が管理 */
.cur-canvas { position: absolute; top: 0; left: 0; pointer-events: none; }
/* 時刻タイムライン（Windy式）。帯は固定高のflexアイテムで、
   伸びる分だけ上へ被せる（スワイプのたびに地図をリサイズしないため）。
   配色はWindyに倣い、地色を暗く固定して日を濃淡グレーの交互で分ける。
   地色を固定した暗い帯なので、地図の明るさに関係なく線や文字が読める */
#curTimeline {
  flex: 0 0 auto; height: 60px; position: relative; z-index: 1250;
  /* ドラッグで時刻を送る帯なので、文字が選択されないようにする（kk指摘 2026-08-07） */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.cur-tl-body {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60px; overflow: hidden;
  background: #2b2b2b; border-top: 1px solid rgba(255,255,255,.14);
  transition: height .14s ease;
}
#curTimeline.expanded .cur-tl-body { height: 101px; }
.cur-tl-top {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 26px;
}
/* 参照中の時刻。Windyの琥珀色のふきだしに倣う */
#curTlReadout {
  background: var(--c-accent); color: #201400; border-radius: 4px;
  font: 700 12px/1 var(--font-ui); padding: 4px 9px;
  /* 風の予報の案内が長い時は時刻側を削る。単位が画面外に押し出されないように */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#curNowChip {
  border: 1px solid rgba(255,255,255,.5); background: transparent;
  color: var(--c-on-dark); border-radius: 999px;
  font: 600 10px/1 var(--font-ui); padding: 3px 8px; cursor: pointer;
}
/* 単位。数字ごとに付けると狭い画面で潰れるので、帯のここ1か所だけに出す */
#curUnitChip {
  border: 1px solid rgba(255,255,255,.5); background: transparent;
  color: var(--c-on-dark); border-radius: 999px;
  font: 600 10px/1 var(--font-ui); padding: 3px 8px; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
}
#curUnitChip:disabled { opacity: .6; cursor: default; }
/* 横スクロールが時刻送り。縦スクロールに奪われないよう pan-x に限定する */
#curTlScroll {
  overflow-x: auto; overflow-y: hidden; touch-action: pan-x;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#curTlScroll::-webkit-scrollbar { display: none; }
/* パソコンでは掴んで引っ張れることを形で見せる（実際の移動はJS側） */
#curTlScroll { cursor: grab; }
#curTlScroll.dragging { cursor: grabbing; }
#curTlTrack { display: flex; position: relative; }
/* 濃い灰と淡い灰の交互で日を分ける */
.cur-tl-day {
  position: relative; flex: 0 0 auto; height: 34px;
  background: #333; color: #E6E6E6;
  border-left: 1px solid rgba(255,255,255,.22);
}
.cur-tl-day.alt { background: #454545; }
#curTimeline.expanded .cur-tl-day { height: 75px; }
.cur-tl-day > b { position: absolute; left: 6px; top: 4px; font: 700 11px/1 var(--font-ui); color: #FFF; }
.cur-tl-day > b.wd0 { color: #FF9B95; }   /* 日曜 */
.cur-tl-day > b.wd6 { color: #94C4FF; }   /* 土曜 */
/* 時刻目盛はスワイプ中だけ出す（触れていない時はシンプルに保つ・kk要望） */
.cur-tl-hours { position: absolute; left: 0; right: 0; top: 29px; height: 0; opacity: 0;
  transition: opacity .14s ease; }
#curTimeline.expanded .cur-tl-hours { height: auto; opacity: 1; }
.cur-tl-hours span {
  position: absolute; transform: translateX(-50%);
  font: 600 10px/1 var(--font-ui); color: #BDBDBD;
  border-left: 1px solid rgba(255,255,255,.28); padding-left: 3px;
}
/* 「今」の位置。送った先から現在地を見失わないための目印 */
.cur-tl-nowline {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--c-now); pointer-events: none;
}
/* 中央の縦線＝参照中の時刻 */
.cur-tl-head {
  position: absolute; left: 50%; top: 26px; bottom: 0; width: 2px;
  margin-left: -1px; background: var(--c-accent); pointer-events: none;
}
/* 帯が出ている間は現在地ボタンをその上へ逃がす（縮尺は地図内なので自動で上がる） */
body.cur-open .fab-gps { bottom: calc(152px + env(safe-area-inset-bottom)); }
.tb.active { color: var(--c-accent); }
/* AIS（他船）。divIcon の既定の白背景・枠を消してSVGだけ見せる。
   回転の軸はアイコンの中心(20x20の中心)。潮流の矢印(64x64)と値が違うので使い回さない */
.ais-icon { background: none; border: none; pointer-events: auto; }
.ais-icon svg { display: block; transform-origin: 10px 10px; }
/* 船名。潮流の数値(.cur-label)と同じ考え方で、下に海図線や色の面が来ても読めるよう
   文字の幅ぶんだけ地色を敷く。小型船にしか出さないので密度は上がらない */
.ais-label { pointer-events: none; white-space: nowrap; }
.ais-label span {
  display: inline-block;
  font: 700 11px/14px system-ui, sans-serif;
  color: #5A2400;
  background: rgba(255, 255, 255, .82);
  border-radius: 7px;
  padding: 0 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.cur-pop .ais-kind { font-size: 12px; opacity: .8; margin-top: 1px; }
.cur-pop .ais-cached { font-size: 11px; opacity: .75; }

/* マーカーの下に回した吹き出し。尻尾は上を向かないので消す
   （回転させて上に付けることもできるが、影と枠の継ぎ目が汚くなるだけで得がない） */
.leaflet-popup.popup-below .leaflet-popup-tip-container { display: none; }

/* 控えから出している船（受信が途切れた古い位置）。今そこにいるとは限らないので薄くする */
.ais-label-old span { opacity: .55; }
.cur-pop .ais-old { color: var(--c-caution); }

/* AISの色の凡例（メニュー内）。色はFind Shipに合わせてある */
.ais-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 2px; }
.ais-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.ais-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block;
                border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.cur-pop .ais-move { font-size: 14px; font-weight: 600; margin-top: 3px; }

.cur-pop { font-size: 13px; color: #12303f; }
.cur-pop .cur-now { font-size: 17px; font-weight: 700; }
.cur-pop .cur-sub { font-size: 11px; opacity: .75; margin-top: 3px; }
.cur-table { border-collapse: collapse; margin-top: 6px; }
.cur-table td { padding: 1px 7px 1px 0; font-size: 12px; white-space: nowrap; }

/* 起動画面のプライバシー1行（3枚目を足すと起動が長くなるので既存の枚に載せる） */
.splash-fine {
  /* .splash-msg が横並び(flex)なので、そのままだと本文の隣に回り込んで読みにくい。
     行を独立させて本文の下に置く（実機幅で確認済み 2026-08-08） */
  flex: 0 0 100%;
  margin: 12px 0 0 !important; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 11px !important; line-height: 1.6 !important; opacity: .72;
}
.splash-fine button {
  /* 親の .splash-msg が pointer-events:none なので、ここで戻さないと押せない
     （S22実機で押せないとkk報告 2026-08-08。当たり判定の大きさではなくこれが原因）。
     スプラッシュ全体のタップで次へ進む動作は、クリックが#splashへ伝播するので保たれる */
  pointer-events: auto;
  margin-left: 6px; padding: 8px 16px; min-height: 38px;
  background: transparent; color: inherit;
  border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  font: 600 11px/1 var(--font-ui); cursor: pointer;
}