/* ==========================================================================
   建設特化ブログ 最高峰モダン・メディアデザイン V8 (shadcn/ui × vercel Edition)
   日経クロステック・Zenn・Note水準の洗練された佇まいと工学的タイポグラフィ
   ========================================================================== */

/* --- 1. 基本設定とデザイントークン --- */
:root {
    --primary-navy: #0f172a;       /* 威厳あるディープネイビー (shadcn/ui Slate-900) */
    --slate-dark: #1e293b;         /* 本文・見出し用スレート */
    --slate-medium: #475569;       /* サブテキスト・メタ情報 */
    --slate-light: #94a3b8;        /* 境界線・補足用 */
    --border-strong: #cbd5e1;      /* 構造の境界線 */
    --border-subtle: #e2e8f0;      /* 極細ヘアライン境界線 (Hairline Border) */
    --bg-light: #f8fafc;           /* 上質オフホワイト (Canvas Surface) */
    --bg-accent: #f1f5f9;          /* バッジ・テーブルヘッダー背景 */
    --accent-blue: #0284c7;        /* 洗練されたインディゴブルー */
    --accent-blue-hover: #0369a1;  /* ホバー時ブルー */
    --accent-crimson: #b91c1c;     /* 深みのあるダークレッド */
    --text-main: #24292f;          /* 抜群の可読性を誇るダーク */
    --text-dark: #0f172a;          /* 最濃ブラック */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace;
    --h1-size: 28px;
    --h2-size: 22px;
    --h3-size: 18px;
    --body-size: 16.5px;
    --line-height: 1.85;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&family=Outfit:wght@600;700;800&display=swap');

/* --- 全体基本リセット --- */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    font-size: var(--body-size);
    line-height: var(--line-height);
    color: var(--text-main);
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    letter-spacing: 0.025em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    margin: 0 0 1.65rem 0;
    line-height: var(--line-height);
}

strong {
    font-weight: 700;
    color: var(--text-dark);
}

/* 全体リンク設定（青色デフォルト下線を排除） */
a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover {
    color: var(--accent-blue-hover);
    text-decoration: none;
}

/* --- レンダリング幅と中央揃え --- */
#header, #header-inner, #blog-title, #blog-title-inner,
#top-box, #footer, #footer-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
}

/* --- 2カラム・レイアウト（記事エリア＋サイドバー） --- */
#content > #content-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 48px !important;
    padding: 0 24px !important;
}

#wrapper {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 820px !important;
    margin: 0 !important;
}

#main {
    padding: 2.5rem 0 !important;
    width: 100% !important;
}

#box2 {
    width: 320px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding-top: 2.5rem !important;
}

@media (max-width: 960px) {
    #content > #content-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 0 16px !important;
    }
    #wrapper, #main {
        max-width: 100% !important;
        width: 100% !important;
    }
    #box2 {
        width: 100% !important;
        margin-left: 0 !important;
        padding-top: 1.5rem !important;
    }
}

/* ==========================================================================
   ■ 2. ブログヘッダー（知的クリーンヘッダー・完全中央配置）
   ========================================================================== */
#blog-title {
    background: #ffffff !important;
    padding: 2.8rem 0 2.2rem 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

#blog-title-inner {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

#title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

#title a {
    font-family: 'Outfit', var(--font-sans) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--primary-navy) !important;
    text-decoration: none !important;
    letter-spacing: 0.04em !important;
    display: inline-block !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
}

#title a:hover {
    color: var(--accent-blue) !important;
}

/* サブタイトル：h2干渉を完全に排除し、中央配置でクリアに表示 */
#blog-description,
h2#blog-description,
#blog-title h2 {
    display: block !important;
    width: auto !important;
    max-width: 720px !important;
    margin: 0.75rem auto 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    text-align: center !important;
    letter-spacing: 0.08em !important;
    text-transform: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* ==========================================================================
   ■ 3. 記事タイトル & メタ情報
   ========================================================================== */
.date {
    display: inline-block !important;
    margin-bottom: 0.75rem !important;
}
.date a {
    color: var(--slate-medium) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 0.05em !important;
}
.date a:hover {
    color: var(--accent-blue) !important;
}

/* 記事タイトル (H1) */
article h1, .entry-title {
    font-size: var(--h1-size) !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    background: transparent !important;
    padding: 0 0 1rem 0 !important;
    margin: 0.5rem 0 1.5rem 0 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    border-bottom: 2px solid var(--primary-navy) !important;
    box-shadow: none !important;
}

