.news-detail-page {
  height    : 100svh;
  overflow  : hidden;
  background: #f6f7f9;
}

.news-detail-header {
  color     : #222;
  background: rgba(246, 247, 249, 0.88);
}

.detail-scroll {
  position           : fixed;
  inset              : 0;
  z-index            : 1;
  overflow-x         : hidden;
  overflow-y         : auto;
  overscroll-behavior: contain;
  scroll-behavior    : smooth;
  background         : transparent;
}

.news-detail-header {
  z-index: 20;
}

.detail-dots-left,
.detail-leaves {
  position      : fixed;
  z-index       : 0;
  pointer-events: none;
  user-select   : none;
}

.detail-dots-left {
  left     : 0;
  top      : calc(102px * var(--s));
  width    : 6.98vw;
  min-width: 92px;
  max-width: 134px;
}

.detail-leaves {
  left     : -11.13vw;
  top      : min(38vh, 499px);
  width    : 50vw;
  max-width: 960px;
}

.article-shell {
  position  : relative;
  min-height: 100svh;
  padding   : clamp(118px, 7.7vw, 148px) 24px 120px;
}

.article-detail {
  position: relative;
  z-index : 2;
  width   : min(60vw, 1000px);
  margin  : 0 auto;
}

.article-back {
  display      : inline-flex;
  align-items  : center;
  gap          : 15px;
  min-height   : 22px;
  margin-bottom: 49px;
  font-size    : 14px;
  line-height  : 21px;
}

.article-back::before {
  content      : "←";
  transform    : translatey(-2px);
  font-size    : 23px;
  /* background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M4 1 1 4l3 3M1 4h12' fill='none' stroke='%23222' stroke-width='1'/%3E%3C/svg%3E"); */
  transition   : transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.article-back:hover::before,
.article-back:focus-visible::before {
  transform: translateX(-10px) translatey(-2px);
}

.article-date {
  display      : flex;
  align-items  : baseline;
  gap          : 14px;
  margin-bottom: 24px;
}

.article-date span {
  color    : #888;
  font-size: 22px;
}

.article-date strong {
  font-size  : 44px;
  font-weight: 400;
  line-height: 1;
}

.article-detail h1 {
  font-size  : clamp(46px, 3.34vw, 64px);
  line-height: 1.52;
  font-weight: 600;
}

.article-subtitle {
  margin-top : -2px;
  font-size  : clamp(25px, 1.67vw, 32px);
  line-height: 1.8;
  font-weight: 600;
}

.article-rule {
  height    : 1px;
  margin-top: 29px;
  background: rgba(34, 34, 34, 0.25);
}

.article-copy {
  padding-top: 25px;
  font-size  : clamp(20px, 1.46vw, 28px);
  line-height: 2.57;
}

.article-copy p+p {
  margin-top: 0;
}

.article-copy h2 {
  margin     : 31px 0 2px;
  font-size  : clamp(24px, 1.67vw, 32px);
  line-height: 2.6;
  font-weight: 600;
}

.article-copy img {
  width       : 100%;
  aspect-ratio: 1237 / 830;
  margin      : 23px 0 22px;
  object-fit  : cover;
}

.detail-dots-right {
  position      : absolute;
  z-index       : 1;
  right         : 0;
  bottom        : 0;
  width         : min(18.86vw, 362px);
  pointer-events: none;
}

.detail-pixels {
  width         : 362px;
  height        : 221px;
  pointer-events: none;
}

.detail-pixels i {
  position  : absolute;
  width     : 20px;
  height    : 20px;
  background: #1e90ff;
}

.detail-pixels i:nth-child(3),
.detail-pixels i:nth-child(4),
.detail-pixels i:nth-child(5) {
  width : 11px;
  height: 11px;
}

.detail-pixels i:nth-child(3),
.detail-pixels i:nth-child(5) {
  background: #0bffae;
}

.detail-pixels i:nth-child(4) {
  background: #efff04;
}

.detail-pixels-left {
  position        : fixed;
  z-index         : 1;
  left            : 0;
  top             : calc(102px * var(--s));
  width           : 134px;
  transform       : scale(var(--s));
  transform-origin: top left;
}

.detail-pixels-left i:nth-child(1) {
  left: 9px;
  top : 10px;
}

.detail-pixels-left i:nth-child(2) {
  left: 35px;
  top : 36px;
}

.detail-pixels-left i:nth-child(3) {
  left: 18px;
  top : 71px;
}

.detail-pixels-left i:nth-child(4) {
  left: 53px;
  top : 123px;
}

.detail-pixels-left i:nth-child(5) {
  display: none;
}

.detail-pixels-right {
  position        : absolute;
  z-index         : 2;
  right           : 0;
  bottom          : 0;
  transform       : scale(var(--s));
  transform-origin: bottom right;
}

.detail-pixels-right i:nth-child(1) {
  left: 329px;
  top : 181px;
}

.detail-pixels-right i:nth-child(2) {
  left: 307px;
  top : 166px;
}

.detail-pixels-right i:nth-child(3) {
  left: 333px;
  top : 140px;
}

.detail-pixels-right i:nth-child(4) {
  left: 298px;
  top : 88px;
}

.detail-pixels-right i:nth-child(5) {
  left: 219px;
  top : 192px;
}

.news-detail-page #footer {
  position: relative;
  z-index : 3;
}

@media (max-width: 760px) {
  .news-detail-header {
    background: rgba(246, 247, 249, 0.94);
  }

  .detail-dots-left {
    top      : 72px;
    width    : 74px;
    min-width: 0;
  }

  .detail-pixels-left {
    top      : 72px;
    transform: scale(0.5);
  }

  .detail-leaves {
    left     : -170px;
    top      : 38vh;
    width    : 540px;
    max-width: none;
    opacity  : 0.72;
  }

  .article-shell {
    padding: 104px 24px 84px;
  }

  .article-detail {
    width    : 100%;
    min-width: 0;
  }

  /* .article-back {
    margin-bottom: 40px;
    font-size    : 13px;
  } */

  .article-date {
    gap          : 9px;
    margin-bottom: 20px;
  }

  .article-date span {
    font-size: 16px;
  }

  .article-date strong {
    font-size: 32px;
  }

  .article-detail h1 {
    font-size  : 34px;
    line-height: 1.35;
  }

  .article-subtitle {
    margin-top : 12px;
    font-size  : 19px;
    line-height: 1.6;
  }

  .article-rule {
    margin-top: 24px;
  }

  .article-copy {
    padding-top: 20px;
    font-size  : 16px;
    line-height: 2;
  }

  .article-copy h2 {
    margin     : 30px 0 4px;
    font-size  : 21px;
    line-height: 1.55;
  }

  .article-copy img {
    margin: 20px 0 10px;
  }

  .detail-dots-right {
    width: 170px;
  }

  .detail-pixels-right {
    transform: scale(0.5);
  }

}

@media (prefers-reduced-motion: reduce) {
  .detail-scroll {
    scroll-behavior: auto;
  }
}