/**
 * WP GFM Renderer - CSS Variables
 * 
 * グローバルCSS変数とShikiテーマ統合
 * 
 * @package WpGfmRenderer
 * @since 1.0.0
 */

:root {
    /* === Shiki Code Block Variables === */
    --wp-gfm-code-font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    --wp-gfm-code-font-size: 14px;
    --wp-gfm-code-line-height: 1.5;
    --wp-gfm-code-padding: 16px;
    --wp-gfm-code-border-radius: 6px;
    
    /* === Shiki Color Protection Variables === */
    /* これらの変数は、Shikiハイライト色の保護と統一性を確保するために使用 */
    
    /* Light Theme - Shiki GitHub Light */
    --wp-gfm-shiki-bg-light: #ffffff;
    --wp-gfm-shiki-border-light: #d0d7de;
    --wp-gfm-shiki-text-light: #1f2328;
    --wp-gfm-shiki-primary-light: #0366d6;
    --wp-gfm-shiki-comment-light: #6e7781;
    --wp-gfm-shiki-keyword-light: #cf222e;
    --wp-gfm-shiki-string-light: #0a3069;
    --wp-gfm-shiki-number-light: #0550ae;
    
    /* Dark Theme - Shiki GitHub Dark */
    --wp-gfm-shiki-bg-dark: #0d1117;
    --wp-gfm-shiki-border-dark: #30363d;
    --wp-gfm-shiki-text-dark: #e6edf3;
    --wp-gfm-shiki-primary-dark: #79c0ff;
    --wp-gfm-shiki-comment-dark: #8b949e;
    --wp-gfm-shiki-keyword-dark: #ff7b72;
    --wp-gfm-shiki-string-dark: #a5d6ff;
    --wp-gfm-shiki-number-dark: #79c0ff;
    
    /* 現在のテーマに応じた動的変数 (デフォルト: Light) */
    --wp-gfm-shiki-bg: var(--wp-gfm-shiki-bg-light);
    --wp-gfm-shiki-border: var(--wp-gfm-shiki-border-light);
    --wp-gfm-shiki-text: var(--wp-gfm-shiki-text-light);
    --wp-gfm-shiki-primary: var(--wp-gfm-shiki-primary-light);
    --wp-gfm-shiki-comment: var(--wp-gfm-shiki-comment-light);
    --wp-gfm-shiki-keyword: var(--wp-gfm-shiki-keyword-light);
    --wp-gfm-shiki-string: var(--wp-gfm-shiki-string-light);
    --wp-gfm-shiki-number: var(--wp-gfm-shiki-number-light);
    
    /* Legacy Variables (互換性のために保持) */
    --wp-gfm-code-bg-light: var(--wp-gfm-shiki-bg-light);
    --wp-gfm-code-border-light: var(--wp-gfm-shiki-border-light);
    --wp-gfm-code-text-light: var(--wp-gfm-shiki-text-light);
    --wp-gfm-code-bg-dark: var(--wp-gfm-shiki-bg-dark);
    --wp-gfm-code-border-dark: var(--wp-gfm-shiki-border-dark);
    --wp-gfm-code-text-dark: var(--wp-gfm-shiki-text-dark);
    
    /* === Copy Button Variables === */
    --wp-gfm-copy-btn-size: 32px;
    --wp-gfm-copy-btn-bg: rgba(255, 255, 255, 0.9);
    --wp-gfm-copy-btn-border: rgba(0, 0, 0, 0.1);
    --wp-gfm-copy-btn-hover: rgba(255, 255, 255, 1);
    --wp-gfm-copy-btn-active: rgba(240, 240, 240, 1);
    
    /* === Mermaid Variables === */
    --wp-gfm-mermaid-bg: #f8f9fa;
    --wp-gfm-mermaid-border: #e1e4e8;
    --wp-gfm-mermaid-padding: 20px;
    
    /* === Animation Variables === */
    --wp-gfm-transition-fast: 0.15s ease;
    --wp-gfm-transition-normal: 0.25s ease;
    --wp-gfm-transition-slow: 0.35s ease;

	/* Colors - Base Palette */
	--wp-gfm-primary: #0366d6;
	--wp-gfm-text: #1e1e1e;
	--wp-gfm-text-secondary: #666;
	--wp-gfm-background: #fff;
	--wp-gfm-surface: #f6f8fa;

	/* Border System */
	--wp-gfm-border-width: 1px;
	--wp-gfm-border-style: solid;
	--wp-gfm-border-color: #ddd;
	--wp-gfm-border-light: #eee;
	--wp-gfm-border-strong: #d0d7de;
	--wp-gfm-border-radius: 3px;
	--wp-gfm-border-radius-lg: 6px;

	/* Border Shorthand Properties */
	--wp-gfm-border: var(--wp-gfm-border-width) var(--wp-gfm-border-style) var(--wp-gfm-border-color);
	--wp-gfm-border-none: 0;

	/* Typography */
	--wp-gfm-font-mono: "Fira Code", "SF Mono", monaco, "Cascadia Code", "Roboto Mono", consolas, "Courier New", monospace;
	--wp-gfm-font-system: -apple-system, blinkmacsystemfont, "Segoe UI", "Noto Sans", helvetica, arial, sans-serif;

	/* Spacing */
	--wp-gfm-spacing-xs: 4px;
	--wp-gfm-spacing-sm: 8px;
	--wp-gfm-spacing-md: 12px;
	--wp-gfm-spacing-lg: 16px;
	--wp-gfm-spacing-xl: 24px;

	/* Code Blocks */
	--wp-gfm-code-bg: #f6f8fa;
	--wp-gfm-code-border: var(--wp-gfm-border-color);
	--wp-gfm-code-text: #1e1e1e;
	--wp-gfm-code-inline-bg: rgba(27, 31, 35, 0.05);

	/* Tables */
	--wp-gfm-table-border: var(--wp-gfm-border);
	--wp-gfm-table-header-bg: var(--wp-gfm-surface);
	--wp-gfm-table-stripe-bg: var(--wp-gfm-surface);

	/* Copy Button */
	--wp-gfm-copy-text: #24292f;
	--wp-gfm-copy-bg: rgba(255, 255, 255, 0.8);
	--wp-gfm-copy-border: rgba(31, 35, 40, 0.15);
	--wp-gfm-copy-focus: #0969da;

	/* Mermaid Diagrams */
	--wp-gfm-mermaid-bg: #fff;
	--wp-gfm-mermaid-border: var(--wp-gfm-border);
	--wp-gfm-mermaid-error-bg: #fff5f5;
	--wp-gfm-mermaid-error-border: #feb2b2;
	--wp-gfm-mermaid-error-text: #c53030;
}

