/* ==========================================================================
   Code Syntax Highlighting Styles (highlight.js)
   ========================================================================== */

/* カスタマイズ可能な設定変数 */
:root {
  /* メインテーマカラー */
  --hljs-bg: #f8fafc;                    /* コードブロック背景色 */
  --hljs-color: #0f172a;                 /* 基本テキスト色 */
  --hljs-border: #e2e8f0;                /* ボーダー色 */
  
  /* 構文ハイライト色設定 - GitHub Light テーマベース */
  --hljs-comment: #6a737d;               /* コメント */
  --hljs-keyword: #d73a49;               /* キーワード (if, for, class等) */
  --hljs-string: #032f62;                /* 文字列 */
  --hljs-number: #005cc5;                /* 数値 */
  --hljs-function: #6f42c1;              /* 関数名 */
  --hljs-variable: #e36209;              /* 変数 */
  --hljs-type: #d73a49;                  /* 型定義 */
  --hljs-operator: #d73a49;              /* 演算子 */
  --hljs-punctuation: #24292e;           /* 括弧・記号 */
  --hljs-attribute: #6f42c1;             /* 属性 */
  --hljs-tag: #22863a;                   /* HTMLタグ */
  --hljs-meta: #6f42c1;                  /* メタ情報 */
  --hljs-literal: #005cc5;               /* リテラル */
  --hljs-built-in: #005cc5;              /* 組み込み関数 */
  --hljs-title: #6f42c1;                 /* クラス・関数タイトル */
  --hljs-section: #005cc5;               /* セクション */
  --hljs-quote: #6a737d;                 /* 引用 */
  --hljs-selector: #6f42c1;              /* CSSセレクタ */
  --hljs-property: #005cc5;              /* プロパティ */
  --hljs-value: #032f62;                 /* 値 */
  --hljs-addition: #28a745;              /* 追加行 (diff) */
  --hljs-deletion: #d73a49;              /* 削除行 (diff) */
  
  /* ダークテーマ用設定（オプション - コメントアウト済み） */
  /*
  --hljs-bg: #1e293b;
  --hljs-color: #e2e8f0;
  --hljs-border: #475569;
  --hljs-comment: #64748b;
  --hljs-keyword: #f472b6;
  --hljs-string: #34d399;
  --hljs-number: #60a5fa;
  --hljs-function: #a78bfa;
  --hljs-variable: #fb7185;
  --hljs-type: #f472b6;
  --hljs-operator: #f472b6;
  --hljs-punctuation: #cbd5e1;
  --hljs-attribute: #a78bfa;
  --hljs-tag: #10b981;
  --hljs-meta: #a78bfa;
  --hljs-literal: #60a5fa;
  --hljs-built-in: #60a5fa;
  --hljs-title: #a78bfa;
  --hljs-section: #60a5fa;
  --hljs-quote: #64748b;
  --hljs-selector: #a78bfa;
  --hljs-property: #60a5fa;
  --hljs-value: #34d399;
  --hljs-addition: #22c55e;
  --hljs-deletion: #ef4444;
  */
  
  /* Monokai風テーマ（オプション - コメントアウト済み） */
  /*
  --hljs-bg: #272822;
  --hljs-color: #f8f8f2;
  --hljs-border: #49483e;
  --hljs-comment: #75715e;
  --hljs-keyword: #f92672;
  --hljs-string: #e6db74;
  --hljs-number: #ae81ff;
  --hljs-function: #a6e22e;
  --hljs-variable: #fd971f;
  --hljs-type: #66d9ef;
  --hljs-operator: #f92672;
  --hljs-punctuation: #f8f8f2;
  --hljs-attribute: #a6e22e;
  --hljs-tag: #f92672;
  --hljs-meta: #f92672;
  --hljs-literal: #ae81ff;
  --hljs-built-in: #66d9ef;
  --hljs-title: #a6e22e;
  --hljs-section: #a6e22e;
  --hljs-quote: #75715e;
  --hljs-selector: #a6e22e;
  --hljs-property: #66d9ef;
  --hljs-value: #e6db74;
  --hljs-addition: #a6e22e;
  --hljs-deletion: #f92672;
  */
  
  /* VS Code Light+ テーマ（オプション - コメントアウト済み） */
  /*
  --hljs-bg: #ffffff;
  --hljs-color: #000000;
  --hljs-border: #e5e5e5;
  --hljs-comment: #008000;
  --hljs-keyword: #0000ff;
  --hljs-string: #a31515;
  --hljs-number: #098658;
  --hljs-function: #795e26;
  --hljs-variable: #001080;
  --hljs-type: #267f99;
  --hljs-operator: #000000;
  --hljs-punctuation: #000000;
  --hljs-attribute: #e50000;
  --hljs-tag: #800000;
  --hljs-meta: #0000ff;
  --hljs-literal: #0000ff;
  --hljs-built-in: #267f99;
  --hljs-title: #795e26;
  --hljs-section: #0000ff;
  --hljs-quote: #008000;
  --hljs-selector: #800000;
  --hljs-property: #e50000;
  --hljs-value: #0451a5;
  --hljs-addition: #00ff00;
  --hljs-deletion: #ff0000;
  */
}

