#editor-container {
    overflow: hidden; /* 내부 요소가 넘치지 않도록 */
}    
#editor {
    width: 100%;
    height: 100%;
    min-height: 400px;
    padding: 20px;
    border: 0; /* 에디터 테두리 제거 */
    overflow-y: auto;
    outline: 0;
    resize: none; /* 기본 리사이즈 비활성화 */
}

.toolbar {
    position: fixed;
    top: 124px;
    width: 100%;
    padding: 10px 0;
    background: #fff;
    border-bottom: 1px solid #ddd;
    z-index: 10;
}
.toolbar .inner{
    display: flex;
    align-items: center;
}
.toolbar .tool_wrap{
    display: flex;
    align-items: center;
    gap: 5px;
}
.toolbar .tool{
    padding: 0 8px;
}
.toolbar button, .toolbar select {
    display: flex;
    padding: 6px 12px;
    background: white;
    cursor: pointer;
    font-size: 14px;
}
.toolbar button:hover {
    background: #e9ecef;
}

/* 색상 선택기 스타일 수정 */
.color-picker {
    position: relative;
    display: inline-block;
}

.color-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    height: 32px;
}

.current-color {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    background: #000000;
}

.color-palette {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none;
    z-index: 1000;
    width: 200px;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}

.color-swatch {
    width: 25px;
    height: 25px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.color-swatch:hover {
    transform: scale(1.1);
    transition: transform 0.1s;
}

.palette-section {
    margin-bottom: 10px;
}

.section-title {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.recent-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}

.more-colors-btn {
    width: 100%;
    padding: 8px;
    background: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    text-align: left;
}

.more-colors-btn:hover {
    background: #e9ecef;
}

.custom-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* 툴팁 스타일 */
.toolbar button, .toolbar select, .color-picker {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 3px 8px; /* 패딩 크기 축소 */
    border-radius: 3px; /* 모서리 반경 축소 */
    font-size: 11px; /* 폰트 크기 축소 */
    white-space: nowrap;
    z-index: 1000;
    display: block;
}

[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: -8px; /* 화살표 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent; /* 화살표 크기 축소 */
    border-bottom-color: rgba(0, 0, 0, 0.8);
    display: block;
}

/* 이미지 스타일 */
#editor img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
}

/* 반응형 스타일 수정 */
@media screen and (max-width: 768px) {
    #editor-container {
        max-width: 100%;
        padding: 0;
        margin: 10px;
    }
    
    .toolbar {
        padding: 5px;
        gap: 2px;
    }
    
    .toolbar button, 
    .toolbar select,
    .color-btn {
        padding: 4px 8px;
        font-size: 12px;
        height: 28px;
        min-width: 28px;
    }

    .current-color {
        width: 12px;
        height: 12px;
    }

    /* 폰트 선택과 크기 선택 드롭다 크기 조정 */
    #font-select,
    #font-size-select {
        max-width: 100px;
    }
}

/* 이미지 툴팁 스타일 수정 */
.image-tooltip {
    position: fixed; /* absolute에서 fixed로 변경 */
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* 이미지 컨테이너 스타일 수정 */
.image-container {
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px; /* 좌우 여백 추가 */
}

/* 폰트 선택 스타일 추가 */
#font-select option {
    font-size: 14px;
    padding: 5px;
}
#font-select option[value="Arial"] { font-family: Arial, sans-serif; }
#font-select option[value="Helvetica"] { font-family: Helvetica, sans-serif; }
#font-select option[value="Times New Roman"] { font-family: "Times New Roman", serif; }
#font-select option[value="굴림"] { font-family: 림, Gulim, sans-serif; }
#font-select option[value="돋움"] { font-family: 돋, Dotum, sans-serif; }
#font-select option[value="바탕"] { font-family: 바탕, Batang, serif; }

/* 폰트 크기 선택 스타일 추가 */
#font-size-select option {
    padding: 5px;
}
#font-size-select option[value="1"] { font-size: 10px; }
#font-size-select option[value="2"] { font-size: 13px; }
#font-size-select option[value="3"] { font-size: 16px; }
#font-size-select option[value="4"] { font-size: 18px; }
#font-size-select option[value="5"] { font-size: 24px; }
#font-size-select option[value="6"] { font-size: 32px; }
#font-size-select option[value="7"] { font-size: 48px; }

/* 버튼 활성화 상태 스타일 추가 */
.toolbar button.active {
    background: #e9ecef;
    border-color: #ced4da;
}

/* 색상 스와치 툴팁 스타일 수정 */
.color-swatch[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1100;
}

.color-swatch[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    z-index: 1100;
}

/* 색상 선택기 툴팁 스타일 수정 */
.color-picker[data-tooltip] .color-palette[style*="display: block"] ~ [data-tooltip]::after,
.color-picker[data-tooltip] .color-palette[style*="display: block"] ~ [data-tooltip]::before {
    display: none;
}

/* 색상 팔레트가 닫혀있을 때만 툴팁 표시 */
.color-picker[data-tooltip]:hover .color-palette[style*="display: none"] ~ ::after,
.color-picker[data-tooltip]:hover .color-palette[style*="display: none"] ~ ::before {
    display: block;
}

/* 커스텀 색상 선택기 툴팁 스타일 */
.custom-color[data-tooltip]:hover::after {
    bottom: auto;
    top: -22px;
}

.custom-color[data-tooltip]:hover::before {
    bottom: auto;
    top: -4px;
    border-bottom-color: transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
}