/* ==========================================================================
   Dark Theme Variables - CSS Design System
   ========================================================================== */

:root {

/* ========================================
   カラーシステム - GitHub準拠
   ======================================== */

	/* プライマリーカラー */
	--wp-gfm-color-primary: #238636;
	--wp-gfm-color-primary-hover: #2ea043;
	--wp-gfm-color-primary-active: #1a7f37;

	/* セカンダリーカラー */
	--wp-gfm-color-secondary: #21262d;
	--wp-gfm-color-secondary-hover: #30363d;
	--wp-gfm-color-secondary-active: #161b22;

	/* 背景色 */
	--wp-gfm-bg-canvas: #fff;
	--wp-gfm-bg-default: #fff;
	--wp-gfm-bg-muted: #f6f8fa;
	--wp-gfm-bg-subtle: #f6f8fa;
	--wp-gfm-bg-overlay: rgba(31, 35, 40, 0.15);

	/* コードブロック背景 */
	--wp-gfm-bg-code: #f6f8fa;
	--wp-gfm-bg-code-inline: rgba(175, 184, 193, 0.2);

	/* テキストカラー */
	--wp-gfm-text-primary: #24292f;
	--wp-gfm-text-secondary: #656d76;
	--wp-gfm-text-muted: #656d76;
	--wp-gfm-text-inverse: #fff;
	--wp-gfm-text-link: #0969da;
	--wp-gfm-text-link-hover: #0550ae;

	/* ボーダーカラー */
	--wp-gfm-border-default: #d0d7de;
	--wp-gfm-border-muted: #d8dee4;
	--wp-gfm-border-subtle: #f6f8fa;

	/* 状態カラー */
	--wp-gfm-color-success: #1a7f37;
	--wp-gfm-color-warning: #d1242f;
	--wp-gfm-color-error: #cf222e;
	--wp-gfm-color-info: #0969da;

	/* 成功状態 */
	--wp-gfm-success-bg: #dafbe1;
	--wp-gfm-success-border: #1a7f37;
	--wp-gfm-success-text: #116329;

	/* 警告状態 */
	--wp-gfm-warning-bg: #fff8c5;
	--wp-gfm-warning-border: #d1242f;
	--wp-gfm-warning-text: #633c01;

	/* エラー状態 */
	--wp-gfm-error-bg: #ffebe9;
	--wp-gfm-error-border: #cf222e;
	--wp-gfm-error-text: #82071e;

	/* 情報状態 */
	--wp-gfm-info-bg: #ddf4ff;
	--wp-gfm-info-border: #0969da;
	--wp-gfm-info-text: #0550ae;

	/* ========================================
       ダークテーマカラー
       ======================================== */

	/* プライマリーカラー (ダーク) */
	--wp-gfm-dark-color-primary: #238636;
	--wp-gfm-dark-color-primary-hover: #2ea043;
	--wp-gfm-dark-color-primary-active: #1a7f37;

	/* 背景色 (ダーク) */
	--wp-gfm-dark-bg-canvas: #0d1117;
	--wp-gfm-dark-bg-default: #0d1117;
	--wp-gfm-dark-bg-muted: #161b22;
	--wp-gfm-dark-bg-subtle: #21262d;
	--wp-gfm-dark-bg-overlay: rgba(31, 35, 40, 0.7);

	/* コードブロック背景 (ダーク) */
	--wp-gfm-dark-bg-code: #161b22;
	--wp-gfm-dark-bg-code-inline: rgba(110, 118, 129, 0.4);

	/* テキストカラー (ダーク) */
	--wp-gfm-dark-text-primary: #f0f6fc;
	--wp-gfm-dark-text-secondary: #8b949e;
	--wp-gfm-dark-text-muted: #7d8590;
	--wp-gfm-dark-text-inverse: #24292f;
	--wp-gfm-dark-text-link: #58a6ff;
	--wp-gfm-dark-text-link-hover: #79c0ff;

	/* ボーダーカラー (ダーク) */
	--wp-gfm-dark-border-default: #30363d;
	--wp-gfm-dark-border-muted: #21262d;
	--wp-gfm-dark-border-subtle: #161b22;

	/* ========================================
       スペーシングシステム
       ======================================== */

	/* 基本スペーシング (8px base) */
	--wp-gfm-space-0: 0;
	--wp-gfm-space-1: 4px;   /* 0.25rem */
	--wp-gfm-space-2: 8px;   /* 0.5rem */
	--wp-gfm-space-3: 12px;  /* 0.75rem */
	--wp-gfm-space-4: 16px;  /* 1rem */
	--wp-gfm-space-5: 20px;  /* 1.25rem */
	--wp-gfm-space-6: 24px;  /* 1.5rem */
	--wp-gfm-space-8: 32px;  /* 2rem */
	--wp-gfm-space-10: 40px; /* 2.5rem */
	--wp-gfm-space-12: 48px; /* 3rem */
	--wp-gfm-space-16: 64px; /* 4rem */
	--wp-gfm-space-20: 80px; /* 5rem */

	/* 特定用途スペーシング */
	--wp-gfm-padding-button: var(--wp-gfm-space-2) var(--wp-gfm-space-4);
	--wp-gfm-padding-input: var(--wp-gfm-space-2) var(--wp-gfm-space-3);
	--wp-gfm-padding-modal: var(--wp-gfm-space-6);
	--wp-gfm-margin-section: var(--wp-gfm-space-8) 0;

	/* ========================================
       タイポグラフィ
       ======================================== */

	/* フォントファミリー */
	--wp-gfm-font-family-base: -apple-system, blinkmacsystemfont, "Segoe UI", "Noto Sans", helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--wp-gfm-font-family-mono: "SFMono-Regular", "Fira Code", consolas, "Liberation Mono", menlo, courier, monospace;

	/* フォントサイズ */
	--wp-gfm-font-size-xs: 12px;
	--wp-gfm-font-size-sm: 14px;
	--wp-gfm-font-size-base: 16px;
	--wp-gfm-font-size-lg: 18px;
	--wp-gfm-font-size-xl: 20px;
	--wp-gfm-font-size-2xl: 24px;
	--wp-gfm-font-size-3xl: 28px;

	/* 行高 */
	--wp-gfm-line-height-tight: 1.25;
	--wp-gfm-line-height-base: 1.5;
	--wp-gfm-line-height-relaxed: 1.75;

	/* フォント重み */
	--wp-gfm-font-weight-normal: 400;
	--wp-gfm-font-weight-medium: 500;
	--wp-gfm-font-weight-semibold: 600;
	--wp-gfm-font-weight-bold: 700;

	/* ========================================
       ボーダー・角丸
       ======================================== */

	/* ボーダー幅 */
	--wp-gfm-border-width-thin: 1px;
	--wp-gfm-border-width-thick: 2px;

	/* 角丸 */
	--wp-gfm-border-radius-sm: 3px;
	--wp-gfm-border-radius-base: 6px;
	--wp-gfm-border-radius-lg: 8px;
	--wp-gfm-border-radius-xl: 12px;
	--wp-gfm-border-radius-full: 50%;

	/* ========================================
       シャドウ
       ======================================== */

	--wp-gfm-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.04);
	--wp-gfm-shadow-base: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
	--wp-gfm-shadow-lg: 0 4px 12px rgba(31, 35, 40, 0.15), 0 2px 4px rgba(31, 35, 40, 0.12);
	--wp-gfm-shadow-xl: 0 8px 24px rgba(31, 35, 40, 0.2), 0 2px 4px rgba(31, 35, 40, 0.12);

	/* フォーカスシャドウ */
	--wp-gfm-shadow-focus: 0 0 0 3px rgba(35, 134, 54, 0.15);

	/* ========================================
       アニメーション・トランジション
       ======================================== */

	/* デュレーション */
	--wp-gfm-duration-fast: 0.1s;
	--wp-gfm-duration-base: 0.15s;
	--wp-gfm-duration-slow: 0.3s;
	--wp-gfm-duration-slower: 0.5s;

	/* イージング */
	--wp-gfm-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--wp-gfm-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--wp-gfm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* 基本トランジション */
	--wp-gfm-transition-fast: all var(--wp-gfm-duration-fast) var(--wp-gfm-ease-out);
	--wp-gfm-transition-base: all var(--wp-gfm-duration-base) var(--wp-gfm-ease-out);
	--wp-gfm-transition-slow: all var(--wp-gfm-duration-slow) var(--wp-gfm-ease-out);

	/* ========================================
       Z-Index階層
       ======================================== */

	--wp-gfm-z-index-dropdown: 1000;
	--wp-gfm-z-index-sticky: 1020;
	--wp-gfm-z-index-fixed: 1030;
	--wp-gfm-z-index-modal-backdrop: 1040;
	--wp-gfm-z-index-modal: 1050;
	--wp-gfm-z-index-popover: 1060;
	--wp-gfm-z-index-tooltip: 1070;
	--wp-gfm-z-index-notification: 1080;

	/* ========================================
       レスポンシブブレークポイント
       ======================================== */

	--wp-gfm-breakpoint-sm: 576px;
	--wp-gfm-breakpoint-md: 768px;
	--wp-gfm-breakpoint-lg: 992px;
	--wp-gfm-breakpoint-xl: 1200px;
	--wp-gfm-breakpoint-2xl: 1400px;
}

