AI 웹 개발 : 반응형 게시판 글쓰기 & 댓글 기능 구현하기 (초보자ㆍ비전공자를 위한 AI 웹 개발 실무 시리즈) | Part 3

게시판 글쓰기 페이지의 UI를 만들어 줘.

조건:
- HTML과 CSS만 사용
- 모바일 기준(Mobile First)
- 제목 입력 input
- 본문 입력 textarea
- 하단에 등록/취소 버튼 영역
- 게시판 목록 페이지와 자연스럽게 이어지는 구조
- 각 영역에 주석을 상세하게 작성

실제 저장 기능은 구현하지 않고 UI 구조와 레이아웃에 집중해줘.

<!-- 
                ============================================
                글쓰기 폼 영역 (Write Form Section)
                ============================================
                게시글 작성에 필요한 입력 필드들이 들어가는 영역
                제목 입력과 본문 입력 필드 포함
            -->
            <section class="write-form-section">
                <!-- 
                    글쓰기 폼 컨테이너
                    form 태그를 사용하여 폼 구조를 명확하게 표현
                    (실제 저장 기능은 구현하지 않으므로 action과 method는 생략)
                -->
                <form class="write-form" action="#" method="post">
                    
                    <!-- 
                        ============================================
                        제목 입력 그룹 (Title Input Group)
                        ============================================
                        게시글 제목을 입력하는 필드와 라벨을 묶는 그룹
                    -->
                    <div class="form-group">
                        <!-- 제목 입력 필드의 라벨 -->
                        <label for="title" class="form-label">
                            제목
                            <!-- 필수 입력 표시 (빨간 별표) -->
                            <span class="required">*</span>
                        </label>
                        <!-- 제목 입력 필드 (input 태그 사용) -->
                        <input 
                            type="text" 
                            id="title" 
                            name="title" 
                            class="form-input title-input" 
                            placeholder="게시글 제목을 입력하세요"
                            required
                        >
                    </div>

                    <!-- 
                        ============================================
                        본문 입력 그룹 (Content Input Group)
                        ============================================
                        게시글 본문을 입력하는 필드와 라벨을 묶는 그룹
                    -->
                    <div class="form-group">
                        <!-- 본문 입력 필드의 라벨 -->
                        <label for="content" class="form-label">
                            본문
                            <!-- 필수 입력 표시 (빨간 별표) -->
                            <span class="required">*</span>
                        </label>
                        <!-- 본문 입력 필드 (textarea 태그 사용) -->
                        <textarea 
                            id="content" 
                            name="content" 
                            class="form-textarea content-textarea" 
                            placeholder="게시글 내용을 입력하세요"
                            required
                        ></textarea>
                    </div>

                </form>
                <!-- write-form 끝 -->
            </section>
            <!-- write-form-section 끝 -->

게시판 댓글 UI를 만들어 줘.

조건:
- 댓글 입력 textarea
- 댓글 등록 버튼
- 댓글 목록 영역
- 각 댓글은 작성자, 내용, 작성 시간 표시
- 모바일 기준 레이아웃
- 실제 동작은 없고 UI 구조만 구현

게시글 하단에 자연스럽게 배치되도록 구성해 줘.

<!-- 
                    ============================================
                    댓글 입력 영역 (Comment Input Section)
                    ============================================
                    댓글을 작성하는 입력 필드와 등록 버튼이 들어가는 영역
                -->
                <div class="comment-input-section">
                    <!-- 댓글 입력 폼 -->
                    <form class="comment-form">
                        <!-- 댓글 입력 필드 -->
                        <textarea 
                            class="comment-input" 
                            placeholder="댓글을 입력하세요"
                            rows="4"
                        ></textarea>
                        <!-- 댓글 등록 버튼 -->
                        <div class="comment-submit-wrapper">
                            <button type="button" class="btn btn-primary comment-submit-btn">
                                등록
                            </button>
                        </div>
                    </form>
                </div>
                <!-- comment-input-section 끝 -->