/* ==========================================================================
   News List Page — Mobile (m202606)
   Design width: 1080px
   ========================================================================== */

.news-list-page {
  position: absolute;
  /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  /* padding: 1.55rem 0 0; */
  background: #d6cfc4 url('/m/assets/images/newsList/m-bg.png') center 1rem / cover no-repeat;
  /* [ios-overflow-fix] 只写 overflow-y:auto 时 x 轴会被规范强制为 auto，
     容器内 menu-drawer 滑出面板等横向溢出会撑出水平橡皮筋，iOS 上下滚动时露深色底 */
  overflow: hidden auto;
  /* 阻断滚动穿透：滚到顶/底后继续拖不再拉动 document 触发整页橡皮筋 */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 160, 120, .4) transparent;
}

/* Webkit scrollbar */
.news-list-page::-webkit-scrollbar {
  width: .06rem;
}

.news-list-page::-webkit-scrollbar-track {
  background: transparent;
}

.news-list-page::-webkit-scrollbar-thumb {
  background: rgba(180, 160, 120, .4);
  border-radius: .03rem;
}

.news-list-page::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 160, 120, .6);
}

/* Decorations */
.news-list-decoration {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  user-select: none;
}

.news-list-decoration--left {
  left: 0;
  top: 4.15rem;
  width: 2.22rem;
  height: 6.31rem;
}

.news-list-decoration--right {
  right: 0;
  top: -.72rem;
  width: 2.53rem;
  height: 1.71rem;
}

.news-list-kv,
.news-list-tabs,
.news-list-body,
.news-list-footer-wrap {
  position: relative;
  z-index: 1;
}

.news-list-footer-wrap {
  margin-top: auto;
}

.news-list-footer-wrap .site-footer {
  margin-top: 0;
}

/* KV Banner — full-width */
.news-list-kv {
  width: 100%;
}

.news-list-kv__img {
  display: block;
  width: 100%;
  height: auto;
}

.news-list-kv__breadcrumb {
  position: absolute;
  left: .59rem;
  bottom: 1.7rem;
  font-family: "HYYouYuan", "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
  font-size: .46rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: -.01rem;
  color: #f3f0ea;
  text-shadow: 0 0 .32rem rgba(18, 31, 5, .8);
}

[data-lang="ja"] .news-list-kv__breadcrumb {
  font-family: "ja2";
}

/* Tabs */
.news-list-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  height: .91rem;
  margin: 1rem .6rem 0;
  background-color: #faf7f1;
  border-radius: 1rem;
}

.news-list-tabs[hidden] {
  display: none;
}

.news-list-tabs__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  padding: 0;
  font-size: .36rem;
  font-weight: 600;
  color: #929086;
  text-decoration: none;
  border-radius: 1rem;
  transition: background .2s, color .2s;
  cursor: pointer;
  white-space: nowrap;
  font-family: "HYYouYuan";
}

[data-lang="ja"] .news-list-tabs__item {
  font-family: "ja2";
}

.news-list-tabs__item:hover {
  color: #333;
}

.news-list-tabs__item.is-active {
  background: url('/m/assets/images/newsList/tab-selected-bg.png') center / 2.41rem .91rem no-repeat;
  color: #f9c150;
  font-weight: 700;
}

/* Body — content area with side padding */
.news-list-body {
  padding: 0 .6rem;
}

/* List */
.news-list {
  list-style: none;
  margin: 0;
  padding: .46rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .34rem;
}

.news-list-item {
  position: relative;
  aspect-ratio: 908 / 328;
  overflow: visible;
  box-sizing: border-box;
  transition: transform .2s;
}

/* iOS 13 等不支持 aspect-ratio 的浏览器：按容器宽度（100vw 减去两侧 .6rem padding）换算兜底高度 */
@supports not (aspect-ratio: 908 / 328) {
  .news-list-item {
    height: calc((100vw - 1.2rem) * 328 / 908);
  }
}

