/* =================================================
   help.css - ヘルプページ専用スタイル
   バージョン: 1.0.0
   作成日: 2025-11-21
   ================================================= */

/* --- ステップ番号 --- */
.help-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

/* --- モードカード（glass-card内で使用） --- */
.help-mode-card {
    background: rgba(255, 255, 255, 0.05);
    /* backdrop-filter削除: 親.glass-cardと重複してiPadで白化するため */
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* --- モードアイコン --- */
.help-mode-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-lg);
}

/* --- 方向アイコン --- */
.help-direction-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-lg);
}

/* --- グレードリスト --- */
.help-grade-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.help-grade-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* --- グレードバッジ --- */
.help-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
}

.help-grade-badge.grade-s {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1f2937;
}

.help-grade-badge.grade-a {
    background: linear-gradient(135deg, #a3a3a3, #737373);
    color: white;
}

.help-grade-badge.grade-b {
    background: linear-gradient(135deg, #fb923c, #ea580c);
    color: white;
}

.help-grade-badge.grade-c {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #1f2937;
}

.help-grade-badge.grade-d {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: white;
}

.help-grade-badge.grade-e {
    background: linear-gradient(135deg, #f87171, #ef4444);
    color: white;
}

/* --- 総合評価ランク名カラー --- */
.rank-name-s { color: #fcd34d; }
.rank-name-a { color: #d1d5db; }
.rank-name-b { color: #fdba74; }
.rank-name-c { color: #86efac; }
.rank-name-d { color: #7dd3fc; }
.rank-name-e { color: #fca5a5; }

/* --- 評価リスト（アイコン主役レイアウト） --- */
.help-eval-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.help-eval-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.help-eval-name {
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 80px;
}

/* --- 音程評価バッジ（レガシー） --- */
.help-grade-badge.grade-excellent {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1f2937;
    width: auto;
    min-width: auto;
    padding: 0 0.5rem;
    font-size: 0.75rem;
}

.help-grade-badge.grade-good {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #1f2937;
    width: auto;
    min-width: auto;
    padding: 0 0.5rem;
    font-size: 0.75rem;
}

.help-grade-badge.grade-pass {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: white;
    width: auto;
    min-width: auto;
    padding: 0 0.5rem;
    font-size: 0.75rem;
}

.help-grade-badge.grade-practice {
    background: linear-gradient(135deg, #f87171, #ef4444);
    color: white;
    width: auto;
    min-width: auto;
    padding: 0 0.5rem;
    font-size: 0.75rem;
}

/* --- FAQアコーディオン --- */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.faq-item {
    background: rgba(255, 255, 255, 0.05);
    /* backdrop-filter削除: 親.glass-cardと重複してiPadで白化するため */
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4);
    background: transparent;
    border: none;
    color: white;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
}

.faq-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-icon.rotated {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.open {
    max-height: 500px;
    padding: 0 var(--space-4) var(--space-4);
}

/* --- アイコン+テキスト横並び（16px版） --- */
.help-icon-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.help-icon-text i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- アイコン+テキスト横並び（14px版・小サイズ） --- */
.help-icon-text-sm {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.help-icon-text-sm i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* --- モード/方向アイコン内のアイコンサイズ --- */
.help-mode-icon i,
.help-direction-icon i {
    width: 20px;
    height: 20px;
}

/* --- 情報ボックス --- */
.help-info-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    background: rgba(255, 255, 255, 0.03);
    padding: var(--space-3);
    border-radius: var(--radius-md);
}

/* --- 次期バージョン（無効状態） --- */
.help-mode-disabled {
    opacity: 0.6;
}

/* --- ページヘッダーアイコン --- */
.help-header-icon {
    width: 36px;
    height: 36px;
}

/* --- ボタン内アイコン --- */
.help-btn-icon {
    width: 18px;
    height: 18px;
}

/* --- トラブルシューティング --- */
.help-trouble-item {
    background: rgba(255, 255, 255, 0.03);
    /* backdrop-filter削除: 親.glass-cardと重複してiPadで白化するため */
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.help-trouble-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-trouble-list li {
    position: relative;
    padding-left: var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--white-70);
    font-size: 0.875rem;
}

.help-trouble-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--white-40);
}

.help-trouble-list li:last-child {
    margin-bottom: 0;
}

/* --- 説明文（リストの前などに使用） --- */
.help-description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--white-70);
    margin-bottom: var(--space-3);
}

/* --- リストの後に続くテキスト用 --- */
.help-trouble-list + .help-note {
    margin-top: var(--space-3);
}

.help-note {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--white-70);
}

/* --- 脳内ピアノ 体感ステージ --- */
.help-stages {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.help-stage-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.help-stage-badge {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: white;
}

.help-stage-badge--1 { background: #6b7280; }
.help-stage-badge--2 { background: #3b82f6; }
.help-stage-badge--3 { background: #8b5cf6; }
.help-stage-badge--4 { background: #10b981; }

/* --- カテゴリ見出し --- */
.help-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.help-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-lg);
}

.help-category-icon i {
    width: 22px;
    height: 22px;
}

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

/* --- モードカードヘッダー --- */
.help-mode-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.help-mode-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.help-mode-badge {
    font-size: 0.75rem;
}

/* --- モードカードリスト（gap調整） --- */
.help-mode-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --- 情報ボックスヘッダー --- */
.help-info-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--white-80);
}

.help-info-header i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* --- 目次（ページ内リンク） --- */
.help-toc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.help-toc-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    color: var(--white-80);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.help-toc-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.help-toc-item i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 目次カテゴリ見出し */
.help-toc-category {
    grid-column: 1 / -1;
    padding: var(--space-1) 0;
    margin-top: var(--space-3);
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--white-80);
}

.help-toc-category:first-child {
    margin-top: 0;
}

/* 目次スペーサー（奇数アイテムカテゴリのグリッド調整用） */
.help-toc-spacer {
    display: block;
}

/* モバイル時は1列 */
@media (max-width: 480px) {
    .help-toc {
        grid-template-columns: 1fr;
    }
}

/* --- トップへ戻るボタン --- */
.help-back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: var(--radius-md);
    color: var(--white-60);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.help-back-to-top:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white-80);
}

.help-back-to-top i {
    width: 14px;
    height: 14px;
}

/* --- 注意カード（オレンジ強調） --- */
.help-notice-card {
    background: rgba(251, 146, 60, 0.15);
    border: 1px solid rgba(251, 146, 60, 0.4);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.help-notice-card p:last-child {
    margin-bottom: 0;
}

/* --- 特定商取引法テーブル --- */
.help-tokushoho-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.help-tokushoho-table th,
.help-tokushoho-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: top;
}

.help-tokushoho-table th {
    color: var(--white-60);
    font-weight: 500;
    white-space: nowrap;
    width: 120px;
}

.help-tokushoho-table td {
    color: var(--white-90);
}

.help-tokushoho-table tr:last-child th,
.help-tokushoho-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 480px) {
    .help-tokushoho-table th {
        width: 100px;
    }

    .help-tokushoho-table th,
    .help-tokushoho-table td {
        padding: var(--space-2);
        font-size: 0.8125rem;
    }
}