:root{--bg:#eaf6ef;--card:#fff;--ink:#27483f;--text:#3f5750;--muted:#85a096;--green:#3aa57c;--green-deep:#2c8866;--green-soft:#e2f4ea;--mint:#f2faf6;--sky:#e7f3fb;--sky-ink:#3f7fa6;--sun:#ffe9a3;--round:"Yuanti SC","PingFang SC","Hiragino Sans GB",sans-serif;--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--latin:"Arial Rounded MT Bold","Yuanti SC",sans-serif}
*{box-sizing:border-box}html{background:#dcece3}body{margin:0;color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}::selection{background:var(--sun)}
.bulletin{width:720px;max-width:100%;margin:0 auto;background:var(--bg);padding-bottom:30px;position:relative;overflow:hidden}

/* 页头：水彩横幅，底部淡入页面底色 */
.hero{position:relative;height:340px;padding:42px 30px 0;background:url("banner.jpg") center bottom/cover no-repeat}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(180deg,#eaf6ef00,var(--bg))}
.hero-tag{display:inline-block;background:#ffffffd9;color:var(--green-deep);font-size:13px;font-weight:600;letter-spacing:2px;padding:6px 14px;border-radius:99px}
.hero h1{margin:18px 0 8px;font:700 62px/1.15 var(--round);letter-spacing:5px;color:#266a55}
.hero-line{margin:0;font-size:16px;line-height:1.6;letter-spacing:3px;color:#417a69;text-align:left}
.hero-site{display:block;margin-top:6px;font:14px/1.5 var(--latin);letter-spacing:.5px;color:#6aa893}
.hero-month{position:absolute;right:36px;top:40px;width:92px;height:92px;border-radius:50%;background:#fff1b8;box-shadow:0 0 0 14px #fff1b866;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#d69a2d;font:400 38px/1 var(--latin)}
.hero-month span{font:600 12px/1 var(--sans);letter-spacing:2px;margin-top:5px;color:#c79a45}

/* 正文：一段一张白卡片 */
.opening{margin:2px 30px 18px!important;font-size:13px!important;line-height:1.8!important;color:var(--muted);text-align:center!important}
.section,.question-section{background:var(--card);margin:0 16px 16px;padding:28px 24px 26px;border-radius:24px;box-shadow:0 8px 26px rgba(58,140,108,.07)}
h2{margin:0 0 18px;font:700 24px/1.45 var(--round);letter-spacing:.5px;color:var(--ink)}
h2:before{content:"";display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,#8fd9b8,#3aa57c);transform:translateY(-2px) rotate(-8deg)}
h3{display:table;margin:22px 0 10px;padding:4px 14px;border-radius:99px;background:var(--green-soft);color:var(--green-deep);font:600 15px/1.6 var(--sans)}
p{font-size:17px;line-height:1.95;margin:0 0 14px;overflow-wrap:break-word;text-align:justify;text-wrap:pretty}p:last-child{margin-bottom:0}
strong{font-weight:650;color:var(--green-deep)}

.section-note h2{display:table;margin-bottom:16px;padding:7px 14px;border-radius:99px;background:var(--green-soft);color:var(--green-deep);font:600 13px/1.4 var(--sans);letter-spacing:2px}.section-note h2:before{display:none}
.section-note>p:first-of-type{font:700 25px/1.5 var(--round);color:var(--ink);margin-bottom:12px}.reflection-body p{font-size:16.5px}

.requirement{background:var(--mint);border:1.5px solid #cfeadb;border-radius:16px;padding:13px 18px;font-weight:500;line-height:1.8;text-align:left}
.requirement strong{color:var(--green-deep);background:linear-gradient(transparent 58%,var(--sun) 58%);padding:0 3px}

/* 本月问题 */
.question-heading{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}.small-label{font-size:14px;color:var(--muted)}.name-label{font:400 34px/1 var(--latin);color:var(--green)}.thanks{margin-left:auto;font-size:13px;color:var(--muted)}
.question-art{margin:0 -8px 20px}.question-art img{display:block;width:100%;height:auto;border-radius:18px}
.question-note{margin:0 0 18px}
.introduction{background:#fffbea;border:1.5px dashed #efd98c;border-radius:18px;padding:18px 20px;margin-bottom:14px}.intro-line{font-size:17px;line-height:1.6;margin-bottom:11px;text-align:left}
.video-note{background:var(--sky);border-radius:18px;padding:18px 20px 19px;margin:0 0 14px}
.video-note h3{display:block;margin:0 0 8px;padding:0;border-radius:0;background:none;font:700 19px/1.5 var(--round);color:var(--sky-ink)}.video-note h3:before{content:"🎬";margin-right:8px}
.video-note p{font-size:16px;line-height:1.85;margin-bottom:8px;color:#47627a}
.deadline{font-size:13px;line-height:1.8;color:#c2826c;text-align:center}.deadline strong{color:#c2826c}

/* 小区公约 */
.rule{background:var(--mint);border-radius:16px;padding:13px 18px;margin-top:14px}
.rule strong{display:inline-block;margin-right:6px;padding:0 4px 0 10px;border-radius:8px;background:var(--green);color:#fff;font-size:14px;line-height:1.75;font-weight:600}
.section-community p:nth-of-type(1) strong{background:#ff9c82}.section-community p:nth-of-type(4) strong{background:#6fb6dd}.section-community p:nth-of-type(5) strong{background:#f1c24b}
.closing{margin-top:20px;padding:20px 22px;border-radius:18px;background:linear-gradient(135deg,#e2f4ea,#e7f3fb);font:700 18px/1.9 var(--round);color:var(--ink)}

.fresh-foot{padding:14px 0 0;text-align:center}.fresh-foot p{font-size:12px;letter-spacing:2px;color:var(--muted);text-align:center}
.endmark{display:flex;gap:7px;justify-content:center;margin-bottom:12px}.endmark i{width:7px;height:7px;border-radius:50%;background:#8fd9b8}.endmark i:nth-child(2){background:#9dcdea}.endmark i:nth-child(3){background:#ffe08a}

@media(max-width:440px){.hero{height:270px;padding:34px 24px 0}.hero h1{font-size:46px;letter-spacing:3px}.hero-line{font-size:14px;letter-spacing:2px}.hero-month{right:24px;top:32px;width:72px;height:72px;font-size:30px;box-shadow:0 0 0 10px #fff1b866}.hero-month span{font-size:10px}.section,.question-section{margin:0 12px 14px;padding:24px 18px 22px;border-radius:20px}h2{font-size:22px}p{font-size:16px}.section-note>p:first-of-type{font-size:22px}.name-label{font-size:30px}.small-label{font-size:13px}.thanks{font-size:12px}.intro-line{font-size:16px}.introduction,.video-note{padding:16px}.video-note h3{font-size:17px}.video-note p{font-size:15px}.closing{font-size:17px;padding:18px}}
@media print{html{background:var(--bg)}.bulletin{width:100%;max-width:none}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* 以下是网页专用：进度条、原图链接、问题文字、复制按钮、底部工具条、目录、大字 */
html{scroll-behavior:smooth;scroll-padding-top:20px}a{color:inherit}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.bulletin{padding-bottom:118px;min-height:100vh}
.skip-link{position:fixed;left:18px;top:-70px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px}.skip-link:focus{top:16px}
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60}#progress-fill{height:100%;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
.section,.question-section{scroll-margin-top:20px}
.question-art a{display:block}.question-art figcaption{text-align:right;font-size:11px;letter-spacing:.5px;color:var(--muted);padding:8px 6px 0}
.question-transcript{margin:0 0 16px;border-radius:14px;background:var(--mint)}.question-transcript summary{padding:11px 16px;cursor:pointer;font-size:13px;color:var(--muted)}.question-transcript p{font-size:16px;margin:0;padding:0 16px 14px}
.introduction{margin-bottom:10px}
.copy-intro{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;margin:0 0 14px;padding:0 20px;border:0;border-radius:14px;background:var(--green-soft);color:var(--green-deep);font-size:14px;font-weight:600}.copy-intro:hover{background:#d6eee1}.copy-intro span{font-size:18px}
.fresh-foot a{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-size:12px;color:var(--muted);text-decoration:none}
.reading-tools{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;padding:6px;background:#ffffffe8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #d3eadd;border-radius:100px;box-shadow:0 8px 26px rgba(58,140,108,.16);z-index:30;white-space:nowrap}
.reading-tools button,.reading-tools a{min-height:42px;padding:0 18px;border:0;background:none;border-radius:50px;text-decoration:none;color:var(--ink);display:flex;justify-content:center;align-items:center;gap:7px;font-size:13px;transition:background .2s}.reading-tools button:hover,.reading-tools a:hover,.reading-tools button[aria-pressed=true]{background:var(--green-soft)}.font-icon{font:italic 16px/1 Georgia,serif}.reading-tools a span{font-size:17px}
.toc-dialog{border:0;background:#fff;color:var(--ink);padding:24px;width:min(420px,calc(100vw - 32px));max-height:80dvh;border-radius:22px;box-shadow:0 20px 80px rgba(30,80,60,.22)}.toc-dialog::backdrop{background:#27483f55;backdrop-filter:blur(3px)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1f0e7;padding-bottom:12px}.dialog-head h2{margin:0;font-size:21px}.dialog-head button{width:44px;height:44px;font-size:26px;background:none;border:0;color:var(--muted)}
.toc-dialog nav{display:grid;padding-top:10px}.toc-dialog a{display:flex;gap:16px;align-items:center;min-height:46px;text-decoration:none;font-size:16px}.toc-dialog a span{font:14px/1 var(--latin);color:var(--green)}
#toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,8px);background:var(--ink);color:#fff;padding:11px 18px;font-size:13px;border-radius:99px;z-index:80;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}
.large-type .article p{font-size:20px}.large-type .article .intro-line,.large-type .article .video-note p,.large-type .article .question-transcript p{font-size:19px}.large-type .article .opening,.large-type .article .deadline{font-size:15px!important}
@media(max-width:440px){.reading-tools{bottom:max(15px,env(safe-area-inset-bottom))}.reading-tools button,.reading-tools a{padding:0 15px}.toc-dialog{margin:auto auto max(88px,calc(env(safe-area-inset-bottom) + 70px));width:calc(100% - 32px)}.large-type .article p{font-size:19px}.large-type .article .intro-line,.large-type .article .video-note p,.large-type .article .question-transcript p{font-size:18px}}
@media(min-width:600px){.hero{height:410px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{.reading-tools,.reading-progress,.skip-link,.copy-intro,.question-transcript,.question-art figcaption,.fresh-foot a{display:none!important}}
