:root{
  --bg:#f3f8fd;--card:#ffffff;--ink:#243447;--sub:#5b7186;--brand:#3579b8;--brand-dark:#1d4e7e;
  --accent:#5ba3d9;--line:#dce9f5;--gold:#e8a552;--sky-top:#4a8fd0;--sky-bot:#a8cdec;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--ink);line-height:1.9}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block;border-radius:14px}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
header{background:linear-gradient(90deg,var(--brand-dark),var(--sky-top));position:sticky;top:0;z-index:10;box-shadow:0 2px 14px rgba(29,78,126,.25)}
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:2px 14px;padding:10px 16px;max-width:960px;margin:0 auto}
.logo{color:#fff;font-weight:700;font-size:1.05rem;margin-right:auto}
.logo small{display:block;font-weight:400;font-size:.7rem;color:#cfe4f6}
.nav a.item{color:#e7f2fb;font-size:.9rem;padding:6px 2px}
.nav a.item:hover,.nav a.item.on{color:#fff;border-bottom:2px solid #fff}
.nav a.shop{background:#fff;color:var(--brand-dark);padding:7px 16px;border-radius:20px;font-size:.9rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.hero{background:#7fb2dc;color:#fff;text-align:center;padding:92px 16px 84px;position:relative;overflow:hidden}
.hero h1{font-size:2rem;letter-spacing:.08em;text-shadow:0 2px 14px rgba(29,78,126,.35);position:relative;z-index:1}
.hero p{color:#f2f8fd;margin-top:12px;max-width:640px;margin-left:auto;margin-right:auto;text-shadow:0 1px 8px rgba(29,78,126,.3);position:relative;z-index:1}
.hero .cta{display:inline-block;margin-top:24px;background:#fff;color:var(--brand-dark);padding:11px 30px;border-radius:26px;font-weight:700;box-shadow:0 4px 16px rgba(29,78,126,.28);position:relative;z-index:1}
main{padding:40px 0 10px}
section{margin-bottom:44px}
h2{color:var(--brand-dark);font-size:1.4rem;border-left:5px solid var(--accent);padding-left:12px;margin-bottom:18px}
h3{color:var(--brand);font-size:1.1rem;margin:18px 0 8px}
p{margin-bottom:12px;color:var(--ink)}
.muted{color:var(--sub);font-size:.92rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:16px;box-shadow:0 6px 22px rgba(90,140,190,.10)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tag{display:inline-block;background:#e3f0fb;color:var(--brand-dark);border-radius:14px;padding:1px 12px;font-size:.8rem;margin-right:6px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;font-size:.95rem;box-shadow:0 6px 22px rgba(90,140,190,.10)}
th{background:linear-gradient(90deg,var(--brand),var(--accent));color:#fff;text-align:left;padding:10px 12px;font-weight:600}
td{padding:8px 12px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
td.r,th.r{text-align:right;white-space:nowrap}
.note{background:#fef6ea;border-left:4px solid var(--gold);padding:12px 16px;border-radius:0 10px 10px 0;font-size:.92rem;color:var(--sub);margin:16px 0}
footer{background:linear-gradient(180deg,var(--brand-dark),#123553);color:#c3daee;margin-top:34px;padding:34px 16px;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
footer strong{color:#fff}
footer a{color:#9fd0f2}
.quote{font-style:normal;background:linear-gradient(135deg,#ffffff,#eef6fd);border:1px dashed var(--accent);border-radius:16px;padding:20px 24px;color:var(--brand-dark);margin:16px 0}
@media(max-width:600px){.hero h1{font-size:1.55rem}.hero{padding:56px 16px 48px}.nav{gap:2px 10px}.nav a.item{font-size:.83rem}}
@media (prefers-color-scheme: dark){
 :root:not([data-theme="light"]){
  --bg:#0e1a29;--card:#16273b;--ink:#e3edf7;--sub:#93aac0;--brand:#7db8e8;--brand-dark:#0a1522;
  --accent:#5ba3d9;--line:#24405c;--gold:#e0a558;--sky-top:#16324f;--sky-bot:#0e1a29;
 }
 :root:not([data-theme="light"]) .hero{background:linear-gradient(175deg,#1b3a5c 0%,#122a44 65%,#0e1a29 100%)}
 :root:not([data-theme="light"]) .hero::before,:root:not([data-theme="light"]) .hero::after{background:rgba(140,180,220,.10)}
 :root:not([data-theme="light"]) table{background:#16273b;box-shadow:none}
 :root:not([data-theme="light"]) .card{box-shadow:none}
 :root:not([data-theme="light"]) .tag{background:#1f3a55;color:#bcd9f0}
 :root:not([data-theme="light"]) .note{background:#22303f}
 :root:not([data-theme="light"]) .quote{background:#16273b}
 :root:not([data-theme="light"]) .nav a.shop{background:#dcebf9}
}
:root[data-theme="dark"]{
 --bg:#0e1a29;--card:#16273b;--ink:#e3edf7;--sub:#93aac0;--brand:#7db8e8;--brand-dark:#0a1522;
 --accent:#5ba3d9;--line:#24405c;--gold:#e0a558;--sky-top:#16324f;--sky-bot:#0e1a29;
}

/* 一天的天空:早晨/中午/黃昏 主題 */
:root{--hero-tint:linear-gradient(180deg,rgba(60,120,180,.42),rgba(120,170,220,.18) 60%,rgba(250,240,225,.15))}
:root[data-sky="morning"]{--hero-tint:linear-gradient(180deg,rgba(168,205,238,.55),rgba(235,225,235,.30) 60%,rgba(255,235,215,.28));--sky-top:#7fb2dc;--brand:#3f7fb5;--brand-dark:#2a5a88;--accent:#6fa8d4;--gold:#e8b06a;--bg:#f5f9fd}
:root[data-sky="noon"]{--hero-tint:linear-gradient(180deg,rgba(45,110,180,.45),rgba(110,165,220,.20) 60%,rgba(215,235,250,.12))}
:root[data-sky="dusk"]{--hero-tint:linear-gradient(180deg,rgba(20,40,78,.30),rgba(60,60,90,.08) 55%,rgba(255,140,50,.12));--sky-top:#3a4f76;--brand:#b66a35;--brand-dark:#2c3a5c;--accent:#e0954e;--gold:#e8964a;--bg:#faf6f1;--line:#ecdfd0}
:root[data-sky="dusk"] .tag{background:#f6e7d6;color:#8a5426}
.skyswitch{position:absolute;top:14px;right:14px;z-index:3;display:flex;gap:6px}
.skyswitch button{border:none;cursor:pointer;background:rgba(255,255,255,.75);color:#2a4a6e;font-size:.78rem;padding:5px 12px;border-radius:16px;font-family:inherit;backdrop-filter:blur(4px)}
.skyswitch button.on{background:#fff;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.hero .greet{position:relative;z-index:1;font-size:.9rem;color:#fff;opacity:.92;letter-spacing:.2em;margin-bottom:8px;text-shadow:0 1px 8px rgba(29,78,126,.4)}

/* ===== 會動的天空 ===== */
.skybg{position:absolute;inset:0;opacity:0;transition:opacity 2.2s ease}
.skybg.morning{background:linear-gradient(180deg,#9cc4e8 0%,#c9dcee 45%,#f6dfc8 78%,#ffe9d0 100%)}
.skybg.noon{background:linear-gradient(180deg,#3d84c8 0%,#7ab2e0 55%,#c6e0f2 100%)}
.skybg.dusk{background:linear-gradient(180deg,#27436e 0%,#5a6a95 40%,#e8975a 78%,#f7b45f 100%)}
.skybg.show{opacity:1}
.sun{position:absolute;width:64px;height:64px;border-radius:50%;z-index:1;
 transition:left 2.4s cubic-bezier(.5,.1,.4,1),top 2.4s cubic-bezier(.5,.1,.4,1),background 2.2s,box-shadow 2.2s,width 2.2s,height 2.2s;
 animation:sunbreathe 6s ease-in-out infinite alternate}
@keyframes sunbreathe{from{filter:brightness(1)}to{filter:brightness(1.12)}}
:root[data-sky="morning"] .sun{left:16%;top:58%;width:58px;height:58px;background:#ffe9a8;box-shadow:0 0 42px 18px rgba(255,225,160,.85),0 0 130px 60px rgba(255,210,150,.35)}
:root[data-sky="noon"] .sun{left:50%;top:14%;width:54px;height:54px;background:#fffbe8;box-shadow:0 0 46px 20px rgba(255,252,220,.9),0 0 150px 70px rgba(255,255,235,.30)}
:root[data-sky="dusk"] .sun{left:76%;top:66%;width:74px;height:74px;background:#ffb440;box-shadow:0 0 52px 24px rgba(255,150,60,.9),0 0 170px 90px rgba(255,120,50,.35)}
.cloud{position:absolute;background:rgba(255,255,255,.55);border-radius:50%;filter:blur(22px);z-index:1;transition:background 2.2s}
.cloud.c1{width:300px;height:70px;top:24%;animation:drift1 52s linear infinite}
.cloud.c2{width:220px;height:56px;top:52%;animation:drift2 74s linear infinite}
.cloud.c3{width:170px;height:44px;top:10%;animation:drift1 96s linear infinite reverse}
:root[data-sky="dusk"] .cloud{background:rgba(255,190,140,.35)}
:root[data-sky="morning"] .cloud{background:rgba(255,240,225,.6)}
@keyframes drift1{from{left:-320px}to{left:110%}}
@keyframes drift2{from{left:110%}to{left:-260px}}
.horizon{position:absolute;left:0;right:0;bottom:0;height:56px;z-index:1;
 background:linear-gradient(180deg,rgba(20,30,40,0) 0%,rgba(18,28,38,.55) 55%,rgba(12,20,28,.8) 100%)}
.hero>.greet,.hero>h1,.hero>p,.hero>.cta{position:relative;z-index:2}
.skyswitch{z-index:3}
@media (prefers-reduced-motion: reduce){.sun,.cloud{animation:none}.sun{transition:none}.skybg{transition:none}}
.photo-card{padding:0;overflow:hidden}
.photo-card img{border-radius:16px 16px 0 0}
.photo-card p{padding:14px 20px;margin:0}