.news-list-item::before {
  content: '';
  position: absolute;
  /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  border-radius: inherit;
  background: url('/m/assets/images/newsList/select-bg.png') center / contain no-repeat;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

.news-list-item:active {
  transform: translateY(.02rem) scale(.99);
}

.news-list-item__new-star {
  position: absolute;
  width: .82rem;
  height: .84rem;
  right: -.16rem;
  top: -.14rem;
  background: url('/m/assets/images/newsList/new-star.png') center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

.news-list-item__link {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: #3d3d3d;
}

.news-list-item__cover {
  flex-shrink: 0;
  width: 2.84rem;
  height: 2.84rem;
  margin-left: .22rem;
  border-radius: .78rem;
  object-fit: cover;
}

.news-list-item__arrow {
  position: absolute;
  width: .28rem;
  height: .43rem;
  right: .48rem;
  bottom: .5rem;
  pointer-events: none;
  z-index: 3;
}

.news-list-item__body {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: .42rem .88rem .42rem .29rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.news-list-item__title {
  margin: 0 0 .12rem;
  font-family: "en2";
  font-size: .34rem;
  font-weight: normal;
  line-height: .48rem;
  letter-spacing: -.01rem;
  color: #3d3d3d;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-lang="ja"] .news-list-item__title {
  font-family: "ja2";
}

.news-list-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .02rem;
  margin-top: auto;
}

/* [gap-fallback:iOS13] .news-list-item__meta（column 方向） */
.news-list-item__meta > * + * { margin-top: .02rem; }
@supports (inset-inline: 0) {
  .news-list-item__meta { gap: .02rem; }
  .news-list-item__meta > * + * { margin-top: 0; }
}

[data-lang="ja"] .news-list-item__meta {
  font-family: "ja1";
}

.news-list-item__author,
.news-list-item__date {
  margin: 0;
  font-family: "en1zc";
  font-size: .3rem;
  font-weight: normal;
  line-height: .28rem;
  letter-spacing: 0;
  color: #939187;
}

/* Loading & Empty */
.news-list-loading,
.news-list-empty {
  text-align: center;
  padding: .6rem 0;
  color: rgba(61, 61, 61, .55);
  font-size: .26rem;
  min-height: 5rem;
}

.news-list-empty[hidden] {
  display: none;
}

/* Pagination */
.news-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .36rem;
  margin: .46rem auto 0;
  padding-bottom: .5rem;
}

.news-list-pagination[hidden] {
  display: none;
}

.news-list-pagination__btn {
  position: relative;
  width: 2.75rem;
  height: .87rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "en2";
  font-size: .36rem;
  transition: transform .15s, opacity .15s;
  overflow: hidden;
  isolation: isolate;
}

[data-lang="ja"] .news-list-pagination__btn {
  font-family: "ja2";
}

.news-list-pagination__btn--prev {
  background: url('/m/assets/images/newsList/next-btn.svg') center / 100% 100% no-repeat;
  color: #929086;
}

.news-list-pagination__btn--next {
  background-color: #ffc832;
  -webkit-mask: url('/m/assets/images/newsList/next-btn.svg') center / 100% 100% no-repeat;
          mask: url('/m/assets/images/newsList/next-btn.svg') center / 100% 100% no-repeat;
  color: #3d3d3d;
}

.news-list-pagination__btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

.news-list-pagination__btn:not(:disabled):active {
  transform: translateY(.02rem) scale(.98);
}

.news-list-pagination__label {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.news-list-pagination__pages {
  display: inline-flex;
  align-items: baseline;
  gap: .06rem;
  color: #3d3d3d;
  font-family: "en1zc";
  font-size: .3rem;
  letter-spacing: -.01rem;
}

/* [gap-fallback:iOS13] .news-list-pagination__pages */
.news-list-pagination__pages > * + * { margin-left: .06rem; }
@supports (inset-inline: 0) {
  .news-list-pagination__pages { gap: .06rem; }
  .news-list-pagination__pages > * + * { margin-left: 0; }
}

[data-lang="ja"] .news-list-pagination__pages {
  font-family: "ja1";
}

.news-list-pagination__current {
  color: #3d3d3d;
}

.news-list-pagination__sep {
  color: #3d3d3d;
  margin: 0 .02rem;
}