/* ==========================================================================
   Base styles for the post write page
   ========================================================================== */

body {
    font-family: 'Spoqa Han Sans Neo', sans-serif; /* 메인 글꼴 */
    background-color: #f8f9fa; /* 약간의 배경색 */
    color: #333;
    line-height: 1.6;
}

/* ==========================================================================
   Page Title Section
   ========================================================================== */

.page-title-section {
    margin-bottom: 30px; /* 타이틀 아래 여백 */
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.page-main-title {
    font-size: 25px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
}

.page-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    color: #6c757d;
}

/* ==========================================================================
   Write Form Container
   ========================================================================== */

.write-form-container {
    max-width: 800px; /* 이전 상세 보기와 동일한 최대 너비 */
    margin: 30px auto 30px auto; /* 상하 0, 좌우 자동 중앙 정렬 */
    padding: 30px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

/* Form Group Styling */
.form-group {
    margin-bottom: 25px; /* 각 폼 요소 간의 간격 */
}

.form-group label {
    display: block; /* 라벨을 블록 요소로 만들어 별도 줄에 표시 */
    font-size: 24px;
    font-weight: 600; /* 라벨 글씨 두께 */
    color: #212529;
    margin-bottom: 0.75rem; /* 라벨 아래 여백 */
}

.form-control { /* 공통 입력 필드 스타일 */
    padding: 0.6rem 1rem;
    font-size: 14px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
    width: 100%;
}

.form-control:focus {
    border-color: #007bff; /* 포커스 시 테두리 색상 */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 포커스 시 그림자 효과 */
}

/* 제목 입력 필드 */
.form-group input[type="text"].form-control {
    height: 45px; /* 제목 입력창 높이 */
}

/* 내용 입력 필드 (textarea) */
.form-group textarea.form-control {
    min-height: 200px; /* 내용 입력창 최소 높이 */
    resize: none; /* 세로 크기 조절만 가능 */
}

/* 카테고리 선택 */
.form-group select.form-control {
    height: 45px; /* 드롭다운 높이 */
    background-color: #fff; /* 배경색 유지 */
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.form-actions {
    margin-top: 30px; /* 버튼 섹션 위쪽 여백 */
    padding-top: 20px; /* 상단 구분선 위 여백 */
    border-top: 1px solid #e0e0e0; /* 상단 구분선 */
    text-align: right; /* 버튼 오른쪽 정렬 */
    display: flex;
    justify-content: flex-end; /* 버튼들을 오른쪽으로 정렬 */
    gap: 10px; /* 버튼 간 간격 */
}

.form-actions .btn {
    padding: 0.7rem 1.5rem;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary { /* 글 작성 버튼 */
    background-color: #007bff;
    color: #fff;
    border: none;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary { /* 취소 버튼 */
    background-color: #6c757d;
    color: #fff;
    border: none;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .write-form-container {
        margin: 20px 15px; /* 작은 화면에서 마진 조절 */
        padding: 20px;
    }

    .page-main-title {
        font-size: 2rem;
    }
    .page-subtitle {
        font-size: 1rem;
    }

    .form-group label {
        font-size: 0.95rem;
    }

    .form-control {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .form-group textarea.form-control {
        min-height: 150px; /* 모바일에서 textarea 높이 조절 */
    }

    .form-actions {
        text-align: center; /* 버튼 가운데 정렬 */
        flex-direction: column; /* 버튼들을 세로로 쌓기 */
        align-items: center; /* 버튼 가운데 정렬 */
    }

    .form-actions .btn {
        width: 100%; /* 버튼 전체 너비 */
        margin-bottom: 10px;
    }
    .form-actions .btn:last-child {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Custom Font Import (Spoqa Han Sans Neo)
   ========================================================================== */
@import url(//spoqa.github.io/spoqa-han-sans/stylesheets/SpoqaHanSansNeo.css);