.page-news{
  --news-hero-border: #3A2450;
  --news-rail-gradient: linear-gradient(180deg, rgba(232,184,75,0.85), rgba(0,229,255,0.65), transparent);
  background: var(--bg-main);
}
.page-news img{
  max-width: 100%;
  height: auto;
  display: block;
}
.page-news .news-breadcrumb{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 16px 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-sub);
}
.page-news .crumb-home{
  color: var(--neon-blue);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.page-news .crumb-home:hover,
.page-news .crumb-home:focus-visible{
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.page-news .crumb-sep{
  color: var(--border-line);
}
.page-news .crumb-current{
  color: var(--text-main);
}
.page-news .news-title-block{
  position: relative;
  padding: var(--space-lg) 0 var(--space-md);
}
.page-news .news-title-block::before{
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 6px;
  background: var(--gold);
  transform: skewX(-15deg);
  box-shadow: var(--shadow-gold);
}
.page-news .news-title-block .eyebrow-index{
  margin-bottom: var(--space-xs);
}
.page-news .news-title-block h1{
  font-family: var(--font-head);
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--text-main);
  margin: 0;
  letter-spacing: 0.02em;
}
.page-news .title-lead{
  margin-top: var(--space-sm);
  max-width: 640px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-sub);
}
.page-news .news-hero{
  margin: var(--space-md) 0 var(--space-xl);
  border: 3px solid var(--news-hero-border);
  box-shadow: var(--shadow-strong);
  background: var(--bg-panel);
}
.page-news .news-hero img{
  width: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
}
.page-news .news-layout{
  margin-top: var(--space-lg);
}
.page-news .news-content{
  min-width: 0;
}
.page-news .news-index{
  margin-bottom: var(--space-xl);
}
.page-news .index-card{
  position: relative;
  background: var(--bg-panel);
  border: 3px solid var(--border-line);
  box-shadow: var(--shadow-strong);
  padding: var(--space-lg) var(--space-md);
}
.page-news .index-card::after{
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  background: var(--gold);
  box-shadow: var(--shadow-gold);
}
.page-news .index-kicker{
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--neon-blue);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.page-news .index-heading{
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
  margin: 0 0 var(--space-sm);
}
.page-news .index-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.page-news .index-list li{
  font-family: var(--font-mono);
  font-size: 13px;
}
.page-news .index-list a{
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--text-sub);
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-line);
  transition: color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.page-news .index-list a:hover,
