/* ────────────────────────────────────────
   オフショア（浅川港沖・等深線マップ）タブ用スタイル
   旧 depth-map.html のインラインCSSから、独立ページ用の要素セレクタ
   （*, body, header, h1, nav 等）を除去し、#offshore タブにスコープを
   付けて移植したもの。styles.css の .container / .loading と名前が
   衝突するクラスは offshore- プレフィックスに変更している。
   ──────────────────────────────────────── */

.offshore-coordinates {
  display: inline-block;
  background: #f0f0f0;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.9em;
  margin: 10px 0;
}

/* 日付選択（説明文と地図の間に配置。選択した日付でAIアドバイスと
   地図直下の予報スライダーの両方が同期して切り替わる） */
.offshore-date-select {
  background: white;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.offshore-date-select-label {
  font-size: 0.9em;
  font-weight: 600;
  color: #0a6e6e;
  margin-bottom: 8px;
}

/* 警告バッジ・天気アイコンをまとめる白地カード（.offshore-date-selectと同じ体裁） */
.offshore-weather-card {
  background: white;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.offshore-weather-card-label {
  font-size: 0.85em;
  font-weight: 600;
  color: #0a6e6e;
  margin-bottom: 10px;
}

/* 日の出・日の入り（先頭）＋二枚潮/海流/高波/強風/大気不安定の警告バッジ */
.offshore-tide-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

/* 警告ではないため、赤系の.offshore-warning-badgeとは異なる色で区別する */
.offshore-sun-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #eef4fb;
  color: #365a86;
  font-weight: 700;
  font-size: 0.85em;
  white-space: nowrap;
}

.offshore-warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #fce4e4;
  color: #c0392b;
  font-weight: 700;
  font-size: 0.85em;
  white-space: nowrap;
}

/* 日の出前〜日没までの時間帯別天気アイコン（操船シミュレーション用に
   サーバー側で算出済みのboatAdvice.timeSlotsをそのまま流用する） */
.offshore-weather-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
}

/* ショア(潮汐・天気ウィジェット)の.weather-item/.weather-icon等と同じ
   サイズ・配色に合わせている(public/styles.css参照) */
.offshore-weather-box {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
  background: rgba(240, 246, 255, 0.95);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 4px 6px;
  font-size: 10px;
  color: #333;
}

.offshore-weather-box > * {
  white-space: nowrap;
}

.offshore-weather-box-hour {
  font-size: 10px;
}

.offshore-weather-box-icon {
  font-size: 20px;
  line-height: 1.2;
}

.offshore-weather-box-temp {
  font-weight: bold;
  color: #333;
}

.offshore-weather-box-wind {
  color: #666;
  font-size: 11px;
}

.offshore-weather-box-cloud {
  color: #666;
  font-size: 11px;
}

.offshore-weather-box-wave {
  color: #1a6fb5;
  font-size: 11px;
  font-weight: bold;
}

.offshore-weather-box-precip {
  color: #2a7a2a;
  font-size: 11px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .offshore-weather-box {
    padding: 1px 2px;
    font-size: 8px;
    border-radius: 3px;
  }
  .offshore-weather-box > div {
    line-height: 1.1;
  }
  .offshore-weather-box-icon {
    font-size: 11px;
  }
  .offshore-weather-box-temp {
    font-size: 7px;
  }
  .offshore-weather-box-wind,
  .offshore-weather-box-cloud,
  .offshore-weather-box-wave,
  .offshore-weather-box-precip {
    font-size: 6px;
  }
}

.offshore-map-container {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  margin-bottom: 20px;
}

#offshore-map {
  height: 600px;
  width: 100%;
}

.offshore-loading {
  text-align: center;
  padding: 20px;
  color: #667eea;
  font-style: italic;
}

#forecast-controls {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #f8f9fa;
  border-top: 1px solid #ddd;
  flex-wrap: wrap;
}

.offshore-map-hint {
  font-size: 0.9em;
  color: #555;
  margin: 10px 0 20px;
}

.offshore-advice-generated-at {
  font-size: 0.85em;
  color: #999;
  margin: -4px 0 10px;
}

#forecast-controls button {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.95em;
  flex-shrink: 0;
}

#forecast-controls button:hover {
  background: #5568d3;
}

#forecast-controls input[type="range"] {
  flex: 1;
  min-width: 150px;
}

#forecast-controls #forecast-time-label {
  font-weight: bold;
  color: #333;
  min-width: 130px;
  text-align: right;
  flex-shrink: 0;
}

