/* スーパームーンページ（/moon/supermoon/）専用CSS 2026-08-22
   ベースは moon/fullmoon/fullmoon.css（.hm-* / .fm-directory-hero）。ここは追加分とダークモード対のみ */

/* ヒーローは moon/index.php と同じ .moon-directory-hero（moon.css）を使用。.moon-calendar-page を付与して適用 */

/* 先に結論の補足行 */
.sm .sm-answer-sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #1c4d7a;
}

/* 区分タグ・凡例 */
.sm .sm-tag,
.sm .sm-legend {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
  white-space: nowrap;
  color: #fff;
  background: #7a8aa3;
}
.sm .sm-tag.sm-tier-super360, .sm .sm-legend.sm-tier-super360 { background: #d35400; }
.sm .sm-tag.sm-tier-super, .sm .sm-legend.sm-tier-super { background: #e0a400; }
.sm .sm-tag.sm-tier-micro, .sm .sm-legend.sm-tier-micro { background: #5b7a99; }

/* 年間一覧の行ハイライト（区分ごと） */
#main-content1 .sm .hm-table tr.sm-tier-super360 td { background-color: #fff1e6; }
#main-content1 .sm .hm-table tr.sm-tier-super td { background-color: #fff8e1; }
#main-content1 .sm .hm-table tr.sm-tier-micro td { background-color: #f1f5f9; }
#main-content1 .sm .hm-table tr.best td:first-child { box-shadow: inset 3px 0 0 #d35400; }
#main-content1 .sm .hm-table td a { color: #2c7eb9; }
#main-content1 .sm .sm-all td.hm-pn { white-space: nowrap; }

/* 年ナビ */
.sm .hm-links a + a { margin-left: 14px; }

@media (max-width: 768px) {
  .sm .sm-hero-visual { padding: 8px 0 16px; }
  .sm .sm-tag, .sm .sm-legend { font-size: 11px; padding: 1px 6px; }
}

/* ===== ダークモード（#darkBody／html[data-theme="dark"]）。配色は CLAUDE.md の基準表に準拠 ===== */
#darkBody .sm .hm-answer, html[data-theme="dark"] .sm .hm-answer { background: #2b2b2b; }
#darkBody .sm .hm-answer-year, html[data-theme="dark"] .sm .hm-answer-year,
#darkBody .sm .hm-answer-date strong, html[data-theme="dark"] .sm .hm-answer-date strong,
#darkBody .sm .hm-answer-list dt, html[data-theme="dark"] .sm .hm-answer-list dt,
#darkBody .sm .sm-answer-sub, html[data-theme="dark"] .sm .sm-answer-sub { color: #8ec3ee; }
#darkBody .sm .hm-answer-list dd, html[data-theme="dark"] .sm .hm-answer-list dd { color: #ddd; }
#darkBody .sm .hm-answer-list > div, html[data-theme="dark"] .sm .hm-answer-list > div { border-top-color: #555; }
#darkBody .sm .hm-status-tonight, html[data-theme="dark"] .sm .hm-status-tonight { color: #ff8a8a; }
#darkBody .sm .hm-rtb, html[data-theme="dark"] .sm .hm-rtb { background: #2b2b2b; color: #a8b8c8; border-left-color: #7fb4e8; }
#darkBody .sm .hm-rtb a, html[data-theme="dark"] .sm .hm-rtb a,
#darkBody .sm .hm-links a, html[data-theme="dark"] .sm .hm-links a,
#darkBody .sm .hm-sources a, html[data-theme="dark"] .sm .hm-sources a,
#darkBody #main-content1 .sm .hm-table td a, html[data-theme="dark"] #main-content1 .sm .hm-table td a,
#darkBody #main-content1 .sm .hm-all td.hm-pn a, html[data-theme="dark"] #main-content1 .sm .hm-all td.hm-pn a { color: #7fb4e8; }
#darkBody .sm .hm-note, html[data-theme="dark"] .sm .hm-note,
#darkBody .sm .hm-label, html[data-theme="dark"] .sm .hm-label { color: #a8b8c8; }
#darkBody .sm p, html[data-theme="dark"] .sm p,
#darkBody .sm li, html[data-theme="dark"] .sm li,
#darkBody .sm figcaption, html[data-theme="dark"] .sm figcaption { color: #ddd; }
#darkBody .sm h3, html[data-theme="dark"] .sm h3,
#darkBody .sm h4, html[data-theme="dark"] .sm h4 { color: #e8f1f8; }
#darkBody #main-content1 .sm .hm-table, html[data-theme="dark"] #main-content1 .sm .hm-table { background: #2b2b2b; }
#darkBody #main-content1 .sm .hm-table th, html[data-theme="dark"] #main-content1 .sm .hm-table th,
#darkBody #main-content1 .sm .hm-table td, html[data-theme="dark"] #main-content1 .sm .hm-table td { color: #ddd; border-bottom-color: #444; border-right-color: #444; }
#darkBody #main-content1 .sm .hm-table thead th, html[data-theme="dark"] #main-content1 .sm .hm-table thead th { background-color: #333; color: #e8f1f8; border-bottom-color: #555; }
#darkBody #main-content1 .sm .hm-table tbody th, html[data-theme="dark"] #main-content1 .sm .hm-table tbody th { background-color: #333; color: #e8f1f8; }
#darkBody #main-content1 .sm .hm-table tr.sm-tier-super360 td, html[data-theme="dark"] #main-content1 .sm .hm-table tr.sm-tier-super360 td { background-color: #3d2a20; }
#darkBody #main-content1 .sm .hm-table tr.sm-tier-super td, html[data-theme="dark"] #main-content1 .sm .hm-table tr.sm-tier-super td { background-color: #3d3520; }
#darkBody #main-content1 .sm .hm-table tr.sm-tier-micro td, html[data-theme="dark"] #main-content1 .sm .hm-table tr.sm-tier-micro td { background-color: #1e2f44; }
#darkBody #main-content1 .sm .hm-table tr.best td, html[data-theme="dark"] #main-content1 .sm .hm-table tr.best td { color: #f0c84a; }
#darkBody .sm .hm-sources, html[data-theme="dark"] .sm .hm-sources { background: #2b2b2b; border-color: #555; }
#darkBody .sm .hm-sources h3, html[data-theme="dark"] .sm .hm-sources h3 { color: #e8f1f8; }
#darkBody .sm .hm-content-visual figcaption, html[data-theme="dark"] .sm .hm-content-visual figcaption { background: #2b2b2b; color: #ddd; }
#darkBody .sm .hm-content-visual figcaption strong, html[data-theme="dark"] .sm .hm-content-visual figcaption strong { color: #e8f1f8; }
#darkBody .sm .sm-tag.sm-tier-micro, html[data-theme="dark"] .sm .sm-tag.sm-tier-micro,
#darkBody .sm .sm-legend.sm-tier-micro, html[data-theme="dark"] .sm .sm-legend.sm-tier-micro { background: #3d5a7a; }
/* style.css の #darkBody #main-content1 .sunrisesunset tbody td:first-child/last-child（#666）を上書き */
#darkBody #main-content1 .sm .hm-table tbody td:first-child, html[data-theme="dark"] #main-content1 .sm .hm-table tbody td:first-child,
#darkBody #main-content1 .sm .hm-table tbody td:last-child, html[data-theme="dark"] #main-content1 .sm .hm-table tbody td:last-child { color: #ddd !important; } /* 元が !important（css/style.css #darkBody #wave_moto 群）のため */
#darkBody #main-content1 .sm .hm-table tr.best td:first-child, html[data-theme="dark"] #main-content1 .sm .hm-table tr.best td:first-child,
#darkBody #main-content1 .sm .hm-table tr.best td:last-child, html[data-theme="dark"] #main-content1 .sm .hm-table tr.best td:last-child { color: #f0c84a !important; }
#darkBody #main-content1 .sm .hm-table tbody td strong, html[data-theme="dark"] #main-content1 .sm .hm-table tbody td strong { color: inherit; }
#darkBody #main-content1 .sm .hm-table tr.best td, html[data-theme="dark"] #main-content1 .sm .hm-table tr.best td,
#darkBody #main-content1 .sm .hm-table td.best, html[data-theme="dark"] #main-content1 .sm .hm-table td.best,
#darkBody #main-content1 .sm .hm-table th.best, html[data-theme="dark"] #main-content1 .sm .hm-table th.best { background-color: #3d3520; }
#darkBody .sm .hm-content-visual, html[data-theme="dark"] .sm .hm-content-visual { background: #2b2b2b; border-color: #555; }
#darkBody .sm .hm-answer-status, html[data-theme="dark"] .sm .hm-answer-status { color: #8ec3ee; }
#darkBody .sm .hm-answer-list dd a, html[data-theme="dark"] .sm .hm-answer-list dd a,
#darkBody .sm .hm-bullets a, html[data-theme="dark"] .sm .hm-bullets a,
#darkBody .sm p a, html[data-theme="dark"] .sm p a { color: #7fb4e8; }

/* ヒーロー: 統計ボックスは4項目を2列×2段（moon.css の --current は2列×101px固定のため高さを自動に）。文字は折り返さない */
.moon-calendar-page.sm .moon-hero-stats.moon-hero-stats--current { max-width: 520px; height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.moon-calendar-page.sm .moon-hero-stats--current .moon-hero-stat { min-height: 0; padding: 10px 12px 11px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.moon-calendar-page.sm .moon-hero-stats--current .moon-hero-stat:nth-child(n+3) { border-bottom: 0; }
.moon-calendar-page.sm .moon-hero-stats--current .moon-hero-stat__label,
.moon-calendar-page.sm .moon-hero-stats--current .moon-hero-stat strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moon-calendar-page.sm .moon-hero-lead { max-width: 760px; }
/* 4項目のフォントを統一（moon.css は --rise/--set の時刻だけ大きく(27.8px・Arial)しているため上書き） */
.moon-calendar-page.sm .moon-hero-stats--current .moon-hero-stat strong,
.moon-calendar-page.sm .moon-hero-stats--current .moon-hero-stat strong time { font-size: 20px; font-family: "Noto Sans JP", "Yu Gothic", sans-serif; font-weight: 700; letter-spacing: 0; }