:root {
  color-scheme: dark;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  background: #1b1f24;
  color: #e6e6e6;
}

#app {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ---- 左サイドバー（固定幅320px、縦full-height、スクロール可） ---- */
#sidebar {
  width: 320px;
  flex: 0 0 320px;
  height: 100%;
  overflow-y: auto;
  background: #11151a;
  border-right: 1px solid #333;
  box-sizing: border-box;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#home-button {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #22262c;
  color: #eee;
  cursor: pointer;
}
#home-button:hover {
  background: #2c313a;
}

.sidebar-section h2 {
  font-size: 13px;
  margin: 0 0 8px 0;
  color: #9aa;
  text-transform: none;
}

#category-list, #search-results, .accordion-body {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- カテゴリーアコーディオン ---- */
.category-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.category-header:hover {
  background: #22262c;
}

/* ---- 選択中のカテゴリー(トップレベルフォルダ)ノード（赤文字、article-itemと同系色） ---- */
.category-header.selected-category {
  color: #ff5252;
  font-weight: bold;
  border-left: 3px solid #ff5252;
  padding-left: 5px;
}
.accordion-icon {
  display: inline-block;
  width: 1em;
  font-size: 11px;
  color: #b58a2e;
}
/* 2026-10-01: ダブルクリックでHP表示する項目なので、文字が選択反転されないようにする */
.category-header, .article-item, .search-result-item {
  user-select: none;
}
/* 2026-10-01: 見出し末尾の開閉ボタン(▲で閉じる/▼で開く) */
.category-name {
  flex: 1;
}
.accordion-toggle {
  flex: none;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  color: #b58a2e;
  cursor: pointer;
}
.accordion-toggle:hover {
  background: #2f343c;
  color: #f5c542;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  padding-left: 12px;
  transition: max-height 0.3s ease;
}
/* 2026-10-01: 旧来は max-height:500px + overflow:hidden のため、ホームページが68件ある
   volunteer等では途中から下の項目が切れて到達できなかった。上限を画面高基準にし、
   超える分はアコーディオン内でスクロールさせる。 */
.accordion-body.expanded {
  max-height: 60vh;
  overflow-y: auto;
}

.article-item {
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #ccc;
}
.article-item:hover {
  background: #22262c;
}

/* ---- 選択中の記事ノード（赤文字＋インデント） ---- */
.article-item.selected-article {
  color: #ff5252;
  font-weight: bold;
  margin-left: 1em;
  border-left: 3px solid #ff5252;
  padding-left: 6px;
}

.search-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
#search-input {
  flex: 1;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #444;
  background: #22262c;
  color: #eee;
  min-width: 0;
}
#search-button {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #444;
  background: #2e5c8a;
  color: #fff;
  cursor: pointer;
}
#search-button:hover {
  background: #3a6fa5;
}
.title-only-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9ad0ff;
  margin: 4px 0 8px 0;
  cursor: pointer;
  user-select: none;
}

#hit-count {
  font-size: 12px;
  color: #9ad0ff;
  margin-bottom: 8px;
  min-height: 14px;
}

#search-results {
  flex: 1;
  overflow-y: auto;
}
.search-result-item {
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #9ad0ff;
}
.search-result-item:hover {
  background: #22262c;
}

/* 2026-09-30: フォルダの入口ページ(index.html等)のバッジ。SITE_ALIASESで呼び名が
   定義されたサイトの大元(上石神井HPのトップ等)は目立つ色で「<呼び名> トップ」と表示する。 */
.entry-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 18px;
  color: #cfe8ff;
  background: #2b4a66;
}
.entry-badge.site-badge {
  color: #1b1b1b;
  background: #f5c542;
  font-weight: bold;
}

/* ---- 検索ヒットの青発光（サイドバー項目・ツリーノード共通クラス） ---- */
.highlight-blue {
  animation: bluePulse 1.5s ease-in-out infinite;
  background: rgba(33, 150, 243, 0.15);
  border-left: 3px solid #2196f3;
}

@keyframes bluePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(33, 150, 243, 0.3); }
  50%      { box-shadow: 0 0 16px rgba(33, 150, 243, 0.9); }
}

/* SVGツリーノード(<g>/<circle>)はbox-shadow/backgroundが効かないため、
   filterのdrop-shadowで同じ「青発光」を表現する専用ルール。 */
