@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700&display=swap');

  :root {
    --ok:#e7f7ef; --down:#ffe9e9; --closed:#eeeeee; --unknown:#f5f5f5;
    --card-border:#e9e9e9; --txt-muted:#666; --fav-bg:#faf7ff; --sep:#ddd;
    --surface:#ffffff; --surface-2:#f7f7f9; --glass:rgba(255,255,255,.65);
    --ring:#5b8def; --shadow:0 6px 18px rgba(0,0,0,.06);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --surface:#101114; --surface-2:#16181c; --glass:rgba(16,17,20,.55);
      --card-border:#2a2d33; --txt-muted:#9aa1aa; --sep:#2a2d33;
      --unknown:#1a1c20; --closed:#14161a; --down:#2a1b1b; --ok:#14231b;
      --ring:#8ab4ff; --shadow:0 8px 22px rgba(0,0,0,.32);
    }
    body{color:#e9edf2;}
  }
  html,body{background:linear-gradient(180deg,var(--surface-2),var(--surface));}
  body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    margin:0 auto; max-width:1100px; padding:0 0 24px; /* 上パディングを削除 */
  }
  .external-links {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
  }
  .external-links a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .external-links a:hover { text-decoration: underline; }
  h1 { margin: 0; font-size: 20px; letter-spacing: .2px; color: inherit; }
  .muted{color:var(--txt-muted);font-size:12px}

  /* ===== Toolbar（操作パネル）: ガラス風カード ===== */
  .toolbar{
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    flex-direction: column; /* 縦並びに変更 */
    align-items: stretch; /* 幅を親に合わせる */
    gap: 8px; /* 行間の調整 */
    margin:14px 0 16px; padding:8px 10px;
    background:var(--glass); backdrop-filter:saturate(1.2) blur(10px);
    border:1px solid var(--card-border); border-radius:14px; box-shadow:var(--shadow);
    /* (任意) ツールバーを固定する場合 */
    position:sticky; top:8px; z-index:50;
  }
  .toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .toolbar-main, .toolbar-more {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  @media (prefers-color-scheme: dark){
    .toolbar label { background:rgba(255,255,255,.06); }
  }
  .toolbar label{
    background:rgba(255,255,255,.30); border-radius: 8px; padding: 4px 6px; font-size: 12px;
  }
  select,input,button{
    padding:5px 7px; border:1px solid var(--card-border); border-radius:8px;
    background:var(--surface); color:inherit; outline:none; transition:.12s ease;
    font-size: 12px; /* ツールバー内の文字をさらに小さく */
  }
  select:focus,input:focus{
    border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 24%, transparent);
  }
  #refresh{
    background:linear-gradient(180deg,#fff,#f3f5f9);
    border:1px solid #d7dbe3; font-weight:600; cursor:pointer;
  }
  #refresh:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
  #refresh:active{ transform:translateY(0); }
  @media (prefers-color-scheme: dark){
    #refresh{ background:linear-gradient(180deg,#1b1e23,#14171b); border-color:#2a2d33; }
  }

  /* ===== List / Grid ===== */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
  .sepTitle{margin:10px 0 6px;font-size:12px;color:var(--txt-muted);border-top:1px solid var(--sep);padding-top:8px}

  /* お気に入りリストはモバイルで2列にする */
  @media (max-width: 768px) {
    #favList.grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ===== Cards（見た目のみ。構造やJSは不変更） ===== */
  .card{
    border:1px solid var(--card-border); border-radius:12px; padding:10px;
    position:relative; overflow:hidden; background:var(--surface); box-shadow:var(--shadow);
    transition:transform .08s ease, box-shadow .12s ease;
  }
  .card:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.09); }
  .card-overlay {
    /* (注) タスク2でimgタグに変更した場合、このオーバーレイの役割は見直しか、
       CSSで .card-image に重ねるよう調整が必要です */
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7); /* 画像を薄くするためのオーバーレイ */
    z-index: 1;
    transition: background-color 0.2s;
  }
  .card .row, .card .info-badges, .card .height-info {
    position: relative;
    z-index: 2; /* 文字やボタンをオーバーレイの上に表示 */
  }
  .card.is-not-operating .card-overlay,
  .card.is-height-ng .card-overlay {
    background-color: rgba(238, 238, 238, 0.9); /* グレーアウト時の背景 */
  }
  .card.is-not-operating,
  .card.is-height-ng {
    background-image: none !important; /* 画像を非表示 */
  }
  .card.ok{background:var(--ok)}
  .card.down{background:var(--down)}
  .card.closed{background:var(--closed)}
  .card.unknown{background:var(--unknown)}
  .card .name{font-weight:700;line-height:1.2;margin-bottom:6px;font-size:14px}
  .card .wait{font-size:26px;line-height:1}
  .wait small{font-size:12px;color:#666} /* (注) ダークモードで .muted に連動させるか要検討 */
  .row{display:flex;justify-content:space-between;align-items:center;gap:6px}
  .trend{font-size:11px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.85);opacity:.95;border:1px solid #ddd}
  .trend.low{border-color:#7bc89a} .trend.high{border-color:#e57373}
  .favBtn{border:none;background:transparent;padding:0;line-height:0;cursor:pointer}
  .favBtn svg{width:20px;height:20px;display:block;transition:transform .12s ease,opacity .12s}
  .favBtn .heart{fill:none;stroke:#cc2e5d;stroke-width:2}
  .favBtn.on .heart{fill:#cc2e5d}
  .favBtn:hover svg{transform:scale(1.06)}
  .favBtn:focus-visible{outline:2px solid #cc2e5d33;border-radius:6px}
  .strip{margin:6px 0 10px;border:1px dashed var(--sep);border-radius:12px;background:color-mix(in srgb, var(--fav-bg) 85%, transparent)}
  .stripHeader{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px dashed var(--sep)}
  .stripHeader h2{font-size:13px;margin:0;color:#333} /* (注) ダークモードで要調整 */
  .stripBody{padding:8px}
  .switch{display:flex;align-items:center;gap:6px}
  .area{font-size:13px;color:var(--txt-muted);margin:14px 0 8px}

  /* バッジ関連のスタイル */
  .info-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-top: 4px;
  }
  .other-badges {
    display: flex;
    gap: 4px;
  }
  .badge {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    background-color: #e0e0e0;
    color: #333;
  }
  .badge.cs { background-color: #d1e7dd; }
  .badge.sr { background-color: #cff4fc; }
  .badge.dpa, .badge.pp {
    color: white;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
  }
  .badge.dpa {
    background-color: #007bff; /* 鮮やかな青 */
    animation: pulse-dpa 2s infinite;
  }
  .badge.pp {
    background-color: #e83e8c; /* 鮮やかなピンク/マゼンタ */
    animation: pulse-pp 2s infinite;
  }

  /* DPA用の発光アニメーション */
  @keyframes pulse-dpa {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
      box-shadow: 0 0 0 8px rgba(0, 123, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
  }

  /* PP用の発光アニメーション */
  @keyframes pulse-pp {
    0% { box-shadow: 0 0 0 0 rgba(232, 62, 140, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(232, 62, 140, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 62, 140, 0); }
  }
  .badge.height-ng-badge { background-color: #f8d7da; color: #58151c; }
  .height-info {
    margin-top: 4px;
    min-height: 1.2em; /* 身長情報がない場合も高さを確保 */
  }

  /* ===== 小さな視覚改善 ===== */
  input::placeholder{ color: #9aa1aa; opacity:.9; }
  .toolbar input[type="number"]{ width:110px; }

  /* ===== (新規追加) タスク2用：imgタグのスタイル ===== */
  .card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミングしてフィット */
    z-index: 0; /* オーバーレイより下 */
    opacity: 0.25; /* 画像を薄くする (オーバーレイと併用) */
  }
  @media (prefers-color-scheme: dark){
    .card-image { opacity: 0.15; }
  }
  .card.is-not-operating .card-image,
  .card.is-height-ng .card-image {
    display: none; /* 運営してない場合は画像非表示 */
  }

  /* ===== (新規) ガイドセクションのスタイル ===== */
  .seo-content .accordion-trigger {
    background-color: var(--surface-2);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 16px;
    border: 1px solid var(--card-border);
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .seo-content .accordion-trigger:hover {
    background-color: color-mix(in srgb, var(--txt-muted) 5%, var(--surface-2));
  }

  /* ===== (新規) メインタイトル用フォント ===== */
  .main-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 24px; /* 少し大きく */
    transition: opacity 0.2s ease;
  }
  .main-title:hover {
    opacity: 0.8;
  }

/* ===== 新しいヘッダースタイル (v2) ===== */
/* 紺色の帯 */
.site-header-v2 {
  background-color: #1a237e; /* 紺色の背景 */
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  align-items: center;
  padding: 8px 12px;
}
.site-header-v2 .external-links a { color: #fff; text-decoration: none; margin-left: 8px; }
.site-header-v2 .external-links a:hover { text-decoration: underline; }

/* タイトルセクション */
.title-section {
  background: #fff; /* タイトル部分の背景を白に */
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: center; /* 全体を中央揃え */
  align-items: center; /* 上下中央揃え */
  gap: 16px;
}
@media (prefers-color-scheme: dark) {
  .title-section { background: var(--surface); } /* ダークモードではsurface色に */
}
.title-section .header-logo {
  height: 80px; /* 画像サイズ */
  width: auto;
}
.title-section .title-text-area {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  justify-content: center; /* 上下中央に配置 */
  align-items: center; /* 左右中央に配置 */
}
.title-section .main-title { font-size: 1.2rem; font-weight: 700; }
.title-section .update-timestamp { margin-top: 4px; }
.title-section #updated { font-size: 0.75rem; }

/* 「使い方」リンクのスタイル */
.how-to-use-link {
  text-align: center;
  margin: 8px 0 16px;
}
.how-to-use-link a {
  font-size: 0.9rem;
  color: var(--txt-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.how-to-use-link a:hover {
  background-color: var(--card-border);
}

/* ===== 「使い方」と「パークガイド」共通のモダンなスタイル ===== */
.how-to-use-guide {
  background-color: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  margin-top: 24px;
  box-shadow: var(--shadow);
}
.how-to-use-guide .accordion-trigger {
  font-size: 0.9rem; /* 文字サイズを小さく */
  font-weight: 600; /* 少し細く */
  color: var(--txt-muted); /* 色を少し薄く */
  padding: 16px 20px;
  cursor: pointer;
  margin: 0;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
  transition: background-color 0.2s;
}
.how-to-use-guide .accordion-trigger:hover {
  background-color: color-mix(in srgb, var(--txt-muted) 4%, var(--surface));
}
.how-to-use-guide .accordion-body {
  padding: 8px 0 20px; /* 左右のパディングを削除 */
  line-height: 1.7;
  font-size: 15px;
  color: color-mix(in srgb, var(--txt-muted) 90%, transparent);
}
/* accordion-body内のテキストコンテンツにのみ左右のパディングを適用 */
.how-to-use-guide .accordion-body p,
.how-to-use-guide .accordion-body ul,
.how-to-use-guide .accordion-body .attraction-table-wrap {
  margin-left: 20px;
  margin-right: 20px;
}
.how-to-use-guide h3, .how-to-use-guide h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 24px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ring);
  color: inherit;
}
/* 「使い方」セクションのリストスタイル */
.how-to-use-guide .guide-item ul {
  list-style: none;
  padding-left: 0;
}
.how-to-use-guide .guide-item li::before {
  content: '✓';
  color: var(--ring);
  margin-right: 0.5em;
  font-weight: bold;
}

/* 「パークガイド」セクションのリストスタイル */
.how-to-use-guide .accordion-body > ul {
  padding-left: 20px; /* 1階層目のリストにインデントを適用 */
}
.how-to-use-guide .accordion-body > ul ul {
  list-style-type: circle; /* 2階層目以降は白丸にする */
}

/* 目次のスタイル */
.table-of-contents {
  background-color: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 20px;
  margin: 16px 20px;
}
.table-of-contents h4 {
  font-size: 1rem;
  margin: 0 0 8px;
  border-bottom: none;
  font-weight: bold;
}
.table-of-contents ul {
  padding-left: 20px;
  margin: 0;
}
.table-of-contents li {
  margin-bottom: 4px;
}

/* ===== フッター ===== */
.site-footer {
  margin-top: 48px;
  padding: 32px 20px;
  background-color: var(--surface-2);
  border-top: 1px solid var(--card-border);
  text-align: center;
  color: var(--txt-muted);
}
.footer-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.footer-logo {
  height: 48px;
  width: auto;
}
.footer-title-text {
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}
.footer-nav {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  gap: 24px;
}
.footer-nav a {
  color: inherit;
  text-decoration: none;
}
.footer-nav a:hover {
  text-decoration: underline;
}
.footer-note {
  font-size: 0.75rem;
  line-height: 1.6;
  margin-bottom: 24px;
}
.footer-note p {
  margin: 0;
}
.footer-copyright {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* === 混雑サマリー v2 === */
.congestion-summary-v2 {
  text-align: center;
  padding: 12px 10px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #eee;
}
.overall-congestion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.summary-label {
  font-size: 14px;
  color: #555;
}
.summary-value {
  font-size: 18px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
}
.summary-index {
  font-size: 12px;
  color: #777;
}

/* === エリア別混雑インジケーター === */
.area-congestion-indicator {
  display: inline-block;
  margin-left: 12px;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  vertical-align: middle;
}

/* 混雑ラベルの色分け */
.status-不明, .status-unknown { background-color: #ccc; }
.status-少なめ { background-color: #3498db; }
.status-普通 { background-color: #2ecc71; }
.status-やや多め { background-color: #f39c12; }
.status-多め { background-color: #e74c3c; }

/* === 1日の推移グラフセクション === */
.chart-section {
  margin: 32px 0;
  padding: 20px;
  background-color: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.chart-section h3 {
  text-align: center;
  font-size: 18px;
  margin: 0 0 20px;
}
.chart-container {
  position: relative;
  height: 50vh; /* ビューポートの高さの50% */
  min-height: 400px; /* 最小の高さを確保 */
  width: 100%;
}
.chart-section .message {
  text-align: center;
  padding: 20px;
  color: var(--txt-muted);
}

/* === (新規) エリア別混雑サマリー === */
.area-congestion-summary {
  margin: 32px 0;
  padding: 20px;
  background-color: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.area-congestion-summary h3 {
  text-align: center;
  font-size: 18px;
  margin: 0 0 20px;
}
.area-congestion-summary .area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.area-congestion-summary .area-congestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--surface-2);
  border-radius: 8px;
}
.area-congestion-summary .area-name { font-weight: 600; font-size: 14px; }
.area-congestion-summary .area-value-wrapper { display: flex; align-items: center; gap: 6px; }