/* ============================================================================
 * 月亮来信 · 横版明信片互动页
 * 配色沿用《月潮名片·设计选款》方案 02「月亮来信」：
 *   米白信纸 + 深藏青邮票 + 赭红邮戳
 * ==========================================================================*/
:root{
  --paper:#F1E9DA;
  --paper-hi:#F8F3E8;
  --paper-deep:#E7DCC6;
  --ink:#2B2620;
  --ink-soft:#6F624E;
  --ink-faint:#9C8F79;
  --navy:#16263F;
  --terra:#B5503A;
  --terra-deep:#93402D;
  --rule:#D8CBB3;
  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(120% 60% at 50% 0%, #F6EFE1 0%, var(--paper) 42%, #E9DECD 100%);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  /* 底部留白 + iOS 微信的 Home 指示条安全区（不支持 env() 时自动退回 32px） */
  padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));
}

/* 顶部 */
.hero{
  max-width:720px;margin:0 auto;padding:56px 22px 26px;text-align:center;
}
.kicker{
  font-size:12.5px;letter-spacing:.24em;color:var(--terra);
  margin:0 0 14px;font-weight:600;
}
.title{
  font-family:var(--serif);font-weight:700;font-size:clamp(38px,9vw,58px);
  letter-spacing:.08em;margin:0 0 14px;color:var(--ink);
}
.sub{
  font-family:var(--serif);font-size:clamp(15px,3.6vw,18px);color:var(--ink-soft);
  margin:0 auto 26px;max-width:30em;letter-spacing:.03em;
}
.sample-wrap{margin:0 auto 22px}
.sample-card{
  width:100%;height:auto;display:block;border-radius:10px;
  box-shadow:0 22px 44px -22px rgba(43,38,32,.42),0 3px 10px rgba(43,38,32,.10);
}
.sample-caption{
  font-size:12.5px;color:var(--ink-faint);margin:12px 0 0;letter-spacing:.04em;
}

/* 通用 section */
.section{
  max-width:720px;margin:0 auto;padding:30px 22px;
}
.section h2{
  font-family:var(--serif);font-size:clamp(21px,5vw,26px);font-weight:700;
  letter-spacing:.05em;margin:0 0 14px;color:var(--ink);
}
.section h2::before{
  content:"";display:inline-block;width:18px;height:2px;background:var(--terra);
  vertical-align:middle;margin-right:10px;transform:translateY(-4px);
}
.section-sub{color:var(--ink-soft);font-size:15px;margin:0 0 20px}
.section p{font-size:15px;color:var(--ink-soft);margin:0 0 14px}
.section strong{color:var(--ink)}

/* 输入 */
.date-row{display:flex;gap:10px;margin-bottom:14px}
.date-row select{
  flex:1;min-width:0;appearance:none;-webkit-appearance:none;
  background:var(--paper-hi) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236F624E' stroke-width='2'/></svg>") no-repeat right 14px center;
  border:1px solid var(--rule);border-radius:8px;color:var(--ink);
  font-family:var(--sans);font-size:16px;padding:13px 34px 13px 14px;
}
.nickname{
  width:100%;background:var(--paper-hi);border:1px solid var(--rule);border-radius:8px;
  padding:13px 14px;font-size:16px;font-family:var(--sans);color:var(--ink);margin-bottom:12px;
}
.nickname::placeholder{color:var(--ink-faint)}
.chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);margin:0 0 16px}
.chk input{width:16px;height:16px;accent-color:var(--terra)}
.form-error{color:var(--terra-deep);font-size:13.5px;margin:0 0 12px}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:.06em;
  padding:14px 26px;text-decoration:none;transition:transform .14s ease,box-shadow .2s ease,background .2s;
  -webkit-tap-highlight-color:transparent;   /* 微信里点按钮不再闪灰块 */
  user-select:none;-webkit-user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--terra);color:#FBF6EC;box-shadow:0 10px 22px -12px rgba(147,64,45,.8)}
.btn-primary:hover{background:var(--terra-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink-faint)}
.btn-block{width:100%}
/* 生成中（手机端要算星历+引潮+重绘月面，约 1–3 秒） */
.btn[disabled]{opacity:.6;cursor:default;pointer-events:none}
.btn[disabled]:active{transform:none}
.privacy-note{font-size:12.5px;color:var(--ink-faint);text-align:center;margin:12px 0 0}