.entry-title a {
    color: var(--text-dark) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.entry-title a:hover {
    color: var(--accent-blue) !important;
    text-decoration: none !important;
}

/* カテゴリー（ピルバッジ） */
.entry-categories {
    margin-bottom: 2rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.entry-categories a,
.entry-category-link {
    display: inline-block !important;
    padding: 4px 12px !important;
    background: var(--bg-accent) !important;
    color: var(--slate-dark) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-subtle) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.entry-categories a:hover,
.entry-category-link:hover {
    background: var(--primary-navy) !important;
    color: #ffffff !important;
    border-color: var(--primary-navy) !important;
}

/* ==========================================================================
   ■ 4. 見出し体系（shadcn/ui エディトリアル仕様）
   ========================================================================== */
.entry-content h2,
.article-container h2,
article h2:not(#blog-description) {
    font-size: var(--h2-size) !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: var(--text-dark) !important;
    background: #ffffff !important;
    padding: 0.65rem 0 0.65rem 0.85rem !important;
    margin-top: 4.2rem !important;
    margin-bottom: 1.8rem !important;
    border-radius: 0 !important;
    border-left: 4px solid var(--primary-navy) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    letter-spacing: 0.01em !important;
}

/* H2用ナンバリングバッジ (.h-num) */
h2 .h-num,
body h2 .h-num,
.entry-content h2 .h-num,
.article-container h2 .h-num,
article h2:not(#blog-description) .h-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', 'Inter', var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: var(--primary-navy) !important;
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 5px !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
    padding: 0 4px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
}

/* 中見出し (H3) */
.entry-content h3,
.article-container h3,
article h3 {
    font-size: var(--h3-size) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: var(--slate-dark) !important;
    background: transparent !important;
    padding: 0.45rem 0 0.45rem 0.85rem !important;
    margin-top: 3.2rem !important;
    margin-bottom: 1.5rem !important;
    border-left: 3px solid #64748b !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

h3 .h-num,
body h3 .h-num,
.entry-content h3 .h-num,
.article-container h3 .h-num,
article h3 .h-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', 'Inter', var(--font-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #64748b !important;
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    padding: 0 4px !important;
}

/* 小見出し (H4) */
.entry-content h4,
.article-container h4,
article h4 {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding-bottom: 0.4rem !important;
}

/* ==========================================================================
   ■ 5. 記事本文コンポーネント (shadcn/ui Quiet Elevation)
   ========================================================================== */

/* サマリーボックス */
.summary-box {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary-navy) !important;
    padding: 1.6rem 2rem !important;
    margin: 2.2rem auto 2.8rem auto !important;
    max-width: 820px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.summary-box ul {
    margin: 0 !important;
    padding-left: 1.2rem !important;
}
.summary-box li {
    margin-bottom: 0.65rem !important;
    line-height: 1.75 !important;
    color: var(--slate-dark) !important;
    font-size: 0.98rem !important;
}
.summary-box li:last-child {
    margin-bottom: 0 !important;
}

/* 画像 & Mermaid */
.img-container {
    text-align: center !important;
    margin: 3.5rem auto !important;
    max-width: 720px !important;
    width: 100% !important;
}
.img-container img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
    display: block !important;
    margin: 0 auto !important;
}

.mermaid-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 3.5rem auto !important;
    overflow-x: auto !important;
}
.mermaid svg {
    max-width: 100% !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
    background: #ffffff;
    padding: 18px !important;
}

/* 数式ボックス */
.formula-box {
    margin: 2.5rem auto !important;
    padding: 1.8rem 2.2rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary-navy) !important;
    border-radius: 8px !important;
    text-align: center !important;
    color: var(--text-dark) !important;
    max-width: 820px !important;
    box-sizing: border-box !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.formula-title {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: var(--slate-dark) !important;
    margin-bottom: 12px !important;
}
.formula-math {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    font-family: var(--font-mono) !important;
    color: var(--primary-navy) !important;
    letter-spacing: 0.05em !important;
    padding: 0.5rem 0 !important;
}
.formula-legend-container {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #cbd5e1 !important;
    text-align: left !important;
}
.formula-legend-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.88rem !important;
    color: var(--slate-medium) !important;
    line-height: 1.65 !important;
}

