/* notes — Chirpy 風の見た目を自前レイアウトで再現したもの。
 * 配色は jekyll-theme-chirpy の _sass/themes/_light.scss から取っている。
 * 本家と違い gem もビルドパイプラインも使わないので、GitHub Pages の
 * ブランチビルドのまま動く。ダークモードは持たない（ライト固定）。 */

/* ============================ 配色 ============================ */

:root {
  /* ライト固定。宣言しておかないと、OS がダークのときブラウザが
   * スクロールバーやフォーム部品を勝手に暗く描く。 */
  color-scheme: light;

  --main-bg: white;
  --mask-bg: #c1c3c5;
  --main-border-color: #f3f3f3;

  --text-color: #34343c;
  --text-muted-color: #757575;
  --heading-color: #2a2a2a;
  --blockquote-border-color: #eeeeee;
  --blockquote-text-color: #757575;
  --link-color: #0056b2;
  --link-underline-color: #dee2e6;
  --button-bg: #ffffff;
  --btn-border-color: #e9ecef;
  --btn-backtotop-color: #686868;
  --btn-backtotop-border-color: #f1f1f1;
  --img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(239 239 239) 100%);

  --site-title-color: rgb(113 113 113);
  --site-subtitle-color: #717171;
  --sidebar-bg: #f6f8fa;
  --sidebar-border-color: #efefef;
  --sidebar-muted-color: #545454;
  --sidebar-active-color: #1d1d1d;
  --sidebar-hover-bg: rgb(223 233 241 / 64%);
  --sidebar-btn-bg: white;
  --sidebar-btn-color: #8e8e8e;
  --avatar-border-color: white;

  --topbar-bg: rgb(255 255 255 / 70%);
  --topbar-text-color: rgb(78 78 78);

  --toc-highlight: #0550ae;
  --card-bg: white;
  --card-shadow: rgb(104 104 104 / 5%) 0 2px 6px 0, rgb(211 209 209 / 15%) 0 0 0 1px;
  --tb-odd-bg: #fbfcfd;
  --tb-even-bg: white;
  --tb-border-color: #eaeaea;
  --dash-color: silver;
  --kbd-wrap-color: #bdbdbd;
  --kbd-text-color: var(--text-color);
  --kbd-bg-color: white;

  --prompt-text-color: rgb(46 46 46 / 77%);
  --prompt-tip-bg: rgb(123 247 144 / 20%);
  --prompt-tip-icon-color: #03b303;
  --prompt-info-bg: #e1f5fe;
  --prompt-info-icon-color: #0070cb;
  --prompt-warning-bg: rgb(255 243 205);
  --prompt-warning-icon-color: #ef9c03;
  --prompt-danger-bg: rgb(248 215 218 / 56%);
  --prompt-danger-icon-color: #df3c30;

  --language-border-color: #ececec;
  --highlight-bg-color: #f6f8fa;
  --highlighter-rouge-color: #3f596f;
  --inline-code-bg: rgb(25 25 28 / 5%);
  --code-color: #3a3a3a;
}

/* ============================ 土台 ============================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  background: var(--sidebar-bg);
  color: var(--text-color);
  /* 欧文は Chirpy と同じ Source Sans / Lato。和文はそこに無いので OS のゴシックへ落ちる
   * （本家が中文に Microsoft Yahei を当てているのと同じ考え方）。 */
  font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================ サイドバー ============================ */

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  padding: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border-color);
  display: flex;
  flex-direction: column;
  z-index: 99;
}

#sidebar .profile-wrapper {
  /* 左右 1rem はサイト名を1行に収めるための実効幅（260 - 32 = 228px）。
   * 1.5rem に戻すと 212px になり「ビットコイン経済研究所」が折り返す。 */
  padding: 2.5rem 1rem 1.25rem;
  text-align: center;
}

