/* ==========================================================================
   YOUTRUSTテックブログ - デザインCSS v2
   ========================================================================== */

/* CSS変数の定義（OKLCH色空間対応） */
:root {
    /* カラーパレット - OKLCH（YOUTRUSTブランドカラー #00a5b5 ベース） */
    --primary-l: 62%;
    --primary-c: 0.12;
    --primary-h: 194deg;
    --primary-color: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
    --primary-hover: oklch(calc(var(--primary-l) - 8%) var(--primary-c) var(--primary-h));
    --primary-light: oklch(calc(var(--primary-l) + 25%) calc(var(--primary-c) * 0.3) var(--primary-h));
    
    /* テキストカラー（読みやすさ重視・SmartHR風） */
    --text-primary: oklch(20% 0.005 250deg);
    --text-secondary: oklch(35% 0.008 250deg);
    --text-tertiary: oklch(50% 0.01 250deg);
    
    /* 背景カラー（ブランドカラーベース） */
    --background: oklch(88% 0.04 194deg);
    --background-secondary: oklch(94% 0.02 194deg);
    --background-hover: oklch(92% 0.025 194deg);
    
    /* 記事エリア（シンプル・クリーン） */
    --article-background: oklch(99% 0.005 194deg);
    --article-secondary: oklch(97% 0.01 194deg);
    
    /* ボーダー */
    --border-color: color-mix(in srgb, currentColor 15%, transparent);
    --border-light: color-mix(in srgb, currentColor 8%, transparent);
    
    /* 共通値 */
    --border-radius: 0.375rem;
    --border-radius-large: 0.75rem;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-hover: 0 6px 12px oklch(0% 0 0deg / 0.08);
    --z-index-fixed: 1000;
    
    /* レスポンシブブレイクポイント */
    --bp-tablet: 768px;
    --bp-mobile: 480px;
    
    /* コンテナ用ブレイクポイント */
    --bp-container: 600px;
    --bp-large: 960px;
    
    /* 統一パディングシステム */
    --article-padding-desktop: 6rem;
    --article-padding-tablet: 4rem;
    --article-padding-mobile: 1.5rem; /* モバイル見切れ防止のため縮小 24px */
    
    --archive-padding-desktop: 6rem;
    --archive-padding-tablet: 4rem;
    --archive-padding-mobile: 1.5rem; /* モバイル見切れ防止のため縮小 24px */
}

/* ダークモードの変数（視認性改善・ブランドカラーに調和） */
[data-theme="dark"] {
    --background: oklch(15% 0.02 194deg);
    --background-secondary: oklch(20% 0.015 194deg);
    --background-hover: oklch(25% 0.02 194deg);
    
    /* ダークモード記事エリア（境界を明確に） */
    --article-background: oklch(22% 0.008 194deg);
    --article-secondary: oklch(18% 0.012 194deg);
    
    /* ダークモード専用ボーダー */
    --article-border-dark: oklch(35% 0.015 194deg);
    
    /* ダークモード専用プライマリカラー（彩度を下げて自然な色調に） */
    --primary-color-dark: oklch(50% 0.08 194deg); /* 彩度を下げて自然な青緑色に */
    --primary-hover-dark: oklch(46% 0.08 194deg); /* ホバー時は少し暗く */
    
    --text-primary: oklch(95% 0.002 250deg);
    --text-secondary: oklch(85% 0.005 250deg);
    --text-tertiary: oklch(70% 0.008 250deg);
    --shadow-hover: 0 6px 12px oklch(0% 0 0deg / 0.2);
}

/* ==========================================================================
   基本レイアウト・構造
   ========================================================================== */

/* コンテナータイプを設定 */
#main {
    container-type: inline-size;
    container-name: main;
    padding: 0 clamp(1rem, 4vw, 1.5rem); /* モバイル見切れ防止のため最大値を縮小 */
}

@container main (min-width: 1280px) {
    #main {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 2rem; /* 少し縮小 */
    }
}

@container main (max-width: 1280px) {
    #main {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }
}

/* 基本コンテナ */
#container-inner {
    color: var(--text-primary);
    font-size: clamp(1rem, 1vw + 0.8rem, 1.125rem);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

/* 記事全体を統合したカードレイアウト */
.entry-header {
    width: 100%;
    margin: 0;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    background: var(--article-background);
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
    border: 1px solid var(--border-light);
    border-bottom: none;
    box-sizing: border-box;
}

