/* 카테고리별 가이드 박스 */
.category-guide-box {
    background: #faf5ff;
    border: 1px solid #e0e7ff; /* 현대적인 보라빛 테두리 */
    border-radius: 8px;
    padding: 16px; /* 패딩 줄임 */
    margin-bottom: 15px; /* 마진 줄임 */
    transition: all 0.3s ease;
    width: 100%; /* 전체 폭 사용 - 글쓰기 폼과 동일 */
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.05);
}

.category-guide-box.active {
    background: #fff;
    border-color: #6366f1; /* 현대적인 액센트 색상 */
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); /* 현대적인 그림자 */
}

/* 가이드 헤더 */
.guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px; /* 마진 줄임 */
    padding-bottom: 8px; /* 패딩 줄임 */
    border-bottom: 1px solid #eee; /* 구분선 추가로 더 깔끔하게 */
}

.guide-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1; /* 좌측 공간 확보 */
}

.guide-title-wrap i {
    color: #2c3e50;
    font-size: 17px;
    opacity: 0.8;
}

.guide-title-wrap h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
    letter-spacing: normal; /* 기본 글자 간격으로 깔끔하게 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-rendering: optimizeLegibility; /* 글꼴 렌더링 최적화 */
    -webkit-font-smoothing: antialiased; /* 맥/iOS에서 글꼴 부드럽게 */
}

/* 서식 사용 버튼 */
.btn-template {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    padding: 8px 16px; /* 패딩 줄여서 덜 두껍게 */
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.2);
}

.btn-template:hover {
    background: linear-gradient(135deg, #5b5bd6 0%, #7c3aed 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-template:active {
    transform: translateY(0);
}

.btn-template i {
    margin-right: 6px;
    font-size: 13px;
}

.category-guide-box.active .btn-template {
    display: inline-flex;
    align-items: center;
}

/* 가이드 텍스트 */
.guide-text {
    color: #666;
    line-height: 1.5;
}

/* 기본 메시지 디자인 개선 */
.guide-text .default-message {
    margin: 0;
    padding: 20px;
    text-align: center;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    color: #6366f1;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 60px; /* 고정 높이로 간결하게 */
}

.guide-text .default-message::before {
    content: "📋";
    font-size: 20px;
    opacity: 0.8;
}

/* after 가상요소 제거 */
.guide-text .default-message::after {
    display: none;
}

/* 깔끔한 그리드 레이아웃 */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PC에서 4개 한줄로 */
    gap: 0;
    background: #fff;
    border: 1px solid #e0e7ff; /* 현대적인 보라빛 테두리 */
    border-radius: 8px;
    overflow: hidden;
    height: 100px; /* 전체 가이드 영역 고정 높이 */
    width: 100%; /* 전체 폭 사용 */
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.05);
}

.guide-item {
    padding: 8px; /* 패딩 줄여서 꽉 차게 */
    border-right: 1px solid #e0e7ff; /* 현대적인 구분선 */
    background: #faf5ff; /* 현대적인 배경색 */
    transition: all 0.2s ease;
    height: 100%; /* 부모의 전체 높이 사용 */
    width: 100%; /* 전체 폭 사용 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box; /* 패딩 포함한 크기 계산 */
}

.guide-item:nth-child(even) {
    background: #fff;
}

.guide-item:hover {
    background: #f3e8ff;
    transform: translateY(-1px);
}

/* 마지막 항목의 우측 테두리 제거 */
.guide-item:last-child {
    border-right: none;
}

/* 모든 항목의 하단 테두리 제거 (한줄이므로) */
.guide-item {
    border-bottom: none;
}

.item-label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 4px;
    display: block;
    line-height: 1.3;
}

.item-desc {
    color: #7f8c8d;
    font-size: 13px;
    line-height: 1.4;
}