/* ==========================================================================
   ダークテーマ適用
   ========================================================================== */

/* === Auto Dark Mode Support === */
/* WordPress管理画面では常にライトテーマを適用 */
.wp-admin :root,
.wp-admin,
.wp-admin .wp-gfm-markdown-block,
.wp-admin .wp-gfm-markdown-editor,
.wp-admin .wp-gfm-markdown-preview,
.wp-admin .wp-gfm-markdown-rendered-preview,
body.wp-admin,
body.wp-admin .wp-gfm-markdown-block,
body.wp-admin .wp-gfm-markdown-editor,
body.wp-admin .wp-gfm-markdown-preview {
	/* 管理画面用の明示的なライトテーマ変数 */
	--wp-gfm-background: #fff !important;
	--wp-gfm-surface: #f6f8fa !important;
	--wp-gfm-text: #1e1e1e !important;
	--wp-gfm-text-secondary: #666 !important;
	--wp-gfm-border-color: #ddd !important;
	--wp-gfm-code-bg: #f6f8fa !important;
	--wp-gfm-code-text: #1e1e1e !important;
}

@media (prefers-color-scheme: dark) {
    /* フロントエンドのみダークテーマ適用（管理画面除外） */
    :root:not(.wp-admin) {
        /* === Shiki Color Protection - Dark Theme === */
        --wp-gfm-shiki-bg: var(--wp-gfm-shiki-bg-dark);
        --wp-gfm-shiki-border: var(--wp-gfm-shiki-border-dark);
        --wp-gfm-shiki-text: var(--wp-gfm-shiki-text-dark);
        --wp-gfm-shiki-primary: var(--wp-gfm-shiki-primary-dark);
        --wp-gfm-shiki-comment: var(--wp-gfm-shiki-comment-dark);
        --wp-gfm-shiki-keyword: var(--wp-gfm-shiki-keyword-dark);
        --wp-gfm-shiki-string: var(--wp-gfm-shiki-string-dark);
        --wp-gfm-shiki-number: var(--wp-gfm-shiki-number-dark);
        
        /* Legacy Variables (互換性のために更新) */
        --wp-gfm-code-bg: var(--wp-gfm-code-bg-dark);
        --wp-gfm-code-border: var(--wp-gfm-code-border-dark);
        --wp-gfm-code-text: var(--wp-gfm-code-text-dark);
        
        --wp-gfm-copy-btn-bg: rgba(36, 41, 46, 0.9);
        --wp-gfm-copy-btn-border: rgba(255, 255, 255, 0.1);
        --wp-gfm-copy-btn-hover: rgba(36, 41, 46, 1);
        --wp-gfm-copy-btn-active: rgba(48, 54, 61, 1);
        
        --wp-gfm-mermaid-bg: #161b22;
        --wp-gfm-mermaid-border: #30363d;

		/* Colors - Dark Palette */
		--wp-gfm-primary: #58a6ff;
		--wp-gfm-text: #f0f6fc;
		--wp-gfm-text-secondary: #8b949e;
		--wp-gfm-background: #0d1117;
		--wp-gfm-surface: #161b22;

		/* Border System - Dark */
		--wp-gfm-border-color: #30363d;
		--wp-gfm-border-light: #21262d;
		--wp-gfm-border-strong: #8b949e;

		/* Border Shorthand Properties - Dark */
		--wp-gfm-border: var(--wp-gfm-border-width) var(--wp-gfm-border-style) var(--wp-gfm-border-color);

		/* Code Blocks - Dark */
		--wp-gfm-code-bg: #0d1117;
		--wp-gfm-code-border: var(--wp-gfm-border-color);
		--wp-gfm-code-text: #f0f6fc;
		--wp-gfm-code-inline-bg: rgba(240, 246, 252, 0.1);

		/* Tables - Dark */
		--wp-gfm-table-border: var(--wp-gfm-border);
		--wp-gfm-table-header-bg: var(--wp-gfm-surface);
		--wp-gfm-table-stripe-bg: rgba(240, 246, 252, 0.05);

		/* Copy Button - Dark */
		--wp-gfm-copy-text: #f0f6fc;
		--wp-gfm-copy-bg: rgba(240, 246, 252, 0.1);
		--wp-gfm-copy-border: rgba(240, 246, 252, 0.2);
		--wp-gfm-copy-focus: #58a6ff;

		/* Mermaid Diagrams - Dark */
		--wp-gfm-mermaid-bg: var(--wp-gfm-surface);
		--wp-gfm-mermaid-border: var(--wp-gfm-border);
		--wp-gfm-mermaid-error-bg: rgba(248, 81, 73, 0.1);
		--wp-gfm-mermaid-error-border: rgba(248, 81, 73, 0.3);
		--wp-gfm-mermaid-error-text: #ff7b72;
	}
}

