/* ======================================================
 * 開発者ツール共通スタイル (dev.css)
 * ====================================================== */

/* 共通：プライバシー保護バッジ */
.privacy-badge {
    display: inline-block; background-color: #e6fffa; color: #2c7a7b;
    border: 1px solid #319795; padding: 6px 14px; border-radius: 20px;
    font-size: 13px; font-weight: bold; margin-bottom: 20px;
}
.privacy-badge svg { width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; margin-top: -2px; }

/* 共通：フォーム部品 */
.checkbox-wrap {
    display: flex; align-items: center; font-size: 13px; color: #475569; font-weight: bold; cursor: pointer;
}
.checkbox-wrap input { margin-right: 6px; width: 16px; height: 16px; cursor: pointer; }

.select-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; font-weight: bold; }
.select-wrap select { padding: 6px; border-radius: 4px; border: 1px solid #cbd5e1; font-size: 13px; outline: none; }

/* 共通：上部ツールバー */
.dev-toolbar {
    display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap;
    align-items: center; background: #fff; padding: 12px 20px;
    border-radius: 8px; border: 1px solid #cbd5e1; justify-content: flex-end;
}

/* 共通：中央アクションボタン群 */
.middle-actions {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
}
.action-btn {
    padding: 8px 16px; font-size: 13px; font-weight: bold; border-radius: 6px; cursor: pointer; transition: 0.2s;
    border: 1px solid #cbd5e1; background: #f8fafc; color: #475569;
}
.action-btn:hover { background: #e2e8f0; }
.action-btn.active { background: #1629CC; color: #fff; border-color: #1629CC; }
.action-btn.active:hover { background: #0d1b99; }
.action-btn.active[onclick^="clearAll"] { background: #ef4444; color: #fff; border-color: #ef4444; }
.action-btn.active[onclick^="clearAll"]:hover { background: #dc2626; }

@media (min-width: 900px) {
    .middle-actions { flex-direction: column; width: 135px; } 
    .middle-actions .action-btn { 
        width: 100%; display: flex; justify-content: space-between; align-items: center; 
        padding: 8px 10px; font-size: 12px; 
    }
}

/* 共通：エラー通知バー */
#error-banner {
    display: none; background: #fee2e2; color: #b91c1c; padding: 10px 15px; 
    border-radius: 6px; border: 1px solid #f87171; margin-bottom: 15px; text-align: left; font-size: 13px; font-family: monospace;
}

/* 共通：左右ペイン（エディタ）レイアウト */
.split-pane { display: flex; flex-direction: column; margin-bottom: 30px; text-align: left; }

.pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pane-header {
    display: flex; justify-content: space-between; align-items: center;
    background: #f8fafc; padding: 10px 15px; border: 1px solid #cbd5e1; border-bottom: none; border-radius: 8px 8px 0 0;
}
.pane-title { font-weight: bold; color: #334155; font-size: 14px; }
.pane-stats { font-size: 12px; color: #94a3b8; }

.editor-container { flex: 1; border: 1px solid #cbd5e1; border-radius: 0 0 8px 8px; position: relative; }
.ace-editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 0 0 8px 8px; }

/* 共通：コピーボタン */
.copy-btn {
    background: #edf2f7; color: #4a5568; border: 1px solid #cbd5e1;
    padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.2s;
}
.copy-btn.copied { background: #1629CC; color: #fff; border-color: #1629CC; }

/* 共通：SEO 記事セクション */
.seo-content-section { background: #fff; padding: 25px 30px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 30px; color: #475569; line-height: 1.8; }
.seo-content-section p, .seo-content-section h3, .seo-content-section ul { text-align: left; }
.seo-content-section h2 { font-size: 20px; color: #1629CC; border-bottom: 2px solid #eef5ff; padding-bottom: 12px; margin-top: 0; margin-bottom: 20px; }
.seo-content-section h3 { font-size: 16px; color: #334155; margin-top: 25px; margin-bottom: 12px; border-left: 4px solid #1629CC; padding-left: 10px; }
.seo-content-section ul { margin-bottom: 20px; padding-left: 20px; }
.seo-content-section li { margin-bottom: 8px; }

/* ======================================================
 * ダークモード（エディタ・テキストエリア用）
 * VS Code のような「白紙・黒板」スタイルを全ツールに適用
 * ====================================================== */

/* Base64 や Regex のテキストエリアをダーク化 */
.dev-textarea,
.io-textarea,
.result-box {
    background-color: #1e1e1e !important; /* VS Code 風のダークグレー */
    color: #d4d4d4 !important;            /* 優しいライトグレー文字 */
    border: 1px solid #333333 !important;
    caret-color: #569cd6 !important;      /* カーソル色をブルーに */
}

/* 入力時のフォーカス色 */
.dev-textarea:focus,
.io-textarea:focus {
    border-color: #1629CC !important;
    box-shadow: 0 0 0 1px #1629CC !important;
}

/* Regex ツールのハイライト色をダーク背景用に調整 */
.result-box mark { 
    background-color: #264f78 !important; /* 深いブルーのハイライト */
    color: #ffffff !important; 
}
.result-box .group { 
    background-color: #515c6a !important; 
    color: #e2e8f0 !important; 
}

/* パンくずリストの標準スタイル */
.dev-breadcrumb {
    text-align: left;
    margin-bottom: 20px;
    font-size: 13px;
    color: #64748b;
    padding: 0 10px;
    max-width: 100%; /* インデックスの幅に合わせる */
    margin-left: auto;
    margin-right: auto;
}

.dev-breadcrumb a {
    color: #1629CC; /* benri.jp のメインカラー */
    text-decoration: none;
    transition: color 0.2s;
}

.dev-breadcrumb a:hover {
    text-decoration: underline;
    color: #0d1b99;
}

.dev-breadcrumb .sep {
    margin: 0 8px;
    color: #cbd5e1;
    user-select: none;
}

.dev-breadcrumb .current {
    color: #94a3b8;
    font-weight: normal;
}