#sidebar .avatar {
  display: inline-block;
  width: 6rem;
  height: 6rem;
  margin-bottom: 1rem;
  /* favicon（BERI マーク）の角丸に合わせた値。原本 favicon.svg は 256 四方に rx="52" なので
   * 52/256 ≒ 20%。ここを 50% に戻すと円マスクになり、タブのアイコンと輪郭が食い違う。 */
  border-radius: 22%;
  overflow: hidden;
  background: var(--img-bg);
  box-shadow: 0 0 0 2px var(--avatar-border-color), var(--card-shadow);
}

#sidebar .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

#sidebar .avatar:hover img {
  transform: scale(1.08);
}

/* サイト名は和文なので、Lato（和文グリフを持たない）に他所と同じスタックを足す。
 * font-size と letter-spacing は「ビットコイン経済研究所」全角11文字を1行に収める
 * ための値（11 × 20px = 220px ≤ 実効幅 228px）。和文は1文字 = 1em 進むので、
 * letter-spacing を足すと 11 文字ぶん効いて溢れる。大きくするなら profile-wrapper の
 * padding か #sidebar の width（:262 の margin-left と対）を一緒に見直すこと。 */
#sidebar .site-title {
  display: block;
  font-family: Lato, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--site-title-color);
}

#sidebar .site-title:hover {
  text-decoration: none;
  color: var(--sidebar-active-color);
}

#sidebar .site-subtitle {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--site-subtitle-color);
  word-break: auto-phrase;
}

#sidebar .nav-wrapper {
  flex: 1;
}

#sidebar .nav {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem;
}

#sidebar .nav-item a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.25rem;
  border-radius: 10px;
  color: var(--sidebar-muted-color);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#sidebar .nav-item a:hover {
  background: var(--sidebar-hover-bg);
  text-decoration: none;
}

#sidebar .nav-item.active a {
  color: var(--sidebar-active-color);
  background: var(--sidebar-hover-bg);
}

/* nav の系列を分ける区切り線。ビットコイン系（ホーム／論考／レポート／きのうの
 * ビットコイン）と、隣の主題（ステーブルコイン & RWA）の境目に置く。
 * 左右の inset は .nav-item a の padding（0.9rem）に揃えて、文字の始まりと線の端を
 * 縦に合わせる——ここを 0 にすると線だけが項目より外へはみ出して見える。 */
#sidebar .nav-divider {
  height: 1px;
  margin: 0.5rem 0.9rem 0.75rem;

  /* --sidebar-border-color(#efefef) も --sidebar-hover-bg も、サイドバーの地
   * (#f6f8fa) に対して明るすぎて線に見えない（前者はサイドバー右端の境界用で、
   * 本文の白地に接する場所にしか使われていない）。文字色 --sidebar-muted-color を
   * 薄めて、項目名より確実に淡く・地よりは確実に濃い、という関係にする。 */
  background: rgb(84 84 84 / 20%);
}

#sidebar .nav-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  fill: currentcolor;
}

#sidebar .sidebar-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.5rem 1rem 2rem;
}

.sidebar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sidebar-btn-bg);
  color: var(--sidebar-btn-color);
  cursor: pointer;
}

.sidebar-btn:hover {
  color: var(--sidebar-active-color);
  text-decoration: none;
}

.mode-icon {
  width: 1rem;
  height: 1rem;
  fill: currentcolor;
}

/* ============================ 本体の枠 ============================ */

#main-wrapper {
  margin-left: 260px;
  min-height: 100vh;
  background: var(--main-bg);
  display: flex;
  flex-direction: column;
}

#topbar {
  position: sticky;
  top: 0;
  height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.5rem;
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  color: var(--topbar-text-color);
  font-size: 0.95rem;
  z-index: 50;
}

/* トップはパンくずを持たず中身が空になるので、バーごと畳んで上の余白を詰める。
 * 狭い画面ではここにハンバーガーが入るため、下のメディアクエリで戻す。 */
#topbar.is-empty {
  display: none;
}

#topbar .breadcrumb a {
  color: var(--topbar-text-color);
}

#topbar .breadcrumb .sep {
  margin: 0 0.4rem;
  color: var(--text-muted-color);
}

#sidebar-trigger {
  display: none;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

#sidebar-trigger svg {
  width: 100%;
  height: 100%;
}

