/* ===== ruancang.net 首页 - 1:1复刻 ===== */

/* page-content区域 */
.rc-page{flex:1;margin:36px auto}

/* === sidenav布局 === */
.sidenav-wrap{display:flex}

/* 左侧导航 */
.sidenav{
  position:sticky;
  top:76px;
  left:0;
  align-self:flex-start;
  padding:0;
  margin-right:14px;
  max-height:calc(100vh - 92px);
  overflow:hidden;
  background:var(--c-box);
  box-shadow:var(--c-shadow) 0 0 2px;
  border-radius:5px;
}
.sidenav::-webkit-scrollbar{width:0}

/* 导航菜单 */
.sidenav .menu{
  list-style:none;
  min-width:150px;
  padding:10px 15px;
  margin:0;
}
.sidenav .menu li{padding:0}

/* 导航链接 */
.sidenav .menu a{
  display:block;
  padding:12px 15px;
  font-size:14px;
  color:var(--c-text2);
  text-decoration:none;
  border-radius:6px;
  transition:all .2s;
  position:relative;
}
.sidenav .menu a:hover{color:var(--c-text1);background:rgba(255,255,255,.05)}
.sidenav .menu li.active a{color:#fff;font-weight:600;background:rgba(255,255,255,.08)}
.sidenav .menu li.active a::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:#fff;border-radius:0 3px 3px 0}

/* 右侧内容区 */
.sidenav-content{
  flex:1 1 0%;
  width:100%;
  overflow:hidden;
}

/* === 分类区块 === */
.sidenav-content .section{
  background:var(--c-box);
  border-radius:5px;
  box-shadow:var(--c-shadow) 0 0 2px;
  padding:5px 10px;
  margin-bottom:16px;
}
.sidenav-content .section:last-of-type{margin-bottom:0}

/* 分类头部 */
.sidenav-content .header{margin:10px}
.sidenav-content .header h2{font-size:22px;font-weight:700;color:var(--c-text1);margin:0}
.sidenav-content .header h3{font-size:18px;color:var(--c-text1);margin:0}
.sidenav-content .header .desc{color:var(--c-text2);font-size:15px;margin-top:10px;line-height:1.6}

/* === 软件列表 - 3列网格 === */
.list{display:flex;flex-flow:wrap}

/* 每项 33.33% */
.list .item-wrap{
  width:33.333333%;
  padding:10px;
  box-sizing:border-box;
}

/* 卡片 */
.list .item{
  border-radius:5px;
  transition:.3s;
  border:1px solid rgba(255,255,255,.04);
  box-shadow:rgba(0,0,0,.03) 0 4px 4px;
  background:var(--c-box);
  width:100%;
  height:100%;
  position:relative;
}

/* 卡片链接 */
.list .item a.main{
  display:flex;
  align-items:center;
  padding:12px;
  color:var(--c-text1);
}
.list .item a.main:hover{color:var(--c-text1)}

/* 缩略图 - 48px圆形 */
.list .item .thumbnail-wrap{
  width:48px;
  height:48px;
  flex-shrink:0;
  margin-right:8px;
  border-radius:100%;
  overflow:hidden;
}
.list .item .thumbnail-wrap img,
.list .item .thumbnail-wrap svg{
  width:48px;
  height:48px;
  max-width:48px;
  max-height:48px;
  object-fit:contain;
  border-radius:100%;
  display:block;
}
.list .item .thumb-placeholder{
  width:48px;height:48px;border-radius:100%;background:rgba(255,255,255,.06);
}

/* 文字区 */
.list .item .info{flex:1 1 0%;min-width:0;overflow:hidden}

/* 标题 */
.list .item .title{
  font-size:15px;
  font-weight:500;
  overflow:hidden;
  text-overflow:clip;
  color:var(--c-text1);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  word-break:break-all;
}

/* 摘要（首页隐藏，与原站一致） */
.list .item .excerpt{
  display:none;
  line-height:1.4;
  font-size:12px;
  color:var(--c-text2);
}

/* === 响应式 === */
@media(max-width:768px){
  .rc-page{margin:0}

  .sidenav{margin-right:0;max-height:calc(100vh - 70px);top:62px;width:100px;border-radius:0 5px 5px 0}
  .sidenav .menu{min-width:unset;padding:8px 0}
  .sidenav .menu a{padding:10px 0;font-size:12px;text-align:center;-webkit-tap-highlight-color:transparent}
  .sidenav .menu li.active a::before{width:2px;height:14px}

  .sidenav-content{padding:8px 4px 0}
  .sidenav-content .section{box-shadow:unset;margin-bottom:10px;padding:6px 4px 0}
  .sidenav-content .section h2{font-size:16px}
  .sidenav-content .section h3{font-size:14px}
  .sidenav-content .header{margin:0 4px 6px}
  .sidenav-content .header h2{font-size:16px}

  /* 3列布局，图标上名字下 */
  .list .item-wrap{width:33.333333%;padding:4px}
  .item a.main{flex-direction:column;align-items:center;padding:8px 4px;text-align:center}
  .item .thumbnail-wrap{width:36px!important;height:36px!important;margin-right:0!important;margin-bottom:6px!important;border-radius:8px!important}
  .item .thumbnail-wrap img,.item .thumbnail-wrap svg{width:36px!important;height:36px!important;max-width:36px!important;max-height:36px!important;border-radius:8px!important;object-fit:contain}
  .item .thumb-placeholder{width:36px!important;height:36px!important;border-radius:8px!important}
  .list .item .info{width:100%}
  .list .item .title{font-size:11px;text-align:center;-webkit-line-clamp:2;line-height:1.3}
  .list .item .description{display:none}
}
@media(max-width:480px){
  .list .item-wrap{width:33.333333%;padding:3px}
  .item a.main{padding:6px 2px}
  .item .thumbnail-wrap{width:32px!important;height:32px!important;border-radius:6px!important}
  .item .thumbnail-wrap img,.item .thumbnail-wrap svg{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important;border-radius:6px!important;object-fit:contain}
  .item .thumb-placeholder{width:32px!important;height:32px!important;border-radius:6px!important}
  .list .item .title{font-size:10px}
  .sidenav{width:90px}
  .sidenav .menu a{font-size:11px;padding:8px 0}
  .sidenav-content{padding:8px 3px 0}
  .sidenav-content .section{padding:6px 3px 0}
  .sidenav-content .section h2{font-size:14px}
}