/* メインのコードブロックスタイル */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 1.5rem;
  color: var(--hljs-color);
  background: var(--hljs-bg);
  border: 1px solid var(--hljs-border);
  border-radius: 8px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  tab-size: 4;
  -webkit-text-size-adjust: none;
}

/* インラインコード用設定 */
code.hljs {
  padding: 0.2rem 0.4rem;
  display: inline;
  border-radius: 4px;
}

/* 構文要素のスタイリング */
.hljs-comment,
.hljs-quote {
  color: var(--hljs-comment);
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: var(--hljs-keyword);
  font-weight: bold;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: var(--hljs-number);
}

.hljs-string,
.hljs-doctag {
  color: var(--hljs-string);
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: var(--hljs-title);
  font-weight: bold;
}

.hljs-subst {
  font-weight: normal;
}

.hljs-type,
.hljs-class .hljs-title {
  color: var(--hljs-type);
  font-weight: bold;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
  color: var(--hljs-tag);
  font-weight: normal;
}

.hljs-regexp,
.hljs-link {
  color: var(--hljs-string);
}

.hljs-symbol,
.hljs-bullet {
  color: var(--hljs-variable);
}

.hljs-built_in,
.hljs-builtin-name {
  color: var(--hljs-built-in);
}

.hljs-meta {
  color: var(--hljs-meta);
}

.hljs-deletion {
  background: #ffecec;
  color: var(--hljs-deletion);
}

.hljs-addition {
  background: #eeffee;
  color: var(--hljs-addition);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/* 特定言語向けのカスタマイズ */

/* JavaScript/TypeScript */
.hljs-subst .hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: var(--hljs-variable);
}

/* Python */
.hljs-decorator,
.hljs-params {
  color: var(--hljs-function);
}

/* CSS */
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: var(--hljs-selector);
}

.hljs-property {
  color: var(--hljs-property);
}

.hljs-value {
  color: var(--hljs-value);
}

/* HTML */
.hljs-tag .hljs-name {
  color: var(--hljs-tag);
}

.hljs-tag .hljs-attr {
  color: var(--hljs-attribute);
}

/* JSON */
.hljs-attr {
  color: var(--hljs-attribute);
}

/* Markdown内でのコードブロック統合 */
.markdown-content .hljs {
  margin: 1.5rem 0;
}

.markdown-content pre {
  background: transparent;
  border: none;
  padding: 0;
  margin: 1.5rem 0;
}

.markdown-content pre code {
  background: var(--hljs-bg);
  border: 1px solid var(--hljs-border);
  border-radius: 8px;
  display: block;
  padding: 1.5rem;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .hljs {
    padding: 1rem;
    font-size: 0.8rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .markdown-content pre code {
    padding: 1rem;
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hljs {
    font-size: 0.85rem;
  }
}