@media (prefers-color-scheme: light) {
    :root {
        --wp-gfm-code-bg: var(--wp-gfm-code-bg-light);
        --wp-gfm-code-border: var(--wp-gfm-code-border-light);
        --wp-gfm-code-text: var(--wp-gfm-code-text-light);
    }
}

/* ==========================================================================
   Explicit Theme Classes
   ========================================================================== */

.wp-gfm-theme-light {

	/* Override for explicit light theme */
	--wp-gfm-primary: #0366d6;
	--wp-gfm-text: #1e1e1e;
	--wp-gfm-text-secondary: #666;
	--wp-gfm-background: #fff;
	--wp-gfm-surface: #f6f8fa;
	--wp-gfm-border-color: #ddd;
	--wp-gfm-border-light: #eee;
	--wp-gfm-border-strong: #d0d7de;
}

.wp-gfm-theme-dark {

	/* Override for explicit dark theme */
	--wp-gfm-primary: #58a6ff;
	--wp-gfm-text: #f0f6fc;
	--wp-gfm-text-secondary: #8b949e;
	--wp-gfm-background: #0d1117;
	--wp-gfm-surface: #161b22;
	--wp-gfm-border-color: #30363d;
	--wp-gfm-border-light: #21262d;
	--wp-gfm-border-strong: #8b949e;
}

