/* =====================================================================
   デイリーめいちゃんニュース ─ 各号の共通パーツ（見た目）
   - 各号の <head> に tools/finish.py が自動で読み込みを入れる
   - その日のニュースの見た目は各号のHTMLの中。ここは「器」だけ
   - クラス名はぜんぶ mn- で始める（各号のCSSとぶつからないように）
   ===================================================================== */

:root {
  --mn-deep: #0033A0;
  --mn-blue: #2A5FD0;
  --mn-ink: #1E2F52;
  --mn-sub: #5B6B8C;
  --mn-card: rgba(255, 255, 255, 0.95);
  --mn-line: rgba(42, 95, 208, 0.18);
}

/* ---------- 前後の号から来たときは、オープニングの封筒を出さない ---------- */
.mn-skip-opening #opening { display: none !important; }

/* ---------- 読んだところまでのバー（いちばん上） ---------- */
.mn-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 9990;
  pointer-events: none;
  background: rgba(42, 95, 208, 0.12);
}
.mn-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6FA8FF, var(--mn-blue) 60%, var(--mn-deep));
  transform-origin: 0 50%;
  transform: scaleX(var(--mn-p, 0));
  border-radius: 0 4px 4px 0;
}
.mn-progress-panda {
  position: absolute;
  top: -1px;
  left: 0;
  width: 22px;
  transform: translateX(calc(var(--mn-p, 0) * (100vw - 22px)));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* ---------- 号のおわり：シェア＋前後の号 ---------- */
.mn-end {
  max-width: 680px;
  margin: 8px auto 16px;
  padding: 20px 16px 18px;
  background: var(--mn-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px;
  border: 2px solid var(--mn-line);
  box-shadow: 0 6px 24px rgba(0, 51, 160, 0.12);
  color: var(--mn-ink);
  font-family: 'Noto Sans JP', sans-serif;
  position: relative;
  z-index: 1;
  /* 短いボタンや見出しが多いので、ふつうの日本語の折り返し（行頭の「ー」「）」などは禁止）で */
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}
.mn-end * { box-sizing: border-box; }
.mn-end.mn-inset { margin-left: 12px; margin-right: 12px; }
@media (min-width: 704px) { .mn-end.mn-inset { margin-left: auto; margin-right: auto; } }
.mn-end-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mn-end-panda { width: 48px; height: auto; flex-shrink: 0; }
.mn-end-kicker { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--mn-blue); }
.mn-end-title { margin: 0; font-size: 18px; font-weight: 900; color: var(--mn-deep); line-height: 1.4; }

.mn-share {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.mn-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mn-share-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18); }
.mn-share-btn:active { transform: translateY(0) scale(0.97); }
.mn-share-btn:focus-visible { outline: 3px solid #FFC94D; outline-offset: 2px; }
.mn-x { background: #000; }
.mn-line { background: #06C755; }
.mn-copy { background: var(--mn-blue); }
.mn-native { background: linear-gradient(135deg, #FF8FB1, #FF6F9C); }
.mn-share-btn[hidden] { display: none; }

/* 前後の号 */
.mn-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.mn-nav-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 92px;
  padding: 12px 12px 12px;
  border-radius: 14px;
  background: #F4F7FD;
  border: 1.5px solid var(--mn-line);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.mn-nav-card:hover { transform: translateY(-2px); border-color: var(--mn-blue); background: #fff; }
.mn-nav-card:focus-visible { outline: 3px solid #FFC94D; outline-offset: 2px; }
.mn-prev, .mn-nav-first { grid-column: 1; }
.mn-next, .mn-nav-latest { grid-column: 2; grid-row: 1; }
.mn-next { text-align: right; }
.mn-nav-dir { font-size: 12px; font-weight: 900; color: var(--mn-blue); }
.mn-nav-meta { font-size: 11px; color: var(--mn-sub); }
.mn-nav-title { font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--mn-ink); }
.mn-nav-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 92px;
  padding: 12px;
  border-radius: 14px;
  border: 1.5px dashed rgba(42, 95, 208, 0.4);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--mn-blue);
  line-height: 1.5;
}
.mn-nav-note b { font-size: 14px; color: var(--mn-deep); }
.mn-nav-first { color: #2E7D3A; border-color: rgba(61, 170, 79, 0.5); }
.mn-nav-first b { color: #1C7A33; }
.mn-nav [hidden] { display: none; }
/* とても細い画面では、前後の号を1列に（古い号 → 新しい号の順） */
@media (max-width: 360px) {
  .mn-nav { grid-template-columns: 1fr; }
  .mn-prev, .mn-next, .mn-nav-first, .mn-nav-latest { grid-column: auto; grid-row: auto; min-height: 0; }
  .mn-prev, .mn-nav-first { order: 1; }
  .mn-next, .mn-nav-latest { order: 2; }
}

.mn-end-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.mn-end-link {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px;
  border-radius: 12px;
  border: 1.5px dashed rgba(42, 95, 208, 0.45);
  color: var(--mn-deep);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.mn-end-link:hover { background: #F4F7FD; border-style: solid; }
.mn-end-link:focus-visible { outline: 3px solid #FFC94D; outline-offset: 2px; }
.mn-keys { margin: 10px 0 0; font-size: 11px; color: var(--mn-sub); text-align: center; }
@media (hover: none) { .mn-keys { display: none; } }

/* 共通パーツが入った号では、もとの「バックナンバーはこちら」は役目を終える */
.mn-js .archive-link { display: none !important; }

/* ---------- 読んでいる途中のシェアボタン（右下） ---------- */
.mn-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--mn-deep);
  color: #fff;
  font: 700 13px 'Noto Sans JP', sans-serif;
  box-shadow: 0 6px 18px rgba(0, 51, 160, 0.35);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mn-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.mn-fab:focus-visible { outline: 3px solid #FFC94D; outline-offset: 2px; }

/* ---------- ちいさなお知らせ ---------- */
.mn-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 9995;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(14, 27, 51, 0.92);
  color: #fff;
  font: 700 13px 'Noto Sans JP', sans-serif;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.mn-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 動きを減らす設定の人には、ゆれ・紙ふぶき・封筒をお休み ---------- */
@media (prefers-reduced-motion: reduce) {
  #opening, .leaf, .confetti, .click-emoji { display: none !important; }
  body::before, .float-panda, .wobble, .bday-title, .bday-bottom { animation: none !important; }
  .mn-share-btn, .mn-nav-card, .mn-fab, .mn-toast { transition: none; }
}