/**
 * ブログ記事専用デザインCSS
 * 対象: /blog/以下の記事ページ5本
 * 作成日: 2025-10-12
 * 最終更新: 2025-10-14 (Round 2改善)
 *
 * このCSSはlayout.htmlを変更せず、ブログ記事のみに適用されます
 *
 * NOTE: Unlayered CSS to override @layer critical from layout.html
 */

/* ========================================
   0. CSS変数定義（カラーパレット統一）
   ======================================== */
:root {
  /* Primary Colors */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #333333;
  --color-text-tertiary: #666666;
  --color-text-muted: #888888;
  
  /* Border & Divider Colors */
  --color-border-light: #e0e0e0;
  --color-border-medium: #d0d0d0;
  
  /* Brand Colors */
  --color-brand-primary: #6b5b95;
  --color-brand-secondary: #5a4a7d;
  --color-brand-accent: #988cdb;
  
  /* Background Colors */
  --color-bg-white: #ffffff;
  --color-bg-light: #f8f9fa;
  --color-bg-code: #f5f5f5;
  --color-bg-code-dark: #2d2d2d;
  
  /* Spacing (8px grid) */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 56px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s ease;
}

/* ========================================
   A-1. 画像サイズと配置
   ======================================== */

/* Hero画像（1200x630） */
.box_post img[width="1200"][height="630"] {
  max-width: 800px !important;
  margin: 40px auto !important;
  display: block !important;
}

/* SVG図（800x600） */
.box_post img[width="800"][height="600"] {
  max-width: 600px !important;
  margin: 50px auto !important;
  display: block !important;
}

/* 縦長画像（600x800） */
.box_post img[width="600"][height="800"] {
  max-width: 400px !important;
  margin: 50px auto !important;
  display: block !important;
}

/* 画像キャプション */
.box_post .note {
  font-size: 14px !important;
  color: #6b7280 !important;
  margin-top: 12px !important;
  text-align: center !important;
  display: block !important;
}

/* ========================================
   A-2. 見出しの階層とスタイル
   ======================================== */

/* H1 - Higher specificity to override critical CSS */
html .container2.box_post h1 {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 40px 0 30px !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.02em !important;
}

/* H2 (.post_title) - シンプル&モダンなスタイル */
html .container2.box_post .post_title {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: var(--space-xxl) 0 var(--space-md) !important;
  padding: 0 0 var(--space-xs) 0 !important;
  border-left: none !important;
  background: none !important;
  color: var(--color-text-primary) !important;
  border-bottom: 2px solid var(--color-border-light) !important;
  border-radius: 0 !important;
}

/* H3 - シンプルで明確なスタイル */
html .container2.box_post h3 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin: var(--space-lg) 0 var(--space-sm) !important;
  padding-bottom: 0 !important;
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

/* ========================================
   A-3. テキストとスペーシング
   ======================================== */

/* 本文 - Higher specificity */
html .container2.box_post p {
  font-size: 16px !important;
  line-height: 1.8 !important;
  margin: 1.5em 0 !important;
  color: var(--color-text-secondary) !important;
}

/* blogCard内のpタグは余白を小さく */
html .container2.box_post .blogCard p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

html .container2.box_post .blogCard .blogCardTitle {
  margin-bottom: 0 !important;
}

/* インラインコード */
.box_post code {
  background-color: #f5f5f5 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 0.9em !important;
}

/* コードブロック */
.box_post pre {
  background-color: #2d2d2d !important;
  color: #f8f8f2 !important;
  padding: 16px !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin: 1.5em 0 !important;
}

.box_post pre code {
  background-color: transparent !important;
  padding: 0 !important;
  color: inherit !important;
}

/* リスト */
.box_post ul,
.box_post ol {
  margin: 1.5em 0 !important;
  padding-left: 1.8em !important;
}

.box_post li {
  margin: 0.75em 0 !important;
  line-height: 1.8 !important;
}

/* 強調 */
.box_post strong {
  font-weight: 700 !important;
  color: #2c3e50 !important;
}

/* ========================================
   A-4. リンクスタイル
   ======================================== */

