:root {
  --brand: #2E6B4F;
  --brand-strong: #1F5039;
  --on-brand: #FFFFFF;
  --bg: #F0F2F5;
  --surface: #FFFFFF;
  --line: #E4E7EC;
  --text: #1F2430;
  --text-2: #4A5261;
  --text-3: #626B79;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-2xl: 28px;
  --lh-tight: 1.35;
  --lh: 1.6;
  --fw-bold: 600;
  --sp-2: 8px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
}

html { font-family: var(--font); font-size: var(--fs-md); line-height: var(--lh); color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--sp-4); box-sizing: border-box; }

.hd { background: var(--brand); color: var(--on-brand); padding: var(--sp-10) 0 var(--sp-8); }
.hd-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); overflow-wrap: anywhere; }

main.wrap { flex: 1; padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
.sec { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5) var(--sp-5) var(--sp-6); margin: 0 0 var(--sp-4); }
.sec-h { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--brand-strong); }
.sec-p { margin: 0; color: var(--text); overflow-wrap: anywhere; }

.ft { border-top: 1px solid var(--line); padding: var(--sp-5) 0 var(--sp-6); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.ft-line { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.ft-line:last-child { margin-bottom: 0; }
.ft-link { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.ft-link:hover { color: var(--brand-strong); }
.ft-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

@media (min-width: 720px) {
  .hd { padding: calc(var(--sp-10) + var(--sp-4)) 0 var(--sp-10); }
  main.wrap { padding-top: var(--sp-8); }
  .sec { padding: var(--sp-6) var(--sp-8) var(--sp-8); }
}
.ft-ga-icon { vertical-align: -3px; margin-right: 4px; }