/* 结果 */
.stage{margin:0 auto}
.card-wrap{
  filter:drop-shadow(0 22px 40px rgba(43,38,32,.30));
}
.card-canvas{width:100%;height:auto;display:block;border-radius:8px}
.result-note{font-size:13.5px;color:var(--ink-soft);margin:14px 0 20px;text-align:center}
/* 微信专属提示（保存要长按），非微信环境不占位 */
.wx-tip{
  display:none;font-size:12.5px;color:var(--terra-deep);margin:-8px 0 18px;text-align:center;
  letter-spacing:.03em;
}
.is-wx .wx-tip{display:block}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn-row .btn{flex:0 1 auto}

/* 详情 */
.details summary{
  cursor:pointer;font-family:var(--serif);font-size:16.5px;font-weight:700;color:var(--ink);
  letter-spacing:.03em;padding:6px 0;
}
.details summary::marker{color:var(--terra)}
.details-body{margin-top:12px;border-top:1px solid var(--rule);padding-top:14px}
.details-body p{font-size:14px}
.formula{
  font-family:"Cambria Math",Georgia,serif;font-size:14.5px;color:var(--ink);
  background:var(--paper-hi);border-left:3px solid var(--terra);
  padding:10px 14px;border-radius:0 8px 8px 0;overflow-x:auto;letter-spacing:.02em;
}
/* 公式：KaTeX 排好版后接管；没排上时这里显示的是元素内的回退纯文本。
   字号不覆盖 KaTeX 默认的 1.21em —— 它的字体 x-height 比正文字体小，
   1.21 倍才是与正文视觉等大的比例（也顺带把中文下标的可读性保住）。 */
.formula .katex-display{margin:0}
.formula .katex-display>.katex{display:inline-block}
/* 行内公式（如星历里的 µ 值）不许被拆到两行 */
span[data-tex]{white-space:nowrap}
@media (max-width:360px){
  .formula{padding-left:10px;padding-right:10px}
  /* 320px 这种极窄屏：把公式收一点，长公式刚好不出格 */
  .formula .katex{font-size:1.06em}
}

.footer{max-width:720px;margin:18px auto 0;padding:26px 22px 10px;text-align:center;font-size:12.5px;color:var(--ink-faint)}
.footer p{margin:4px 0}
.footer .muted{color:var(--ink-faint);opacity:.85}

/* 遮罩 */
.overlay{
  position:fixed;inset:0;background:rgba(30,24,18,.72);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.overlay-body{
  background:var(--paper);border-radius:14px;padding:20px;max-width:560px;width:100%;
  /* iOS 微信里 100vh 会高于可视区，遮罩底部被工具栏挡住 → 优先用 dvh */
  max-height:92vh;max-height:92dvh;overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  text-align:center;
}
.overlay-tip{font-size:14px;color:var(--ink-soft);margin:0 0 14px;letter-spacing:.04em}
.save-img{width:100%;height:auto;border-radius:6px;margin-bottom:16px}
/* 微信里长按这张图即可存到相册；显式声明允许长按呼出系统菜单 */
.is-wx .save-img{-webkit-touch-callout:default;touch-callout:default}
/* 微信内 <a download> 不会触发下载，是死按钮，直接隐藏（文案改由 app.js 提示长按保存） */
.is-wx #save-download{display:none}
.expand-canvas{width:100%;height:auto;border-radius:8px;background:#FBFAF6}
.expand-meta{font-size:13px;color:var(--ink-soft);margin:12px 0 4px}
/* 最大 / 最小各占一行：挤在一行时会在「03:20」这种词中间断行，读不成句 */
.expand-meta .meta-line{display:block;line-height:1.75;white-space:nowrap}
.expand-meta .meta-val{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.expand-note{font-size:12px;color:var(--ink-faint);margin:0 0 16px}
.legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:0 0 12px;font-size:13px}
.legend-item{color:var(--ink-soft);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
/* 色块 = 该曲线的身份色（由 app.js 按 Postcard.EXPAND_SERIES 注入）；
   currentColor 只是 JS 未执行时的兜底，线宽也照曲线粗细分两档 */
.legend-item .lg-mark{display:inline-block;width:15px;height:2px;border-radius:1px;background:currentColor;
  vertical-align:3px;margin-right:5px}
.legend-item#lg-total .lg-mark{height:3px}
.legend-item.off{opacity:.32;text-decoration:line-through}

@media (max-width:420px){
  .btn{font-size:14.5px;padding:13px 20px}
  .hero{padding-top:40px}
}
.result-note {
  white-space: pre-line;
}