/* 1. 기본 베이스 및 레이아웃 설정 */
#bbs {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Malgun Gothic', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* 2. 게시글 및 답글 스타일 (출력 영역) */
.post {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.post-name {
    font-size: 1.1em;
    font-weight: 800;
}

.timestamp {
    font-size: 0.8em;
    color: #888888;
    margin-left: 8px;
}

.reply {
    margin-left: 30px;
    padding: 10px;
    background-color: #e2e2e2;
    border-left: 3px solid #222222;
    margin-top: 5px;
}

/* 3. 공통 요소 스타일 (버튼, 입력창) */
button {
    padding: 3px 11px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: 0.2s;
}

/* 인라인 폼용 토글 버튼색 */
.toggle-btn {
    background-color: #eee;
    color: #333;
}

/* 비밀번호 입력용 인라인 폼 */
.inline-form {
    display: none;
    vertical-align: middle;
}

.inline-form.active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f9f9f9;
    padding: 2px 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 4. 메인 작성 폼 커스텀 레이아웃 (.custom-layout 전용) */
.custom-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #eee; /* 폼 전체 테두리 추가 */
}

.form-top {
    display: flex;
    gap: 10px;
}

.input-box {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.input-box input, .input-box select {
    border: 1px solid #e2e2e2;
    padding: 8px;
}

.form-middle {
    display: flex;
    gap: 10px;
    height: 200px;
}

.preview-area {
    width: 100px;
    border: 0px solid #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
}

.preview-area span {
    font-size: 11px;
    color: #666;
}

/* 미리보기 이미지는 원형을 원하시면 50%, 사각형을 원하시면 제거 */
.icon-preview {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 1px solid #eee;
}

.text-area {
    flex: 1;
}

.text-area textarea {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    padding: 10px;
    box-sizing: border-box;
    resize: none; /* 레이아웃 유지를 위해 크기 조절 비활성화 */
}

.form-bottom {
    display: flex;
    justify-content: flex-end;
}

/* 메인 등록 버튼 전용 스타일 */
.form-bottom button {
    background-color: #000;
    color: #fff;
    padding: 10px 30px;
    font-size: 14px;
    font-weight: bold;
}

.form-bottom button:hover {
    background-color: #333;
}