/*
 * みんなの合格記プラグイン用 カスタムCSS
 */

/* =========================================
   1. フォントサイズの完全統一ルール
   ========================================= */
/* ▼ ベースのフォントサイズを少しだけ（1.4rem → 1.5rem）大きくする ▼ */
.pem-app-container,
.pem-app-container p,
.pem-app-container span,
.pem-app-container li,
.pem-app-container .list-group-item,
.pem-app-container .btn,
.pem-app-container .card-body,
.pem-app-container .pem-list-title {
    font-size: 1.5rem !important; /* ★ 1.4rem から 1.5rem へ少しだけ拡大 ★ */
    line-height: 1.8 !important;  /* 文字が大きいので行間も広めに確保 */
    color: #333 !important;
}

/* 一覧画面の各記事タイトル（太文字を解除して通常ウェイトに） */
.pem-app-container .pem-list-title {
    font-weight: normal !important;
}


/* タイトル・見出し系（ベースが大きくなった分、こちらも少しだけ拡大） */
.pem-app-container h2,
.pem-app-container h3,
.pem-app-container h4,
.pem-app-container .card-header,
.pem-app-container .pem-section-title {
    font-size: 1.7rem !important; /* ★ 1.6rem から 1.7rem へ ★ */
    font-weight: bold !important;
    letter-spacing: 0.05em;
}

/* スコアなどのバッジ（ベースに合わせて少しだけ大きく） */
.pem-app-container .badge {
    font-size: 1.3rem !important; /* ★ 1.2rem から 1.3rem へ ★ */
    font-weight: normal !important;
    padding: 0.4em 0.8em;
}


/* =========================================
   2. 全体・タイトル周りの装飾
   ========================================= */
.pem-app-container h2.text-center {
    color: #333;
    padding-bottom: 10px;
    border-bottom: 3px solid #28a745;
    display: inline-block;
    margin-bottom: 20px;
}

/* =========================================
   3. カードデザインの微調整（立体感・角丸）
   ========================================= */
.pem-app-container .card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    border-width: 1px;
}

/* =========================================
   4. リストの微調整（スクロール位置など）
   ========================================= */
.pem-app-container .list-group-item {
    border-color: #f4f4f4;
    scroll-margin-top: 35vh; /* 戻ったとき画面の中央で止まるようにする */
}

/* =========================================
   5. スマホ表示（レスポンシブ）の微調整
   ========================================= */
@media (max-width: 767px) {
    .pem-app-container .card-body .col-md-6:first-child {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #ddd;
    }
}

/* =========================================
   6. ページネーション（ページ送り）の微調整
   ========================================= */
/* リンク付きの数字(a) と リンクなしの現在の数字(span) の両方を強制的に同じサイズにする */
.pem-app-container a.page-numbers,
.pem-app-container span.page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px; /* ボタンの幅を揃えて綺麗な正方形ベースにする */
    height: 40px;    /* ボタンの高さを揃える */
    padding: 0 10px;
    margin: 0 2px 5px 2px;
    font-size: 1rem !important; /* ★ここで文字サイズを完全に統一！★ */
    line-height: 1 !important;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-decoration: none;
    vertical-align: middle;
    box-sizing: border-box;
}

/* マウスを当てた時のアクション */
.pem-app-container a.page-numbers:hover {
    background-color: #e9ecef;
    text-decoration: none;
}

/* 「現在のページ」のスタイル（青背景に白文字） */
.pem-app-container span.page-numbers.current {
    background-color: #007bff !important;
    color: #fff !important;
    border-color: #007bff !important;
    font-weight: bold !important;
    font-size: 1rem !important; /* ★念のためここでも強制指定！★ */
}

/* 「…（省略記号）」のスタイル（枠線を消す） */
.pem-app-container span.page-numbers.dots {
    border: none !important;
    background: transparent !important;
    color: #6c757d !important;
    font-size: 1rem !important;
    min-width: auto; /* ドット部分は幅を広くしない */
}


/* =========================================
   7. コントラストの改善（バッジと戻るボタン）
   ========================================= */
/* ▼ スコアのバッジ（内容ごとに色を分けてコントラストを強くする） ▼ */
.pem-app-container .badge-primary {
    background-color: #007bff !important; /* 青（通常の% や 「情報が足りない」） */
    color: #ffffff !important; 
}
.pem-app-container .badge-success {
    background-color: #28a745 !important; /* 緑（コンピテンシーを満たしている） */
    color: #ffffff !important;
}
.pem-app-container .badge-warning {
    background-color: #ffc107 !important; /* 黄色/オレンジ（改善が必要など） */
    color: #212529 !important; /* 背景が明るいので、文字はハッキリとした濃い黒に */
}

/* 共通：バッジの余計な影や枠線を消してスッキリ見せる */
.pem-app-container .badge {
    border: none !important;
    text-shadow: none !important; 
}

/* ▼ 「一覧に戻る」ボタン（通常時は白背景 × 濃い文字） ▼ */
.pem-app-container .btn-secondary {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 2px solid #007bff !important; /* 枠線をあらかじめ青っぽくしておくと綺麗です */
    font-weight: bold !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease-in-out !important; 
}

/* ▼ 戻るボタンにマウスを乗せた時のアクション（背景を鮮やかな青色に！） ▼ */
.pem-app-container .btn-secondary:hover {
    background-color: #007bff !important; /* 背景を青に */
    color: #ffffff !important;             /* 文字を真っ白に */
    border-color: #007bff !important;
}