/* ==============================================
   detail.css - 게시글 상세 페이지 전용 스타일
   ============================================== */

/* 1. 본문 텍스트 설정 (줄바꿈 처리) */
.content-body {
    font-size: 1.1rem; /* 글자 크기 살짝 키움 (가독성) */
    line-height: 1.8;  /* 줄 간격 넉넉하게 */
    color: #444;       /* 너무 새카만 블랙보다 부드러운 진회색 */

    /* ★ 핵심: DB의 줄바꿈(\n)과 띄어쓰기를 그대로 표현 */
    white-space: pre-wrap;
    word-break: break-all; /* 긴 주소 등이 박스를 뚫고 나가는 것 방지 */
}

/* 2. 전체 레이아웃 컨테이너 */
.detail-container {
    max-width: 900px;

    /* ★★★ [수정 1] 헤더 겹침 해결! ★★★ */
    /* 헤더 높이(80px) + 여유 공간(60px) = 140px */
    margin: 140px auto 80px auto;

    padding: 50px;
    border: 1px solid #f0f0f0; /* 테두리는 연하게 */
    border-radius: 20px;       /* 요즘 트렌드: 둥근 모서리 */
    background-color: #ffffff;

    /* 살짝 붕 뜬 느낌의 고급 그림자 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 3. 헤더 영역 (제목 + 정보) */
.detail-header {
    border-bottom: 2px solid #333;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.detail-title {
    font-size: 2rem; /* 제목은 시원하게 큼직하게 */
    font-weight: 800;
    color: #222;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.detail-meta {
    font-size: 0.95rem;
    color: #777;
    display: flex;
    gap: 20px; /* 항목 사이 간격 */
}

/* 4. 콘텐츠 영역 */
.detail-content {
    min-height: 300px;
    padding-bottom: 50px;
    border-bottom: 1px solid #eee;
}

/* [추가] 이미지 스타일 (엑박 방지 & 예쁘게 보이기) */
.detail-image-wrapper {
    text-align: center; /* 이미지 가운데 정렬 */
    margin-bottom: 30px;
}

.detail-image-wrapper img {
    max-width: 100%; /* 이미지가 박스를 뚫고 나가지 않게 제한 */
    height: auto;
    border-radius: 15px; /* 이미지 모서리 둥글게 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 이미지 그림자 */
    display: block;
    margin: 0 auto;
}

/* 5. 하단 버튼 영역 */
.detail-footer {
    text-align: center;
    margin-top: 40px;
}

/* ★★★ [수정 2] 버튼 색상 변경 (초록 -> 주황) ★★★ */
.btn-list {
    display: inline-block;
    padding: 14px 45px; /* 버튼 크기 키움 */

    /* 브랜드 컬러 적용 */
    background-color: #FB8500;
    color: white;

    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 50px; /* 알약 모양 */

    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(251, 133, 0, 0.3);
}

.btn-list:hover {
    background-color: #e67300; /* 호버 시 더 진한 주황색 */
    transform: translateY(-3px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 6px 15px rgba(251, 133, 0, 0.5);
}

/* 6. 모바일 반응형 (화면 좁을 때) */
@media (max-width: 768px) {
    .detail-container {
        margin-top: 10