/*!
 * AffiliateEngine Article Styles (ae-styles.css)
 * ----------------------------------------------
 * Emitted-HTML から inline style を削除して CSS クラスに寄せた版。
 * ConoHa/SiteGuard WAF が inline style の組合せを XSS と誤検知する問題を回避。
 *
 * 配置: {wp-content}/mu-plugins/ae-styles.css
 * 読み込み: ae-styles.php (mu-plugin) が wp_enqueue_style で登録する。
 */

/* ============================================================
 * 1. 共通ブロック (kaigo-select / mono-trend 共通デザイン)
 * ============================================================ */

/* 広告明記（記事冒頭） */
.ae-ad-disclosure {
    background: #fff8e1;
    border: 1px solid #ffd54f;
    padding: 10px 14px;
    margin: 16px 0;
    border-radius: 4px;
    font-size: 0.88em;
    color: #5d4037;
}

/* 蛍光マーカー ==text== */
.ae-marker {
    background: linear-gradient(transparent 60%, #fff59d 60%);
    font-weight: bold;
    padding: 0 2px;
}

/* 中央寄せマーカー段落 */
.ae-marker-center {
    text-align: center;
    margin: 1.2em 0;
}

/* 確認済みバッジ */
.ae-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin: 0 0 20px 0;
    background: #eaf6ec;
    border-left: 4px solid #4caf50;
    border-radius: 4px;
    font-size: 0.92em;
    color: #1b5e20;
    font-weight: 600;
}
.ae-verified-badge__check {
    font-weight: 700;
}

/* ============================================================
 * 2. :::summaryBox[title] まとめ枠（三重枠線）
 * ============================================================ */
.ae-summary-box {
    border: 3px double #66cdaa;
    padding: 18px 20px;
    background: #f0f8ff;
    margin: 24px 0;
    border-radius: 4px;
}
.ae-summary-box__title {
    color: #d32f2f;
    margin: 0 0 12px 0;
    font-size: 1.1em;
    font-weight: bold;
}

/* ============================================================
 * 3. :::memoBox[title] デジスタ風 灰色枠
 * ============================================================ */
.ae-memo-box {
    border: 1px solid #bdbdbd;
    background: #fafafa;
    padding: 14px 16px 14px 18px;
    margin: 20px 0;
    border-radius: 4px;
}
.ae-memo-box__title {
    color: #1565c0;
    font-weight: bold;
    margin: 0 0 8px 0;
    border-left: 4px solid #1565c0;
    padding-left: 10px;
}

/* ============================================================
 * 4. :::memo 備忘録（さくらともも風）
 * ============================================================ */
.ae-memo-note {
    border-left: 4px solid #66cdaa;
    background: #f8f9fa;
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
}
.ae-memo-note__label {
    color: #009688;
    font-weight: bold;
    margin: 0 0 6px 0;
    font-size: 0.95em;
}

/* ============================================================
 * 5. :::rinker 3リンクカード
 * ============================================================ */
