/* スケール分析ページ専用スタイル */

/* ユーティリティ（インラインstyle代替） */
.scale-hidden       { display: none !important; }

.analysis-section   { margin-top: 1.5rem; }

/* 詳細分析ページ共通: ヘッダーのモード切替ボタン
   scale-analysis / premium-analysis 両ページで使用 */
.analysis-page-header {
    justify-content: space-between !important;
    flex-wrap: nowrap;
}
.analysis-switch-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.analysis-switch-btn:hover {
    background: rgba(168, 85, 247, 0.25);
    transform: translateX(2px);
}
.analysis-switch-btn:active { background: rgba(168, 85, 247, 0.35); }
.analysis-switch-btn:hover .analysis-switch-arrow { transform: translateX(2px); }
.analysis-switch-arrow { transition: transform 0.15s; }

@media (max-width: 640px) {
    .analysis-switch-btn {
        padding: 8px 12px;
        font-size: 0.9em;
        gap: 6px;
    }
    /* モバイルでは先頭アイコンを省略し、ラベル＋矢印のみ表示 */
    /* Lucideが<i>を<svg>に置換するためタグ非依存セレクタを使用 */
    .analysis-switch-btn > *:first-child { display: none; }
}
@media (max-width: 400px) {
    /* 超小型画面では「へ」を省略して幅を節約 */
    .analysis-switch-verb { display: none; }
}

/* データ0件時のメッセージカード: analysis-section と同じ間隔 */
#scale-analysis-nodata { margin-top: 1.5rem; }

.scale-analysis-loading { min-height: 50vh; }

.icon-lg-48         { width: 48px; height: 48px; }
.page-header-lucide { width: 36px; height: 36px; }
.scale-nodata-text  { margin-top: 12px; }

/* モードバー */
.scale-mode-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-top: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
}

.scale-mode-bar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    min-width: 0;          /* ラベルがflexで潰れてはみ出すのを防ぐ */
}

#scale-mode-switch-btn {
    width: auto;           /* .btn-sub-direction の width:100% を打ち消す */
    flex-shrink: 0;        /* ラベルが長くてもボタンを縮めない */
    padding: 6px 14px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Lucide アイコンサイズ用 utility (インラインstyle代替) */
.btn-icon-18 { width: 18px; height: 18px; }
.btn-icon-16 { width: 16px; height: 16px; }

/* セクション共通: 見出し余白 */
.scale-section-heading { margin-bottom: 1rem; }

/* Section 1: 総合サマリー */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 640px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
}
.summary-item {
    text-align: center;
    padding: 12px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}
.summary-label {
    font-size: 0.8em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 6px;
}
.summary-value {
    font-size: 1.6em;
    font-weight: 700;
    color: white;
}
/* グレード色: records.css:469-497 の統一基準（Tailwind -300 シェード）に合わせる */
.summary-grade-s { color: #fcd34d; }  /* yellow-300 */
.summary-grade-a { color: #d1d5db; }  /* gray-300 */
.summary-grade-b { color: #fdba74; }  /* orange-300 */
.summary-grade-c { color: #86efac; }  /* green-300 */
.summary-grade-d { color: #93c5fd; }  /* blue-300 */
.summary-grade-e { color: #fca5a5; }  /* red-300 */

/* セクション共通 (狭い版 + キャプション) */
.scale-section-heading-tight { margin-bottom: 0.5rem; }
.scale-section-caption {
    font-size: 0.85em;
    margin-bottom: 1rem;
}
.scale-notice-mt { margin-top: 12px; }
.btn-icon-14 { width: 14px; height: 14px; }

/* Section 2: 変化音精度 */
.keynote-block {
    margin-bottom: 1.25rem;
}
.keynote-block:last-child { margin-bottom: 0; }

.keynote-block-title {
    font-size: 1em;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.keynote-row {
    display: grid;
    grid-template-columns: 100px 40px 1fr 70px 60px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    font-size: 0.9em;
    color: rgba(255,255,255,0.85);
}
@media (max-width: 640px) {
    .keynote-row {
        grid-template-columns: 40px 26px 1fr 60px 50px;
        gap: 4px;
        font-size: 0.85em;
    }
}

.keynote-scale-name { font-weight: 600; }
.scale-name-short   { display: none; }
@media (max-width: 640px) {
    .scale-name-full  { display: none; }
    .scale-name-short { display: inline; }
}
.keynote-note-label { text-align: center; }

/* 双方向バー（中央起点、左=フラット/右=シャープ） */
.keynote-bias-track {
    position: relative;
    height: 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 5px;
}
.keynote-bias-center {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: rgba(255,255,255,0.4);
    z-index: 1;
}
.keynote-bias-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease;
}
.keynote-bias-fill--sharp    { background: #f59e0b; }  /* オレンジ */
.keynote-bias-fill--flat     { background: #3b82f6; }  /* 青 */
.keynote-bias-fill--overflow { opacity: 0.85; }
/* 中央起点（50%）からの左右伸び。インライン left/right: 50% の代替 */
.keynote-bias-fill--origin-left  { left: 50%; }
.keynote-bias-fill--origin-right { right: 50%; }

/* 振り切り矢印（1半音以上ズレ） */
.keynote-bias-overflow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #f87171;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}
.keynote-bias-overflow--left  { left: 2px; }
.keynote-bias-overflow--right { right: 2px; }

.keynote-error-value           { text-align: right; font-variant-numeric: tabular-nums; }
.keynote-error-value--overflow { color: #f87171; font-weight: 700; }
.keynote-flat-marker           { color: #fbbf24; font-weight: 700; text-align: center; }
.keynote-empty                 { color: rgba(255,255,255,0.4); font-style: italic; }

/* 変化音の精度: 見方の詳細（折りたたみ） */
.scale-help-details {
    margin-bottom: 1rem;
    font-size: 0.85em;
}
.scale-help-summary {
    cursor: pointer;
    color: rgba(168, 85, 247, 0.9);
    padding: 4px 0;
    user-select: none;
}
.scale-help-summary:hover { color: rgba(168, 85, 247, 1); }
.scale-help-list {
    margin: 8px 0 0 0;
    padding: 10px 14px;
    list-style: none;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
}
.scale-help-list li + li { margin-top: 4px; }
.scale-help-tag {
    display: inline-block;
    min-width: 2.5em;
    padding: 1px 8px;
    margin-right: 6px;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
    font-size: 0.85em;
}
.scale-help-tag--flat     { background: #3b82f6; color: white; }
.scale-help-tag--sharp    { background: #f59e0b; color: white; }
.scale-help-tag--overflow { background: transparent; color: #f87171; min-width: auto; padding: 1px 2px; }
.scale-help-tag--flatmark { background: transparent; color: #fbbf24; min-width: auto; padding: 1px 2px; }

/* Section 3: スケール別グレードカード */
.scale-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 640px) {
    .scale-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
.scale-card {
    text-align: center;
    padding: 14px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
}
.scale-card-name {
    font-weight: 700;
    color: white;
    font-size: 0.95em;
    margin-bottom: 4px;
}
.scale-card-brain {
    font-size: 0.75em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
}
.scale-card-grade {
    font-size: 2em;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
}
.scale-card-avg {
    font-size: 0.8em;
    color: rgba(255,255,255,0.6);
}

/* Section 4: 精度の推移 */
.trend-canvas-wrapper {
    position: relative;
    height: 260px;
}
.trend-empty-pad { padding: 1rem; }