/* 羅東真理堂官網 — 淺色精緻版（2026-11-15 預覽）
   Paul：會友多為長輩與幼童家庭、公務人員多 → 深色可能太暗。
   原則：溫暖明亮、適合全家；長輩看得清楚（字大、對比高、按鈕大）；保留精緻感（金色細線、宋體、留白），不回到卡通風。
   疊在 site.css 之後，只覆蓋顏色與字級。 */
:root {
  --bg: #FBF8F2; --bg2: #F4EEE3; --card: #FFFFFF; --card2: #FFFDF8; --line: rgba(31,42,37,.10); --line2: rgba(31,42,37,.18);
  --ink: #1F2A25; --muted: #45514A; --dim: #66706A;
  --gold: #A9843A; --gold2: #8E6C2A; --gold3: #C9A45C; --gold-soft: rgba(169,132,58,.10);
  --green: #2F6B4F; --green2: #3E8562; --green-soft: #E6F0EA;
  --sage: #3E7D5E; --rose: #B23A50; --rose2: #B8475B; --rose-soft: #FBEDEF;
  --shadow: 0 1px 2px rgba(31,42,37,.05), 0 14px 34px -18px rgba(31,42,37,.28);
}
body { font-size: 17px; line-height: 1.85; }

/* 導覽列 */
.nav.is-solid { background: rgba(251,248,242,.92); box-shadow: 0 1px 0 var(--line); }
.menu a { color: var(--muted); font-size: 15.5px; }
.menu a:hover { color: var(--green); }
.menu .menu__cta, .menu .menu__cta:hover { color: #fff; background: var(--green); }
.langs a { color: var(--dim); font-size: 13px; }
.langs a[aria-current] { background: var(--green); color: #fff; }
.burger span { background: var(--ink); }

/* 按鈕：主按鈕深綠實心（長輩一眼看得出能點） */
.btn { height: 56px; font-size: 16.5px; }
.btn--green, .btn--gold { color: #fff; background: linear-gradient(135deg, var(--green2), var(--green)); box-shadow: 0 12px 26px -12px rgba(47,107,79,.65); }
.btn--rose, .btn--line { color: var(--rose); border: 1.5px solid var(--rose2); background: #fff; }
.btn--rose:hover, .btn--line:hover { color: var(--rose); border-color: var(--rose); background: var(--rose-soft); }
.kicker { color: var(--gold2); font-size: 13.5px; }
.kicker::before { background: var(--gold); }
.kicker--rose { color: var(--rose); }
.h2 { color: #1F3F31; }

/* 主視覺：晨光米白天空＋金色細線 */
.hero__art { background: radial-gradient(70% 60% at 70% 72%, rgba(255,214,150,.45), transparent 70%), radial-gradient(50% 50% at 8% 12%, rgba(127,176,150,.18), transparent 70%), linear-gradient(180deg, #EEF3EE 0%, #F8F3E9 55%, #FBF4E8 100%); }
.land #gLine stop { stop-color: #B08A3E; }
.land #gLine stop:first-child, .land #gLine stop:last-child { stop-opacity: 0; }
.land #gFade stop:first-child { stop-color: #B08A3E; stop-opacity: .35; }
.land #gFade stop:last-child { stop-color: #B08A3E; }
.land #gDawn stop:first-child { stop-color: #FFD48A; stop-opacity: .7; }
.land #gDawn stop:nth-child(2) { stop-color: #FFE2B0; stop-opacity: .3; }
.land .d1 { opacity: .75; } .land .d2 { opacity: .5; }
.land .d3, .land .rows path { stroke: #A9843A; }
.land .cross path { stroke: #B08A3E; }
.land .birds { stroke: #6F8F80; opacity: .55; }
.dust i { background: #E2B865; box-shadow: 0 0 8px rgba(226,184,101,.8); }
.hero__name { color: var(--gold2); font-weight: 600; }
.hero__title { background: linear-gradient(100deg, #1F4535 0%, #2F6B4F 45%, #8E6C2A 75%, #1F4535 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
.hero__sub { color: var(--muted); font-size: clamp(16.5px, 1.7vw, 19px); }
.hero__time { background: rgba(255,255,255,.85); border-color: var(--line2); color: #1F3F31; font-size: 16px; font-weight: 700; box-shadow: var(--shadow); }
.dot { background: var(--rose2); }

/* 年度主題 */
.year { background: radial-gradient(60% 70% at 50% 40%, rgba(226,132,148,.18), transparent 70%), #FFF7F5; }
.year__title { color: #7E2537; }
.love span { background: linear-gradient(120deg, #7E2537, #C9576A 30%, #C9A45C 50%, #C9576A 70%, #7E2537); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; }
.verse p { color: #4A3A3E; font-size: clamp(17px, 1.9vw, 20px); }
.verse cite { color: var(--rose); }
.petals i { background: #E08494; box-shadow: 0 0 8px 2px rgba(224,132,148,.4); }

/* 卡片共用：白卡＋柔和陰影 */
.tcard, .vcard, .tc, .dcard, .vi, .mcard, .gcard { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.tcard__ic, .vcard__ic, .tc__ic, .dcard__ic, .mcard__ic, .gcard__ic, .vi__ic { border-color: rgba(47,107,79,.35); color: var(--green); background: var(--green-soft); }
.tcard h3, .vcard h3, .tc h3, .dcard h3, .mcard h3, .gcard h3 { color: #1F3F31; }
.tcard__day { color: var(--dim); font-size: 14.5px; }
.tcard__hr { color: var(--green); font-weight: 600; font-size: 22px; }
.tcard__pl { color: var(--muted); font-size: 14.5px; }
/* 主日崇拜大卡：深綠實心，最醒目 */
.tcard--main { background: linear-gradient(120deg, #2F6B4F, #224F3B); border: 0; color: #fff; }
.tcard--main h3, .tcard--main .tcard__hr { color: #fff; }
.tcard--main .tcard__day, .tcard--main .tcard__pl { color: rgba(255,255,255,.85); }
.tcard--main .tcard__ic { background: rgba(255,255,255,.14); color: #FFE2A6; border-color: rgba(255,255,255,.4); }
.tcard--main .tcard__hr { font-weight: 600; }
.loc { color: #1F3F31; font-weight: 600; font-size: 16px; }
.loc .ic { color: var(--rose); }
.area h3 { color: var(--green); }
.area li { background: #fff; border-color: var(--line2); color: var(--ink); font-size: 15px; box-shadow: var(--shadow); }
.note { background: var(--rose-soft); border-left-color: var(--rose2); color: #6E2A39; font-size: 15.5px; }
.note .ic { color: var(--rose); }

/* 一要三招 */
.one { background: linear-gradient(120deg, #B23A50, #8E2B3E); border: 0; color: #fff; }
.one::after { background: radial-gradient(closest-side, rgba(255,255,255,.2), transparent); }
.one__l { border-color: rgba(255,255,255,.7); color: #fff; }
.one__s { color: #FFE3E8; }
.one__s .ic { fill: #FFE3E8; }
.three__l span { color: var(--green); }
.tc__n { color: rgba(47,107,79,.25); }
.tc li { background: var(--green-soft); color: var(--green); font-size: 14.5px; font-weight: 600; }

/* 晨禱讀經 */
.daily { background: linear-gradient(180deg, #F1F6F2, var(--bg)); }
.rails { border-bottom-color: rgba(47,107,79,.25); }
.rails::after { background: repeating-linear-gradient(90deg, rgba(47,107,79,.22) 0 2px, transparent 2px 22px); }
.train i { border-color: rgba(47,107,79,.55); background: linear-gradient(180deg, #fff 0 40%, rgba(178,58,80,.55) 40% 60%, #fff 60%); }
.daily__p { color: var(--muted); }
.dcard__tag { color: var(--rose); font-weight: 600; }
.dcard__go { color: var(--green); font-weight: 700; font-size: 15.5px; }
.dcard .qr, .report .qr, .qrbox .qr { background: #fff; border: 1px solid var(--line); }

/* 異象 */
.vlines { border-color: var(--line2); }
.vlines li { color: #1F3F31; font-weight: 600; }
.vlines__n { color: var(--rose); }
.vcard p { color: var(--muted); font-size: 15.5px; }

/* 家庭中心 */
.family__img { border: 0; box-shadow: var(--shadow); }
.family__img::after { display: none; }
.family__img img { filter: none; }
.family__copy > p { color: var(--muted); font-size: 17px; }
.facts dt { color: var(--green); font-size: 15px; font-weight: 700; }
.facts dd { font-size: 16px; }

/* 主日信息 / 消息 */
.mcard--yt .mcard__ic { color: #D23B3B; background: #FDECEC; border-color: rgba(210,59,59,.3); }
.mcard p { color: var(--muted); font-size: 15.5px; }
.mcard__go { color: var(--green); font-weight: 700; }
.mcard::after { background: radial-gradient(closest-side, rgba(47,107,79,.08), transparent); }

/* 奉獻 */
.give { background: radial-gradient(60% 60% at 90% 0%, rgba(255,214,150,.35), transparent 70%), var(--bg2); }
.give::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.verse--light p { color: #3D4A43; }
.verse--light cite { color: var(--gold2); }
.gcard--main { background: linear-gradient(160deg, var(--green-soft), #fff 60%); border-color: rgba(47,107,79,.35); }
.gcard p { color: var(--muted); font-size: 15.5px; }
.acct dt { color: var(--dim); font-size: 15px; }
.acct div { font-size: 15.5px; }
.acct b { color: #1F3F31; font-weight: 700; font-size: 19px; }
.copy { border-color: var(--line2); color: var(--ink); font-size: 14px; padding: 5px 12px; }
.copy.is-done { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.notify li { font-size: 15.5px; }
.notify li span { border-color: rgba(47,107,79,.4); color: var(--green); }
.gcard .small b { color: var(--green); }
.small { font-size: 14.5px !important; }
.telfax { color: var(--ink); font-size: 15px; }
.telfax .ic, .lnk { color: var(--green); }
.lnk { font-weight: 700; font-size: 15.5px; }

/* 新朋友 */
.drive { background: var(--green-soft); border-left-color: var(--green); }
.drive h3 { color: var(--green); font-size: 15px; }
.drive p { color: #2E3B34; font-size: 15.5px; }
.vi small { color: var(--dim); font-size: 13px; }
.vi b { color: var(--ink); font-size: 18px; font-weight: 700; }
.vi em { color: var(--green); font-size: 14px; font-weight: 600; }
.visit__copy > p { color: var(--muted); font-size: 17px; }

/* 頁尾 */
.foot { background: #EFE9DD; border-top-color: var(--line); }
.foot__org, .foot__copy { color: var(--dim); font-size: 14px; }
.foot__links a { background: #fff; color: var(--green); border-color: var(--line2); }
.foot__copy a { color: var(--green); }

/* 手機 */
@media (max-width: 900px) {
  .menu { background: rgba(255,255,255,.98); border-color: var(--line); }
  .menu a { color: var(--ink); font-size: 17px; }
  .nav { background: rgba(251,248,242,.85); }
  .dock { background: rgba(255,255,255,.96); border-color: var(--line); box-shadow: 0 16px 40px -12px rgba(31,42,37,.35); }
  .dock a { color: var(--green); font-size: 13px; font-weight: 700; }
  .dock a .ic { color: var(--green); }
  .dock .dock__give { color: #fff; background: linear-gradient(135deg, var(--green2), var(--green)); }
  .dock .dock__give .ic { color: #fff; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .tcard h3 { font-size: 17px; } .tcard__hr { font-size: 19px; }
  .tcard--main .tcard__hr { font-size: 30px; }
}
.langtip { background: #1F2A25; color: #fff; border-color: transparent; }
.langtip a { color: #FFE2A6; }
.langtip button { color: #fff; }
.give__intro { color: #1F3F31; }
.give__intro .ic { color: var(--rose); }
.gcats dt { color: var(--green); }

/* ===== 今天的羅東：天氣小卡（玻璃質感）＋主視覺天空依羅東真實日出日落變化（2026-11-15）===== */
.wx { width: min(440px, 100%); margin: 26px auto 0; padding: 16px 20px 12px; border-radius: 22px; text-align: left; color: #1F2A25;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 18px 40px -22px rgba(31,42,37,.45); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease), background .8s, color .8s, border-color .8s; }
.wx.is-on { opacity: 1; transform: none; }
.wx__top { display: flex; align-items: center; gap: 14px; }
.wx__ic { width: 50px; height: 50px; flex: none; display: grid; place-items: center; }
.wx__ic svg, .wx__mk svg { width: 100%; height: 100%; overflow: visible; }
.wx__pair { position: relative; width: 50px; height: 50px; display: block; }
.wx__pair > svg { width: 38px; height: 38px; }
.wx__sm { position: absolute; right: -4px; bottom: -2px; width: 32px; height: 32px; }
.i-sun { fill: #F2B640; } .i-ray { stroke: #F2B640; stroke-width: 2.6; fill: none; transform-box: fill-box; transform-origin: center; animation: spin 24s linear infinite; }
.i-moon { fill: #F6DC8F; filter: drop-shadow(0 0 6px rgba(246,220,143,.6)); }
.i-cloud { fill: #FFFFFF; stroke: #B9C4BE; stroke-width: 1.4; }
.i-drop { stroke: #4E8FC4; stroke-width: 2.4; animation: drip 1.4s linear infinite; }
.i-bolt { fill: #F2B640; }
.i-fog { stroke: #9AA7A0; stroke-width: 2.6; fill: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drip { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
.wx__line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 17px; font-weight: 700; }
.wx__temp { font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.wx__loc { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 14.5px; color: #45514A; }
.wx__loc .ic { width: 16px; height: 16px; color: #C9576A; }
.wx__meta { color: #66706A; }
.wx__bar { position: relative; height: 26px; margin: 12px 8px 2px; }
.wx__track { position: absolute; left: 0; right: 0; top: 11px; height: 5px; border-radius: 9px; background: rgba(31,42,37,.12); overflow: hidden; }
.wx__fill { position: absolute; inset: 0; border-radius: 9px; transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease); background: linear-gradient(90deg, #F6C877, #F2A65A); }
.wx__mk { position: absolute; top: 0; left: 0; width: 26px; height: 26px; margin-left: -13px; transition: left 1.6s var(--ease); }
.wx.is-night .wx__fill { background: linear-gradient(90deg, #8FA3D6, #C9D3F0); }
.wx__ends { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #2E3B34; }
.wx__tip { font-weight: 600; color: #8E6C2A; font-size: 13.5px; text-align: center; }

/* 天空：清晨 / 白天（預設）/ 黃昏 / 夜晚 */
.stars, .moon { position: absolute; pointer-events: none; opacity: 0; transition: opacity 1.5s; }
.stars { inset: 0 0 35% 0; background-image:
  radial-gradient(1.4px 1.4px at 8% 18%, #fff, transparent), radial-gradient(1px 1px at 17% 42%, #fff, transparent), radial-gradient(1.6px 1.6px at 26% 12%, #fff, transparent),
  radial-gradient(1px 1px at 34% 30%, #fff, transparent), radial-gradient(1.3px 1.3px at 43% 8%, #fff, transparent), radial-gradient(1px 1px at 52% 36%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 61% 16%, #fff, transparent), radial-gradient(1px 1px at 69% 44%, #fff, transparent), radial-gradient(1.2px 1.2px at 77% 10%, #fff, transparent),
  radial-gradient(1px 1px at 85% 28%, #fff, transparent), radial-gradient(1.6px 1.6px at 92% 14%, #fff, transparent), radial-gradient(1px 1px at 5% 50%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 47% 52%, #fff, transparent), radial-gradient(1px 1px at 96% 46%, #fff, transparent), radial-gradient(1.3px 1.3px at 13% 6%, #fff, transparent);
  animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { filter: brightness(.8); } 50% { filter: brightness(1.5); } }
.moon { right: 14%; top: 16%; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF8E2, #F2DFA4 60%, #D9C385); box-shadow: 0 0 40px 12px rgba(246,224,160,.35), 0 0 120px 40px rgba(246,224,160,.12); }
.hero__art { transition: background 1.5s; }
.hero__name, .hero__sub, .kicker { transition: color 1.2s; }

body.tod-dawn .hero__art { background: radial-gradient(70% 60% at 70% 75%, rgba(255,190,150,.55), transparent 70%), linear-gradient(180deg, #E9E6F0 0%, #F8E4DA 55%, #FCEBD8 100%); }
body.tod-dusk .hero__art { background: radial-gradient(70% 60% at 72% 78%, rgba(255,160,110,.6), transparent 70%), linear-gradient(180deg, #DCD7E8 0%, #F3CFC2 50%, #F9D6B0 100%); }
body.tod-dusk .land #gDawn stop:first-child { stop-color: #FF9E6E; }
/* 夜晚（2026-11-15 第二版，Paul：第一版月亮＋寶藍像中秋節）：
   沉靜深墨綠夜空（同全站綠色系）、少量淡星、金色細線調暗，唯一的亮點是山頭微光的十字架；沒有月亮。只影響主視覺。 */
body.tod-night .hero__art { background: radial-gradient(55% 45% at 70% 62%, rgba(201,164,92,.07), transparent 70%), linear-gradient(180deg, #0C1311 0%, #111A17 60%, #16211D 100%); }
body.tod-night .stars { opacity: .45; }
body.tod-night .moon { display: none; }
body.tod-night .land .dawn { opacity: 0 !important; animation: none; }
body.tod-night .land #gLine stop { stop-color: #C9A45C; }
body.tod-night .land #gLine stop:first-child, body.tod-night .land #gLine stop:last-child { stop-opacity: 0; }
body.tod-night .land #gFade stop:first-child { stop-color: #C9A45C; stop-opacity: .22; }
body.tod-night .land #gFade stop:last-child { stop-color: #C9A45C; }
body.tod-night .land .d1 { opacity: .5; } body.tod-night .land .d2 { opacity: .32; }
body.tod-night .land .d3, body.tod-night .land .rows path { stroke: #C9A45C; }
body.tod-night .land .cross path { stroke: #F1D79A; }
body.tod-night .land .cross circle { opacity: 1; }
body.tod-night .land .cross { animation: fadeIn 2s 2.4s forwards, glowNight 4s 4s ease-in-out infinite; }
@keyframes glowNight { 0%, 100% { filter: drop-shadow(0 0 4px rgba(241,215,154,.6)); } 50% { filter: drop-shadow(0 0 16px rgba(241,215,154,1)); } }
body.tod-night .land .birds { opacity: 0; }
body.tod-night .dust i { background: #E3C47E; box-shadow: 0 0 8px rgba(227,196,126,.7); }
body.tod-night .hero__name, body.tod-night .hero .kicker { color: #E3C47E; }
body.tod-night .hero .kicker::before { background: #C9A45C; }
body.tod-night .hero__title { background: linear-gradient(100deg, #FFFFFF 0%, #F3EAD6 40%, #F1D79A 70%, #FFFFFF 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
body.tod-night .hero__sub { color: #C9C4B6; }
body.tod-night .hero__time { background: rgba(255,255,255,.06); border-color: rgba(237,230,214,.2); color: #EDE6D6; box-shadow: none; }
body.tod-night .hero .btn--rose { background: rgba(255,255,255,.04); color: #EDE6D6; border-color: rgba(237,230,214,.35); }
body.tod-night .wx { color: #EDE6D6; background: rgba(255,255,255,.06); border-color: rgba(237,230,214,.18); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); }
body.tod-night .wx__loc, body.tod-night .wx__meta { color: #ABA899; }
body.tod-night .wx__ends { color: #E6DFCF; }
body.tod-night .wx__tip { color: #E3C47E; }
body.tod-night .wx__track { background: rgba(237,230,214,.16); }
body.tod-night .wx.is-night .wx__fill { background: linear-gradient(90deg, #8E7A4E, #E3C47E); }
body.tod-night .i-cloud { fill: #D8D1C2; stroke: none; }
body.tod-night .i-drop { stroke: #9DB7D6; }
/* 導覽列（未捲動時）在夜空上改淺色字、淺色 Logo；捲動後回到淺色導覽列 */
body.tod-night .nav:not(.is-solid) { background: transparent; }
body.tod-night .nav:not(.is-solid) .menu a { color: #D8D1C2; }
body.tod-night .nav:not(.is-solid) .langs { border-color: rgba(237,230,214,.25); background: transparent; }
body.tod-night .nav:not(.is-solid) .langs a { color: #ABA899; }
body.tod-night .nav:not(.is-solid) .brand img { content: url("img/logo-light.png"); }
body.tod-night .nav:not(.is-solid) .burger { background: rgba(255,255,255,.06); border-color: rgba(237,230,214,.25); }
body.tod-night .nav:not(.is-solid) .burger span { background: #EDE6D6; }
@media (max-width: 900px) {
  body.tod-night .nav:not(.is-solid) { background: rgba(12,19,17,.6); }
  body.tod-night .nav.is-open .menu a { color: var(--ink); }
}
@media (max-width: 600px) {
  .wx { padding: 14px 16px 10px; margin-top: 22px; }
  .wx__temp { font-size: 32px; } .wx__line { font-size: 16px; }
  .wx__ends { font-size: 13px; } .wx__tip { font-size: 12.5px; }
  .moon { width: 46px; height: 46px; right: 8%; top: 13%; }
}