/* ==========================================================================
   Border Reset Utilities
   ========================================================================== */

/* 統一されたボーダーリセット - 競合を防ぐ単一セレクター */
.wp-gfm-border-reset,
.wp-gfm-markdown-rendered pre code,
.wp-gfm-markdown-rendered-preview pre code,
.wp-gfm-markdown-editor,
.wp-gfm-markdown-rendered hr {
	border: var(--wp-gfm-border-none) !important;
}

/* ボーダー適用ユーティリティ */
.wp-gfm-border {
	border: var(--wp-gfm-border);
}

.wp-gfm-border-light {
	border: var(--wp-gfm-border-light);
}

.wp-gfm-border-strong {
	border: var(--wp-gfm-border-strong);
}

.wp-gfm-border-bottom {
	border-bottom: var(--wp-gfm-border-light);
}

.wp-gfm-border-top {
	border-top: var(--wp-gfm-border);
}

/* ==========================================================================
   High Contrast Support
   ========================================================================== */

@media (prefers-contrast: high) {

	:root {
		--wp-gfm-border-width: 2px;
		--wp-gfm-border-color: #000;
		--wp-gfm-border-light: #333;
		--wp-gfm-border-strong: #000;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {

	:root {

		/* Print-optimized borders */
		--wp-gfm-border-color: #000;
		--wp-gfm-border-light: #666;
		--wp-gfm-border-strong: #000;
		--wp-gfm-background: #fff;
		--wp-gfm-text: #000;

		/* ダークテーマ時のカラー変更 */
		--wp-gfm-bg-canvas: var(--wp-gfm-dark-bg-canvas);
		--wp-gfm-bg-default: var(--wp-gfm-dark-bg-default);
		--wp-gfm-bg-muted: var(--wp-gfm-dark-bg-muted);
		--wp-gfm-bg-subtle: var(--wp-gfm-dark-bg-subtle);
		--wp-gfm-bg-overlay: var(--wp-gfm-dark-bg-overlay);
		--wp-gfm-bg-code: var(--wp-gfm-dark-bg-code);
		--wp-gfm-bg-code-inline: var(--wp-gfm-dark-bg-code-inline);

		--wp-gfm-text-primary: var(--wp-gfm-dark-text-primary);
		--wp-gfm-text-secondary: var(--wp-gfm-dark-text-secondary);
		--wp-gfm-text-muted: var(--wp-gfm-dark-text-muted);
		--wp-gfm-text-inverse: var(--wp-gfm-dark-text-inverse);
		--wp-gfm-text-link: var(--wp-gfm-dark-text-link);
		--wp-gfm-text-link-hover: var(--wp-gfm-dark-text-link-hover);

		--wp-gfm-border-default: var(--wp-gfm-dark-border-default);
		--wp-gfm-border-muted: var(--wp-gfm-dark-border-muted);
		--wp-gfm-border-subtle: var(--wp-gfm-dark-border-subtle);
	}
}

/* 強制ダークテーマクラス */
.wp-gfm-dark {
	--wp-gfm-bg-canvas: var(--wp-gfm-dark-bg-canvas);
	--wp-gfm-bg-default: var(--wp-gfm-dark-bg-default);
	--wp-gfm-bg-muted: var(--wp-gfm-dark-bg-muted);
	--wp-gfm-bg-subtle: var(--wp-gfm-dark-bg-subtle);
	--wp-gfm-bg-overlay: var(--wp-gfm-dark-bg-overlay);
	--wp-gfm-bg-code: var(--wp-gfm-dark-bg-code);
	--wp-gfm-bg-code-inline: var(--wp-gfm-dark-bg-code-inline);

	--wp-gfm-text-primary: var(--wp-gfm-dark-text-primary);
	--wp-gfm-text-secondary: var(--wp-gfm-dark-text-secondary);
	--wp-gfm-text-muted: var(--wp-gfm-dark-text-muted);
	--wp-gfm-text-inverse: var(--wp-gfm-dark-text-inverse);
	--wp-gfm-text-link: var(--wp-gfm-dark-text-link);
	--wp-gfm-text-link-hover: var(--wp-gfm-dark-text-link-hover);

	--wp-gfm-border-default: var(--wp-gfm-dark-border-default);
	--wp-gfm-border-muted: var(--wp-gfm-dark-border-muted);
	--wp-gfm-border-subtle: var(--wp-gfm-dark-border-subtle);
}

/* 強制ライトテーマクラス */
.wp-gfm-light {
	--wp-gfm-bg-canvas: #fff;
	--wp-gfm-bg-default: #fff;
	--wp-gfm-bg-muted: #f6f8fa;
	--wp-gfm-bg-subtle: #f6f8fa;
	--wp-gfm-bg-overlay: rgba(31, 35, 40, 0.15);
	--wp-gfm-bg-code: #f6f8fa;
	--wp-gfm-bg-code-inline: rgba(175, 184, 193, 0.2);

	--wp-gfm-text-primary: #24292f;
	--wp-gfm-text-secondary: #656d76;
	--wp-gfm-text-muted: #656d76;
	--wp-gfm-text-inverse: #fff;
	--wp-gfm-text-link: #0969da;
	--wp-gfm-text-link-hover: #0550ae;

	--wp-gfm-border-default: #d0d7de;
	--wp-gfm-border-muted: #d8dee4;
	--wp-gfm-border-subtle: #f6f8fa;
}

/* ==========================================================================
   レスポンシブヘルパー
   ========================================================================== */

/* モバイルファースト */
@media (max-width: 767px) {

	:root {
		--wp-gfm-padding-modal: var(--wp-gfm-space-4);
		--wp-gfm-font-size-base: 14px;
	}
}

/* タブレット */
@media (min-width: 768px) and (max-width: 991px) {

	:root {
		--wp-gfm-padding-modal: var(--wp-gfm-space-5);
	}
}

/* デスクトップ */
@media (min-width: 992px) {

	:root {
		--wp-gfm-padding-modal: var(--wp-gfm-space-6);
	}
}

/* ==========================================================================
   アクセシビリティ
   ========================================================================== */

/* アニメーション無効設定 */
@media (prefers-reduced-motion: reduce) {

	:root {
		--wp-gfm-duration-fast: 0s;
		--wp-gfm-duration-base: 0s;
		--wp-gfm-duration-slow: 0s;
		--wp-gfm-duration-slower: 0s;
		--wp-gfm-transition-fast: none;
		--wp-gfm-transition-base: none;
		--wp-gfm-transition-slow: none;
	}
}

/* ハイコントラスト設定 */
@media (prefers-contrast: high) {

	:root {
		--wp-gfm-border-width-thin: 2px;
		--wp-gfm-border-width-thick: 3px;
		--wp-gfm-shadow-focus: 0 0 0 4px rgba(35, 134, 54, 0.5);
	}
}

/* ==========================================================================
   ユーティリティクラス
   ========================================================================== */

/* スクリーンリーダー専用 */
.wp-gfm-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* フォーカス時に表示 */
.wp-gfm-sr-only-focusable:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: inherit !important;
	margin: inherit !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: inherit !important;
}