.entry-content {
    width: 100%;
    margin: 0;
    padding: 1.5rem;
    background: var(--article-background);
    border: 1px solid var(--border-light);
    border-top: none;
    border-bottom: none;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.entry-footer {
    width: 100%;
    margin: 0 0 2rem 0;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    background: var(--article-background);
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
    box-shadow: 0 4px 12px oklch(0% 0 0deg / 0.05);
    border: 1px solid var(--border-light);
    border-top: none;
    box-sizing: border-box;
}

/* 記事ヘッダー・タイトル・メタ情報の統一カラー（最適化） */
:is(.entry-header, .archive-entry-header) :is(h1, h2),
:is(.entry-title, .page-title) a,
:is(.entry-date, .date, .entry-category, .categories, .entry-tags, .tags) {
    color: var(--text-primary) !important;
}

:is(.entry-title, .page-title, .entry-header h1, .archive-entry-header h1) {
    color: var(--text-primary) !important;
}

/* 日付の装飾スタイル（ダークモード対応改善） */
.entry-date,
.date {
    font-size: 1rem !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 3px !important;
    text-decoration-color: var(--primary-color) !important;
}

/* 相対日付表示（「3日前」等）の改善 */
.entry-date[title*="日前"],
.date[title*="日前"],
.entry-date[title*="時間前"],
.date[title*="時間前"],
.entry-date[title*="ago"],
.date[title*="ago"] {
    position: relative;
}

/* 相対日付のダークモード専用調整 */
[data-theme="dark"] .entry-date,
[data-theme="dark"] .date {
    text-decoration-color: var(--primary-color) !important;
    opacity: 0.9; /* ダークモードでの可視性向上 */
}


/* 記事詳細ページのタイトルリンク（最適化） */
:is(.entry-header h1, .entry-title, .page-title) a {
    text-decoration: none !important;
    color: var(--text-primary) !important;
}

:is(.entry-header h1, .entry-title, .page-title) a:hover {
    text-decoration: none !important;
}

:is(.entry-date, .date, .entry-category, .categories, .entry-tags, .tags) a {
    color: var(--text-secondary) !important;
    text-decoration: none;
}

:is(.entry-date, .date, .entry-category, .categories, .entry-tags, .tags) a:hover {
    color: var(--primary-color) !important;
}

/* ==========================================================================
   記事詳細ページのカテゴリ・タグ表示調整
   ========================================================================== */

/* 記事詳細ページのカテゴリを小さくしてタイトル寄りに配置 */
.entry-header :is(.entry-category, .categories, .entry-tags, .tags),
.entry-footer :is(.entry-category, .categories, .entry-tags, .tags) {
    font-size: 0.8125rem !important; /* 13px相当（記事一覧より少し大きく） */
    margin-top: 0.5rem !important; /* タイトル寄りに配置 */
    margin-bottom: 1.5rem !important; /* 本文から距離を取る */
    line-height: 1.4 !important;
}

/* カテゴリリンクのスタイル調整 */
.entry-header :is(.entry-category, .categories, .entry-tags, .tags) a,
.entry-footer :is(.entry-category, .categories, .entry-tags, .tags) a {
    font-size: inherit !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: var(--border-radius) !important;
    background: var(--background-secondary) !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0.25rem !important;
}

.entry-header :is(.entry-category, .categories, .entry-tags, .tags) a:hover,
.entry-footer :is(.entry-category, .categories, .entry-tags, .tags) a:hover {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   モバイル見切れ防止：強制的テキスト折り返し設定
   ========================================================================== */

/* 全てのテキスト要素で強制折り返し */
.entry-content *,
.entry-header *,
.entry-footer *,
.page-archive .archive-entry * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 段落、リスト、見出しの特別対応 */
.entry-content p,
.entry-content li,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content div {
    hyphens: auto !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* 記事詳細ページのカテゴリ・ダークモード対応 */
[data-theme="dark"] .entry-header :is(.entry-category, .categories, .entry-tags, .tags) a,
[data-theme="dark"] .entry-footer :is(.entry-category, .categories, .entry-tags, .tags) a {
    background: var(--background-secondary) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .entry-header :is(.entry-category, .categories, .entry-tags, .tags) a:hover,
[data-theme="dark"] .entry-footer :is(.entry-category, .categories, .entry-tags, .tags) a:hover {
    background: var(--primary-color) !important;
    color: var(--background) !important;
}

/* ダークモード時の日付リンク色の改善 */
[data-theme="dark"] :is(.entry-date, .date) a {
    color: oklch(75% 0.008 250deg) !important; /* より明るいグレー */
    opacity: 0.9;
}

[data-theme="dark"] :is(.entry-date, .date) a:hover {
    color: var(--primary-color) !important;
    opacity: 1;
}

/* 記事内容の読みやすさ向上（より詰まったレイアウト） */
.entry-content p {
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* 記事内要素の基本マージン設定 */
.entry-content p:first-child,
.entry-content div:first-child {
    margin-top: 0;
}

.entry-content ul,
.entry-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.entry-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.entry-content blockquote {
    margin: 0 0 1rem 0;
    padding: 1rem 1rem 0.2rem 1rem;
    background: oklch(96% 0.003 250deg);
    border-left: 3px solid var(--border-color) !important;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-style: normal;
    color: var(--text-secondary);
}

/* 記事内のコンテンツリンクのみをブランドカラーで差別化 */
.entry-content :is(p, li, div, blockquote, span) a:not([class*="embed"]):not([class*="hatena"]):not([data-embed-url]) {
    color: var(--primary-color) !important;
    transition: var(--transition);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--primary-color);
}

.entry-content :is(p, li, div, blockquote, span) a:not([class*="embed"]):not([class*="hatena"]):not([data-embed-url]):hover {
    color: var(--primary-hover) !important;
    text-decoration-color: var(--primary-hover);
}

body {
    background: var(--background);
    color: var(--text-primary);
    transition: background-color 0.3s ease;
}

/* グローバルヘッダー非表示 */
#globalheader-container {
    display: none;
}

/* 読者になるボタンとサイドバー装飾を非表示 */
.blog-controlls,
.reader-button,
.follow-button,
a[href*="subscribe"],
a[href*="follow"],
.subscription-button,
#sidebar,
.hatena-module-sidebar,
.sidebar-module {
    display: none !important;
}

/* サイドバー関連の装飾を完全削除 */
*[class*="sidebar"]::before,
*[class*="sidebar"]::after,
.hatena-module::before,
.hatena-module::after {
    display: none !important;
}

/* はてなブログテーマの左ボーダー装飾を削除 */
.entry-content {
    border-left: none !important;
}

/* ==========================================================================
   ページナビゲーション（前/次ボタン）
   ========================================================================== */

.pager {
    display: flex;
    gap: 1rem;
    margin: 3rem auto 0;
    max-width: 800px;
    padding: 0 1rem;
    container-type: inline-size;
}

.pager-prev,
.pager-next {
    flex: 1;
    max-width: 48%;
}

.pager-prev a,
.pager-next a {
    display: block;
    padding: 1.25rem 1.5rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    
    /* テキスト制限 */
    white-space: nowrap;
    text-overflow: ellipsis;
    
    /* アクセシビリティ改善 */
    min-height: 44px; /* タッチターゲットサイズ */
}

.pager-prev a:focus,
.pager-next a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px oklch(62% 0.12 194deg / 0.2);
}

.pager-prev a {
    text-align: left;
    padding-left: 2.5rem;
}

.pager-next a {
    text-align: right;
    padding-right: 2.5rem;
}

.pager-prev a::before {
    content: "←";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--primary-color);
    transition: var(--transition);
}

.pager-next a::after {
    content: "→";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--primary-color);
    transition: var(--transition);
}