/* 計算ステップボックス */
.calc-step-box {
    margin: 2.5rem auto !important;
    padding: 1.8rem 2rem !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    max-width: 820px !important;
    box-sizing: border-box !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.calc-step-title {
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 16px !important;
    font-size: 1.02rem !important;
}
.calc-step-item {
    margin-bottom: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    border-bottom: 1px dashed var(--border-subtle) !important;
}
.calc-step-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.calc-step-num {
    font-weight: 700 !important;
    color: var(--primary-navy) !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}
.calc-step-label {
    font-weight: 600 !important;
    color: var(--slate-dark) !important;
    margin-left: 8px !important;
}
.calc-step-eq {
    font-family: var(--font-mono) !important;
    background: #f1f5f9 !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-size: 0.95rem !important;
    margin-top: 8px !important;
    color: var(--text-dark) !important;
}

/* トラブルカード (脱・赤太枠) */
.trouble-card-container {
    margin: 2.5rem auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    max-width: 820px !important;
    box-sizing: border-box !important;
}
.trouble-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--accent-crimson) !important;
    padding: 1.6rem 1.8rem !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.trouble-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}
.trouble-card-badge {
    display: inline-block !important;
    background: #fef2f2 !important;
    color: var(--accent-crimson) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #fee2e2 !important;
}
.trouble-card-title {
    font-weight: 700 !important;
    color: var(--accent-crimson) !important;
    font-size: 1.05rem !important;
}
.trouble-card-body p {
    margin-bottom: 0.75rem !important;
    font-size: 0.93rem !important;
    line-height: 1.7 !important;
}
.trouble-card-body p:last-child {
    margin-bottom: 0 !important;
}

/* 所長Kの教訓コールアウト */
.lesson-callout {
    margin: 2.5rem auto !important;
    padding: 1.6rem 2rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary-navy) !important;
    border-radius: 0 8px 8px 0 !important;
    max-width: 820px !important;
    box-sizing: border-box !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.lesson-callout-title {
    font-weight: 700 !important;
    color: var(--primary-navy) !important;
    font-size: 1.02rem !important;
    margin-bottom: 8px !important;
}
.lesson-callout-text {
    font-size: 0.95rem !important;
    color: var(--slate-dark) !important;
    line-height: 1.75 !important;
}

/* ==========================================================================
   ■ 6. テーブル (Zenn・日経クロステック風)
   ========================================================================== */
table, .styled-table, .premium-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 2.5rem auto !important;
    font-size: 0.92rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    max-width: 820px !important;
    box-sizing: border-box !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
th {
    background-color: #f8fafc !important;
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    text-align: left !important;
}
th:last-child {
    border-right: none !important;
}
td {
    padding: 13px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    color: var(--slate-dark) !important;
    background: #ffffff !important;
}
td:last-child {
    border-right: none !important;
}
tr:last-child td {
    border-bottom: none !important;
}
tr:nth-child(even) td {
    background-color: #f8fafc !important;
}
tr:hover td {
    background-color: #f0f9ff !important;
}

/* ==========================================================================
   ■ 7. 内部リンクカード & 楽天商品カード (shadcn/ui Elevated)
   ========================================================================== */
.internal-link-card-container {
    margin: 2.5rem auto !important;
    max-width: 820px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.internal-link-card {
    display: block !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary-navy) !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    max-width: 820px !important;
    margin: 0 auto 1.4rem auto !important;
    box-sizing: border-box !important;
}

.internal-link-card:hover {
    border-color: #cbd5e1 !important;
    border-left-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-2px) !important;
}

.internal-link-card .link-card-label {
    display: inline-block !important;
    color: var(--accent-blue) !important;
    background: #f0f9ff !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.internal-link-card .link-card-title {
    display: block !important;
    color: var(--text-dark) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    text-decoration: none !important;
}

.internal-link-card:hover .link-card-title {
    color: var(--accent-blue) !important;
}

.internal-link-card p {
    display: block !important;
    margin: 0 !important;
    color: var(--slate-medium) !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
}

/* 楽天カード */
.rakuten-card-container {
    margin: 3.2rem auto !important;
    padding: 24px 26px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary-navy) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-width: 820px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.r-card-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.r-card-badge {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
    background: var(--primary-navy) !important;
    color: #ffffff !important;
}

.r-card-comment {
    font-size: 0.9rem !important;
    color: var(--slate-dark) !important;
    line-height: 1.65 !important;
    background: #f8fafc !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    border-left: 3px solid #cbd5e1 !important;
}

.r-card-body {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
}

