/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 26 2026 | 12:59:28 */
/*
 * 競馬AIナビ Analytics - クロス分析ツール CSS（WordPress移植版）
 * モックアップ style.css からの自動生成 - 手動編集禁止
 * 変更はモックアップ側で行い、再生成すること
 *
 * WP固有の変更点:
 *  - .app-header / .app-footer セクション削除（WPテーマが提供）
 *  - position: sticky 削除（WP管理バーとの競合防止）
 *
 * カラースキーム:
 * - Primary: #0d6e6e (ティールグリーン - Analyticsのアイデンティティ)
 * - Primary Dark: #095555
 * - Primary Light: #e0f2f1
 * - Accent: #005ab3 (親サイトと共通のブルー)
 * - Rank 1: #ffe6e6, Rank 2: #fff3e0, Rank 3: #e3f2fd (親サイト準拠)
 */

/* ================================
   リセット & ベース
   ================================ */
/* WP移植時の競合防止: グローバルリセットを廃止し .analytics-app スコープに限定 */
.analytics-app {
    box-sizing: border-box;
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background-color: #f5f7fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.analytics-app *, .analytics-app *::before, .analytics-app *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/* ================================
   ヘッダー（WP版では削除 - WPテーマが提供）
   ================================ */

/* ================================
   メイン
   ================================ */
.app-main {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}

/* ================================
   セクション共通
   ================================ */
.section-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #0d6e6e;
    margin-top: 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-header-row .section-title {
    margin-bottom: 0;
}

/* CSV出力ボタン */
.csv-export-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #0d6e6e, #095555);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 4px rgba(13, 110, 110, 0.25);
    white-space: nowrap;
}

.csv-export-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #095555, #073e3e);
    box-shadow: 0 3px 8px rgba(13, 110, 110, 0.35);
    transform: translateY(-1px);
}

.csv-export-button:active:not(:disabled) {
    transform: translateY(0);
}

.csv-export-button:disabled {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
}

/* ================================
   レース選択セクション
   ================================ */
