/* assets/css/content.css
   Content base（記事本文・共通タイポ）
   依存: base.css のテーマ変数
===================================================== */
@layer comp {

  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6{
    color: var(--cd-fg);
    line-height: 1.25;
  }

  /* H2 巨大ナンバリング用のカウンタ初期化 */
  .entry-content{
    counter-reset: cd-h2-index;
  }

  .entry-content h1{
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
    margin: 1.6em 0 .8em;
  }

  .entry-content h4{
    font-size: 1.05rem;
    margin: 1.2em 0 .6em;
  }

  .entry-content p{
    margin: 1.05em 0;
    color: var(--cd-fg);
  }

  .entry-content a{
    color: var(--cd-link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .entry-content ul,
  .entry-content ol{
    margin: 1.0em 0 1.2em 0;
    padding-left: 30px;
  }

  .entry-content li{
    margin: .4em 0;
  }

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

  .entry-content figure{
    max-width: 100%;
  }

  /* WP キャプション */
  .wp-caption{
    max-width: 100%;
  }

  .wp-caption-text{
    font-size: .9rem;
    color: var(--cd-muted);
    margin-top: .4em;
  }

  /* ===============================
     テーブル（ベーシック）
  =============================== */

  .entry-content table{
    width: 100%;
    border-collapse: collapse;
    margin: 1.6em 0;
    font-size: .95rem;
  }

  .entry-content caption{
    margin-bottom: .4em;
    font-size: .9rem;
    color: var(--cd-muted);
    text-align: left;
  }

  .entry-content thead th{
    padding: .6em .7em;
    font-weight: 600;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.22);
  }

  .entry-content tbody tr:nth-child(even){
    background: rgba(255,255,255,.015); /* ごく薄い縞で読みやすさだけ上げる */
  }

  .entry-content th,
  .entry-content td{
    padding: .55em .7em;
    border-bottom: 1px solid rgba(255,255,255,.10);
    vertical-align: top;
  }

  .entry-content tbody tr:last-child th,
  .entry-content tbody tr:last-child td{
    border-bottom-color: rgba(255,255,255,.06);
  }

  /* =====================================
     WPブロック (.wp-block-table) の上書き
     - Gutenberg標準の 3px ボーダーなどをリセットして
       CryptoDepth標準のテーブル見た目に揃える
  ===================================== */

  .entry-content .wp-block-table{
    margin: 1.6em 0;
  }

  .entry-content .wp-block-table table{
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
  }

  .entry-content .wp-block-table thead{
    border-bottom: none;
  }

  .entry-content .wp-block-table thead th{
    padding: .6em .7em;
    font-weight: 600;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.22);
  }

  .entry-content .wp-block-table tbody tr:nth-child(even){
    background: rgba(255,255,255,.015);
  }

  .entry-content .wp-block-table td,
  .entry-content .wp-block-table th{
    padding: .55em .7em;
    border-bottom: 1px solid rgba(255,255,255,.10);
    vertical-align: top;
  }

  .entry-content .wp-block-table tbody tr:last-child td,
  .entry-content .wp-block-table tbody tr:last-child th{
    border-bottom-color: rgba(255,255,255,.06);
  }

  /* テーブル：スマホ時の微調整（共通化） */
  @media (max-width: 640px){
    .entry-content table,
    .entry-content .wp-block-table table{
      font-size: .9rem;
    }

    .entry-content th,
    .entry-content td,
    .entry-content .wp-block-table th,
    .entry-content .wp-block-table td{
      padding: .5em .55em;
    }
  }

  /* 引用 */
  .entry-content blockquote{
    margin: 1.4em 0;
    padding: .8em 1em;
    border-left: 3px solid var(--cd-accent);
    background: rgba(255,255,255,.04);
  }

  .entry-content blockquote p{
    margin: 0;
  }

  /* ===============================
     見出し装飾（本文 h2 / h3）
  =============================== */

  .entry-content h2{
    font-size: clamp(1.4rem, 1.1rem + 1.0vw, 1.9rem);
    margin: 1.6em 0 1.0em;
    line-height: 1.25;
    position: relative;
    padding-bottom: .55em;
    border-bottom: 1px solid rgba(255,255,255,.18);

    /* 巨大ナンバリング用カウンタ */
    counter-increment: cd-h2-index;
    z-index: 1;
  }

  .entry-content h2::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 130px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      color-mix(in oklab, var(--cd-accent), white 12%),
      transparent
    );
  }

  /* 背面の巨大ナンバー（01, 02, 03...） */
  .entry-content h2::after{
    content: counter(cd-h2-index, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -0.6em;                     /* 見出しより少し上にかぶせる */
    font-size: 7.5rem;                /* PC時の巨大感 */
    font-weight: 600;                 /* 800より軽くして“ゴツさ”を軽減 */
    line-height: 1;
    color: rgba(255,255,255,0.15);    /* “見えるけど読ませない”濃度 */
    z-index: -1;                      /* 背面へ */
    pointer-events: none;
    font-family: inherit;             /* 見出しと同じフォントを継承（iPhone対策） */
    letter-spacing: 0.04em;           /* 数字を少し締める */
  }

  .entry-content h3{
    font-size: clamp(1.2rem, 1.0rem + .8vw, 1.5rem);
    margin: 1.3em 0 .9em;
    line-height: 1.5;
    position: relative;
    padding-left: .7em;
  }

  .entry-content h3::before{
    content: "";
    position: absolute;
    left: 0;
    top: .25em;
    bottom: .25em;
    width: 3px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--cd-accent), white 15%);
  }

  /* モバイル時の巨大ナンバー調整 */
  @media (max-width: 640px){
    .entry-content h2::after{
      font-size: 6.6rem;
      top: -0.45em;
      font-weight: 500;               /* モバイルはさらに軽く */
    }
  }

  /* ===============================
     アーカイブ見出し（list-header）
     ※ 読み幅 760px の責務自体は reading.css 側に集約
  =============================== */

  .list-header{
    max-width: var(--cd-read-width);
    margin: 0 0 1.8rem;
  }

  .list-title{
    font-size: clamp(1.4rem, 1.1rem + 1.0vw, 1.9rem);
    line-height: 1.4;
    margin: 0 0 .8em;
  }

  .archive-description{
    margin-top: .4em;
    color: var(--cd-muted);
    font-size: .95rem;
  }

  /* ===============================
     QuickCard（30秒カード）
     - 導入直後に挟む「要点まとめ」用の小さなカード
     - H2と同系統の“しゅっ”としたアクセントラインを上辺にだけ追加
  =============================== */

  .cd-quickcard{
    margin: 1.4em 0 1.9em;               /* 少しだけ上を詰める */
    padding: 1.1em 1.25em 1.25em;
    border-radius: 18px;
    position: relative;
    overflow: hidden;

    /* 背景の光を弱めて、素直なダークカード寄りに */
    background: rgba(255,255,255,.025);

    /* 枠線はやや強めにして“カード感”を出す */
    border: 1px solid rgba(255,255,255,.14);

    /* 右下方向にごく薄い水色のグローを追加 */
    box-shadow:
      0 0 0 1px rgba(0,0,0,.55), /* ごく薄い輪郭補強 */
      10px 20px 40px color-mix(in oklab, var(--cd-accent), transparent 78%);
  }

  @media (max-width: 640px){
    .cd-quickcard{
      margin: 1.3em 0 1.7em;
      padding: .95em 1.0em 1.1em;
      border-radius: 16px;

      /* モバイルはやや弱めに */
      box-shadow:
        0 0 0 1px rgba(0,0,0,.5),
        6px 14px 28px color-mix(in oklab, var(--cd-accent), transparent 90%);
    }

    .cd-quickcard::before{
      left: 14px;
      width: 115px;
    }
  }

  /* 上部のピル群との間隔 */
  .cd-quickcard .pill-group{
    margin: 0 0 .65rem;
  }

  /* タイトル行 {qc_title} */
  .cd-quickcard .cd-qc-title{
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .45rem;
  }

  /* 要点リスト {qc_point_*} */
  .cd-quickcard .cd-qc-points{
    margin: .2em 0 0;
    padding-left: 1.2em;
    list-style: disc;
    font-size: .95rem;
    line-height: 1.7;
  }

  .cd-quickcard .cd-qc-points li{
    margin: .25em 0;
  }

  /* ===============================
     脚注・参考文献 (#FN)
  =============================== */

  .entry-content #FN{
    margin-top: 2.4em;              /* 本文としっかり区切る */
    font-size: .9rem;
    color: var(--cd-muted);
    line-height: 1.7;
    list-style: decimal;
    padding-left: 1.4em;
  }

  .entry-content #FN a{
    overflow-wrap: anywhere;  /* モダンブラウザ向け：どこでも折り返し可 */
    word-break: break-all;    /* 保険：古いブラウザ用 */
  }

  .entry-content #FN > li{
    margin: .4em 0 .35em;
  }

  .entry-content #FN > li p{
    margin: .2em 0;
  }

  @media (max-width: 640px){
    .entry-content #FN{
      margin-top: 2.0em;
      font-size: .85rem;
      padding-left: 1.2em;
    }
  }

  /* ===============================
     strong の見え方
  =============================== */

  /* 本文中の <strong> を“水色マーカー”でほんのり強調 */
  .entry-content strong{
    font-weight: 600;
    color: var(--cd-fg);

    /* 下側 35〜40% だけ薄いマーカー色を入れる */
    background-image: linear-gradient(
      to bottom,
      transparent 60%,
      color-mix(in oklab, var(--cd-accent), transparent 75%) 75%,
      color-mix(in oklab, var(--cd-accent), transparent 60%) 100%
    );
    padding: 0 .06em;         /* ほんの少しだけ左右に余白 */
    border-radius: 3px;       /* 角を丸めて“蛍光ペン感”を弱める */
  }

  /* リンク内の strong はリンク優先でシンプルに */
  .entry-content a strong{
    background-image: none;
    color: inherit;
  }

} /* @layer comp */
/* ※ 読み幅 760px の責務は reading.css 側に集約 */