/* 폰트 선택 스타일 수정 */
#font-select {
    font-size: 14px;
    padding: 6px 12px;
}

#font-select option {
    padding: 8px;
    font-size: 14px;
}

#font-select option:disabled {
    color: #ccc;
    background: #f8f9fa;
}

/* 각 폰트별 스타일 */
#font-select option[value="맑은 고딕"] { font-family: '맑은 고딕', MalgunGothic, sans-serif; }
#font-select option[value="돋움"] { font-family: 돋움, Dotum, sans-serif; }
#font-select option[value="굴림"] { font-family: 굴림, Gulim, sans-serif; }
#font-select option[value="바탕"] { font-family: 바탕, Batang, serif; }
#font-select option[value="궁서"] { font-family: 궁서, Gungsuh, serif; }
#font-select option[value="Arial"] { font-family: Arial, sans-serif; }
#font-select option[value="Helvetica"] { font-family: Helvetica, sans-serif; }
#font-select option[value="Times New Roman"] { font-family: 'Times New Roman', serif; }
#font-select option[value="Georgia"] { font-family: Georgia, serif; }
#font-select option[value="Verdana"] { font-family: Verdana, sans-serif; }

/* 폰트 크기 입력 wrapper 스타일 수정 */
.font-size-input-wrapper {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 8px;
    height: 32px;
}

#font-size-input {
    width: 40px;
    border: none;
    outline: none;
    text-align: right;
    font-size: 14px;
    padding: 0;
}

.font-size-input-wrapper span {
    font-size: 14px;  /* px 텍스트 크기 고정 */
    color: #333;      /* 텍스트 색상 지정 */
    user-select: none; /* 텍스트 선택 방지 */
}

#font-size-input::-webkit-inner-spin-button,
#font-size-input::-webkit-outer-spin-button {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .font-size-input-wrapper {
        height: 28px;
        padding: 0 4px;
    }
    
    #font-size-input {
        width: 35px;
        font-size: 12px;
    }

    .font-size-input-wrapper span {
        font-size: 12px;  /* 모바일에서의 텍스트 크기 */
    }
}

/* 폰트 크기 컨트롤 타일 */
.font-size-control {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#font-size-select {
    padding: 6px 12px;
    font-size: 14px;
    height: 32px;
    cursor: pointer;
}

#font-size-select option {
    padding: 8px;
    line-height: 1.5;
    min-height: 24px;
}

#font-size-select option[value="custom"] {
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    #font-size-select {
        height: 28px;
        padding: 4px 8px;
    }
}

.font-size-input-wrapper {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 8px;
    height: 32px;
}

#font-size-input {
    width: 40px;
    border: none;
    outline: none;
    text-align: right;
    font-size: 14px;
    padding: 0;
}

#font-size-input::-webkit-inner-spin-button,
#font-size-input::-webkit-outer-spin-button {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .font-size-control > * {
        height: 28px;
        font-size: 12px;
    }
    
    #font-size-input {
        width: 35px;
    }
}


/* 비밀글 */
/* 2024-10-29 추가: 비밀글 체크박스 스타일 */
.secret_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-right: 30px;
}
.secret_wrap label {
    font-size: 16px;
    font-weight: 400;
    color: #444;
    cursor: pointer;
}
.secret_wrap input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}
.secret_wrap input[type="checkbox"]:checked {
    background-color: var(--brandColor);
    border-color: var(--brandColor);
}
.secret_wrap input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: url(../img/lock.svg) no-repeat center/contain;
    filter: brightness(0) invert(1);
    /* SVG를 흰색으로 변경 */
}


/* 내용 입력창 */
.sc_container{
    margin-top: 176px;
    padding: 0;
    padding-bottom: 80px;
    background: #f5f5f5;
}
.sc_container .editor_area{
    padding: 70px 50px 30px;
    background: #fff;
    border: 1px solid #ddd;
}
.sc_container .editor_title {
    width: 100%;
    margin-bottom: 30px;
    font-size: 35px;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    resize: none;
}
.sc_container .editor_title::placeholder {
    color: #bbb;
}


/* 첨부파일 - 2024-10-29 수정: flex-direction column 추가 */
.file_box {
    display: flex;
    flex-direction: column;
    /* 2024-10-29 수정: 세로 방향 정렬로 변경 */
    padding: 15px 0;
    border-top: 1px solid #ddd;
}
/* 2024-10-29 추가: 파일 업로드 래퍼 */
.file_upload_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* 2024-10-29 수정: 파일 버튼 스타일 통일성 */
.file {
    display: inline-block;
    padding: 8px 15px;
    font-size: 15px;
    font-weight: 500;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    color: #444;
}
/* 2024-10-29 수정: 파일 input 숨김 처리 */
input[type="file"] {
    display: none;
}
/* 2024-10-29 추가: 파일 목록 컨테이너 */
.file_list {
    margin-top: 10px;
    width: 100%;
}
/* 2024-10-29 추가: 파일 아이템 스타일 */
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: #f8f8f8;
    margin: 5px 0;
    border-radius: 4px;
    border: 1px solid #ddd;
}
/* 2024-10-29 추가: 파일 삭제 버튼 */
.delete-file {
    background: none;
    border: none;
    color: var(--brandColor2);
    cursor: pointer;
    padding: 0 5px;
    font-size: 18px;
}
/* 2024-10-29 추가: 총 용량 표시 */
.total-size {
    color: #666;
    font-size: 14px;
    margin-left: auto;
}

/* 저장 */

.save_box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding-top: 30px;
}