/* ============================================
   チートシート用スタイル
   ============================================ */

/* スクロールバーカスタマイズ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* スムーズスクロール */
html { scroll-behavior: smooth; }

/* ============================================
   ヘッダー グラデーション
   技術に応じて色を変更可能
   ============================================ */

/* デフォルト: Sky Blue */
.header-rich {
    background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 50%, #38bdf8 100%);
}

/* Emerald（緑系） - 使用例: .header-rich.header-emerald */
.header-emerald {
    background: linear-gradient(135deg, #047857 0%, #10b981 50%, #34d399 100%);
}

/* Violet（紫系） - 使用例: .header-rich.header-violet */
.header-violet {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
}

/* Orange（橙系） - 使用例: .header-rich.header-orange */
.header-orange {
    background: linear-gradient(135deg, #c2410c 0%, #f97316 50%, #fb923c 100%);
}

/* Rose（赤系） - 使用例: .header-rich.header-rose */
.header-rose {
    background: linear-gradient(135deg, #be123c 0%, #f43f5e 50%, #fb7185 100%);
}

/* ============================================
   コードブロック
   ============================================ */
.code-block-wrapper { position: relative; }
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}
.code-block-wrapper:hover .copy-btn { opacity: 1; }

/* ============================================
   ダークモード切替ボタン
   ============================================ */
#dark-mode-toggle {
    transition: all 0.3s ease;
}
#dark-mode-toggle:hover {
    transform: scale(1.05);
}

/* ============================================
   ダークモード - 基本
   ============================================ */
html.dark body {
    background-color: #0f172a;
    color: #f1f5f9;
}
html.dark .bg-slate-50 {
    background-color: #1e293b !important;
}
html.dark .bg-white {
    background-color: #1e293b !important;
}
html.dark .text-slate-800,
html.dark .text-slate-900 {
    color: #f1f5f9 !important;
}
html.dark .text-slate-600,
html.dark .text-slate-700 {
    color: #cbd5e1 !important;
}
html.dark .text-slate-500 {
    color: #94a3b8 !important;
}
html.dark .border-slate-200 {
    border-color: #334155 !important;
}

/* ダークモード - スクロールバー */
html.dark ::-webkit-scrollbar-track { background: #1e293b; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ============================================
   ダークモード - カラーボックス
   ============================================ */

/* Primary (Sky Blue) */
html.dark .bg-primary-50 { background-color: #0c4a6e !important; }
html.dark .bg-primary-100 { background-color: #075985 !important; }
html.dark .text-primary-700 { color: #7dd3fc !important; }
html.dark .text-primary-800 { color: #bae6fd !important; }
html.dark .border-primary-200 { border-color: #0369a1 !important; }

/* Amber */
html.dark .bg-amber-50 { background-color: #451a03 !important; }
html.dark .bg-amber-100 { background-color: #78350f !important; }
html.dark .text-amber-700 { color: #fcd34d !important; }
html.dark .text-amber-800 { color: #fde68a !important; }
html.dark .border-amber-200 { border-color: #92400e !important; }

/* Purple */
html.dark .bg-purple-50 { background-color: #3b0764 !important; }
html.dark .bg-purple-100 { background-color: #581c87 !important; }
html.dark .text-purple-800 { color: #e9d5ff !important; }
html.dark .border-purple-200 { border-color: #7e22ce !important; }

/* Emerald */
html.dark .bg-emerald-50 { background-color: #022c22 !important; }
html.dark .bg-emerald-100 { background-color: #064e3b !important; }
html.dark .text-emerald-700 { color: #6ee7b7 !important; }
html.dark .text-emerald-800 { color: #a7f3d0 !important; }
html.dark .border-emerald-200 { border-color: #047857 !important; }

/* Rose */
html.dark .bg-rose-50 { background-color: #4c0519 !important; }
html.dark .bg-rose-100 { background-color: #881337 !important; }
html.dark .text-rose-600 { color: #fb7185 !important; }
html.dark .text-rose-800 { color: #fda4af !important; }
html.dark .border-rose-100 { border-color: #9f1239 !important; }
html.dark .border-rose-200 { border-color: #be123c !important; }

/* Indigo */
html.dark .bg-indigo-50 { background-color: #1e1b4b !important; }
html.dark .text-indigo-800 { color: #c7d2fe !important; }
html.dark .border-indigo-200 { border-color: #4338ca !important; }

/* Orange */
html.dark .bg-orange-50 { background-color: #431407 !important; }
html.dark .text-orange-800 { color: #fed7aa !important; }
html.dark .border-orange-200 { border-color: #c2410c !important; }

/* Red */
html.dark .bg-red-50 { background-color: #450a0a !important; }
html.dark .text-red-700 { color: #fca5a5 !important; }
html.dark .text-red-800 { color: #fecaca !important; }
html.dark .border-red-200 { border-color: #b91c1c !important; }

/* Teal */
.bg-teal-50 { background-color: #f0fdfa !important; }
.text-teal-800 { color: #115e59 !important; }
.border-teal-200 { border-color: #99f6e4 !important; }
html.dark .bg-teal-50 { background-color: #134e4a !important; }
html.dark .bg-teal-100 { background-color: #134e4a !important; }
html.dark .text-teal-800 { color: #5eead4 !important; }
html.dark .border-teal-200 { border-color: #0f766e !important; }

/* Violet */
html.dark .bg-violet-50 { background-color: #2e1065 !important; }
html.dark .text-violet-800 { color: #ddd6fe !important; }
html.dark .border-violet-200 { border-color: #6d28d9 !important; }

/* Blue */
html.dark .bg-blue-50 { background-color: #1e3a8a !important; }
html.dark .bg-blue-100 { background-color: #1e3a8a !important; }
html.dark .text-blue-700 { color: #93c5fd !important; }
html.dark .text-blue-800 { color: #93c5fd !important; }
html.dark .border-blue-200 { border-color: #1d4ed8 !important; }

/* Slate */
html.dark .bg-slate-100 { background-color: #334155 !important; }

/* ============================================
   ダークモード - フッター
   ============================================ */
html.dark footer.bg-slate-800 {
    background-color: #020617 !important;
}

/* ============================================
   コードブロック内コメント可読性改善
   ============================================ */
.hljs-comment {
    color: #9ca3af !important;
}
html.dark .hljs-comment {
    color: #9ca3af !important;
}

/* ============================================
   印刷用スタイル
   ============================================ */
@media print {
    .no-print { display: none !important; }
    body { font-size: 11pt; }
    .page-break { page-break-before: always; }
}