/* ==========================================================================
 * seopro-child / assets/src/legacy-content.css
 *
 * Phase 5 Day 14（2026-05-06）: 既存 35 記事の装飾崩れ補正用 legacy CSS
 *
 * 役割:
 *   - 既存記事本文（クラシック編集由来の SEO 資産）が使う legacy class の見た目を、
 *     親テーマ非依存の child テーマだけで再現する
 *   - 親 main.css / load.css を逐語コピー（値は一切変更しない）
 *   - スコープを `.entry-content`（child single.php の本文 wrapper）に限定して、
 *     ヘッダー/フッター/その他コンポーネントへの副作用を防ぐ
 *
 * 補完 class（指示書 Day 14 §Task 1 対象一覧）:
 *   - .box-gray
 *   - .font_XS / .font_S / .font_M / .font_L / .font_XL
 *   - .font_XS_pc / .font_S_pc / .font_M_pc / .font_L_pc / .font_XL_pc
 *   - .font_XS_sp / .font_S_sp / .font_M_sp / .font_L_sp / .font_XL_sp
 *   - .baloon-left / .baloon-right
 *
 * コピー元（親テーマ・read-only 参照のみ）:
 *   - .box-gray / .baloon-left / .baloon-right
 *     → seopro/assets/css/main.css L3890–4036（非 minify 版）
 *   - .font_XS〜XL / _pc / _sp
 *     → seopro/assets/css/load.css 内の min-width:769px / max-width:768px ブロック
 *
 * 重要な実装注意:
 *   1. **逐語コピー**: 値・単位・媒体クエリブレイクポイントは親と完全一致
 *      （Tailwind 風書き直し禁止）
 *   2. **スコープ調整のみ実施**: 親が `.p-single_contents` 子孫セレクタで定義していたものを
 *      `.entry-content`（child の本文 wrapper / single.php L211）に置き換え
 *      宣言ブロック（`{...}`）の値は一切変更しない
 *   3. **font_ 系は親では `.p-single_contents` 子孫ではなくグローバル class** だったが、
 *      副作用回避のため `.entry-content` スコープに限定
 *      （記事本文外で `<span class="font_S">` を書く運用は無いため安全）
 *   4. **build.css 非混入**: 本ファイルは tailwind.config.js の content（*.php のみ）に
 *      含まれない src/ 配下に置き、build.css とは独立して enqueue される
 *
 * 配置順序:
 *   inc/enqueue.php で build.css の **後** に enqueue（特異性で legacy が上書きされないため）
 * ========================================================================== */


/* ==========================================================================
   .box-gray（記事本文内の灰色ボックス）
   コピー元: main.css L3890–3896（基本）+ L4045–4047（PC override）
   ========================================================================== */
.entry-content .box-gray {
  padding: 15px;
  background: #eee;
  border-radius: 5px;
  margin-bottom: 20px;
}
.entry-content .box-gray p {
  margin-bottom: 0;
}

/* PC 上書き（main.css L4045–4047 と同値） */
@media only screen and (min-width: 769px) {
  .entry-content .box-gray {
    padding: 30px;
    margin-bottom: 30px;
  }
}


/* ==========================================================================
   .font_XS / .font_S / .font_M / .font_L / .font_XL（PC / SP 共通）
   コピー元: load.css 内 PC 用 min-width:769px / SP 用 max-width:768px ブロック
   親では `.font_XS, .font_XS_pc { font-size:1.2rem }` のようにグループ化されていた
   ========================================================================== */

/* PC（min-width: 769px）— load.css PC ブロック */
@media only screen and (min-width: 769px) {
  .entry-content .font_XS,
  .entry-content .font_XS_pc {
    font-size: 1.2rem;
  }
  .entry-content .font_S,
  .entry-content .font_S_pc {
    font-size: 1.4rem;
  }
  .entry-content .font_M,
  .entry-content .font_M_pc {
    font-size: 1.8rem;
  }
  .entry-content .font_L,
  .entry-content .font_L_pc {
    font-size: 2.4rem;
  }
  .entry-content .font_XL,
  .entry-content .font_XL_pc {
    font-size: 2.8rem;
  }
}

