/*
 * UY Moon Pages v0.3.0 — 今日の月（/moon/ と /moon/{都道府県}/）
 * 色・文字・形は共通デザイン（uy-design-system）の決まり（--uy-*）で書く。共通デザインが無いときは後ろの予備の値。
 * 星空のページなので夜で固定（body に data-uy-mode="night"）。
 * スマホの幅（780px以下）で共通デザインのヘッダーがあるときは、それを出し、このページのヘッダーはしまう。
 */
body.mn-body {
  --mn-bg: var(--uy-bg, #020611);
  --mn-panel: var(--uy-surface, #0a1227);
  --mn-panel2: var(--uy-surface-2, #0d1934);
  --mn-line: var(--uy-line, rgba(155, 210, 255, .16));
  --mn-line2: var(--uy-line-strong, rgba(110, 200, 255, .36));
  --mn-text: var(--uy-text, #f4f7ff);
  --mn-sub: var(--uy-text-2, #b9c6dd);
  --mn-muted: #8a9ab4;
  --mn-cyan: var(--uy-accent, #6addff);
  --mn-cyan-soft: var(--uy-accent-soft, rgba(106, 221, 255, .12));
  --mn-gold: var(--uy-highlight, #ffd978);
  --mn-gold-bg: var(--uy-highlight-bg, rgba(255, 217, 120, .14));
  --mn-gold-line: var(--uy-highlight-line, rgba(255, 217, 120, .5));
  --mn-violet: var(--uy-violet, #af9eff);
  --mn-focus: var(--uy-focus, #ffd978);
  --mn-font: var(--uy-font, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif);
  --mn-r: var(--uy-r-3, 16px);
  --mn-r2: var(--uy-r-2, 12px);
  --mn-tap: var(--uy-tap, 44px);
  --mn-moon: #f3ecd2;
  --mn-moon-dark: #1c2840;
  margin: 0; min-height: 100vh; color: var(--mn-text);
  font-family: var(--mn-font); font-size: 15px; line-height: var(--uy-lh, 1.65);
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
  background: var(--uy-bg-page, radial-gradient(circle at 10% 12%, rgba(82, 101, 255, .12), transparent 30%), radial-gradient(circle at 88% 26%, rgba(106, 221, 255, .08), transparent 32%), linear-gradient(180deg, #020611 0%, #071126 100%));
  background-color: var(--mn-bg);
  background-attachment: fixed;
  color-scheme: dark;
}
.mn-body *, .mn-body *::before, .mn-body *::after { box-sizing: border-box; }
.mn-body a { color: var(--mn-cyan); text-underline-offset: 3px; }
.mn-body :focus-visible { outline: 3px solid var(--mn-focus); outline-offset: 3px; }
.mn-skip { position: absolute; left: -9999px; top: 0; }
.mn-skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--mn-panel2); padding: 8px 12px; border-radius: 10px; }
.mn-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- ヘッダー（PC。スマホで共通デザインがあるときは共通のヘッダー） ---- */
.mn-site-head { position: sticky; top: 0; z-index: 50; background: rgba(2, 7, 17, .91); border-bottom: 1px solid var(--mn-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mn-site-head__in { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; width: min(calc(100% - 20px), 880px); margin: 0 auto; }
.mn-brand { display: inline-flex; align-items: center; min-height: var(--mn-tap); color: var(--mn-text) !important; font-weight: 900; font-size: 15px; text-decoration: none; letter-spacing: -.02em; }
.mn-site-head nav { display: flex; gap: 14px; font-size: 13px; }
.mn-site-head nav a { color: var(--mn-sub); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--mn-tap); }
.mn-site-head nav a:hover { color: var(--mn-text); }
@media (max-width: 780px) {
  body.mn-uyds .mn-site-head { display: none; }
  body.mn-uyds .uyds-hdr { display: block; }
}
/* PCでは共通デザインの部品の CSS を読み込まないので、ここでしまう（PCの見た目は変えない） */
@media (min-width: 781px) {
  .mn-body .uyds-hdr, .mn-body .uyds-drawer { display: none !important; }
}
.mn-admin-note { margin: 0; padding: 6px 12px; background: #3a2a05; color: #ffe3a3; font-size: 12px; text-align: center; border-bottom: 1px solid rgba(255, 213, 118, .35); }

.mn-shell { width: min(calc(100% - 20px), 880px); margin: 0 auto; }
main.mn-shell { padding: 6px 0 24px; }

.mn-crumb ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 11px; color: var(--mn-sub); }
.mn-crumb li + li::before { content: "›"; margin-right: 4px; }
.mn-crumb a { color: var(--mn-sub); }

/* ---- 1 一文の答え ---- */
.mn-hero { padding: 12px 14px; border: 1px solid var(--mn-line); border-radius: var(--mn-r);
  background: radial-gradient(circle at 92% 4%, rgba(106, 221, 255, .10), transparent 28%), var(--mn-panel); box-shadow: var(--uy-shadow-1, 0 2px 14px rgba(0, 0, 0, .22)); }
.mn-eyebrow { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; font-size: 11px; line-height: 1.4; }
.mn-eyebrow span { padding: 2px 8px; border: 1px solid var(--mn-line2); border-radius: 999px; background: var(--mn-cyan-soft); color: var(--mn-sub); }
.mn-eyebrow span:first-child { color: var(--mn-cyan); font-weight: 700; }
.mn-hero h1 { margin: 8px 0 4px; font-size: var(--uy-fs-7, 22px); font-weight: 900; line-height: 1.25; letter-spacing: var(--uy-ls-head, -.02em); }
.mn-answer { margin: 0; font-size: 15px; line-height: 1.7; }

/* ---- カード ---- */
.mn-card { margin-top: 10px; padding: 14px; border: 1px solid var(--mn-line); border-radius: var(--mn-r); background: var(--mn-panel); box-shadow: var(--uy-shadow-1, 0 2px 14px rgba(0, 0, 0, .22)); }
.mn-card h2 { margin: 0 0 8px; font-size: var(--uy-fs-6, 18px); font-weight: 900; line-height: 1.3; letter-spacing: var(--uy-ls-head, -.02em); }
.mn-kicker { margin: 0 0 2px; font-size: 11px; font-weight: 900; letter-spacing: .08em; color: var(--mn-cyan); }
.mn-card p { margin: 0 0 8px; }
.mn-card p:last-child { margin-bottom: 0; }
.mn-h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 900; }
.mn-big { font-size: 16px; font-weight: 700; }
.mn-dim { color: var(--mn-sub); }
.mn-small { font-size: 12.5px; }
.mn-note { padding: 8px 10px; border-radius: var(--mn-r2); background: var(--mn-cyan-soft); border: 1px solid var(--mn-line2); font-size: 13.5px; }
.mn-btn { display: inline-flex; align-items: center; min-height: var(--mn-tap); padding: 0 16px; border-radius: var(--mn-r2); border: 1px solid var(--mn-line2); background: var(--mn-panel); color: var(--mn-cyan); font-size: 13px; font-weight: 900; text-decoration: none; }

/* ---- 月の絵 ---- */
.mn-moon__dark { fill: var(--mn-moon-dark); }
.mn-moon__lit { fill: var(--mn-moon); }
.mn-moon__rim { fill: none; stroke: rgba(243, 236, 210, .28); stroke-width: 1.2; }
.mn-moon--hero { filter: drop-shadow(0 0 14px rgba(243, 236, 210, .22)); }

/* ---- 2 月の形と3つの数字 ---- */
.mn-shape { display: grid; grid-template-columns: 104px 1fr; gap: 4px 12px; align-items: center; }
.mn-shape__pic { grid-row: 1 / 3; display: flex; justify-content: center; }
.mn-shape__pic svg { width: 100px; height: 100px; }
.mn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.mn-stats div { min-width: 0; }
.mn-stats dt { font-size: 11px; color: var(--mn-sub); line-height: 1.3; }
.mn-stats dd { margin: 0; font-size: 13px; line-height: 1.25; }
.mn-stats b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mn-stats small { display: block; font-size: 11px; color: var(--mn-sub); }
.mn-shape__text { margin: 0 !important; font-size: 13px; color: var(--mn-sub); }

/* ---- 3 出入り ---- */
.mn-times h2 { font-size: 14px; margin-bottom: 6px; }
.mn-times__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.mn-times__list li { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 8px 7px; border-radius: var(--mn-r2); background: var(--mn-cyan-soft); border: 1px solid var(--mn-line); min-width: 0; }
.mn-times__k { font-size: 11px; color: var(--mn-sub); }
.mn-times__v { font-size: 22px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mn-times__s { font-size: 11.5px; color: var(--mn-sub); line-height: 1.35; }
.mn-times__sun { margin: 8px 0 0 !important; font-size: 12.5px; color: var(--mn-sub); }

/* ---- いちばんの注目（次の満月）：金色はここだけ ---- */
.mn-feature { border-color: var(--mn-gold-line); background: linear-gradient(150deg, var(--mn-gold-bg), var(--mn-panel) 62%); }
.mn-feature h2 { font-size: 14px; color: var(--mn-gold); margin-bottom: 2px; }
.mn-feature__main { margin: 0 !important; font-size: 22px; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; }
.mn-feature__main small { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--mn-gold); }
.mn-feature__sub { margin: 2px 0 6px !important; font-size: 13.5px; font-weight: 700; color: var(--mn-sub); }

/* ---- 5 今どこ ---- */
.mn-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.mn-seg button { min-height: var(--mn-tap); padding: 4px 14px; border-radius: 999px; border: 1px solid var(--mn-line2); background: transparent; color: var(--mn-sub); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mn-seg button[aria-pressed="true"] { background: var(--mn-cyan-soft); color: var(--mn-text); border-color: var(--mn-cyan); }
.mn-now__nums { display: flex; gap: 18px; align-items: baseline; margin: 0 0 4px; }
.mn-now__nums b { font-size: 24px; font-weight: 900; }
.mn-now__nums span { font-size: 12px; color: var(--mn-sub); margin-right: 4px; }

/* ---- 6 満ち欠け ---- */
.mn-phases { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.mn-phases li { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: var(--mn-r2); background: var(--mn-panel2); border: 1px solid var(--mn-line); }
.mn-phases__k { flex: 0 0 3.6em; font-weight: 900; color: var(--mn-sub); }
.mn-phases__k em { display: block; font-style: normal; font-size: 11px; color: var(--mn-cyan); }
.mn-phases__fullMoon .mn-phases__k { color: var(--mn-text); }
.mn-phases__v { font-variant-numeric: tabular-nums; }
.mn-phases__v small { display: block; font-size: 12px; color: var(--mn-sub); }

/* ---- 表 ---- */
.mn-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mn-m, .mn-pl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mn-m th, .mn-m td, .mn-pl th, .mn-pl td { padding: 6px; border-bottom: 1px solid var(--mn-line); text-align: left; white-space: nowrap; vertical-align: middle; }
.mn-m thead th, .mn-pl thead th { font-size: 11px; font-weight: 700; color: var(--mn-sub); }
.mn-m tbody th small { margin-left: 3px; font-size: 11px; color: var(--mn-sub); font-weight: 400; }
.mn-m tbody th { font-weight: 700; }
.mn-m tr.is-today, .mn-pl tr.is-today { background: var(--mn-cyan-soft); }
.mn-m tr.is-today th { color: var(--mn-cyan); }
.mn-m__pic { width: 30px; }
.mn-m__pic svg { display: block; }
.mn-m__tags { white-space: normal !important; }
.mn-tag { display: inline-block; margin: 1px 3px 1px 0; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--mn-cyan-soft); color: var(--mn-cyan); }
.mn-tag--fullMoon { background: var(--mn-gold-bg); color: var(--mn-gold); }
.mn-tag--newMoon { background: rgba(175, 158, 255, .14); color: var(--mn-violet); }
.mn-more { margin: 6px 0 8px; }
.mn-more summary { display: inline-flex; align-items: center; min-height: var(--mn-tap); padding: 0 16px; border-radius: var(--mn-r2); border: 1px solid var(--mn-line2); color: var(--mn-cyan); cursor: pointer; font-size: 13px; font-weight: 900; list-style: none; }
.mn-more summary::-webkit-details-marker { display: none; }
.mn-more[open] summary { margin-bottom: 6px; }
.mn-pl td small, .mn-pl th small { display: block; font-size: 11px; color: var(--mn-sub); font-weight: 400; white-space: normal; }
.mn-pl tr.is-base th { color: var(--mn-cyan); }
.mn-pl th a { font-weight: 900; }
.mn-fm td small { display: block; }
.mn-fm td:last-child { white-space: normal; }

/* 全国：地方ごとの表 */
.mn-region { border-top: 1px solid var(--mn-line); }
.mn-region:last-of-type { border-bottom: 1px solid var(--mn-line); }
.mn-region summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--mn-tap); padding: 0 4px; cursor: pointer; list-style: none; }
.mn-region summary::-webkit-details-marker { display: none; }
.mn-region summary b { font-size: 14px; }
.mn-region summary small { font-size: 12px; color: var(--mn-sub); font-variant-numeric: tabular-nums; }
.mn-region summary::after { content: "＋"; color: var(--mn-cyan); font-weight: 900; margin-left: 4px; }
.mn-region[open] summary::after { content: "−"; }
.mn-pt th { width: 52%; }
.mn-rowlink { display: flex; flex-direction: column; justify-content: center; min-height: var(--mn-tap); text-decoration: none; font-weight: 900; }
.mn-rowlink small { font-weight: 400; }
.mn-rowlink__go { font-size: 11px; font-weight: 700; text-decoration: underline; }

/* 全国：満ち欠けの図と30日の帯 */
.mn-cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; margin: 6px 0 4px; padding: 0; list-style: none; }
.mn-cycle li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: var(--mn-r2); border: 1px solid transparent; text-align: center; }
.mn-cycle li b { font-size: 13px; }
.mn-cycle li small { font-size: 11px; color: var(--mn-sub); }
.mn-cycle li em { font-style: normal; font-size: 11px; font-weight: 900; color: var(--mn-cyan); }
.mn-cycle li.is-today { border-color: var(--mn-cyan); background: var(--mn-cyan-soft); }
.mn-strip { display: flex; gap: 4px; margin: 0 0 8px; padding: 0 0 6px; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.mn-strip li { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; font-variant-numeric: tabular-nums; }
.mn-strip li span { font-size: 11px; color: var(--mn-sub); }
.mn-strip li small { font-size: 11px; color: var(--mn-sub); }
.mn-strip li.is-today { background: var(--mn-cyan-soft); }
.mn-strip li.is-today span { color: var(--mn-cyan); font-weight: 900; }

.mn-links { margin: 4px 0 0; padding: 0; list-style: none; }
.mn-links li { margin: 2px 0; }
.mn-links a { display: inline-flex; align-items: center; min-height: var(--mn-tap); }

/* ---- 11 名前 ---- */
.mn-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.mn-names li { padding: 6px 10px; border-radius: var(--mn-r2); border: 1px solid var(--mn-line); background: var(--mn-panel2); font-size: 13px; line-height: 1.35; }
.mn-names li span { display: block; font-size: 11px; color: var(--mn-sub); }
.mn-names li small { margin-left: 4px; font-size: 11px; color: var(--mn-sub); }
.mn-names li.is-soon { border-color: var(--mn-cyan); background: var(--mn-cyan-soft); }
.mn-names li.is-soon b { color: var(--mn-cyan); font-size: 16px; }

.mn-method p { font-size: 13.5px; color: var(--mn-sub); }

/* ---- 13 都道府県 ---- */
.mn-prefs h3 { margin: 10px 0 4px; font-size: 12px; color: var(--mn-sub); font-weight: 700; }
.mn-prefs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mn-prefs li a, .mn-prefs li span { display: inline-flex; align-items: center; justify-content: center; min-width: 3.6em; min-height: var(--mn-tap); padding: 0 10px; border-radius: 8px; font-size: 13px; border: 1px solid var(--mn-line); }
.mn-prefs li a { color: var(--mn-cyan); text-decoration: none; background: var(--mn-cyan-soft); font-weight: 700; }
.mn-prefs li span[aria-current] { color: var(--mn-text); border-color: var(--mn-cyan); font-weight: 700; }
.mn-prefs li span.is-soon { color: #5d6c84; }

.mn-foot { margin-top: 18px; padding: 16px 0 28px; border-top: 1px solid var(--mn-line); font-size: 12.5px; color: var(--mn-sub); }
.mn-foot p { margin: 0 0 6px; }
.mn-foot__links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.mn-foot__links a { color: var(--mn-sub); display: inline-flex; align-items: center; min-height: var(--mn-tap); }

.mn-unavailable { margin-top: 24px; text-align: center; }
.mn-unavailable h1 { font-size: 20px; }

@media (min-width: 640px) {
  body.mn-body { font-size: 16px; }
  .mn-hero { padding: 18px 20px; }
  .mn-hero h1 { font-size: var(--uy-fs-8, 28px); }
  .mn-answer { font-size: 16.5px; }
  .mn-card { padding: 16px 20px; }
  .mn-shape { grid-template-columns: 140px 1fr; }
  .mn-shape__pic svg { width: 132px; height: 132px; }
  .mn-stats b { font-size: 28px; }
  .mn-times__v { font-size: 28px; }
  .mn-phases { grid-template-columns: 1fr 1fr; }
  .mn-cycle { grid-template-columns: repeat(8, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }