/* ========================================
 * cmnt-pc.css
 * PCコメントエリア
 * ======================================== */

/* ========================================
 * コメント大枠
 * ======================================== */

/* コメント大枠 */
.cmnt-wrap { background-color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-2) var(--padd-2) 0; }

/* 初期非表示（JS側で動的に表示/非表示を切り替える要素の初期状態） */
.cmnt-hide { display: none; }

/* コメント数表示バー */
.cmnt-count-bar { display: flex; align-items: center; gap: var(--padd-4); width: 100%; background-color: var(--colr-1); border-radius: var(--radi-1); padding: var(--padd-3); margin-bottom: 10px; }

/* コメントアイコン */
.cmnt-count-icon { width: 16px; height: 16px; }

/* コメント数テキスト */
.cmnt-count-num { color: var(--colr-2); font-weight: var(--fwgt-1); }

/* ========================================
 * 投稿フォーム
 * ======================================== */

/* フォーム大枠 */
#commentform, #cmnt-bottom-commentform { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

/* コメント欄を先に表示 */
.comment-form-comment { order: 1; }

/* 名前欄を後に表示 */
.comment-form-author { order: 2; }

/* 名前保存 */
.comment-form-cookies-consent { order: 3; }

/* 送信ボタン */
.form-submit { order: 4; }

/* 名前フィールド行 */
.comment-form-author { display: flex; align-items: center; gap: 10px; margin: 0; }

/* 名前入力欄 */
.comment-form-author input { width: 33%; border: 1px solid var(--colr-1); border-radius: var(--radi-1); padding: var(--padd-3); }

/* コメント入力欄 */
.comment-form-comment { display: flex; flex-direction: column; gap: 10px; margin: 0; }

/* コメント入力欄のラベル（「コメント」の文字） */
.comment-form-comment label { font-weight: var(--fwgt-1); line-height: 1; }

/* コメント入力欄テキストエリア */
.comment-form-comment textarea { width: 100%; border: 1px solid var(--colr-1); border-radius: var(--radi-1); padding: var(--padd-3); resize: vertical; }

/* チェックボックス行 */
.comment-form-cookies-consent { display: flex; align-items: center; gap: 10px; margin: 0; }

/* 送信ボタン */
#commentform input[type="submit"], #cmnt-bottom-commentform input[type="submit"] { background-color: var(--colr-1); color: var(--colr-2); border: 1px solid var(--colr-1); border-radius: var(--radi-1); padding: 9px 19px; font-weight: var(--fwgt-1); cursor: pointer; width: fit-content; box-sizing: border-box; }

/* 送信ボタンホバー */
#commentform input[type="submit"]:hover, #cmnt-bottom-commentform input[type="submit"]:hover { background-color: var(--colr-3); border-color: var(--colr-3); }

/* 送信ボタンの親要素（form-submit）を横並びにしてキャンセルボタンを隣に配置 */
#commentform .form-submit, #cmnt-bottom-commentform .form-submit { display: flex; align-items: center; gap: 10px; }

/* コメント末尾の固定投稿フォーム */
#cmnt-bottom-commentform { margin-top: 10px; margin-bottom: 10px; }

/* 返信先表示エリア */
#cmnt-reply-context { background-color: var(--colr-1); color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-3); font-weight: var(--fwgt-1); margin-top: 10px; }

/* 返信キャンセルボタン */
#cmnt-cancel-btn { background-color: var(--colr-2); color: var(--colr-1); border: 1px solid var(--colr-1); border-radius: var(--radi-1); padding: 9px 19px; cursor: pointer; box-sizing: border-box; }

/* 返信キャンセルボタンホバー */
#cmnt-cancel-btn:hover { border-color: var(--colr-3); color: var(--colr-3); }

/* ========================================
 * コメントリスト共通
 * ======================================== */

/* コメントリスト */
.cmnt-list { border-top: 1px solid var(--colr-1); }

/* コメント項目 */
.cmnt-item { padding: var(--padd-2) 0; border-bottom: 1px solid var(--colr-1); }

/* 返信リスト */
.cmnt-child-list { margin-top: var(--padd-2); margin-bottom: 20px; padding-left: var(--padd-2); border-left: 2px solid var(--colr-1); display: flex; flex-direction: column; gap: var(--padd-2); }

/* 返信項目 */
.cmnt-child-item { padding-bottom: var(--padd-2); border-bottom: 1px solid var(--colr-1); }

/* 最後の返信項目は下線なし */
.cmnt-child-item:last-child { border-bottom: none; padding-bottom: 0; }

/* ========================================
 * コメントメタ情報
 * ======================================== */

/* メタ情報行 */
.cmnt-meta { display: flex; align-items: center; gap: var(--padd-3); flex-wrap: wrap; }

/* コメント番号 */
.cmnt-num { font-weight: var(--fwgt-1); color: var(--colr-1); }

