/* results.css - 統合評価ページ専用スタイル */

/* results.cssではコンテナ定義を削除（base.cssの定義を使用） */

/* セッション評価・総合評価表示時は準備用glass-cardを非表示 */
/* :has()セレクター（Safari 15.4+対応） */
.narrow-main:has(#session-result-section:not(.hidden)) > .glass-card,
.narrow-main:has(#final-result-section:not(.hidden)) > .glass-card {
    display: none;
}

/* rank-sectionのshare-cardスタイルは維持（削除不要） */

/* ランク説明ポップオーバー - 画面中央配置 */
.rank-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 200001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.rank-popover.show {
    opacity: 1;
    visibility: visible;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.rank-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.rank-item:last-child {
    margin-bottom: 0;
}

/* ポップオーバー閉じるボタン */
.popover-close-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
}

.popover-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

/* ポップオーバータイトル */
.popover-title {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
    padding: 0;
}

/* ランク項目のテキスト */
.rank-name {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.9rem;
}

.rank-description {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin-top: 4px;
    line-height: 1.4;
}

.rank-range {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* ポップオーバー注記 */
.popover-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ポップオーバー区切り線 */
.popover-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0.75rem 0;
}

/* グレードバッジ */
.rank-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.rank-badge-s {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a1a;
}

.rank-badge-a {
    background: linear-gradient(135deg, #51cf66, #37b24d);
    color: #ffffff;
}

.rank-badge-b {
    background: linear-gradient(135deg, #4c6ef5, #3b5bdb);
    color: #ffffff;
}

.rank-badge-c {
    background: linear-gradient(135deg, #ff6b6b, #fa5252);
    color: #ffffff;
}

.rank-badge-d {
    background: linear-gradient(135deg, #ff8787, #ff6b6b);
    color: #ffffff;
}

.rank-badge-e {
    background: linear-gradient(135deg, #868e96, #495057);
    color: #ffffff;
}

/* ？アイコン - 透明スタイル */
.rank-info-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.2s ease;
}

.rank-info-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1);
}

/* ヘルプボタン位置調整 */
.help-btn-position {
    position: absolute;
    bottom: -12px;
    right: -16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ランク名スタイル */
.rank-name {
    font-weight: 500;
    font-size: 0.875rem;
}

.rank-name-excellent {
    color: #fcd34d;
}

.rank-name-good {
    color: #86efac;
}

.rank-name-pass {
    color: #7dd3fc;
}

.rank-name-practice {
    color: #fca5a5;
}

.rank-range {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

/* 音別結果アイテム */
.note-result-item {
    background: var(--glass-bg);
    /* backdrop-filter削除: 親.glass-cardと重複してiPadで白化するため */
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.note-result-item:hover {
    background: var(--glass-hover);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px);
}

/* 800¢超の測定エラー用スタイル */
.note-result-item.error-outlier {
    background: rgba(245, 158, 11, 0.1);  /* warning-alertと同じamber背景 */
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.note-result-item.error-outlier:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
}

/* 無効データ（無音等）用スタイル */
.note-result-item.error-invalid {
    background: rgba(156, 163, 175, 0.1);  /* gray背景 */
    border: 1px solid rgba(156, 163, 175, 0.2);
    opacity: 0.7;
}

.note-result-item.error-invalid:hover {
    background: rgba(156, 163, 175, 0.15);
    border-color: rgba(156, 163, 175, 0.3);
}

/* note-result-item内のテキストスタイル - margin-bottomを0に */
.note-result-item .text-body,
.note-result-item .text-pitch-deviation-plus,
.note-result-item .text-pitch-deviation-minus,
.note-result-item .text-sub-title {
    margin-bottom: 0;
}

/* カウントテキスト */
.count-text {
    min-width: 20px;
    text-align: right;
}

/* Share Card CSS（反射エフェクト付き） */
.share-card {
    position: relative;
    overflow: hidden;
}

.share-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer 11s infinite;
}

@keyframes shimmer {
    0% { 
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 1;
    }
    9.1% { 
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 1;
    }
    9.2% { 
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 0;
    }
    99.9% { 
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 0;
    }
    100% { 
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 1;
    }
}

/* ========================================
   総合評価ナビ（ページヘッダー統合型）
   ホームの .menu-toggle / .header-nav と同じパターン
   ======================================== */

/* デフォルト非表示（総合評価セクション時のみJSで表示） */
.final-nav-toggle,
.final-nav-icons {
    display: none;
}

/* ページヘッダーにナビ表示時のレイアウト調整 */
.page-header.has-final-nav {
    justify-content: space-between;
    max-width: 700px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: 0;
}

/* iPhone: ハンバーガーボタン（ホームの.menu-toggleと同じスタイル） */
.page-header.has-final-nav .final-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s ease;
}
.final-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* iPhone: ハンバーガーメニュー展開（グラスモーフィズム） */
.final-nav-menu {
    display: none;
    position: absolute;
    top: calc(100% - 1.25rem);
    right: 0;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 10px;
    flex-direction: column;
    gap: 6px;
    min-width: 190px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.final-nav-menu.active {
    display: flex;
}
.final-nav-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease;
}
.final-nav-menu-item [data-lucide] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.85;
}
.final-nav-menu-item:hover,
.final-nav-menu-item:active {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.3);
}

/* PC/iPad (≥768px): ハンバーガー非表示、アイコン横並び表示 */
@media (min-width: 768px) {
    .page-header.has-final-nav .final-nav-toggle {
        display: none;
    }
    .page-header.has-final-nav .final-nav-icons {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-shrink: 0;
    }
    .final-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        padding: 6px 10px;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s;
    }
    .final-nav-btn [data-lucide] {
        width: 32px;
        height: 32px;
    }
    .final-nav-btn:hover,
    .final-nav-btn:active {
        color: rgba(255, 255, 255, 1);
    }
    .final-nav-btn span {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.02em;
    }
    .final-nav-menu {
        display: none !important;
    }
}

