/* ═══════════════════════════════════════════════════════════════
   夜信回覆 單頁（nm_reply）· reply.css
   變數（--bone/--twilight/--mist/--plum/--ff-d/--ff-m…）由 night-letters.css 提供
═══════════════════════════════════════════════════════════════ */

/* v0.13.7：背景改透明，讓主題的全站星空（header.php 的 .starfield）透出來，
   與網站其他頁面一致。網站切到 light 模式時維持深色底（夜信頁為深色設計）。 */
.nm-reply-single { position: relative; min-height: 100vh; background: transparent; overflow-x: hidden; }
html[data-theme="light"] .nm-reply-single { background: var(--bone, #0F0B1A); }

.nm-reply-wrap {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 110px) 24px 100px;
}

.nm-reply-eyebrow {
  font-family: var(--ff-m, 'Inter', sans-serif);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bronze, #B8A98C);
  text-align: center;
  margin-bottom: 36px;
}

/* ── 上半：來信信紙 ── */
.nm-reply-letter {
  position: relative;
  background: linear-gradient(180deg, rgba(245,242,235,.96), rgba(238,234,225,.94));
  color: #2A2636;
  border-radius: 4px;
  padding: 38px 40px 42px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.3) inset;
  transform: rotate(-.4deg);
}
.nm-reply-letter::before {  /* 信紙左側的裝訂線 */
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 22px;
  width: 1px;
  background: rgba(168, 90, 90, .18);
}
.nm-reply-letter-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(42,38,54,.12);
}
.nm-reply-from {
  font-family: var(--ff-d, 'Newsreader', serif);
  font-style: italic;
  font-size: 22px;
  color: #2A2636;
}
.nm-reply-meta {
  font-family: var(--ff-m, 'Inter', sans-serif);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(42,38,54,.55);
}
.nm-reply-letter-body {
  font-family: var(--ff-d, 'Newsreader', serif);
  font-size: 17px;
  line-height: 1.9;
  color: #3A3548;
}
.nm-reply-letter-body p { margin: 0 0 1em; }
.nm-reply-letter-body p:last-child { margin-bottom: 0; }
.nm-reply-empty { font-style: italic; color: rgba(42,38,54,.5); }