#main {
  flex: 1;
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 1.5rem;
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.col.content {
  flex: 1;
  min-width: 0;
}

/* ============================ 本文カード ============================ */

.post-content {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: 2.5rem 3rem 3rem;
}

.post-meta {
  color: var(--text-muted-color);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* ---- 見出し ---- */

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  color: var(--heading-color);
  font-family: Lato, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
}

.post-content h1 {
  margin: 0 0 1.5rem;
  font-size: 1.85rem;
  letter-spacing: 0.01em;
}

.post-content h2 {
  margin: 3rem 0 1rem;
  padding-bottom: 0.4rem;
  font-size: 1.4rem;
  border-bottom: 1px solid var(--main-border-color);
}

.post-content h3 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.15rem;
}

.post-content h4 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1rem;
}

/* 見出しにカーソルを置くとアンカーが出る（Chirpy と同じ挙動）。 */
.post-content .anchor {
  margin-left: 0.4rem;
  opacity: 0;
  color: var(--text-muted-color);
  font-weight: 400;
  transition: opacity 0.1s;
}

.post-content h2:hover .anchor,
.post-content h3:hover .anchor {
  opacity: 1;
}

/* ---- 段落・リスト ---- */

.post-content p {
  margin: 0 0 1.15rem;
}

.post-content ul,
.post-content ol {
  margin: 0 0 1.15rem;
  padding-left: 1.75rem;
}

.post-content li {
  margin-bottom: 0.4rem;
}

.post-content li::marker {
  color: var(--text-muted-color);
}

.post-content strong {
  color: var(--heading-color);
  font-weight: 700;
}

.post-content a {
  border-bottom: 1px solid var(--link-underline-color);
}

.post-content a:hover {
  border-bottom-color: var(--link-color);
  text-decoration: none;
}

.post-content hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--main-border-color);
}

/* ---- 引用 ---- */

.post-content blockquote {
  margin: 0 0 1.25rem;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--blockquote-border-color);
  color: var(--blockquote-text-color);
}

.post-content blockquote > p:last-child {
  margin-bottom: 0;
}

/* ---- 注意書き（{: .prompt-info } 等） ---- */

.post-content [class^='prompt-'] {
  position: relative;
  margin: 1.5rem 0;
  padding: 0.9rem 1rem 0.9rem 3rem;
  border-radius: 6px;
  color: var(--prompt-text-color);
}