/* ========================================
   フローティングナビ（スクロールでヘッダー非表示時）
   全デバイス共通: ハンバーガーボタン + ドロップダウンメニュー
   ======================================== */

/* デフォルト非表示（JSで .visible を付与） */
.final-nav-fab {
    display: none;
    position: fixed;
    top: 12px;
    left: 0;
    right: 0;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    z-index: 1000;
    justify-content: flex-end;
}
.final-nav-fab.visible {
    display: flex;
}

/* フローティングハンバーガーボタン（ヘッダーの.final-nav-toggleと同じスタイル） */
.final-nav-fab-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease;
    position: relative;
}
.final-nav-fab-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* フローティングメニュー（ヘッダー内メニューと同じグラスデザイン） */
.final-nav-fab-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 10px;
    flex-direction: column;
    gap: 6px;
    min-width: 190px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.final-nav-fab-menu.active {
    display: flex;
}
/* メニュー項目は .final-nav-menu-item を共有 */

/* rank-sectionスタイル（新横一列レイアウト） */
.rank-section {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rank-mode {
    margin-bottom: 24px;
}

.rank-section .mode-title {
    font-size: 1.6rem !important;
    font-weight: 700;
    color: white;
    margin: 0;
}

.rank-content-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.rank-icon {
    flex-shrink: 0;
}

.rank-stats-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.rank-stat-item {
    text-align: center;
}

.stat-value-rank {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    transition: transform 0.2s ease;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.stat-value-rank.grade-value {
    font-size: 2.0rem;
    color: #ffffff; /* グレードは白色 */
}

.stat-value-rank.avg-error {
    color: #fbbf24; /* 平均誤差もグレードと同じ黄色 */
}

.stat-label-rank {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
    text-align: center;
}

.rank-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem;
}

.rank-circle-icon {
    width: 64px;
    height: 64px;
}

@media (max-width: 768px) {
    .rank-content-row {
        gap: 20px;
    }
    
    .rank-stats-row {
        gap: 20px;
    }
    
    .rank-circle {
        width: 90px;
        height: 90px;
    }
    
    .rank-circle-icon {
        width: 54px !important;
        height: 54px !important;
    }
    
    .stat-value-rank {
        font-size: 1.5rem;
    }
    
    .stat-value-rank.grade-value {
        font-size: 2rem;
    }

    .label-desktop {
        display: none;
    }

    .label-mobile {
        display: inline;
    }
}

.label-mobile {
    display: none;
}

/* 機能比較テーブル */
.comparison-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.comparison-table {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.comparison-header-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    background: rgba(255, 255, 255, 0.05);
}

.comparison-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-row-last {
    border-bottom: none;
}

.comparison-cell {
    padding: 1rem;
}

.comparison-feature-header {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-plan-header {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.comparison-feature {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.comparison-value {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-value:last-child {
    border-right: none;
}

.plan-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.plan-header h4 {
    color: white;
    font-weight: 600;
    margin: 0;
}

/* アイコン+テキストのヘッダー（モバイル対応） */
.plan-header-icon-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: white;
}

.plan-label {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.comparison-header h4 {
    color: white;
    font-weight: 600;
    margin: 0;
}

/* 総合グレード表示 */
.grade-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.grade-icon-container {
    margin-bottom: 1.5rem;
}

.grade-text {
    margin-bottom: 2rem;
}

.grade-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.grade-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
}

.grade-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .grade-stats {
        flex-direction: row;
        gap: 3rem;
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.stat-value-avg-error {
    color: #22c55e;
}

.stat-value-session-count {
    color: #3b82f6;
}

/* 詳細分析ナビゲーション */
.analysis-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.analysis-title {
    font-weight: 600;
    color: white;
    font-size: 1.125rem;
}

/* 音程結果グリッド */
.note-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .note-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.note-result-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.note-name {
    font-weight: 600;
    color: white;
}

.note-result-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.note-error {
    font-size: 1.25rem;
    font-weight: 700;
}

.note-error.excellent {
    color: #fbbf24;
}

.note-error.good {
    color: #22c55e;
}

.note-frequencies {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.freq-target, .freq-actual {
    color: rgba(255, 255, 255, 0.6);
}

/* セッション概要3列グリッド（レスポンシブ対応） */
.score-section {
    padding-bottom: 1.5rem;
}

.score-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    min-height: 80px;
}

/* PC (768px以上) */
@media (min-width: 768px) {
    .score-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "left center right";
        align-items: end;
        gap: 2rem;
        max-width: 800px;
        margin: 0 auto;
    }

    .base-note-section {
        grid-area: left;
        justify-self: center;
    }

    .trophy-section {
        grid-area: center;
    }

    .error-section {
        grid-area: right;
        justify-self: center;
    }

    .score-base-note {
        font-size: 2.5rem; /* 40px */
    }

    .score-average {
        font-size: 2.5rem; /* 40px */
    }

    /* ラベルフォントを大きく */
    .base-note-section p {
        font-size: 1.125rem; /* 18px */
    }

    .error-section p {
        font-size: 1.125rem; /* 18px */
    }
}

/* セッショングリッドシステム */
.sessions-grid-8 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));  /* 横幅に応じて自動折り返し */
    gap: 0.75rem;
}

.sessions-grid-12 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));  /* 横幅に応じて自動折り返し */
    gap: 0.75rem;
}

