/* =============================================
   カゴミル 匿名コメント欄（.kc スコープ）
   - 既存 style.css を上書きしないよう、すべて .kc 配下に限定
   - モバイルファースト。PC（960px〜）は .single-wrap 内に収まる
   - 色はすべて CSS カスタムプロパティで定義（ダーク配色は
     :root[data-theme="dark"] 指定時のみ有効。自動切替はしない）
   ============================================= */

.kc {
    /* ---- ライト配色（既定） ---- */
    --kc-bg: #ffffff;
    --kc-surface: #f7f8fa;        /* 入力欄・返信エリアなどの薄い面 */
    --kc-text: #1a1a1a;
    --kc-muted: #5f6368;          /* 白地で約6:1（AA） */
    --kc-border: #dadce0;
    --kc-border-strong: #9aa0a6;
    --kc-accent: #c62828;         /* サイトのメインカラー。白地で約5.6:1 */
    --kc-accent-hover: #a51f1f;
    --kc-on-accent: #ffffff;
    --kc-accent-soft: #fdecea;    /* 押下済みボタンなどの淡い背景 */
    --kc-gone: #6b7280;           /* 削除済み表示。白地で約4.8:1 */
    --kc-warn: #b3261e;
    --kc-ok: #1e6b34;
    --kc-ok-soft: #e7f4ea;
    --kc-err-soft: #fdecea;
    --kc-focus: #1a73e8;
    --kc-shadow: 0 1px 8px rgba(0, 0, 0, .08);
    --kc-overlay: rgba(0, 0, 0, .45);
    --kc-radius: 10px;
    --kc-radius-sm: 8px;
    --kc-tap: 44px;               /* タップ領域の最小サイズ */

    background: var(--kc-bg);
    color: var(--kc-text);
    border-radius: var(--kc-radius);
    box-shadow: var(--kc-shadow);
    margin: 0 0 16px;
    padding: 20px 16px 24px;
    line-height: 1.7;
    overflow-wrap: anywhere;      /* 長いURL等でレイアウトが崩れないように */
}

/* ---- ダーク配色（サイト全体で data-theme="dark" を付けた時だけ） ---- */
:root[data-theme="dark"] .kc {
    --kc-bg: #1f2125;
    --kc-surface: #2a2d32;
    --kc-text: #e8eaed;
    --kc-muted: #b0b5bb;
    --kc-border: #3c4043;
    --kc-border-strong: #6b7075;
    --kc-accent: #ef9a9a;
    --kc-accent-hover: #f4b4b4;
    --kc-on-accent: #1a1a1a;
    --kc-accent-soft: #3a2626;
    --kc-gone: #9aa0a6;
    --kc-warn: #f28b82;
    --kc-ok: #81c995;
    --kc-ok-soft: #1f3326;
    --kc-err-soft: #3a2626;
    --kc-focus: #8ab4f8;
    --kc-shadow: 0 1px 8px rgba(0, 0, 0, .4);
    --kc-overlay: rgba(0, 0, 0, .65);
}

.kc *, .kc *::before, .kc *::after { box-sizing: border-box; }

/* hidden 属性を display 指定（flex 等）より優先させる */
.kc [hidden] { display: none; }

/* 既存 style.css の header / footer 要素セレクタ（赤背景・sticky 等）を打ち消す */
.kc header,
.kc footer {
    position: static;
    z-index: auto;
    background: none;
    color: inherit;
    padding: 0;
    box-shadow: none;
    border: 0;
    text-align: left;
    font-size: inherit;
}

/* ---- フォーカス表示（キーボード操作時に明示） ---- */
.kc :focus-visible {
    outline: 3px solid var(--kc-focus);
    outline-offset: 2px;
    border-radius: 4px;
}
.kc :focus:not(:focus-visible) { outline: none; }