/* leaflet-groupedlayercontrol パネルの見出し（JSで動的挿入） */
.offshore-layer-control-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 1.05em;
  color: #667eea;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid #667eea;
}

.offshore-layer-control-title .offshore-layer-control-close {
  color: #999;
  font-size: 1.3em;
  font-weight: bold;
  text-decoration: none;
  line-height: 1;
  padding: 0 2px;
}

.offshore-layer-control-title .offshore-layer-control-close:hover {
  color: #333;
}

.offshore-legend {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  /* offshore.jsのrepositionLegend()で実際は凡例が先に表示されるため、ここで下に間隔を確保する */
  margin-bottom: calc(20px + 5mm);
}

.offshore-legend-header {
  border-bottom: 2px solid #667eea;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.offshore-legend h3 {
  color: #667eea;
}

/* 全文を折りたたむのではなく、冒頭3割程度をプレビュー表示して
   「クリックしないと何も見えない」状態を避ける。続きは下の
   「続きを見る」ボタン（アコーディオンのトリガー）で表示する
   （⚠️ ご注意・注意事項と同じパターン） */
#legend-content.offshore-legend-peek {
  max-height: 13.9em;
  overflow: hidden;
  position: relative;
}

#legend-content.offshore-legend-peek::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.4em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9) 55%, #fff 100%);
  pointer-events: none;
}

.offshore-legend-more-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0 2px;
  background: none;
  border: none;
  border-top: 1px dashed #cfd6f0;
  text-align: center;
  font-size: 0.9em;
  font-weight: 700;
  color: #667eea;
  font-family: inherit;
  cursor: pointer;
}

.offshore-legend-more-btn:hover {
  color: #4d5bc4;
}

.offshore-legend-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 1.05em;
}

.offshore-legend-color {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  border: 2px solid #333;
  border-radius: 3px;
}

.offshore-advice {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  margin-bottom: 20px;
}

.offshore-advice h3 {
  color: #0a6e6e;
  margin-bottom: 10px;
  border-bottom: 2px solid #0a6e6e;
  padding-bottom: 10px;
}

.offshore-advice-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.offshore-advice-tabs button {
  background: #eef7f7;
  color: #0a6e6e;
  border: 1px solid #0a6e6e;
  border-radius: 6px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 0.95em;
}

.offshore-advice-tabs button.active {
  background: #0a6e6e;
  color: white;
}

.offshore-advice-body {
  line-height: 1.8;
  font-size: 1.0em;
  color: #1a1a1a;
  min-height: 60px;
}

.offshore-advice-heading {
  font-size: 1.05em;
  font-weight: 700;
  margin: 10px 0 4px;
  color: #0a6e6e;
}

.offshore-advice-p {
  margin: 4px 0;
}

.offshore-advice-list {
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
}

/* 魚種名など地点評価の見出しにあたる箇条書き（インデントなし） */
.offshore-advice-li-l0 {
  font-weight: 700;
  color: #0a6e6e;
  margin: 10px 0 4px;
  padding-left: 1.3em;
  position: relative;
}
.offshore-advice-li-l0::before {
  content: '▸';
  position: absolute;
  left: 0;
}

/* 想定タナ・活きアジ仕掛け・錘の重さなど、魚種の詳細にあたる箇条書き（インデントあり） */
.offshore-advice-li-l1 {
  margin: 3px 0 3px 1.4em;
  padding-left: 0.8em;
  border-left: 2px solid #d5ecec;
  line-height: 1.7;
}

/* キーワード強調（想定タナ・仕掛け・錘など） */
.offshore-keyword {
  font-weight: 600;
  color: #0a6e6e;
}

/* 釣行タイムスケジュール（AI生成本文内の表）とカレンダー登録ボタン */
.offshore-schedule-calendar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}

.offshore-schedule-calendar-btn {
  padding: 8px 16px;
  background: #0055a4;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
}

.offshore-schedule-calendar-btn:hover {
  background: #003d7a;
}

.offshore-schedule-table-wrap {
  overflow-x: auto;
  margin: 6px 0 12px;
}

.offshore-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.offshore-schedule-table th {
  background: #e3f2fd;
  color: #0055a4;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 2px solid #0055a4;
  text-align: left;
  white-space: nowrap;
}

.offshore-schedule-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

/* 「ポイント」「対象魚」「作戦・備考」列が狭すぎて読みにくいため最小幅を確保する */
.offshore-schedule-table th:nth-child(2),
.offshore-schedule-table td:nth-child(2) {
  min-width: 90px;
}

.offshore-schedule-table th:nth-child(3),
.offshore-schedule-table td:nth-child(3) {
  min-width: 100px;
}

