/* =========================================
   楠楠漫画 - 前端样式升级 v1.0
   实现：手机端适配、PC端固定框、首页美化、字体图标升级
   ========================================= */

/* ========== 1. 全局变量 & 字体 ========== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --primary-color: #3674ff;
    --primary-light: #b9d9ff;
    --primary-dark: #2563eb;
    --bg-gradient-start: #b9d9ff;
    --bg-gradient-end: #fff;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.15);
    --border-radius: 12px;
    --transition-speed: 0.3s;
    --max-width: 750px;
}

/* 强制背景覆盖 */
html {
    background: linear-gradient(180deg, #b9d9ff 0%, #fff 30%, #fff 70%, #b9d9ff 100%) !important;
}

/* PC端首页固定框 - 使用更广泛的匹配 */
@media (min-width: 768px) {
    /* 首页容器使用固定框 */
    #index .pc-wrapper,
    .pc-wrapper {
        display: block !important;
        max-width: 750px !important;
        width: 750px !important;
        margin: 0 auto !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #fff !important;
        box-shadow: 0 0 50px rgba(54, 116, 255, 0.2) !important;
    }
    
    /* header固定定位改为相对定位 */
    #index .pc-wrapper header,
    .pc-wrapper header,
    header.hasManyCity {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 750px !important;
    }
    
    /* 底部导航 */
    #index .pc-wrapper .bottom,
    .pc-wrapper .bottom,
    .bottom {
        position: sticky !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 750px !important;
    }
}

/* ========== 2. 字体设置 ========== */
body {
    font-family: 'Noto Sans SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== 3. 手机端响应式 & 修复左右滑动 ========== */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    
    body {
        overflow-x: hidden;
    }
    
    /* 修复漫画阅读页面横向滚动 */
    .arcread-body,
    .read-article,
    #row,
    .chapter-content,
    .chapter_images,
    .chapter-images {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .arcread-body img,
    .read-article img,
    #row img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 漫画图片容器 */
    figure.item {
        max-width: 100% !important;
        overflow: hidden;
    }
    
    figure.item img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* 通用移动端禁止横向滚动 */
    * {
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    .container,
    .wrap,
    .page-center-box {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ========== 5. 首页漫画卡片样式 ========== */
.sy_recmd_list {
    padding: 8px !important;
    margin-bottom: 15px !important;
}

.sy_recmd_list .box {
    background: #fff;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: all var(--transition-speed) ease;
}

.sy_recmd_list .box:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

.sy_recmd_list .pub_img {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.sy_recmd_list .pub_img img {
    width: 100% !important;
    height: auto !important;
    display: block;
    transition: transform var(--transition-speed);
}

.sy_recmd_list .box:hover .pub_img img {
    transform: scale(1.05);
}

.sy_recmd_list .pub_wz {
    padding: 12px;
}

.sy_recmd_list .pub_wz h3 {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.sy_recmd_list .pub_wz p {
    font-size: 12px;
    color: #999;
}

/* ========== 6. 首页响应式栅格系统 ========== */
.sy_recmd_list_box {
    padding: 15px;
}

.sy_recmd_list_box ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 0;
    margin: 0;
}

@media (max-width: 480px) {
    .sy_recmd_list_box ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (min-width: 768px) {
    .sy_recmd_list_box ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* ========== 7. 轮播图美化 ========== */
.swiper-container {
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.swiper-slide img {
    border-radius: var(--border-radius);
}

/* ========== 8. 头部导航美化 ========== */
header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    box-shadow: 0 2px 10px rgba(54, 116, 255, 0.3);
}

header .cityBtn2,
header .link-url,
header .qrcodeBtn {
    filter: brightness(10) invert(1);
}

/* ========== 9. 底部导航美化 ========== */
.bottom {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    box-shadow: 0 -2px 20px rgba(54, 116, 255, 0.2);
}

/* ========== 10. 按钮样式 ========== */
.btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 8px 20px !important;
    color: #fff !important;
    font-weight: 500;
    transition: all var(--transition-speed);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(54, 116, 255, 0.4);
}

/* ========== 11. 搜索框美化 ========== */
.custom-search .searchBox {
    border-radius: 20px !important;
    border: none !important;
    padding: 8px 15px !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

/* ========== 12. 标签样式 ========== */
.tags .label .item a {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color)) !important;
    border-radius: 15px !important;
    padding: 4px 12px !important;
    font-size: 12px;
}

/* ========== 13. 漫画详情页 ========== */
.cover-box .title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333 !important;
}

/* ========== 14. 漫画列表页 ========== */
.book-list-item {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 15px;
    overflow: hidden;
    transition: all var(--transition-speed);
}

.book-list-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

/* ========== 15. 用户中心 ========== */
.uc-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* ========== 16. 加载动画 ========== */
.loading-more {
    text-align: center;
    padding: 20px;
    color: var(--primary-color);
}

/* ========== 17. Font Awesome 图标兼容 ========== */
/* 兼容旧的图标class */
.icon-gray-hot::before {
    content: "\f0a4";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 4px;
}

.icon-home::before {
    content: "\f015";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.icon-user::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.icon-book::before {
    content: "\f02d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.icon-star::before {
    content: "\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.icon-heart::before {
    content: "\f004";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.icon-search::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.icon-caret-down::before {
    content: "\f0d7";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.icon-arrow::before {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* ========== 18. 首页标题栏 ========== */
.sy_recmd {
    margin-top: 20px;
}

.sy_recmd h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    padding: 15px;
    border-left: 4px solid var(--primary-color);
    margin-bottom: 15px;
}

/* ========== 19. 响应式间距优化 ========== */
@media (max-width: 767px) {
    header {
        height: 50px;
    }
    
    .wrap {
        margin-top: 55px !important;
    }
    
    .swiper-container {
        height: 180px !important;
    }
    
    .swiper-slide img {
        height: 180px !important;
    }
}

/* ========== 20. 分类标签 ========== */
.tabs {
    background: #fff;
    border-radius: var(--border-radius);
    margin: 10px;
    box-shadow: var(--card-shadow);
}

.tabs a {
    font-weight: 500;
    color: #666 !important;
}

.tabs a.active {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
}

/* ========== 21. 阅读页面修复（核心） ========== */
@media (max-width: 767px) {
    /* 修复漫画阅读页面横向滚动 */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    
    .arcread-body,
    .read-article,
    #row,
    .chapter-content,
    .chapter_images,
    .chapter-images,
    .content,
    article {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .arcread-body img,
    .read-article img,
    #row img,
    .chapter-content img,
    figure.item img,
    article img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block;
    }
    
    /* 漫画图片容器 */
    figure.item {
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden;
        display: block;
    }
    
    figure.item img {
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* 通用移动端禁止横向滚动 */
    * {
        max-width: 100vw;
        box-sizing: border-box;
        word-wrap: break-word;
    }
    
    .container,
    .wrap,
    .page-center-box {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ========== 22. 漫画详情页 ========== */
.cover-box {
    background: linear-gradient(180deg, rgba(54, 116, 255, 0.1) 0%, #fff 100%);
}

.cover-box .container {
    padding: 15px;
}

.cover-box .title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 10px 0;
    text-align: center;
}

/* 标签居中 */
.cover-box .tags {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    text-align: center;
}

.cover-box .tags .label {
    margin: 0 !important;
}

.cover-box .tags .label .item a {
    display: inline-block !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

/* 按钮样式 */
.cover-box .action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 15px !important;
}

.cover-box .action .btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    border-radius: 25px !important;
    padding: 10px 25px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    display: inline-block !important;
}

.cover-box .action .btn.gray {
    padding: 10px 25px !important;
    font-size: 14px !important;
    border-radius: 25px !important;
}

.cover-box .action .back {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========== 23. 章节列表 ========== */
.chapter-list {
    background: #fff;
    border-radius: var(--border-radius);
    margin: 15px;
    padding: 15px;
    box-shadow: var(--card-shadow);
}

.chapter_all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: var(--primary-color);
    font-weight: 500;
}

/* ========== 24. 底部安全区 ========== */
@media (max-width: 767px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .bottom {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}