/* メインCSSファイル */
body {
    font-family: 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
}

/* 共通のアニメーション・トランジション */
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* フォームスタイル */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical;
}

/* ボタンスタイル */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded transition-colors;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors;
}

/* カードスタイル */
.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

.card-hover {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow cursor-pointer;
}

/* 統計カード */
.stats-card {
    @apply bg-white p-6 rounded-lg shadow;
}

/* 動画コンテナ - メイン視聴用 */
.video-container-main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #111827; /* gray-900 */
    overflow: hidden;
}

.video-container-main video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 動画コンテナ - プレビュー用 */
.video-container-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.video-container-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* エラー時の代替表示 - メイン用 */
.video-placeholder-main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f2937; /* gray-800 */
}

/* エラー時の代替表示 - プレビュー用 */
.video-placeholder-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f2937; /* gray-800 */
}