/* ===========================
   Work Detail Modal
   =========================== */

/* Overlay */
.modal-overlay {display: none;background: rgba(0, 0, 0, 0.7);opacity: 0; position: fixed;inset: 0;z-index: 1000;transition: opacity 0.25s ease;}
.modal-overlay--visible {opacity: 1;}

/* Modal Container */
.modal {display: none;max-width: 1200px;width: 94%;height: 88vh;border-radius: 6px;background: #fff;position: fixed;z-index: 1001;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.95);opacity: 0;verflow: hidden;transition: opacity 0.25s ease, transform 0.25s ease;}
.modal--visible {opacity: 1;transform: translate(-50%, -50%) scale(1);}

/* Close Button */
.modal__close {display: flex;align-items: center;justify-content: center;width: 36px;aspect-ratio: 1 / 1;border-radius: 50%;position: absolute;top: 14px;right: 14px; z-index: 10;background: rgba(0, 0, 0, 0.05);color: #666;font-size: 12px;transition: background-color 0.15s ease, color 0.15s ease;}
.modal__close:hover {background: rgba(0, 0, 0, 0.1);color: #000;}

/* Inner Layout */
.modal__inner {display: flex;height: 100%;overflow: hidden;}

/* ===========================
   Left: Image Scroll Area (PC)
   =========================== */
.modal__images {flex-shrink: 0;width: 55%;overflow-y: auto;overflow-x: hidden;background: #f0f0f0;-webkit-overflow-scrolling: touch;}

/* 스크롤바 스타일 */
.modal__images::-webkit-scrollbar {width: 4px;}
.modal__images::-webkit-scrollbar-track {background: transparent;}
.modal__images::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.15);border-radius: 2px;}

.modal__images-item {width: 100%;border-bottom: 1px solid #e5e5e5;}
.modal__images-item:last-child {border-bottom: none;}
.modal__images-item img {width: 100%;display: block;object-fit: contain;background: #f0f0f0;}

/* 이미지 없을 때 */
.modal__images--empty {display: flex;align-items: center;justify-content: center;background-color: #d9d9d9;color: #999;font-size: 14px;}

/* ===========================
   Right: Content (Text Only)
   =========================== */
.modal__content {flex: 1;padding: 4.8rem 4.0rem;overflow-y: auto;}
.modal__title {font-size: 3.6rem;font-weight: 700;}
.modal__title-en {color: #999;font-size: 15px;}

.modal__subtitle {margin-top: 10px;color: var(--brown);font-size: max(1.7rem, 17px);}

/* Info Table */
.modal__info {width: 100%;margin: 32px 0;border-top: 1px solid #eee;}
.modal__info-row {display: flex;border-bottom: 1px solid #eee;padding: 14px 0;}
.modal__info-label {flex-shrink: 0;width: 90px;font-size: 15px;font-weight: 600;color: #999;}
.modal__info-value {flex: 1;color: #333;font-size: 15px;}

/* Description */
.modal__desc-title {margin-bottom: 12px;font-size: max(1.7rem, 17px);font-weight: 600;}
.modal__desc {color: #555;font-size: max(1.7rem, 17px);line-height: 1.6;}
.modal__ntc {margin-top: 20px;color: #555;font-size: max(1.7rem, 17px);font-weight: 600;}

/* Mobile dots (PC에선 숨김) */
.modal__dots {display: none;}

/* Body scroll lock */
body.modal-open {overflow: hidden;}

/* ===========================
   Responsive — Mobile
   =========================== */
@media (max-width: 768px) {
    .modal {width: 96%;height: 92vh;}
    .modal__inner {flex-direction: column;height: 100%;overflow: hidden;}

    /* 모바일: 가로 스와이프 */
    .modal__images {flex-shrink: 0;display: flex;flex-direction: row;width: 100%;height: 44vh;overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none;}
    .modal__images::-webkit-scrollbar {display: none;}
    .modal__images-item {flex-shrink: 0;min-width: 100%;width: 100%;height: 100%;border-bottom: none;scroll-snap-align: start;}
    .modal__images-item img {width: 100%;height: 100%;object-fit: contain;}
    .modal__images-count {display: none;}

    /* 모바일 dot 인디케이터 */
    .modal__dots {flex-shrink: 0;display: flex;justify-content: center;gap: 6px;padding: 8px 0;background: #fff;border-bottom: 1px solid #eee;}
    .modal__dot {width: 7px;height: 7px;border-radius: 50%;background: #ddd;transition: background 0.2s;}
    .modal__dot--active {background: var(--brown);}

    /* 컨텐츠 스크롤 */
    .modal__content {flex: 1;padding: 24px 20px;overflow-y: auto;}
}

@media (max-width: 480px) {
    .modal__images {height: 38vh;}
    .modal__content {padding: 20px 16px;}
}