/* ------------------------------- 初始化 -------------------------------------- */
  h1,h2,h3,h4,h5,h6,p,ul{margin:0}
  ul{padding:0}
  html{height:100%;overflow-y:auto}
  body{height:100%;margin:0;display:flex;flex-direction:column;color:#a6a6a6;font-size:16px;font-family:'微软雅黑','Nanum Gothic',simsun,dotum,AppleGothic,arial,Helvetica,sans-serif}
  a{text-decoration:none}
  a:hover{text-decoration:none}
  li{list-style:none}

  
  /* ------------------- 布局样式 ------------------------------------*/
  body{display:flex;flex-direction:column}
  .main-container{flex:1;background:#f0f2f4}
  .main-container.black{background:#191919}
  .cc-container,.container{margin:0 auto;width:85%;box-sizing:border-box}
  .offset-y{margin-top:-70px}
  
  @media (max-width:640px){
    .cc-container,.container{width:100%;}
  }
  @media (min-width:1200px){
    .cc-container,.container{width:960px}
  }

  footer{padding:50px 0 40px;background:#f0f2f4;text-align:center}
  footer.black{background:#191919}
  footer .links{margin-left:-10px;margin-bottom:10px}
  footer .links a{display:inline-block;padding:0 10px 10px;height:20px;line-height:20px;font-size:14px;color:#000}
  footer .beian span,footer .links span{margin:0 10px;font-size:10px;color:#525252}
  footer .meta{font-size:12px;font-weight:500;color:#525252}
  footer .beian a{font-size:10px;color:#525252}
  footer.black .beian a,footer.black .links a,footer.black .links span,footer.black .meta{color:#fff}
  footer .beian{margin-top:8px}
  @media (max-width:640px){
    footer{display:none;padding:30px 10px}
  }
  /* --------------------------------- 通用样式 ------------------------- */
  .hidden{display:none}
  .mt-50{margin-top:50px}
  .mt-60{margin-top:60px}
  .mt-70{margin-top:70px}
  .mt-120{margin-top:120px}
  .p-10 {padding: 10px;}
  

  
  /* ---------------------------------- 表单自定义 */
  .page-header{display:flex;align-items:center}
  .page-header h2{font-size:24px;letter-spacing:1px;margin-right:20px;color:#191919}
  .form-horizontal label{font-size:14px;letter-spacing:.5px;color:#2c2c2c}
  .center-h-text{text-align:center}
  .cc-container {padding: 0 20px;}
  

  /* ---------------------------- ico 小图标，不怎么样... */
  .ico{display:inline-block;width:24px;height:24px;margin-right:8px;background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url(/public/img/res/like.png)}
  .ico.s{width:12px;height:12px}
  .ico.m{width:24px;height:24px}
  .ico.l{width:32px;height:32px}
  .ico.xl{width:48px;height:48px}
  .ico.xxl{width:64px;height:64px}
  .ico-search{background-image:url(/public/img/icon/search.png)}


  /* ------------------------ 分类选择标签------------------------------------- */
  .tags-wrap{margin:10px 0;display:flex;align-items:center}
  .tags-wrap.between{justify-content:space-between}
  .tags-wrap h2{font-size:14px;letter-spacing:1px;margin-right:20px}
  .tags-wrap ul{padding: 0 10px; width:100%;display:grid;grid-template-columns: repeat(15, 1fr);gap: 10px;box-sizing: border-box;}
  .tags-wrap ul li{background:rgba(0,0,0,.3);height:24px;line-height:24px;border-radius:12px;font-size:12px;letter-spacing:.5px; text-align: center;}
  .tags-wrap ul li a{color:#eee}
  .tags-wrap ul li.active,.tags-wrap ul li:hover{background:#e7e2e1}
  .tags-wrap ul li.active a,.tags-wrap ul li:hover a{color:#191919}
  .tags-sticky{position:sticky;z-index:2}
  .booklib-wrap .tags-sticky,.bookshelf-wrap .tags-sticky{padding:10px 0;top:70px}
  .tags-sticky .ltype,.tags-sticky .subtype h2{display:none}
  
  @media (max-width:640px){
  .booklib-wrap .tags-wrap ul{display:grid;grid-template-columns: repeat(6, 1fr);}
  .booklib-wrap .tags-wrap ul li{margin:0;padding:0;box-sizing:border-box;text-align:center;overflow:hidden}
  .booklib-wrap .tags-sticky{padding:0}
  }
  
  /* ------------ 书封：一本有阴影的书 ------------------------------------------*/
  .bookcover{display:block;width:100%;height:100%;box-shadow:0 2px 16px rgb(0 0 0 / 8%);background:#d8d8d8;position:relative}
  .bookcover-img{vertical-align:top;width:100%;height:100%;background-color:#fff;-o-object-fit:contain;object-fit:contain}
  .bookcover-img.disposed{-webkit-filter:grayscale(.5) brightness(.8) contrast(1.1);filter:grayscale(.5) brightness(.8) contrast(1.1)}
  .bookcover-decor{position:absolute;top:0;right:0;bottom:0;left:0}
  .bookcover-decor.bookcover-gredientdecor{background-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,63.1%,.25)),color-stop(1%,rgba(21,21,20,.1)),color-stop(4%,hsla(0,0%,100%,.15)),color-stop(8%,hsla(0,0%,58%,.1)),color-stop(57%,hsla(0,0%,89%,0)),color-stop(91%,rgba(223,218,218,.03)),color-stop(98%,rgba(223,218,218,.05)),to(hsla(0,0%,100%,.1)));background-image:linear-gradient(90deg,hsla(0,0%,63.1%,.25),rgba(21,21,20,.1) 1%,hsla(0,0%,100%,.15) 4%,hsla(0,0%,58%,.1) 8%,hsla(0,0%,89%,0) 57%,rgba(223,218,218,.03) 91%,rgba(223,218,218,.05) 98%,hsla(0,0%,100%,.1))}
  
  /* -------------------------------- 书城 booklib / 书架 bookshelf------------------------------ */
  .booklib-wrap,
  .bookshelf-wrap {
    margin-top: 80px;
  }
  
  /* 一排排的书 */
  .books-shelf-title {
    font-size: 14px;
    margin: 20px 0;
  }
  .books-shelf-wrap {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    justify-content: start;
    grid-column-gap: 20px;
  }
  .shelf-book-wrap {
    width: 120px;
    height: 120px;
    background: rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
  }
  .shelf-book-wrap.suit {
    width: 120px;
    height: 210px;
    background: rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
  }
  
  .shelf-book-wrap .btn-add {
    display: block;
    width: 100%;
    height: 100%;
    background: url('/public/img/icon/add.png') no-repeat center / 32px 32px;
  }
  
  .shelf-book .title {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #a6a6a6;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  @media (max-width: 640px) {
  
    .books-shelf-wrap {
      margin-top: 30px;
      grid-template-columns: repeat(auto-fill, 110px);
      justify-content: space-evenly;
      grid-column-gap: 0;
    }
  
    .shelf-book-wrap {
      width: 110px;
      height: 110px;
      margin-bottom: 10px;
    }
    .shelf-book-wrap.suit {
      width: 110px;
      height: 192px;
      margin-bottom: 10px;
    }
    
    .booklib-wrap, 
    .bookshelf-wrap {
      margin-top: 80px;
    }
    .books-shelf-title,
    .bookshelf-wrap .tags-sticky {
      padding-left: 20px;
    }
  }
  
  
  /* ---------------------------- 详情页 --------------------------------- */
  
  .basic-info-wrap .desc,
  .basic-info-wrap .desc a {
    font-size: 13px;
    color: #999;
    letter-spacing: 0.5px;
  }
  
  .collection-wrap {
    margin-top: 20px;
  }
  .collection-wrap ul {
    margin-top: 10px;
    display: flex;
  }
  .collection-wrap ul li {
    margin-right: 10px;
    padding: 2px 10px 4px;
    border: 1px solid rgb(148, 154, 183);
    border-radius: 3px;
  }
  .collection-wrap ul li a{
    color: #444;
  }
  
  .collection-wrap ul li:hover {
    background: rgb(221, 227, 255);
  }
  .collection-wrap ul li:hover a {
    color: #191919;
  }
  
  
  .tint {
    font-size: 13px;
    color: #aaa;
  }
  .tint.s {
    font-size: 12px;
  }

  

  .bookdetail-wrap {
    margin-top: 120px;
  }
  
  .basic-info-wrap {
    display: flex;
    justify-content: space-between;
  }
  
  .basic-info-wrap .l  {
    width: 360px;
    /* height: 260px; */
    margin-right: 20px;
  }
  
  .basic-info-wrap .l .bookcover-wrap {
    width: 360px;
    height: 360px;  
  }
    
  .basic-info-wrap .l a {
    display: block;
    text-align: center;
  }

  .basic-info-wrap.suit .l {
    width: 360px;
    height: auto;
  }
  .basic-info-wrap.suit .l .bookcover-wrap {
    width: 360px;
    height: 640px;
  }

  .basic-info-wrap .m {
    flex: 1;
  }
  
  .basic-info-wrap .m .title {
    margin: 30px 0 20px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #444;
  }

  @media (max-width: 640px) {
    .bookdetail-wrap {
      padding: 0 20px 50px 20px;
      box-sizing: border-box;
    }

    .basic-info-wrap .l {
      width: 75px;
    }
    .basic-info-wrap .l .bookcover-wrap {
      width: 75px;
      height: 109px;
    }

    .basic-info-wrap .m .title {
      margin: 0 0 20px 0;
      font-size: 16px;
      letter-spacing: 1px;
    }

    
    .bookdetail-wrap.suit {
      margin: 70px 0 50px 0;
      padding: 0;
      box-sizing: border-box;
    }

    .basic-info-wrap.suit {
      flex-direction: column;
    }
    .basic-info-wrap.suit .l,
    .basic-info-wrap.suit .l .bookcover-wrap {
      width: 100%;
      height: auto;
    }
    .basic-info-wrap.suit .m {
      margin-top: 50px;
      padding: 0 20px;
    }
  }
  

  /* ---------------------- 多选框  */
  /* - 多选框组：弹性布局，自动换行 */
  .image-checkbox-group{display:inline-flex;flex-wrap:wrap;gap:10px;padding:10px 0}
  .image-checkbox-item{cursor:pointer;width:100px}
  .image-wrapper{position:relative;border-radius:8px;overflow:hidden;border:2px solid #eee;transition:all .3s ease}
  .option-image{width:100px;height:100px;object-fit:contain;background:#fff}
  .check-icon{position:absolute;top:5px;right:5px;width:24px;height:24px;background-color:#2196f3;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity .3s ease}
  .image-label{margin-top:8px;font-size:14px;color:#333;text-align:center}
  .image-checkbox-item input:checked+.image-wrapper{border-color:#2196f3;box-shadow:0 0 0 2px rgba(33,150,243,.2)}
  .image-checkbox-item input:checked+.image-wrapper .check-icon{opacity:1}
  .image-checkbox-item:hover .image-wrapper{border-color:#ccc;transform:scale(1.05)}
  .image-checkbox-item input:disabled+.image-wrapper{opacity:.6;cursor:not-allowed}
  .image-checkbox-item input:disabled:hover .image-wrapper{transform:none}

/* --------------------- items/suits 列表 */
.items-list {
  display: grid;
  place-content: start;
  justify-items: start;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 10px;
}

.items-list li {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
}
.items-list li img {
  
  width: 100%;
  height: 100%;
  object-fit: contain; 
  background: #fff;
}


.items-list.suit {
  grid-template-columns: repeat(auto-fill, 180px);
}
.items-list.suit li {
  width: 180px;
  height: 320px;
}

.items-list li .item-del {
  position: absolute;
  right: 5px;
  top: 5px;
  display: block;
  width: 20px;
  height: 20px;
  background: rgb(150, 147, 147);
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;

  
  opacity: 0; /* 未选中时透明 */
  transition: opacity 0.2s ease;
}

.items-list li:hover .item-del {
  opacity: 1;
}

@media (max-width: 640px) {
  .items-list,
  .items-list.suit {
    grid-template-columns: repeat(3, 1fr);
  }
  .items-list li,
  .items-list.suit li {
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
  }
  .items-list.suit li {
    aspect-ratio: 9/16;
  }
}

/* 首页简单样式 */
.simple-ol {
  display: flex;
}
.simple-ol li {
  margin-right: 5px;
  padding: 5px;
  border: solid 1px #666;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
}