/* =========================================
   コンテナ・共通スタイル
   ========================================= */
.kspt-container {
    overflow-x: auto;
    margin-bottom: 2em;
}

/* 検索結果ゼロのメッセージ */
.kspt-no-result {
    display: none;
    text-align: center;
    padding: 20px;
    color: inherit; /* テーマの色を使う */
    opacity: 0.7;
}

/* =========================================
   フィルターBOX
   ========================================= */
.kspt-filter-box {
    /* 背景色などは残しますが、必要であればここも透明にします。
       一旦、機能として独立しているため残します */
    background: #fafafa;
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.kspt-filter-group {
    margin-bottom: 10px;
}
.kspt-filter-group:last-child {
    margin-bottom: 0;
}

.kspt-filter-label {
    font-weight: bold;
    margin-right: 10px;
    font-size: 13px;
    display: inline-block;
    min-width: 60px;
}

/* フィルターボタン（UIパーツなのでスタイル維持） */
.kspt-filter-btn {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    padding: 4px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}
.kspt-filter-btn:hover {
    background: #f0f0f0;
}
.kspt-filter-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* =========================================
   テーブル基本スタイル (テーマ優先に変更)
   ========================================= */
.kspt-table,
.kspt-list-mode table {
    /* border-collapse や width はレイアウト崩れ防止のため残す */
    border-collapse: collapse;
    width: 100%;
    /* font-size もテーマに合わせるなら削除推奨ですが、
       表が大きくなりすぎるのを防ぐため 14px 程度は残すことが多いです。
       不要なら font-size: 14px; を削除してください。 */
    font-size: 14px; 
}

/* ★重要: ここにあった background, border 指定をすべて削除しました。
   WordPressテーマのCSSが適用されます。
*/
.kspt-table th, .kspt-table td,
.kspt-list-mode th, .kspt-list-mode td {
    padding: 10px;
    vertical-align: middle;
    /* border指定を削除 */
}

/* ヘッダー */
.kspt-table thead th,
.kspt-list-mode thead th {
    text-align: center;
    /* background指定を削除 */
}

/* 比較表モード */
.kspt-comparison-mode {
    table-layout: fixed;
}
.kspt-label-col {
    width: 160px;
}

/* リストモード */
.kspt-list-mode th {
    white-space: nowrap;
}

/* リストモードの行見出し (tbody th) */
.kspt-list-mode tbody th {
    text-align: center;
    min-width: 120px;
    /* background指定を削除 */
}

/* =========================================
   ソート機能
   ========================================= */
.kspt-sort-header {
    cursor: pointer;
    position: relative;
    padding-right: 20px !important;
}

/* ソートアイコン */
.kspt-sort-header::after {
    content: "⇅";
    font-size: 10px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
}
.kspt-sort-header.asc::after {
    content: "▲";
    opacity: 1;
}
.kspt-sort-header.desc::after {
    content: "▼";
    opacity: 1;
}

/* =========================================
   パーツ: ボタン・バッジ
   ========================================= */
.kspt-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: #d32f2f; /* ボタン色は維持（CV用のため） */
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    transition: background-color 0.3s;
    white-space: nowrap;
}
.kspt-btn:hover {
    background-color: #b71c1c;
    color: #fff;
}

/* バッジ類は「UIパーツ」なので色は維持します */
.kspt-badge {
    display: inline-block;
    font-size: 0.85em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 5px;
    line-height: 1;
}
.kspt-badge-voice {
    background-color: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #bbdefb;
}
.kspt-badge-data {
    background-color: #f5f5f5;
    color: #616161;
    border: 1px solid #e0e0e0;
}

/* =========================================
   ブランドカラー定義 (文字色)
   ========================================= */
.kspt-color-default {
    color: inherit; /* テーマの文字色を使う */
}
strong.kspt-color-docomo, span.kspt-color-docomo { color: #CC0033; }
strong.kspt-color-au, span.kspt-color-au { color: #EC5F05; }
strong.kspt-color-sb, span.kspt-color-sb { color: #0084D1; }
strong.kspt-color-rakuten, span.kspt-color-rakuten { color: #BF0087; }

/* 非アクティブ */
.kspt-line-inactive {
    color: inherit;
    opacity: 0.3; /* 色指定ではなく透明度で薄くする */
    font-size: 0.9em;
    font-weight: normal;
}

@media (max-width: 600px) {
    .kspt-table, .kspt-list-mode table { font-size: 12px; }
    .kspt-table th, .kspt-table td, .kspt-list-mode th, .kspt-list-mode td { padding: 6px; }
    .kspt-filter-label { display: block; margin-bottom: 5px; }
}