/* assets/css/mtc-styles.css */

#mtc-comment-form-wrap,
#mtc-comment-list-wrap {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #e5e5e5;
    background-color: #f9f9f9;
    border-radius: 4px;
}

#mtc-comment-form label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

#mtc-comment-form input[type="text"],
#mtc-comment-form textarea {
    width: 98%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
}
#mtc-comment-form textarea {
     resize: vertical;
}

/* アイコンリスト */
.mtc-icon-list {
    list-style: none;
    padding: 0;
    margin: 5px 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* アイコン間の隙間 */
}
.mtc-icon-list li {
    margin: 0;
    padding: 0;
}
.mtc-icon-list a {
    display: inline-block;
    border: 2px solid transparent;
    padding: 2px;
    border-radius: 50%; /* 丸アイコンの場合 */
    transition: border-color 0.2s ease;
}
.mtc-icon-list a:hover,
.mtc-icon-list a.selected {
    border-color: #0073aa; /* 選択/ホバー時の枠線 */
}
.mtc-icon-list img {
    width: 32px;  /* アイコンサイズ調整 */
    height: 32px;
    display: block;
    border-radius: 50%;
}
#mtc-selected-icon-preview img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-left: 5px;
}


#mtc-comment-message {
    padding: 10px;
    border-radius: 3px;
    font-weight: bold;
}
#mtc-comment-message.success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}
#mtc-comment-message.error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

/* === コメントリスト === */
.mtc-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 1行表示用のアイテムスタイル */
.mtc-comment-item.mtc-single-line {
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0; /* 上下のパディングを少し狭める */
    display: flex; /* アイコンとメインコンテンツを横並び */
    align-items: center; /* アイコンとテキストの垂直中央揃え */
    gap: 10px; /* アイコンとメインコンテンツ間の隙間 */
}
.mtc-comment-item.mtc-single-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* アイコン */
.mtc-comment-item.mtc-single-line .mtc-comment-icon {
    width: 32px; /* アイコンサイズを小さめに */
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0; /* align-items で中央揃えするので不要 */
}
/* アイコンがない場合のプレースホルダー */
.mtc-comment-item.mtc-single-line .mtc-comment-icon-placeholder {
    display: inline-block; /* アイコンと同じように場所を確保 */
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    /* background-color: #eee; */ /* 必要なら背景色 */
    /* border-radius: 50%; */
}


/* メインコンテンツエリア (.mtc-comment-main) */
.mtc-comment-item.mtc-single-line .mtc-comment-main {
    flex-grow: 1; /* 残りのスペースを埋める */
    line-height: 1.6; /* 行間調整 */
    color: #555; /* 基本の文字色 */
    font-size: 0.95em; /* 全体のフォントサイズを少し調整 */
    /* word-break: break-all; */ /* 必要なら長い単語の強制改行 */
}

/* 各要素 (span) のスタイル */
.mtc-comment-item.mtc-single-line .mtc-comment-main > span {
    /* display: inline; デフォルトはインラインのはず */
    vertical-align: baseline; /* ベースラインを揃える */
    margin-right: 0.3em; /* 各要素間のわずかなスペース */
}
/* 最後の要素の右マージンは不要 */
.mtc-comment-item.mtc-single-line .mtc-comment-main > span:last-child {
    margin-right: 0;
}


/* コメント本文 */
.mtc-comment-item.mtc-single-line .mtc-comment-text {
    /* 特に変更不要かも */
}

/* 区切り文字 */
.mtc-comment-item.mtc-single-line .mtc-comment-separator {
    color: #aaa; /* 少し薄い色 */
    font-size: 0.9em;
}

/* 投稿者名 */
.mtc-comment-item.mtc-single-line .mtc-comment-author {
    font-weight: bold; /* 太字 */
    color: #444;
}

