/*
 * wpDiscuz のコメント欄を、全コメントのタイムライン（includes/comment-timeline.php）と同じ見た目にそろえる（2026-10-04）。
 * wpDiscuz の HTML・機能（並べ替え・編集・返信の入れ子・もっと読む・ログイン）はそのまま。CSS だけを重ねる。
 * wpDiscuz の CSS（wpdiscuz-frontend-css と、その後ろの設定由来のインライン CSS）に勝つよう、すべて「body #wpdcom」から書く。
 * 名前の色は役割ごと（管理者＝オレンジ、SNS ログインの専用バッジ＝緑など）を残し、ゲストの青だけを文字色にする。
 * 色は全コメント・豆知識まとめ・ボックスシミュと同じ。
 */
body #wpdcom {
  --ct-ink: #15182b; --ct-muted: #5b6377; --ct-line: #dfe3ee; --ct-paper: #f4f6fc; --ct-blue: #e6ecfb;
  --ct-navy: #1b2a78; --ct-yellow: #ffc31f; --ct-yellow-edge: #b97400;
  color: var(--ct-ink);
}

/* ---- 書き込み欄 ---- */
body #wpdcom .wpd-form-wrap { border: 0; }
body #wpdcom form.wpd_comm_form { background: var(--ct-paper); border-radius: 12px; padding: 12px !important; }
body #wpdcom .wpd-secondary-form-wrapper form.wpd_comm_form { margin-top: 8px; }
body #wpdcom .wpd-field,
body #wpdcom .wpd-form-row .wpdiscuz-item input[type="text"],
body #wpdcom .wpd-form-row .wpdiscuz-item input[type="email"],
body #wpdcom textarea.wc_comment {
  border: 1px solid var(--ct-line) !important; border-radius: 9px !important; background: #fff !important;
  color: var(--ct-ink) !important; font-size: 16px; box-shadow: none !important;
}
body #wpdcom .wpd-field:focus,
body #wpdcom textarea.wc_comment:focus { border-color: var(--ct-navy) !important; outline: 3px solid rgba(27, 42, 120, .2); }
body #wpdcom .wpd-form-row .wpdiscuz-item .wpdiscuz-field-icon { color: var(--ct-muted); }