/* ==============================
   見出し・並び替え
============================== */
.kc-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.kc-title {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.kc-count { color: var(--kc-accent); font-variant-numeric: tabular-nums; }
.kc-count-unit { font-size: .85rem; font-weight: 700; color: var(--kc-muted); }

.kc-sort {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--kc-surface);
    border-radius: 999px;
    width: 100%;
}
.kc-sort-btn {
    flex: 1 1 0;
    min-height: var(--kc-tap);
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--kc-muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.kc-sort-btn:hover { color: var(--kc-text); }
.kc-sort-btn[aria-pressed="true"] {
    background: var(--kc-bg);
    color: var(--kc-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ==============================
   投稿フォーム（ルート・返信共通）
============================== */
.kc-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    margin-bottom: 20px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-sm);
    position: relative;           /* ハニーポットの基準 */
}
.kc-field { display: flex; flex-direction: column; gap: 6px; }
.kc-field label,
.kc-label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--kc-text);
}
.kc-optional,
.kc-required {
    font-size: .75rem;
    font-weight: 400;
    color: var(--kc-muted);
    margin-left: 4px;
}
.kc-required::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--kc-accent);
    vertical-align: middle;
}

.kc-input,
.kc-textarea {
    width: 100%;
    min-height: var(--kc-tap);
    padding: 10px 12px;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius-sm);
    background: var(--kc-bg);
    color: var(--kc-text);
    font: inherit;
    font-size: 16px;              /* iOS Safari の自動ズームを防ぐ */
    line-height: 1.6;
    transition: border-color .15s, box-shadow .15s;
}
.kc-textarea { min-height: 112px; resize: vertical; }
.kc-input::placeholder,
.kc-textarea::placeholder { color: var(--kc-muted); opacity: 1; }
.kc-input:focus,
.kc-textarea:focus {
    border-color: var(--kc-focus);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .2);
}
.kc-input[aria-invalid="true"],
.kc-textarea[aria-invalid="true"] { border-color: var(--kc-warn); }

.kc-counter {
    align-self: flex-end;
    font-size: .75rem;
    color: var(--kc-muted);
    font-variant-numeric: tabular-nums;
}
.kc-counter.is-over { color: var(--kc-warn); font-weight: 700; }

/* ハニーポット：display:none だとボットに見抜かれやすいので画面外へ */
.kc-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kc-note {
    font-size: .75rem;
    line-height: 1.7;
    color: var(--kc-muted);
}
.kc-note strong { color: var(--kc-text); }
.kc-note a {
    color: var(--kc-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 投稿ボタン：大きく幅100% */
.kc-submit {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--kc-radius-sm);
    background: var(--kc-accent);
    color: var(--kc-on-accent);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .15s;
}
.kc-submit:hover:not(:disabled) { background: var(--kc-accent-hover); }
.kc-submit:disabled { opacity: .6; cursor: progress; }

/* 送信結果（フォーム内ステータス） */
.kc-status {
    font-size: .85rem;
    font-weight: 700;
    min-height: 0;
}
.kc-status:empty { display: none; }
.kc-status.is-ok,
.kc-status.is-error {
    padding: 10px 12px;
    border-radius: var(--kc-radius-sm);
}
.kc-status.is-ok    { background: var(--kc-ok-soft);  color: var(--kc-ok); }
.kc-status.is-error { background: var(--kc-err-soft); color: var(--kc-warn); }

.kc-closed {
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: var(--kc-radius-sm);
    background: var(--kc-surface);
    color: var(--kc-muted);
    font-size: .85rem;
}
.kc-empty {
    padding: 24px 8px;
    text-align: center;
    color: var(--kc-muted);
    font-size: .9rem;
}

/* ==============================
   コメント一覧
============================== */
.kc-list,
.kc-reply-list { list-style: none; margin: 0; padding: 0; }

.kc-item { border-top: 1px solid var(--kc-border); }
.kc-list > .kc-item:first-child { border-top: 0; }
.kc-card { padding: 14px 0 6px; }

.kc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-bottom: 4px;
    font-size: .8rem;
    color: var(--kc-muted);
}
.kc-nick {
    font-size: .9rem;
    font-weight: 700;
    color: var(--kc-text);
}
.kc-time,
.kc-edited,
.kc-edited-time { color: var(--kc-muted); font-size: .75rem; }
.kc-replyto {
    font-size: .75rem;
    color: var(--kc-muted);
    padding: 0 6px;
    border-radius: 4px;
    background: var(--kc-surface);
}
.kc-body {
    font-size: .95rem;
    line-height: 1.8;
    color: var(--kc-text);
    white-space: normal;
}