/* 日付 */
.mtc-comment-item.mtc-single-line .mtc-comment-date {
    color: #999; /* 日付の色 */
    font-size: 0.9em;
}
.mtc-comment-item.mtc-single-line .mtc-comment-date.is-old {
    display: none; /* 古い日付は非表示 (変更なし) */
}

/* NEWマーク */
.mtc-comment-item.mtc-single-line .mtc-new-mark {
    color: #e44d26;
    font-weight: bold;
    font-size: 0.85em;
    /* margin-right は span の共通マージンで調整 */
    order: 1; /* 右端に表示させたい場合 (flexアイテムの順序変更) */
}


/* (不要になった可能性のある以前のスタイルをコメントアウトまたは削除) */
/*
.mtc-comment-text { ... } の複数行表示を想定したスタイル
*/

/* レスポンシブ調整 (必要であれば) */
@media (max-width: 600px) {
    .mtc-comment-item.mtc-single-line {
        padding: 10px 0;
        gap: 8px;
    }
    .mtc-comment-item.mtc-single-line .mtc-comment-icon,
    .mtc-comment-item.mtc-single-line .mtc-comment-icon-placeholder {
        width: 28px;
        height: 28px;
    }
    .mtc-comment-item.mtc-single-line .mtc-comment-main {
        font-size: 0.9em;
    }
}

/* ページネーション */
.mtc-pagination {
    margin-top: 20px;
    text-align: center;
}
.mtc-pagination .page-numbers {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #0073aa;
    border-radius: 3px;
}
.mtc-pagination .page-numbers.current,
.mtc-pagination .page-numbers:hover {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* フォーム表示ボタンのスタイル (任意で調整) */
#mtc-show-form-button-wrap {
    text-align: center; /* 中央揃え */
    margin: 20px 0;    /* 上下の余白 */
}

#mtc-show-form-button {
    padding: 10px 25px; /* ボタンの大きさ */
    font-size: 1.1em;   /* 文字サイズ */
    cursor: pointer;    /* カーソルをポインターに */
    /* WordPressの標準ボタンクラス 'button' を使っているので、
       テーマのボタンスタイルが適用されることが多いです。
       必要に応じて背景色、文字色などを上書きしてください。 */
    /* background-color: #0073aa; */
    /* color: #fff; */
    /* border: none; */
    /* border-radius: 4px; */
}

/* フォームのラッパーのデザイン調整 (任意) */
#mtc-comment-form-wrap {
    margin-top: 20px; /* フォームが表示された際の上の余白 */
    /* 他のスタイルは既存のものを継承 */
}

/* input, textarea の placeholder スタイル (任意) */
#mtc-comment-form input[type="text"]::placeholder,
#mtc-comment-form textarea::placeholder {
  color: #999; /* プレースホルダーの文字色 */
  opacity: 1; /* Firefoxでの薄さをリセット */
}

/* NEWマークのスタイル */
.mtc-new-mark {
    color: #e44d26; /* 目立つ色 (例: オレンジレッド) */
    font-weight: bold;
    font-size: 0.9em; /* 少し小さめでも良いかも */
    margin-right: 5px; /* 後続要素との間に少しスペース */
    display: inline-block; /* 他の要素と並べる */
    vertical-align: baseline; /* 位置調整 */
}

/* 古い日付を非表示にする */
.mtc-comment-date.is-old {
    display: none;
}

/* (任意) 通常の日付のスタイル調整 (もし必要なら) */
.mtc-comment-date {
    /* display: inline; デフォルトはインラインのはず */
    /* color: #999; 少し薄くするなど */
}



/* assets/css/mtc-styles.css - 洗練されたデザイン調整案 */

/* === 全体のラッパー === */
#mtc-comment-list-wrap,
#mtc-comment-form-wrap {
    margin: 30px 0; /* 上下の余白を少し広げる */
    padding: 0; /* 内側のパディングは一旦リセット */
    border: none; /* 枠線をなくす */
    background-color: transparent; /* 背景色をなくす (テーマに合わせる) */
    border-radius: 0; /* 角丸をなくす (テーマに合わせる) */
}

