:root{--bg:#f7f8fa;--card:#fff;--text:#1d2430;--muted:#697386;--line:#e7eaf0;--accent:#4f46e5;--soft:#eef2ff;--shadow:0 10px 30px rgba(20,30,50,.06)}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif}
body{line-height:1.65}.site-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--text);color:var(--card);font-weight:800}.brand small{display:block;color:var(--muted);font-size:10px}.header-actions{display:flex;align-items:center;gap:10px}.status{font-size:12px;color:var(--muted)}button{font:inherit}.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:var(--card);border-radius:12px;cursor:pointer}

/* アプリアイコン */
.brand-mark{background:none;padding:0;overflow:hidden}
.brand-mark svg{width:100%;height:100%;display:block;border-radius:12px}

.container{max-width:1180px;margin:auto;padding:24px 18px 60px}.hero{padding:34px 4px 24px}.eyebrow,.kicker{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--accent)}h1{font-size:clamp(28px,5vw,46px);line-height:1.15;margin:6px 0 12px}h2{font-size:20px;margin:5px 0}h2 span{font-size:13px;color:var(--muted);font-weight:500}.hero p{color:var(--muted);max-width:700px}

.tabs{display:flex;gap:7px;overflow:auto;padding:4px 0 18px}.tab{border:1px solid var(--line);background:var(--card);padding:8px 14px;border-radius:999px;white-space:nowrap;cursor:pointer}.tab.active{background:var(--text);color:var(--card);border-color:var(--text)}
.grid-two{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.grid-two>*:nth-child(1){grid-column:1/-1} /* VIDEO TREND（1つ目のパネル）を横幅いっぱいに */
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.content-grid{grid-template-columns:1.5fr .8fr}.side-stack{display:grid;gap:16px;align-content:start}.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}.ranking{display:grid}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;scroll-margin-top:76px}.rank{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;padding:13px 0;border-top:1px solid var(--line);scroll-margin-top:76px}.rank:first-child{border-top:0}.num{font-weight:900;font-size:18px;color:var(--muted)}.thumb{width:100px;height:56px;object-fit:cover;border-radius:9px;grid-row:span 2}.rank-main{min-width:0}.rank a{color:var(--text);font-weight:700;text-decoration:none}.rank a:hover{color:var(--accent);text-decoration:underline}.meta{font-size:14px;color:var(--muted);margin-top:3px}.delta{font-weight:800;white-space:nowrap}
.rank-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  align-self: start;
}

.details{margin-top:7px;font-size:16px;color:var(--muted)}
.details summary{cursor:pointer;color:var(--accent)}

/* 「説明を閉じる」ボタン */
.details-close {
  display: block;
  margin: 10px auto 2px; /* 中央寄せ */
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  padding: 5px 12px;
  cursor: pointer;
}
.details-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme=dark] .details-close {
  background: #1f2937;
  color: #d1d5db;
  border-color: #4b5563;
}
[data-theme=dark] .details-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#watchCountTitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.watch{border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:var(--bg)}.watch strong{font-size:15px}.watch small{display:block;color:var(--muted);font-size:13px}.watch small.started{display:block;color:var(--muted);font-size:11px;margin-top:2px}.watch a{color:var(--text);text-decoration:none}.watch a:hover{color:var(--accent);text-decoration:underline}.tag{display:inline-block;margin:3px 3px 0 0;padding:2px 7px;border-radius:999px;background:var(--soft);color:#4338ca;font-size:13px}textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;background:var(--bg);color:var(--text)}.primary{margin-top:8px;border:0;border-radius:10px;background:var(--text);color:var(--card);padding:9px 13px;cursor:pointer}.saved{font-size:12px;color:var(--muted);margin-left:8px}.footer{padding:30px 18px;border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:15px}
[data-theme=dark]{--bg:#111318;--card:#181b21;--text:#f3f4f6;--muted:#9aa3b2;--line:#2b303a;--accent:#a5b4fc;--soft:#26263f;--shadow:none}
[data-theme=dark] .tab {
  background: #1f2937;          /* 非選択タブの背景を少し明るく */
  color: #d1d5db;               /* 文字色を明るく */
  border-color: #374151;        /* 枠線を見やすく */
}
[data-theme=dark] .tab:hover {
  background: #374151;          /* ホバー時はもう少し明るく */
}
[data-theme=dark] .icon-btn {
  background: #1f2937;          /* 月ボタンの背景を明るく */
  color: #f9fafb;               /* 月アイコンを白く */
  border-color: #4b5563;
}
[data-theme=dark] .icon-btn:hover {
  background: #374151;
}

/* 選択中タブをダークモードで目立たせる（詳細度を合わせて .tab.active を上書きしないようにする） */
[data-theme=dark] .tab.active {
  background: var(--accent);    /* 明るい紫で強調 */
  color: #111318;
  border-color: var(--accent);
  font-weight: 800;
}

/* タグの文字色をダークモード用に明るく */
[data-theme=dark] .tag {
  background: #312e81;          /* 濃い紫背景 */
  color: #c7d2fe;               /* 明るい紫文字 */
}

/* 通知ボックスをダークモード対応 */
[data-theme=dark] .notice {
  background: #431407;
  border-color: #9a3412;
  color: #fdba74;
}

.period-summary{margin:8px 0 12px;padding:8px 12px;background:var(--soft);border-radius:10px;font-size:14px;color:var(--text)}
.period-summary strong{color:var(--accent);font-weight:800}
[data-theme=dark] .period-summary{background:#26263f;color:#f3f4f6}
[data-theme=dark] .period-summary strong{color:#a5b4fc}
/* 週間レポート内の黄色サマリーのダークモード対応 */
[data-theme=dark] #weeklyReport .period-summary {
  background: #451a03; /* 暗い茶色 */
  border-color: #f59e0b;
  color: #fcd34d; /* 明るい黄色文字 */
}
[data-theme=dark] #weeklyReport .period-summary a {
  color: #fcd34d;
}
[data-theme=dark] #weeklyReport .period-summary a:hover {
  color: #fde68a;
}

