/**
 * ============================================================================
 * css/preview.css - プレビューページ専用スタイル
 * ============================================================================
 * 
 * 共通コンポーネント（loading-state, error-state等）は
 * lrc-project.css で定義されています。
 * 
 * ダークテーマは作業効率・カラオケ風表示のため維持
 * 
 * 色はCSS変数を使用：
 * - --color-dark-* : ダークテーマ背景・テキスト
 * - --color-wipe-* : ワイプアニメーション用
 */

/* ============================================================================
   タブナビゲーション
   ============================================================================ */

.preview-tabs {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--color-gray-200);
    padding-bottom: var(--spacing-2);
}

.preview-tabs__tab {
    padding: var(--spacing-3) var(--spacing-4);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: all 0.2s;
}

.preview-tabs__tab:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.preview-tabs__tab--active {
    background: var(--color-primary);
    color: var(--color-white);
}

.preview-tabs__tab--active:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.preview-tab-content {
    display: none;
}

.preview-tab-content--active {
    display: block;
}

/* ============================================================================
   全行ワイプ確認タブ
   ============================================================================ */

.alllines-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: linear-gradient(145deg, var(--color-gray-100), var(--color-gray-50));
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.alllines-indicator__current {
    font-weight: 600;
    color: var(--color-primary);
}

