/* 문의 상세 페이지 전용 CSS */
:root {
    --gap: 10px;
}

body {
    margin: 0;
    font-family: "Nanum Gothic", system-ui, sans-serif;
}

/* 컨테이너 - rules_attack과 동일하게 */
.inquiry_detail_container {
    margin-top: 30px;
    text-align: left;
    margin: 30px auto 0;
    padding: 0 20px;
}

/* 데스크톱 스타일 - rules_attack과 동일하게 */
@media (min-width: 769px) {
    .inquiry_detail_container {
        margin: 0 235px;
        margin-top: 30px;
        padding: 0;
    }
}

.page-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
}


.detail {
    border-top: 2px solid #eee;
}

.detail-head {
    padding: 14px 6px;
    border-bottom: 1px solid #eee;
}

.detail-head .title {
    font-size: 25px;
    font-weight: 700;
    margin: 4px 0 10px;
    text-align: left;
    color: #333;
}

.meta {
    color: #666;
    font-size: 13px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 문의 상세 전용 메타 정보 스타일 */
.meta .category {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 12px;
}

.meta .author {
    font-weight: 600;
    color: #333;
}

.meta .email {
    color: #666;
    font-style: italic;
}

.meta .date {
    color: #888;
}

.meta .status {
    background: #f3e5f5;
    color: #7b1fa2;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 12px;
}

/* 본문 */
.detail-body {
    padding: 18px 6px;
    line-height: 1.75;
    color: #222;
    height: 500px;
    white-space: pre-wrap; /* 줄바꿈 유지 */
    word-wrap: break-word; /* 긴 단어 자동 줄바꿈 */
    font-size: 20px; /* rules_attack과 동일 */
    margin-bottom: 30px;
}

/* 목록 버튼 */
.back {
    margin-top: 18px;
}

.back a {
    text-decoration: none;
    border: 1px solid #ddd;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    color: #333; /* 기본 색상 */
}

.back a:visited {
    color: #333; /* 방문 후에도 동일한 색상 유지 */
}

.back a:hover {
    color: #333; /* 호버 시에도 동일한 색상 유지 */
    background-color: #ededed; /* 호버 시 배경색만 변경 */
}

/* 반응형 */
@media (max-width: 1440px) {
    .inquiry_detail_container {
        max-width: 1200px;
    }
}

/* 반응형 - rules_attack과 동일하게 */
@media (max-width: 768px) {
    .inquiry_detail_container {
        margin: 0 20px;
        margin-top: 20px;
        padding: 0;
    }
    
    .page-title {
        font-size: 28px; /* rules_attack과 동일 유지 */
    }
    
    .detail-head .title {
        font-size: 25px; /* rules_attack과 동일 유지 */
    }
    
    .meta {
        gap: 8px;
        font-size: 12px;
    }
    
    .detail-body {
        padding: 15px 6px;
        font-size: 16px; /* rules_attack과 동일 */
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .inquiry_detail_container {
        margin: 0 20px;
        margin-top: 20px;
        padding: 0;
    }
    
    .page-title {
        font-size: 28px; /* rules_attack과 동일 유지 */
    }
    
    .meta {
        flex-direction: column;
        gap: 5px;
    }
    
    .meta .category,
    .meta .status {
        align-self: flex-start;
    }
    
    .detail-body {
        font-size: 16px; /* rules_attack과 동일 */
    }
}