.news-bg { background: none; }
.news-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #05070d;
  background-image: url("../../assets/halloween/page-bg.webp");
  background-repeat: no-repeat;

  background-size: calc(1983 * var(--pu)) auto;
  background-position: calc(-272 * var(--pu)) calc(-533 * var(--pu));
}

@media (min-width: 761px) and (max-aspect-ratio: 1443/2703) {
  .news-bg::before {
    background-size: cover;
    background-position: center top;
  }
}

@media (max-width: 760px) {
  .news-bg::before { background-image: url("../../assets/halloween/page-bg-m.webp"); }
}

@media (min-width: 761px) {
  .news-bg .mk-top::before { display: none; }
}

.nw-page {
  --u: min(1px, calc(100vw / 1443));

  --nw-accent-a: #8400ff;
  --nw-accent-b: #bb00ff;

  --nw-card-bg: rgba(0, 0, 0, 0.38);

  position: relative;

  overflow: clip;
  font-family: var(--ui);
  color: #fff;
}

.nw-lead {
  position: relative;
  padding: calc(15 * var(--u)) 0 calc(60 * var(--u));
  min-height: calc(917 * var(--u));
}

.nw-feed {
  position: relative;
  z-index: 2;
  width: calc(810 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  gap: calc(50 * var(--u));
}

.nw-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: calc(43.2 * var(--u)) calc(45.2 * var(--u)) calc(23 * var(--u)) calc(50.9 * var(--u));
  border: 0;
  border-radius: calc(23.06 * var(--u));
  background: var(--nw-card-bg);
  box-shadow: 0 calc(10 * var(--u)) calc(28.35 * var(--u)) rgba(0, 0, 0, 0.35);

  display: flex;
  flex-direction: column;
}

@media (min-width: 901px) {
  .nw-card {
    backdrop-filter: blur(calc(15 * var(--u)));
    -webkit-backdrop-filter: blur(calc(15 * var(--u)));
  }
}

.nw-card .nw-image { order: 1; }
.nw-card > h2      { order: 2; }
.nw-card .nw-meta  { order: 3; }
.nw-card .nw-body  { order: 4; }
.nw-card .nw-footer{ order: 5; }
.nw-card .nw-tools { order: 6; }

.nw-card .nw-image {
  margin-top: 0;
  margin-bottom: calc(13.5 * var(--u));
  height: auto;
  border-radius: calc(6 * var(--u));
}

