/* お知らせ帯(.site-announce。試験の申込受付など)。
   正本はこのファイル(src/styles/announce.css)。SPA は AnnouncementBanner.tsx が import し、
   A 層へは scripts/exams/lib/shared-assets.mjs が /exams/assets/announce.css として配布する
   (帯のあるページだけが読む。render.mjs の pageSpec)。編集したら `npm run tokens:sync`。

   見た目は択一の「選んだ誤答」(MultipleChoiceQuestion.css の .option.wrong-selection)と同じ
   部品として読めるようにする: 淡い赤の地(--ng-surface)、2px の --ng の枠、角丸 8、余白 12/16
   (.option の基本規則と同じ値。2026-10-06 オーナー決定)。色はトークンだけを使い、ダークは
   tokens.css の dark-mode が --ng / --ng-surface を切り替える。余白は layout.css の規約どおり
   下だけ(margin-bottom)。
   右上の「閉じる(×)」(.site-announce__close)は学習ホームのブックマーク帯(exams.css の
   .kk-bookmark-close)と同じ 28px の素のボタン。帯の右上に絶対配置し、右の padding で場所を
   空ける(狭い画面で中身を縦に積んでも位置が変わらない)。hover は × を濃くするだけで、地を
   塗る囲みは出さない(淡い赤の帯の上では地色の囲みが見えにくい。オーナー指摘 2026-10-15)。
   閉じた帯は hidden 属性で消す(display: flex が UA の hidden より強いので明示する。
   AnnouncementBanner.tsx) */
.site-announce {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px 16px;
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 44px 12px 16px;
  background: var(--ng-surface);
  border: 2px solid var(--ng);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--fg);
  text-align: left;
}

.site-announce__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
  /* 文言の改行(config/announcements.json の \n)をそのまま出す。連続する空白は詰める */
  white-space: pre-line;
}

/* 帯の中のボタンは、横並びの右端のリンク(.site-announce__link)も縦積みの最後の行
   (.site-announce__actions の中)も同じ寸法: 主ボタン(.primary-btn、button.css)の見た目のまま、
   帯の中で収まる 8px 18px・0.9rem に詰める(2026-10-17 オーナー指摘で統一)。
   折り返しの禁止(nowrap)は横並びのリンク(文言が短い)だけ。縦積みの長いボタン(「無料アカウントを
   作成して答案を書く」)は狭い幅で折り返して帯の中に収める(web#680 レビュー P3: 320px ではみ出た) */
.site-announce .primary-btn,
.site-announce .primary-btn:any-link {
  padding: 8px 18px;
  font-size: 0.9rem;
}

.site-announce__link.primary-btn {
  flex: none;
  white-space: nowrap;
}

.site-announce[hidden] {
  display: none;
}

/* 色の種類(恒常的に使える 4 色。2026-10-17 オーナー決定)。既定は赤(--ng。申込受付・試験日などの
   お知らせ)、黄は注意・免責・登録の導線(--warn。ハブと問題ページの登録 CTA .kk-app-cta、問題ページの
   陳腐化の注意 .kk-outdated-notice、解答速報の免責、ドリル・受験画面の陳腐化の注記 CurrencyBadge、
   ログイン画面の削除告知 AuthScreen、受験画面のゲストバナー .trial-banner)、青は情報(--info。
   メール確認 .verify-banner)、緑は完了・良い知らせ(--ok)。色は地と枠だけで、文字色・余白・角丸は
   共通。ブロック全体の注意はこの帯を使い、注意色の左線は文章の一部の強調にだけ使う
   (GuestRetentionNote.css) */
.site-announce--warn {
  background: var(--warn-surface);
  border-color: var(--warn);
}

.site-announce--ok {
  background: var(--ok-surface);
  border-color: var(--ok);
}

.site-announce--info {
  background: var(--info-surface);
  border-color: var(--info);
}

/* アイコン付き・見出し付きの帯(受験画面のゲストバナー / メール確認。App.tsx、
   EmailVerificationBanner.tsx)。帯の基本の横並び(flex)の先頭にアイコン、続けて本文の束
   (.site-announce__body)を置く。見出しは太字 1 行、説明は本文色で少し小さく */
.site-announce__icon {
  flex: none;
  font-size: 1.35rem;
  line-height: 1;
}

.site-announce__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-announce__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}

.site-announce__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg);
}

/* 文だけの静的な帯(解答速報ページの免責。answer-key/AnswerKeyPage.tsx)。リンクも閉じるも
   無いので、× のために空けていた右の余白を左と同じにする */
.site-announce--static {
  padding-right: 16px;
}

/* 中身を縦に積む帯(見出し + 本文 + ボタン、見出し + 箇条書きなど)。問題ページの陳腐化の注意
   (ssr/entry.tsx の OutdatedNotice)とハブの登録 CTA(render.mjs の appCtaBlock)。器は同じで
   並べ方だけ block にする。中身の文字の大きさ・間隔は各部品の規則(exams.css)が決める */
.site-announce--stack {
  display: block;
}

/* 縦積みの帯の中の間隔は帯が決める: 中身(h2・p・ul)の既定の margin を消し、要素の間は 8px、
   ボタン行(.site-announce__actions)の前だけ 12px。これで見出しの上(帯の padding 12px)と
   ボタンの下(同 12px)が揃い、ボタンの位置がどの帯でも同じになる(2026-10-17 オーナー指摘)。
   A 層の見出しリズム(exams.css の `.kk h2:where(…)`、詳細度 0,1,1)に勝つよう 2 クラスで書く */
.site-announce.site-announce--stack > * {
  margin: 0;
}

.site-announce.site-announce--stack > * + * {
  margin-top: 8px;
}

.site-announce.site-announce--stack > .site-announce__actions {
  margin-top: 12px;
}

.site-announce__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) {
  .site-announce__close:hover {
    color: var(--fg);
  }
}

/* 狭い画面: 中身を縦に積み、ボタンは行頭から。器(角丸・枠線)はデスクトップと同じ */
@media (max-width: 768px) {
  .site-announce {
    flex-direction: column;
    align-items: flex-start;
  }
}