/* VIDEO TREND ページャー（＜ ／ ＞） */
.video-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.pager-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pager-btn:hover:not(.is-disabled) {
  border-color: var(--accent);
  background: var(--soft);
}
.pager-btn .pager-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
/* 半透明の無効状態（押せない方向を示す） */
.pager-btn.is-disabled {
  opacity: 0.3;
  cursor: default;
}
[data-theme=dark] .pager-btn {
  background: #1f2937;
  color: #a5b4fc;
  border-color: #4b5563;
}
[data-theme=dark] .pager-btn:hover:not(.is-disabled) {
  background: #312e81;
  border-color: var(--accent);
}

/* 学びテーマのリンクスタイル */
#theme a{color:var(--accent);text-decoration:none;font-weight:700}
#theme a:hover{text-decoration:underline}
[data-theme=dark] #theme a{color:var(--accent)}

/* 明日の先取り候補のリンクをダークモードで見やすく */
[data-theme=dark] #tomorrow a {
  color: #a5b4fc;               /* 明るい紫（--accentと同系色） */
  text-decoration: underline;
}
[data-theme=dark] #tomorrow a:hover {
  color: #c7d2fe;               /* ホバー時はさらに明るく */
}

/* 新着動画バッジ */
.badge-new {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 6px;
  background: #dc2626;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  vertical-align: 1px;
}
[data-theme=dark] .badge-new {
  background: #ef4444;
  color: #111318;
}

/* 専門分野タグ */
.tag-field {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 6px;
  background: var(--soft);
  color: #4338ca;
  font-size: 13.5px;
  font-weight: 700;
  vertical-align: 1px;
}
[data-theme=dark] .tag-field {
  background: #312e81;
  color: #c7d2fe;
}

/* 急上昇動画バッジ */
.badge-surge {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 6px;
  background: #ea580c;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  vertical-align: 1px;
}
[data-theme=dark] .badge-surge {
  background: #fb923c;
  color: #111318;
}