.alllines-indicator__progress {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* 歌詞コンテナ */
.alllines-lyrics-container {
    max-height: 400px;
    overflow-y: auto;
    padding: var(--spacing-4);
    background: var(--color-dark-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

/* 全行ワイプ確認 - 行スタイル */
.alllines-line {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-dark-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.alllines-line:hover {
    background: rgba(255, 255, 255, 0.1);
}

.alllines-line.active {
    background: rgba(0, 212, 255, 0.2);
}

/* ワイプ構造（全行） */
.alllines-line .char-wrapper {
    position: relative;
    display: inline-block;
}

.alllines-line .char-base {
    color: var(--color-wipe-base);
}

.alllines-line .char-wipe {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-wipe-progress);
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}

/* ルビ構造（全行） */
.alllines-line .ruby-segment {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    margin-top: 16px;
}

.alllines-line .ruby-text-wrapper {
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.alllines-line .ruby-base {
    color: var(--color-wipe-base);
}

.alllines-line .ruby-wipe {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-wipe-ruby);
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}

/* ============================================================================
   シングルラインプレビュー
   ============================================================================ */

.single-line-preview {
    background: var(--color-dark-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.single-line-preview__line {
    font-size: 32px;
    line-height: 1.6;
    color: var(--color-dark-text);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

/* シングルライン用ワイプ構造 */
.single-line-preview .char-wrapper {
    position: relative;
    display: inline-block;
}

.single-line-preview .char-base {
    color: var(--color-wipe-base);
}

.single-line-preview .char-wipe {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-wipe-progress);
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}

/* シングルライン用ルビ */
.single-line-preview .ruby-segment {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    margin-top: 24px;
}

.single-line-preview .ruby-text-wrapper {
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.single-line-preview .ruby-base {
    color: var(--color-wipe-base);
}

.single-line-preview .ruby-wipe {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-wipe-ruby);
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}

/* 行情報表示 */
.single-line-info {
    margin-top: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-dark-text-muted);
}

/* ============================================================================
   プレビューコントロール
   ============================================================================ */

.preview-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: linear-gradient(145deg, var(--color-gray-100), var(--color-gray-50));
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.preview-controls__time {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    background: var(--color-white);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-200);
    min-width: 120px;
    text-align: center;
}

.preview-controls__volume {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.preview-controls__volume input[type="range"] {
    width: 100px;
    accent-color: var(--color-primary);
}

/* ============================================================================
   プログレスバー
   ============================================================================ */

.preview-progress {
    margin-bottom: var(--spacing-4);
}

.preview-progress__bar {
    width: 100%;
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    cursor: pointer;
}

.preview-progress__fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    transition: width 0.1s linear;
}

.preview-progress__times {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-family: var(--font-family-mono);
}

/* ============================================================================
   プレビュー設定
   ============================================================================ */

.preview-settings {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.preview-settings__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-3);
}

.preview-settings__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.preview-settings__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.preview-settings__item label {
    color: var(--color-gray-700);
}

.preview-settings__item select,
.preview-settings__item input[type="number"] {
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

/* ============================================================================
   カラオケ風フルスクリーンモード
   ============================================================================ */

.fullscreen-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    z-index: 9999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fullscreen-preview.is-active {
    display: flex;
}

.fullscreen-preview__lyrics {
    font-size: 48px;
    line-height: 1.6;
    text-align: center;
    padding: var(--spacing-8);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

.fullscreen-preview__controls {
    position: absolute;
    bottom: var(--spacing-8);
    display: flex;
    gap: var(--spacing-4);
}

.fullscreen-preview__close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: var(--font-size-2xl);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

.fullscreen-preview__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* フルスクリーン用ワイプ */
.fullscreen-preview .char-wrapper {
    position: relative;
    display: inline-block;
}

.fullscreen-preview .char-base {
    color: rgba(255, 255, 255, 0.4);
}

.fullscreen-preview .char-wipe {
    position: absolute;
    top: 0;
    left: 0;
    color: #00d4ff;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}

/* フルスクリーン用ルビ */
.fullscreen-preview .ruby-segment {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    margin-top: 36px;
}

.fullscreen-preview .ruby-text-wrapper {
    position: absolute;
    top: -36px;
    left: 0;
    right: 0;
    font-size: 20px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.fullscreen-preview .ruby-base {
    color: rgba(255, 255, 255, 0.4);
}

.fullscreen-preview .ruby-wipe {
    position: absolute;
    top: 0;
    left: 0;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}

/* ============================================================================
   行選択リスト
   ============================================================================ */

.line-selector {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.line-selector__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-100);
    cursor: pointer;
    transition: background 0.15s;
}

.line-selector__item:last-child {
    border-bottom: none;
}

.line-selector__item:hover {
    background: var(--color-gray-50);
}

.line-selector__item--active {
    background: var(--color-primary-light);
    border-left: 3px solid var(--color-primary);
}

.line-selector__number {
    min-width: 30px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.line-selector__text {
    flex: 1;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-selector__time {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

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

@media (max-width: 768px) {
    .preview-tabs {
        flex-wrap: wrap;
    }

    .preview-tabs__tab {
        flex: 1;
        text-align: center;
        min-width: 100px;
    }

    .preview-controls {
        flex-wrap: wrap;
    }

    .single-line-preview__line {
        font-size: 24px;
    }

    .fullscreen-preview__lyrics {
        font-size: 28px;
        padding: var(--spacing-4);
    }

    .alllines-line {
        font-size: 14px;
    }

    .preview-settings__row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================================
   全行ワイプ確認 - 再生コントロール
   ============================================================================ */

.alllines-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: linear-gradient(145deg, var(--color-gray-100), var(--color-gray-50));
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-3);
    align-items: center;
}

.alllines-controls__audio-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.alllines-controls__label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: 500;
}

.alllines-controls__filename {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alllines-controls__filename.selected {
    color: var(--color-primary);
    font-weight: 500;
}

.alllines-controls__buttons {
    display: flex;
    gap: var(--spacing-2);
}

.alllines-controls__volume {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-left: auto;
}

.alllines-controls__volume input[type="range"] {
    width: 80px;
    accent-color: var(--color-primary);
}

/* ============================================================================
   シークバー（時間表示統合）
   ============================================================================ */

.alllines-seekbar-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.alllines-seekbar__time {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    background: var(--color-white);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-200);
    min-width: 85px;
    text-align: center;
    flex-shrink: 0;
}

.alllines-seekbar__time--current {
    color: var(--color-primary);
    font-weight: 600;
}

.alllines-seekbar-container {
    flex: 1;
    padding: var(--spacing-2) 0;
}

.alllines-seekbar {
    position: relative;
    width: 100%;
    height: 10px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    cursor: pointer;
    overflow: visible;
}

.alllines-seekbar:hover {
    background: var(--color-gray-300);
}

.alllines-seekbar__progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    transition: width 0.1s linear;
    pointer-events: none;
}

.alllines-seekbar__handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border: 3px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 10;
}

.alllines-seekbar__handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

.alllines-seekbar__handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}

/* ============================================================================
   全行ワイプ確認 - アクションボタン
   ============================================================================ */

.alllines-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-gray-200);
}

/* ============================================================================
   現在行ハイライト
   ============================================================================ */

.alllines-line.current {
    background: rgba(139, 69, 19, 0.2);
    border-left: 3px solid var(--color-primary);
}

/* ============================================================================
   レスポンシブ（シークバー）
   ============================================================================ */

@media (max-width: 768px) {
    .alllines-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .alllines-controls__audio-info {
        justify-content: flex-start;
    }

    .alllines-controls__buttons {
        justify-content: center;
    }

    .alllines-controls__volume {
        margin-left: 0;
        justify-content: center;
    }

    .alllines-seekbar-wrapper {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .alllines-seekbar-container {
        width: 100%;
        order: 1;
    }

    .alllines-seekbar__time--current {
        order: 2;
    }

    .alllines-seekbar__time--total {
        order: 3;
    }

    .alllines-seekbar__handle {
        width: 24px;
        height: 24px;
    }
}