#mtc-comment-list-wrap h3,
#mtc-comment-form-wrap h3 {
    /* ★★★ フォントサイズを調整 ★★★ */
    /* font-size: 1.4em; */ /* ← 元の設定 (コメントアウト) */
    font-size: 1.15em; /* 例: 少し小さくする (1.1em や 1.2em などお好みで) */
    /* ★★★ ここまで ★★★ */
    margin-bottom: 18px; /* 見出し下の余白も少し調整 (任意) */
    text-align: left;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px; /* 区切り線とのスペースも少し調整 (任意) */
    font-weight: bold; /* 太字を維持 (または normal にする) */
    color: #444; /* 文字色 (任意) */
}

/* === コメントリスト === */
.mtc-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mtc-comment-item {
    /* 区切り線を細く、薄い色に */
    border-bottom: 1px solid #f0f0f0;
    /* 上下のパディングを調整 */
    padding: 20px 0;
    display: flex;
    gap: 15px; /* アイコンとコンテンツの間の隙間を少し広げる */
}
.mtc-comment-item:last-child {
    border-bottom: none; /* 最後のアイテムの線は消す */
    padding-bottom: 0; /* 最後のアイテムの下パディングも不要なら消す */
}

.mtc-comment-icon {
    width: 45px; /* アイコンサイズを少し大きく */
    height: 45px;
    border-radius: 50%; /* 丸アイコンを維持 */
    flex-shrink: 0;
    margin-top: 2px; /* 微調整: テキストとの垂直位置 */
}



.mtc-comment-author {
    font-weight: bold; /* 名前を太字に */
    color: #333; /* 名前の色を少し濃く */
}

.mtc-new-mark {
    color: #e44d26;
    font-weight: bold;
    font-size: 0.85em; /* 少し小さく */
    /* margin-right は gap で調整 */
    /* vertical-align は align-items で調整 */
    order: -1; /* NEWマークを一番左に持ってくる (必要なら) */
}

.mtc-comment-date {
    font-size: 0.9em; /* 日付のサイズ */
    color: #aaa; /* 日付の色をさらに薄く */
}

.mtc-comment-date.is-old {
    display: none; /* 古い日付は非表示 (変更なし) */
}


/* === ページネーション === */
.mtc-pagination {
    margin-top: 30px; /* 上の余白を広げる */
    text-align: center;
}
.mtc-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px; /* パディング調整 */
    margin: 0 3px; /* ボタン間のマージン */
    border: 1px solid #ddd;
    text-decoration: none;
    color: #555; /* 通常時の文字色 */
    border-radius: 4px; /* 少し角丸に */
    transition: background-color 0.2s, color 0.2s; /* ホバー効果 */
}
.mtc-pagination .page-numbers.current,
.mtc-pagination .page-numbers:hover {
    background-color: #eee; /* ホバー/現在の背景色 */
    color: #333; /* ホバー/現在の文字色 */
    border-color: #ccc;
}
.mtc-pagination .page-numbers.dots { /* 「...」のスタイル */
    border: none;
    background: none;
    color: #aaa;
}


/* === フォーム表示ボタン === */
#mtc-show-form-button-wrap {
    text-align: center;
    margin: 30px 0;
}

#mtc-show-form-button {
    padding: 12px 30px;
    font-size: 1.1em;
    cursor: pointer;
    background-color: #0073aa; /* ボタン色を例示 (テーマに合わせる) */
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s;
}
#mtc-show-form-button:hover {
    background-color: #005a87; /* ホバー時の色 */
}

/* === コメントフォーム === */
#mtc-comment-form-wrap {
    margin-top: 30px; /* 表示された際の上の余白 */
    padding: 25px; /* フォームの内側の余白 */
    background-color: #fdfdfd; /* フォームエリアの背景色を少し変える */
    border: 1px solid #eee; /* フォームエリアに薄い枠線 */
    border-radius: 5px; /* フォームエリアの角丸 */
}