/* 操作ボタン列 */
.kc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 6px 0 0 -8px;         /* ボタンの内側余白ぶん左に寄せて本文と揃える */
}
.kc-owner { display: inline-flex; gap: 4px; }
.kc-owner[hidden] { display: none; }

.kc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: var(--kc-tap);
    min-width: var(--kc-tap);
    padding: 0 10px;
    border: 0;
    border-radius: var(--kc-radius-sm);
    background: transparent;
    color: var(--kc-muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.kc-btn:hover:not(:disabled) { background: var(--kc-surface); color: var(--kc-text); }
.kc-btn:disabled { cursor: default; opacity: .7; }
.kc-like-count { font-variant-numeric: tabular-nums; }
.kc-like[aria-pressed="true"] {
    color: var(--kc-accent);
    background: var(--kc-accent-soft);
    opacity: 1;
}
.kc-delete-btn:hover:not(:disabled) { color: var(--kc-warn); }
.kc-report-btn.is-done { opacity: 1; font-weight: 400; }

/* 主ボタン／副ボタン（返信・編集・通報フォーム用） */
.kc-btn-primary,
.kc-btn-secondary {
    min-height: var(--kc-tap);
    padding: 0 18px;
    border-radius: var(--kc-radius-sm);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}
.kc-btn-primary {
    border: 0;
    background: var(--kc-accent);
    color: var(--kc-on-accent);
}
.kc-btn-primary:hover:not(:disabled) { background: var(--kc-accent-hover); }
.kc-btn-primary:disabled { opacity: .6; cursor: progress; }
.kc-btn-secondary {
    border: 1px solid var(--kc-border-strong);
    background: var(--kc-bg);
    color: var(--kc-text);
}
.kc-btn-secondary:hover { background: var(--kc-surface); }
.kc-form-actions {
    display: flex;
    flex-direction: column-reverse;   /* モバイル：主ボタンを上に */
    gap: 8px;
}
.kc-form-actions > * { width: 100%; }

/* ==============================
   返信
============================== */
.kc-replies { margin: 0 0 8px; }
.kc-replies[hidden] { display: none; }
.kc-reply-count {
    font-size: .75rem;
    font-weight: 700;
    color: var(--kc-muted);
    margin: 4px 0 2px 12px;
}
/* 返信：左ボーダー＋インデント（モバイルは浅め） */
.kc-reply {
    border-top: 0;
    border-left: 3px solid var(--kc-border);
    margin-left: 4px;
    padding-left: 12px;
}
.kc-reply .kc-card { padding-top: 10px; }
.kc-reply[hidden] { display: none; }
.kc-replies-toggle {
    margin-left: 8px;
    color: var(--kc-accent);
}

/* 返信フォーム（JSで生成） */
.kc-form.kc-reply-form {
    margin: 4px 0 12px;
    padding: 14px;
    gap: 12px;
}

/* ==============================
   編集フォーム
============================== */
.kc-edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 8px;
}
.kc-edit-form .kc-textarea { min-height: 96px; }

/* ==============================
   削除・非表示プレースホルダ
============================== */
/* 子孫の返信に波及させない（直下の article のみ） */
.kc-gone > .kc-card { padding: 12px 0; }
.kc-gone > .kc-card .kc-body,
.kc-gone-msg {
    color: var(--kc-gone);
    font-style: italic;
    font-size: .85rem;
}

/* もっと見る */
.kc-more {
    display: block;
    width: 100%;
    min-height: var(--kc-tap);
    margin-top: 12px;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius-sm);
    background: var(--kc-bg);
    color: var(--kc-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}
.kc-more:hover:not(:disabled) { background: var(--kc-surface); }
.kc-more:disabled { opacity: .6; cursor: progress; }
.kc-more[hidden] { display: none; }

/* 読み込み中はリストを少し薄く */
.kc-list[aria-busy="true"] { opacity: .5; }

/* ==============================
   通報ダイアログ
============================== */
.kc-dialog {
    width: min(92vw, 420px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    border: 0;
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
    color: var(--kc-text);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}
.kc-dialog::backdrop { background: var(--kc-overlay); }
/* <dialog> 非対応時のフォールバック（div role="dialog"） */
.kc-dialog-fallback {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--kc-overlay);
}
.kc-dialog-fallback[hidden] { display: none; }
.kc-dialog-fallback > .kc-dialog { position: relative; }