/* 本文中のリンク - 統一されたスタイル */
html .container2.box_post p a,
html .container2.box_post li a:not([aria-label]) {
  color: var(--color-brand-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: rgba(107, 91, 149, 0.3) !important;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast), transform var(--transition-fast) !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

html .container2.box_post p a:hover,
html .container2.box_post li a:not([aria-label]):hover {
  color: var(--color-brand-secondary) !important;
  text-decoration-color: var(--color-brand-secondary) !important;
  transform: translateY(-1px) !important;
}

html .container2.box_post p a:focus-visible,
html .container2.box_post li a:not([aria-label]):focus-visible {
  outline: 2px solid var(--color-brand-primary) !important;
  outline-offset: 4px !important;
  border-radius: 2px !important;
}

/* ========================================
   A-5. 目次とナビゲーション
   ======================================== */

/* 目次コンテナ */
.box_post .toc-container {
  background-color: #f8f9fa !important;
  padding: 15px !important;
  margin: 20px 0 !important;
  border-left: 3px solid #3498db !important;
}

.box_post .toc-container h3,
.box_post .toc-container .toc-title {
  font-size: 1.1rem !important;
  margin: 0 0 10px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.box_post .toc-container ul {
  list-style: none !important;
  padding-left: 1em !important;
}

.box_post .toc-container a {
  color: #2c3e50 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.box_post .toc-container a:hover {
  color: #3498db !important;
}

/* 目次（TOC）の修正 - nav[aria-label]を使用した目次 */

/* 目次のリンクをインライン表示に修正 - Higher specificity to override nav a { display: block; } */
html .container2.box_post nav[aria-label="記事内目次"] a {
  display: inline !important;
  text-decoration: none !important;
  color: var(--color-text-secondary) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
  transition: color var(--transition-fast), transform var(--transition-fast) !important;
}

/* ホバー時のスタイル */
html .container2.box_post nav[aria-label="記事内目次"] a:hover {
  color: var(--color-text-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transform: translateX(2px) !important;
}

/* フォーカス時のスタイル（アクセシビリティ） */
html .container2.box_post nav[aria-label="記事内目次"] a:focus-visible {
  outline: 2px solid var(--color-brand-primary) !important;
  outline-offset: 4px !important;
  border-radius: 2px !important;
}

/* アクティブ時のスタイル */
html .container2.box_post nav[aria-label="記事内目次"] a:active {
  color: var(--color-brand-primary) !important;
}

/* 現在位置のハイライト */
html .container2.box_post nav[aria-label="記事内目次"] a.active {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* 番号（span）のスタイル */
html .container2.box_post nav[aria-label="記事内目次"] span {
  display: inline !important;
  color: var(--color-text-muted) !important;
  font-weight: 600 !important;
  margin-right: 10px !important;
}

/* リスト項目の基本スタイル */
html .container2.box_post nav[aria-label="記事内目次"] li {
  display: block !important;
  width: 100% !important;
  margin-bottom: 14px !important;
  line-height: 1.8 !important;
}

/* リスト全体のスタイル */
html .container2.box_post nav[aria-label="記事内目次"] ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* 目次コンテナのスタイル - 適切な視覚的境界を持つカードデザイン */
html .container2.box_post nav[aria-label="記事内目次"] {
  margin: 48px 0 !important;
  padding: 24px !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* 目次タイトル（h3）のスタイル */
html .container2.box_post nav[aria-label="記事内目次"] h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: 0.02em !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ========================================
   A-6. レスポンシブ対応
   ======================================== */

/* タブレット（768-1024px） */
@media (max-width: 1024px) {
  .box_post img[width="1200"][height="630"] {
    max-width: 90% !important;
  }

  .box_post img[width="800"][height="600"] {
    max-width: 85% !important;
  }

  .box_post h1 {
    font-size: 2rem !important;
  }

  .box_post .post_title {
    font-size: 1.6rem !important;
  }
}

/* モバイル（< 768px） */
@media (max-width: 768px) {
  .box_post img[width="1200"][height="630"],
  .box_post img[width="800"][height="600"],
  .box_post img[width="600"][height="800"] {
    max-width: 100% !important;
    margin: 30px auto !important;
  }

  .box_post h1 {
    font-size: 1.75rem !important;
    margin: 30px 0 20px !important;
  }

  .box_post .post_title {
    font-size: 1.4rem !important;
    margin: 40px 0 16px !important;
    padding: 10px 0 10px 16px !important;
  }

  .box_post h3 {
    font-size: 1.15rem !important;
    margin: 30px 0 12px !important;
  }

  .box_post p {
    font-size: 15px !important;
  }

  .box_post .blog-card {
    flex-direction: column !important;
    text-align: center !important;
  }

  .box_post .blog-card img {
    max-width: 100% !important;
  }

  .box_post .toc-container {
    padding: 12px !important;
  }

  /* タッチターゲット - pタグ内とblogCardFooter内のリンクは除外 */
  .box_post .blogCardFooter a {
    min-height: auto !important;
    min-width: auto !important;
    display: inline !important;
  }

  .box_post p a {
    min-height: auto !important;
    min-width: auto !important;
    display: inline !important;
  }

  .box_post button {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ========================================
   B. 診断ページ 関連情報セクション
   （34785648.html内で直接使用）
   ======================================== */

.related-info-section {
  margin: 60px 0 40px !important;
  background-color: #f8f9fa !important;
  border-radius: 12px !important;
  padding: 30px !important;
  border-left: 4px solid #988cdb !important;
}

.related-info-section h4 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  margin: 0 0 20px !important;
}

.related-info-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.related-info-section li {
  margin: 12px 0 !important;
  padding-left: 24px !important;
  position: relative !important;
}

.related-info-section li::before {
  content: "→" !important;
  position: absolute !important;
  left: 0 !important;
  color: #988cdb !important;
  font-weight: 700 !important;
}

.related-info-section a {
  font-size: 16px !important;
  color: #2563eb !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.related-info-section a:hover {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}

/* ========================================
   C. 全ページ共通品質基準
   ======================================== */

/* フォーカス状態（アクセシビリティ） */
.box_post a:focus,
.box_post button:focus {
  outline: 2px solid #3498db !important;
  outline-offset: 2px !important;
}