.offshore-schedule-table th:last-child,
.offshore-schedule-table td:last-child {
  min-width: 200px;
}

/* ── 地点ごとの開閉式アコーディオン ── */
.offshore-point-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin: 10px 0;
  overflow: hidden;
}

.offshore-point-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #f4fafa;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-size: 1em;
  font-family: inherit;
}

.offshore-point-header:hover {
  background: #e9f5f5;
}

.offshore-point-status-badge {
  flex-shrink: 0;
  font-size: 0.75em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  color: white;
}
.offshore-point-status-badge.status-safe { background: #1976d2; }
.offshore-point-status-badge.status-caution { background: #e65100; }
.offshore-point-status-badge.status-danger { background: #c62828; }

.offshore-point-header-title {
  flex: 1;
  font-weight: 600;
  color: #1a1a1a;
}

.offshore-point-header-arrow {
  flex-shrink: 0;
  color: #0a6e6e;
  transition: transform 0.2s;
}
.offshore-point-header[aria-expanded="true"] .offshore-point-header-arrow {
  transform: rotate(180deg);
}

.offshore-point-body {
  padding: 4px 14px 14px;
}
.offshore-point-body.collapsed {
  display: none;
}

.offshore-point-back-to-map {
  display: inline-block;
  margin-top: 8px;
  background: #eef7f7;
  color: #0a6e6e;
  border: 1px solid #0a6e6e;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 0.85em;
}
.offshore-point-back-to-map:hover {
  background: #0a6e6e;
  color: white;
}

/* ── 釣行タイムスケジュールの開閉式アコーディオン ── */
.offshore-schedule-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin: 10px 0;
  overflow: hidden;
}

.offshore-schedule-header {
  width: 100%;
  background: #f4fafa;
  padding: 10px 14px;
  text-align: left;
  font-size: 1em;
}

.offshore-schedule-title {
  font-weight: 700;
  color: #0a6e6e;
}

.offshore-schedule-body {
  padding: 4px 14px 14px;
}

/* 全文を折りたたむのではなく、冒頭3割程度をプレビュー表示して
   「クリックしないと何も見えない」状態を避ける。続きは下の
   「続きを見る」ボタン（アコーディオンのトリガー）で表示する
   （⚠️ ご注意・注意事項と同じパターン） */
.offshore-schedule-body.offshore-schedule-peek {
  max-height: 8em;
  overflow: hidden;
  position: relative;
}

.offshore-schedule-body.offshore-schedule-peek::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2em;
  background: linear-gradient(to bottom, rgba(244,250,250,0), rgba(244,250,250,0.9) 55%, #fff 100%);
  pointer-events: none;
}

.offshore-schedule-more-btn {
  display: block;
  width: 100%;
  padding: 6px 14px 10px;
  background: none;
  border: none;
  border-top: 1px dashed #cfe4e4;
  text-align: center;
  font-size: 0.9em;
  font-weight: 700;
  color: #0a6e6e;
  font-family: inherit;
  cursor: pointer;
}

.offshore-schedule-more-btn:hover {
  color: #075353;
}

/* ── 「おすすめ地点 TOP2」の詳細アコーディオン（見出し自体は常に表示、説明文以下を開閉） ── */
.offshore-top2-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin: 6px 0 10px;
  overflow: hidden;
}

.offshore-top2-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #f4fafa;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  text-align: left;
  font-size: 0.9em;
  font-family: inherit;
}

.offshore-top2-header:hover {
  background: #e9f5f5;
}

.offshore-top2-title {
  flex: 1;
  font-weight: 600;
  color: #0a6e6e;
}

.offshore-top2-arrow {
  flex-shrink: 0;
  color: #0a6e6e;
  transition: transform 0.2s;
}
.offshore-top2-header[aria-expanded="true"] .offshore-top2-arrow {
  transform: rotate(180deg);
}

.offshore-top2-body {
  padding: 4px 14px 14px;
}
.offshore-top2-body.collapsed {
  display: none;
}

/* 地図クリック時の「指定ポイント情報」ポップアップ内のクローズボタン */
.offshore-popup-close-btn {
  display: inline-block;
  background: #eef7f7;
  color: #0a6e6e;
  border: 1px solid #0a6e6e;
  border-radius: 6px;
  padding: 4px 16px;
  cursor: pointer;
  font-size: 0.85em;
}
.offshore-popup-close-btn:hover {
  background: #0a6e6e;
  color: white;
}

