/* static/css/detail.css */

/* 1. 主容器：像一张铺开的宣纸 */
.detail-container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); /* 极柔和的阴影 */
    border: 1px solid #efeadd; /* 米色边框 */
    margin-top: 20px;
    min-height: 600px;
}

/* 2. 标题区域 */
.page-title {
    font-family: "Songti SC", "Noto Serif SC", serif; /* 宋体 */
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    font-size: 26px;
}

.question-info {
    font-size: 13px;
    color: #999;
    font-family: sans-serif; /* 信息类文字用无衬线体更清晰 */
}

.question-author {
    color: #4d8076; /* 竹青色 */
    font-weight: bold;
    margin-right: 15px;
}

.question-time {
    color: #aaa;
}

/* 3. 分割线：虚线，像折痕 */
.divider {
    border: 0;
    border-top: 1px dashed #e0ded5;
    margin: 20px 0;
}

/* 4. 问题正文 */
.question-content {
    font-size: 16px;
    line-height: 1.8; /* 宽松的行高 */
    color: #3e3c3a;
    text-align: justify; /* 两端对齐 */
    white-space: pre-wrap; /* 保留换行符 */
}

/* 5. 评论区标题 */
.comment-group-title {
    margin-top: 40px;
    font-family: "KaiTi", "楷体", serif;
    font-size: 20px;
    color: #333;
    border-left: 4px solid #b85c5c; /* 左侧丹砂红竖线 */
    padding-left: 10px;
}

/* 6. 评论列表 */
.comment-group {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.comment-item {
    padding: 20px 0;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.3s;
}

.comment-item:last-child {
    border-bottom: none;
}

/* 评论人信息 */
.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px; /* 方形圆角，更像印章 */
    border: 1px solid #eee;
    margin-right: 10px;
}

.username {
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

.create-time {
    margin-left: auto; /* 靠右对齐 */
    color: #ccc;
    font-size: 12px;
}

/* 评论内容 */
.comment-text {
    margin-left: 46px; /* 与头像对齐 */
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* 7. 评论输入框美化 */
.comment-form {
    background-color: #faf9f6; /* 极淡的底色 */
    padding: 20px;
    border-radius: 4px;
    margin-top: 20px;
}

.comment-form textarea {
    border: 1px solid #e0e0e0;
    background-color: #fff;
    resize: none; /* 禁止拖动大小 */
}

.comment-form textarea:focus {
    border-color: #4d8076; /* 聚焦变竹青色 */
    box-shadow: 0 0 0 2px rgba(77, 128, 118, 0.1);
}