@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 */
    
    /* 추가 폰트 크기 변수 */
    --fs_12: 0.65rem;
    --fs_14: 0.75rem;
    --fs_16: 0.875rem;
    --fs_24: 1.25rem;
    --fs_28: 1.5rem;
    --fs_32: 1.75rem;
    --fs_36: 2rem;
    --fs_48: 2.2rem;
}

/* 중간 크기의 화면에 대한 폰트 크기 조정 */
@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 */
        
        /* 추가 폰트 크기 */
        --fs_12: 0.75rem;
        --fs_14: 0.875rem;
        --fs_16: 1rem;
        --fs_24: 1.5rem;
        --fs_28: 1.75rem;
        --fs_32: 2rem;
        --fs_36: 2.25rem;
        --fs_48: 3rem;
    }
}

/* 대형 화면에 대한 폰트 크기 조정 */
@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 */
        --fs_20: 1.75rem;   /* H5 */
        --fs_18: 1.5rem;    /* H6 */
        
        /* 추가 폰트 크기 */
        --fs_12: 0.75rem;
        --fs_14: 0.875rem;
        --fs_16: 1rem;
        --fs_24: 1.5rem;
        --fs_28: 1.75rem;
        --fs_32: 2rem;
        --fs_36: 2.25rem;
        --fs_48: 3rem;
    }
}

.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, 
.editable-content h2, 
.editable-content h3, 
.editable-content h4, 
.editable-content h5, 
.editable-content h6, 
.editable-content span, 
.editable-content p,
.edi_content h1, 
.edi_content h2, 
.edi_content h3, 
.edi_content h4, 
.edi_content h5, 
.edi_content h6, 
.edi_content span, 
.edi_content p,
.pell-content h1, 
.pell-content h2, 
.pell-content h3, 
.pell-content h4, 
.pell-content h5, 
.pell-content h6,  
.pell-content span, 
.pell-content p {
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    box-sizing: border-box; 
}

/* 개별 폰트 크기 설정 */
.editable-content h1, .edi_content h1, .pell-content h1 { font-size: var(--fs_50); }
.editable-content h2, .edi_content h2, .pell-content h2 { font-size: var(--fs_40); }
.editable-content h3, .edi_content h3, .pell-content h3 { font-size: var(--fs_30); }
.editable-content h4, .edi_content h4, .pell-content h4 { font-size: var(--fs_25); }
.editable-content h5, .edi_content h5, .pell-content h5 { font-size: var(--fs_20); }
.editable-content h6, .edi_content h6, .pell-content h6 { font-size: var(--fs_18); }
.editable-content p, .edi_content p, .pell-content p { font-size: var(--fs_p); }

/* 폰트 크기 클래스 추가 */
.editable-content .fs-12, .edi_content .fs-12, .pell-content .fs-12 { font-size: var(--fs_12) !important; }
.editable-content .fs-14, .edi_content .fs-14, .pell-content .fs-14 { font-size: var(--fs_14) !important; }
.editable-content .fs-16, .edi_content .fs-16, .pell-content .fs-16 { font-size: var(--fs_16) !important; }
.editable-content .fs-18, .edi_content .fs-18, .pell-content .fs-18 { font-size: var(--fs_18) !important; }
.editable-content .fs-20, .edi_content .fs-20, .pell-content .fs-20 { font-size: var(--fs_20) !important; }
.editable-content .fs-24, .edi_content .fs-24, .pell-content .fs-24 { font-size: var(--fs_24) !important; }
.editable-content .fs-28, .edi_content .fs-28, .pell-content .fs-28 { font-size: var(--fs_28) !important; }
.editable-content .fs-30, .edi_content .fs-30, .pell-content .fs-30 { font-size: var(--fs_30) !important; }
.editable-content .fs-32, .edi_content .fs-32, .pell-content .fs-32 { font-size: var(--fs_32) !important; }
.editable-content .fs-36, .edi_content .fs-36, .pell-content .fs-36 { font-size: var(--fs_36) !important; }
.editable-content .fs-40, .edi_content .fs-40, .pell-content .fs-40 { font-size: var(--fs_40) !important; }
.editable-content .fs-48, .edi_content .fs-48, .pell-content .fs-48 { font-size: var(--fs_48) !important; }
.editable-content .fs-50, .edi_content .fs-50, .pell-content .fs-50 { font-size: var(--fs_50) !important; }

