/*
 * ==========================================================
 * CKEditor - Custon Plugin 관련 css
 * ==========================================================
 */

/*
 * ==========================================================
 * CKEditor - Simple Button
 * ==========================================================
 */
.simple-button {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
}

/*
 * ==========================================================
 * CKEditor - Simple Gallery 시작
 * ==========================================================
 *
 * 공통 사용
 *
 * - CKEditor 글쓰기/수정 화면
 * - 사용자 상세화면
 *
 * 상세화면에서는 JS가
 * .simple-gallery-ready 클래스를 추가한다.
 */

/*
 * 전체 갤러리
 */
.simple-gallery {
    width: 80%;
    max-width: 800px;
    margin: 24px auto;
    padding: 0;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ececec;
    overflow: hidden;
    /*
     * 실제 HTML 순서와 관계없이
     * 메인 → 숫자 → 썸네일
     * 순서로 표시하기 위해 flex 사용
     */
    display: flex;
    flex-direction: column;
}

/*
 * 메인 이미지 영역
 */
.simple-gallery-main {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    background: radial-gradient(circle at center, #fafafa 0%, #f7f7f7 62%, #eeeeee 100%);
    /*
     * 표시 순서
     */
    order: 1;
}

/*
 * 메인 이미지
 */
.simple-gallery-main-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 0;
}

/*
 * 메인 이전 / 다음 버튼
 */
.simple-gallery-prev,
.simple-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 58px;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.46);
    color: #fff;
    font-size: 27px;
    font-weight: 300;
    line-height: 58px;
    text-align: center;
    z-index: 10;
    transition: background 0.2s ease, opacity 0.2s ease;
}

/*
 * 이전 버튼
 */
.simple-gallery-prev {left: 0;}

/*
 * 다음 버튼
 */
.simple-gallery-next {right: 0;}

/*
 * 상세화면에서는 실제 클릭 가능한 버튼
 */
.simple-gallery.simple-gallery-ready
.simple-gallery-prev,
.simple-gallery.simple-gallery-ready
.simple-gallery-next {
    cursor: pointer;
}

/*
 * 현재 이미지 번호
 *
 * 예)
 * 1 / 3
 *
 * 메인 이미지 바로 아래
 * 썸네일 바로 위에 표시
 */
.simple-gallery-count {
    order: 2;
    display: block;
    width: 100%;
    padding: 9px 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #666;
    background: #fff;
    border-top: 1px solid #f1f1f1;
}

/*
 * 썸네일 전체 영역
 */
.simple-gallery-thumbnails {
    position: relative;
    order: 3;
    width: 100%;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 46px;
    box-sizing: border-box;
    background: #fff;
}

/*
 * 현재 이미지 대체텍스트
 *
 * 현재 선택된 이미지의 alt 값을
 * 갤러리 하단 캡션으로 표시한다.
 */
.simple-gallery-caption {
    order: 4;
    width: 100%;
    padding: 12px 16px 14px;
    box-sizing: border-box;
    line-height: 1.6;
    text-align: center;
    background: #fff;
}

/*
 * 대체텍스트가 없는 경우
 * 빈 캡션 영역은 표시하지 않는다.
 */
.simple-gallery-caption:empty {
    display: none;
}

/*
 * 썸네일 목록
 */
.simple-gallery-thumb-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/*
 * 썸네일 기본 상태
 */