/* SP（max-width: 768px）— load.css SP ブロック */
@media only screen and (max-width: 768px) {
  .entry-content .font_XS,
  .entry-content .font_XS_sp {
    font-size: 1rem;
  }
  .entry-content .font_S,
  .entry-content .font_S_sp {
    font-size: 1.3rem;
  }
  .entry-content .font_M,
  .entry-content .font_M_sp {
    font-size: 1.8rem;
  }
  .entry-content .font_L,
  .entry-content .font_L_sp {
    font-size: 2rem;
  }
  .entry-content .font_XL,
  .entry-content .font_XL_sp {
    font-size: 2.4rem;
  }
}


/* ==========================================================================
   .baloon-left / .baloon-right（吹き出し装飾）
   コピー元: main.css L3920–4036
   - SP: max-width:768px ブロック内
   - PC: min-width:769px ブロック内
   ========================================================================== */

/* SP（max-width: 768px）系 — main.css L3920–3921 / L3945–3946 */
@media only screen and (max-width: 768px) {
  .entry-content .baloon-left p,
  .entry-content .baloon-right p {
    width: 100%;
  }
}

/* baloon-left 吹き出し本体（基本 / SP）— main.css L3922–3944 */
.entry-content .baloon-left p:first-child {
  margin-bottom: 20px;
  padding: 15px;
  border: 2px solid #bbb;
  border-radius: 10px;
  position: relative;
}
.entry-content .baloon-left p:first-child::before {
  background: #fff;
  bottom: -10px;
  left: 50px;
  content: '';
  width: 15px;
  height: 15px;
  position: absolute;
  border-bottom: solid 2px #bbb;
  border-left: solid 2px #bbb;
  transform: rotate(-45deg);
  z-index: 10;
}
.entry-content .baloon-left img {
  margin-right: auto;
  display: block;
  width: 120px;
  margin-bottom: 20px;
}

/* baloon-right 吹き出し本体（基本 / SP）— main.css L3948–3970 */
.entry-content .baloon-right p:first-child {
  margin-bottom: 20px;
  padding: 15px;
  border: 2px solid #bbb;
  border-radius: 10px;
  position: relative;
}
.entry-content .baloon-right p:first-child::before {
  background: #fff;
  bottom: -10px;
  right: 50px;
  content: '';
  width: 15px;
  height: 15px;
  position: absolute;
  border-bottom: solid 2px #bbb;
  border-left: solid 2px #bbb;
  transform: rotate(-45deg);
  z-index: 10;
}
.entry-content .baloon-right img {
  margin-bottom: 20px;
  margin-left: auto;
  display: block;
  width: 120px;
}

/* PC（min-width: 769px）— main.css L3984–4036 */
@media only screen and (min-width: 769px) {
  .entry-content .baloon-left {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30px;
  }
  .entry-content .baloon-left p:first-child {
    width: calc(100% - 150px);
    padding: 15px;
    border: 2px solid #bbb;
    border-radius: 10px;
    position: relative;
  }
  .entry-content .baloon-left p:first-child::before {
    top: 37px;
    left: -10px;
    content: '';
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
  }
  .entry-content .baloon-left img {
    margin-right: 30px;
    margin-bottom: 0;
    display: block;
    width: 120px;
  }

  .entry-content .baloon-right {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30px;
  }
  .entry-content .baloon-right p:first-child {
    width: calc(100% - 150px);
  }
  .entry-content .baloon-right p:first-child::before {
    top: 37px;
    right: -10px;
    content: '';
    width: 15px;
    height: 15px;
    transform: rotate(-135deg);
    z-index: 10;
  }
  .entry-content .baloon-right img {
    margin-left: 30px;
    margin-bottom: 0;
    display: block;
    width: 120px;
  }
}