/* Image Styles */

/* デフォルト画像: 縦横比を 4:3 に固定して全画像のサイズを均一化。
 * 元画像のアスペクトは object-fit: cover で中央クロップして揃える。
 * 元のフルサイズはクリック時のポップアップ（object-fit: contain）で確認可能。 */
.prose .image-default,
.markdown-content .image-default {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .prose .image-default,
    .markdown-content .image-default {
        max-width: 700px;
    }
}

.prose .image-tiny,
.markdown-content .image-tiny {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
}

@media (min-width: 768px) {
    .prose .image-tiny,
    .markdown-content .image-tiny {
        max-width: 150px;
        width: auto;
    }
}

.prose .image-small,
.markdown-content .image-small {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
}

@media (min-width: 768px) {
    .prose .image-small,
    .markdown-content .image-small {
        max-width: 300px;
        width: auto;
    }
}

.prose .image-medium,
.markdown-content .image-medium {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
}

@media (min-width: 768px) {
    .prose .image-medium,
    .markdown-content .image-medium {
        max-width: 500px;
        width: auto;
    }
}

.prose .image-large,
.markdown-content .image-large {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
}

@media (min-width: 768px) {
    .prose .image-large,
    .markdown-content .image-large {
        max-width: 800px;
        width: auto;
    }
}

.image-fade-in-container {
    contain: layout style paint;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

.image-fade-in {
    contain: layout style paint;
    will-change: opacity;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

.image-caption-fade-in {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
    transition-delay: 0.2s;
}

.image-fade-in-container:hover .image-fade-in {
    transform: translateY(0) scale(1.02);
    transition: transform 0.3s ease-out;
}

/* Image Popup */
.image-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.image-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.image-popup-content {
    position: relative;
    max-width: min(900px, 90vw);
    max-height: 90vh;
    width: 100%;
}

.image-popup-close {
    position: absolute;
    top: -3rem;
    right: 0;
    color: white;
    background: none;
    border: none;
    transition: color 0.2s;
    z-index: 10;
}

.image-popup-close:hover {
    color: #d1d5db;
}

.image-popup-close svg {
    width: 32px;
    height: 32px;
}

.image-popup-container {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.image-popup-title {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.image-popup-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    text-align: center;
}

.image-popup-media {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 400px;
}

.image-popup-media video,
.image-popup-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-popup-caption {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
}

.image-popup-caption p {
    font-size: 14px;
    color: #4b5563;
    text-align: center;
}

.image-popup-hint {
    margin-bottom: 16px;
    text-align: center;
}

.image-popup-hint p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}