.ae-rinker {
    border: 1px solid #e0e0e0;
    background: #fff;
    padding: 14px 16px;
    margin: 20px 0;
    border-radius: 6px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.ae-rinker__image {
    flex: 0 0 160px;
    max-width: 160px;
}
.ae-rinker__image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.ae-rinker__body {
    flex: 1 1 200px;
    min-width: 0;
}
.ae-rinker__name {
    font-weight: bold;
    margin: 0 0 10px 0;
    font-size: 1em;
    line-height: 1.4;
}

/* 購入ボタン（汎用） */
.ae-btn {
    display: inline-block;
    color: #fff;
    padding: 10px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin: 4px 4px 4px 0;
    font-size: 0.95em;
}
.ae-btn--amazon { background: #ff9900; }
.ae-btn--rakuten { background: #bf0000; }
.ae-btn--yahoo { background: #7700a6; }
.ae-btn--x { background: #000; border-radius: 24px; padding: 10px 28px; }

/* ============================================================
 * 6. :::tldr 記事冒頭「この記事でわかること」
 * ============================================================ */
.ae-tldr {
    border: 2px solid #1976d2;
    background: #e3f2fd;
    padding: 16px 20px;
    margin: 20px 0 28px 0;
    border-radius: 6px;
}
.ae-tldr__title {
    color: #1976d2;
    font-weight: bold;
    margin: 0 0 10px 0;
    font-size: 1.05em;
}
.ae-tldr__body {
    color: #212121;
}

/* ============================================================
 * 6.5 :::faq よくある質問（GEO/LLMO・JSON-LD FAQPage 併出）
 * ============================================================ */
.ae-faq {
    border: 1px solid #cfd8dc;
    background: #fafbfc;
    padding: 18px 20px 8px 20px;
    margin: 28px 0;
    border-radius: 8px;
}
.ae-faq__title {
    color: #37474f;
    font-weight: bold;
    margin: 0 0 12px 0;
    font-size: 1.05em;
}
.ae-faq__list {
    display: block;
}
.ae-faq__item {
    border-top: 1px solid #e0e0e0;
    padding: 10px 0;
}
.ae-faq__item:first-child {
    border-top: 0;
}
.ae-faq__q {
    font-weight: bold;
    color: #1565c0;
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
    position: relative;
    padding-left: 24px;
}
.ae-faq__q::-webkit-details-marker { display: none; }
.ae-faq__q::before {
    content: "Q.";
    position: absolute;
    left: 0;
    color: #1565c0;
    font-weight: bold;
}
.ae-faq__item[open] .ae-faq__q {
    color: #0d47a1;
}
.ae-faq__a {
    padding: 8px 0 4px 24px;
    color: #263238;
    position: relative;
}
.ae-faq__a::before {
    content: "A.";
    position: absolute;
    left: 0;
    top: 8px;
    color: #546e7a;
    font-weight: bold;
}
.ae-faq__a p { margin: 0 0 8px 0; }
.ae-faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
 * 7. :::compare 比較表ラッパー
 * ============================================================ */
.ae-compare {
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}
.ae-compare__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.92em;
    background: #fff;
}
.ae-compare__table th {
    background: #1565c0;
    color: #fff;
    padding: 10px 8px;
    border: 1px solid #1565c0;
    text-align: left;
    font-weight: bold;
}
.ae-compare__table td {
    padding: 10px 8px;
    border: 1px solid #ddd;
    vertical-align: top;
}

/* ============================================================
 * 8. :::xfollow 記事末尾のXフォロー導線
 * ============================================================ */
.ae-xfollow {
    border: 2px solid #000;
    background: #fafafa;
    padding: 20px;
    margin: 32px 0;
    border-radius: 10px;
    text-align: center;
}
.ae-xfollow__lead {
    margin: 0 0 10px 0;
    font-size: 0.88em;
    color: #555;
}
.ae-xfollow__name {
    margin: 0 0 6px 0;
    font-weight: bold;
    font-size: 1.05em;
    color: #111;
}
.ae-xfollow__handle {
    color: #666;
    font-weight: normal;
    font-size: 0.85em;
}
.ae-xfollow__bio {
    margin: 0 0 14px 0;
    color: #555;
    font-size: 0.9em;
    line-height: 1.5;
}

/* ============================================================
 * 9. :::author 著者プロフィール
 * ============================================================ */
.ae-author {
    border: 1px solid #e0e0e0;
    background: #fafafa;
    padding: 16px 20px;
    margin: 24px 0;
    border-radius: 8px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.ae-author__avatar {
    flex: 0 0 80px;
}
.ae-author__avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
}
.ae-author__body {
    flex: 1 1 200px;
    min-width: 0;
}
.ae-author__name {
    margin: 0 0 4px 0;
    font-weight: bold;
    font-size: 1.05em;
    color: #111;
}
.ae-author__handle {
    color: #1da1f2;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: normal;
}
.ae-author__role {
    margin: 0 0 8px 0;
    color: #666;
    font-size: 0.85em;
}
.ae-author__bio {
    margin: 0;
    color: #333;
    font-size: 0.92em;
    line-height: 1.65;
}

/* ============================================================
 * 10. 見出し/テーブル — サイト別スタイル (gadget / kaigo)
 * ============================================================ */

/* --- gadget (デジスタ風) --- */
.ae-h2.ae-h2--gadget {
    border-bottom: 3px solid #1565c0;
    border-left: 6px solid #1565c0;
    padding: 8px 0 8px 12px;
    margin: 32px 0 16px 0;
    font-size: 1.4em;
    line-height: 1.4;
}
.ae-h3.ae-h3--gadget {
    color: #1565c0;
    border-left: 4px solid #1565c0;
    padding-left: 10px;
    margin: 24px 0 12px 0;
    font-size: 1.15em;
}
.ae-h4.ae-h4--gadget {
    color: #424242;
    margin: 20px 0 10px 0;
    font-size: 1.05em;
}
.ae-table--gadget {
    width: 100%;
    border-collapse: collapse;
}
.ae-table--gadget th {
    background: #e3f2fd;
    text-align: center;
    padding: 8px 12px;
    border: 1px solid #bbdefb;
    font-size: 0.9em;
}
.ae-table--gadget td {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    vertical-align: top;
    font-size: 0.95em;
}

/* ============================================================
 * 11. 画像 figure ラッパー (image_fetcher.py が出力)
 * ============================================================ */
.ae-figure {
    text-align: center;
    max-width: 600px;
    margin: 1.5em auto;
}
.ae-figure--small {
    max-width: 300px;
}
.ae-figure img {
    max-width: 100%;
    height: auto;
}

/* --- kaigo (さくらともも風) --- */
.ae-h2.ae-h2--kaigo {
    color: #222;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 6px;
    margin: 32px 0 16px 0;
    font-size: 1.35em;
}
.ae-h3.ae-h3--kaigo {
    color: #0000cc;
    margin: 28px 0 12px 0;
    font-size: 1.15em;
    font-weight: bold;
}
.ae-h4.ae-h4--kaigo {
    color: #333;
    margin: 20px 0 10px 0;
    font-size: 1.05em;
}
.ae-table--kaigo {
    width: 100%;
    border-collapse: collapse;
}
.ae-table--kaigo th {
    background: #f5f5f5;
    text-align: center;
    padding: 8px 12px;
    border: 1px solid #ddd;
    font-size: 0.9em;
}
.ae-table--kaigo td {
    padding: 8px 12px;
    border: 1px solid #eee;
    vertical-align: top;
    font-size: 0.95em;
}

/* ============================================================
 * 12. 強調文字（strong / b）の上書き
 * ----------------------------------------------------------------
 * 旧 dark-mode CSS（mono-trend-readability-style 等）が
 * `.entry-content strong { color:#fff !important }` を残しており、
 * 現行のライト背景と組み合わさって白文字が完全に見えなくなる事故が
 * mono-trend.net で観測された (wireless-earbuds-roundup-2026 等)。
 *
 * セレクタを (0,1,2) 以上にして既存 (0,1,1) ルールに勝ち、
 * color: inherit にして親要素の色を継ぐ。
 * これによりライト背景でも・ダーク背景でも適切に読める。
 * ============================================================ */
body .entry-content strong,
body .entry-content b,
body.body .entry-content strong,
body.body .entry-content b,
article .entry-content strong,
article .entry-content b,
main .entry-content strong,
main .entry-content b {
    color: inherit !important;
    background: transparent !important;
    font-weight: 700 !important;
}

/* ============================================================
 * 13. 低コントラスト箇所の上書き (2026-04-22 / v1.3.0)
 * ------------------------------------------------------------
 * dark-mode 系プラグイン（mono-trend-readability / mono-dark-preset）を
 * 停止した後に残った Cocoon 標準 UI と wp-custom-css の組合せで
 * 低コントラストになっている箇所を上書きする。
 *
 * 特異度メモ:
 *   Customizer Additional CSS（#wp-custom-css）が `body.body .x` 形式で
 *   !important を付けているため、単純な `body .x` (0,0,2) では負ける。
 *   → このセクションは `body.body` プレフィックスで (0,1,1+) に揃える。
 *
 * 検出方法: body * を走査して effective-background を解決し
 * WCAG AA 4.5:1 未満の要素を収集。hello-monotsun / ホーム /
 * wireless-earbuds-roundup-2026 の3ページで確認。
 *
 * 対象:
 *   - SNSシェアボタン（濃緑文字 × Twitter青 等）
 *   - 記事フッタの cat-link（濃緑文字 × 濃紺背景）← tag-link は除外
 *   - 記事一覧カードの日付/カテゴリ（灰 #888 → #555）
 *   - タグライン・パンくず（灰 #888 → #555）
 *   - Cocoon 管理パネル（濃灰背景に濃緑リンク）← 管理者のみ
 *   - 必須マーク ※ の赤（#f00 → #c00）
 *   - フッタ内 site-name-text（暗背景に暗文字）
 *
 * v1.2.0 の失敗から学んだこと:
 *   - tag-link は `background: transparent + colored border` なので
 *     白文字で上書きすると白地に白で不可視化する。cat-link のみ対象にする。
 *   - `body div.tagline` は Customizer の `body.body .tagline` に
 *     特異度 (0,2,1) で負ける。`body.body div.tagline` にして勝つ。
 * ============================================================ */

/* SNS シェアボタン — ブランド色背景に wp-custom-css の濃緑文字が
 * 載って不可視になる。キャプション・アイコン含めて白で上書き。*/
body.body .sns-share .share-button,
body.body .sns-share .share-button *,
body.body .sns-buttons .share-button,
body.body .sns-buttons .share-button *,
body.body .sns-share a,
body.body .sns-share a *,
body.body .sns-share span {
    color: #fff !important;
    fill: #fff !important;
}

/* 記事フッタのカテゴリバッジ（Cocoonデフォルトは濃紺背景×白文字）
 * wp-custom-css の汎用 a 色 #2b5e3e が被って濃緑 × 濃紺で不可視化。
 * tag-link は透明地+色ボーダーで白化すると消えるので対象外。
 * cat-label（カード用）も色付き背景なので一緒に白化する。*/
body.body .entry-categories-tags .cat-link,
body.body .entry-categories-tags .cat-link *,
body.body .cat-link,
body.body .cat-link *,
body.body .entry-card .cat-label,
body.body .entry-card .cat-label *,
body.body span.cat-label,
body.body span.cat-label * {
    color: #fff !important;
}

/* 記事カード内の日付色（一覧ページ／homepage）
 * Cocoon デフォルト #888 → AA 通過する #555 に寄せる。
 * cat-label はここに入れると色付き背景に灰色文字になるので除外。*/
body.body .post-date,
body.body .post-date *,
body.body .entry-card .post-date,
body.body .entry-card .entry-category,
body.body span.entry-category,
body.body span.entry-category * {
    color: #555 !important;
}

/* タグライン / パンくず も同様に #555 に。*/
body.body div.tagline,
body.body .tagline,
body.body .breadcrumb,
body.body .breadcrumb a,
body.body .breadcrumb-caption {
    color: #555 !important;
}

/* 必須マーク ※ — 赤 #f00 は白背景で 4.0:1 とAA微妙。#c00 で 5.94:1 に。*/
body.body span.required {
    color: #c00 !important;
}

/* Cocoon 管理パネル（ログイン中にだけ表示される濃灰バー）
 * wp-custom-css の濃緑リンク色が濃灰に乗って 1.67:1 で読めない。
 * 管理者向けなので白で上書き。*/
body.body #admin-panel,
body.body #admin-panel a,
body.body #admin-panel a *,
body.body .admin-panel a {
    color: #fff !important;
}

/* フッタ内の site-name-text（暗い footer-bottom 背景 #222 の中で
 * 暗文字 #1a1a1a が同化して 1.09:1。白で上書き。
 * ヘッダ側の site-name は白背景なので別セレクタ。*/
body.body .footer-bottom .site-name-text,
body.body .footer-bottom .site-name-text-link,
body.body .footer-bottom .logo-footer,
body.body .footer-bottom .logo-footer * {
    color: #fff !important;
}

/* ============================================================
 * 14. [2026-04-24] Cocoon simple-navy mobile h3 青背景打ち消し
 * ----------------------------------------------------------------
 * 現象: mono-trend.net のスマホ表示で ae-h3--gadget の見出しカードが
 *       「青に青」（濃紺背景 × 濃青文字）で読めないとの報告。
 *
 * 原因: Cocoon simple-navy skin が `.article h3` に対し
 *         background-color: #007eaf;
 *         color: #fff;
 *         padding: 10px 20px;
 *       を強制している。wp-custom-css は PC (@media min-width:834px) 内で
 *       h3 を透明背景に上書きしているが、mobile ではその上書きが効かず
 *       skin の濃紺背景が残る。そこに ae-h3--gadget の color:#1565c0 が
 *       載って「青に青」になっていた（WCAG で2:1未満）。
 *
 * 対策: ae-h3 を持つ h3 について、skin が設定した背景/パディング/
 *       角丸/上右下ボーダーを !important で奪い返し、PC側のデザインと
 *       同じ「透明背景 + 左カラーバー + 青字」を mobile にも揃える。
 * ============================================================ */
body.body .article h3.ae-h3,
body.body .entry-content h3.ae-h3 {
    background-color: transparent !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 4px 0 6px 10px !important;
    line-height: 1.45 !important;
}
body.body .article h3.ae-h3.ae-h3--gadget,
body.body .entry-content h3.ae-h3.ae-h3--gadget {
    color: #1565c0 !important;
    border-left: 4px solid #1565c0 !important;
}
body.body .article h3.ae-h3.ae-h3--kaigo,
body.body .entry-content h3.ae-h3.ae-h3--kaigo {
    color: #0000cc !important;
    border-left: 4px solid #0000cc !important;
}
/* ae-h3 の中に <span id="tocN"> がある場合、skin 側が span に色指定を
 * 被せているケースに備えて color を親と揃える。*/
body.body .article h3.ae-h3 span[id^="toc"],
body.body .entry-content h3.ae-h3 span[id^="toc"] {
    color: inherit !important;
    background: transparent !important;
}

/* ============================================================
 * v1.7.0 (2026-04-24): Cocoon アクセス集計カウンター非表示
 * ============================================================
 * mono-trend.net の記事カードで "本日:0 週:0 月:0 全体:0" が表示されて
 * UXを損なう問題を修正。Cocoon管理画面の設定変更不要で
 * CSS 側で視覚非表示化する。
 */
body.body .entry-card-meta .card-views,
body.body .entry-card-meta .post-views,
body.body .card-views,
body.body .post-views,
body.body .a-wrap .card-views,
body.body .a-wrap .post-views,
body.body .e-card-info .card-views,
body.body .e-card-info .post-views {
    display: none !important;
}

/* ============================================================
 * section 15 — v1.8.0 (2026-04-24): E-E-A-T フッタリンク
 * ============================================================
 * 運営者情報 / プライバシーポリシー / お問い合わせ への導線を
 * 全ページの footer に表示する。
 * PHP 側で <nav class="ae-footer-links"> を wp_footer 50 で注入し、
 * 見た目はここで集中管理（inline style は WAF 誤検知のため不使用）。
 */
body.body .ae-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
    max-width: 960px;
    margin: 24px auto 16px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    text-align: center;
}
body.body .ae-footer-links .ae-footer-link {
    color: #555;
    text-decoration: none;
    padding: 2px 4px;
    transition: color 0.15s ease;
}
body.body .ae-footer-links .ae-footer-link:hover,
body.body .ae-footer-links .ae-footer-link:focus {
    color: #1565c0;
    text-decoration: underline;
}
body.body .ae-footer-links .ae-footer-sep {
    color: #c0c0c0;
    user-select: none;
}
@media (max-width: 480px) {
    body.body .ae-footer-links {
        font-size: 12px;
        padding: 12px 16px;
        gap: 4px 8px;
    }
}