@charset "utf-8";



/* ****************************************************************************************** *
 * landing 스타일 시작
 * ****************************************************************************************** */

:root {
    --ff_bk: 'ff_bk', sans-serif;
    --ff_b: 'ff_b', sans-serif;
    --ff_r: 'ff_r', sans-serif;

    /* 기본 폰트 크기 설정 (소형 화면 기준) */
    --fs_50: 2.2rem;    /* H1 */
    --fs_40: 1.75rem;   /* H2 */
    --fs_30: 1.5rem;    /* H3 */
    --fs_25: 1.25rem;   /* H4 */
    --fs_20: 1rem;      /* H5 */
    --fs_18: 0.875rem;  /* H6 */
    --fs_p: 16px;       /* Paragraph */  
    --fs_small: 0.75rem; /* Small */ 
}

/* 중간 크기의 화면에 대한 폰트 크기 조정 */
@media (min-width: 768px) {
    :root {
        --fs_50: 3.5rem;    /* H1 */
        --fs_40: 2.5rem;    /* H2 */
        --fs_30: 2rem;      /* H3 */
        --fs_25: 1.75rem;   /* H4 */
        --fs_20: 1.5rem;    /* H5 */
        --fs_18: 1.25rem;   /* H6 */
    }
}

/* 대형 화면에 대한 폰트 크기 조정 */
@media (min-width: 1024px) {
    :root {
        --fs_50: 4rem;      /* H1 (64px -> 4rem) */
        --fs_40: 3.625rem;  /* H2 (58px -> 3.625rem) */
        --fs_30: 3rem;      /* H3 (48px -> 3rem) */
        --fs_25: 2rem;      /* H4 (2rem 그대로) */
        --fs_20: 1.75rem;   /* H5 (1.75rem 그대로) */
        --fs_18: 1.5rem;    /* H6 (1.5rem 그대로) */
    }
}
.ff_bk { font-family: var(--ff_bk) !important; }
.ff_b { font-family: var(--ff_b) !important; }
.ff_r { font-family: var(--ff_r) !important; }

.editable-content h1, .edi_content h1, .pell-content h1 { font-size: var(--fs_50); word-break: break-word; }
.editable-content h2, .edi_content h2, .pell-content h2 { font-size: var(--fs_40); word-break: break-word; }
.editable-content h3, .edi_content h3, .pell-content h3 { font-size: var(--fs_30); word-break: break-word; }
.editable-content h4, .edi_content h4, .pell-content h4 { font-size: var(--fs_25); word-break: break-word; }
.editable-content h5, .edi_content h5, .pell-content h5 { font-size: var(--fs_20); word-break: break-word; }
.editable-content h6, .edi_content h6, .pell-content h6 { font-size: var(--fs_small); word-break: break-word; } 
.editable-content p, .edi_content p, .pell-content p { font-size: var(--fs_p); word-break: break-word; }

.edit_modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.4);}
.modal-content { background-color: #e9e9e9; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%;}
.modal-title { padding:10px 0;  }
.editable-content { cursor: pointer;box-sizing: border-box;word-break: break-word;} 
.editable-content:hover { outline: 2px dashed red;}
#saveChanges { margin-top: 15px; color: #fff; background: var(--color-main); padding: 10px; min-width: 150px; border-radius: 3em; display: inline-block; border: none;text-decoration: none; text-align: center;}
#saveChanges:hover { color: #fff; background-color: #ccc;}
.modal-content .pell_right{ text-align: right; }
#closeModal {
    float: right;
    cursor: pointer;
    display: block;
    position: relative;
    right: 0;
    top: -15px;
    z-index: 100;
    font-weight: bold;
    margin: 0;
    height: 40px;
    width: 40px;
    border: 0;
	color: var(--color-main);     
    font-size: 1.8em;
    background: transparent;
}
#closeModal:hover { color: #bfb8b2;}

.wr_subject_edit .pell-content { height: 200px; }
.wr_2_edit .pell-content, .wr_3_edit .pell-content { height: 100px; }

.btn_img_name {
    width: 50%;
    word-break: keep-all;
    margin-top: 25px;
    letter-spacing: 0.6px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.btn_img_name1 {
    margin-top: 25px;
    color: #888;
    letter-spacing: 0.6px;
    padding: 6px 18px;
    border-radius: 3em;
    display: inline-block;
    border: 1px #888 solid;
    text-decoration: none;
    text-align: center;
}
.btn_img_name1:hover {
    color: #fff ! important;
    border: 1px #888 solid ! important;
    background-color: #888 ! important;
}




/* 추가된 중앙 모달창 */
.btn_delete { display: inline-flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #ccc; border-radius: 4px;padding: 0; width: 32px; height: 32px; cursor: pointer;}
.btn_file { border: 2px dashed #ddd;width: 80px; height: 80px;  font-size: 30px;}
.btn_save { background: var(--color-main); margin-top: 20px; border: none; color: #fff; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; padding: 12px 20px; cursor: pointer; border-radius: 50px; width: 100%; margin-bottom: 30px;}
.btn_save:hover { background: #333333;}
.btn_save>input:focus {outline:none;}

/* 이미지 미리보기 */
.preview_img { 
    height: 250px; 
    width: 100%; 
    border: 1px dashed #ff0000; 
    display: flex; 
    align-items: center; 
    justify-content: center; border-radius: 10px;
}
.preview_img img {
    max-height: 240px; 
    max-width: 100%; 
    margin: 10px;
    padding: 10px;
}

/* 카테고리 스와이프 이미지 미리보기 */
.swiper-container {  width: 100%; height: 250px;}
.swiper-container .swiper-slide { cursor: pointer; text-align: center; display: flex;flex-direction: column;justify-content: center; align-items: center;}
.swiper-container .swiper-slide.selected { border: 2px dashed red; border-radius: 10px; overflow: hidden;}
.swiper-container .swiper-slide.selected .swiper_img_box img { max-width: 100%; object-fit: contain; }
.swiper-container .swiper_img_tit { position: absolute; bottom: 20px; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 12px;}

.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev { width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.swiper-container .swiper-button-next::after,
.swiper-container .swiper-button-prev::after { color: #fff; font-size: 16px;}
.swiper-container .swiper-button-next:hover,
.swiper-container .swiper-button-prev:hover { background-color: rgba(0, 0, 0, 0.7); }