/* 내용 작성 섹션 개선 */
.content-write-section {
    margin-top: 20px; /* 마진 줄여서 더 컴팩트하게 */
    width: 100%; /* 원래대로 전체 폭 사용 */
    background: linear-gradient(135deg, #faf5ff 0%, #f8faff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.05);
}

.content-write-header {
    margin-bottom: 0;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 8px 8px 0 0;
}

.content-write-header label {
    font-size: 16px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0; /* 마진 제거 */
}

.content-write-header label i {
    color: rgba(255, 255, 255, 0.9);
}

.content-write-area {
    background: #fff;
    border: none;
    border-radius: 0 0 8px 8px;
    padding: 8px; /* 패딩 최소화하여 에디터가 전체 영역 사용 */
    margin-top: 0; /* 마진 제거 */
    width: 100%;
    max-width: none; /* 최대 너비 제한 해제 */
    box-sizing: border-box;
}

/* textarea 컨테이너 스타일 */
.editor-container {
    margin: 0; /* 마진 제거 */
    width: 100% !important;
    max-width: none !important;
}

/* textarea 전용 스타일 */
.content-write-area textarea {
    width: 100% !important;
    max-width: none !important;
    border: 2px solid #e0e7ff !important;
    border-radius: 8px !important;
    padding: 16px !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    resize: vertical !important;
    min-height: 350px !important;
    background: #fefefe !important;
    transition: all 0.3s ease !important;
}

.content-write-area textarea:focus {
    border-color: #6366f1 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
    outline: none !important;
}

/* 글자수 제한 정보 */
.char-limit-info {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #e0e7ff; /* 현대적인 보라빛 테두리 */
    border-radius: 6px;
    padding: 10px 12px; /* 패딩 줄임 */
    margin-bottom: 12px; /* 마진 줄임 */
    color: #6366f1;
    font-size: 13px; /* 폰트 크기 줄임 */
    display: flex;
    align-items: center;
    gap: 6px;
}

.char-limit-info i {
    color: #6366f1;
}

.char-count-info {
    text-align: right;
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}

.char-count-info #char_count {
    font-weight: 600;
    color: #6366f1;
    margin-right: 5px;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .category-guide-box {
        padding: 12px; /* 모바일에서 더 컴팩트하게 */
    }
    
    .guide-header {
        flex-direction: row !important; /* 모바일에서도 가로로 유지 */
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px; /* 간격 줄임 */
        padding-bottom: 8px; /* 패딩 줄임 */
        margin-bottom: 8px; /* 마진 줄임 */
    }
    
    .guide-title-wrap {
        flex: 1; /* 나머지 공간 모두 사용 */
        min-width: 0; /* flex 아이템 축소 허용 */
    }
    
    .guide-title-wrap h4 {
        font-size: 14px !important; /* 모바일에서 작게 조정 */
        white-space: nowrap !important; /* 제목 줄바꿈 방지 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .guide-title-wrap i {
        font-size: 14px; /* 모바일에서 아이콘도 조정 */
    }
    
    /* 모바일에서 기본 메시지 조정 */
    .guide-text .default-message {
        padding: 15px 12px; /* 모바일에서 더 간결하게 */
        min-height: 50px; /* 모바일에서 높이 줄임 */
        font-size: 13px;
    }
    
    .guide-text .default-message::before {
        font-size: 18px; /* 모바일에서 이모지 크기 줄임 */
    }
    
    .guide-grid {
        grid-template-columns: 1fr 1fr; /* 모바일에서 2열 */
        height: 120px; /* 모바일에서 전체 가이드 영역 고정 높이 */
        width: 100%; /* 모바일에서도 전체 폭 사용 */
    }
    
    
    .guide-item {
        padding: 6px; /* 모바일에서도 패딩 줄여서 꽉 차게 */
        font-size: 13px;
        height: 100%; /* 부모 높이 전체 사용 */
        width: 100%; /* 전체 폭 사용 */
        border-bottom: 1px solid #c4b5fd; /* 구분선 색상 더 진하게 */
        box-sizing: border-box; /* 패딩 포함한 크기 계산 */
    }
    
    .guide-item:nth-child(2n) {
        border-right: none;
    }
    
    .guide-item:nth-last-child(-n+2) {
        border-bottom: none;
    }
    
    .item-label {
        font-size: 13px;
        margin-bottom: 3px;
    }
    
    .item-desc {
        font-size: 12px;
    }
    
    .content-write-area {
        padding: 12px; /* 모바일에서 더 간결하게 */
    }
    
    
    .btn-template {
        width: auto !important; /* 자동 크기 */
        flex-shrink: 0 !important; /* 축소 방지 */
        justify-content: center;
        margin-top: 0 !important; /* 마진 제거 */
        padding: 6px 10px !important; /* 패딩 줄임 */
        font-size: 11px !important; /* 폰트 작게 */
        white-space: nowrap !important; /* 텍스트 줄바꿈 방지 */
    }
}

/* 매우 작은 화면에서만 1열로 */
@media (max-width: 400px) {
    .guide-grid {
        grid-template-columns: 1fr;
        height: 200px; /* 작은 화면에서 1열일 때 전체 가이드 영역 고정 높이 */
        width: 100%; /* 작은 화면에서도 전체 폭 사용 */
    }
    
    .guide-item {
        border-right: none !important;
        padding: 4px; /* 작은 화면에서도 패딩 최소화해서 꽉 차게 */
        height: 100%; /* 부모 높이 전체 사용 */
        width: 100%; /* 전체 폭 사용 */
        border-bottom: 1px solid #c4b5fd; /* 구분선 색상 더 진하게 */
        box-sizing: border-box; /* 패딩 포함한 크기 계산 */
    }
    
    .guide-item:last-child {
        border-bottom: none;
    }
    
    .category-guide-box {
        padding: 10px; /* 작은 화면에서 더 컴팩트하게 */
        margin-bottom: 12px; /* 마진 줄임 */
    }
    
    .guide-title-wrap h4 {
        font-size: 15px;
        font-weight: 600; /* 작은 화면에서는 조금 가벼운 굵기 */
    }
    
    .guide-title-wrap i {
        font-size: 15px; /* 작은 화면에서 아이콘도 조정 */
    }
    
    /* 작은 화면에서 기본 메시지 조정 */
    .guide-text .default-message {
        padding: 12px 10px; /* 작은 화면에서 더 컴팩트하게 */
        min-height: 45px; /* 작은 화면에서 높이 더 줄임 */
        font-size: 12px;
    }
    
    .guide-text .default-message::before {
        font-size: 16px; /* 작은 화면에서 이모지 더 작게 */
    }
    
    .btn-template {
        padding: 8px 14px; /* 작은 화면에서 더 컴팩트하게 */
        font-size: 12px;
    }
}

/* 애니메이션 효과 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

.category-guide-box.active .guide-grid {
    animation: slideDown 0.4s ease-out;
}

.category-guide-box.active {
    transform: translateZ(0); /* GPU 가속 활성화 */
}

/* 기존 스타일 정리 */
.info-guide-section {
    display: none !important;
}