/* お気に入りボタン・一覧 */
.fav-btn {
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
}
.fav-btn:hover { border-color: var(--accent); color: var(--accent); }
.fav-btn.on {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
  font-weight: 700;
}
.fav-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.fav-item:first-child { border-top: 0; }
.fav-main { min-width: 0; }
.fav-main a { color: var(--text); font-weight: 700; text-decoration: none; }
.fav-main a:hover { color: var(--accent); text-decoration: underline; }
.fav-remove {
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 12px;
}
.fav-remove:hover { color: #dc2626; border-color: #dc2626; }
[data-theme=dark] .fav-btn.on {
  background: #451a03;
  border-color: #f59e0b;
  color: #fcd34d;
}

/* 週間レポートパネル（ダークモード調整） */
[data-theme=dark] #weeklyReport a { color: #c7d2fe; }
[data-theme=dark] #weeklyReport .rank-list a,
[data-theme=dark] #weeklyReport ul a { color: #f3f4f6; }
[data-theme=dark] #weeklyReport ul a:hover { color: #a5b4fc; }

/* ===== 週間レポートパネル：文字サイズ・余白の調整 ===== */
/* 集計期間の行（「集計期間：〜 ・ 毎週土曜18時更新」） */
#weeklyReportPeriod {
  font-size: 16px;
}
/* 「最も伸びた動画」等のハイライト部分（.period-summary 内の small 相当） */
#weeklyReport .period-summary {
  font-size: 16px;
  background: #fef3c7; /* 柔らかい黄色 */
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 12px 16px;
}
/* セクション見出し（「今週の注目動画」「週間ランキング」「分野別トレンド」） */
#weeklyReport h3 {
  font-size: 24px;
  margin: 28px 0 10px; /* 上の余白をさらに広げる */
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent); /* 区切り線を太く・色を変える */
}
/* アーカイブへのリンク（「過去のアーカイブ →」「過去の週間トレンドを見る →」） */
#weeklyReport p a,
.panel-head a[href*="/reports/"] {
  font-size: 16px;
}
/* ランキング項目のタイトル */
#weeklyReport ul a {
  font-size: 15px;
}
/* ランキング項目の間隔 */
#weeklyReport ul li {
  padding: 15px 0; /* 10px → 12px に変更 */
}
/* ランキング項目のメタ情報（チャンネル名・日付など） */
#weeklyReport ul .meta {
  font-size: 13px;
}
/* ダークモードでの区切り線の色 */
[data-theme=dark] #weeklyReport h3 {
  border-bottom-color: var(--line);
}

/* WATCH LIST：3段目まで表示、4段目はグラデーション半透明 */
.watch-list-container {
  position: relative;
  max-height: 460px; /* 3段分の高さ（1段=2列で約153px × 3 = 459px + gap分） */
  overflow: hidden;
}
.watch-list-container.expanded {
  max-height: none; /* 折りたたみを開くと高さ制限を解除 */
}
.watch-list-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px; /* 4段目カード1枚分の高さ（タイトル上1/3あたりから薄くなる） */
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 75%);
  pointer-events: none; /* クリックを透過 */
}
/* 4段目のグラデーションの高さを調整 */
.watch-list-toggle {
  margin-top: 8px;
  text-align: center;
}
.watch-list-toggle button {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.watch-list-toggle button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ページトップへ戻るボタン */
.page-top {
  text-align: center;
  margin-bottom: 24px;
}
#pageTopBtn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
#pageTopBtn:hover {
  border-color: var(--accent);
  background: var(--soft);
}
[data-theme=dark] #pageTopBtn {
  background: #1f2937;
  color: #a5b4fc;
  border-color: #4b5563;
}
[data-theme=dark] #pageTopBtn:hover {
  background: #312e81;
  border-color: var(--accent);
}

/* ===== アプリ内動画視聴モード（モーダル） ===== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.video-modal[hidden] { display: none; }
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 20, 0.7);
}
.video-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 800px; /* 通常表示：一般的な埋め込みサイズ */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
}
.video-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.video-modal-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-all;
}
.video-modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}
.video-modal-close:hover { border-color: var(--accent); color: var(--accent); }

/* 16:9 のプレイヤー領域 */
.video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
/* 初期表示：サムネイル＋再生ボタン */
.video-player .video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.video-player .video-play-btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.25);
  border: 0;
  cursor: pointer;
  padding: 0;
}
.video-player .video-play-icon {
  width: 68px;
  height: 48px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.75);
  border-radius: 12px;
  color: #fff;
  font-size: 22px;
  transition: transform .15s, background .15s;
}
.video-player .video-play-btn:hover .video-play-icon {
  background: #dc2626;
  transform: scale(1.08);
}
.video-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 全画面表示モード */
.video-modal.is-full { padding: 0; }
.video-modal.is-full .video-modal-dialog {
  max-width: none;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
}
.video-modal.is-full .video-player {
  flex: 1;
  aspect-ratio: auto;
  border-radius: 0;
}