/* 本文のエディタ（Quill。PC ではゲスト・ログインとも出る）: 白い欄に細い線、装飾ボタンは控えめな色 */
body #wpdcom .wpd_comm_form [id^="wpd-editor-wraper-"] { background: #fff; border: 1px solid var(--ct-line) !important; border-radius: 9px; overflow: hidden; }
body #wpdcom .wpd_comm_form [id^="wpd-editor-wraper-"]:focus-within { border-color: var(--ct-navy) !important; outline: 3px solid rgba(27, 42, 120, .2); }
body #wpdcom .wpd_comm_form .ql-container.ql-snow,
body #wpdcom .wpd_comm_form .ql-toolbar.ql-snow { border: 0 !important; }
body #wpdcom .wpd_comm_form .ql-toolbar.ql-snow { background: #fff !important; border-top: 1px solid var(--ct-line) !important; }
body #wpdcom .wpd_comm_form .ql-editor { color: var(--ct-ink); font-size: 16px; line-height: 1.7; }
body #wpdcom .wpd_comm_form .ql-editor.ql-blank::before { font-style: normal; color: #8a91a3; }
body #wpdcom .wpd_comm_form .ql-snow .ql-stroke { stroke: var(--ct-muted); }
body #wpdcom .wpd_comm_form .ql-snow .ql-fill { fill: var(--ct-muted); }
body #wpdcom .wpd_comm_form .ql-snow button:hover .ql-stroke,
body #wpdcom .wpd_comm_form .ql-snow button.ql-active .ql-stroke { stroke: var(--ct-navy); }
body #wpdcom .wpd_comm_form .ql-snow button:hover .ql-fill,
body #wpdcom .wpd_comm_form .ql-snow button.ql-active .ql-fill { fill: var(--ct-navy); }
body #wpdcom .wpd_comm_form .wmu-add i,
body #wpdcom .wpd_comm_form .wpd-editor-char-counter { color: var(--ct-muted) !important; }
/* 書き込み欄の顔（ログイン中に出る）も一覧と同じ角の丸い四角 */
body #wpdcom .wpd_comm_form .wpd-avatar img,
body #wpdcom .wpd_comm_form .wpd-avatar img.avatar { width: 40px !important; height: 40px !important; border-radius: 11px !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
body #wpdcom .wpd_comm_form .wpd-avatar { width: 40px !important; min-width: 40px; margin: 0 12px 0 0 !important; padding: 0 !important; }
/* 固定・返信設定（管理者だけに出る切り替え）: 枠をやめて白い小さなボタン、オンのときは紺 */
/* 枠は中のアイコン（.wpdicon）に付いている。オフ＝白、オン＝紺 */
body #wpdcom .wpd_comm_form .wpd_label .wpdicon {
  border: 0 !important; border-radius: 9px !important; background: #fff !important; color: var(--ct-muted) !important; box-shadow: none !important;
}
body #wpdcom .wpd_comm_form .wpd_label .wpdicon-on { background: var(--ct-navy) !important; color: #fff !important; }
body #wpdcom .wpd_comm_form .wpd_label:hover .wpdicon-off { color: var(--ct-navy) !important; }
/* 上の「返信通知を受け取る」「ログインアカウント」 */
body #wpdcom .wpd-form-head { border-bottom: 1px solid var(--ct-line) !important; }
body #wpdcom .wpd-form-head .wpd-sbs-toggle { color: var(--ct-muted); }
body #wpdcom .wpd-form-head .wpd-sbs-toggle:hover { color: var(--ct-navy); }
body #wpdcom .wpd-form-head .wpd-login,
body #wpdcom .wpd-form-head .wpd-connect-with { color: var(--ct-muted); font-size: 13px; }
body #wpdcom .wpd-form-head .wpd-login a { color: var(--ct-navy) !important; }
/* 一覧の見出しの「自分の設定」アイコンと、並べ替え（反応の多い順・盛り上がり・新しい順）: 色付きの下線をやめて灰色にそろえる */
body #wpdcom .wpd-thread-head .wpdiscuz-user-settings { color: var(--ct-muted); border-bottom-color: var(--ct-line) !important; }
body #wpdcom .wpd-thread-head .wpd-thread-filter .wpd-filter { border-bottom: 2px solid var(--ct-line) !important; color: var(--ct-muted) !important; }
body #wpdcom .wpd-thread-head .wpd-thread-filter .wpd-filter:hover,
body #wpdcom .wpd-thread-head .wpd-thread-filter .wpd-filter.wpd-active { border-bottom-color: var(--ct-navy) !important; color: var(--ct-navy) !important; }
body #wpdcom .wpd-comment .wpd-comment-last-edited { color: var(--ct-muted) !important; font-size: 12px !important; font-style: normal !important; text-align: left !important; padding: 4px 0 0 !important; margin: 0 !important; }

/* 主なボタン（投稿・もっと読む）は黄色の立体ボタン */
body #wpdcom .wpd-prim-button {
  background: var(--ct-yellow) !important; color: var(--ct-ink) !important; border: 0 !important;
  border-radius: 11px !important; box-shadow: 0 3px 0 var(--ct-yellow-edge) !important;
  font-weight: 800 !important; letter-spacing: .02em; transition: transform .08s ease, box-shadow .08s ease;
}
body #wpdcom .wpd-prim-button:hover { background: #ffcd45 !important; }
body #wpdcom .wpd-prim-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ct-yellow-edge) !important; }
body #wpdcom .wpd-prim-button:focus-visible { outline: 3px solid var(--ct-navy); outline-offset: 2px; }
body #wpdcom .wpd-load-more-submit { min-height: 46px; padding: 10px 28px !important; }

/* ---- 一覧の見出し（◯コメント・並べ替え） ---- */
body #wpdcom .wpd-thread-head { border-bottom: 1px solid var(--ct-line); }
body #wpdcom .wpd-thread-head .wpd-thread-info { border-bottom: 3px solid var(--ct-navy); color: var(--ct-ink); }
body #wpdcom .wpd-thread-head .wpdiscuz-user-settings { border-bottom-color: var(--ct-navy); }
body #wpdcom .wpd-thread-head .wpdiscuz-user-settings:hover { color: var(--ct-navy); }