/* トランケート */
.wp-gfm-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* レスポンシブ表示制御 */
.wp-gfm-d-none {
	display: none !important;
}

.wp-gfm-d-block {
	display: block !important;
}

.wp-gfm-d-flex {
	display: flex !important;
}

@media (max-width: 767px) {

	.wp-gfm-d-sm-none {
		display: none !important;
	}

	.wp-gfm-d-sm-block {
		display: block !important;
	}

	.wp-gfm-d-sm-flex {
		display: flex !important;
	}
}

@media (min-width: 768px) {

	.wp-gfm-d-md-none {
		display: none !important;
	}

	.wp-gfm-d-md-block {
		display: block !important;
	}

	.wp-gfm-d-md-flex {
		display: flex !important;
	}
}

/* === Base Styles for Shiki Integration === */
.shiki {
    font-family: var(--wp-gfm-code-font-family);
    font-size: var(--wp-gfm-code-font-size);
    line-height: var(--wp-gfm-code-line-height);
    border-radius: var(--wp-gfm-code-border-radius);
    overflow-x: auto;
    position: relative;
}

.shiki code {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* === Shiki Color Protection === */
/* Shikiが生成した色を保護し、CSSリセットによる透明化を防ぐ */
.shiki,
.shiki pre,
.shiki code {
    /* 背景色の透明化を防ぐ - ただし明示的な背景色がある場合のみ */
    /* background-color: inherit !important; ← 一時的に無効化：全体背景への影響を確認 */
}

/* 最も重要：Shikiのインライン色を確実に保護 */
.shiki span[style*="color"] {
    /* インライン色指定を確実に保護 - colorプロパティを削除してShikiの色を優先 */
    /* color: unset; ← この行を削除：Shikiのインライン色を上書きしていた原因 */
}

/* WordPress theme competition protection */
.wp-gfm-markdown-rendered .shiki,
.wp-gfm-markdown-rendered .shiki pre,
.wp-gfm-markdown-rendered .shiki code,
.wp-gfm-markdown-rendered .shiki span {
    /* 透明背景色の強制をオーバーライド - 一時的に無効化 */
    /* background-color: inherit !important; ← 一時的に無効化：背景問題の確認 */
}

.wp-gfm-markdown-rendered .shiki span[style*="color"] {
    /* Shikiスタイルのインライン色を優先 - colorプロパティを削除 */
    /* color: inherit !important; ← 削除：Shikiのインライン色を上書きしていた */
}

/* Shiki theme specific overrides */
.shiki.github-light,
.shiki.github-dark,
.shiki[data-theme="github-light"],
.shiki[data-theme="github-dark"] {
    /* テーマ固有の背景色も一時的に無効化して確認 */
    /* color: inherit !important; ← 削除：Shikiの色を上書きしていた */
    /* background-color: inherit !important; ← 一時的に無効化：背景問題の確認 */
}

/* === Enhanced Copy Button Positioning === */
.wp-gfm-code-container {
    position: relative;
}

.wp-gfm-copy-button {
    width: var(--wp-gfm-copy-btn-size);
    height: var(--wp-gfm-copy-btn-size);
    background: var(--wp-gfm-copy-btn-bg);
    border: 1px solid var(--wp-gfm-copy-btn-border);
    border-radius: 6px;
    transition: all var(--wp-gfm-transition-fast);
    backdrop-filter: blur(8px);
}

.wp-gfm-copy-button:hover {
    background: var(--wp-gfm-copy-btn-hover);
    transform: scale(1.05);
}

.wp-gfm-copy-button:active {
    background: var(--wp-gfm-copy-btn-active);
    transform: scale(0.95);
}

/* === Responsive Design === */
@media (max-width: 768px) {
    :root {
        --wp-gfm-code-font-size: 13px;
        --wp-gfm-code-padding: 12px;
        --wp-gfm-copy-btn-size: 28px;
    }
}