.kc-dialog-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 4px;
}
.kc-dialog-desc {
    font-size: .8rem;
    color: var(--kc-muted);
    margin-bottom: 12px;
}
.kc-dialog fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
}
.kc-dialog legend {
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.kc-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--kc-tap);
    padding: 0 8px;
    border-radius: var(--kc-radius-sm);
    font-size: .9rem;
    cursor: pointer;
}
.kc-radio:hover { background: var(--kc-surface); }
.kc-radio input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--kc-accent);
    flex-shrink: 0;
}
.kc-dialog .kc-field { margin-bottom: 12px; }
.kc-dialog .kc-status { margin-bottom: 12px; }

/* ==============================
   トースト（いいね・通報・削除などの結果通知）
============================== */
.kc-toast {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border-radius: var(--kc-radius-sm);
    background: #323232;
    color: #ffffff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    pointer-events: none;
}
.kc-toast.is-show { opacity: 1; visibility: visible; }
.kc-toast.is-error { background: #8c1d18; }   /* 白文字で約8:1 */

/* 視覚的に隠すがスクリーンリーダーには読ませる */
.kc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==============================
   タブレット以上（600px〜）
============================== */
@media (min-width: 600px) {
    .kc { padding: 24px 24px 28px; }
    .kc-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .kc-sort { width: auto; }
    .kc-sort-btn { flex: 0 0 auto; }
    .kc-reply {
        margin-left: 12px;
        padding-left: 16px;
    }
    .kc-form-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    .kc-form-actions > * { width: auto; }
}

/* ==============================
   PC（960px〜）：.single-wrap は padding 0 になるので外側余白のみ調整
============================== */
@media (min-width: 960px) {
    .kc { padding: 28px 28px 32px; margin-bottom: 20px; }
    .kc-reply { margin-left: 16px; }
}

/* ==============================
   動きを減らす設定への配慮
============================== */
@media (prefers-reduced-motion: reduce) {
    /* 最後に書くことで同じ詳細度の個別指定より優先される */
    .kc *,
    .kc *::before,
    .kc *::after {
        transition: none;
        animation: none;
        scroll-behavior: auto;
    }
}

/* 固定ヘッダー＋カテゴリナビに隠れないように */
#comments, .kc-item { scroll-margin-top: 110px; }

/* ==============================
   一覧：コメント件数バッジ・コメントが多いニュース（index.php）
   規約ページ（comment_terms.php）
============================== */
.kc-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .68rem;
    font-weight: 700;
    color: #555;
    background: #eef1f4;
    padding: 1px 7px;
    border-radius: 9px;
    white-space: nowrap;
}
.kc-top {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0,0,0,.08);
    margin: 0 12px 12px;
    padding: 14px 16px;
}
.kc-top-heading { font-size: .9rem; font-weight: 900; color: #c62828; margin-bottom: 6px; }
.kc-top-list { list-style: none; }
.kc-top-list li + li { border-top: 1px solid #f1f1f1; }
.kc-top-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 6px 0;
}
.kc-top-title { font-size: .82rem; line-height: 1.45; color: #1a1a1a; }
.kc-top-item:hover .kc-top-title { color: #c62828; }
.kc-top-item:focus-visible { outline: 2px solid #c62828; outline-offset: 2px; border-radius: 4px; }

.kc-terms .single-title { margin-bottom: 4px; }
.kc-terms-updated { font-size: .75rem; color: #666; margin-bottom: 16px; }
.kc-terms h2 { font-size: 1rem; font-weight: 900; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #c62828; }
.kc-terms h3 { font-size: .9rem; font-weight: 700; margin: 18px 0 6px; }
.kc-terms p, .kc-terms li { font-size: .88rem; line-height: 1.8; }
.kc-terms ol, .kc-terms ul { padding-left: 1.4em; }
.kc-terms li + li { margin-top: 4px; }
.kc-terms a { color: #c62828; text-decoration: underline; }
.kc-terms-toc { background: #f7f7f7; border-radius: 8px; padding: 12px 16px; }
.kc-terms-contact { background: #fff6f6; border-left: 4px solid #c62828; padding: 10px 12px; margin: 12px 0; }
.kc-terms-back { margin-top: 28px; }