.post-content [class^='prompt-']::before {
  position: absolute;
  left: 1rem;
  top: 0.95rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.post-content .prompt-tip {
  background: var(--prompt-tip-bg);
}
.post-content .prompt-tip::before {
  content: '💡';
  color: var(--prompt-tip-icon-color);
}
.post-content .prompt-info {
  background: var(--prompt-info-bg);
}
.post-content .prompt-info::before {
  content: 'ℹ';
  color: var(--prompt-info-icon-color);
}
.post-content .prompt-warning {
  background: var(--prompt-warning-bg);
}
.post-content .prompt-warning::before {
  content: '⚠';
  color: var(--prompt-warning-icon-color);
}
.post-content .prompt-danger {
  background: var(--prompt-danger-bg);
}
.post-content .prompt-danger::before {
  content: '🚫';
  color: var(--prompt-danger-icon-color);
}

.post-content [class^='prompt-'] > p:last-child {
  margin-bottom: 0;
}

/* ---- 図版 ---- */

.post-content figure {
  margin: 1.75rem 0;
  text-align: center;
}

.post-content figure img {
  border-radius: 6px;
  background: var(--img-bg);
}

.post-content figcaption {
  margin-top: 0.6rem;
  color: var(--text-muted-color);
  font-size: 0.8rem;
  line-height: 1.5;
  word-break: auto-phrase;
}

/* ---- 動画（YouTube 埋め込み） ----
 * figure なので margin と figcaption は上の図版の指定がそのまま効く。
 * 縦横比はカードタイルと同じく aspect-ratio で持つ（padding-top ハックは使わない）。 */

.post-content .video-embed iframe {
  display: block;
  /* 本文幅いっぱいだと動画が主役になりすぎるので 70% に絞って中央へ置く。
   * 狭い画面（〜849px）では下のメディアクエリで 100% に戻す（70% だと小さすぎる）。 */
  width: 70%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
  background: var(--img-bg);
}

/* ---- ツイート埋め込み ----
 * widgets.js が中央寄せ・最大幅 550px の <twitter-widget> を器に差し込む。
 * ここは器の縦間隔だけ持つ（図版と同じリズム）。align:center は JS 側で指定。 */

.post-content .tweet-embed {
  margin: 1.75rem 0;
  text-align: center;
}

/* ---- リンクカード ----
 * 本文に裸の URL を1行置くと、site.js が事前取得済みの OGP からカードに置き換える
 * （データが無ければ素のリンクのまま → adr/0013）。トップのタイルと同じ質感
 * （--card-bg / --card-shadow / 角丸 10px）にして、記事の中で浮かないようにする。
 * サムネイルは 1.91:1（og:image の一般的な比率）を右に固定幅で置く。 */

.post-content a.link-card {
  align-items: stretch;
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  color: inherit;
  display: flex;
  margin: 1.75rem 0;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.post-content a.link-card:hover {
  box-shadow: rgb(104 104 104 / 12%) 0 4px 12px 0, rgb(211 209 209 / 25%) 0 0 0 1px;
  transform: translateY(-2px);
}

.link-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
  min-width: 0;                /* 長い URL・英文でカードを押し広げさせない */
  padding: 0.9rem 1.1rem;
}

.link-card-title {
  color: var(--heading-color);
  font-family: Lato, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  word-break: auto-phrase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
}

.post-content a.link-card:hover .link-card-title {
  color: var(--link-color);
}

.link-card-desc {
  color: var(--text-muted-color);
  font-size: 0.85rem;
  line-height: 1.6;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
}

.link-card-meta {
  color: var(--text-muted-color);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-card-thumb {
  background: var(--img-bg);
  border-left: 1px solid var(--main-border-color);
  flex: 0 0 34%;
  max-width: 240px;
  overflow: hidden;
}

.link-card-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* ---- 表 ---- */

.post-content .table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
}

.post-content table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 0.9rem;
}

.post-content th,
.post-content td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--tb-border-color);
  text-align: left;
}

.post-content th {
  color: var(--heading-color);
  font-weight: 700;
}

.post-content tbody tr:nth-child(odd) {
  background: var(--tb-odd-bg);
}

.post-content tbody tr:nth-child(even) {
  background: var(--tb-even-bg);
}

/* ---- コード ---- */

.post-content code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.post-content :not(pre) > code {
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  background: var(--inline-code-bg);
  color: var(--highlighter-rouge-color);
}

.post-content pre {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--language-border-color);
  border-radius: 6px;
  background: var(--highlight-bg-color);
  color: var(--code-color);
  line-height: 1.6;
}

.post-content kbd {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--kbd-wrap-color);
  border-radius: 4px;
  border-bottom-width: 2px;
  background: var(--kbd-bg-color);
  color: var(--kbd-text-color);
  font-family: inherit;
  font-size: 0.8rem;
}

/* ============================ 目次 ============================ */

#panel-wrapper {
  flex: 0 0 16rem;
  width: 16rem;
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

#panel-wrapper.empty {
  display: none;
}

.panel-heading {
  margin: 0 0 0.75rem;
  color: var(--heading-color);
  font-family: Lato, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--main-border-color);
}

#toc ul ul {
  border-left: 0;
}

#toc a {
  display: block;
  padding: 0.25rem 0 0.25rem 0.85rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--text-muted-color);
  font-size: 0.8rem;
  line-height: 1.5;
}

#toc a:hover {
  color: var(--toc-highlight);
  text-decoration: none;
}

#toc .toc-h3 a {
  padding-left: 1.75rem;
  font-size: 0.75rem;
}

#toc a.active {
  color: var(--toc-highlight);
  border-left-color: var(--toc-highlight);
  font-weight: 600;
}

/* ============================ 付属品 ============================ */