.simple-gallery-thumb-image {
    width: 86px;
    height: 62px;
    object-fit: cover;
    flex-shrink: 0;
    margin: 0;
    box-sizing: border-box;
    opacity: 0.36;
    filter: brightness(0.98) saturate(0.85);
    border: 1px solid transparent;
    transition: opacity 0.2s ease, filter 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/*
 * CKEditor 편집 화면
 *
 * CKEditor에서는 상세화면용 JS가 실행되지 않으므로
 * .simple-gallery-ready 클래스가 없다.
 *
 * 따라서 첫 번째 썸네일을 기본 선택 상태처럼 보이게 한다.
 */
.simple-gallery:not(.simple-gallery-ready)
.simple-gallery-thumb-image:first-child {
    opacity: 1;
    filter: none;
    border-color: rgba(0, 0, 0, 0.38);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

/*
 * 사용자 상세화면
 *
 * 상세화면에서는 JS가 현재 썸네일에
 * active 클래스를 붙인다.
 *
 * 따라서 first-child가 아니라
 * 실제 선택된 이미지 하나만 강조된다.
 */
.simple-gallery.simple-gallery-ready
.simple-gallery-thumb-image.active {
    opacity: 1;
    filter: none;
    border-color: rgba(0, 0, 0, 0.38);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

/*
 * 상세화면에서는 썸네일 클릭 가능
 */
.simple-gallery.simple-gallery-ready
.simple-gallery-thumb-image {
    cursor: pointer;
}

/*
 * 썸네일 이전 / 다음 버튼
 */
.simple-gallery-thumb-prev,
.simple-gallery-thumb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.3);
    font-size: 24px;
    font-weight: 300;
    line-height: 50px;
    text-align: center;
    z-index: 5;
}

/*
 * 썸네일 이전 버튼
 */
.simple-gallery-thumb-prev {
    left: 8px;
}

/*
 * 썸네일 다음 버튼
 */
.simple-gallery-thumb-next {
    right: 8px;
}

/*
 * 상세화면에서는 실제 클릭 가능
 */
.simple-gallery.simple-gallery-ready
.simple-gallery-thumb-prev,
.simple-gallery.simple-gallery-ready
.simple-gallery-thumb-next {
    cursor: pointer;
}

/*
 * 상세화면 hover
 */
.simple-gallery.simple-gallery-ready
.simple-gallery-prev:hover,
.simple-gallery.simple-gallery-ready
.simple-gallery-next:hover {
    background: rgba(0, 0, 0, 0.62);
}

.simple-gallery.simple-gallery-ready
.simple-gallery-thumb-image:hover {
    opacity: 0.78;
}

/*
 * 선택된 썸네일은 hover해도 선명하게 유지
 */
.simple-gallery.simple-gallery-ready
.simple-gallery-thumb-image.active:hover {
    opacity: 1;
}

/*
 * Tablet
 * 481px ~ 768px
 */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .simple-gallery {
        width: 90%;
        max-width: none;
        margin: 18px auto;
    }

    .simple-gallery-main {
        height: 460px;
    }

    .simple-gallery-prev,
    .simple-gallery-next {
        width: 36px;
        height: 54px;
        line-height: 54px;
        font-size: 25px;
    }

    .simple-gallery-count {
        padding: 8px 0;
        font-size: 11px;
    }

    .simple-gallery-thumbnails {
        height: 88px;
        padding: 10px 38px;
        box-sizing: border-box;
    }

    .simple-gallery-thumb-list {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        overflow: hidden;
    }

    .simple-gallery-thumb-image {
        width: 72px;
        height: 56px;
        flex-shrink: 0;
        object-fit: cover;
    }

    .simple-gallery-thumb-prev,
    .simple-gallery-thumb-next {
        width: 28px;
        height: 48px;
        line-height: 48px;
        font-size: 22px;
    }

    .simple-gallery-thumb-prev {
        left: 5px;
    }

    .simple-gallery-thumb-next {
        right: 5px;
    }
}

/*
 * Mobile
 * 480px 이하
 */
@media screen and (max-width: 480px) {
    .simple-gallery {
        width: 100%;
        max-width: none;
        margin: 16px auto;
    }

    .simple-gallery-main {
        height: 420px;
    }

    .simple-gallery-prev,
    .simple-gallery-next {
        width: 34px;
        height: 52px;
        line-height: 52px;
        font-size: 24px;
    }

    .simple-gallery-count {
        padding: 8px 0;
        font-size: 11px;
    }

    .simple-gallery-thumbnails {
        height: 88px;
        padding: 10px 34px;
        box-sizing: border-box;
    }

    .simple-gallery-thumb-list {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        overflow: hidden;
    }

    .simple-gallery-thumb-image {
        width: 68px;
        height: 54px;
        flex-shrink: 0;
        object-fit: cover;
    }

    .simple-gallery-thumb-prev,
    .simple-gallery-thumb-next {
        width: 26px;
        height: 46px;
        line-height: 46px;
        font-size: 21px;
    }

    .simple-gallery-thumb-prev {
        left: 4px;
    }

    .simple-gallery-thumb-next {
        right: 4px;
    }
}
/*
 * ==========================================================
 * CKEditor - Simple Gallery 끝
 * ==========================================================
 */