/* hmg mobile v2 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:#f2f2f2}
body{font-family:"PingFang SC","Lantinghei SC","Microsoft Yahei",sans-serif;font-size:.24rem;color:#28292d;background:#f2f2f2;max-width:640px;margin:0 auto;line-height:1.4}
a{text-decoration:none;outline:none;color:inherit}
img{max-width:100%;height:auto;display:block;border:0;vertical-align:middle}
h1,h2,h3,h4{margin:0;font-weight:normal}
ul,ol{list-style:none;margin:0;padding:0}
p{margin:0}
.clearfix::after{content:"";display:table;clear:both}
.hide{display:none}
input,button,select{font:inherit;color:inherit}

.header{background:linear-gradient(135deg,#e83737 0%,#c72828 100%);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:.2rem .24rem;position:sticky;top:0;z-index:100;min-height:.88rem}
.header .logo a{font-size:.32rem;font-weight:800;color:#fff}
.header .logo_1 a{font-size:.28rem;font-weight:700;color:#fff}
.header .back a{display:flex;align-items:center;color:#fff;font-size:.26rem;padding:.08rem .16rem;background:rgba(255,255,255,.15);border-radius:.3rem}
.header .back a::before{content:"back ";margin-right:.04rem}
.header .search{display:flex;align-items:center}
.header .search img{width:.44rem;height:.44rem;object-fit:contain}

.floor{margin:.2rem 0;padding:0 .2rem}
.floor .title{display:flex;align-items:center;justify-content:space-between;padding:.2rem 0 .2rem;border-bottom:2px solid #e83737;margin-bottom:.2rem}
.floor .title .tit{font-size:.28rem;font-weight:700;color:#28292d}
.floor .title .more{font-size:.22rem;color:#999}
.floor-view ul.clearfix{display:grid;grid-template-columns:repeat(3,1fr);gap:.2rem .16rem}

.comic-item-jp{background:#fff;border-radius:.08rem;overflow:hidden;box-shadow:0 .02rem .08rem rgba(0,0,0,.08)}
.comic-item-jp a{display:block;color:inherit}
.comic-item-jp .cover{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#ddd no-repeat center center/cover}
.comic-item-jp .comic-info-box{padding:.1rem .1rem .12rem}
.comic-item-jp .comic-name{font-size:.22rem;font-weight:600;color:#28292d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comic-item-jp .comic-tip,.comic-item-jp .comic-des{font-size:.2rem;color:#999;margin-top:.04rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.subtitle{font-size:.28rem;font-weight:700;color:#28292d;padding:.2rem 0 .16rem;border-bottom:2px solid #e83737;margin-bottom:.2rem}
.subtitle em{font-style:normal}

.nmain_con{background:#f2f2f2}
.nmain_com_p1{position:relative;width:100%;overflow:hidden;background:#222}
.nmain_com_p1>img{width:100%;max-height:4rem;object-fit:cover;display:block;opacity:.4}
.ncp1_bac{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,transparent 100%);padding:.4rem .24rem .3rem}
.ncp1b_tit h1{font-size:.32rem;font-weight:700;color:#fff;margin-bottom:.16rem;line-height:1.3}
.ncp1b_div{display:flex;align-items:center;flex-wrap:wrap;gap:.12rem;margin-bottom:.1rem}
.ncp1b_author{font-size:.22rem;color:rgba(255,255,255,.85)}
.ncp1b_tips{font-size:.22rem;color:rgba(255,255,255,.7)}

.nmain_com_p{background:#fff;margin-top:.16rem;padding:.24rem}
.nmain_com_p .title{display:flex;align-items:center;justify-content:space-between;padding-bottom:.16rem;border-bottom:1px solid #f0f0f0;margin-bottom:.2rem}
.nmain_com_p .title h2{font-size:.28rem;font-weight:700;color:#28292d}
.nmain_com_p .title span{font-size:.22rem;color:#e83737;cursor:pointer}
.nmain_com_p2 p{font-size:.24rem;color:#666;line-height:1.8}

.nmain_com_p3{background:#fff;margin-top:.16rem;padding:.24rem}
.nmain_com_p3 .title{display:flex;align-items:center;justify-content:space-between;padding-bottom:.16rem;border-bottom:1px solid #f0f0f0;margin-bottom:.2rem}
.nmain_com_p3 .title h2{font-size:.28rem;font-weight:700;color:#28292d}
#ncp3_ul{display:flex;flex-direction:column;gap:.12rem}
#ncp3_ul li a{display:flex;align-items:center;gap:.2rem;padding:.12rem;background:#f7f7f8;border-radius:.08rem}
#ncp3_ul li a img{width:1rem;height:1.33rem;object-fit:cover;border-radius:.06rem;background:#ddd;flex-shrink:0}
.ncp3li_div{flex:1;min-width:0}
.ncp3li_title{font-size:.24rem;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ncp3_ul .upload{text-align:center;padding:.2rem;color:#e83737;font-size:.24rem;cursor:pointer;border-top:1px solid #f0f0f0;margin-top:.12rem}

.nmain_com_p5{background:#fff;margin-top:.16rem;padding:.24rem}
.nmain_com_p5 .title a{display:flex;align-items:center;justify-content:space-between;color:#28292d}
.nmain_com_p5 .title .tit{font-size:.28rem;font-weight:700}
.nmain_com_p5 .title .more{font-size:.22rem;color:#999}
.nmain_com_p5 .floor-view ul.clearfix{margin-top:.2rem}

.foot{text-align:center;color:#999;font-size:.2rem;padding:.3rem .24rem .16rem;border-top:1px solid #eee;background:#fff;line-height:1.8;margin-top:.16rem}

#footBar{background:#fff;border-top:1px solid #eee;position:sticky;bottom:0;z-index:100;padding-bottom:env(safe-area-inset-bottom)}
#footBar ul{display:flex}
#footBar ul li{flex:1;text-align:center}
#footBar ul li a{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.16rem .08rem;color:#999;font-size:.2rem;gap:.06rem}
#footBar ul li a p{font-size:.2rem;margin:0}
#footBar ul li.z-active a{color:#e83737}
#footBar ul li a i{font-size:.4rem;line-height:1;font-style:normal}
.i-tab-home::before{content:"⌂"}
.i-tab-class::before{content:"☰"}
.i-tab-book::before{content:"★"}
.i-tab-me::before{content:"⊙"}

.pages{display:flex;justify-content:center;align-items:center;gap:.12rem;padding:.32rem .24rem;flex-wrap:wrap}
.pages a,.pages span{padding:.1rem .2rem;border:1px solid #ddd;border-radius:.06rem;background:#fff;color:#666;font-size:.22rem}
.pages .on,.pages .current{background:#e83737;color:#fff;border-color:#e83737}

.top-list{padding:.16rem .24rem}
.top-item{display:flex;align-items:center;gap:.16rem;padding:.16rem 0;border-bottom:1px solid #f0f0f0}
.top-item .no{width:.4rem;height:.4rem;background:#ddd;color:#fff;font-size:.2rem;font-weight:700;border-radius:.04rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.top-item:nth-child(1) .no{background:#ff4757}
.top-item:nth-child(2) .no{background:#ff7f50}
.top-item:nth-child(3) .no{background:#ffa502}
.top-item .name{flex:1;font-size:.24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-item .hit{font-size:.2rem;color:#999;flex-shrink:0}

.qm-view{display:none!important}

/* ===== 新版移动头部 ===== */
.m-header{background:linear-gradient(135deg,#e83737 0%,#c72828 100%);position:sticky;top:0;z-index:100}
.m-header-top{display:flex;align-items:center;justify-content:space-between;padding:.2rem .24rem;min-height:.88rem;gap:.16rem}
.m-logo{font-size:.34rem;font-weight:800;color:#fff;letter-spacing:.02rem;flex:1}
.m-title{font-size:.28rem;font-weight:700;color:#fff;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-back{font-size:.24rem;color:#fff;padding:.08rem .16rem;background:rgba(255,255,255,.15);border-radius:.3rem;white-space:nowrap}
.m-search{display:flex;align-items:center;flex-shrink:0;padding:.08rem}
.m-search-form{display:flex;align-items:center;background:rgba(255,255,255,.2);border-radius:.3rem;overflow:hidden;flex:1;max-width:4rem;margin-left:.16rem}
.m-search-input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:.24rem;padding:.1rem .12rem;width:0}
.m-search-input::placeholder{color:rgba(255,255,255,.65)}
.m-search-btn{background:transparent;border:none;padding:.08rem .14rem;display:flex;align-items:center;cursor:pointer;flex-shrink:0}
.m-nav{display:flex;overflow-x:auto;padding:.12rem .16rem .14rem;gap:.08rem;background:rgba(0,0,0,.18);-webkit-overflow-scrolling:touch}
.m-nav::-webkit-scrollbar{display:none}
.m-nav a{flex-shrink:0;padding:.1rem .24rem;border-radius:.3rem;font-size:.24rem;color:rgba(255,255,255,.85);white-space:nowrap;transition:all .2s}
.m-nav a:hover,.m-nav a.on{background:rgba(255,255,255,.25);color:#fff}
/* 旧版 header 兼容 - 在新CSS中隐藏旧版 .header (mobile) */
.mqm-view .header{display:none}

/* ===== 分类筛选栏 (update-nav) ===== */
.update-nav{background:#fff;margin-bottom:.16rem;border-bottom:1px solid #f0f0f0}
.update-nav ul{display:flex;overflow-x:auto;padding:.14rem .16rem;gap:.08rem;border-bottom:1px solid #f0f0f0;-webkit-overflow-scrolling:touch}
.update-nav ul:last-child{border-bottom:0}
.update-nav ul::-webkit-scrollbar{display:none}
.update-nav-item a{display:block;padding:.1rem .2rem;border-radius:.3rem;font-size:.24rem;color:#555;white-space:nowrap;background:#f5f5f5}
.update-nav-item.active a,.update-nav-item a:hover{background:#e83737;color:#fff}
/* 第一列"题材"/"地区"/"状态"标签 */
.update-nav ul li:first-child a{background:none;color:#999;font-weight:700;cursor:default;pointer-events:none;padding-left:0}

/* ===== 漫画列表（横排卡片）===== */
.nmain_cl{padding:.16rem .2rem}
#list{display:flex;flex-direction:column;gap:.16rem}
#list li a{display:grid;grid-template-columns:1.4rem 1fr;gap:.08rem .2rem;background:#fff;border-radius:.1rem;padding:.16rem;box-shadow:0 .02rem .08rem rgba(0,0,0,.06);align-items:start}
#list li a img{grid-column:1;grid-row:1/4;width:1.4rem;height:1.87rem;object-fit:cover;border-radius:.08rem;background:#eee;display:block}
.li_div{grid-column:2;min-width:0;width:100%}
.nmain_cl_tit{font-size:.26rem;font-weight:600;color:#28292d;margin-bottom:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nmain_cl_author{font-size:.22rem;color:#999;margin-bottom:.08rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nmain_cl_newc{font-size:.22rem;color:#bbb;display:flex;align-items:center;gap:.06rem}
.nmain_cl_newc span{color:#e83737;flex-shrink:0}
.nmain_cl_newc p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}

/* ===== 分页 ===== */
.page-pagination{display:flex;justify-content:center;align-items:center;gap:.12rem;padding:.24rem .2rem;flex-wrap:wrap}
.page-pagination a,.page-pagination span{padding:.1rem .22rem;border:1px solid #ddd;border-radius:.06rem;background:#fff;color:#666;font-size:.22rem}
.page-pagination .on,.page-pagination .current{background:#e83737;color:#fff;border-color:#e83737}