#footer {
  padding: 2rem 1.5rem;
  color: var(--text-muted-color);
  font-size: 0.8rem;
  text-align: center;
  border-top: 1px solid var(--main-border-color);
}

#footer p {
  margin: 0;
}

/* フッターは muted な文字色。リンクだけリンク色で浮かないよう地の色に揃える。 */
#footer a {
  color: inherit;
  text-decoration: underline;
}

#back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--btn-backtotop-border-color);
  border-radius: 50%;
  background: var(--button-bg);
  color: var(--btn-backtotop-color);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  z-index: 60;
}

#back-to-top.show {
  display: flex;
}

#back-to-top svg {
  width: 1.1rem;
  height: 1.1rem;
}

#sidebar-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--mask-bg);
  opacity: 0.7;
  z-index: 98;
}

#sidebar-mask.show {
  display: block;
}

/* ============================ トップのカードタイル ============================ */

/* 画像は X 投稿用カードの流用。記事は横長(1200x630)でタイトルが焼かれているので切らず、
 * レポートは縦長ポスターなので上端(ヘッダー+価格)だけを 16:9 で切り出す。→ _includes/card-grid.html */

.tile-section {
  margin-top: 2.5rem;
}

.tile-heading {
  color: var(--heading-color);
  font-family: Lato, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.tile-heading a {
  color: inherit;
  text-decoration: none;
}

.tile-heading a:hover {
  color: var(--link-color);
}

.tile-lead {
  color: var(--text-muted-color);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

/* 読み物とレポートで同じ下限にして、上下のタイルの縦線を揃える。
 * min() を挟まないと、画面が下限値より狭いときにトラックが縮まず横へあふれる（スマホで実測） */
.tile-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.tile-link {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile-link:hover {
  box-shadow: rgb(104 104 104 / 12%) 0 4px 12px 0, rgb(211 209 209 / 25%) 0 0 0 1px;
  transform: translateY(-2px);
}

.tile-thumb {
  background: var(--img-bg);
  border-bottom: 1px solid var(--main-border-color);
  display: block;
  overflow: hidden;
}

.tile-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.tile-thumb--article {
  aspect-ratio: 1200 / 630;   /* カードの実寸。切らずに全面を見せる */
}

.tile-thumb--report {
  aspect-ratio: 16 / 9;
}

.tile-thumb--report img {
  object-position: top;       /* 縦長ポスターの上端だけ。全体を縮小すると本文が潰れる */
}

.tile-body {
  display: block;
  padding: 0.9rem 1rem 1.1rem;
}

.tile-title {
  color: var(--heading-color);
  display: block;
  font-family: Lato, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
}

.tile-link:hover .tile-title {
  color: var(--link-color);
}

/* 画像にタイトルが焼かれている記事タイル用。見た目からは消すがリンクのラベルとしては残す */
.tile-title--sr {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.tile-meta {
  color: var(--text-muted-color);
  display: block;
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

.tile-more {
  font-size: 0.9rem;
  margin: 1rem 0 0;
}

.tile-more a {
  color: var(--link-color);
  text-decoration: none;
}

.tile-more a:hover {
  text-decoration: underline;
}

/* きのうのビットコイン（btc-news）のタイル。card.png を持たないテキスト記事なので、
 * サムネイルの代わりにその日の見出しを 3 本プレビューして中身を見せる。
 * 見出し行頭の絵文字（🏦🇺🇸⚡…）をそのまま箇条書きの目印に使う。 */
.tile-grid--news .tile-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tile-headlines {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.tile-headlines li {
  color: var(--text-muted-color);
  font-size: 0.82rem;
  line-height: 1.55;
  margin-top: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;   /* 見出しは長いので 1 行で省略する */
  white-space: nowrap;
}

.tile-headlines li:first-child {
  margin-top: 0;
}

/* 日付はカード下端へ寄せて、見出し本数が違っても下辺が揃うようにする */
.tile-grid--news .tile-meta {
  margin-top: auto;
  padding-top: 0.6rem;
}

/* 記事末尾の関連記事（同カテゴリ）。トップのタイルをそのまま流用し、列数だけ 2 に固定する。
 * auto-fill のままだと目次パネルの有無で本文カラムが約 914px / 約 1202px と変わり、
 * 2 列と 3 列で揺れる。4 件を 2×2 で見せると決めたので固定列にする。 */
.tile-section--related {
  margin-top: 2rem;
}

.tile-grid--related {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 論考の一覧ページ（/articles/）のタイル。トップ・関連記事と同じ形に description を足した変種。
 * 一覧だけは「どれを読むか」を選ぶ場なので、カードの絵とタイトルだけでは足りない。
 * 3 行で切るのは、200 字を超える description が1枚だけタイルを伸ばすのを防ぐため（全文は
 * DOM に残るので読み上げには届く）。
 *
 * 列は auto-fill のまま、下限だけ 260 → 300px へ上げる（description を読ませるため）。
 * --related を固定列にしたのは目次パネルで本文カラムが 914px ⇄ 1202px と跳ぶからで
 * （→ notes-design docs/lessons.md）、このページは目次を持たないので跳ばない。 */
.tile-section--index {
  margin-top: 2rem;
}

.tile-grid--index {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

/* description の行数がタイルごとに違うので、日付だけ下端へ寄せて下辺を揃える。
 * .tile-grid--news と同じ狙いだが、あちらはサムネイルを持たないので .tile-body に
 * height: 100% を掛けている。こちらはサムネイルがある＝その分はみ出すので flex: 1 を使う。 */
.tile-grid--index .tile-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.tile-grid--index .tile-meta {
  margin-top: auto;
  padding-top: 0.6rem;
}

.tile-desc {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--text-muted-color);
  display: -webkit-box;
  font-size: 0.85rem;
  line-clamp: 3;
  line-height: 1.6;
  margin-top: 0.5rem;
  overflow: hidden;
}

/* ============================ 画面幅 ============================ */

/* 目次を畳む */
@media (max-width: 1199px) {
  #panel-wrapper {
    display: none;
  }
}

/* サイドバーを引き出しにする */
@media (max-width: 849px) {
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  #sidebar.show {
    transform: translateX(0);
  }

  #main-wrapper {
    margin-left: 0;
  }

  #sidebar-trigger {
    display: block;
  }

  /* 狭い画面ではトップでもバーが要る（ハンバーガーの置き場）。 */
  #topbar.is-empty {
    display: flex;
  }

  #main {
    padding: 1rem 0.75rem;
  }

  /* 狭い画面では 70% だと小さすぎるので本文幅いっぱいに戻す。 */
  .post-content .video-embed iframe {
    width: 100%;
  }

  .post-content {
    padding: 1.75rem 1.25rem 2rem;
    border-radius: 6px;
    font-size: 1.125rem;   /* 18px。スマホの本文だけ拡大。見出しは rem 基準（root 16px）で据え置き */
  }

  .post-content h1 {
    font-size: 1.5rem;
  }

  .post-content h2 {
    font-size: 1.25rem;
    margin-top: 2.25rem;
  }
}

/* 関連記事だけの折り返し。スマホ幅で 2 列にすると 1 枚あたり 180px 程度になり、
 * カードに焼かれたタイトルが読めない。ここだけ 1 列へ落とす。 */
@media (max-width: 559px) {
  .tile-grid--related {
    grid-template-columns: 1fr;
  }

  /* リンクカードは横並びをやめて画像を上に積む。34% の帯のままだと、
   * スマホ幅ではサムネイルも本文も両方が読めない幅になる。 */
  .post-content a.link-card {
    flex-direction: column-reverse;
  }

  .link-card-thumb {
    aspect-ratio: 1.91 / 1;
    border-bottom: 1px solid var(--main-border-color);
    border-left: 0;
    flex: none;
    max-width: none;
  }
}

@media print {
  #sidebar,
  #topbar,
  #panel-wrapper,
  #back-to-top {
    display: none;
  }

  #main-wrapper {
    margin-left: 0;
  }

  .post-content {
    box-shadow: none;
    padding: 0;
  }
}