@keyframes blueGlowPulse {
  0%   { filter: drop-shadow(0 0 2px #4fc3ff); }
  50%  { filter: drop-shadow(0 0 10px #4fc3ff); }
  100% { filter: drop-shadow(0 0 2px #4fc3ff); }
}
.tree-node.highlight-blue circle {
  stroke: #4fc3ff;
  stroke-width: 3px;
  animation: blueGlowPulse 1.2s ease-in-out infinite;
}

/* ---- 右メインステージ（SVGキャンバス／全画面プレビュー） ---- */
#main-stage {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#tree-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#tree-svg:active {
  cursor: grabbing;
}

.tree-link {
  fill: none;
  stroke: #555;
  stroke-width: 1.5px;
}

.tree-node circle {
  fill: #4a7dbd;
  stroke: #cfe0f5;
  stroke-width: 1px;
  cursor: pointer;
}
.tree-node.folder circle {
  fill: #b58a2e;
}
.tree-node.selected circle {
  fill: #e74c3c;
  stroke: #fff;
  stroke-width: 2px;
}
.tree-node text {
  fill: #e6e6e6;
  font-size: 12px;
  cursor: pointer;
  /* 2026-09-24: pointer-events:noneだと、ラベル文字列の描画領域(<g>のバウンディング
     ボックスの大部分を占める)をクリックした際にヒットテストが素通りしてsvg背景が
     イベントを奪ってしまい、ツリーノードを直接クリックしての開閉/選択操作が
     ほぼ機能しない不具合があった。textにもクリックを拾わせ、<g>の親クリックへ
     バブリングさせることで解消する。 */
}

/* ---- 全画面Webプレビュー（iframe）と、上部の操作バー ---- */
/* 2026-10-02: プレビューの上部に操作バーを設け、「新しいタブで開く」(PC・スマホ共通)と
   「ツリーに戻る」(PCのみ)を置く。iframe は操作バーの下の領域いっぱいに表示する。 */
:root {
  --preview-toolbar-h: 44px;
  --bottom-nav-h: 56px;
}
.preview-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--preview-toolbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #11151a;
  border-bottom: 1px solid #333;
  z-index: 10;
}
.open-new-tab {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #3a6fa5;
  background: #1d3550;
  color: #cfe8ff;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.open-new-tab:hover {
  background: #2e5c8a;
}

.preview-fullscreen {
  position: absolute;
  top: var(--preview-toolbar-h);
  left: 0;
  width: 100%;
  height: calc(100% - var(--preview-toolbar-h));
  border: none;
  background: #fff;
}

.back-to-tree {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: rgba(60, 66, 76, 0.9);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.back-to-tree:hover {
  background: rgba(80, 88, 100, 0.95);
}

/* スマホ表示でのみ使う要素(PCでは表示しない) */
#bottom-nav,
.mobile-tree-label,
.mobile-empty {
  display: none;
}

/* ===================================================================
   2026-10-02 スマホ表示(画面幅768px以下)
   - 下部の固定タブで「メニュー/検索」と「本文を表示」を切り替え、どちらも画面いっぱいに表示する。
   - 「メニュー/検索」: サイドバー(ホーム・カテゴリー・検索)の下にツリーを並べ、縦にスクロールする。
   - 「本文を表示」: プレビュー(操作バー+iframe)を全画面で表示する。
   - body のクラス(is-mobile / mobile-tab-menu / mobile-tab-body)は app.js が付け外しする。
   =================================================================== */
@media (max-width: 768px) {
  #app {
    display: block;
    width: 100%;
    height: calc(100vh - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- メニュー/検索タブ --- */
  #sidebar {
    width: 100%;
    flex: none;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid #333;
    padding: 12px 14px;
  }
  #main-stage {
    height: 70vh;
    min-height: 320px;
  }
  .mobile-tab-menu .mobile-tree-label {
    display: block;
    position: absolute;
    top: 8px;
    left: 12px;
    z-index: 5;
    font-size: 12px;
    color: #9aa;
    pointer-events: none;
  }
  .mobile-tab-menu .preview-toolbar,
  .mobile-tab-menu .preview-fullscreen,
  .mobile-tab-menu .mobile-empty {
    display: none;
  }
  /* ツリーは指でのドラッグ・ピンチを拡大縮小/移動に使う(ページのスクロールはツリーの外で行う) */
  #tree-svg {
    touch-action: none;
  }

  /* --- 本文を表示タブ --- */
  .mobile-tab-body #app {
    overflow: hidden;
  }
  .mobile-tab-body #sidebar {
    display: none;
  }
  .mobile-tab-body #main-stage {
    height: 100%;
    min-height: 0;
  }
  .mobile-tab-body #tree-svg {
    display: none !important;
  }
  .mobile-tab-body .mobile-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.8;
    color: #9aa;
    font-size: 14px;
  }
  .back-to-tree {
    display: none;   /* スマホでは下部のタブで戻る */
  }

  /* --- 下部の固定タブ --- */
  #bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: #11151a;
    border-top: 1px solid #333;
    z-index: 100;
  }
  #bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: #9aa;
    font-size: 12px;
    cursor: pointer;
  }
  #bottom-nav button .tab-icon {
    font-size: 18px;
    line-height: 1;
  }
  #bottom-nav button.active {
    color: #f5c542;
    background: #1b2129;
    box-shadow: inset 0 3px 0 #f5c542;
  }

  /* --- タップしやすい大きさ(目安44px)・iOSの自動拡大を防ぐ文字サイズ(16px) --- */
  #home-button {
    min-height: 44px;
    font-size: 15px;
  }
  .category-header,
  .article-item,
  .search-result-item {
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
  .search-result-item {
    flex-wrap: wrap;
    gap: 2px 0;
    padding: 8px;
  }
  .accordion-toggle {
    padding: 8px 12px;
    font-size: 14px;
  }
  #search-input,
  #search-button {
    min-height: 44px;
    font-size: 16px;
  }
  .title-only-toggle {
    min-height: 32px;
    font-size: 14px;
  }
  .accordion-body.expanded {
    max-height: none;   /* スマホではメニュー全体をスクロールするため、アコーディオン内の高さ制限はしない */
    overflow: visible;
  }
}