/* 画面の共通の上書き（全ページの CSS の最後に読む）。
   1) 作品名は最大 2 行（モックで 1 行の場所は 1 行）。超える分は「…」で省略する（2026-10-12 ユーザーの指示。作品名だけは省略してよい）。正式名称は変えず、
      ポインタを重ねると title で全文が出る。読み上げは全文。作品詳細の見出しは .wn を使わず全文を出す
   2) スマートフォンの幅: 左の案内を上の帯の「メニュー」で開く。段は 1 列。横にはみ出さない
   3) 読み込みの失敗の表示 */
.wn, .wn.l2 { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; line-clamp: 2;
  white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis; overflow-wrap: anywhere; word-break: normal; min-width: 0; }
.wn.l1 { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis; min-width: 0; }
#tip { display: none !important; }
#load-note { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 15px; }   /* 読み込みの知らせ（boot.js。#34） */
#load-note.load-err { background: #fff1f1; border: 1px solid #f3c2c2; color: #8a2424; }
#load-note.load-wait { background: #eef3ff; border: 1px solid #c9d6f5; color: #26407a; }
.navbtn { display: none; }
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "side" "main"; padding: 10px 12px 40px; column-gap: 0; }
  .top { position: relative; }
  .navbtn { display: inline-flex; position: absolute; right: 10px; bottom: 10px; align-items: center; gap: 6px; font: inherit; font-size: 15px; font-weight: 700;
    color: var(--accent); background: rgba(255,255,255,.95); border: 0; border-radius: 999px; padding: 6px 16px; box-shadow: 0 2px 8px rgba(40,30,80,.18); cursor: pointer; }
  .side { position: static; display: none; }
  body.navopen .side { display: flex; }
  .sidecol { position: static; gap: 10px; }
  .soon { display: none; }                      /* スマートフォン: メニューを開いたときにメニューの下に出す（本文の上に積まない） */
  body.navopen .soon:not([hidden]) { display: block; }
  main { min-width: 0; }
  /* 横に並ぶ格子は 1 列へ */
  .lead-grid, .grid, .split, .others, .ckg, .lo, .mv, .hero3, .wk-head, .wk-grid, .sr-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .wk-grid > .wk-sec { grid-row: auto !important; grid-column: 1 !important; display: block !important; }
  .rvx, .lsc, .gr3 { grid-template-columns: 64px minmax(0, 1fr) !important; }
  .rvx > .rvx-g, .lsc > .lsc-g, .gr3 > .gr-tl { grid-column: 1 / -1; }
  .rvx > .art, .lsc > .art { width: 64px !important; }
  .rv-t, .rv-t.pa-t { --cols: 40px minmax(0, 1fr) !important; }
  .rv-h { display: none !important; }
  .rv-r { grid-template-columns: 40px minmax(0, 1fr) !important; row-gap: 4px; }
  .rv-r > .art { grid-row: span 3; width: 40px !important; }
  .rv-r > .ar { display: none; }
  .rv-r > .rv-last, .rv-r > .rv-q { grid-column: 2; }
  .nwt-h { display: none !important; }
  .nwt-r { grid-template-columns: 48px minmax(0, 1fr) !important; }
  .nwt-r > .nwt-was, .nwt-r > .nwt-now { grid-column: 2; } .nwt-r > .ar { display: none; }
  .ct-h { display: none !important; }
  .g-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sp-digest, .sp-bar, .pa-sec, .sr-panel { padding-left: 14px !important; padding-right: 14px !important; }
  .sec-h h2, .sp-title h2 { font-size: 22px !important; }
  .lsg { grid-template-columns: 70px repeat(var(--n), minmax(0, 1fr)) !important; gap: 2px !important; }
  html[lang=en] .lsg { grid-template-columns: 78px repeat(var(--n), minmax(0, 1fr)) !important; }
  .lsg .lab { font-size: 12px; white-space: nowrap; } .lsg .lab small { font-size: 11px; }   /* 14 列にしたので言語名の列を広げ、折り返さない（「スペイン/語」と割れていた） */
  .lsg .c { height: 24px; font-size: 11px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .lsg .hd { font-size: 11px; }
  .wk-ch { gap: 3px !important; }

}

/* 英語の表示: 日付・人数の幅（日本語より長い） */

