/* ========================================
   KaleidoFuture x Claude ハイブリッドテーマ
   ======================================== */

/* Google Fonts: Space Grotesk for headings */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

/* --- KaleidoFuture ブランドカラー --- */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0e1117;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #0d9488;
  --md-accent-bg-color: #0d9488;
  --md-default-bg-color: #faf9f5;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0e1117;
  --md-primary-bg-color: #1a1f2b;
  --md-accent-fg-color: #2dd4bf;
  --md-accent-bg-color: #0d9488;
  --md-default-bg-color: #0e1117;
}

/* --- ヘッダー: KFティール --- */
.md-header {
  background-color: #0d9488;
}

/* --- ロゴ: 白丸背景で視認性確保 --- */
.md-header__button.md-logo img {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  padding: 4px;
  width: 40px;
  height: 40px;
}

/* --- フォント: 見出しに Space Grotesk --- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif;
  font-weight: 700;
}

/* --- リンク色: ティール --- */
.md-typeset a {
  color: #0d9488;
}
.md-typeset a:hover {
  color: #0f766e;
}

/* --- ナビゲーション アクティブ --- */
.md-nav__link--active {
  color: #0d9488 !important;
}

/* --- セクション区切り線 --- */
.md-content h2 {
  border-top: 2px solid #a0a8b2;
  padding-top: 1.5em;
  margin-top: 2em;
}
.md-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* --- 会話UI --- */
.chat { margin:1.5em 0; display:flex; flex-direction:column; gap:8px; }
.chat-user, .chat-ai {
  padding:12px 16px; border-radius:8px; font-size:0.95em; line-height:1.6;
}
.chat-user {
  background:#f0fdf4; border-left:4px solid #788c5d; color:#3f4f2a;
}
.chat-ai {
  background:#eff6fb; border-left:4px solid #6a9bcc; color:#2a4a6b;
}
.chat-user strong, .chat-ai strong { display:block; margin-bottom:4px; font-size:0.85em; text-transform:uppercase; letter-spacing:0.5px; }
.chat-user strong { color:#788c5d; }
.chat-ai strong { color:#6a9bcc; }
.chat-arrow { text-align:center; color:#999; font-size:1.2em; }

/* --- 比較（❌ vs ✅） --- */
.compare { margin:1.5em 0; display:flex; flex-direction:column; gap:8px; }
.compare-bad {
  background:#fef2f2; border-left:4px solid #d97757; padding:12px 16px; border-radius:8px; color:#7c2d12;
}
.compare-good {
  background:#f0fdf4; border-left:4px solid #788c5d; padding:12px 16px; border-radius:8px; color:#3f4f2a;
}

/* --- スキルカード --- */
.skill-card {
  background:#eff6fb; border:1px solid #d0e3f0; border-radius:8px; padding:12px 16px; margin:8px 0;
}
.skill-card code { background:#d0e3f0; padding:2px 8px; border-radius:4px; font-weight:bold; color:#2a4a6b; }

/* --- 2列比較 --- */
.two-col { display:flex; gap:12px; margin:1.5em 0; flex-wrap:wrap; }
.two-col > div { flex:1; min-width:240px; padding:16px; border-radius:8px; }
.col-down { background:#fef2f2; border:1px solid #d97757; }
.col-up { background:#f0fdf4; border:1px solid #788c5d; }

/* --- ダークモード対応 --- */
[data-md-color-scheme="slate"] .chat-user {
  background:#1a2e1a; border-left-color:#788c5d; color:#c5d4b0;
}
[data-md-color-scheme="slate"] .chat-ai {
  background:#1a2a3e; border-left-color:#6a9bcc; color:#a8c8e8;
}
[data-md-color-scheme="slate"] .chat-user strong { color:#a0b880; }
[data-md-color-scheme="slate"] .chat-ai strong { color:#8bb8e0; }
[data-md-color-scheme="slate"] .compare-bad {
  background:#2e1a1a; border-left-color:#d97757; color:#e8b8a0;
}
[data-md-color-scheme="slate"] .compare-good {
  background:#1a2e1a; border-left-color:#788c5d; color:#c5d4b0;
}
[data-md-color-scheme="slate"] .skill-card {
  background:#1a2a3e; border-color:#2a4a6b;
}
[data-md-color-scheme="slate"] .skill-card code {
  background:#2a4a6b; color:#a8c8e8;
}
[data-md-color-scheme="slate"] .col-down {
  background:#2e1a1a; border-color:#d97757;
}
[data-md-color-scheme="slate"] .col-up {
  background:#1a2e1a; border-color:#788c5d;
}
[data-md-color-scheme="slate"] .md-content h2 {
  border-top-color: #3a4048;
}

/* --- admonition カスタム --- */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #0d9488;
}