.sessions-grid-24 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    gap: 0.5rem;
}

@media (max-width: 767px) {
    .sessions-grid-8 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .sessions-grid-12 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .sessions-grid-24 {
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    }
}

.session-box {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.75rem;
    padding: 0.5rem;
}

.session-box.selected {
    filter: brightness(1.8);
    transform: scale(1.05);
}

.session-number {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

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

.session-excellent {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.session-good {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.session-pass {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.session-practice {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* 詳細分析結果リスト */
.detailed-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.result-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    gap: 1rem;
}

.note-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.note-interval {
    font-weight: 600;
    color: white;
}

.note-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.target-freq, .actual-freq {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
}

.target-value, .actual-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

.error-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.error-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

.text-yellow-400 {
    color: #fbbf24;
}

/* ランダム基音モード見出し中央寄せ */
.rank-mode {
    text-align: center;
    margin-bottom: 24px;
}

.mode-title {
    text-align: center;
    font-size: 1.6rem !important;
    font-weight: 700;
    color: white;
    margin: 0;
}

/* ランク表示セクション用スタイル */
.rank-content-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* premium-analysis: stats row以降の間隔を揃える（gap:16px + margin:8px = 24px） */
.rank-achievement-message {
    margin-top: 8px;
}

#accuracy-next-goal {
    margin-top: 8px;
}

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

.rank-stats-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.rank-stats-4col {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

.rank-stat-item {
    text-align: center;
}

.stat-value-rank {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    transition: transform 0.2s ease;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.stat-label-rank {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
    text-align: center;
}
.stat-sub-count {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
    white-space: nowrap;
}

/* シェアボタンスタイル */
.share-buttons {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.share-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.share-btn svg {
    width: 24px;
    height: 24px;
    z-index: 1;
}

.share-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
}

.share-btn.twitter:hover {
    box-shadow: 0 8px 25px rgba(29, 161, 242, 0.4), 0 0 30px rgba(29, 161, 242, 0.3);
}

.share-btn.line:hover {
    box-shadow: 0 8px 25px rgba(0, 195, 0, 0.4), 0 0 30px rgba(0, 195, 0, 0.3);
}

.share-btn.facebook:hover {
    box-shadow: 0 8px 25px rgba(24, 119, 242, 0.4), 0 0 30px rgba(24, 119, 242, 0.3);
}

.share-btn.copy:hover {
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4), 0 0 30px rgba(139, 92, 246, 0.3);
}

/* コピー成功アニメーション */
.share-btn.copy.copied {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    transform: translateY(-3px) scale(1.1);
}

.share-btn.copy.copied svg {
    display: none;
}

.share-btn.copy.copied::after {
    content: "✓";
    font-size: 20px;
    font-weight: bold;
}

/* 統計カードシステム */
.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.stat-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.stat-icon svg {
    width: 32px;
    height: 32px;
}

.stat-value-grade {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 共有カードシステム - glass-cardと同じスタイルに統一 */
.share-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}

/* モバイル時のシェアテキスト調整 */
@media (max-width: 768px) {
  .rank-share-section .heading-md span {
    font-size: 1rem;
  }

  .detail-analysis-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .detail-analysis-title .dash-separator {
    display: none;
  }

  /* モバイル時のランク表示レイアウト調整 */
  .rank-display-grid {
    grid-template-areas: 
      "center center"
      "left right" !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem 2rem !important;
  }
}

/* ==========================================================================
   JavaScript動的生成用スタイル（モバイル対応）
   ========================================================================== */

/* スコアセクション（JavaScript生成用） */
.score-section {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ランク表示グリッド（JavaScript生成用） */
.rank-display-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'left center right';
  align-items: end;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

/* グリッドアイテム（JavaScript生成用） */
.rank-grid-left {
  grid-area: left;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rank-grid-center {
  grid-area: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-end;
}

.rank-grid-right {
  grid-area: right;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* UI要素（JavaScript生成用） */
.accuracy-badge-container {
  position: relative;
}

.help-icon-btn-positioned {
  color: white;
  right: -16px;
  z-index: 10;
  pointer-events: auto;
}

.eval-count-text {
  min-width: 20px;
  text-align: right;
}

.rank-achievement-message {
    margin-bottom: 2rem;
}

.rank-achievement-message h3 {
    margin-bottom: 0.5rem;
}

/* シェアボタンスタイル改善 */
.share-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

.share-btn span {
    display: none;
}

.share-btn-twitter {
    background: linear-gradient(135deg, #1da1f2, #1a8cd8);
}

.share-btn-line {
    background: linear-gradient(135deg, #00c300, #00a000);
}

.share-btn-facebook {
    background: linear-gradient(135deg, #1877f2, #145dbf);
}

.share-btn-copy {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

/* モバイル対応 */
@media (max-width: 640px) {
    .share-btn {
        width: 48px;
        height: 48px;
    }
    
    .share-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ランク取得メッセージの下マージン調整 */
.rank-achievement-message {
    margin-bottom: 0;
}

/* rank-content-rowの下の横線 */
.rank-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 32px 0 24px 0;
}

/* シェアセクション */
.rank-share-section {
    text-align: center;
    margin-bottom: 0;
}

.rank-share-section h3 {
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.rank-share-section .share-buttons {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* フィードバックモーダル追加スタイル */
.feedback-description {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.feedback-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* 総合評価グレードアイコンシステム */
.rank-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rank-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* グレード別背景色 */
.rank-circle-s {
    background: linear-gradient(135deg, #fbbf24, #d97706);
}

.rank-circle-a {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
}

.rank-circle-b {
    background: linear-gradient(135deg, #fdba74, #ea580c);
}

.rank-circle-c {
    background: linear-gradient(135deg, #6ee7b7, #059669);
}

.rank-circle-d {
    background: linear-gradient(135deg, #7dd3fc, #0369a1);
}

.rank-circle-e {
    background: linear-gradient(135deg, #fca5a5, #dc2626);
}

/* ==========================================================================
   セッション管理コンポーネント統合スタイル（ui-catalog-results.htmlから移植）
   ========================================================================== */

/* セッションボックス基本スタイル */
.session-box {
    aspect-ratio: 1;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.75rem;
    padding: 0.5rem;
    color: white;
    font-weight: 600;
}

.session-box:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.session-number {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

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

.session-icon i {
    width: 16px;
    height: 16px;
}

/* 評価レベル別スタイル（正しい透明度版） */
.session-excellent {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.2));
    border-color: rgba(251, 191, 36, 0.4);
}

.session-good {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.4);
}

.session-pass {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.4);
}

.session-practice {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.2));
    border-color: rgba(239, 68, 68, 0.4);
}

/* ==================================================
   外れ値通知UI（セッション結果・総合評価共通）
   ================================================== */

/* 外れ値通知（score-gridの下） */
#outlier-notice {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* 無音通知 - セッション評価ページ用 */
#silent-notice {
    margin-top: 20px;
    margin-bottom: 0;
}

/* 外れ値説明セクション - warning-alertスタイル使用 */
#outlier-explanation-container .warning-alert,
#outlier-explanation-overview-container .warning-alert {
    /* warning-alertの基本スタイルを継承 */
}

/* 外れ値説明セクション内のテキストスタイル調整 */
#outlier-explanation-container .warning-alert p,
#outlier-explanation-overview-container .warning-alert p {
    line-height: 1.6;
}

#outlier-explanation-container .warning-alert strong,
#outlier-explanation-overview-container .warning-alert strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* ==================================================
   誤差推移チャート（総合評価ページ）
   ================================================== */

/* 誤差推移チャートラッパー（ローディングオーバーレイ用） */
/* 注: premium-analysis.cssの.chart-wrapperと衝突を避けるため別名 */
.error-trend-wrapper {
    position: relative;
    min-height: 200px;
}

/* チャートコンテナ（高さはインラインstyleで指定済み、base.cssのデフォルトを継承） */

/* チャートローディングオーバーレイ */
.chart-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* チャートエラーメッセージ */
.chart-error-message {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.chart-error-message p {
    margin: 0;
    font-size: 0.9rem;
}

.chart-error-message p:last-child {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* 音程間隔別精度リスト */
#interval-accuracy-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.interval-accuracy-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.interval-accuracy-row--weakness {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.interval-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    min-width: 6rem;
}

.interval-direction {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 7rem;
}

.direction-indicator {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    width: 1rem;
}

.interval-direction .accuracy-value {
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 3.5rem;
    color: rgba(255, 255, 255, 0.85);
}

/* データ不足表示 */
.interval-direction--insufficient {
    opacity: 0.45;
}

.insufficient-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* Excellent率 補足テキスト（白文字・色システムと分離） */
.interval-excellent-rate {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

/* 音程間隔別 4ランクバッジ */
.interval-rank-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
}

.interval-rank-badge.rank-excellent {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.interval-rank-badge.rank-good {
    background: rgba(134, 239, 172, 0.15);
    color: #86efac;
    border: 1px solid rgba(134, 239, 172, 0.3);
}

.interval-rank-badge.rank-pass {
    background: rgba(147, 197, 253, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(147, 197, 253, 0.3);
}

.interval-rank-badge.rank-practice {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

/* ランクの補足事項カード */
.weakness-supplement-card {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0.875rem 1.125rem;
    text-align: center;
}

.weakness-supplement-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    font-size: 0.9rem;
}

.weakness-supplement-icon {
    color: #f87171;
    flex-shrink: 0;
}

/* 賛美モード（Practice判定ゼロ） */
.weakness-supplement-card--praise .weakness-supplement-icon {
    color: #6ee7b7;
}
.weakness-supplement-card--praise .weakness-supplement-desc {
    color: rgba(255, 255, 255, 0.75);
}
.weakness-supplement-card--praise .weakness-supplement-note {
    color: rgba(255, 255, 255, 0.55);
}

.weakness-supplement-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.25rem;
}

.weakness-supplement-note {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.625rem;
}

.weakness-supplement-intervals {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    text-align: center;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 弱点バッジ */
.interval-weakness-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(248, 113, 113, 0.9);
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: 0.65rem;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

/* 赤セル内では白抜きにして視認性を確保 */
.interval-accuracy-row--weakness .interval-weakness-badge {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
}

/* 弱点練習 CTA（弱点練習モード連携用） */
.interval-weakness-cta {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(248, 113, 113, 0.6);
    margin-left: auto;
    white-space: nowrap;
}

/* 戻るナビゲーション（トレーニング記録からの遷移時） */
.back-nav-row {
    padding: 8px 0 0;
}

.btn-back-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 8px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-back-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-back-nav i,
.btn-back-nav svg {
    width: 18px;
    height: 18px;
}