@media (hover: hover) {
    .pager-prev a:hover,
    .pager-next a:hover {
        background: var(--background-hover);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }
    
    .pager-prev a:hover::before {
        transform: translateY(-50%) translateX(-2px);
    }
    
    .pager-next a:hover::after {
        transform: translateY(-50%) translateX(2px);
    }
}

/* レスポンシブ対応 */
@container (max-width: 600px) { /* var(--bp-container) */
    .pager {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .pager-prev,
    .pager-next {
        max-width: 100%;
    }
    
    .pager-prev a,
    .pager-next a {
        text-align: center;
        padding: 1rem 3rem;
    }
    
    .pager-prev a::before,
    .pager-next a::after {
        position: static;
        transform: none;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }
}

/* ==========================================================================
   記事サムネイル
   ========================================================================== */

.page-archive .entry-thumb {
    aspect-ratio: 16/9;
    width: 280px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.page-archive .entry-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.urllist-with-thumbnails li .urllist-image {
    aspect-ratio: 4/3;
    width: 120px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.urllist-with-thumbnails li .urllist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   記事一覧・区切り線
   ========================================================================== */

.page-archive .archive-entry {
    transition: var(--transition);
    padding: 1.5rem;
    border-radius: var(--border-radius-large);
    will-change: transform;
    backface-visibility: hidden;
    border: 1px solid var(--border-light);
    margin-bottom: 1rem;
    position: relative;
    background: var(--article-background);
    box-shadow: 0 2px 8px oklch(0% 0 0deg / 0.04);
    box-sizing: border-box;
}

.page-archive .archive-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* 記事一覧での統一カラー */
.page-archive .archive-entry h2,
.page-archive .archive-entry h1,
.page-archive .archive-entry .entry-title,
.page-archive .archive-entry .date,
.page-archive .archive-entry .entry-date,
.page-archive .archive-entry .category,
.page-archive .archive-entry .categories {
    color: var(--text-primary) !important;
}

/* タイトルリンクを強制的に統一カラーに */
.page-archive .archive-entry h2 a,
.page-archive .archive-entry h1 a,
.page-archive .archive-entry .entry-title a,
.archive-entry h2 a,
.archive-entry h1 a,
.archive-entry .entry-title a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.page-archive .archive-entry h2 a:hover,
.page-archive .archive-entry h1 a:hover,
.page-archive .archive-entry .entry-title a:hover,
.archive-entry h2 a:hover,
.archive-entry h1 a:hover,
.archive-entry .entry-title a:hover {
    color: var(--text-primary) !important;
    text-decoration: underline !important;
}

.page-archive .archive-entry .date a,
.page-archive .archive-entry .entry-date a,
.page-archive .archive-entry .category a,
.page-archive .archive-entry .categories a {
    color: var(--text-secondary) !important;
    text-decoration: none;
}

.page-archive .archive-entry .date a:hover,
.page-archive .archive-entry .entry-date a:hover,
.page-archive .archive-entry .category a:hover,
.page-archive .archive-entry .categories a:hover {
    color: var(--primary-color) !important;
}

/* シンプルな区切り線（SmartHR風） */

/* 記事ページの関連要素にも同じ区切りスタイルを適用 */
.related-posts,
.comments-area,
.social-sharing,
.author-info {
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    margin-top: 2rem;
}

.related-posts .related-entry,
.comments-area .comment {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.related-posts .related-entry:last-child,
.comments-area .comment:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* ==========================================================================
   関連記事リンクのダークモード対応強化
   ========================================================================== */

/* 関連記事タイトルリンク */
.related-posts .related-entry h3 a,
.related-posts .related-entry h4 a,
.related-posts .related-entry .entry-title a,
.related-entries .related-entry h3 a,
.related-entries .related-entry h4 a,
.related-entries .related-entry .entry-title a {
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: var(--transition);
}

.related-posts .related-entry h3 a:hover,
.related-posts .related-entry h4 a:hover,
.related-posts .related-entry .entry-title a:hover,
.related-entries .related-entry h3 a:hover,
.related-entries .related-entry h4 a:hover,
.related-entries .related-entry .entry-title a:hover {
    color: var(--primary-color) !important;
    text-decoration: underline;
}

/* 関連記事の日付表示（「○日前」等） */
.related-posts .related-entry .date,
.related-posts .related-entry .entry-date,
.related-posts .related-entry time,
.related-entries .related-entry .date,
.related-entries .related-entry .entry-date,
.related-entries .related-entry time {
    color: var(--text-secondary) !important;
    font-size: 0.875rem;
    opacity: 0.8;
}

/* 関連記事エリアのパディング調整（はてなブログ標準） */
.related-entries {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

/* 記事一覧の日付のパディング削除（Flexboxで統一） */
.page-archive .archive-entry .date {
    padding: 0 !important;
}

/* はてなブログ標準の関連記事機能 */
.hatena-urllist-with-thumbnails li a,
.entry-see-more a,
.see-more-entries a {
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: var(--transition);
}

.hatena-urllist-with-thumbnails li a:hover,
.entry-see-more a:hover,
.see-more-entries a:hover {
    color: var(--primary-color) !important;
    text-decoration: underline;
}

/* はてなブログ関連記事の日付 */
.hatena-urllist-with-thumbnails li .date,
.hatena-urllist-with-thumbnails li time {
    color: var(--text-secondary) !important;
    font-size: 0.8125rem;
    opacity: 0.7;
}

@media (hover: hover) {
    .page-archive .archive-entry:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
        border-color: var(--text-tertiary);
    }
    
    .page-archive .archive-entry:hover .entry-thumb img {
        transform: scale(1.02);
    }
}

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

/* はてなモジュールタイトル（装飾削除） */
.hatena-module-title {
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1.1rem;
}

.hatena-module-title a {
    color: var(--text-secondary);
    text-decoration: none;
}

/* カテゴリリンク（タグ風） */
.hatena-module-category .hatena-urllist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hatena-module-category .hatena-urllist li {
    margin: 0;
    padding: 0;
}

.hatena-module-category .hatena-urllist a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: var(--background-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition);
    border: 1px solid var(--border-light);
}

@media (hover: hover) {
    .hatena-module-category .hatena-urllist a:hover {
        outline: 2px solid var(--primary-color);
        outline-offset: -2px;
        background: var(--primary-light);
    }
}

.hatena-module-category .hatena-urllist a span {
    background: var(--border-color);
    color: var(--text-tertiary);
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

/* リンクリスト */
.hatena-module-links .hatena-urllist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hatena-module-links .hatena-urllist li {
    border-bottom: 1px solid var(--border-light);
}

.hatena-module-links .hatena-urllist li:last-child {
    border-bottom: none;
}

.hatena-module-links .hatena-urllist a {
    display: flex;
    align-items: center;
    padding: 0.75rem 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    line-height: 1.6;
}

.hatena-module-links .hatena-urllist a::before {
    content: "›";
    color: var(--primary-color);
    font-weight: 600;
    margin-right: 0.5rem;
    transform: translateX(-0.25em);
    transition: var(--transition);
}

@media (hover: hover) {
    .hatena-module-links .hatena-urllist a:hover {
        background: var(--background-hover);
        color: var(--primary-color);
        padding-left: 0.75rem;
    }
    
    .hatena-module-links .hatena-urllist a:hover::before {
        transform: translateX(0);
    }
}

/* ==========================================================================
   コンテンツ装飾
   ========================================================================== */

/* コードブロック */
pre.code {
    position: relative;
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: var(--border-radius);
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0.25rem 0;
}

/* 言語表示を削除 */
pre.code::before {
    display: none;
}

.code-line {
    /* 行番号を削除し、通常のパディングに変更 */
    padding-left: 0;
    position: relative;
    min-height: 1.5em;
}

/* 行番号の疑似要素を削除 */
.code-line::before {
    display: none;
}

/* コードブロック内の基本スタイリング */
pre.code code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: #d4d4d4;
}

/* シンプルなコードブロックスタイル */
/* シンタックスハイライトは無効化し、統一された見た目に */
pre, 
pre.code,
.entry-content pre,
.entry-content pre.code {
    color: #d4d4d4 !important;
}

/* コードブロック内の全ての要素を統一色に */
pre *,
pre.code *,
.entry-content pre *,
.entry-content pre.code * {
    color: #d4d4d4 !important;
}

/* テーブル */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: oklch(96% 0.003 250deg);
}

/* テーブルラッパー */
.table-wrapper {
    display: block;
    overflow: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

table thead tr th,
table tbody tr th {
    background: oklch(90% 0.001 250deg);
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
    padding: 0.875rem;
    border-bottom: 1px solid var(--border-color);
}

table tbody tr td {
    padding: 0.875rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* ダークモード時のテーブル */
[data-theme="dark"] table thead tr th,
[data-theme="dark"] table tbody tr th {
    background: var(--background-secondary);
    color: var(--primary-color);
}

/* 太字テキスト */
article strong {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
    text-decoration-color: var(--primary-color);
    padding: 0 0.125rem;
}


/* ==========================================================================
   ダークモード切り替えボタン
   ========================================================================== */

.theme-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--background-secondary);
    color: var(--text-primary);
    font-size: 1.125rem;
    transition: var(--transition);
    z-index: var(--z-index-fixed);
    box-shadow: var(--shadow-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-hover), 0 0 0 4px oklch(62% 0.12 194deg / 0.2);
}

.theme-toggle:hover {
    background: var(--background-hover);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle.switching {
    animation: themeSwitch 0.3s ease-out;
}

@keyframes themeSwitch {
    50% { transform: rotateY(180deg); }
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

@media (max-width: 960px) { /* var(--bp-large) */
    :root {
        --shadow-hover: 0 4px 8px oklch(0% 0 0deg / 0.06);
    }
    
    .theme-toggle {
        bottom: 1rem;
        right: 1rem;
        width: 2.75rem;
        height: 2.75rem;
    }
    
    .hatena-module-category .hatena-urllist {
        gap: 0.1875rem;
    }
    
    .hatena-module-category .hatena-urllist a {
        padding: 0.25rem 0.5rem;
        font-size: 0.8125rem;
    }
    
    .page-archive .archive-entry {
        padding: 1rem 0.5rem;
    }
    
    /* 関連記事エリアのレスポンシブ対応 */
    .related-entries {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
}

@media (max-width: 600px) { /* var(--bp-container) */
    #main {
        max-width: 100%;
        padding: 0 0.75rem; /* さらに縮小してモバイル見切れ防止 */
    }
    
    .entry-content,
    .entry-header,
    .entry-footer {
        padding: 1rem;
    }
    
    .entry-content {
        margin-bottom: 1.5rem;
    }
    
    .entry-header {
        margin-bottom: 1.5rem;
    }
    
    .related-posts,
    .comments-area,
    .social-sharing,
    .author-info {
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }
    
    /* 関連記事エリアのモバイル対応 */
    .related-entries {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .page-archive .entry-thumb {
        width: 100%;
        aspect-ratio: 16/9;
    }
    
    .urllist-with-thumbnails li .urllist-image {
        width: 80px;
        aspect-ratio: 1;
    }
    
    pre.code {
        font-size: 0.8125rem;
        padding: 0.875rem;
    }
    
    .code-line {
        padding-left: 0;
    }
    
    table {
        font-size: 0.875rem;
    }
    
    table thead tr th,
    table tbody tr th,
    table tbody tr td {
        padding: 0.625rem;
    }
}

/* プリファード・カラー・スキーム対応 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --background: oklch(15% 0.01 190deg);
        --background-secondary: oklch(18% 0.015 190deg);
        --background-hover: oklch(22% 0.015 190deg);
        --text-primary: oklch(95% 0.005 190deg);
        --text-secondary: oklch(85% 0.01 190deg);
        --text-tertiary: oklch(70% 0.015 190deg);
    }
}

/* ダークモードでの境界線強化 */
[data-theme="dark"] .entry-header,
[data-theme="dark"] .entry-content,
[data-theme="dark"] .entry-footer,
[data-theme="dark"] .page-archive .archive-entry {
    border-color: var(--article-border-dark);
}

/* ダークモード時の関連記事・コメントエリア改善 */
[data-theme="dark"] .related-posts,
[data-theme="dark"] .related-entries,
[data-theme="dark"] .comments-area {
    border-color: var(--article-border-dark);
}

[data-theme="dark"] .related-posts .related-entry,
[data-theme="dark"] .related-entries .related-entry,
[data-theme="dark"] .comments-area .comment {
    border-color: var(--article-border-dark);
}

/* ダークモード時の関連記事リンク色の最終調整 */
[data-theme="dark"] .related-posts .related-entry h3 a,
[data-theme="dark"] .related-posts .related-entry h4 a,
[data-theme="dark"] .related-posts .related-entry .entry-title a,
[data-theme="dark"] .related-entries .related-entry h3 a,
[data-theme="dark"] .related-entries .related-entry h4 a,
[data-theme="dark"] .related-entries .related-entry .entry-title a {
    color: oklch(90% 0.005 250deg) !important; /* ダークモードで明るいグレー */
}

[data-theme="dark"] .related-posts .related-entry .date,
[data-theme="dark"] .related-posts .related-entry .entry-date,
[data-theme="dark"] .related-posts .related-entry time,
[data-theme="dark"] .related-entries .related-entry .date,
[data-theme="dark"] .related-entries .related-entry .entry-date,
[data-theme="dark"] .related-entries .related-entry time {
    color: oklch(70% 0.008 250deg) !important; /* ダークモードで適度なグレー */
    opacity: 0.8;
}

/* ダークモード時のはてなブログ標準関連記事 */
[data-theme="dark"] .hatena-urllist-with-thumbnails li a {
    color: oklch(90% 0.005 250deg) !important;
}

[data-theme="dark"] .hatena-urllist-with-thumbnails li .date,
[data-theme="dark"] .hatena-urllist-with-thumbnails li time {
    color: oklch(65% 0.01 250deg) !important;
    opacity: 0.7;
}


/* はてなスター完全非表示（動的生成対応） */
.hatena-star-container,
.hatena-star-inner-container,
.hatena-star-star-container,
.js-keyboard-openable,
.hatena-star-comment-container,
.hatena-star-add-button,
.star,
.stars,
[class*="hatena-star"],
[id*="hatena-star"],
.hatena-star,
.Hatena_Star,
iframe[src*="hatena"],
iframe[src*="star"],
script[src*="hatena"],
script[src*="star"],
/* 記事一覧専用 */
.page-archive .hatena-star-container,
.page-archive .hatena-star-inner-container,
.page-archive .hatena-star-star-container,
.page-archive .js-keyboard-openable,
.page-archive .hatena-star-comment-container,
.page-archive .hatena-star-add-button,
.page-archive .star,
.page-archive .stars,
.page-archive [class*="hatena-star"],
.page-archive [id*="hatena-star"],
.page-archive .hatena-star,
.page-archive .Hatena_Star,
.page-archive iframe[src*="hatena"],
.page-archive iframe[src*="star"],
.page-archive script[src*="hatena"],
.page-archive script[src*="star"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -1 !important;
}

/* パフォーマンス最適化 */
* {
    will-change: auto;
}

.page-archive .archive-entry,
.theme-toggle,
.pager-prev a,
.pager-next a {
    will-change: transform;
}

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

/* モーション減少設定対応 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* フォーカススタイルの統一 */
:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

/* フォーカス可能要素の改善 */
:is(a, button, input, textarea, select, [tabindex]):focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(62% 0.12 194deg / 0.2);
}

/* スキップリンク */
.skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: var(--border-radius);
    z-index: 9999;
    font-weight: 600;
}

.skip-link:focus {
    top: 8px;
}

/* コントラスト改善（ハイコントラストモード） */
@media (prefers-contrast: high) {
    :root {
        --text-primary: oklch(10% 0.005 250deg);
        --text-secondary: oklch(25% 0.008 250deg);
        --border-color: oklch(30% 0.01 250deg);
        --border-light: oklch(25% 0.008 250deg);
    }
    
    [data-theme="dark"] {
        --text-primary: oklch(98% 0.002 250deg);
        --text-secondary: oklch(90% 0.005 250deg);
        --border-color: oklch(70% 0.01 250deg);
        --border-light: oklch(60% 0.008 250deg);
    }
}

/* ==========================================================================
   記事内コンテンツ専用ダークモード対応（article.htmlから移行）
   ========================================================================== */

/* 見出しのダークモード対応 */
[data-theme="dark"] .entry-content.hatenablog-entry h1,
[data-theme="dark"] .entry-content.hatenablog-entry h2,
[data-theme="dark"] .entry-content.hatenablog-entry h3,
[data-theme="dark"] .entry-content.hatenablog-entry h4,
[data-theme="dark"] .entry-content.hatenablog-entry h5,
[data-theme="dark"] .entry-content.hatenablog-entry h6 {
    color: var(--text-primary) !important;
}

/* 見出し詳細カラー調整 */
[data-theme="dark"] .entry-content.hatenablog-entry h1 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .entry-content.hatenablog-entry h2 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .entry-content.hatenablog-entry h2:after {
    background: var(--text-primary) !important;
}

[data-theme="dark"] .entry-content.hatenablog-entry h3 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .entry-content.hatenablog-entry h3:after {
    background: var(--text-secondary) !important;
}

[data-theme="dark"] .entry-content.hatenablog-entry h4 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .entry-content.hatenablog-entry h5,
[data-theme="dark"] .entry-content.hatenablog-entry h6 {
    color: var(--text-tertiary) !important;
}

/* 引用ブロックのダークモード対応 */
[data-theme="dark"] .entry-content blockquote {
    background-color: var(--background-secondary) !important;
    color: var(--text-secondary) !important;
    border-left-color: var(--primary-color) !important;
}

[data-theme="dark"] .entry-content blockquote p {
    color: var(--text-secondary) !important;
}


/* アコーディオンのダークモード対応 */
[data-theme="dark"] .acodion-content {
    background-color: var(--background) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .entry-content .acodion-content p {
    color: var(--text-primary) !important;
    background: var(--background) !important;
}

[data-theme="dark"] .acodion-panel {
    background-color: var(--background) !important;
    border-color: var(--primary-color) !important;
}

[data-theme="dark"] .acodion-title {
    color: var(--primary-color) !important;
    background-color: var(--background) !important;
}

[data-theme="dark"] .acodion-panel:hover,
[data-theme="dark"] .acodion-title:hover {
    background-color: var(--primary-color) !important;
    color: var(--background) !important;
}


/* 記事ナビゲーション（pager）のダークモード対応 */
[data-theme="dark"] .pager {
    background: var(--background-secondary) !important;
    border-color: var(--article-border-dark) !important;
}

/* 包括的な関連記事・記事一覧・日付表示のダークモード対応（最強セレクタ） */
/* はてなブログで使用される可能性のある全ての関連記事セレクタを網羅 */
[data-theme="dark"] :is(
    .related-posts,
    .related-entries, 
    .page-archive,
    .entry-list,
    .archive-entries,
    #main,
    .sidebar,
    .hatena-urllist-with-thumbnails,
    .urllist-with-thumbnails,
    .hatena-module,
    .hatena-module-related-entries,
    .hatena-module-entries-access-ranking,
    .modules,
    .module,
    section,
    aside,
    .widget,
    .recent-entries,
    .popular-entries,
    .category-entries
) :is(
    .related-entry,
    .archive-entry,
    .entry,
    .urllist-item,
    li,
    .hatena-urllist-item,
    .module-content,
    .module-body,
    article,
    .entry-item,
    .list-item
) :is(h1, h2, h3, h4, h5, h6, .entry-title, .title, .archive-entry-title, a[href*="/entry/"]) a {
    color: var(--text-primary) !important; /* ダークモードで明るい白系 */
    text-decoration: none !important;
}

/* より強力な汎用セレクタ：すべてのリンクが記事URLの場合 */
[data-theme="dark"] a[href*="/entry/"]:not(.entry-see-more):not(.pager) {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

[data-theme="dark"] :is(
    .related-posts,
    .related-entries,
    .page-archive,
    .entry-list,
    .archive-entries,
    #main,
    .sidebar,
    .hatena-urllist-with-thumbnails,
    .urllist-with-thumbnails
) :is(
    .related-entry,
    .archive-entry,
    .entry,
    .urllist-item,
    li
) :is(.date, .entry-date, time, .datetime, .archive-date) {
    color: var(--text-secondary) !important; /* ダークモードで高可視性グレー */
    opacity: 0.9 !important;
    text-decoration-color: var(--primary-color) !important;
}

[data-theme="dark"] :is(
    .related-posts,
    .related-entries,
    .page-archive,
    .entry-list,
    .archive-entries,
    #main,
    .sidebar,
    .hatena-urllist-with-thumbnails,
    .urllist-with-thumbnails
) :is(
    .related-entry,
    .archive-entry,
    .entry,
    .urllist-item,
    li
) :is(.date, .entry-date, time, .datetime, .archive-date) a {
    color: var(--text-secondary) !important; /* 日付リンクも同じ色 */
    text-decoration: underline !important;
    text-decoration-color: var(--primary-color) !important;
    opacity: 0.9 !important;
}

/* ==========================================================================
   最終手段：最強詳細度のダークモード関連記事対応
   ========================================================================== */

/* 最高詳細度の関連記事リンク対応（どんなHTML構造でも強制適用） */
[data-theme="dark"] * a[href*="/entry/"]:not([class*="pager"]):not([class*="more"]):not([class*="button"]) {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

/* サイドバーやフッターなど、関連記事が表示される可能性のある全エリア */
[data-theme="dark"] :is(#sidebar, .sidebar, footer, .footer, aside, section, .hatena-module, .module) a[href*="/entry/"] {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

/* 動的に生成される可能性のあるコンテンツ（JavaScriptで追加される要素） */
[data-theme="dark"] :is([class*="related"], [class*="recommend"], [class*="suggest"], [id*="related"], [id*="recommend"]) a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}