.video-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.video-modal-actions a {
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.video-modal-actions a:hover { text-decoration: underline; }

[data-theme=dark] .video-modal-dialog { background: #181b21; border-color: #2b303a; }
[data-theme=dark] .video-modal-close { background: #1f2937; color: #d1d5db; border-color: #4b5563; }
[data-theme=dark] .video-modal-close:hover { border-color: var(--accent); color: var(--accent); }

@media(max-width:600px){
  .video-modal { padding: 8px; }
  .video-modal-dialog { padding: 10px; }
}

/* ===== 専門職別の統計ダッシュボード ===== */
.stats-list{display:grid;gap:14px}
.stats-row{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);scroll-margin-top:76px}
.stats-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.stats-name{font-weight:800;font-size:15px}
.stats-value{font-weight:800;color:var(--accent);font-size:15px;white-space:nowrap}
.stats-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.stats-bar-fill{height:100%;border-radius:999px;background:var(--accent);transition:width .3s ease}
.stats-detail{margin-top:6px;font-size:12.5px;color:var(--muted)}
[data-theme=dark] .stats-row{background:#1f2937;border-color:#374151}
[data-theme=dark] .stats-bar{background:#374151}

/* ===== 専門職別の統計：折れ線グラフ（日別推移） ===== */
.stats-chart{position:relative;margin:10px 0 4px}
.stats-chart-svg{display:block;width:100%;height:100px}
.stats-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.stats-line-area{fill:var(--accent);opacity:.12;stroke:none}
.stats-line-dot{fill:var(--accent)}
.stats-chart-ymax{display:block;font-size:10.5px;color:var(--muted);margin:0 0 2px}
.stats-chart-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:2px}

/* ===== 専門職別の統計：折れ線グラフのホバーツールチップ ===== */
.stats-chart-svg{cursor:crosshair;touch-action:pan-y} /* pan-y：グラフ上のタップは捕捉しつつ縦スクロールは妨げない */
.stats-line-hover{stroke:transparent;stroke-width:20;fill:none} /* 見えない太い判定ライン（ホバーしやすくする） */
.stats-hover-dot{fill:var(--accent);stroke:var(--card);stroke-width:1.5}
.stats-tooltip{
 position:absolute;
 display:none;
 background:var(--text);
 color:var(--card);
 font-size:12px;
 font-weight:700;
 line-height:1.4;
 padding:5px 10px;
 border-radius:8px;
 pointer-events:none; /* ツールチップ自身はホバー判定から除外 */
 transform:translate(-50%,-100%); /* 点の真上中央に配置 */
 white-space:nowrap;
 z-index:2;
}
.stats-tooltip::after{ /* 吹き出しの三角形 */
 content:'';
 position:absolute;
 top:100%;
 left:50%;
 transform:translateX(-50%);
 border:5px solid transparent;
 border-top-color:var(--text);
}
.stats-tooltip.is-left{transform:translate(0,-100%)} /* 左端では吹き出しを右にずらす */
.stats-tooltip.is-left::after{left:12px;transform:none}
.stats-tooltip.is-right{transform:translate(-100%,-100%)} /* 右端では吹き出しを左にずらす */
.stats-tooltip.is-right::after{left:auto;right:7px;transform:none}

/* ===== 専門分野別の統計（サブタブ方式のため開閉ボタン廃止） ===== */
/* グラフ・行・ツールチップのスタイルは既存の .stats-* クラスをそのまま再利用 */
#fieldStatsBody{margin-top:10px}

/* ===== 専門分野別の統計：分野名クリック・動画一覧 ===== */
/* 分野名をクリック可能なボタンにする */
.stats-name-btn{
 border:0;background:none;padding:0;cursor:pointer;
 font:inherit;font-weight:800;font-size:15px;color:var(--text);
 text-align:left;
}
.stats-name-btn:hover{color:var(--accent);text-decoration:underline}
.stats-name-btn.is-open{color:var(--accent)}
.stats-name-btn .stats-name-arrow{font-size:11px;margin-left:4px;color:var(--muted)}
/* 動画一覧のコンテナ（分野行の直下に挿入） */
.stats-videos{margin:10px 0 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.stats-videos .rank{padding:10px 0}
.stats-videos-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.stats-videos-title{font-weight:800;font-size:14px}
.stats-videos-meta{font-size:12px;color:var(--muted)}
[data-theme=dark] .stats-videos{background:#111318;border-color:#374151}

@media(max-width:800px){.grid-two,.content-grid{grid-template-columns:1fr}.container{padding:18px 12px 40px}.hero{padding:22px 4px}.rank{grid-template-columns:30px 1fr}.delta{grid-column:2}
.rank-side{grid-column:2;align-items:flex-start;flex-direction:row;justify-content:space-between;width:100%;}
.thumb{width:90px;height:51px;grid-column:3;grid-row:1 / span 2}.header-actions .status{display:none}.watch strong{font-size:15px}}

/* ===== ファーストビュー強化：今日のダイジェスト ===== */
/* 各コーナーは「1行／横1列」に厳格に抑え、ランキング本体を押し下げすぎない設計 */
.fv-sec{margin:0 0 14px}
.fv-sec[hidden]{display:none}
.fv-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.fv-title{font-size:18px;margin:0}
.fv-lead{margin:0 0 8px;font-size:13px;color:var(--muted)}
.fv-note{margin:6px 0 0;font-size:12px;color:var(--muted)}
.fv-empty{padding:12px 14px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:14px;background:var(--card)}
.fv-empty a{color:var(--accent)}
.fv-tabs{padding:4px 0 6px}

/* --- ヒーロー内：今日の1行サマリー --- */
.today-summary{margin:10px 0 0;padding:10px 14px;background:var(--soft);border-left:4px solid var(--accent);border-radius:10px;font-size:14px;color:var(--text);max-width:760px}
[data-theme=dark] .today-summary{background:#26263f;color:#f3f4f6}

/* --- ヒーロー内：更新ステータスチップ --- */
.update-chip{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;color:var(--muted)}
.uc-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;flex-shrink:0}
.uc-badge{margin-left:6px;padding:2px 8px;border-radius:999px;background:#dc2626;color:#fff;font-size:11.5px;font-weight:800}
[data-theme=dark] .update-chip{background:#1f2937;border-color:#4b5563;color:#d1d5db}

/* --- 今日のサマリー：数値カード＋No.1動画ハイライト --- */
/* （既存の .today-summary より後に置くことで上書き適用） */
.today-summary{display:block;max-width:none;margin-top:8px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;box-shadow:var(--shadow)}
.today-summary[hidden]{display:none}
.ts-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ts-card{background:var(--soft);border-radius:12px;padding:10px 8px;text-align:center}
.ts-num{font-size:22px;font-weight:800;color:var(--accent);line-height:1.2}
.ts-unit{font-size:13px;font-weight:700;margin-left:2px}
.ts-lbl{font-size:12px;color:var(--muted);margin-top:2px}
.ts-top{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.ts-top:hover{border-color:var(--accent);background:var(--soft)}
.ts-top-badge{flex-shrink:0;padding:2px 8px;border-radius:6px;background:#dc2626;color:#fff;font-size:12px;font-weight:800}
.ts-top-title{flex:1;min-width:0;font-size:14px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ts-top-delta{flex-shrink:0;font-size:15px;font-weight:800;color:var(--accent)}
/* サマリー用ヒーローは余白を控えめに（1つ目のセクション専用） */
main.container > section.hero:first-of-type{padding:18px 4px 10px}
[data-theme=dark] .today-summary{background:#181b21;border-color:#2b303a;border-left-color:var(--accent);color:#f3f4f6}
[data-theme=dark] .ts-card{background:#26263f}
[data-theme=dark] .ts-top{background:#1f2937;border-color:#374151;color:#f3f4f6}
[data-theme=dark] .ts-top:hover{background:#312e81}
@media(max-width:800px){
 .ts-num{font-size:18px}
 .ts-top{flex-wrap:wrap}
 .ts-top-delta{width:100%;text-align:right}
}
/* --- 今日のサマリー：No.1動画バーをゴールド系ハイライトに（明るくリッチな印象） --- */
.ts-top{background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:1px solid #f59e0b}
.ts-top:hover{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-color:#d97706}
.ts-top-badge{background:#d97706}
[data-theme=dark] .ts-top{background:#451a03;border-color:#f59e0b;color:#fcd34d}
[data-theme=dark] .ts-top:hover{background:#5b2204;border-color:#fbbf24}
[data-theme=dark] .ts-top-badge{background:#f59e0b;color:#111318}
[data-theme=dark] .ts-top-delta{color:#fcd34d}

/* --- ハイライト／あなたへの注目：カード横1列ストリップ（横スクロール） --- */
.hl-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.hl-card{flex:0 0 220px;display:flex;flex-direction:column;gap:5px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;text-align:left;font:inherit;color:var(--text);overflow:hidden}
.hl-card:hover{border-color:var(--accent)}
.hl-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000}
.hl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hl-badge{position:absolute;top:6px;left:6px;margin-right:0}
.hl-badge-top{display:inline-block;padding:1px 6px;border-radius:6px;background:#4f46e5;color:#fff;font-size:13.5px;font-weight:800}
.hl-badge-fav{display:inline-block;padding:1px 6px;border-radius:6px;background:#d97706;color:#fff;font-size:13.5px;font-weight:800}
.hl-title{display:block;padding:0 10px;font-size:13px;font-weight:700;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.hl-meta{display:block;padding:0 10px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-delta{display:block;padding:0 10px 10px;font-size:14px;font-weight:800;color:var(--accent)}
[data-theme=dark] .hl-card{background:#1f2937;border-color:#374151}

/* --- 今日の注目分野：チップ横1列（横スクロール） --- */
.field-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.field-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer;font:inherit;font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}
.field-chip:hover{border-color:var(--accent);background:var(--soft)}
.field-chip.is-open{background:var(--text);color:var(--card);border-color:var(--text)}
.fc-delta{font-size:12.5px;font-weight:800;color:var(--accent)}
.field-chip.is-open .fc-delta{color:inherit}
.fc-arrow{font-weight:900;font-size:13px}
.fc-arrow.up{color:#ea580c}
.fc-arrow.down{color:#2563eb}
.fc-new{padding:1px 6px;border-radius:6px;background:#dc2626;color:#fff;font-size:11.5px;font-weight:800}
[data-theme=dark] .field-chip{background:#1f2937;border-color:#374151;color:#d1d5db}
[data-theme=dark] .field-chip.is-open{background:var(--accent);color:#111318;border-color:var(--accent)}

/* --- 注目分野の展開リスト（アコーディオン） --- */
.field-chip-detail{margin-top:4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
.fcd-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.fcd-meta{font-size:12px;color:var(--muted)}
.fcd-close{margin-left:auto;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--muted);width:28px;height:28px;cursor:pointer;font-size:13px}
.fcd-close:hover{border-color:var(--accent);color:var(--accent)}
[data-theme=dark] .field-chip-detail{background:#181b21;border-color:#374151}

/* --- キーワード検索 --- */
.search-form{display:flex;gap:8px;margin:4px 0 8px}
.search-input{flex:1;min-width:0;padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font:inherit;font-size:15px;box-shadow:var(--shadow)}
.search-input:focus{outline:none;border-color:var(--accent)}
.search-btn{flex-shrink:0;padding:11px 22px;border:0;border-radius:999px;background:var(--text);color:var(--card);font:inherit;font-weight:800;cursor:pointer}
.search-btn:hover{background:var(--accent)}
.search-suggest{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.search-suggest-btn{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font-size:13px;cursor:pointer}
.search-suggest-btn:hover{border-color:var(--accent);color:var(--accent)}
.search-meta{margin:4px 0 6px;font-size:13px;color:var(--muted)}
[data-theme=dark] .search-input{background:#1f2937;border-color:#4b5563;color:#f3f4f6}
[data-theme=dark] .search-suggest-btn{background:#1f2937;border-color:#374151;color:#d1d5db}
[data-theme=dark] .search-btn{background:var(--accent);color:#111318}
/* 検索セクションの上余白（旧 <br><br> の代替） */
.fv-search{margin-top:26px}

/* --- 検索結果：ヘッダー行・閉じるボタン・番号ページャー --- */
#searchResults{scroll-margin-top:76px} /* ページ切替時に固定ヘッダーに隠れないよう余白確保 */
.search-result-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:8px}
.search-result-range{font-size:12px;color:var(--muted)}
.search-close-btn{border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--muted);font-size:13px;padding:5px 12px;cursor:pointer;white-space:nowrap}
.search-close-btn:hover{border-color:var(--accent);color:var(--accent)}
[data-theme=dark] .search-close-btn{background:#1f2937;color:#d1d5db;border-color:#4b5563}

.search-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.search-pager-btn{min-width:36px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font-size:13px;cursor:pointer}
.search-pager-btn:hover:not(.is-disabled):not(.active){border-color:var(--accent);color:var(--accent)}
.search-pager-btn.active{background:var(--text);color:var(--card);border-color:var(--text);font-weight:800;cursor:default}
.search-pager-btn.is-disabled{opacity:.3;cursor:default}
[data-theme=dark] .search-pager-btn{background:#1f2937;color:#d1d5db;border-color:#4b5563}
[data-theme=dark] .search-pager-btn.active{background:var(--accent);color:#111318;border-color:var(--accent)}

/* --- モバイル調整 --- */
@media(max-width:800px){
 .fv-title{font-size:16px}
 .hl-card{flex:0 0 190px}
 .search-form{flex-direction:column}
 .search-btn{width:100%}
 .today-summary{font-size:13px}
}

/* --- スクロール戻り位置の調整（固定ヘッダーの下に隠れないよう余白確保） --- */
.fv-sec{scroll-margin-top:76px}

/* ================================================================
   5ページ構成ナビゲーション（SPA化対応）
   - PC（801px以上）：左サイドナビ固定表示。モバイル用ヘッダー・ボトムナビは非表示
   - モバイル（800px以下）：サイドナビ非表示。画面下部にボトムナビを固定表示
================================================================ */
/* --- アプリシェル（2カラムレイアウトの器） --- */
.app-shell{display:block}
.app-main{min-width:0} /* gridの子要素が横にはみ出すのを防止 */
.page[hidden]{display:none} /* 非表示ページを確実に隠す */

/* --- PC用サイドナビ（既定は非表示：801px以上で表示） --- */
.side-nav{display:none}

@media(min-width:801px){
 .app-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
 .side-nav{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:16px 14px;background:var(--card);border-right:1px solid var(--line)}
 .side-brand{margin-bottom:18px}
 .side-menu{display:flex;flex-direction:column;gap:4px}
 .side-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;font-weight:700;font-size:15px;transition:background .15s,color .15s}
 .side-menu a:hover{background:var(--soft);color:var(--accent)}
 .side-menu a.active{background:var(--soft);color:var(--accent)}
 .nav-icon{font-size:17px;width:22px;text-align:center;flex-shrink:0}
 .nav-label{flex:1;min-width:0}
 .side-nav-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
 .side-nav-foot .status{font-size:12px;color:var(--muted)}
 .side-nav-foot .icon-btn{align-self:flex-start}
 /* PCではモバイル用ヘッダーとボトムナビを隠す */
 .site-header{display:none}
 .bottom-nav{display:none}
}

/* --- ナビゲーションバッジ（ホーム新着ドット／レポートNEW） --- */
.nav-badge-dot{width:8px;height:8px;border-radius:50%;background:#dc2626;flex-shrink:0}
.nav-badge-dot[hidden]{display:none}
.nav-badge-new{padding:1px 6px;border-radius:6px;background:#dc2626;color:#fff;font-size:10.5px;font-weight:800;flex-shrink:0}
.nav-badge-new[hidden]{display:none}
[data-theme=dark] .nav-badge-dot{background:#ef4444}
[data-theme=dark] .nav-badge-new{background:#ef4444;color:#111318}

/* --- モバイル用ボトムナビ（既定は非表示：800px以下で表示） --- */
.bottom-nav{display:none}

@media(max-width:800px){
 .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0)} /* env()はiPhoneのホームバー対策 */
 .bottom-nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 6px;color:var(--muted);text-decoration:none;font-size:10px;font-weight:700}
 .bottom-nav a.active{color:var(--accent)}
 .bn-icon{font-size:19px;line-height:1.2}
 .bn-label{white-space:nowrap}
 .bottom-nav .nav-badge-dot{position:absolute;top:4px;right:calc(50% - 16px)}
 .bottom-nav .nav-badge-new{position:absolute;top:2px;right:calc(50% - 24px);font-size:9px}
 body{padding-bottom:64px} /* ボトムナビの高さ分、本文の下に余白を確保 */
}

/* --- フッター（.app-main直下のfooter要素に適用） --- */
.app-main>footer{padding:30px 18px;border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:15px}

/* ================================================================
   ホームページサイドメニュー化のコンポーネント
================================================================ */
/* --- おかえりなさいダイジェスト（前回訪問からの差分） --- */
.return-digest{padding:14px 16px;border:1px solid var(--line);border-left:4px solid #16a34a;border-radius:14px;background:var(--card);box-shadow:var(--shadow);font-size:14px;line-height:1.7}
.return-digest strong{color:var(--accent)}
.return-digest .rd-title{display:block;font-weight:800;margin-bottom:4px}
[data-theme=dark] .return-digest{background:#181b21;border-color:#2b303a;border-left-color:#4ade80}

/* --- ランキングTop3プレビューからランキングページへの導線 --- */
.goto-ranking-wrap{text-align:center;margin-top:10px}
.goto-ranking{display:inline-block;padding:10px 22px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--accent);font-size:14px;font-weight:800;text-decoration:none;box-shadow:var(--shadow)}
.goto-ranking:hover{border-color:var(--accent);background:var(--soft);text-decoration:none}
[data-theme=dark] .goto-ranking{background:#1f2937;border-color:#4b5563}
[data-theme=dark] .goto-ranking:hover{background:#312e81;border-color:var(--accent)}

/* --- デザートゾーン（日替わり3パネルを横並びに。既存 .content-grid の2カラム指定を上書き） --- */
.content-grid.home-dessert{grid-template-columns:1fr}
.home-dessert .side-stack{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.home-dessert .side-stack{grid-template-columns:1fr}}

/* --- 一息シャッフルボタン --- */
.break-shuffle{margin-top:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--muted);font-size:13px;padding:5px 12px;cursor:pointer}
.break-shuffle:hover{border-color:var(--accent);color:var(--accent)}
[data-theme=dark] .break-shuffle{background:#1f2937;color:#d1d5db;border-color:#4b5563}

/* ================================================================
   検索ページ：最近の検索（履歴チップ）
================================================================ */
.search-history-sec{margin:2px 0 8px}
.search-history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.search-history-label{font-size:12.5px;font-weight:800;color:var(--muted)}
.history-clear{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer;padding:2px 4px}
.history-clear:hover{color:#dc2626}
.history-chips{display:flex;gap:6px;flex-wrap:wrap}
.history-chip{display:inline-flex;align-items:center;gap:2px;padding:4px 6px 4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font-size:13px;cursor:pointer}
.history-chip:hover{border-color:var(--accent);color:var(--accent)}
.history-chip .hc-del{border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 6px}
.history-chip .hc-del:hover{color:#dc2626}
[data-theme=dark] .history-chip{background:#1f2937;border-color:#374151;color:#d1d5db}

/* ================================================================
   レポートページ：サブタブ／月間総集編
================================================================ */
.report-subtabs{padding-bottom:12px}
#monthlySummaryPeriod{font-size:16px}
.ms-cards{margin:8px 0 14px}
.ms-h3{font-size:20px;margin:24px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--accent)}
[data-theme=dark] .ms-h3{border-bottom-color:var(--line)}
.ms-fields{display:flex;flex-wrap:wrap;gap:6px}
.ms-fields .tag-field{font-size:13px;padding:3px 8px}
.ms-profs{display:grid;gap:12px;margin-top:6px}
.month-nav{margin-top:16px}

/* サマリーカード4枚並び（マイページ活動サマリー／月間総集編で共通使用。既存 .ts-cards の列数だけ上書き） */
#mySummaryCards,.ms-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:800px){#mySummaryCards,.ms-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================================================================
   マイページ：お気に入り追跡／今週のメモ
================================================================ */
/* --- お気に入りの伸び追跡バッジ（保存時からの増加表示） --- */
.fav-growth{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:6px;background:#ecfdf5;border:1px solid #16a34a;color:#15803d;font-size:12px;font-weight:800}
.fav-growth.is-flat{background:var(--bg);border-color:var(--line);color:var(--muted)} /* 伸びが0のときは控えめ表示 */
[data-theme=dark] .fav-growth{background:#052e16;border-color:#16a34a;color:#4ade80}
[data-theme=dark] .fav-growth.is-flat{background:#1f2937;border-color:#374151;color:#9aa3b2}

/* --- 今週のメモ一覧 --- */
.memo-week{margin-top:14px}
.memo-week-title{font-size:15px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.memo-item{padding:10px 0;border-top:1px dashed var(--line);font-size:14px}
.memo-item:first-of-type{border-top:0}
.memo-item-date{display:inline-block;margin-right:8px;font-size:12px;font-weight:800;color:var(--accent);white-space:nowrap}
.memo-item-text{white-space:pre-wrap;word-break:break-word}

/* ================================================================
   更新チップの演出（17:55〜18:00「まもなく更新」／18:00〜18:05「更新処理中」）
================================================================ */
.update-chip.is-soon{border-color:#ea580c;color:#ea580c;font-weight:700}
.update-chip.is-soon .uc-dot{background:#ea580c}
.update-chip.is-updating{border-color:#2563eb;color:#2563eb;font-weight:700}
.update-chip.is-updating .uc-dot{background:#2563eb;animation:uc-pulse 1s ease-in-out infinite}
.uc-count{font-weight:800;font-variant-numeric:tabular-nums} /* 秒表示の桁ぶれ防止 */
@keyframes uc-pulse{0%,100%{opacity:1}50%{opacity:.25}}
[data-theme=dark] .update-chip.is-soon{border-color:#fb923c;color:#fdba74}
[data-theme=dark] .update-chip.is-updating{border-color:#60a5fa;color:#93c5fd}

/* ================================================================
   振り返りメモ：個別削除ボタン（「今週のメモ」の各メモの右端に配置）
================================================================ */
.memo-item{display:flex;align-items:flex-start;gap:4px}
.memo-item .memo-item-text{flex:1;min-width:0} /* 本文は可変幅。削除ボタン分のスペースを確保 */
.memo-del{flex-shrink:0;border:1px solid transparent;border-radius:6px;background:none;color:var(--muted);width:24px;height:24px;padding:0;cursor:pointer;font-size:12px;line-height:1;margin-left:auto}
.memo-del:hover{color:#dc2626;border-color:#dc2626;background:var(--bg)}
[data-theme=dark] .memo-del{color:#9aa3b2}
[data-theme=dark] .memo-del:hover{color:#f87171;border-color:#f87171;background:#1f2937}

/* Q&Aセクションのスタイル */
.fv-sec .panel h3{margin-top:28px;font-size:18px}
.fv-sec .panel h3:first-child{margin-top:0}
.fv-sec .panel dl dt{font-weight:700;margin:16px 0 6px}
.fv-sec .panel dl dd{margin:0 0 12px 20px;color:var(--muted)}