/* ---- コメント1件: 顔・名前・時刻・本文・いいね／返信。枠は付けず、線で区切る ---- */
body #wpdcom .wpd-thread-list .wpd-comment .wpd-comment-wrap { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start; padding: 14px 0; }
body #wpdcom .wpd-thread-list .wpd-comment .wpd-comment-left { width: 40px !important; flex: 0 0 40px; margin: 0 12px 0 0 !important; padding: 0 !important; }
body #wpdcom .wpd-thread-list .wpd-comment .wpd-avatar img,
body #wpdcom .wpd-thread-list .wpd-comment .wpd-avatar img.avatar {
  width: 40px !important; height: 40px !important; max-width: none; border-radius: 11px !important; border: 0 !important;
  object-fit: cover; background: var(--ct-paper);
}
body #wpdcom .wpd-thread-list .wpd-comment .wpd-comment-right { flex: 1 1 auto; min-width: 0; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
body #wpdcom .wpd-thread-list .wpd-comment .wpd-comment-header {
  background: none !important; border: 0 !important; padding: 0 !important; min-height: 0; align-items: baseline;
}
body #wpdcom .wpd-comment .wpd-comment-author,
body #wpdcom .wpd-comment .wpd-comment-author a { font-size: 14px !important; font-weight: 800 !important; }
/* layout-3 は名前の前に顔のための余白（55px）を空けているが、顔は左の列に置くので要らない */
body #wpdcom .wpd-comment .wpd-comment-author { padding-left: 0 !important; margin-left: 0 !important; }
body #wpdcom .wpd-thread-list .wpd-comment .wpd-comment-header { margin-left: 0 !important; }
body #wpdcom .wpd-blog-guest .wpd-comment-author,
body #wpdcom .wpd-blog-guest .wpd-comment-author a { color: var(--ct-ink); }
body #wpdcom .wpd-comment .wpd-comment-share,
body #wpdcom .wpd-comment .wpd-comment-link { color: var(--ct-muted); opacity: .7; }
body #wpdcom .wpd-comment .wpd-comment-share:hover,
body #wpdcom .wpd-comment .wpd-comment-link:hover { opacity: 1; color: var(--ct-navy); }
body #wpdcom.wpd-layout-3 .wpd-comment .wpd-comment-subheader,
body #wpdcom.wpd-layout-3 .wpd-blog-guest .wpd-comment-subheader { border: 0 !important; padding: 2px 0 0 !important; margin: 0; }
body #wpdcom .wpd-comment .wpd-comment-date { color: var(--ct-muted) !important; font-size: 12px !important; }
body #wpdcom .wpd-comment .wpd-comment-date i { display: none; }
body #wpdcom .wpd-comment .wpd-comment-subheader .wpd-comment-date { padding-left: 0 !important; margin-left: 0 !important; }
body #wpdcom .wpd-comment .wpd-comment-text {
  padding: 6px 0 0 !important; border: 0 !important; color: var(--ct-ink); font-size: 15px; line-height: 1.75; overflow-wrap: anywhere;
}
body #wpdcom .wpd-comment .wpd-comment-text p { margin: 0 0 .5em; }
body #wpdcom .wpd-comment .wpd-comment-text p:last-child { margin-bottom: 0; }
body #wpdcom .wpd-comment .wmu-comment-attachments { border: 0; }

/* いいね・返信: 小さな文字ボタン。押した後は紺 */
body #wpdcom .wpd-comment .wpd-comment-footer { margin: 6px 0 0 -8px !important; padding: 0 !important; border: 0 !important; gap: 4px; }
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-vote,
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-reply-button,
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-toggle {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 8px; border-radius: 8px;
  color: var(--ct-muted); font-size: 13px; font-weight: 700; border: 0 !important; background: none !important; box-shadow: none !important;
}
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-vote-up,
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-vote-down { border: 0 !important; background: none !important; padding: 0 !important; }
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-reply-button:hover,
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-toggle:hover,
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-vote:hover { background: var(--ct-paper); color: var(--ct-navy); }
body #wpdcom .wpd-comment .wpd-comment-footer svg { width: 16px; height: 16px; fill: currentColor; }
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-vote-up,
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-reply-button svg { color: inherit; }
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-vote-result { color: inherit; font-size: 13px; padding: 0 2px !important; background: none !important; border: 0 !important; }
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-up,
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-vote-up.wpd-up svg { color: var(--ct-navy); fill: var(--ct-navy); }
body #wpdcom .wpd-comment .wpd-comment-footer .wpd-vote-result.wpd-up { color: var(--ct-navy) !important; }