#mtc-comment-form p {
    margin-bottom: 15px; /* 各フォーム要素間のマージン */
}

#mtc-comment-form input[type="text"],
#mtc-comment-form textarea {
    width: 100%; /* 幅を100%に */
    padding: 12px 15px; /* 内側のパディングを調整 */
    border: 1px solid #ddd; /* 枠線を少し薄く */
    border-radius: 4px; /* 角丸 */
    box-sizing: border-box; /* paddingを含めてwidth 100%にする */
    background-color: #fff; /* 背景色を白に */
    transition: border-color 0.2s;
}
#mtc-comment-form input[type="text"]:focus,
#mtc-comment-form textarea:focus {
    border-color: #0073aa; /* フォーカス時の枠線色 */
    outline: none; /* デフォルトのアウトラインを消す */
    box-shadow: 0 0 0 1px #0073aa inset; /* フォーカス時の内側影 (任意) */
}

#mtc-comment-form textarea {
     resize: vertical;
     min-height: 100px; /* テキストエリアの最小高さ */
}

#mtc-comment-form label { /* アイコン選択のラベル */
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

/* アイコンリスト */
.mtc-icon-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px; /* 下マージン */
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* アイコン間の隙間 */
}
.mtc-icon-list li { margin: 0; padding: 0; }

.mtc-icon-list a {
    display: block; /* displayをblockに */
    border: 2px solid transparent;
    padding: 3px; /* パディング微調整 */
    border-radius: 50%;
    transition: border-color 0.2s ease, transform 0.1s ease; /* ホバー効果追加 */
    line-height: 0; /* 画像下の余分なスペースをなくす */
}
.mtc-icon-list a:hover {
    transform: scale(1.1); /* ホバーで少し拡大 */
}
.mtc-icon-list a.selected {
    border-color: #0073aa;
    transform: scale(1.1);
}
.mtc-icon-list img {
    width: 36px; /* アイコンサイズ */
    height: 36px;
    display: block;
    border-radius: 50%;
}
#mtc-selected-icon-preview { margin-top: 5px; display: inline-block; }
#mtc-selected-icon-preview img {
    width: 24px; height: 24px; vertical-align: middle; margin-left: 5px; border-radius: 50%;
}

/* 送信ボタン */
#mtc-comment-form .form-submit {
    margin-top: 20px; /* 上の余白 */
    text-align: right; /* 右寄せにする場合 */
}
#mtc-comment-form #mtc-submit {
    padding: 10px 25px;
    font-size: 1em;
    cursor: pointer;
    background-color: #2ea2cc; /* 送信ボタンの色 (例) */
    color: #fff;
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}
#mtc-comment-form #mtc-submit:hover {
    background-color: #1e8cbe;
}
#mtc-comment-form #mtc-submit:disabled { /* 送信中のスタイル */
    background-color: #ccc;
    cursor: not-allowed;
}

/* メッセージ表示 */
#mtc-comment-message {
    padding: 12px 15px;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 15px; /* 上マージン */
}
/* 成功・エラーの色などは変更なしでOK */
#mtc-comment-message.success { background-color: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; }
#mtc-comment-message.error { background-color: #f2dede; color: #a94442; border: 1px solid #ebccd1; }

/* レスポンシブ対応 (例: スマートフォン) */
@media (max-width: 600px) {
    .mtc-comment-item {
        gap: 10px; /* アイコンとコンテンツの隙間を狭める */
    }
    .mtc-comment-icon {
        width: 35px; /* アイコンを少し小さく */
        height: 35px;
    }
    #mtc-comment-form-wrap {
        padding: 15px; /* フォームのパディングを狭める */
    }
    #mtc-comment-form input[type="text"],
    #mtc-comment-form textarea {
        padding: 10px;
    }
    .mtc-icon-list img {
        width: 32px; /* アイコン選択の画像を小さく */
        height: 32px;
    }
}