/* カード全体を作品詳細へのリンクにする（カードに重ねる透明のリンク。カードの中のほかのリンクは前面に残す） */
.sr-link, .cardlink { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
:has(> .sr-link), :has(> .cardlink) { position: relative; }
:has(> .sr-link):hover, :has(> .cardlink):hover { box-shadow: 0 0 0 2px rgba(82,70,201,.35), 0 6px 18px rgba(40,30,80,.08); }
.sr-link:focus-visible, .cardlink:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-card a:not(.sr-link), :has(> .cardlink) a:not(.cardlink), :has(> .cardlink) button { position: relative; z-index: 2; }

/* 世界で広がる: 「＋N」を押して全部を開いた時系列は折り返す（カードからはみ出さない） */
.tl.wrap { display: flex !important; flex-wrap: wrap; row-gap: 12px; max-width: 100%; }
.tl.wrap::before { display: none; }
.tl.wrap li { flex: 0 0 96px !important; }
.gr3 { grid-template-columns: 76px minmax(0, 1fr) minmax(0, auto); }
.gr3 > .gr-tl { max-width: 540px; min-width: 0; }

/* 言語圏の広がり: 言語名（ポルトガル語・カタルーニャ語など）を欠けさせない。長い名前は折り返す */
.lsg { grid-template-columns: 92px repeat(var(--n), minmax(0, 1fr)); }
.lsg .lab { white-space: normal; overflow-wrap: anywhere; }
html[lang=en] .lsg { grid-template-columns: 84px repeat(var(--n), minmax(0, 1fr)); }

.lw-n { color: inherit; text-decoration: none; } .lw-n:hover { color: var(--accent); }

/* スマートフォンの幅（内側のスクロールは使わない。省略しない。縦に積む） */
@media (max-width: 900px) {
  .g-kick { flex-wrap: wrap; row-gap: 8px; }
  .tl.big { display: flex !important; flex-wrap: wrap; row-gap: 12px; max-width: 100%; }
  .tl.big::before { display: none; }
  .tl.big li { flex: 0 0 96px !important; }
  .tl:not(.big) { display: flex !important; flex-wrap: wrap; row-gap: 12px; max-width: 100%; }
  .tl:not(.big)::before { display: none; }
  .gr3 > .gr-tl { max-width: 100%; }
  table, table.lw-t { display: table; overflow: visible; width: 100%; table-layout: auto; }
  .lw-t th, .lw-t td { padding-left: 4px !important; padding-right: 4px !important; font-size: 14px; }
  .lw-t td.im { width: 36px; } .lw-t td.im .art { width: 32px !important; }

  .nwt-now { gap: 4px 8px; }
  .nwt-r > .nwt-now { grid-column: 1 / -1; max-width: 420px; }   /* 言語ごとの人数は行の左端から（狭い列で星が折り返さない・人数が星から離れない。#36） */
  /* 狭い幅: 1 行目に言語名と人数、2 行目に記号（どのカードでも同じ位置。dense で人数を 1 行目の右へ詰める） */
  .nwt-now { grid-template-columns: minmax(0, 1fr) max-content; grid-auto-flow: row dense; }
  .nwt-now .dots { grid-column: 1 / -1; margin-bottom: 2px; flex-wrap: wrap; } .nwt-now b { grid-column: 2; }
}

/* 日付の切り替え: 日付の札 → 月間カレンダー（データのある日だけ選べる）・最新に戻る */
.g-dn { flex-wrap: wrap; row-gap: 8px; }
.g-dn .dsel { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; }
.g-dn .dsel .dcar { font-size: 11px; color: var(--ink-3); }
.g-dn .rb:disabled, .g-dn .latest:disabled { opacity: .4; cursor: default; }
.g-dn .rb:not(:disabled), .g-dn .latest:not(:disabled) { cursor: pointer; }
.dcal-w { position: relative; display: inline-flex; }
.dcal { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 296px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(40,30,80,.18); padding: 12px 12px 10px; }
.dcal[hidden] { display: none; }
.dc-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dc-h b { font-size: 15px; color: var(--ink); }
.dc-m { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 16px; color: var(--ink-2); cursor: pointer; }
.dc-m:disabled { opacity: .3; cursor: default; }
.dc-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dc-w { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-3); padding: 2px 0 4px; }
.dc-w.su { color: #c0566e; } .dc-w.sa { color: #4f6fc7; }
.dc-d { height: 34px; display: grid; place-items: center; border-radius: 8px; font: inherit; font-size: 14px; border: 0; }
.dc-d.off { color: #c6c3d3; }
button.dc-d { background: var(--accent-soft); color: var(--accent); font-weight: 700; cursor: pointer; }
button.dc-d:hover { background: #dcd7fb; }
button.dc-d.on { background: var(--accent); color: #fff; }
button.dc-d.lt:not(.on) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.dc-d:focus-visible, .dc-m:focus-visible, .g-dn button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-n { margin: 8px 2px 0; font-size: 12px; color: var(--ink-3); }
@media (max-width: 900px) { .dcal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(320px, calc(100vw - 24px)); } }

/* ダッシュボード: 今日の兆しの AI の解説は 2 行で省略し「続きを読む」で全文（モックの説明の高さに合わせる） */
.g-lead .lede .lede-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.g-lead .lede .lede-t.open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.g-lead .lede-more { margin-top: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer; }
/* 今チェックしておきたい作品の小さいカード: 変化の 1 行は 1 行、説明は 2 行まで（モックの高さ。全文は title） */
.ck2-l { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ck2-m { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* 世界地図の背景は白（周りのカードは変えない） */
.lo-map { background: #fff !important; }

/* 世界で広がる: 時系列の「＋N」（あいだの点をまとめる。押すと全部）・今日の兆しは 3 行で省略 */
.tl.short li.tl-x { display: none; }
.tl .tl-more { flex: 0 0 96px !important; align-items: flex-start; }
.tl .tl-more button { margin-top: -4px; width: 40px; height: 22px; border-radius: 999px; border: 1px dashed #b9b2dc; background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent); cursor: pointer; position: relative; z-index: 1; }
.tl.open { flex-wrap: wrap; row-gap: 12px; }
.tl.open::before { display: none; }
/* スマートフォン: 時系列は 1 行 1 件の縦の一覧（日付の順に上から。点を縦の線でつなぐ）。全部の言語を見せ「＋N」は使わない
   （2 列の格子に折り返すと順が左右に飛び、＋N で途中の言語が抜けて読めなかった。2026-10-21 のユーザーの指摘） */
@media (max-width: 640px) {
  .tl, .tl.big, .tl:not(.big), .tl.open, .tl.wrap { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; row-gap: 4px !important; max-width: 100%; position: relative; }
  .tl::before, .tl.big::before, .tl:not(.big)::before, .tl.open::before, .tl.wrap::before { display: block !important; left: 6px !important; right: auto !important; top: 8px !important; bottom: 8px !important; width: 2px !important; height: auto !important; }
  .tl li, .tl.big li, .tl.wrap li { flex: 0 0 auto !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; padding-right: 0 !important; }
  .tl.short li.tl-x { display: flex !important; }
  .tl .tl-more { display: none !important; }
  .tl .d { margin-top: 0 !important; min-width: 3.4em; }
  .gr3 .gr-tl, .hero3 .h-tl { justify-content: flex-start !important; }   /* PC の右寄せのままだと、作品ごとに一覧の幅が違い左の位置がずれた */
  .tl, .tl.big { width: 100%; }
}
.sp-digest .dg-t.clamp3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.sp-digest .dg-t.clamp3.open { display: block; -webkit-line-clamp: unset; }
.sp-digest .lede-more, .g-lead .lede-more { margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer; }
.g-kick .lede-more { margin: 0 0 0 auto; }

/* スマートフォンの幅（2026-10-12 モックとの比較で崩れていた箇所）。PC の作り（カードの中の並び）を保ったまま、列だけを減らす */
@media (max-width: 900px) {
  /* ダッシュボード: 今日の注目（文 + 小さめの画像）・ほかに動き始めた作品（1 列）・話題が多かった作品（1 列） */
  .ck1 { grid-template-columns: minmax(0, 1fr) 96px !important; gap: 12px; padding: 16px; }
  .ck1-im .art { width: 96px !important; height: 136px !important; }
  .ck1 h3.wn { font-size: 22px !important; }
  .ck1-line { font-size: 15px; }
  .ck-rest { grid-template-columns: minmax(0, 1fr) !important; }
  .rank { grid-template-columns: minmax(0, 1fr) !important; }
  /* 世界で広がる: 今日の広がりの参照の行・初めて複数の言語の行の画像・前から複数の言語の行 */
  .gr-ref { grid-template-columns: 36px minmax(0, 1fr) !important; row-gap: 2px; }
  .gr-ref .gr-h, .gr-ref .to { grid-column: 2; white-space: normal; }
  .nwt-r > .art { width: 48px !important; }
  .ct-list li { grid-template-columns: 36px minmax(0, 1fr) auto !important; row-gap: 6px; }
  .ct-list li .lcs { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
  /* 作品を探す: 見出しの下に札を並べる（札を細い列に押し込まない） */
  .sr-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  .sr-row .sr-l2 { margin-top: 6px; }
  /* 言語別: 作品名の列を広く（作品名は 2 行まで）・上の 3 つの数は 1 列に（見出し・数を横に） */
  .lw-t td:nth-child(2) { width: 100%; }
  .lw-t th { white-space: normal; font-size: 12px; } .lw-t td.r, .lw-t td:last-child { white-space: nowrap; } .lw-t .lw-n { display: block; }
  .lw-sum { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  .lw-sum > div { display: flex !important; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px !important; }
  .lw-sum > div b { font-size: 24px !important; white-space: nowrap; }
}
/* 観測が一部だけの日の注記（ダッシュボードのいつもより話題が増えた作品） */
.mv-partial { margin: 4px 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--soft); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.mv-partial.ok { background: #EEF6F3; color: var(--ink-2); }