.offshore-disclaimer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.offshore-disclaimer-header {
  width: 100%;
  padding: 4px 0;
  text-align: left;
  font-size: 1.05em;
  font-weight: 700;
  color: #0a6e6e;
}

.offshore-advice-disclaimer {
  font-size: 0.8em;
  color: #999;
  margin-top: 6px;
  line-height: 1.7;
}

/* 共有ボタン行（レンタルボート導線 + アドバイス共有）
   スマホ幅で隙間なく上下に積み重なって見えるのを避けるため、
   flex-wrap + gap で横並びを優先し、狭い画面ではフォント・paddingを縮小する */
.offshore-share-buttons {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.offshore-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 1em;
  font-weight: bold;
  border-radius: 8px;
  white-space: nowrap;
}

.offshore-share-btn-primary {
  background: #0055a4;
  color: #fff;
  border: none;
  cursor: pointer;
}

@media (max-width: 480px) {
  .offshore-share-btn {
    padding: 8px 14px;
    font-size: 0.85em;
    gap: 6px;
  }
}

/* 全文を折りたたむのではなく、冒頭3割程度をプレビュー表示して
   「クリックしないと何も見えない」状態を避ける。続きは下の
   「続きを見る」ボタン（アコーディオンのトリガー）で表示する */
.offshore-advice-disclaimer.collapsed {
  max-height: 11.7em;
  overflow: hidden;
  position: relative;
}

.offshore-advice-disclaimer.collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9) 55%, #fff 100%);
  pointer-events: none;
}

.offshore-disclaimer-more-btn {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 0 2px;
  background: none;
  border: none;
  border-top: 1px dashed #cfe4e4;
  text-align: center;
  font-size: 0.9em;
  font-weight: 700;
  color: #0a6e6e;
  font-family: inherit;
  cursor: pointer;
}

.offshore-disclaimer-more-btn:hover {
  color: #075353;
}

/* ── 操船シミュレーションカード内の開閉式セクション（前提・時間帯別の目安表） ── */
.boat-sim-accordion {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #d8e8e8;
}

.boat-sim-accordion-header-label {
  width: 100%;
  padding: 4px 0;
  text-align: left;
  font-size: 0.9em;
  font-weight: 600;
  color: #0a6e6e;
}

.boat-sim-accordion-body {
  margin-top: 8px;
}

.boat-sim-accordion-body p {
  font-size: 0.85em;
  color: #444;
  line-height: 1.6;
  margin: 0 0 8px;
}

/* 「前提」のプレビュー高さはテーブルより低密度のテキストのため、
   共通の.boat-sim-peekとは別にID単位で高さを調整する */
#boat-sim-premise-body.boat-sim-peek {
  max-height: 4.9em;
}

/* 「時間帯別の目安（表）」は開閉ボタンで全非表示にするのではなく、冒頭3割程度を
   プレビュー表示し、「続きを見る」ボタン（実クリック可能）で全体を表示する
   （⚠️ ご注意・注意事項と同じパターン） */
.boat-sim-accordion-body.boat-sim-peek {
  max-height: 10.5em;
  overflow: hidden;
  position: relative;
}

.boat-sim-accordion-body.boat-sim-peek::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.8em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9) 55%, #fff 100%);
  pointer-events: none;
}

.boat-sim-more-btn {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 0 2px;
  background: none;
  border: none;
  border-top: 1px dashed #cfe4e4;
  text-align: center;
  font-size: 0.9em;
  font-weight: 700;
  color: #0a6e6e;
  font-family: inherit;
  cursor: pointer;
}

.boat-sim-more-btn:hover {
  color: #075353;
}

.leaflet-tooltip.depth-label {
  background: rgba(255,255,255,0.75);
  border: none;
  box-shadow: none;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 3px;
  border-radius: 2px;
  pointer-events: none;
  white-space: nowrap;
}
.leaflet-tooltip.depth-label::before { display: none; }

.leaflet-tooltip.offshore-status-label {
  color: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
}
.leaflet-tooltip.offshore-status-label::before { display: none; }
/* 信号機と同じ配色: safe=緑・caution=オレンジ・danger=濃い赤
   （濃い黄は背景色に紛れて見えなかったためオレンジに、赤も同様の懸念から濃い赤に変更） */
.leaflet-tooltip.offshore-status-safe { background: rgba(46,125,50,0.9); }
.leaflet-tooltip.offshore-status-caution { background: rgba(230,81,0,0.9); }
.leaflet-tooltip.offshore-status-danger { background: rgba(139,0,0,0.9); }

@media (max-width: 768px) {
  #offshore-map {
    height: 400px;
  }
}