/**
 * ============================================================================
 * css/export.css - LRCデータエクスポートページ専用スタイル
 * ============================================================================
 * 
 * 共通コンポーネント（btn, form-input--sm/wide, loading-state等）は
 * lrc-project.css で定義されています。
 * 
 * 暖色系デザイン（ブログ・ランダムプレーヤー準拠）
 */

/* ============================================================================
   エクスポートアクション
   ============================================================================ */

.export-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-6);
}

.export-actions .btn {
    min-width: 150px;
}

/* ============================================================================
   LRCテキストエリア
   ============================================================================ */

.lrc-textarea {
    width: 100%;
    height: 500px;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    padding: var(--spacing-4);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    resize: vertical;
    background: linear-gradient(145deg, var(--color-gray-50), var(--color-white));
    color: var(--color-gray-800);
}

.lrc-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
    background: var(--color-white);
}

.lrc-textarea:not([readonly]) {
    background: var(--color-white);
}

.lrc-textarea[readonly] {
    background: var(--color-gray-50);
    cursor: default;
}

/* ============================================================================
   不完全行リスト
   ============================================================================ */

.incomplete-lines-section {
    margin-bottom: var(--spacing-6);
}

.incomplete-lines-list {
    margin-top: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
}

.incomplete-lines-list__title {
    font-weight: 600;
    color: var(--color-warning);
    margin-bottom: var(--spacing-2);
}

.incomplete-lines-list ul {
    margin: 0;
    padding-left: var(--spacing-6);
}

.incomplete-lines-list li {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-1);
    cursor: pointer;
    transition: color 0.15s;
}

.incomplete-lines-list li:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ============================================================================
   統計グリッド
   ============================================================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.stats-item {
    text-align: center;
    padding: var(--spacing-4);
    background: linear-gradient(145deg, var(--color-gray-50), var(--color-white));
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.stats-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stats-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-1);
}

.stats-value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary);
}

.stats-value--success {
    color: var(--color-success);
}

.stats-value--warning {
    color: var(--color-warning);
}

.stats-value--danger {
    color: var(--color-danger);
}

/* ============================================================================
   メタデータオプション
   ============================================================================ */

.metadata-section {
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.metadata-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.metadata-section__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 var(--spacing-3) 0;
    padding-bottom: var(--spacing-2);
    border-bottom: 2px solid var(--color-gray-200);
    position: relative;
}

.metadata-section__title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--color-accent);
}

.metadata-row {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    flex-wrap: wrap;
}

.metadata-field {
    flex: 1;
    min-width: 200px;
}

.metadata-field label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-1);
}

.metadata-field input,
.metadata-field select {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.metadata-field input:focus,
.metadata-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

/* ============================================================================
   エクスポートオプション
   ============================================================================ */

.export-options {
    background: linear-gradient(145deg, var(--color-gray-50), var(--color-white));
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.export-options__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

.export-options__group {
    display: flex;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.export-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.export-option:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.export-option input[type="checkbox"],
.export-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

/* ============================================================================
   ファイル形式選択
   ============================================================================ */

.format-selector {
    display: flex;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.format-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.format-option:hover {
    border-color: var(--color-secondary);
}

.format-option--active {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.format-option__icon {
    font-size: var(--font-size-2xl);
}

.format-option__name {
    font-weight: 600;
    color: var(--color-gray-800);
}

.format-option__desc {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-align: center;
}

/* ============================================================================
   コピー成功メッセージ
   ============================================================================ */

.copy-success {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-success-light);
    color: var(--color-success);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    animation: fadeInOut 2s ease;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-10px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* ============================================================================
   ダウンロード確認
   ============================================================================ */

.download-confirm {
    text-align: center;
    padding: var(--spacing-6);
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
}

.download-confirm__icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-3);
}

.download-confirm__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-success);
    margin-bottom: var(--spacing-2);
}

.download-confirm__message {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* ============================================================================
   エラー表示
   ============================================================================ */

.export-error {
    padding: var(--spacing-4);
    background: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.export-error__title {
    font-weight: 600;
    color: var(--color-danger);
    margin-bottom: var(--spacing-2);
}

.export-error__message {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

/* ============================================================================
   プレビューセクション
   ============================================================================ */

.lrc-preview-section {
    margin-top: var(--spacing-6);
}

.lrc-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

.lrc-preview-header__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-primary);
}

.lrc-preview-header__actions {
    display: flex;
    gap: var(--spacing-2);
}

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

@media (max-width: 768px) {
    .export-actions {
        flex-direction: column;
    }
    
    .export-actions .btn {
        width: 100%;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .metadata-row {
        flex-direction: column;
    }
    
    .metadata-field {
        min-width: auto;
    }
    
    .export-options__group {
        flex-direction: column;
    }
    
    .format-selector {
        flex-direction: column;
    }
    
    .lrc-textarea {
        height: 300px;
    }
    
    .lrc-preview-header {
        flex-direction: column;
        gap: var(--spacing-2);
        align-items: flex-start;
    }
}