/**
 * 告别单身指南模块样式
 * 适配场景：交友网站"如何告别单身"引导模块
 * 兼容：现代浏览器（Chrome/Firefox/Safari/Edge）、移动端
 * 最后更新：2026-03-20
 */

/* 核心容器：整个指南模块 */
.recommendation-section {
    margin: 15px 0;
    padding: 10px;
    box-sizing: border-box; /* 统一盒模型，避免padding溢出 */
}

/* 模块标题："如何告别单身:" */
.recommendation-title {
    font-size: 16px;
    font-weight: 600;
    color: #333; /* 深灰色主标题，提升可读性 */
    margin: 0 0 10px 0;
    line-height: 1.4; /* 优化行高，避免文字拥挤 */
}

/* 指南内容容器 */
.profile-guide {
    width: 100%;
    box-sizing: border-box;
}

/* 滚动容器：适配移动端横向滚动 */
.guide-container {
    overflow-x: auto;
    /* 隐藏滚动条（可选，提升视觉体验） */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 滚动容器滚动条隐藏（webkit内核） */
.guide-container::-webkit-scrollbar {
    display: none;
}

/* 指南表格：核心布局 */
.guide-table {
    width: 100%;
    border-collapse: collapse; /* 合并边框，避免双线条 */
    table-layout: fixed; /* 固定列宽，防止内容拉伸表格 */
}

/* 步骤行（1、用户注册 等） */
.guide-step-row {
    background-color: #f8f9fa; /* 浅灰背景，区分标题行 */
}

/* 步骤单元格样式 */
.guide-step-cell {
    padding: 8px 5px;
    text-align: center;
    font-weight: 600;
    color: #d9534f; /* 主题红，突出步骤 */
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

/* 描述单元格样式（步骤说明文字） */
.guide-desc-cell {
    padding: 10px 8px;
    font-size: 13px;
    color: #666; /* 浅灰色，降低视觉权重 */
    line-height: 1.5; /* 优化行高，提升阅读体验 */
    vertical-align: top; /* 顶部对齐，视觉更整齐 */
    border: 1px solid #eee;
    border-top: none; /* 取消上边框，与步骤行边框合并 */
}

/* 链接基础样式 */
.guide-desc-cell a {
    color: #0066cc; /* 标准链接蓝 */
    text-decoration: none;
    transition: color 0.2s ease; /* hover过渡动画，提升交互感 */
}

/* 链接hover状态 */
.guide-desc-cell a:hover {
    color: #004999; /* 深色hover，符合交互规范 */
    text-decoration: underline;
}

/* 响应式适配：768px以下移动端 */
@media (max-width: 768px) {
    .guide-step-cell {
        font-size: 13px;
        padding: 6px 3px; /* 减少内边距，适配小屏 */
    }
    .guide-desc-cell {
        font-size: 12px;
        padding: 8px 5px;
    }
    .recommendation-title {
        font-size: 15px; /* 标题字号缩小 */
    }
}

/* 额外适配：超小屏（480px以下） */
@media (max-width: 480px) {
    .recommendation-section {
        padding: 8px 5px;
        margin: 10px 0;
    }
    .guide-desc-cell {
        line-height: 1.4; /* 进一步优化行高 */
    }
}