/* ── 下半：Anny 的回覆 ── */
.nm-reply-answer {
  margin-top: 44px;
  padding-left: 26px;
  border-left: 2px solid rgba(138,122,170,.5);
}
.nm-reply-answer-label {
  font-family: var(--ff-m, 'Inter', sans-serif);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--plum-hi, #B6A6D6);
  margin-bottom: 16px;
}
.nm-reply-answer-body {
  font-family: var(--ff-d, 'Newsreader', serif);
  font-size: 17px;
  line-height: 1.95;
  color: var(--twilight, #E8EBF0);
}
.nm-reply-answer-body p { margin: 0 0 1.1em; }
.nm-reply-answer-body p:last-child { margin-bottom: 0; }

/* ── Podcast ── */
.nm-reply-podcast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding: 13px 22px;
  border-radius: 999px;
  background: rgba(138,122,170,.14);
  border: 1px solid rgba(138,122,170,.4);
  color: var(--plum-hi, #B6A6D6);
  font-family: var(--ff-m, 'Inter', sans-serif);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease;
}
.nm-reply-podcast:hover { background: rgba(138,122,170,.24); border-color: rgba(138,122,170,.6); }
.nm-reply-podcast svg { width: 17px; height: 17px; }

/* ── 頁尾返回 ── */
.nm-reply-foot { margin-top: 64px; text-align: center; }
.nm-reply-backlink {
  font-family: var(--ff-m, 'Inter', sans-serif);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--mist, #8A93A8);
  text-decoration: none;
  transition: color .25s ease;
}
.nm-reply-backlink:hover { color: var(--twilight, #E8EBF0); }

@media (max-width: 600px) {
  .nm-reply-letter { padding: 28px 24px 32px; }
  .nm-reply-letter::before { left: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   單頁：語言 · 分類 · 回信時間（chips）+ 上一封/下一封導覽
═══════════════════════════════════════════════════════════════ */
.nm-reply-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 26px 0 6px;
}
.nm-reply-chip {
  font-family: var(--ff-m, 'Inter', sans-serif);
  font-size: 11px; letter-spacing: .08em;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(168,181,201,.08);
  border: 1px solid rgba(168,181,201,.18);
  color: var(--mist, #8A93A8);
}
.nm-reply-chip-cat { color: var(--plum-hi, #B6A6D6); border-color: rgba(138,122,170,.4); background: rgba(138,122,170,.12); }
.nm-reply-chip-date { color: var(--mist, #8A93A8); }

.nm-reply-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 14px 0 34px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(168,181,201,.12);
}
.nm-reply-nav-side { flex: 1; min-width: 0; }
.nm-reply-nav-right { text-align: right; }
.nm-reply-nav-link { text-decoration: none; }
.nm-reply-nav-dir {
  font-family: var(--ff-m, 'Inter', sans-serif); font-size: 12px; letter-spacing: .1em;
  color: var(--mist, #8A93A8); transition: color .25s ease;
}
.nm-reply-nav-link:hover .nm-reply-nav-dir { color: var(--twilight, #E8EBF0); }
.nm-reply-nav-all {
  font-family: var(--ff-m, 'Inter', sans-serif); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--bronze, #B8A98C);
  padding: 8px 16px; border: 1px solid rgba(184,169,140,.3); border-radius: 999px;
  white-space: nowrap; transition: border-color .25s ease, color .25s ease;
}
.nm-reply-nav-all:hover { border-color: var(--bronze, #B8A98C); color: var(--twilight, #E8EBF0); }

/* ═══════════════════════════════════════════════════════════════
   封存頁：所有夜信 + 篩選 + 排序
═══════════════════════════════════════════════════════════════ */
.nm-reply-archive { position: relative; min-height: 100vh; background: transparent; overflow-x: hidden; }
html[data-theme="light"] .nm-reply-archive { background: var(--bone, #0F0B1A); }
.nm-arc-wrap { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; padding: clamp(56px, 9vw, 110px) 24px 100px; }
.nm-arc-title {
  font-family: var(--ff-d, 'Newsreader', serif); font-style: italic; font-weight: 300;
  font-size: clamp(32px, 5vw, 52px); color: var(--twilight, #E8EBF0);
  margin: 14px 0 36px; letter-spacing: -.01em;
}
.nm-arc-filters {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid rgba(168,181,201,.12);
}
.nm-arc-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-arc-cat {
  font-family: var(--ff-m, 'Inter', sans-serif); font-size: 12px; letter-spacing: .06em;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(168,181,201,.2); color: var(--mist, #8A93A8);
  transition: all .22s ease;
}
.nm-arc-cat:hover { border-color: rgba(138,122,170,.5); color: var(--twilight, #E8EBF0); }
.nm-arc-cat.is-active { background: var(--plum, #8A7AAA); border-color: var(--plum, #8A7AAA); color: #fff; }
.nm-arc-sort {
  font-family: var(--ff-m, 'Inter', sans-serif); font-size: 12px; letter-spacing: .06em;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: transparent; border: 1px solid rgba(184,169,140,.3); color: var(--bronze, #B8A98C);
  transition: border-color .22s ease, color .22s ease;
}
.nm-arc-sort:hover { border-color: var(--bronze, #B8A98C); color: var(--twilight, #E8EBF0); }
.nm-arc-sort-ico { display: inline-block; margin-left: 2px; }

.nm-arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.nm-arc-card {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid rgba(168,181,201,.14); border-radius: 16px;
  padding: 24px 24px 20px; background: rgba(255,255,255,.02);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.nm-arc-card:hover { border-color: var(--plum, #8A7AAA); background: rgba(138,122,170,.06); transform: translateY(-2px); }
.nm-arc-card-cat {
  align-self: flex-start;
  font-family: var(--ff-m, 'Inter', sans-serif); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--plum-hi, #B6A6D6); margin-bottom: 14px;
  padding: 3px 10px; border-radius: 999px; background: rgba(138,122,170,.12);
}
.nm-arc-card-body {
  font-family: var(--ff-d, 'Newsreader', serif); font-style: italic; font-size: 16px; line-height: 1.8;
  color: var(--twilight-2, var(--twilight, #E8EBF0)); margin-bottom: 18px; flex: 1;
}
.nm-arc-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nm-arc-card-sig { font-family: var(--ff-m, 'Inter', sans-serif); font-size: 12px; letter-spacing: .04em; color: var(--bronze, #B8A98C); }
.nm-arc-card-date { font-family: var(--ff-m, 'Inter', sans-serif); font-size: 11px; color: var(--mist, #8A93A8); white-space: nowrap; }
.nm-arc-empty { text-align: center; color: var(--mist, #8A93A8); font-family: var(--ff-d, 'Newsreader', serif); font-style: italic; padding: 40px 0; }

@media (max-width: 600px) {
  .nm-arc-filters { flex-direction: column; align-items: flex-start; }
  .nm-reply-nav-all { padding: 7px 12px; }
}

/* ── 去樹上寫信 CTA ── */
.nm-reply-cta { margin-top: 48px; text-align: center; padding: 34px 0 4px; border-top: 1px solid rgba(168,181,201,.12); }
.nm-reply-cta-text { font-family: var(--ff-d, serif); font-style: italic; font-size: 16px; color: var(--mist, #8A93A8); margin: 0 0 16px; }
.nm-reply-cta-btn, .nm-arc-write {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--ff-m, sans-serif); letter-spacing: .04em; transition: background .25s ease, border-color .25s ease;
}
.nm-reply-cta-btn { padding: 13px 26px; border-radius: 999px; background: var(--plum, #8A7AAA); color: #fff; font-size: 14px; }
.nm-reply-cta-btn:hover { background: var(--plum-hi, #B6A6D6); }
.nm-reply-cta-btn svg { width: 17px; height: 17px; }
.nm-arc-write {
  margin-bottom: 34px; padding: 11px 22px; border-radius: 999px; font-size: 13px;
  background: rgba(138,122,170,.14); border: 1px solid rgba(138,122,170,.4); color: var(--plum-hi, #B6A6D6);
}
.nm-arc-write:hover { background: rgba(138,122,170,.24); }
.nm-arc-write svg { width: 16px; height: 16px; }


/* ── 未回覆的樹上信：回信還在路上 ── */
.nm-reply-pending {
  margin-top: 8px; padding: 26px 22px; text-align: center;
  font-family: var(--ff-d, serif); font-style: italic; font-size: 17px;
  color: var(--mist, #8A93A8);
  border: 1px dashed rgba(168,181,201,.25); border-radius: 14px;
}