/* =========================================================
   admin.css — 管理画面 共通デザイン（明るい編集調に統一）
   各adminページのインライン<style>より後（</head>直前）に読み込み、
   共通のCSS変数を上書きしてダーク→ライトへ一括で切り替える。
   ========================================================= */

:root,
body {
    /* 旧ダークの変数名をすべて明るい編集調で上書き */
    --bg: #f4f4f1;
    --panel: #ffffff;
    --panel2: #fafaf7;
    --card: #ffffff;
    --card2: #fafaf7;
    --line: #e4e2db;
    --line2: #d8d6ce;
    --text: #1a1a1a;
    --muted: #6b6b70;
    --accent: #1a1a1a;
    --accent2: #333333;

    --admin-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", Georgia, serif;
    --admin-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--admin-sans);
    -webkit-font-smoothing: antialiased;
}

/* 見出しは明朝で編集的に */
h1, h2, h3 { font-family: var(--admin-serif); color: var(--text); letter-spacing: 0.01em; }
a { color: #1a1a1a; }

/* カード/パネルの質感 */
.wrap, .container { max-width: 1080px; }
.settings-group, .panel, .card, .side-panel, .recent-list, .group-list > *,
.stat, .count-card, .progress-card, .msg-card, .table-wrap {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: none;
}

/* ボタン：黒×白のピル。ネオンのグローや青を統一 */
button, .btn, a.btn, input[type="submit"] {
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    box-shadow: none;
    font-family: var(--admin-sans);
}
.btn-primary, button.btn-primary, a.btn-primary, input[type="submit"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: none;
}
.btn-primary:hover, button.btn-primary:hover { opacity: 0.85; }
.btn:hover, button:hover { background: var(--panel2); }
.btn-primary:hover { background: var(--accent); }
.btn-outline { background: #ffffff !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
.btn-danger, .btn.danger, button.danger { background: #b3352f; border-color: #b3352f; color: #fff; }

/* 入力欄 */
input, select, textarea {
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 8px;
    font-size: 16px; /* iOS自動ズーム防止 */
    box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    outline: 2px solid rgba(0, 0, 0, 0.12);
    outline-offset: 1px;
    box-shadow: none;
}
label, .field label, .lab-form__field label { color: var(--muted); }

/* テーブル */
table { border-color: var(--line); }
th, td { border-color: var(--line); color: var(--text); }
th { color: var(--text); background: var(--panel2); }
tr:hover td { background: var(--panel2); }

/* タブ */
.tab, .tabs a, a.tab {
    color: var(--muted);
    border: 1px solid transparent;
    background: transparent;
    border-radius: 999px;
}
.tab.active, .tabs a.active, a.tab.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* メニューリンク（管理トップの各カード） */
.menu-link, .side-list a, .quick a {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
}
.menu-link:hover, .side-list a:hover { background: var(--panel2); border-color: var(--line2); }
.menu-link span, .menu-link small { color: var(--muted); }
.menu-link strong { color: var(--text); }

/* details / summary（設定グループ・任意パネル） */
summary, .settings-summary, .optional-panel summary { color: var(--text); }
.settings-summary span, .summary-text span { color: var(--muted); }

/* コード・プレビュー系（ダーク前提だった箇所を明るく） */
code, .code-markdown-preview { color: #b5316b; }
.code-render-preview { background: #fafaf7 !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
pre { background: #f6f6f3; color: #1a1a1a; border: 1px solid var(--line); border-radius: 8px; }

/* 通知・メッセージ */
.notice { background: #fbeeee; border: 1px solid #e6bcbc; color: #a3312f; border-radius: 8px; }
.section-title { color: var(--text); }

/* 進捗バー等のアクセント */
.progress-fill, .bar-fill { background: var(--accent); }

/* ---- 一覧/管理系ページの共通クラス（固有色を持つ箇所を明るく上書き） ---- */
.panel, .table-wrap, .stat, .recent-row, .page-link, .filters, .toolbar {
    background: var(--panel);
    border-color: var(--line);
    color: var(--text);
}
.stat { background: var(--panel2); }
.stat strong, .title, .recent-title { color: var(--text); }
.meta, .recent-meta, .muted, .summary .muted { color: var(--muted); }

.content-table { border-color: var(--line); }
.content-table th, .content-table td { border-bottom-color: var(--line); color: var(--text); }
.content-table th { background: var(--panel2); color: var(--muted); }
.content-table tr:hover td { background: var(--panel2); }

.tab.active, .tabs a.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}
.page-link { background: var(--panel); color: var(--text); border-color: var(--line); }
.page-link.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }

/* 状態ピル（公開/非公開など） */
.pill { border: 1px solid #b7dcc4; color: #1f6b43; background: #eef7f1; }
.pill.off, .pill.draft { border-color: #e6c07a; color: #9a6a12; background: #fbf3e2; }

/* メッセージ類（ダーク前提の淡色を可読色へ） */
.msg { color: #1f6b43; }
.error { color: #a3312f; }

/* 見出し行のアクセント下線 */
.settings-summary::after, .settings-group[open] .settings-summary::after { color: var(--muted); }

/* ---- 管理トップ：コンテンツ更新クイックグリッド ---- */
.create-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 16px;
}
.create-panel__head { margin-bottom: 16px; }
.create-panel__head h2 { margin: 0 0 4px; font-size: 1.2rem; font-family: var(--admin-serif); }
.create-panel__head span { color: var(--muted); font-size: 0.86rem; }
.create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.create-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: space-between;
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
}
.create-card strong { font-size: 0.98rem; color: var(--text); }
.create-card__actions { display: flex; gap: 8px; }
.create-card__actions .btn {
    min-height: 38px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.9rem;
}
.create-card__actions .btn-primary { flex: 1; }

@media (max-width: 600px) {
    .create-grid { grid-template-columns: 1fr; }
}