/* 返信: 線を何本も重ねて右へずらすのをやめる（2026-10-04、ユーザー指摘「返信が長くなると棒線が長すぎる」）。
 * 1段目の返信は親の本文の位置にそろえた薄い地の箱に入れ、2段目より深い返信は右にずらさず同じ箱の中に細い線で区切って並べる。
 * 誰への返信かは「返信 ◯◯」で分かる。区切りの下線は1件ごとではなく、1つのやりとり（一番上のコメント）ごとに引く。 */
body #wpdcom .wpd-thread-list > .wpd-comment { border-bottom: 1px solid var(--ct-line); padding-bottom: 6px; }
body #wpdcom .wpd-thread-list .wpd-comment .wpd-comment-wrap { border-bottom: 0 !important; margin: 0 !important; }
body #wpdcom .wpd-thread-list .wpd-reply {
  margin: 0 0 8px 52px !important; padding: 0 12px !important; border: 0 !important; border-radius: 12px; background: var(--ct-paper);
}
body #wpdcom .wpd-thread-list .wpd-reply .wpd-reply { margin: 0 !important; padding: 0 !important; border-radius: 0; background: none; }
body #wpdcom .wpd-thread-list .wpd-reply .wpd-comment-wrap { padding: 10px 0; }
body #wpdcom .wpd-thread-list .wpd-reply .wpd-reply > .wpd-comment-wrap { border-top: 1px solid #e2e6f0 !important; }
body #wpdcom .wpd-thread-list .wpd-reply .wpd-comment-left { width: 28px !important; flex: 0 0 28px; margin: 0 10px 0 0 !important; }
body #wpdcom .wpd-thread-list .wpd-reply .wpd-avatar img,
body #wpdcom .wpd-thread-list .wpd-reply .wpd-avatar img.avatar { width: 28px !important; height: 28px !important; border-radius: 8px !important; }
body #wpdcom.wpd-layout-3 .wpd-reply .wpd-comment-right { border-left: 0 !important; }
/* 返信の箱の中で開く返信欄は白に（地色の上に地色を重ねない） */
body #wpdcom .wpd-thread-list .wpd-reply form.wpd_comm_form { background: #fff; }
@media (max-width: 599px) {
  body #wpdcom .wpd-thread-list .wpd-reply { margin-left: 24px !important; padding: 0 10px !important; }
}
/* 「返信 ◯◯」と日付の帯: 灰色の帯をやめて小さな文字の1行に */
body #wpdcom .wpd-comment .wpd-reply-to {
  display: flex; align-items: baseline; gap: 6px; margin: 2px 0 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; color: var(--ct-muted) !important; font-size: 12px !important; font-style: normal !important;
}
body #wpdcom .wpd-comment .wpd-reply-to > i { display: none; }
body #wpdcom .wpd-comment .wpd-reply-to a { color: var(--ct-muted) !important; font-style: normal !important; text-decoration: underline; text-decoration-color: var(--ct-line); text-underline-offset: 3px; }
body #wpdcom .wpd-comment .wpd-reply-to .wpd-comment-date { margin-left: auto; }
/* 添付画像の下の点線 */
body #wpdcom .wpd-comment .wmu-comment-attachments,
body #wpdcom .wpd-comment .wmu-attached-images,
body #wpdcom .wpd-comment .wmu-attachment { border: 0 !important; }

/* 新しく読み込んだコメントの印（wpDiscuz の薄い黄色に合わせて一度だけ光らせる） */
body #wpdcom .wpd-new-loaded-comment > .wpd-comment-wrap > .wpd-comment-right { background: none !important; }
body #wpdcom .wpd-new-loaded-comment > .wpd-comment-wrap { animation: bstl-wpd-new 1.6s ease-out; }
@keyframes bstl-wpd-new { from { background: #fff5d6; } to { background: transparent; } }

/* リンク色（wpDiscuz の既定の青を紺に） */
body #wpdcom a { color: var(--ct-navy); }
body #wpdcom .wpd-comment-text a { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  body #wpdcom .wpd-prim-button { transition: none; }
  body #wpdcom .wpd-new-loaded-comment > .wpd-comment-wrap { animation: none; }
}