.race-selector-section {
    background: white;
    border-radius: 8px;
    padding: 0 0 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.race-selector-section .section-title {
    background: linear-gradient(to right, #2537f3, #00c7ff);
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
}

.race-selector-section .race-selector-controls {
    padding: 16px 20px 0;
}

.race-selector-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.selector-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.selector-group label {
    font-weight: bold;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

.selector-group select {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    min-width: 0;
    max-width: 100%;
    cursor: pointer;
}

.selector-group select:focus {
    outline: none;
    border-color: #0d6e6e;
    box-shadow: 0 0 0 2px rgba(13, 110, 110, 0.15);
}

.race-info-display {
    font-size: 13px;
    color: #0d6e6e;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
}

.race-info-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.badge-grade {
    background: linear-gradient(135deg, #d4145a, #fbb03b);
    color: white;
}

.badge-surface {
    background: #795548;
    color: white;
}

.badge-distance {
    background: #0d6e6e;
    color: white;
}

/* ================================
   ウェイトステッパー
   ================================ */

/* グループヘッダー行 */
.weight-header-row th {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 6px !important;
    background: #f8fafc;
    border-bottom: 2px solid #e5e7eb;
}

.col-score-group {
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    color: #0d6e6e;
}

/* 編集可能なユーザー予想名 */
.weight-name-edit-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.weight-name-input {
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    padding: 1px 3px;
    width: 100px;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    cursor: text;
}

.weight-name-input:hover {
    border-color: #ccc;
    background: rgba(0, 0, 0, 0.03);
}

.weight-name-input:focus {
    outline: none;
    background: white;
}

.weight-name-input.user1-label {
    color: #c62828;
}

.weight-name-input.user1-label:focus {
    border-color: #c62828;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.15);
}

.weight-name-input.user2-label {
    color: #7b1fa2;
}

.weight-name-input.user2-label:focus {
    border-color: #7b1fa2;
    box-shadow: 0 0 0 2px rgba(123, 31, 162, 0.15);
}

/* ステッパーコントロール */
.weight-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 3px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.stepper-btn {
    width: 20px;
    height: 22px;
    border: none;
    background: #f5f5f5;
    color: #555;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.stepper-btn:hover {
    background: #e0e0e0;
}

.stepper-btn:active {
    background: #ccc;
}

.stepper-value {
    width: 28px;
    height: 22px;
    border: none;
    border-left: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    padding: 0;
    -moz-appearance: textfield;
}

.stepper-value::-webkit-inner-spin-button,
.stepper-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ステッパーの軸別カラーアクセント */
.ai-stepper .stepper-value { color: #005ab3; }
.kitaichi-stepper .stepper-value { color: #2e7d32; }
.oikiri-stepper .stepper-value { color: #ef6c00; }
.user1-stepper .stepper-value { color: #c62828; }
.user2-stepper .stepper-value { color: #7b1fa2; }

/* ラベル色（汎用） */
.ai-label { color: #005ab3; }
.kitaichi-label { color: #2e7d32; }
.oikiri-label { color: #ef6c00; }
.user1-label { color: #c62828; }
.user2-label { color: #7b1fa2; }

/* アクションバー（比率バー + ボタン群） */
.action-bar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 10px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.subsection-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin: 12px 0 4px;
    padding-left: 8px;
    border-left: 3px solid #0d6e6e;
}

/* 出馬表サブタイトルはaction-bar外なので左位置をaction-bar内と揃える */
.race-table-section > .subsection-title {
    margin-top: 24px;
    margin-left: 20px;
}

/* PC版ステッパー行（アクションバー上部） */
.desktop-stepper-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.desktop-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.desktop-stepper-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.desktop-stepper-item .weight-name-edit-wrap {
    justify-content: center;
}

.desktop-stepper-item .weight-name-input {
    font-size: 11px;
    width: 110px;
}

.desktop-stepper-item .weight-stepper {
    margin-top: 0;
}

.action-bar .weight-ratio-display {
    width: 50%;
}

.action-bar .action-buttons {
    align-self: stretch;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.action-buttons .csv-export-button {
    margin-left: auto;
}

/* ウェイト比率バー */
.weight-ratio-display {
    flex: 1;
    min-width: 200px;
}

.ratio-bar {
    display: flex;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ratio-ai {
    background: linear-gradient(135deg, #7ecef4, #a8e0f8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease;
    min-width: 0;
    overflow: hidden;
}

.ratio-ai span {
    color: #444;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.ratio-kitaichi {
    background: linear-gradient(135deg, #a0e86a, #c0f090);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    transition: width 0.3s ease;
    overflow: hidden;
}

.ratio-kitaichi span {
    color: #444;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.ratio-oikiri {
    background: linear-gradient(135deg, #fdd07a, #fee4a8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    transition: width 0.3s ease;
    overflow: hidden;
}

.ratio-oikiri span {
    color: #444;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.ratio-user1 {
    background: linear-gradient(135deg, #f4a0a0, #f8c0c0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease;
    min-width: 0;
    overflow: hidden;
}

.ratio-user1 span {
    color: #444;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.ratio-user2 {
    background: linear-gradient(135deg, #d4a8f0, #e4c8f8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease;
    min-width: 0;
    overflow: hidden;
}

.ratio-user2 span {
    color: #444;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

/* 比率ラベル行（バー下部） */
.ratio-labels {
    display: flex;
    margin-top: 2px;
}

.ratio-label {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.3s ease;
}

.ratio-label-ai { color: #2563eb; }
.ratio-label-kitaichi { color: #2e7d32; }
.ratio-label-oikiri { color: #ef6c00; }
.ratio-label-user1 { color: #c62828; }
.ratio-label-user2 { color: #7b1fa2; }

/* 再計算ボタン */
.calc-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #005ab3, #2563eb);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 90, 179, 0.3);
    white-space: nowrap;
}

.calc-button:hover {
    background: linear-gradient(135deg, #004494, #1d4ed8);
    box-shadow: 0 4px 10px rgba(0, 90, 179, 0.4);
    transform: translateY(-1px);
}

.calc-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(13, 110, 110, 0.3);
}

/* ================================
   出馬表テーブル
   ================================ */
.race-table-section {
    background: white;
    border-radius: 8px;
    padding: 0 0 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.race-table-section > .section-title {
    background: linear-gradient(to right, #2537f3, #00c7ff);
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 20px;
}

.race-table-section > .action-bar,
.race-table-section > .guide-message,
.race-table-section > .table-container {
    padding-left: 20px;
    padding-right: 20px;
}

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* スクロールヒント オーバーレイ */
.scroll-hint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    pointer-events: none;
    z-index: 20;
    animation: scrollHintFade 3s ease-out forwards;
}

.scroll-hint-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(37, 55, 243, 0.85);
    color: #fff;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(37, 55, 243, 0.3);
}

.scroll-hint-icon {
    font-size: 20px;
    line-height: 1;
}

.scroll-hint-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: bold;
}

.scroll-hint-arrows .arrow-left {
    animation: scrollHintLeft 0.6s ease-in-out 3;
}

.scroll-hint-arrows .arrow-right {
    animation: scrollHintRight 0.6s ease-in-out 3;
}

@keyframes scrollHintFade {
    0%   { opacity: 1; }
    65%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes scrollHintLeft {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-5px); }
}

@keyframes scrollHintRight {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}

.race-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.race-table th,
.race-table td {
    border: 1px solid #ddd;
    padding: 6px 8px;
    white-space: nowrap;
    text-align: center;
}

.race-table thead th {
    background-color: #f2f2f2;
    font-weight: bold;
    font-size: 12px;
    color: #333;
    position: sticky;
    top: 0;
    z-index: 10;
}

.race-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* 枠番カラー（JRA標準枠色） */
.gate-1 { background-color: #ffffff; color: #333; }
.gate-2 { background-color: #333333; color: white; }
.gate-3 { background-color: #e53935; color: white; }
.gate-4 { background-color: #1565c0; color: white; }
.gate-5 { background-color: #fdd835; color: #333; }
.gate-6 { background-color: #43a047; color: white; }
.gate-7 { background-color: #ff8f00; color: white; }
.gate-8 { background-color: #f48fb1; color: #333; }

/* DB未登録カラム非表示（将来DB拡張で display: table-cell に戻す） */
.col-gate,
.col-info,
.col-weight,
.col-jockey {
    display: none;
}

.col-gate {
    width: 32px;
    min-width: 32px;
    font-weight: bold;
}

.col-number {
    width: 38px;
    min-width: 38px;
    font-weight: bold;
}

.race-table td.col-name {
    text-align: left;
    min-width: 90px;
    font-weight: 600;
    padding-left: 10px;
}

.col-info { width: 50px; }
.col-weight { width: 46px; }
.col-jockey { min-width: 80px; }

.col-ai-index {
    font-weight: bold;
    color: #005ab3;
}

.col-kitaichi-index {
    font-weight: bold;
    color: #2e7d32;
}

.col-oikiri-index {
    font-weight: bold;
    color: #ef6c00;
}

/* 評価セレクト */
.col-eval {
    width: 60px;
}

.eval-select {
    padding: 3px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    background: white;
    text-align: center;
    width: 52px;
}

.eval-select:focus {
    outline: none;
    border-color: #0d6e6e;
    box-shadow: 0 0 0 2px rgba(13, 110, 110, 0.15);
}

.user2-cell .eval-select:focus {
    border-color: #7b1fa2;
    box-shadow: 0 0 0 2px rgba(123, 31, 162, 0.15);
}

/* ユーザー数値入力 */
.col-user-input {
    width: 72px;
}

.user-value-input {
    width: 60px;
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    text-align: right;
}

.user-value-input:focus {
    outline: none;
    border-color: #0d6e6e;
    box-shadow: 0 0 0 2px rgba(13, 110, 110, 0.15);
}

.user2-cell .user-value-input:focus {
    border-color: #7b1fa2;
    box-shadow: 0 0 0 2px rgba(123, 31, 162, 0.15);
}

/* テーブルグループヘッダー（ユーザー予想列のcolspan見出し） */
.col-group-header {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.user1-group-header {
    background-color: #fce4ec !important;
    color: #c62828;
    border-bottom: 2px solid #c62828;
}

.user2-group-header {
    background-color: #f3e5f5 !important;
    color: #7b1fa2;
    border-bottom: 2px solid #7b1fa2;
}

/* ユーザー入力セルの色分けティント */
.user1-cell {
    background-color: rgba(255, 243, 224, 0.35);
}

.user2-cell {
    background-color: rgba(243, 229, 245, 0.35);
}

.rank-1-row .user1-cell,
.rank-2-row .user1-cell,
.rank-3-row .user1-cell {
    background-color: transparent;
}

.rank-1-row .user2-cell,
.rank-2-row .user2-cell,
.rank-3-row .user2-cell {
    background-color: transparent;
}

/* 偏差値・スコアカラム */
.col-ai-t {
    color: #005ab3;
    font-weight: 600;
}

.col-kitaichi-t {
    color: #2e7d32;
    font-weight: 600;
}

.col-oikiri-t {
    color: #ef6c00;
    font-weight: 600;
}

.col-user1-t {
    color: #c62828;
    font-weight: 600;
}

.col-user2-t {
    color: #7b1fa2;
    font-weight: 600;
}

.col-score {
    font-weight: bold;
    font-size: 14px;
    min-width: 72px;
}

/* 順位ハイライト（親サイト準拠） — 枠番セルは枠色を維持 */
.rank-1-row td:not(.col-gate) {
    background-color: #ffe6e6 !important;
}

.rank-2-row td:not(.col-gate) {
    background-color: #fff3e0 !important;
}

.rank-3-row td:not(.col-gate) {
    background-color: #e3f2fd !important;
}

/* スコア未計算時 */
.score-placeholder {
    color: #bbb;
    font-style: italic;
    font-size: 12px;
}

/* ================================
   指数グラフ
   ================================ */
.chart-section {
    background: white;
    border-radius: 8px;
    padding: 0 0 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.chart-section > .section-title {
    background: linear-gradient(to right, #2537f3, #00c7ff);
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 20px;
}

.chart-section > .chart-container {
    padding: 16px 20px 0;
}

/* WP移植時の競合防止: .analytics-app スコープを付与 */
.analytics-app .chart-container {
    position: relative;
    width: 100%;
}

/* ================================
   分析結果サマリー
   ================================ */
.summary-section {
    background: white;
    border-radius: 8px;
    padding: 0 0 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.summary-section > .section-title {
    background: linear-gradient(to right, #2537f3, #00c7ff);
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 20px;
}

.summary-section > .summary-cards,
.summary-section > .share-panel {
    padding-left: 20px;
    padding-right: 20px;
}

.summary-cards {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
}

.summary-card {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    /* D-3: slide-in animation initial state */
    opacity: 0;
    transform: translateX(-30px);
}

.summary-card-info {
    flex: 1;
    min-width: 0;
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-card-radar {
    width: 140px;
    min-width: 140px;
    flex-shrink: 0;
}

.summary-card-1 {
    background: #fff;
    border: 2px solid #daa520;
}

.summary-card-2 {
    background: #fff;
    border: 2px solid #a0a0a0;
}

.summary-card-3 {
    background: #fff;
    border: 2px solid #cd7f32;
}

.summary-rank-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-rank-icon .rank-img {
    width: 56px;
    height: auto;
}

.summary-score {
    font-size: 22px;
    font-weight: bold;
}

.summary-horse-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 4px;
}

.score-val-1 { color: #b8860b; }
.score-val-2 { color: #707070; }
.score-val-3 { color: #a0622e; }


/* B-1: SNSシェアパネル */
.share-panel {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 0;
    border-top: 1px solid #e5e7eb;
}

.share-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.share-x {
    background: #000;
    color: #fff;
}

.share-x:hover {
    background: #333;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ================================
   フッター（WP版では削除 - WPテーマが提供）
   ================================ */

/* ================================
   A-1: 初回ガイダンス
   ================================ */
.guide-message {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #e0f7fa, #e0f2f1);
    border: 1px solid #80cbc4;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #00695c;
    font-weight: 500;
    animation: guideSlideIn 0.5s ease;
}

.guide-message.hidden {
    display: none;
}

@keyframes guideSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================
   A-1: 再計算ボタン パルスアニメーション
   ================================ */
.calc-pulse {
    animation: calcPulse 2s ease-in-out infinite;
}

@keyframes calcPulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0, 90, 179, 0.3); }
    50%      { box-shadow: 0 2px 16px rgba(0, 90, 179, 0.6), 0 0 0 4px rgba(0, 90, 179, 0.15); }
}

/* ================================
   A-2: 計算実行フィードバック (トースト通知)
   ================================ */
.toast {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #0d6e6e;
    color: white;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 200;
    white-space: nowrap;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ボタン計算中状態 */
.calc-button.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ================================
   A-4: リセットボタン
   ================================ */
.calc-button-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}


.reset-button {
    padding: 10px 16px;
    background: #fff;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.reset-button:hover {
    background: #f5f5f5;
    border-color: #999;
    color: #333;
}

/* ================================
   A-5: 総合スコア色分け
   ================================ */

/* ================================
   A-6: CSV出力フィードバック
   ================================ */
.csv-export-button:disabled {
    position: relative;
}

.csv-export-button:disabled:hover::after {
    content: '先に再計算を実行してください';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 50;
}

.csv-export-button.csv-done {
    background: linear-gradient(135deg, #2e7d32, #43a047) !important;
}

/* ================================
   D-1: テーブル行ホバー強化
   ================================ */
.race-table tbody tr {
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.race-table tbody tr:hover {
    background-color: #e0f2f1 !important;
    border-left: 3px solid #0d6e6e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.race-table tbody tr.rank-1-row:hover td:not(.col-gate) { background-color: #ffcdd2 !important; }
.race-table tbody tr.rank-2-row:hover td:not(.col-gate) { background-color: #ffe0b2 !important; }
.race-table tbody tr.rank-3-row:hover td:not(.col-gate) { background-color: #bbdefb !important; }

/* ================================
   D-3: サマリーカード スライドインアニメーション
   ================================ */
.summary-card.slide-in {
    animation: summarySlideIn 0.4s ease forwards;
}

.summary-card.slide-in:nth-child(2) { animation-delay: 0.12s; }
.summary-card.slide-in:nth-child(3) { animation-delay: 0.24s; }

@keyframes summarySlideIn {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}


/* ================================
   A-3: ラベル編集の発見性向上
   ================================ */
.weight-name-edit-wrap .edit-hint {
    font-size: 11px;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.weight-name-edit-wrap:hover .edit-hint {
    opacity: 0.7;
}

.weight-name-input:focus ~ .edit-hint {
    opacity: 0;
}

/* ================================
   B-2: シェアカード（html2canvas キャプチャ用）
   ================================ */
.share-card {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 600px;
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic ProN', sans-serif;
}

.share-card-inner {
    background: linear-gradient(135deg, #0d6e6e 0%, #005ab3 100%);
    border-radius: 16px;
    padding: 28px 24px;
    color: white;
}

.share-card-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.share-card-brand {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.share-card-race {
    font-size: 14px;
    opacity: 0.9;
}

.share-card-body {
    margin-bottom: 16px;
}

.share-card-rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
}

.share-rank-1 {
    background: rgba(255, 215, 0, 0.22);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.share-rank-2 {
    background: rgba(192, 192, 192, 0.18);
}

.share-rank-3 {
    background: rgba(205, 127, 50, 0.15);
}

.share-rank-medal {
    font-size: 28px;
    line-height: 1;
}

.share-rank-name {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.share-rank-score {
    font-size: 24px;
    font-weight: bold;
}

.share-card-footer {
    text-align: center;
    font-size: 11px;
    opacity: 0.6;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* 画像保存ボタン */
.share-image {
    background: linear-gradient(135deg, #0d6e6e, #095555);
    color: #fff;
}

.share-image:hover {
    background: linear-gradient(135deg, #095555, #073e3e);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(13, 110, 110, 0.3);
}


/* ================================
   D-2: ソートアニメーション（FLIP用）
   ================================ */
.race-table tbody tr.flip-animate {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================
   E-1: プリセット評価テンプレート
   ================================ */
.table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.preset-group {
    display: flex;
    gap: 6px;
}

.preset-button {
    padding: 5px 12px;
    background: #fff;
    color: #0d6e6e;
    border: 1px solid #0d6e6e;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.preset-button:hover {
    background: #e0f2f1;
    border-color: #095555;
    color: #095555;
}

.preset-button.preset-clear {
    color: #888;
    border-color: #ccc;
}

.preset-button.preset-clear:hover {
    background: #fafafa;
    border-color: #999;
    color: #555;
}

/* ================================
   F-2: テーブルヘッダーソート
   ================================ */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 16px !important;
}

.sortable:hover {
    background-color: #e8e8e8 !important;
}

.sortable::before {
    content: '\2195';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.3;
    line-height: 1;
}

.sortable.sort-asc::before {
    content: '\25B2';
    opacity: 0.8;
    color: #0d6e6e;
}

.sortable.sort-desc::before {
    content: '\25BC';
    opacity: 0.8;
    color: #0d6e6e;
}


/* ================================
   G-1: 分析パターン保存・比較
   ================================ */
.pattern-section {
    background: white;
    border-radius: 8px;
    padding: 0 0 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.pattern-section > .section-title {
    background: linear-gradient(to right, #2537f3, #00c7ff);
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 20px;
}

.pattern-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 0;
}

.pattern-toolbar .pattern-hint {
    margin: 0;
}

.pattern-section > .pattern-list,
.pattern-section > .pattern-cards {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 16px;
}

.pattern-actions {
    display: flex;
    gap: 8px;
}

.pattern-save-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #0d6e6e, #095555);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.pattern-save-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #095555, #073e3e);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(13, 110, 110, 0.3);
}

.pattern-save-button:disabled {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
}

.pattern-clear-button {
    padding: 6px 12px;
    background: #fff;
    color: #888;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.pattern-clear-button:hover {
    background: #fafafa;
    border-color: #999;
    color: #555;
}

.pattern-hint {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}

.pattern-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pattern-card {
    flex: 1;
    min-width: 200px;
    max-width: 350px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    background: #fafbfc;
    transition: border-color 0.2s;
}

.pattern-card:hover {
    border-color: #0d6e6e;
}

.pattern-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pattern-card-label {
    font-weight: bold;
    font-size: 13px;
    color: #0d6e6e;
}

.pattern-card-meta {
    font-size: 10px;
    color: #999;
}

.pattern-card-weights {
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
}

.pattern-card-top3 {
    font-size: 12px;
    color: #333;
    line-height: 1.6;
}

.pattern-card-top3 .pattern-rank {
    font-weight: 600;
    margin-right: 4px;
}

.pattern-card-delete {
    background: none;
    border: none;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color 0.2s;
}

.pattern-card-delete:hover {
    color: #d32f2f;
}

.pattern-compare-wrap {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}

.pattern-compare-title {
    font-size: 14px;
    font-weight: bold;
    color: #0d6e6e;
    margin-bottom: 8px;
}

.pattern-compare-table-wrap {
    overflow-x: auto;
}

.pattern-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.pattern-compare-table th,
.pattern-compare-table td {
    border: 1px solid #ddd;
    padding: 5px 8px;
    text-align: center;
    white-space: nowrap;
}

.pattern-compare-table thead th {
    background: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
}

.pattern-compare-table .col-name {
    text-align: left;
}

.pattern-compare-best {
    background: #e0f2f1 !important;
    font-weight: bold;
    color: #0d6e6e;
}


/* ================================
   レスポンシブ対応
   ================================ */

/* --- サマリーカード縦並び切替 (≤960px) --- */
@media (max-width: 960px) {
    .summary-cards { flex-direction: column; }
}

/* --- タブレット (≤768px) --- */
@media (max-width: 768px) {
    .header-inner {
        height: auto;
        padding: 10px 12px;
        flex-direction: column;
        gap: 8px;
    }

    .header-brand { width: 100%; }
    .brand-title { font-size: 16px; }

    .header-nav {
        width: 100%;
        justify-content: center;
        gap: 2px;
    }

    .nav-link { font-size: 12px; padding: 6px 10px; }
    .app-main { padding: 10px; }

    .race-selector-section,
    .race-table-section,
    .chart-section,
    .summary-section {
        padding: 0 0 12px;
        border-radius: 6px;
    }

    .race-table-section > .action-bar,
    .race-table-section > .guide-message,
    .race-table-section > .table-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .race-table-section > .subsection-title {
        margin-left: 12px;
    }

    .race-selector-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .selector-group { width: 100%; }
    .selector-group select { flex: 1; min-width: 0; }

    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .action-bar .weight-ratio-display { width: 100%; min-width: 0; }
    .action-buttons { justify-content: center; }

    .calc-button-wrap {
        flex: 1;
    }

    .calc-button {
        width: 100%;
        justify-content: center;
    }

    .reset-button {
        padding: 10px 12px;
    }

    /* テーブル: 縮小 + 補助列非表示 */
    .race-table { font-size: 11px; }
    .race-table th, .race-table td { padding: 3px 3px; }
    .col-info, .col-weight { display: none; }

    .eval-select { width: 42px; font-size: 12px; padding: 2px; }
    .user-value-input { width: 46px; font-size: 11px; padding: 2px 4px; }

    .col-name { min-width: 90px; padding-left: 6px !important; }
    .col-gate { width: 26px; min-width: 26px; }
    .col-number { width: 30px; min-width: 30px; }

    .summary-cards { flex-direction: column; }
    .summary-card-radar { width: 160px; min-width: 160px; }
    .chart-share-bar { flex-direction: column; align-items: stretch; }
    .footer-inner { flex-direction: column; text-align: center; }

    .table-actions { flex-wrap: wrap; }
    .preset-group { width: 100%; }
    .preset-button { flex: 1; text-align: center; }

    /* G-1: パターンカード */
    .pattern-cards { flex-direction: column; }
    .pattern-card { max-width: none; }
    .pattern-actions { flex-wrap: wrap; }
}

/* --- スマートフォン (≤600px) --- */
@media (max-width: 600px) {
    .brand-subtitle { display: none; }

    .section-header-row {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .csv-export-button { width: 100%; justify-content: center; }

    /* テーブル: さらにコンパクト化 + 偏差値列・騎手を非表示 */
    .race-table { font-size: 10px; }
    .race-table th, .race-table td { padding: 2px 2px; }

    .col-jockey { display: none; }
    .col-ai-t { display: none; }
    .col-kitaichi-t { display: none; }
    .col-oikiri-t { display: none; }
    .col-user1-t { display: none; }
    .col-user2-t { display: none; }

    /* 偏差値列非表示に合わせてヘッダーも調整 */
    .race-table thead th[rowspan="2"].col-ai-t,
    .race-table thead th[rowspan="2"].col-kitaichi-t,
    .race-table thead th[rowspan="2"].col-oikiri-t,
    .race-table thead th[rowspan="2"].col-user1-t,
    .race-table thead th[rowspan="2"].col-user2-t {
        display: none;
    }

    /* 入力要素を最小化しつつタッチ可能に保つ */
    .eval-select {
        width: 38px;
        font-size: 14px;
        padding: 3px 1px;
        min-height: 30px;
    }

    .user-value-input {
        width: 42px;
        font-size: 14px;
        padding: 3px 2px;
        min-height: 30px;
    }

    .col-name { min-width: 80px; font-size: 11px; }
    .col-ai-index { font-size: 11px; }
    .col-kitaichi-index { font-size: 11px; }
    .col-oikiri-index { font-size: 11px; }
    .col-score { font-size: 12px; min-width: 52px; }

    /* グループヘッダー縮小 */
    .col-group-header { font-size: 9px; letter-spacing: 0; }

    .summary-card { min-width: 0; }
    .summary-card-radar { width: 140px; min-width: 140px; }
    .summary-score { font-size: 18px; }
    .summary-horse-name { font-size: 14px; }

    .table-actions { flex-direction: column; align-items: stretch; gap: 6px; }
    .share-panel { flex-direction: column; align-items: stretch; }
    .share-button { justify-content: center; }

    /* F-2: ソートアイコン縮小 */
    .sortable { padding-right: 12px !important; }
    .sortable::before { font-size: 8px; }

    /* G-1: パターン比較テーブル縮小 */
    .pattern-compare-table { font-size: 10px; }
    .pattern-compare-table th,
    .pattern-compare-table td { padding: 3px 4px; }
}

/* --- 極小画面 (≤420px) --- */
@media (max-width: 420px) {
    .race-table { font-size: 9px; }
    .race-table th, .race-table td { padding: 2px 1px; }

    .col-name { min-width: 68px; font-size: 10px; padding-left: 3px !important; }
    .col-gate { width: 22px; min-width: 22px; font-size: 10px; }
    .col-number { width: 24px; min-width: 24px; font-size: 10px; }

    .eval-select { width: 34px; font-size: 13px; }
    .user-value-input { width: 38px; font-size: 12px; }

    .col-group-header { font-size: 8px; padding: 2px 1px !important; }
    .col-score { font-size: 11px; min-width: 44px; }
}

/* ======================================================
   モバイル版専用スタイル (.mobile-app スコープ)
   mobile.html で使用。デスクトップ版には影響なし。
   ====================================================== */

/* --- ヘッダー簡略化（WP版では不要 - WPテーマが提供） --- */

/* --- メインコンテンツ --- */
.mobile-app .app-main {
    padding: 8px;
}

/* --- セクション共通 --- */
.mobile-app .race-selector-section,
.mobile-app .race-table-section,
.mobile-app .chart-section,
.mobile-app .summary-section,
.mobile-app .pattern-section {
    border-radius: 6px;
    margin-bottom: 10px;
}

.mobile-app .section-title {
    font-size: 13px;
    padding: 8px 12px;
}

/* --- レース選択 --- */
.mobile-app .race-selector-section .race-selector-controls {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.mobile-app .selector-group {
    width: 100%;
}

.mobile-app .selector-group select {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 出馬表セクション --- */
.mobile-app .race-table-section {
    padding: 0 0 8px;
}

.mobile-app .race-table-section > .guide-message {
    padding-left: 8px;
    padding-right: 8px;
}

.mobile-app .race-table-section > .table-container {
    padding-left: 0;
    padding-right: 0;
}

.mobile-app .race-table-section > .subsection-title {
    margin-left: 8px;
}

.mobile-app .guide-message {
    font-size: 12px;
    padding: 8px;
    margin: 8px;
}

/* --- モバイル用ウェイトパネル --- */
.mobile-weight-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-stepper-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.mobile-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.mobile-stepper-label {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.mobile-app .weight-stepper {
    margin-top: 0;
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr 1fr;
    gap: 0;
}

.mobile-app .weight-stepper .stepper-value {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 28px;
    height: auto;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: none;
    border-right: none;
}

.mobile-app .weight-stepper .stepper-plus {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    border-bottom: 1px solid #d0d0d0;
}

.mobile-app .weight-stepper .stepper-minus {
    grid-column: 2;
    grid-row: 2;
    order: 1;
}

.mobile-app .stepper-btn {
    width: 22px;
    height: 18px;
    font-size: 13px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

/* --- モバイル用比率バー --- */
.mobile-app .ratio-bar {
    height: 24px;
    border-radius: 4px;
}

.mobile-app .ratio-bar span {
    font-size: 9px;
}

/* --- モバイル用アクションボタン --- */
.mobile-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mobile-action-buttons .calc-button {
    flex: 1 1 100%;
    justify-content: center;
    padding: 10px 12px;
    font-size: 14px;
}

.mobile-action-buttons .reset-button,
.mobile-action-buttons .preset-button,
.mobile-action-buttons .csv-export-button {
    flex: 1;
    font-size: 11px;
    padding: 6px 8px;
    text-align: center;
    justify-content: center;
}

/* --- テーブル（横スクロール + 固定列） --- */
.mobile-app .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-app .race-table {
    font-size: 10px;
}

.mobile-app .race-table th,
.mobile-app .race-table td {
    padding: 3px 2px;
}

/* 馬番+馬名 を左に固定（col-gate は非表示のため除外） */
.mobile-app .col-number {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 26px;
    min-width: 26px;
}

.mobile-app .col-name {
    position: sticky;
    left: 26px;
    z-index: 3;
    min-width: 80px;
    font-size: 11px;
    padding-left: 4px !important;
}

/* thead の固定列は z-index を一般thead(10)より上に設定 */
.mobile-app thead th.col-number,
.mobile-app thead th.col-name {
    z-index: 11;
}

/* thead全体の背景（透過防止） */
.mobile-app .race-table thead th {
    background-color: #f8fafc;
    font-size: 11px;
}

/* tbody固定列の背景（透過防止: inheritではなく明示指定） */
.mobile-app .race-table tbody td.col-number,
.mobile-app .race-table tbody td.col-name {
    background-color: #fff;
}

.mobile-app .race-table tbody tr:nth-child(even) td.col-number,
.mobile-app .race-table tbody tr:nth-child(even) td.col-name {
    background-color: #f9f9f9;
}

.mobile-app .race-table tbody tr {
    background-color: #fff;
}

.mobile-app .race-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* 固定列に右影をつけてスクロール範囲を視覚化 */
.mobile-app .col-name {
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}

/* 総合スコア列 */
.mobile-app .col-score {
    min-width: 48px;
    font-size: 11px;
}

/* 不要列の非表示 */
.mobile-app .col-info,
.mobile-app .col-weight,
.mobile-app .col-jockey {
    display: none;
}

/* T-score 列を非表示 */
.mobile-app .col-ai-t,
.mobile-app .col-kitaichi-t,
.mobile-app .col-oikiri-t,
.mobile-app .col-user1-t,
.mobile-app .col-user2-t {
    display: none;
}

/* ユーザー予想列の縮小 */
.mobile-app .eval-select {
    width: 38px;
    font-size: 13px;
    padding: 2px;
}

.mobile-app .user-value-input {
    width: 40px;
    font-size: 11px;
    padding: 2px 3px;
}

.mobile-app .col-group-header {
    font-size: 11px;
    padding: 2px !important;
}

/* グループヘッダーのユーザー名入力 */
.mobile-app .weight-name-input {
    font-size: 11px;
    width: 70px;
}

/* AI指数列 */
.mobile-app .col-ai-index,
.mobile-app .col-kitaichi-index,
.mobile-app .col-oikiri-index {
    font-size: 10px;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center;
}



/* スコアバー */
.mobile-app .score-bar {
    min-width: 40px;
}

/* --- グラフ --- */
.mobile-app .chart-section {
    padding: 0 0 8px;
    overflow: hidden;
}

.mobile-app .chart-container {
    padding: 0 8px;
}

/* --- サマリーカード --- */
.mobile-app .summary-section {
    padding: 0 0 8px;
    overflow: hidden;
}

.mobile-app .summary-cards {
    flex-direction: column;
    padding: 0 10px;
    gap: 10px;
}

.mobile-app .summary-card {
    min-width: 0;
}

.mobile-app .summary-card-radar {
    width: 150px;
    min-width: 150px;
}

.mobile-app .summary-rank-icon .rank-img {
    width: 44px;
}

.mobile-app .summary-horse-name {
    font-size: 14px;
}

.mobile-app .summary-score {
    font-size: 18px;
}

/* --- シェアパネル --- */
.mobile-app .share-panel {
    flex-direction: column;
    align-items: stretch;
    padding: 0 10px;
}

.mobile-app .share-button {
    justify-content: center;
    font-size: 12px;
    padding: 10px;
}


/* --- パターンセクション --- */
.mobile-app .pattern-section {
    padding: 0 0 10px;
}

.mobile-app .pattern-toolbar {
    padding: 10px 12px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.mobile-app .pattern-cards {
    flex-direction: column;
    padding-left: 12px;
    padding-right: 12px;
}

.mobile-app .pattern-card {
    max-width: none;
}

.mobile-app .pattern-hint {
    font-size: 11px;
}

.mobile-app .pattern-compare-wrap {
    padding-left: 12px;
    padding-right: 12px;
}

/* --- フッター（WP版では不要 - WPテーマが提供） --- */

/* ================================
   軸チェックボックスバー（テーブル上部）
   ================================ */
.axis-toggle-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    background: #f8fafa;
    border: 1px solid #d0e0e0;
    border-radius: 6px;
    font-size: 13px;
}

.axis-toggle-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.axis-checkbox {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: #0d6e6e;
}

.axis-toggle-label {
    font-weight: 600;
    color: #555;
    margin-right: 4px;
    padding-right: 12px;
    border-right: 1px solid #bbb;
}

/* チェックOFF時のヘッダー＋セルの視覚フィードバック */
th.axis-disabled,
td.axis-disabled {
    opacity: 0.35;
    background-color: #f0f0f0 !important;
}

/* ステッパー無効化時 */
.weight-stepper.stepper-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.stepper-disabled .stepper-btn {
    cursor: not-allowed;
}

.stepper-disabled .stepper-value {
    color: #999;
}

/* モバイル版: チェックボックスバー */
/* ラベルがbar内にある構造（PC版HTML / WP版）でも正しく改行する */
.mobile-app .axis-toggle-label {
    display: block;
    width: 100%;
    flex-basis: 100%;
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 2px;
}

.mobile-app .axis-toggle-bar {
    gap: 6px 10px;
    padding: 6px 8px;
    font-size: 11px;
    flex-wrap: wrap;
}

.mobile-app .axis-checkbox {
    width: 16px;
    height: 16px;
}

/* モバイル版: チェックボックスラベル短縮はJSのapplyMobileClass()で実施 */

/* === グラフ内シェア・保存ボタン === */
.chart-share-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
}

.chart-share-x-btn {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 4px;
}

.chart-share-x-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.mobile-app .chart-share-bar {
    justify-content: center;
}

.mobile-app .chart-share-x-btn {
    width: 100%;
    justify-content: center;
}