.nw-card > h2 {
  align-self: flex-start;
  margin: 0 0 calc(13.5 * var(--u)) calc(-50.9 * var(--u));
  padding: calc(12 * var(--u)) calc(26 * var(--u)) calc(12 * var(--u)) calc(50.9 * var(--u));
  border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
  background: linear-gradient(180deg, #8400ff, #bb00ff);
  font-family: var(--display);
  font-size: calc(26 * var(--u));
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: none;
}

.nw-card .nw-meta {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin: 0 0 calc(13.5 * var(--u));
  font-family: var(--ui);
  font-size: calc(19 * var(--u));
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nw-card .nw-date { color: rgba(255, 255, 255, 0.7); }

.nw-card .nw-body {
  margin: 0;
  max-width: calc(547.7 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.45;
  color: #fff;
}

.nw-card .nw-body p { margin: 0 0 calc(10 * var(--u)); }
.nw-card .nw-body p:last-child { margin-bottom: 0; }

.nw-card .nw-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(16 * var(--u));
  margin-top: calc(30 * var(--u));
}

.nw-card .nw-like,
.nw-card .nw-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64.4 * var(--u));
  height: calc(64.4 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #8400ff, #bb00ff);
  color: #fff;
  cursor: pointer;
}

.nw-card .nw-like-heart,
.nw-card .nw-copy-icon {
  display: block;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.nw-card .nw-like        { color: rgba(255, 255, 255, 0.75); }
.nw-card .nw-like.liked  { color: #fff; }

.nw-card .nw-like-count {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nw-card .nw-like.is-join {
  gap: calc(12 * var(--u));
  width: auto;
  padding: 0 calc(26 * var(--u)) 0 calc(22 * var(--u));
  border-radius: 999px;
  color: #fff;
  font-family: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  font-size: calc(24 * var(--u));
  line-height: 1;
  text-transform: uppercase;
}

.nw-card .nw-copy-ok   { background: rgba(76, 200, 120, 0.9); }
.nw-card .nw-copy-fail { background: rgba(220, 80, 80, 0.9); }

.nw-card {
  --nw-hover: 1.24s;
  transition: padding-bottom var(--nw-hover) var(--ease-quick),
              margin-bottom var(--nw-hover) var(--ease-quick);
}
.nw-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: calc(2 * var(--u));
  background: linear-gradient(180deg, #8400ff, #bb00ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nw-hover) var(--ease-quick);
}
.nw-card > h2 {
  position: relative;
  isolation: isolate;
  transition: padding var(--nw-hover) var(--ease-quick);
}
.nw-card > h2::before,
.nw-card .nw-like::before,
.nw-card .nw-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--nw-accent-a), var(--nw-accent-b));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nw-hover) var(--ease-quick);
}
.nw-card .nw-like,
.nw-card .nw-copy {
  position: relative;
  isolation: isolate;
}
.nw-card .nw-like::before,
.nw-card .nw-copy::before {
  background: linear-gradient(135deg, var(--nw-accent-a), var(--nw-accent-b));
  transition-duration: var(--dur-quick);
}
.nw-card .nw-copy-ok::before,
.nw-card .nw-copy-fail::before { display: none; }
.nw-card .nw-date {
  color: #bbb;
  background: linear-gradient(180deg, #8400ff, #bb00ff);
  -webkit-background-clip: text;
  background-clip: text;
  transition: color var(--nw-hover) var(--ease-quick);
}
.nw-card > .nw-image,
.nw-card .nw-body > .nw-figure:first-child > .nw-image {
  clip-path: inset(0 round calc(6 * var(--u)));
  transition: transform var(--nw-hover) var(--ease-quick),
              clip-path var(--nw-hover) var(--ease-quick);
}
.nw-card .nw-like-heart { transition: scale var(--dur-quick) var(--ease-quick); }
.nw-card .nw-like.liked .nw-like-heart { scale: 1.22; }

@media (hover: hover) and (min-width: 901px) {
  .nw-card:hover {
    padding-bottom: calc(59 * var(--u));
    margin-bottom: calc(-36 * var(--u));
  }
  .nw-card:hover::before { opacity: 1; }
  .nw-card > h2:hover {
    padding-left: calc(100.9 * var(--u));
    padding-right: calc(76 * var(--u));
  }
  .nw-card > h2:hover::before,
  .nw-card .nw-like:hover::before,
  .nw-card .nw-copy:hover::before { opacity: 1; }
  .nw-card .nw-meta:hover .nw-date { color: transparent; }
  .nw-card:hover > .nw-image,
  .nw-card:hover .nw-body > .nw-figure:first-child > .nw-image {
    transform: scale(1.14);
    clip-path: inset(6.14% round calc(5.26 * var(--u)));
  }
}

@media (min-width: 901px) {
  .nw-card.is-near {
    padding-bottom: calc(59 * var(--u));
    margin-bottom: calc(-36 * var(--u));
  }
  .nw-card.is-near > h2,
  .nw-card > h2.is-tap {
    padding-left: calc(100.9 * var(--u));
    padding-right: calc(76 * var(--u));
  }
  .nw-card.is-near > .nw-image,
  .nw-card.is-near .nw-body > .nw-figure:first-child > .nw-image {
    transform: scale(1.14);
    clip-path: inset(6.14% round calc(5.26 * var(--u)));
  }
}

@media (max-width: 900px) {
  .nw-card::before { padding: 2px; }
  .nw-card.is-near {
    padding-bottom: 18px;
    margin-bottom: -6px;
  }
  .nw-card.is-near > h2,
  .nw-card > h2.is-tap {
    padding-left: 32px;
    padding-right: 30px;
  }
  .nw-card.is-near > .nw-image,
  .nw-card.is-near .nw-body > .nw-figure:first-child > .nw-image {
    transform: scale(1.14);
    clip-path: inset(6.14% round 5px);
  }
}

.nw-card.is-near::before,
.nw-card.is-near > h2::before,
.nw-card > h2.is-tap::before,
.nw-card .nw-like.is-tap::before,
.nw-card .nw-copy.is-tap::before { opacity: 1; }
.nw-card.is-near .nw-date,
.nw-card .nw-meta.is-tap .nw-date { color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .nw-card,
  .nw-card::before,
  .nw-card > h2,
  .nw-card > h2::before,
  .nw-card .nw-like::before,
  .nw-card .nw-copy::before,
  .nw-card .nw-date,
  .nw-card > .nw-image,
  .nw-card .nw-body > .nw-figure:first-child > .nw-image,
  .nw-card .nw-like-heart { transition: none; }
}

.nw-ptn {
  box-sizing: border-box;
  width: 100%;
  padding: calc(14 * var(--u));
  border-radius: calc(23.06 * var(--u));
  background: var(--nw-card-bg);
  box-shadow: 0 calc(10 * var(--u)) calc(28.35 * var(--u)) rgba(0, 0, 0, 0.35);
}

.nw-ptn-in {
  position: relative;
  display: block;
  aspect-ratio: 4 / 1;
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  line-height: 0;
}

a.nw-ptn-in:focus-visible { outline: 2px solid var(--cyan, #b862ff); outline-offset: 3px; }

.nw-ptn-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.nw-ptn .ptn-chip,
.nw-ptn .ptn-erid {
  position: absolute;
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgba(0, 0, 0, 0.6);
  font-family: var(--ui);
  font-size: max(9px, calc(11 * var(--u)));
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}

.nw-ptn .ptn-chip { top: calc(8 * var(--u)); right: calc(8 * var(--u)); }
.nw-ptn .ptn-erid {
  right: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(8px, calc(10 * var(--u)));
  pointer-events: none;
}

.nw-rail-slot {
  position: absolute;
  top: calc(15 * var(--u));
  bottom: calc(20 * var(--u));
  width: calc(248 * var(--u));
  z-index: 1;
}

.nw-rail-slot[hidden] { display: none; }

.nw-rail {
  position: sticky;

  top: calc(var(--mk-top-h, 0px) + 16px);
  width: 100%;

  --nw-rail-h: min(calc(670 * var(--u)), calc(100vh - var(--mk-top-h, 0px) - 32px));
  height: var(--nw-rail-h);
  border-radius: calc(24 * var(--u));
  background: #fff;
  overflow: hidden;
  pointer-events: none;
}

.nw-rail.has-ad {
  background: #05070d;
  pointer-events: auto;
}

.nw-rail.has-ad::before { display: none; }

.nw-rail.ptn-fit {
  width: min(100%, var(--nw-rail-h) * var(--ptn-r));
  height: auto;
  aspect-ratio: var(--ptn-r);
  margin-inline: auto;
}

.nw-rail.has-link { cursor: pointer; }
.nw-rail:focus-visible { outline: 2px solid var(--cyan, #b862ff); outline-offset: 2px; }

.nw-rail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.nw-rail .ptn-chip,
.nw-rail .ptn-erid {
  position: absolute;
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgba(0, 0, 0, 0.6);
  font-family: var(--ui);
  font-size: calc(10 * var(--u));
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}

.nw-rail .ptn-chip { top: calc(10 * var(--u)); right: calc(10 * var(--u)); }
.nw-rail .ptn-erid {
  left: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  font-size: calc(9 * var(--u));
}

.nw-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--nw-accent-a), var(--nw-accent-b));
  -webkit-mask: repeating-linear-gradient(-45deg, #000 0 calc(30 * var(--u)), transparent calc(30 * var(--u)) calc(78 * var(--u)));
  mask: repeating-linear-gradient(-45deg, #000 0 calc(30 * var(--u)), transparent calc(30 * var(--u)) calc(78 * var(--u)));
}

.nw-rail-l { left: calc(26 * var(--u)); }
.nw-rail-r { right: calc(28 * var(--u)); }

.nw-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.nw-sakura {
  width: calc(868 * var(--u));
  height: calc(890 * var(--u));
  transform-origin: 0 0;
}

.nw-sakura-l {
  left: calc(136.51 * var(--u));
  top: calc(552 * var(--u));
  rotate: 86.69deg;
}

.nw-sakura-r {
  left: calc(100% - 127 * var(--u));
  top: calc(10 * var(--u));
}

@media (max-width: 900px) {
  .nw-lead {
    min-height: 0;
    padding: 14px 12px 28px;
  }

  .nw-feed {
    width: 100%;
    gap: 18px;
  }

  .nw-deco,
  .nw-rail-slot {
    display: none;
  }

  .nw-card {
    padding: 14px 14px 12px 16px;
    border-radius: 16px;
  }

  .nw-card .nw-image { margin-bottom: 10px; }

  .nw-card > h2 {
    margin: 0 0 10px -16px;
    padding: 8px 14px 8px 16px;
    font-size: 19px;
  }

  .nw-card .nw-meta { gap: 10px; margin-bottom: 10px; font-size: 14px; }
  .nw-card .nw-body { max-width: none; font-size: 15px; }
  .nw-card .nw-body p { margin-bottom: .5em; }

  .nw-card .nw-footer { gap: 10px; margin-top: 16px; }

  .nw-card .nw-like,
  .nw-card .nw-copy {
    width: 44px;
    height: 44px;
  }
  .nw-card .nw-like.is-join {
    gap: 8px;
    width: auto;
    padding: 0 18px 0 14px;
    font-size: 17px;
  }

  .nw-card .nw-like-heart,
  .nw-card .nw-copy-icon { width: 21px; height: 21px; }

  .nw-ptn { padding: 8px; border-radius: 16px; }
  .nw-ptn-in { border-radius: 10px; }
  .nw-ptn .ptn-chip,
  .nw-ptn .ptn-erid { padding: 2px 6px; border-radius: 5px; font-size: 9px; }
  .nw-ptn .ptn-chip { top: 5px; right: 5px; }
  .nw-ptn .ptn-erid { right: 5px; bottom: 5px; font-size: 8px; }
}