/* ========================================
   お知らせ（ja/en の news.html・news-detail.html）— パステル版
   - 一覧: 台紙（.paper）を掲示板に見立て、お知らせを画びょうで留めたカードとして貼る
   - 詳細: 罫線の紙（.prose-sheet）に .prose の組み方で載せる
   一覧のカードと詳細の中身は js/news-site.js・news-detail.js が組み立てる。
   JS が付ける Tailwind のクラス（旧配色）は #newsList / #newsDetail の中に限って上書きする。
   カテゴリの色分けは js/news-shared.js の CATEGORY_STYLES.badge のクラスに対応づける
   （campaign と maintenance は同じクラスなので同じ色になる）
   ======================================== */

/* ── カテゴリの色 ── */
/* update（旧: 黄） */
:is(#newsList, #newsDetail) .bg-tertiary-fixed {
  background: var(--c-lemon);
  color: var(--c-lemon-deep);
}

/* campaign・maintenance（旧: 水色） */
:is(#newsList, #newsDetail) .bg-secondary-container {
  background: var(--c-sky);
  color: var(--c-sky-deep);
}

/* other（旧: グレー） */
:is(#newsList, #newsDetail) .bg-slate-200 {
  background: var(--c-lavender);
  color: var(--c-lavender-deep);
}

/* カテゴリのバッジと日付 */
:is(#newsList, #newsDetail) :is(.bg-tertiary-fixed, .bg-secondary-container, .bg-slate-200) {
  padding: 4px 12px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.75rem;
  line-height: 1.5;
}

:is(#newsList, #newsDetail) time {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
}

/* 読み込み中・空・エラーの表示（旧: 灰色の文字） */
:is(#newsList, #newsDetail) .text-\[\#999\] {
  color: var(--c-ink-soft);
}

:is(#newsList, #newsDetail) > div.text-center .material-symbols-outlined {
  color: var(--c-lavender-deep);
}

/* ── 一覧: 掲示板 ── */
.news-board {
  display: grid;
  gap: 32px;
}

/* 一覧のカード。画びょうの色をカテゴリに合わせる */
#newsList > a {
  --news-bg: var(--c-lavender);
  --news-deep: var(--c-lavender-deep);
  position: relative;
  display: block;
  padding: 28px 20px 22px 24px;
  border: 0;
  border-radius: 20px;
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--shadow-soft);
  transform: rotate(var(--r, -0.6deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#newsList > a:nth-child(even) {
  --r: 0.6deg;
}

#newsList > a:has(.bg-tertiary-fixed) {
  --news-bg: var(--c-lemon);
  --news-deep: var(--c-lemon-deep);
}

#newsList > a:has(.bg-secondary-container) {
  --news-bg: var(--c-sky);
  --news-deep: var(--c-sky-deep);
}

/* 画びょう（css/cards.css の .has-pin と同じ形。JS のカードにはクラスを足せないのでここで描く） */
#newsList > a::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 35%, var(--c-white) 0 2px, transparent 3px), var(--news-deep);
  box-shadow: 0 3px 6px var(--c-line);
}

#newsList > a:hover,
#newsList > a:focus-visible {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: var(--shadow-lift);
}

#newsList > a:focus-visible {
  outline: 3px solid var(--c-berry);
  outline-offset: 4px;
}

/* 中身: 左に「日付・カテゴリ／タイトル／抜粋」、右に矢印 */
#newsList > a > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
}

#newsList > a > div > div {
  grid-column: 1;
}

#newsList > a > div > div:first-child {
  gap: 12px;
}

#newsList > a h2 {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

#newsList > a .text-on-surface-variant {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--c-ink-soft);
}

/* 矢印は丸いボタンの見立て。カードに触れるとカテゴリの色になる */
#newsList > a > div > .material-symbols-outlined {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--c-cream-deep);
  font-size: 22px;
  color: var(--news-deep);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

#newsList > a:hover > div > .material-symbols-outlined,
#newsList > a:focus-visible > div > .material-symbols-outlined {
  background: var(--news-bg);
  transform: translateX(3px);
}

/* 読み込み中・空・エラーは小さなメモにする */
#newsList > div.text-center {
  padding: 40px 24px;
  border-radius: 20px;
  background: var(--c-cream-deep);
}

@media (min-width: 768px) {
  #newsList > a {
    padding: 32px 28px 28px 32px;
  }

  #newsList > a h2 {
    font-size: 1.25rem;
  }
}

/* ── 詳細: 罫線の紙 ── */
.news-sheet {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* JS が付ける余白（mb-*）はやめて、ここで間隔をそろえる */
#newsDetail > * {
  margin-bottom: 0;
}

/* 一覧へ戻るリンク（旧: 文字だけのリンク）は小さなチップにする */
#newsDetail > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 16px 6px 10px;
  border-radius: 9999px;
  background: var(--c-pink);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--c-pink-deep);
  text-decoration: none;
  transition: gap 0.2s ease;
}

#newsDetail > a:hover,
#newsDetail > a:focus-visible {
  gap: 10px;
  text-decoration: none;
}

#newsDetail > a .material-symbols-outlined {
  font-size: 20px;
}

#newsDetail > div.flex {
  margin-top: 28px;
  gap: 12px;
}

#newsDetail > h1 {
  margin-top: 12px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(1.625rem, 6vw, 2.25rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

/* 本文は改行をそのまま見せる（style="white-space: pre-wrap" は JS 側） */
#newsDetail > .news-content {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 2px dashed var(--c-line);
  font-size: 1rem;
  line-height: 1.95;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

#newsDetail .news-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  #newsList > a,
  #newsList > a > div > .material-symbols-outlined,
  #newsDetail > a {
    transition: none;
  }
}