/* editable-content 내부의 span 높이 조절 */
.editable-content span,
.edi_content span,
.pell-content span {
    display: inline;
    vertical-align: baseline;
}

/* 큰 글자 크기일 때 line-height 자동 조절 */
.editable-content span[style*="--fs_50"],
.editable-content span[style*="--fs_40"],
.editable-content span[style*="--fs_30"] {
    line-height: 1.2 !important;
}

.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;  }
.module_hidden_item.edit_hover .editable-content { cursor: pointer;} 
.module_hidden_item.edit_hover .editable-content:hover { outline: 2px dashed red; border-radius: 20px;}
#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; }
#bo_w .wr_2_edit .pell-content, #bo_w .wr_3_edit .pell-content { height: 200px; }

.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;
}

/* 모율 이동시 */
#sortable .list_info_box.edit_hover { cursor: move; }
.list_info_box.edit_hover:hover {border: 0.1px dashed var(--color-main);}

/* 추가된 중앙 모달창 */
.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); }

/* 모듈스위치 토클 */
.art_switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.art_switch input { opacity: 0; width: 0; height: 0; }
.art_slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.art_slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white;transition: .4s; }
input:checked + .art_slider { background-color: var(--color-main); }
input:checked + .art_slider:before { transform: translateX(26px); }
.art_slider.round { border-radius: 34px; }
.art_slider.round:before {  border-radius: 50%; }

.w_10 { width: 10%; }
.w_20 { width: 20%; }
.w_30 { width: 30%; }
.w_40 { width: 40%; }
.w_50 { width: 50%; }
.w_60 { width: 60%; }
.w_70 { width: 70%; }
.w_80 { width: 80%; }
.w_90 { width: 90%; }

.radius_0 { border-radius: 0px;}
.radius_4 { border-radius: 4px;}
.radius_8 { border-radius: 8px;}
.radius_10 { border-radius: 10px;}
.radius_15 { border-radius: 15px;}
.radius_20 { border-radius: 20px;}
.radius_50 { border-radius: 50px;}
.radius_100 { border-radius: 100%;}

.word_keep{ 
  word-break: keep-all;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}


/* 색상 피커 오버레이 */
.color-picker-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100002 !important;
    animation: fadeIn 0.3s ease !important;
}

/* 색상 피커 컨테이너 */
.color-picker-container {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    width: 90% !important;
    max-width: 420px !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    animation: slideUp 0.3s ease !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 색상 피커 헤더 */
.color-picker-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.color-picker-header h4 {
    margin: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: -0.02em !important;
}

.color-picker-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    color: #fff !important;
    cursor: pointer !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.color-picker-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: rotate(90deg) !important;
}

/* 색상 피커 본문 */
.color-picker-body {
    padding: 24px !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 80px) !important;
}

/* 메인 색상 디스플레이 */
#color-input {
    width: 100% !important;
    height: 80px !important;
    border: 3px solid #e8e8e8 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

#color-input:hover {
    border-color: #667eea !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* 색상 프리셋 */
.color-presets {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    padding: 16px !important;
    background: #f9f9fb !important;
    border-radius: 12px !important;
}

.color-preset {
    width: 100% !important;
    aspect-ratio: 1 !important;
    border: 3px solid transparent !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.color-preset:hover {
    transform: scale(1.15) !important;
    border-color: #667eea !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    z-index: 1 !important;
}

/* HEX 입력 그룹 */
.color-input-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    padding: 16px !important;
    background: #f9f9fb !important;
    border-radius: 12px !important;
}

.color-input-group label {
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    color: #555 !important;
    min-width: 45px !important;
    letter-spacing: 0.5px !important;
}

#hex-input {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 2px solid #e8e8e8 !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-family: 'Courier New', monospace !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    background: #fff !important;
}

#hex-input:focus {
    outline: none !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
}

/* 색상 피커 액션 버튼 */
.color-picker-actions {
    display: flex !important;
    gap: 12px !important;
}

.btn-apply-color,
.btn-cancel-color {
    flex: 1 !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-apply-color {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

.btn-apply-color:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}

.btn-cancel-color {
    background: #fff !important;
    color: #666 !important;
    border: 2px solid #e8e8e8 !important;
}

.btn-cancel-color:hover {
    background: #f5f5f5 !important;
    border-color: #d0d0d0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}