@media (max-width: 600px) {
    .r-card-body {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

.r-card-img-wrap {
    flex-shrink: 0 !important;
}
.r-card-img-wrap img {
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    object-fit: contain !important;
}

.r-card-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.r-card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
}
.r-card-title:hover {
    color: var(--accent-blue) !important;
}

.r-card-rating {
    font-size: 0.85rem !important;
    color: #f59e0b !important;
    font-weight: 700 !important;
}
.r-review-count {
    color: var(--slate-medium) !important;
    font-weight: 400 !important;
    margin-left: 6px !important;
}

.r-card-price {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--primary-navy) !important;
}
.r-card-price small {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: var(--slate-medium) !important;
    margin-left: 4px !important;
}

.r-btn-wrap {
    margin-top: 6px !important;
}

.r-btn-rakuten {
    display: inline-block !important;
    padding: 8px 18px !important;
    background: var(--primary-navy) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
}
.r-btn-rakuten:hover {
    background: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
}

/* ==========================================================================
   ■ 8. 著者プロフィールカード (shadcn/ui Card Component)
   ========================================================================== */
.author-profile-card {
    margin-top: 3.8rem !important;
    margin-bottom: 2.2rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary-navy) !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    display: block !important;
    max-width: 820px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.k-profile-layout {
    display: flex !important;
    gap: 22px !important;
    align-items: flex-start !important;
}

@media (max-width: 600px) {
    .k-profile-layout {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

.author-profile-card img,
.k-profile-img {
    width: 115px !important;
    max-width: 115px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    object-fit: contain !important;
    margin: 0 !important;
}

.profile-info {
    flex: 1 !important;
}

.profile-name {
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin-bottom: 8px !important;
}

.profile-bio {
    font-size: 0.92rem !important;
    color: var(--slate-dark) !important;
    line-height: 1.75 !important;
    margin-bottom: 14px !important;
}

.profile-links {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.k-profile-btn {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: #ffffff !important;
    color: var(--slate-dark) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.k-profile-btn:hover {
    background: var(--primary-navy) !important;
    color: #ffffff !important;
    border-color: var(--primary-navy) !important;
}

/* ==========================================================================
   ■ 9. サイドバー（shadcn/ui クリーンリスト）
   ========================================================================== */
.hatena-module {
    margin-bottom: 2.5rem !important;
}
.hatena-module-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--primary-navy) !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
    border-bottom: 2px solid var(--primary-navy) !important;
    letter-spacing: 0.03em !important;
}
.hatena-module-title a {
    color: var(--primary-navy) !important;
    text-decoration: none !important;
}

.hatena-urllist,
.hatena-module-recent-entries ul,
.hatena-module-entries-access-ranking ul,
.hatena-module-links ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.hatena-urllist li,
.hatena-module-recent-entries li,
.hatena-module-entries-access-ranking li,
.hatena-module-links li {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    line-height: 1.5 !important;
}
.hatena-urllist li:last-child,
.hatena-module-recent-entries li:last-child {
    border-bottom: none !important;
}
.hatena-urllist li a,
.hatena-module-recent-entries li a,
.hatena-module-entries-access-ranking li a,
.hatena-module-links li a {
    color: var(--slate-dark) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: block !important;
    transition: color 0.2s ease !important;
}
.hatena-urllist li a:hover,
.hatena-module-recent-entries li a:hover {
    color: var(--accent-blue) !important;
}

.hatena-module-search-box .search-form {
    display: flex !important;
    gap: 6px !important;
}
.hatena-module-search-box .search-module-input {
    flex: 1 !important;
    padding: 8px 12px !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px !important;
    font-size: 0.88rem !important;
    background: #f8fafc !important;
}
.hatena-module-search-box .search-module-input:focus {
    background: #ffffff !important;
    border-color: var(--accent-blue) !important;
    outline: none !important;
}
.hatena-module-search-box .search-module-button {
    padding: 8px 16px !important;
    background: var(--primary-navy) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}
.hatena-module-search-box .search-module-button:hover {
    background: #1e293b !important;
}

/* ==========================================================================
   ■ 10. フッター
   ========================================================================== */
#footer, .footer-inner, .hatena-module-foot {
    text-align: center !important;
    padding: 3rem 0 2rem 0 !important;
    color: var(--slate-medium) !important;
    font-size: 0.85rem !important;
    border-top: 1px solid var(--border-subtle) !important;
}
#footer a {
    color: var(--slate-medium) !important;
}
#footer a:hover {
    color: var(--accent-blue) !important;
}