@charset "UTF-8";
/* skin/nstyle_news.css — 最新公告 news 頁「專屬」CSS
   版型參考 go100 news_hot（日期方塊 + 彩色分類標籤 + 標題 + 查看公告）。
   共用層在 css/nstyle_base.css（banner / .nstyle_page / .nstyle_section__head / .npager）。
   路徑基準：css/skin/ → 圖片為 ../../images/ */

/* banner 換圖 */
.nstyle_pagebanner--news {
  background-image: url(../../images/page_title_news_pc.jpg);
}
@media (max-width: 767.98px) {
  .nstyle_pagebanner--news {
    background-image: url(../../images/page_title_news_mo.jpg);
  }
}

/* 篩選列（靠左；欄位為 nselect 容器）*/
.nstyle_news__filter {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.nstyle_news__field {
  position: relative; /* nselect 定位根 */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 8px 18px;
  border: 1px solid #f4e3cf;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(246, 126, 17, 0.08);
}
.nstyle_news__field > .material-icons-round {
  flex: 0 0 auto;
  font-size: 22px;
  color: #f67e11;
}
.nstyle_news__field-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.nstyle_news__field-label {
  font-size: var(--nstyle_font-caption-sm);
  font-weight: 700;
  color: #9aa1ac;
}

/* 消息清單 */
.nstyle_news__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nstyle_news__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid #f4e3cf;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(146, 88, 20, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.nstyle_news__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(146, 88, 20, 0.14);
  border-color: #fac798;
}
.nstyle_news__date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  padding-right: 20px;
  border-right: 1px solid #f4e3cf;
}
.nstyle_news__date-y {
  font-size: var(--nstyle_font-caption);
  font-weight: 700;
  color: #9aa1ac;
}
.nstyle_news__date-md {
  font-size: var(--nstyle_font-title-md);
  font-weight: 800;
  line-height: 1.2;
  color: #161a22;
}
.nstyle_news__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.nstyle_news__tag {
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: var(--nstyle_font-caption-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.nstyle_news__tag--service {
  background: #e7f0ff;
  color: #2f74d6;
}
.nstyle_news__tag--system {
  background: #e3f7f3;
  color: #0f9b8e;
}
.nstyle_news__tag--event {
  background: #ffece0;
  color: #d96a00;
}
.nstyle_news__title {
  margin: 0;
  font-size: var(--nstyle_font-body-lg);
  font-weight: 700;
  line-height: 1.5;
  color: #161a22;
}
.nstyle_news__item:hover .nstyle_news__title {
  color: #d96a00;
}
.nstyle_news__more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #d96a00;
  font-weight: 700;
  font-size: var(--nstyle_font-body-sm);
  white-space: nowrap;
}
.nstyle_news__more .material-icons-round {
  font-size: 18px;
}

@media (max-width: 767.98px) {
  .nstyle_news__item {
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 16px 18px;
  }
  .nstyle_news__date {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    width: auto;
    padding-right: 0;
    border-right: 0;
  }
  .nstyle_news__date-md {
    font-size: var(--nstyle_font-body-lg);
  }
  .nstyle_news__more {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ───── 內文頁 news_content：文章卡（麵包屑 .nstyle_breadcrumb 已移至 nstyle_base 共用；
   分類標籤沿用 .nstyle_news__tag、內文用 .nstyle_story__p）───── */
.nstyle_article {
  padding: 36px 40px;
  border: 1px solid #f4e3cf;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(146, 88, 20, 0.08);
}
.nstyle_article__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid #f4e3cf;
}
.nstyle_article__title {
  margin: 0;
  font-size: var(--nstyle_font-title-lg);
  font-weight: 800;
  line-height: 1.4;
  color: #161a22;
}
.nstyle_article__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--nstyle_font-body-sm);
  font-weight: 600;
  color: #9aa1ac;
}
.nstyle_article__date .material-icons-round {
  font-size: 18px;
  color: #f67e11;
}
.nstyle_article__foot {
  margin-top: 28px;
  text-align: center;
}
@media (max-width: 767.98px) {
  .nstyle_article {
    padding: 24px 20px;
  }
}