/* 投稿日 */
.cmnt-date { font-size: var(--font-1); color: #000000; }

/* 返信ボタン */
.cmnt-reply { margin-left: auto; }

/* 返信ボタンリンク */
.cmnt-reply a { display: inline-block; background-color: var(--colr-1); color: var(--colr-2); font-weight: var(--fwgt-1); border-radius: var(--radi-1); padding: var(--padd-3); }

/* 返信ボタンリンクホバー */
.cmnt-reply a:hover { background-color: var(--colr-3); }

/* ========================================
 * コメント本文
 * ======================================== */

/* 本文 */
.cmnt-body { line-height: 1.6; margin-bottom: 10px; white-space: pre-wrap; }

/* アンカー表示（返信先の >>N） */
.cmnt-anchor { display: block; color: var(--colr-1); font-weight: var(--fwgt-1); font-size: 20px; margin-bottom: var(--padd-4); }

/* 本文中のアンカーリンク */
.cmnt-anchor-lnk { color: var(--colr-1); font-weight: var(--fwgt-1); font-size: 20px; text-decoration: underline; }

/* 本文中のアンカーリンクホバー */
.cmnt-anchor-lnk:hover { color: var(--colr-3); }

/* ========================================
 * 投票・評価エリア
 * ======================================== */

/* 投票エリア */
.cmnt-vote { display: flex; align-items: center; gap: var(--padd-3); flex-wrap: wrap; }

/* いいね・悪いねボタン共通 */
.cmnt-like, .cmnt-dislike { display: flex; align-items: center; gap: 4px; background-color: var(--colr-2); border: 1px solid var(--colr-1); border-radius: var(--radi-1); padding: 10px; cursor: pointer; font-weight: var(--fwgt-1); color: var(--colr-1); line-height: 1; }

/* いいね・悪いねボタンホバー */
.cmnt-like:hover, .cmnt-dislike:hover { background-color: var(--colr-3); color: var(--colr-2); border-color: var(--colr-3); }

/* 投票済みボタン */
.cmnt-voted { opacity: 0.4; cursor: default; pointer-events: none; }

/* 評価バー */
.cmnt-bar { flex: 1; height: 16px; background-color: #e0e0e0; border-radius: var(--radi-1); overflow: hidden; max-width: 200px; }

/* 評価バー（塗り部分） */
.cmnt-bar-fill { height: 100%; background-color: var(--colr-1); transition: width 0.3s ease; }

/* ========================================
 * 返信折り畳み
 * ======================================== */

/* 折り畳み大枠 */
.cmnt-replies-wrap { margin-top: var(--padd-2); }

/* 折り畳みボタン */
.cmnt-replies-summary { display: inline-block; background-color: var(--colr-1); color: var(--colr-2); font-weight: var(--fwgt-1); border-radius: var(--radi-1); padding: var(--padd-3); cursor: pointer; margin-bottom: var(--padd-2); }

/* 折り畳みボタンホバー */
.cmnt-replies-summary:hover { background-color: var(--colr-3); }

/* ========================================
 * スコア別演出
 * ======================================== */

/* 高評価コメント */
.score-super .cmnt-body { font-size: 20px; color: var(--colr-3); font-weight: var(--fwgt-1); }

/* やや高評価コメント */
.score-high .cmnt-body { font-size: 17px; color: var(--colr-1); }

/* 通常評価コメント */
.score-normal .cmnt-body { font-size: 16px; }

/* 低評価コメント */
.score-minus .cmnt-body { font-size: 13px; color: #999999; opacity: 0.7; }

/* ========================================
 * アンカープレビューポップアップ
 * ======================================== */

/* ポップアップ大枠（矢印がoverflowでクリップされないよう、スクロールは内側の要素に任せる） */
.cmnt-popup { position: relative; max-width: 400px; background-color: var(--colr-2); border: 2px solid var(--colr-1); border-radius: var(--radi-1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 999; }

/* ポップアップ内のスクロール領域 */
.cmnt-popup-inner { max-height: 250px; overflow-y: auto; padding: var(--padd-2); }

/* ポップアップ内メタ情報 */
.cmnt-popup .cmnt-meta { margin-bottom: var(--padd-4); }

/* ポップアップ内本文 */
.cmnt-popup .cmnt-body { margin-bottom: 0; font-size: 14px; }

/* 吹き出し矢印（ポップアップがアンカーの上にある場合：矢印は下向き、外側の枠線色三角） */
.cmnt-popup-arrow-down::before { content: ""; position: absolute; left: 16px; top: 100%; border: 9px solid transparent; border-top-color: var(--colr-1); z-index: 999; }

/* 吹き出し矢印（下向き：内側の背景色三角を少し小さく重ねて輪郭だけ残す） */
.cmnt-popup-arrow-down::after { content: ""; position: absolute; left: 18px; top: calc(100% - 2px); border: 7px solid transparent; border-top-color: var(--colr-2); z-index: 1000; }

/* 吹き出し矢印（ポップアップがアンカーの下にある場合：矢印は上向き、外側の枠線色三角） */
.cmnt-popup-arrow-up::before { content: ""; position: absolute; left: 16px; bottom: 100%; border: 9px solid transparent; border-bottom-color: var(--colr-1); z-index: 999; }

/* 吹き出し矢印（上向き：内側の背景色三角を少し小さく重ねて輪郭だけ残す） */
.cmnt-popup-arrow-up::after { content: ""; position: absolute; left: 18px; bottom: calc(100% - 2px); border: 7px solid transparent; border-bottom-color: var(--colr-2); z-index: 1000; }