.page-news .index-list a:focus-visible{
  color: var(--gold-bright);
  padding-left: 12px;
  border-color: var(--gold);
}
.page-news .index-note{
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 2px dashed var(--border-line);
  display: grid;
  gap: var(--space-sm);
}
.page-news .note-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-sub);
  text-transform: uppercase;
}
.page-news .index-note .btn-gold{
  display: block;
  text-align: center;
}
.page-news .news-section{
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 3px solid var(--border-line);
}
.page-news .news-section:last-of-type{
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-lg);
}
.page-news .section-head{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.page-news .section-head h2{
  font-family: var(--font-head);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  color: var(--text-main);
  margin: 0;
}
.page-news .section-desc{
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-sub);
  margin: 0 0 var(--space-md);
  max-width: 640px;
}
.page-news .timeline-list{
  position: relative;
  margin-top: var(--space-lg);
}
.page-news .timeline-list::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--news-rail-gradient);
  opacity: 0.6;
}
.page-news .news-item{
  position: relative;
  padding: 0 0 var(--space-lg) 40px;
}
.page-news .news-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background: var(--bg-main);
  border: 3px solid var(--gold);
  box-shadow: 0 0 10px rgba(232, 184, 75, 0.45);
}
.page-news .item-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: 6px;
}
.page-news .item-date{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-sub);
}
.page-news .tag-cat-update,
.page-news .tag-cat-event,
.page-news .tag-cat-guide,
.page-news .tag-cat-opt,
.page-news .tag-cat-perf,
.page-news .tag-cat-content{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  line-height: 1.4;
  white-space: nowrap;
}
.page-news .tag-cat-update{
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  background: rgba(232, 184, 75, 0.1);
}
.page-news .tag-cat-event{
  color: var(--neon-blue);
  border: 1px solid var(--neon-blue);
  background: rgba(0, 229, 255, 0.08);
}
.page-news .tag-cat-guide{
  color: var(--gold-bright);
  border: 1px solid var(--text-sub);
}
.page-news .tag-cat-opt{
  color: var(--gold);
  border: 1px dashed var(--gold);
}
.page-news .tag-cat-perf{
  color: var(--neon-blue);
  border: 1px dashed var(--neon-blue);
}
.page-news .tag-cat-content{
  color: var(--text-sub);
  border: 1px solid var(--border-line);
  background: var(--bg-float);
}
.page-news .item-title{
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 8px;
  line-height: 1.5;
}
.page-news .item-detail{
  border-left: 3px solid var(--border-line);
  margin-top: var(--space-xs);
  transition: border-color 0.2s var(--ease-out);
}
.page-news .item-detail[open]{
  border-left-color: var(--neon-blue);
}
.page-news .item-detail summary{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--neon-blue);
  padding: 6px 0;
  list-style: none;
}
.page-news .item-detail summary::-webkit-details-marker{
  display: none;
}
.page-news .item-detail summary::before{
  content: "+";
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 13px;
  border: 1px solid var(--neon-blue);
  color: var(--neon-blue);
  font-size: 13px;
  transition: transform 0.2s var(--ease-out);
}
.page-news .item-detail[open] summary::before{
  content: "−";
}
.page-news .detail-body{
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-sub);
}
.page-news .detail-body p{
  margin: 0 0 8px;
}
.page-news .guide-showcase{
  display: grid;
  gap: var(--space-lg);
}
.page-news .guide-grid{
  display: grid;
  gap: var(--space-md);
}
.page-news .guide-card{
  position: relative;
  background: var(--bg-panel);
  border: 3px solid var(--border-line);
  padding: var(--space-md);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.page-news .guide-card::before{
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 30px;
  height: 30px;
  border-left: 3px solid var(--gold);
  border-top: 3px solid var(--gold);
}
.page-news .guide-card:hover,
.page-news .guide-card:focus-within{
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}
.page-news .guide-index{
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--neon-blue);
  margin-bottom: var(--space-xs);
}
.page-news .guide-title{
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
  margin: 0 0 6px;
}
.page-news .guide-desc{
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-sub);
  margin: 0 0 var(--space-sm);
}
.page-news .guide-meta{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 12px;
}
.page-news .guide-count{
  color: var(--gold);
}
.page-news .guide-tag{
  color: var(--text-sub);
  border: 1px solid var(--border-line);
  padding: 2px 8px;
}
.page-news .guide-figure{
  margin: 0;
  border: 3px solid var(--border-line);
  background: var(--bg-panel);
  box-shadow: var(--shadow-strong);
}
.page-news .guide-figure img{
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
.page-news .archive-panel{
  border: 3px solid var(--border-line);
  background: var(--bg-panel);
  box-shadow: var(--shadow-strong);
}
.page-news .archive-panel > img{
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-bottom: 3px solid var(--border-line);
}
.page-news .archive-groups{
  padding: var(--space-md);
}
.page-news .archive-group{
  border-bottom: 1px solid var(--border-line);
}
.page-news .archive-group:last-child{
  border-bottom: none;
}
.page-news .archive-group summary{
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-sm) 0;
  list-style: none;
  transition: background 0.2s var(--ease-out);
}
.page-news .archive-group summary::-webkit-details-marker{
  display: none;
}
.page-news .archive-group summary:hover{
  background: var(--bg-float);
}
.page-news .archive-version{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  min-width: 48px;
}
.page-news .archive-name{
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}
.page-news .archive-year{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-sub);
}
.page-news .archive-group summary::after{
  content: "+";
  font-family: var(--font-mono);
  color: var(--neon-blue);
  margin-left: var(--space-xs);
}
.page-news .archive-group[open] summary::after{
  content: "−";
}
.page-news .archive-group[open] summary .archive-name{
  color: var(--gold-bright);
}
.page-news .archive-body{
  padding: 0 var(--space-sm) var(--space-sm);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-sub);
}
.page-news .archive-body p{
  margin: 0;
}
.page-news .more-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.page-news .more-card{
  display: block;
  background: var(--bg-panel);
  border: 3px solid var(--border-line);
  padding: var(--space-md);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.page-news .more-card:hover,
.page-news .more-card:focus-visible{
  border-color: var(--neon-blue);
  box-shadow: var(--shadow-strong);
  transform: translateY(-2px);
}
.page-news .more-label{
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}
.page-news .more-desc{
  font-size: 13px;
  color: var(--text-sub);
}
.page-news .community-card{
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  border: 3px solid var(--border-line);
  background: var(--bg-panel);
  box-shadow: var(--shadow-strong);
}
.page-news .community-card img{
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-bottom: 3px solid var(--border-line);
}
.page-news .community-body{
  padding: var(--space-md);
}
.page-news .community-kicker{
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--neon-blue);
  margin-bottom: 4px;
}
.page-news .community-title{
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 8px;
}
.page-news .community-body p{
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-sub);
  margin: 0 0 var(--space-sm);
}
.page-news .news-note{
  border-left: 3px solid var(--red-alert);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
}
.page-news .news-note p{
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
  margin: 0;
}
.page-news .index-list a:focus-visible,
.page-news .item-detail summary:focus-visible,
.page-news .archive-group summary:focus-visible,
.page-news .more-card:focus-visible{
  outline: 3px solid var(--neon-blue);
  outline-offset: 2px;
}

@media (min-width: 640px){
  .page-news .more-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .page-news .guide-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .page-news .guide-card:last-child{
    grid-column: 1 / -1;
  }
  .page-news .guide-figure img{
    max-height: 420px;
  }
  .page-news .community-card img{
    max-height: none;
  }
}

@media (min-width: 960px){
  .page-news .news-title-block{
    padding: var(--space-xl) 0 var(--space-md);
  }
  .page-news .title-lead{
    font-size: 16px;
    max-width: 720px;
  }
  .page-news .news-hero{
    margin: var(--space-lg) 0 var(--space-xl);
  }
  .page-news .news-layout{
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  .page-news .news-index{
    position: sticky;
    top: calc(var(--header-h) + 24px);
    margin-bottom: 0;
  }
  .page-news .guide-showcase{
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }
  .page-news .guide-figure{
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
  .page-news .guide-figure img{
    max-height: none;
    height: auto;
  }
  .page-news .more-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .page-news .community-card{
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .page-news .community-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom: none;
    border-right: 3px solid var(--border-line);
  }
}