/* 版面：手機優先單欄（最寬 560px），底部固定五格導覽；公司後台改用寬版雙欄。單一淺色主題，依品牌規格。 */
:root{
  --bg:#FFFFFF; --ink:#252525; --ink2:#55595F; --red:#E94840; --red-ink:#C4302A; --red-soft:#FDECEA;
  --health:#EAF2F8; --health-ink:#2E5B7A; --beauty:#FFF0E7; --beauty-ink:#8A4B28;
  --soft:#F5F6F8; --line:#E1E4E8; --ok:#1F7A4D; --ok-soft:#E6F4EC; --warn:#8A5A00; --warn-soft:#FFF4D9;
  --r:16px; --font:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Heiti TC",system-ui,sans-serif;
  color-scheme:light; font-size:18px;
}
:root[data-scale="l"]{font-size:20px} :root[data-scale="xl"]{font-size:23px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.6;overflow-x:hidden}
h1,h2,h3,p{margin:0} h1,h2,h3{line-height:1.3;text-wrap:balance}
a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid #9AA0A8;border-radius:12px;padding:.6rem .75rem;width:100%;min-height:48px}
textarea{min-height:7rem;resize:vertical}
input[type=checkbox]{width:1.4rem;height:1.4rem;min-height:0;padding:0;accent-color:var(--red);flex:none}
:focus-visible{outline:3px solid #1B66C9;outline-offset:2px}
.small{font-size:max(16px,.89rem);color:var(--ink2)}
.demo{background:var(--warn-soft);color:#5A3B00;font-size:max(16px,.89rem);padding:.4rem 16px;display:flex;gap:.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.demo button{background:#fff;border:1.5px solid #B88A2A;border-radius:999px;padding:.3rem .9rem;min-height:40px;font-weight:600}
.app{max-width:560px;margin:0 auto;padding-inline:16px;padding-block:0 calc(6.5rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:1rem}
.app.wide{max-width:1120px;padding-block:0 3rem}
.top{display:flex;align-items:center;gap:.5rem;min-height:56px;padding-top:.5rem}
.top h1{font-size:1.25rem;flex:1;min-width:0}
.top.center h1{text-align:center}
.brand{display:flex;align-items:center;gap:.4rem;font-size:1.2rem;font-weight:700;flex:1}
.iconbtn{width:48px;height:48px;border:0;background:none;border-radius:50%;display:grid;place-items:center;position:relative;flex:none}
.iconbtn:hover{background:var(--soft)}
.dot{position:absolute;top:9px;right:9px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2px solid #fff}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--beauty);color:var(--beauty-ink);display:grid;place-items:center;font-weight:700;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.ico{width:1.6rem;height:1.6rem;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hello h2{font-size:1.55rem} .hello p{color:var(--ink2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;padding:.5rem 1.2rem;border-radius:999px;border:1.5px solid var(--ink);background:#fff;font-weight:700;text-align:center}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:#D63C35}
.btn.ghost{border-color:var(--line);font-weight:600}
.btn.danger{border-color:var(--red-ink);color:var(--red-ink)}
.btn.block{width:100%}
.btn[disabled]{background:var(--soft);border-color:var(--line);color:var(--ink2);cursor:not-allowed}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.row>.grow{flex:1;min-width:0}
.col{display:flex;flex-direction:column;gap:.75rem}
.card{border:1px solid var(--line);border-radius:var(--r);padding:1rem;background:#fff}
.soft{background:var(--soft);border-radius:var(--r);padding:1rem}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-top:.4rem}
.sec h2{font-size:1.25rem}
.sec a{color:var(--ink2);font-size:max(16px,.89rem);min-height:48px;display:inline-flex;align-items:center}
.hero{border-radius:var(--r);padding:1.2rem;display:flex;gap:.5rem;align-items:center;min-height:9.5rem;overflow:hidden}
.hero .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.hero h2{font-size:1.5rem}
.hero svg.art{width:42%;max-width:190px;flex:none}
.t-health{background:var(--health)} .t-beauty{background:var(--beauty)} .t-soft{background:var(--soft)}
.carousel{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r)}
.carousel::-webkit-scrollbar{display:none}
.carousel>*{flex:0 0 100%;scroll-snap-align:start}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
:root[data-scale="xl"] .grid3{grid-template-columns:1fr}
.tile{background:var(--soft);border-radius:var(--r);padding:.9rem .8rem;display:flex;gap:.6rem;align-items:center;min-height:4.5rem;border:0;text-align:left;width:100%}
.tile b{display:block;line-height:1.3} .tile .ico{color:var(--red-ink);width:1.9rem;height:1.9rem}
.tile.v{flex-direction:column;text-align:center;justify-content:center}
.tile.v .ico{color:var(--ink)}
.zone{border-radius:var(--r);padding:1rem 1.1rem;display:flex;align-items:center;gap:.5rem;min-height:5rem}
.zone b{font-size:1.2rem;display:block} .zone .grow{flex:1;min-width:0}
.zone svg.art{width:5.5rem;flex:none}
.bar{height:.5rem;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--red);border-radius:99px}
.list{display:flex;flex-direction:column}
.item{display:flex;gap:.75rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line);min-height:56px;width:100%;background:none;border-inline:0;border-top:0;text-align:left}
.item:last-child{border-bottom:0}
.item .grow{flex:1;min-width:0} .item b{display:block;line-height:1.35}
.thumb{width:4.6rem;height:4.6rem;border-radius:12px;flex:none;display:grid;place-items:center;overflow:hidden}
.thumb svg.art{width:80%} .thumb img{width:100%;height:100%;object-fit:cover}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:.1rem .7rem;font-size:max(16px,.83rem);font-weight:600;background:var(--soft);color:var(--ink);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.red{background:var(--red-soft);color:var(--red-ink)}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.35rem 1rem;min-height:48px;white-space:nowrap;font-weight:600;flex:none}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem} .kv dt{color:var(--ink2)} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.field{display:flex;flex-direction:column;gap:.3rem} .field>span{font-weight:600}
.check{display:flex;gap:.6rem;align-items:center;min-height:48px}
.empty{text-align:center;color:var(--ink2);padding:2rem 1rem;background:var(--soft);border-radius:var(--r)}
.note{background:var(--warn-soft);color:#5A3B00;border-radius:12px;padding:.7rem .9rem}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.photos>div{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--soft)}
.photos img{width:100%;height:100%;object-fit:cover}
.photos button{position:absolute;top:4px;right:4px;width:40px;height:40px;border-radius:50%;border:0;background:#252525;color:#fff;font-size:1.1rem}
.body{white-space:pre-wrap;overflow-wrap:anywhere}
.nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);z-index:20}
.nav>div{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:64px;padding:.3rem 0;font-size:clamp(16px,.8rem,17px);white-space:nowrap;color:var(--ink)}
.nav a.on{color:var(--red-ink);font-weight:700} .nav a.on .ico{stroke:var(--red);fill:var(--red-soft)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.cal span{color:var(--ink2);font-size:max(16px,.83rem);padding:.2rem 0}
.cal button{border:0;background:none;min-height:48px;border-radius:12px;position:relative;padding:0}
.cal button.has::after{content:"";position:absolute;bottom:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--red)}
.cal button.mine::after{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--red)}
.cal button.today{font-weight:800;text-decoration:underline}
.cal button.sel{background:var(--red);color:#fff} .cal button.sel::after{background:#fff}
.mask{position:fixed;inset:0;background:rgba(37,37,37,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:100%;max-width:600px;max-height:90%;overflow:auto;border-radius:20px 20px 0 0;padding:1.2rem 16px calc(1.2rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:.9rem}
.sheet h2{font-size:1.25rem}
#toast{position:fixed;left:16px;right:16px;bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));z-index:60;display:flex;justify-content:center;pointer-events:none}
#toast div{background:#252525;color:#fff;border-radius:14px;padding:.7rem 1.1rem;max-width:520px}
#toast div.err{background:#8E1F1A}
.adm{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1.5rem;align-items:start}
.adm nav{display:flex;flex-direction:column;gap:.2rem;position:sticky;top:1rem}
.adm nav a{padding:.6rem .8rem;border-radius:12px;min-height:48px;display:flex;align-items:center;gap:.5rem}
.adm nav a.on{background:var(--red-soft);color:var(--red-ink);font-weight:700}
.admsel{display:none}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:34rem}
th,td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--soft);font-weight:700;white-space:nowrap} tr:last-child td{border-bottom:0}
td .btn{min-height:44px;padding:.3rem .8rem}
.perm th,.perm td{text-align:center;padding:.4rem} .perm td:first-child,.perm th:first-child{text-align:left}
@media (max-width:820px){.adm{grid-template-columns:1fr}.adm nav{display:none}.admsel{display:block}}
@media (min-width:821px){.mask{align-items:center}.sheet{border-radius:20px}}
@media (prefers-reduced-motion:no-preference){.carousel{scroll-behavior:smooth}}
/* 窄螢幕與放大文字的調整 */
.demo{flex-wrap:nowrap}
.demo span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo button{flex:none}
.hero .btn{white-space:nowrap}
.hero svg.art{width:36%}
.card.row>.grow{flex:1 1 9rem}
:root[data-scale="xl"] .grid2{grid-template-columns:1fr}
:root[data-scale="xl"] .hero svg.art{display:none}
:root[data-scale="xl"] .zone svg.art{display:none}
.card .row>.grow{flex:1 1 9rem}
.sheet{max-width:760px}
table.perm{min-width:30rem}
[aria-busy="true"]{opacity:.6;pointer-events:none}
form.col{gap:.9rem}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:7rem;border:2px dashed var(--red);border-radius:var(--r);background:var(--red-soft);color:var(--red-ink);cursor:pointer;text-align:center;padding:1rem}
.drop .ico{width:2.2rem;height:2.2rem}
.drop:focus-within{outline:3px solid #1B66C9;outline-offset:2px}
.hero img.heroimg{width:44%;max-width:210px;aspect-ratio:1;object-fit:cover;border-radius:12px;flex:none}
:root[data-scale="xl"] .hero img.heroimg{display:none}
.avatar .ico{width:1.5rem;height:1.5rem}

/* ===== 第二版視覺：健康＝亮藍、美麗＝品牌紅，大色塊與粗標題 ===== */
:root{--blue:#2457F5;--blue-ink:#1D46C7;--blue-soft:#EAF0FF;--lime:#C8F25A;--peach:#FFE4D6;--warm:#FFF7F2}
h1,h2,h3,b{font-weight:800}
.z-health{--z:var(--blue);--z-ink:var(--blue-ink);--z-soft:var(--blue-soft)}
.z-beauty{--z:var(--red);--z-ink:var(--red-ink);--z-soft:var(--red-soft)}
.big{font-size:1.7rem;font-weight:900;letter-spacing:.01em}
.hello h2{font-size:1.7rem;font-weight:900}
.btn.z{background:var(--z);border-color:var(--z);color:#fff}
.btn.zo{background:#fff;border:2px solid var(--z);color:var(--z-ink)}
.nav a.on.zh{color:var(--blue-ink)} .nav a.on.zh .ico{stroke:var(--blue);fill:var(--blue-soft)}
/* 首頁輪播：大色塊＋圓形裝飾 */
.hero{position:relative;min-height:11rem;padding:1.3rem}
.hero .txt,.hero svg.art,.hero img.heroimg{position:relative;z-index:1}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%}
.hero::before{width:9rem;height:9rem;right:-2.5rem;top:-3rem;background:var(--lime);opacity:.95}
.hero::after{width:7rem;height:7rem;right:4rem;bottom:-4rem;background:rgba(255,255,255,.28)}
.hero.t-health{background:var(--blue);color:#fff}
.hero.t-beauty{background:var(--red);color:#fff}
.hero.t-soft{background:var(--peach);color:var(--ink)}
.hero h2{font-size:1.7rem;font-weight:900}
.hero.t-health .btn.red,.hero.t-beauty .btn.red{background:#fff;border-color:#fff;color:var(--ink)}
/* 首頁四個快捷入口：白底卡片＋彩色圖示 */
.grid2 .tile{background:#fff;border:1px solid var(--line);box-shadow:0 2px 0 rgba(37,37,37,.04)}
.grid2 .tile>.ico{width:2.9rem;height:2.9rem;padding:.55rem;border-radius:14px}
.grid2 .tile:nth-child(1)>.ico{background:var(--red-soft);color:var(--red-ink)}
.grid2 .tile:nth-child(2)>.ico{background:var(--blue-soft);color:var(--blue-ink)}
.grid2 .tile:nth-child(3)>.ico{background:#FFF1D6;color:#9A5B00}
.grid2 .tile:nth-child(4)>.ico{background:#E8F7D0;color:#3F6B00}
/* 專區入口與經銷商卡片：實色 */
.zone{position:relative;overflow:hidden;min-height:5.6rem}
.zone.t-health{background:var(--blue);color:#fff}
.zone.t-beauty{background:var(--red);color:#fff}
.zone.t-health .small,.zone.t-beauty .small{color:#fff;opacity:.92}
.zone.t-soft{background:var(--warm);border:1px solid #F3DCCD}
.zone.t-soft>.ico:first-child{color:var(--blue-ink)}
.soft{background:var(--warm)}
/* 專區首頁 */
.vhero{position:relative;overflow:hidden;display:flex;align-items:center;gap:.5rem;min-height:12.5rem;border-radius:20px;padding:1.4rem;background:var(--z);color:#fff}
.vhero::before{content:"";position:absolute;width:6.5rem;height:6.5rem;border-radius:50%;background:var(--lime);right:38%;top:-1.8rem}
.z-beauty .vhero::before{background:#FFC2B8}
.vhero::after{content:"";position:absolute;width:11rem;height:11rem;border-radius:50%;background:rgba(255,255,255,.22);right:-3rem;bottom:-4.5rem}
.vhero .txt{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.vhero .txt b{font-size:1.9rem;font-weight:900;line-height:1.2}
.vhero .txt i{width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;color:var(--z-ink);display:grid;place-items:center;margin-top:.3rem}
.vhero svg.art{position:relative;z-index:1;width:42%;max-width:190px;flex:none}
.qks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.qk{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;min-height:48px;padding:.3rem 0}
.qk span{width:3.2rem;height:3.2rem;border-radius:16px;background:var(--z-soft);color:var(--z-ink);display:grid;place-items:center}
.qk b{font-size:max(16px,.89rem);line-height:1.3}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.pcard{display:flex;flex-direction:column;gap:.3rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;padding-bottom:.8rem;background:#fff}
.pcard .pimg{aspect-ratio:4/3;background:var(--z-soft);display:grid;place-items:center;overflow:hidden}
.pcard .pimg img{width:100%;height:100%;object-fit:cover} .pcard .pimg svg.art{width:70%}
.pcard b,.pcard .small{padding-inline:.8rem;overflow-wrap:anywhere}
.pcard .more{margin:.3rem .8rem 0;align-self:flex-end;border:1.5px solid var(--ink);border-radius:999px;padding:.2rem .9rem;font-weight:700;font-size:max(16px,.89rem);min-height:40px;display:inline-flex;align-items:center}
.z-health .sec a,.z-beauty .sec a{color:var(--z-ink);font-weight:700}
/* 產品詳情 */
.phero{border-radius:20px;background:var(--z-soft);min-height:14rem;display:grid;place-items:center;overflow:hidden;position:relative}
.phero::before{content:"";position:absolute;width:10rem;height:10rem;border-radius:50%;background:var(--z);opacity:.9;left:-3rem;top:-3rem}
.phero img{position:relative;width:100%;max-height:22rem;object-fit:cover}
.phero svg.art{position:relative;width:62%;max-width:260px}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.tabs button{min-height:48px;border-radius:999px;border:0;background:var(--soft);font-weight:700;padding:.3rem .4rem}
.tabs button.on{background:var(--z);color:#fff}
.feat{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.4rem}
:root[data-scale="xl"] .pgrid{grid-template-columns:1fr}
:root[data-scale="xl"] .vhero svg.art{display:none}
:root[data-scale="xl"] .tabs{grid-template-columns:1fr}
:root[data-scale="xl"] .qks{grid-template-columns:repeat(2,minmax(0,1fr))}
.top h1.big{font-size:1.7rem}
.vhero::before{right:-1.5rem;top:-2.2rem;width:7.5rem;height:7.5rem}
.vhero::after{right:30%;bottom:-6rem}
.vhero .txt b{font-size:1.7rem}
.vhero svg.art{width:36%}
.grid2 .tile{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.9rem}
.top>.grow{flex:1;min-width:0}
.hero h2{word-break:keep-all;overflow-wrap:anywhere}
.photos1{display:flex;flex-direction:column;gap:.6rem}
.photos1 img{width:100%;border-radius:12px;background:var(--soft)}

/* ===== 長輩版：首頁三顆大按鈕、出門提醒、課程與旅遊團卡片 ===== */
.bigbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.bigbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-height:7.2rem;border-radius:var(--r);padding:.8rem .2rem;text-align:center;color:var(--ink);border:2px solid transparent}
.bigbtn .ico{width:2.6rem;height:2.6rem}
.bigbtn b{font-size:1.05rem;line-height:1.25;white-space:nowrap}
.bigbtn.t-course{background:var(--health)} .bigbtn.t-course .ico{color:var(--health-ink)}
.bigbtn.t-tour{background:var(--ok-soft)} .bigbtn.t-tour .ico{color:var(--ok)}
.bigbtn.t-share{background:var(--beauty)} .bigbtn.t-share .ico{color:var(--beauty-ink)}
.bigbtn:focus-visible{border-color:var(--ink)}
:root[data-scale="xl"] .bigbtns{grid-template-columns:1fr} :root[data-scale="xl"] .bigbtn{flex-direction:row;min-height:4.6rem;justify-content:flex-start;padding-inline:1.1rem}
.soon{display:flex;flex-direction:column;gap:.15rem;background:var(--warn-soft);color:#5A3B00;border-radius:var(--r);padding:.9rem 1.1rem;border:2px solid #F0D79A}
.soon b{font-size:1.2rem;color:var(--ink)}
.tour{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink)}
.tour img{width:100%;aspect-ratio:16/9;object-fit:cover;max-width:100%}
.evimg{width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.guestpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.guestpick .btn{min-height:3.4rem;font-size:1.1rem}
.guestpick .btn:first-child{grid-column:1/-1}
.bigcta{min-height:3.6rem;font-size:1.2rem}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem}
.done>.ico{width:4rem;height:4rem;color:var(--ok);background:var(--ok-soft);border-radius:50%;padding:.7rem}
.done h2{font-size:1.6rem;margin:.2rem 0}
.done p{margin:0}
.done .btn{margin-top:.8rem}

.newver{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.2rem + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.8rem 1.4rem;font-weight:700;min-height:48px;box-shadow:0 6px 20px rgba(0,0,0,.25);white-space:nowrap}

/* 首頁大按鈕剩兩顆；旅遊團改成下方橫條 */
.bigbtns{grid-template-columns:repeat(2,minmax(0,1fr))}
.bigbtn{min-height:6.4rem}
.tourbar{background:var(--ok-soft);gap:.8rem}
.tourbar>.ico:first-child{width:2.2rem;height:2.2rem;color:var(--ok)}
/* 產品圖（800×800 白底、產品置中）：整張顯示、不裁切，底色用白色跟圖融在一起 */
.thumb:has(img),.pcard .pimg:has(img),.phero:has(img){background:#fff}
.phero:has(img)::before{display:none}
.thumb img{max-height:100%;min-height:0;min-width:0;object-fit:contain}
.pcard .pimg img{object-fit:contain}
.phero img{width:auto;max-width:100%;height:min(20rem,80vw);max-height:none;object-fit:contain;margin:0 auto;display:block}
.phero:has(img){border:1px solid var(--line)}

/* 首頁大圖：照片完整露出，下方白底深色字 */
.hero.photo{display:flex;flex-direction:column;gap:0;padding:0;min-height:0;background:#fff;color:var(--ink);align-items:stretch;border:1px solid var(--line)}
.hero.photo::before,.hero.photo::after{display:none}
.hero.photo img.bg{display:block;width:100%;max-width:100%;aspect-ratio:16/10;object-fit:cover;object-position:60% 45%}
.hero.photo .txt{padding:1rem 1.2rem 1.15rem;gap:.35rem}
.hero.photo h2{font-size:1.45rem;line-height:1.3;font-weight:800}
.hero.photo p{color:var(--ink2)}
/* 首頁兩張專區照片卡 */
.zcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.zcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink)}
.zcard img{display:block;width:100%;max-width:100%;aspect-ratio:3/2;object-fit:cover}
.zcard .zt{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .8rem .85rem;min-width:0}
.zcard b{font-size:1.2rem}
.zcard .zt>span{color:var(--ink2);font-size:max(16px,.85rem);line-height:1.4}
.zcard em{font-style:normal;font-weight:800;color:var(--red-ink);display:flex;justify-content:space-between;margin-top:.35rem}
:root[data-scale="xl"] .zcards{grid-template-columns:1fr}
/* 專區大圖（超好美麗）：產品照完整露出，標題放下方深綠色塊（取自照片中的禮盒色） */
.vhero.photo{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;background:#fff;color:var(--ink);border:1px solid var(--line)}
.vhero.photo::before,.vhero.photo::after{display:none}
.vhero.photo img.bg{display:block;width:100%;max-width:100%;aspect-ratio:16/10;object-fit:cover}
.vhero.photo .txt{padding:1rem 1.2rem 1.15rem;gap:.35rem;position:relative}
.vhero.photo .txt b{font-size:1.5rem}
.vhero.photo .txt span{color:var(--ink2)}
.vhero.photo .txt i{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);margin:0;color:#fff;background:var(--z)}
.vhero.photo .txt{padding-right:4.6rem}
.vhero.photo .txt b{font-size:1.3rem;text-wrap:balance;word-break:keep-all}

/* 專區頁（有產品照）：大標＋說明＋圓角照片＋兩顆按鈕 */
.zphoto .top{align-items:flex-start;padding-top:.8rem}
.zphoto h1.big{font-size:1.9rem;font-weight:800}
.zsub{color:var(--ink2);font-size:1.05rem;margin-top:.3rem}
.zpic{display:block;border-radius:20px;overflow:hidden}
.zpic img{display:block;width:100%;max-width:100%;aspect-ratio:16/10;object-fit:cover}
.zbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.zbtns .btn{border-radius:14px;min-height:3.4rem;font-size:1.1rem}
.btn.dark{background:#2B3A33;border-color:#2B3A33;color:#fff}
.zbtns .btn.ghost{background:#fff;border:1.5px solid var(--line)}
.zhr{border:0;border-top:1px solid var(--line);margin:.2rem 0}
.zlinks{display:flex;gap:1.2rem;flex-wrap:wrap}
.zlinks a{display:inline-flex;align-items:center;gap:.35rem;min-height:48px;font-weight:700;color:var(--ink2)}
.zsub{margin-top:-.7rem;font-size:1rem}
/* 課程海報（直式）：卡片只露出海報上半部標題，詳細頁整張顯示 */
.tour img[src^="/events/"]{aspect-ratio:16/10;object-position:center 12%}
.evimg[src^="/events/"]{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}
/* 橫式課程海報：卡片和詳細頁都整張顯示 */
.tour img[src*="-wide"],.evimg[src*="-wide"]{aspect-ratio:auto;height:auto;object-fit:contain}

/* 地區顏色：台北紅、台中藍、高雄綠（同公司行事曆） */
.c-tp{--city:#D93025} .c-tc{--city:#1A73C9} .c-kh{--city:#2E9B3F} .c-other{--city:#6B6B6B}
.city{display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--city);color:#fff;font-weight:800;border-radius:10px;padding:.2rem .6rem;font-size:max(16px,.9rem);white-space:nowrap}
.city.big{font-size:1.1rem;padding:.3rem .9rem}
.tour[class*=" c-"]{border:2px solid var(--city)}
.cityband{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;background:var(--city);color:#fff;font-weight:800;font-size:1.25rem;padding:.55rem 1rem}
.cityband em{font-style:normal;font-weight:700;font-size:1rem;opacity:.95}
.cityfilter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.cityfilter .chip{width:100%;font-size:1.05rem}
.cityfilter .chip[class*=" c-"]{border-color:var(--city);color:var(--city)}
.cityfilter .chip[class*=" c-"].on{background:var(--city);color:#fff}
.itemcity{display:block;margin-bottom:.25rem}

/* 知識文章：封面圖 */
.artthumb{width:6.4rem;flex:none;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.artthumb img{width:100%;height:100%;object-fit:cover;display:block}
.artcover{width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.artbody{font-size:1.05rem;line-height:1.85}
:root[data-scale="xl"] .artthumb{width:5rem}
/* 今日一件好事 */
.deedhead{display:flex;flex-direction:column;gap:.4rem;padding:.4rem .2rem 0}
.deedhead h2{font-size:clamp(1.75rem,7vw,2rem);line-height:1.3;font-weight:800}
.deedhead p{color:var(--ink2);font-size:1.1rem}
.deedok{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:var(--red);color:#fff}
.deedok .ico{width:1.8rem;height:1.8rem}
.deedpic{display:block;width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;object-position:55% 40%;border-radius:20px}
.deeds{display:flex;flex-direction:column;gap:.7rem}
.deed{display:flex;align-items:center;gap:.9rem;width:100%;min-height:76px;padding:.9rem 1rem;border-radius:18px;border:2px solid var(--line);background:#fff;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.deed .grow{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.deed b{font-size:1.35rem;line-height:1.3}
.deed .grow>span{color:var(--ink2);font-size:1.05rem;line-height:1.4}
.deed .dk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;border:2px solid var(--line);background:#fff;color:#fff}
.deed .dk .ico{width:1.3rem;height:1.3rem}
.deed.on{border-color:var(--red);background:var(--red-soft)}
.deed.on .dk{background:var(--red);border-color:var(--red)}
.deed.did:not(.on) .dk{background:var(--ink2);border-color:var(--ink2)}
.deed em{flex:none;font-style:normal;font-weight:700;font-size:.95rem;color:var(--red-ink)}
.deed:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn.deedgo{width:100%;min-height:60px;font-size:1.25rem}
.btn.deedgo:disabled{background:#fff;color:var(--ink2);border-color:var(--line);opacity:1}
.deedtip{text-align:center;color:var(--ink2)}
.deedfoot{text-align:center;color:var(--ink2);font-size:1.05rem;margin-top:.4rem}
.btn.deedhome{width:100%}
.deedlog{border-top:1px solid var(--line);padding-top:.6rem}
.deedlog summary{min-height:48px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.deedcard{align-items:center}
.deedcard .grow{display:flex;flex-direction:column}
/* 產品教學影片 */
.vlist{display:flex;flex-direction:column;gap:.7rem}
.vcard{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.6rem;color:var(--ink)}
.vthumb{position:relative;flex:none;width:44%;max-width:180px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#F3EFEA}
.vthumb img{display:block;width:100%;height:100%;object-fit:cover}
.vthumb i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.18)}
.vthumb i .ico{width:2.6rem;height:2.6rem;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.vt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.vt b{font-size:1.1rem;line-height:1.35}
.vbox{position:relative;background:#000;border-radius:16px;overflow:hidden;user-select:none;-webkit-user-select:none}
.vbox video{display:block;width:100%;max-height:70vh;background:#000}
.vmark{position:absolute;left:8%;top:12%;z-index:3;pointer-events:none;color:#fff;opacity:.45;font-size:max(14px,.9rem);font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap;transition:left 1.2s,top 1.2s}
.vfs{position:absolute;right:.5rem;top:.5rem;z-index:4;display:inline-flex;align-items:center;gap:.25rem;min-height:40px;padding:.3rem .7rem;border:0;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:inherit;font-size:.95rem}
.vfs .ico{width:1.1rem;height:1.1rem}
.vbox.full{position:fixed;inset:0;z-index:200;border-radius:0;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
.vbox.full video{max-height:100%;height:100%}
.vbox.full .vfs span::after{content:''}
body.vfixed{overflow:hidden}
body.vfixed .nav{display:none}
.vnote{background:var(--red-soft);border-radius:12px;padding:.6rem .8rem;color:var(--ink)}
/* 保健食品提醒 */
.medtip{display:flex;gap:.7rem;align-items:flex-start;background:#FFF6E5;border:1.5px solid #F0C36A;border-radius:16px;padding:.9rem 1rem;color:var(--ink)}
.medtip .ico{flex:none;width:1.6rem;height:1.6rem;color:#B7791F;margin-top:.1rem}
.medtip p{margin:0;line-height:1.55}
.medtip b{display:block;font-size:1.1rem;margin-bottom:.15rem}
.medline{margin:0;color:var(--ink2);font-size:max(16px,.95rem);text-align:center}
/* 團隊 */
.teamhead{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.teamhead h2{font-size:1.4rem}
.tbadge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--red-soft);color:var(--red-ink)}
.tbadge .ico{width:1.7rem;height:1.7rem}
.ttask.did{background:#F6F8F5}
.tdone{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--red-ink);flex:1}
.tdone .ico{width:1.4rem;height:1.4rem}
.tprog{display:flex;align-items:center;gap:.7rem}
.tprog .bar{flex:1}
.card.off{opacity:.65}
details summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:600}
.leadtabs{--z:var(--red)}
.leadtabs button.on{background:var(--red);color:#fff}
.tfrom{align-self:flex-start;font-size:.9rem;font-weight:700;color:var(--red-ink);background:var(--red-soft);border-radius:999px;padding:.1rem .6rem}
/* 好事：人數、花園、分享牆、靈感 */
.deedn{display:flex;align-items:center;gap:.45rem;margin:0;padding:.55rem .9rem;border-radius:999px;background:var(--red-soft);color:var(--ink);font-size:1.05rem;align-self:flex-start}
.deedn .ico{width:1.3rem;height:1.3rem;color:var(--red-ink);flex:none}
.deedn b{color:var(--red-ink);font-size:1.2rem}
.deednote textarea{min-height:4.5rem;font-size:1.05rem}
.garden{display:flex;flex-direction:column;gap:.6rem;background:#FFFBF5;border:1px solid #F3E4D3;border-radius:20px;padding:1rem}
.garden h3{font-size:1.2rem}
.gcount{color:var(--red-ink);font-size:1.2rem}
.gdgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem}
.gd{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border-radius:12px;background:#fff}
.gd svg{width:72%;height:72%}
.gd i{position:absolute;right:3px;bottom:1px;font-style:normal;font-size:11px;color:#A0A0A0}
.gd.u{background:transparent}
.gd.t{outline:2px dashed #F2B8B2}
.gd.p svg{width:52%;height:52%;opacity:.8}
.dfeed{display:flex;flex-direction:column;gap:.6rem}
.dnote{background:#fff;border:1px solid var(--line);border-left:4px solid #F28B82;border-radius:14px;padding:.7rem .9rem}
.dnote p{margin:0 0 .2rem;font-size:1.1rem;line-height:1.5}
.dideas{display:flex;flex-direction:column;gap:.25rem;background:var(--soft);border-radius:16px;padding:.9rem 1rem}
.dideas b{display:flex;align-items:center;gap:.35rem;font-size:1.1rem}
.dideas b .ico{width:1.2rem;height:1.2rem;color:var(--red-ink)}
.dideas ul{margin:.3rem 0 0;padding-left:1.2rem;line-height:1.8;font-size:1.05rem}
.dfirst{margin:0;padding:.8rem 1rem;border:1.5px dashed #F2B8B2;border-radius:14px;color:var(--ink);font-size:1.05rem;text-align:center}
.leadtabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* 體驗模式提示 */
.demobar{position:sticky;top:0;z-index:30;background:#fff4d6;color:#7a5200;text-align:center;font-size:.85rem;padding:.35rem .8rem;border-bottom:1px solid #f0d58a}
.tagchips{flex-wrap:wrap}